Make MIT APP Inventor more powerful with JavaScript

MIT App Inventor plays a big role in developing smartphone applications. Many general application developments can be performed with App Inventor standard blocks. However, further enhancements may be required to create more sophisticated and complex applications. To respond to this, the following three mechanisms have already been prepared.

First, App Inventor can call external programs (created with Java or App Inventor) by using Activity Starter, which is a standard block. The second is to use the extension function for creating new blocks (Extensions) that can be used in the same way as a standard block. However, in order to do this, some detailed knowledge of Java programming should be required. The third is to create and incorporate a Javascript program. This time I will introduce this method. Perhaps it is easier to use Javascript than to develop Extensions in Java.

The method of using Javascript with App Inventor is introduced in the following references ([1] [2] [3]). Both use the standard block WebViewer. This is because the WebViewer is a Javascript engine. Reference [1] also carefully states that the Javascript program path is different for debugging and development. The execution result of the Javascript program should be obtained by pressing the App Inventor button at an appropriate time. Reference [2] is also easy to understand. The execution completion of the Javascript program is checked by spinning on the App Inventor side. Reference [3], written in Spanish, describes a simple example using the Pythagorean theorem. In this case, because App Inventor automatically receives Javascript execution completion event, this App Inventor program is made very concisely.

I will explain an example using Javascript based on these reference materials. Fig.1 is a simple app that reverses the entered string. The standard block for App Inventor strings does not include the function of string inversion, so it is realized in Javascript.

This mechanism is illustrated in Fig.2.

• First, create a Javascript file that reverses the string, and then upload it to Asset as Media in the Designer section of App Inventor. In this Javascript, WebViewString is important. 
• Get the input string that App Inventor gave to WebViewString by getWebViewString () on the 7th line. 
• Reversing of the character string is executed on the 9th line. The result is set to WebViewString by setWebViewString. In other words, WebViewString is rewritten at this point. 
• App Inventor can automatically detect the occurrence of this rewrite event by a block named WebViewStringChange, so a new WebViewString value (ie, execution result) can be obtained here.

This Javascript example was quite simple, but Javascript is a very powerful programming language that can be used to build more advanced App Inventor applications.

References
[1] How does the property Webviewer.WebViewString work?
http://puravidaapps.com/snippets.php#2webviewstring
[2] WebView Javascript Processor for App Inventor
https://appinventor.mit.edu/explore/ai2/webview-javascript
[3] Insertar códigos de JavaScript en App inventor. Pitágoras.
http://kio4.com/appinventor/166_javascript_pitagoras.htm