Demo of making App Inventor apps using JavaScript in Visual Studio Code

This is just a demo of a project I have been working on to allow JavaScript as the programming langauge to make MIT App inventor apps.

The demo makes a small stopwatch.

The development environment currently supports all UI, layout, media, drawing and animation, map (except for featurecollection), sensor, social, storage and connectivity components.

The system allows connection to the emulator, over usb and over wifi for android. Apple devices should not be hard to difficult to implement (I think).

It allows the use of variables, arrays and objects, most Math. operators and most object and array operators.

There are a few bugs and the emulator has instability connection ( but actual devices have excellent connectivity.)

System allows the upload of images, video and other files. Max file size that works so far is about 8Mb per file over Wifi. USB max file upload not measured yet.

9 Likes

Welcome,

Wow, that seems to be a lot of work that you have done.

1 Like

Can you tell us what your plans are with this. I understand you want your students to use it and you want to release the code? Are you planning on students being able to build apk, aab or ipa?

What about the extensions?

In the video @andrewt says that he hasn't done that (yet). I am wondering if that is even possible.

At the moment I am not planning on trying to integrate extensions. My reason for this is based on my intended production environment that is a classroom with students working on a mixture of android and apple devices with occasional emulators. So using only 'vanilla' components would be a limitation of the teaching environment.

Could extensions be added is another question. Potentially yes I think. Based on my reading of the source code (which is only a little with regards to this issue because I saw something in passing), I believe that extensions are simply a Java file that is uploaded like any other file and is somehow integrated by the app inventor mobile app. So potentially, is my understanding is correct, extension files could be uploaded.

To access them from the Javascript coding environment, I suspect, and this is only speculation, that there would need to be build some type of class object that can be used to generate the required scheme code to integrate the component. So maybe it could be done, but it is not currently on my radar.

1 Like

My current plans are :

  1. to try and eliminate most of my problems. Some problems (based on reading things in this forum) may not be able to be solved e.g. the sending of text messages.
  2. to develop some xml scheme or xml dtd files that I can add to the screen layout files to provide validation and hinting (hopefully) for attributes (this is because it is hard to remember them all)
  3. give it to some of my students to try and break
  4. fix broken things that students did
  5. I have added an extra two possible attributes in my code for the different components - these are called ID and CLASS. I want to get these working. It is intended to be able to add a style file (like CSS on website) so that I can give all my buttons the same class and adjust all of their appearances in the one location for instance.
  6. Probably then publish as an NPM module and put up on github.
3 Likes

Also, I forgot the compilation part.

  1. As I understand the system (which may be a faulty understanding), App Inventor generates scheme code which is then compiled into an apk file for publication as an actual app. I haven't played with this development pathway (more focussed on getting something that works). I am hopeful that (eventually) I will be able to look at this, and potentially just drop my generated scheme code into the app inventor build server and have something useable come out (guaranteed it won't be as easy or straight forward as I hope).
1 Like

That's really cool.

Currently, we are bound to the online-only platform to compile/view/edit applications, which may seem okay as almost everyone has internet connection nowadays. However, let's say you got an AIA file from your friend or somewhere else online; you can't see what the project does without loading it to App Inventor first, even there are some projects like Unchive to view an App Inventor project online, you can't still edit the blocks directly (in a short time) without going through hassle as the BKY file format is not human-readable.

Not only that, also;

  • This makes it hard to share & view AIA projects on places like GitHub, as there is no preview as AIA files are archives.

  • This prevents publishing App Inventor apps to FOSS-only (free & open source software) app stores such as F-Droid, because they require apps to be compiled offline and in command window. I am aware that there are also projects like AI2-Offline, but as far I know, they are not officially supported.

  • This prevents collaborating with someone in source control like Git, as Blockly format is not line-by-line, every block is encapsulated as pieces in the source file, so you can't compare for differences with currently existing tools. Source control allows people to undo, merge changes, revert to a specific revision ("commit"), modify every revision separately, which you can't do for an AIA format. Without source control stuff, there is a proposal/experiment to add collaborating functions in AI2, but today, we don't have it in the current publicly accessible App Inventor instance.

So, I always wanted to have a way to write/read apps outside of App Inventor website. It is very nice to see that I'm not alone. I also had a similar idea like this, but it was for Python instead. I tried to do a prototype, however later I realized that I needed to add support for every component, property and block, so I suspended as I thought it would take a lot of time than I expected. But I think it is much easier to do in JavaScript like yours instead of Python like me, since App Inventor also uses JavaScript for converting blocks to Scheme, their code can be used in JavaScript, instead of defining blocks from scratch in Python.