Copying/duplicating Screens (layout + blocks), or embedding project into another

[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...

[Taifun]

in the mentioned "tutorial" there is missing an important step, which is modifying the bky, scm and yail files itself accordingly, also there is no need to rename to rar...

see here how to do it correctly

How to copy screens by Scott and a video by Hossein

see also Project Merger Tool: combine two App Inventor projects into one

Taifun

---

Trying to push the limits of App Inventor! Snippets and Tutorials from Pura Vida Apps by Taifun.         

[Matthew Gudenius]

Thanks! Yeah, I knew what the tutorial was implying in that original link I posted, that you needed to rename the files (so that no conflicting screen names), I just made the simple mistake of not retaining the correct file structure when re-compressing to zip. 

However, that thread tells me there are plenty of people who want this functionality, and it's something that would be a lot faster, easier, and less mistake-prone if it were a feature built directly into AI.  If I have time this summer, I will try to add it to the open source...

[Taifun]

the missing step I was talking about is to open each copied file and Replace all instances of the old screen name with the new screen name

Taifun

[Taifun]

However, that thread tells me there are plenty of people who want this functionality

what about using the already mentioned Project Merger tool?

[Matthew Gudenius]

Just tried the Merge tool -- didn't know about it in advance (unfortunately), or I would've had the kids set things up a little differently -- since they are forced to start on Screen 1, and the Merge doesn't allow a copy/rename when copying screens, this means their intro screens cannot be merged into the main project; I would've had them just put a button called "Start" or something to go to individually-named screens

However, it might be a moot point, because I noticed the Merge tool documentation shows AI Classic, not AI2, and it looks like it might not work with AI2:

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]

I will check to see if that's what is causing the errors (I have to look at the actual XML & JSON code to see if the components are being tagged based on screen name), but I am also getting fail/errors when using the Merge tool.

I do see this, which might be causing a problem: 

<block type="component_event" id="155" x="933" y="-332">
    <mutation component_type="Form" instance_name="Game" event_name="Initialize"></mutation>
    <field name="COMPONENT_SELECTOR">Game</field>

 

And I see this is coming from the JSON declarations: 

{"YaVersion":"123","Source":"Form","Properties":{"$Name":"Game","$Type":"Form","$Version":"14",

I'm assuming that this "Form" component has to match the screen name?  [seems weird, considering this, that the app worked okay in AI Companion, including what should happen upon Initialize... but it can't hurt to get those main forms named to match the screen names as usual]

(this is kind of a mess ... really making me tempted to go Fork the Github! Actually, I already have, but a little scared to dive in and start looking at it and see how difficult it might be to make copy/duplicate/merge features in the application itself)

[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)

Looks like, yes, those main form components have to match the screen names (I guess this means the info is still stored altogether, rather than being loaded separately from the separate .bky and .scm files?)

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

[Taifun]

the Project Merger Tool for App Inventor 2 you can find here

http://appinventor.mit.edu/explore/resources/ai2-project-merger.html

Taifun