MIT App Inventor 2: Tips and Tricks

I just started developing with the MIT App Inventor.

I love it!

How I didn't know about this till today, I do not know. I'm taking a class with ShawAcademy this month, and they've moved from using jQuery Mobile, PhoneGap and Android Studio to this much simpler, and FREE starter from the brains at MIT.

MIT App Inventor is an Android-only development tool. And, before 3 or 4 months ago I didn't own any kind of Android device. This is my first foray into Google Apps and ... I think this is gonna work out great!

Apparently, App Inventor has been around since, like, 2010 or 2011. This is the 2nd version of the software, yet it's still in Beta mode. There does seem to support out there on the web -- with tutorials and documentation, but much of it is not specific enough, or it is in a foreign language.

So, I'm just going to gather some notes here. Because I'm running into a wall on some of the things I want to do.

#1. Display formatted HTML inside the App.

I want to download some text from my company website, and then show it inside the app's as formatted HTML.

Two ways to display HTML in App Inventor.

1. Use a Label object. Set it to:
   [x] HTML Format.
   Width [fill parent].
   Height [whatever you like].
2. Use the WebViewer object.
   Defaults are probably fine.

To get the information from an external site:

• Use a Connectivity > Web object.

To store the information to a file, you need to:

• Use a Storage > File object.

Now, there seems to be a thing with the file paths, that is causing me so much problem. 

I'm using an older LG phone from FreedomPop. It was inexpensive and I just wanted a testing device. It's not the fastest thing and the version of Android on it is getting older, with no hope of being upgraded.

I created a Variable to hold a filename for later use: filenameToSave = "testFile1.html"

And I created another Variable to describe the file path: testingFilePath = "......."

The dots is where I had the problem. What should the dots be? Different pages on the web say different things from different years and different situations. Most examples seem to be suggesting that a "developer" variable be created and set to "TRUE". 

Why? There seems to be a difference in the way that files are handled in App Inventor with regard to testing and an actual app that has been packaged and posted online. 

I had to go onto my phone and find the File Manager app, to figure out the correct file path on my LG. It turned out to be:

     "file:///storage/emulated/0/AppInventor/data/". 

Now the pre-pended "file://" is very important apparently, or the WebViewer object will not recognize the file as a legitimate location. You'd think you could just use the filename "testFile1.html" or maybe "/testFile1.html" or even "./testFile1.html". But, alas, no. The only way I could get it to work was with the full path name and the "file://" protocol at the beginning. 

Here's what the MIT App Inventor page has to say about it, which didn't work for me for testing.

 The default behavior is to write files to the private data directory associated with your App. The Companion writes files to /sdcard/AppInventor/data for easy debugging. If the file path starts with a slash (/), then the file is created relative to /sdcard. For example, writing a file to /myFile.txt will write the file in /sdcard/myFile.txt.

Another developer remarked:

I found what was wrong with me. I included FULL path, such as "/mnt/sdcard/AppInventor/data/ABC.txt" or "/emulator/storage/0/AppInventor/data/ABC.txt"
Instead, as Steve shows, I changed it to "/Takafile/ABC.txt"  or  "/AppInventor/data/ABC.txt" then both work.

Still new to this, so, I don't know all the ins and outs yet. These are just notes.

LINKS:

Free tutorial book (Online HTML)