Copying/duplicating Screens

[Matthew Gudenius]

Hello, everybody... quick introduction: I am a paperless classroom teacher (and a computer programmer, as well), trying to push my kids as far as they can go with modern tools and technologies (read "The Paperless Classroom is Coming" in Oct. 20 issue of TIME Magazine)

Anyway, I introduced MIT App Inventor to my students this year, just to get them exposed to it and see how it goes. They were so eager and excited by the tutorials (TTS and speech recognition) that I decided to give them a REAL project to meet our science standards 

Everything was going great, with some of the students completing theirs apps, with the plan being this: combine all of the individual student apps into ONE combined app which we could upload to Google Play and make available to the public as an educational game/tool for other schools and students. (The app is a science simulation to determine a suitable environment/biome/ecosystem for different animals -- so each student's app follows similar structure/interface and gameplay, but with different animals and scenarios)

The problem is this: there is no easy way to copy/duplicate screens (I don't understand why; seems like this would be INCREDIBLY easy to implement), and there is no way to import projects into other projects; the idea being that Screen1 would be a "Menu" to select which animal you'd like to "play";  the App Inventor forums suggest that there's not a good reason to have multiple different screens, and that it better architecting can be done to avoid that, and for the most part agree -- for example, I taught my students to make this app as a "single-screen application", toggling hidden assets on and off as appropriate to modify the display and dynamic output. However, this scenario -- in which you can have multiple apps embedded into one -- is one case where multiple screens DOES make sense (we could do it as a single-screen application, but the amount asset-loading -- such as images -- and variable declaration/instantiation would be incredibly large, probably causing serious lag and loading delays)

I found this tutorial on how you can manually manipulate folders/files of the project to duplicate or copy screens (both layout and blocks) BUT it appears to be for the original AI ... not AI2:

http://osdir.com/ml/programming-with-app-inventor/2012-03/msg01064.html 

As an experiment, I downloaded the .aia files and was, indeed, able to look inside the file structure (once changing extension to .rar), and was able to extract the folder structures... BUT the problem is that if I repackage/compress (using either .rar or .zip format) and rename to .aia, it won't accept it: "The selected project is not a project source file!"  so, clearly, there's some sort of metadata or something that is being rejected by going to this new .aia proprietary structure.  That, combined with the inability to do this sort of task within AI itself, is a HUGE drawback and problem.

It means I would literally have to re-create -- by hand -- every app my students have created (and it's not even like real code where you can just copy-and-paste).  I'm not going to do that, which means where I am left is: nobody will get to use my students' apps.

Hugely disappointing.

I was considering having my students do a similar project for social studies next year, but in the format of a game that could also be used by the blind/visually-impaired.  However, I don't know if I can do that now, because it was going to have a similar structure: Screen1 as menu to select from the individual "sub-games"

Does anybody have any idea how this problem can be solved??  My students and I have loved MIT App Inventor, but with these limitations, I can't really use it in my classroom with my students...

[Matthew Gudenius]

PS. This is an extremely useful -- and so easy to implement -- fix. I noticed that, with release of the Open Source, they are looking at potential contributors.   Although I have other development projects going on right now, I would love to add this fix/feature if nobody else will.

Looking at the .aia file structure, it's pretty much as simple as this: in the UI, create a "Duplicate screen" button within a project, which prompts for new screen's name, then simply copies the file -- .bky .scm JSON and XML files, etc -- into new ones of the new screen name. Preferably, you could also have a "Copy screen from..." feature which would allow you to go into any screen and overwrite its contents (layout and blocks) with those of a screen from ANY other project...  Again, another really easy, rudimentary task, but SO useful.

[Jos Flores]

When you rezip your files, make sure you select the modified files
directly and not the folder in which those files are. The system does
not expect to find a folder with the bky and so forth files inside,
but expects to find them directly. If it finds a folder, it will
reject it and log out that it is not a project source file.

With regards to the changes you mention, really looking forward to a
few pull requests. Thanks for volunteering to do this.

cheers,
José

> --
> You received this message because you are subscribed to the Google Groups
> "App Inventor Open Source Development" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to app-inventor-open-so...@googlegroups.com.
> To post to this group, send email to
> app-inventor-o...@googlegroups.com.
> Visit this group at
> http://groups.google.com/group/app-inventor-open-source-dev.
> For more options, visit https://groups.google.com/d/optout.

[Matthew Gudenius]

Ah, good point, I will have to double-check that!

However, with how useful of a feature this is to automate (rather than do by hand), and with how many people on the web seem to have wanted the same functionality... I might head on over to Github and try to help the AI team out by adding it, if possible.

You received this message because you are subscribed to a topic in the Google Groups "App Inventor Open Source Development" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/app-inventor-open-source-dev/qlBxwQScxBU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to app-inventor-open-so...@googlegroups.com.

[Jos Flores]

Most certainly possible, just needs enough time invested to get done.

github: https://github.com/mit-cml/appinventor-sources

docs: http://appinventor.mit.edu/appinventor-sources/#documentation

Help to get up and running is provided in this forum.

cheers,
José

[Matthew Gudenius]

Thanks, José! Your quick assessment of my human error was spot-on. Doh! I didn't even think to double-check the file-structure was identical. (Compressing to .zip and renaming to .aia worked fine)

Process is still a bit cumbersome, and I know people would appreciate this feature, so I might add it -- but currently knee-deep in developing a VR game (Unity/Oculus) along with a custom interface for it... so I'll fork the git and keep it on my back burner for now.

[Taifun]

see my answer in the main forum https://groups.google.com/d/msg/mitappinventortest/5wa7uOnt1UQ/B_RUaEQuOlkJ

Taifun

[Hal Abelson]

As Taifun says in this thread, check out the app inventor project merger tool.  It was created for just the teaching scenario you describe.

--

[Matthew Gudenius]

Maybe I spoke too soon... interestingly, renaming all of the screens (.bky, .scm, .yail) files and packaging them correctly into .aia worked okay for upload.

I can run the program via AI Companion app.

And I can modify the Blockly blocks/code okay.

HOWEVER, if I do anything on the Designer screen (such as click on an existing component, or try to add a new one), it crashes with an internal error: 

notes = Browser: Mozilla/5.0 (Windows NT 6.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36
foundIn = nb143h
faultData = com.google.gwt.core.client.JavaScriptException: (TypeError) : Cannot read property 'yd' of null
projectId = 6502408904507392

Kind of annoying... means if there is a single bug I have to import all of the individual projects and bug-fix them first individually, then download them each, convert .aia to .zip, extract, rename the files, move intothe folder, compress to zip, change to .aia, and upload again... (and then, HOPEFULLY, it will compile. I'm a little concerned about .apk working properly at this point, but also not sure why nulls are appearing for things that shouldn't be null)

[Matthew Gudenius]

Question re: Project Merge (before I try to use it) -- I noticed the documentation appears to show AI Classic; I know significant changes were made in AI2, but not sure if those changes (which seem to be mostly at Component and component-naming level) would matter here, or if the merge should still work okay  [guess I'll give it a try to test it out anyway]

[Matthew Gudenius]

Looks like it doesn't work, at least not for AI2 files. The project uploaded okay, but upon clicking to open, it doesn't even open at all -- just gives a crash & bug report:

notes = Browser: Mozilla/5.0 (Windows NT 6.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36
foundIn = nb143h
faultData = com.google.gwt.core.client.JavaScriptException: (TypeError) : Cannot read property 'c' of null
projectId = -1

[Matthew Gudenius]

OKAY! Had some bumps along the way due to the messiness of naming (to make teaching easier, I had students use standard naming for things like screens, but if I had known better about these limitations, I would've come up with different naming conventions) -- I had to go in and carefully do some Find/Replace to get the screen components named correctly.

Looks like it's working now. (the Merge tool, however, is not)

Still looks like this type of task is one that could be greatly improved...

[Ghica]

This is a topic that pops up every few months. I wish that someone with the right skills would have taken half of the time we have spent discussing this, to update the merge tool. It exists for AI2 but it is pretty useless except in a classroom setting where the teacher makes sure that the students use unique screen names and do nothing useful in Screen1. I tried, it should be easy, but my knowledge is rusty and my time too limited.

Anyway, it is easy to do, it is explained better via the links Taifun gave, but some text is easier to use I think.
You open an .aia file with 7zip (do not rename to .zip and do not extract all files) Navigate in the src folder to the Screen1 files (there are 3), select and drag them to a temp folder. You have now unzipped copies in that folder, the originals are still there. You rename the three files to Screen2.bky (or some other screen name) etc. AND you edit the files with notepad++ to replace all occurrences of Screen1 with Screen2. Finally, you drag the files back into the open archive. 7zip will complain, but if you click OK it will add the new files to the archive. Now you have a project with 2 screens which are identical, except the name. You should be able to merge this now with another project from which you want to use the Screen1.

My merge trick is this: instead of using the merge tool, you open the .aia for which you want to use the Screen1 with 7zip, and you drag the renamed files into the folder where Screen1 is found. You can also drag assets into the assets folder (or even the whole assets folder if you do not have one in the other project). Click OK at the 7zip question and close. As a result you have a merged project.
For me, it worked great and much faster than the merge tool. I had three really complicated screens that I did not want to redo.

Yes, you should plan on not having a Screen1 with real content ever. But in practice it happens.
Cheers, Ghica.

[Matthew Gudenius]

With AI being open source and allowing for contributors, why not add this functionality directly to the core instead of hacking a work-around, which is what the Merge tool is?

Two buttons on the interface, right next to the screen-select dropdown, would solve the problem: a "Duplicate screen" button which is just like Add Screen, but copies the current screen's contents into the new one (this would be useful within projects, not just for merging them), and another button, "Copy screen from...", which would then prompt for a project in your library, followed by a screen from that project (in essence, doing the exact same thing as the Merge tool -- but completely in the cloud and with no need for downloads); in addition, there's no reason the Merge (either the stand-alone tool or if implemented in AI like I am suggesting) can't deal with duplicate screen names -- in the method I suggested, the screen name would be a moot point because you would create it in-project and thus it would be guaranteed to be unique.  But even in the Merge tool, there's no reason you couldn't add a simple functionality to allow you to select ANY screen (even if it has the same name) and, if already existing, prompt user to enter a new, unique screen name for it. Boom, problem solved.  (For that matter, the Merge could also easily allow merging multiple projects at the same time, rather than a one-by-one process.)

Manipulating filenames and/or requisite JSON/XML data to make this happen is a truly trivial task.