App Inventor Tutorials


App Inventor Tutorials and Advanced Examples

This page lists tutorials and more complex examples for App Inventor.

It is advisable to do the basic MIT Tutorials first before starting with the Tutorials and Examples listed here.

Categories:


App Inventor and Google Apps Script (GAS)

How to send a 'Contact Us' mail to a predefined email address automatically

For the example I'm using my Google Spreadsheet solution, which uploads a record into a Google spreadsheet. Everybody who submits a row into that spreadsheet will trigger automatically a message to be sent to the recipient's email address.


App Inventor and Databases


App Inventor - MySQL interface

This example demonstrates how to access a MySQL database on your web server with App Inventor 2 and a php script.


App Inventor and embedded HTML/JavaScript

Yes, you also can upload html files as assets into App Inventor! There is only one special thing to consider: During development, you have to use the development path to the embedded html document:

file:///mnt/sdcard/AppInventor/assets/<NAME OF YOUR HTML FILE>.html


Before packaging the app, use the production path.

file:///android_asset/<NAME OF YOUR HTML FILE>.html


The tools extension offers the method PathToAssets which always returns the correct path to the assets.



With the WebViewString property it's easy to communicate with the HTML/JavaScript. See a basic example here how to use the WebViewString property.


App Inventor is no lame duck in calculations anymore!

This example solves a simple math puzzle in less than 1 second. A plain App Inventor solution would need several minutes to get the result!


Get coordinates for any Location on Google Maps back to App Inventor

The example uses the Google Maps API V3 to get coordinates from Google Maps back to App Inventor.


Dynamic table layout with any number of rows and columns including table listpicker

How to display a table in App Inventor without knowing how many rows and columns will be supplied
Now including table listpicker and new layout!


App Inventor and editable(!) dynamic table layout with any number of rows and columns

This is the editable version of the dynamic table layout example.


Multiple Choice Select: a Listpicker alternative for App Inventor

The example displays an App Inventor list in a combobox providing a multiple choice listpicker.


Another Listpicker alternative with App Inventor and jQuery Mobile jQuery Mobile including a Search Filter!

The example displays an App Inventor list in a jQuery Mobile Listview, which offers lots of possibilities!
now available: the thumbnail listview and icon listview as example.


A Sortable List using Drag-and-Drop with App Inventor and jQuery UIjQuery UI

Use drag and drop to order list items manually.


How to generate a QR code from text without web access with App Inventor and some jQuery

This is possible with some HTML and the jQuery library jquery-qrcode from Jerome Etienne.




A powerful Label Alternative including touch gestures using the Webviewer, some HTML/jQuery and Hammer.js

You can pass any HTML-style markup to the webviewer and display it during runtime of the app. And together with Hammer.js we can add touch gestures to the webviewer!


How to generate an animated Pie Chart using the Chart.js library

This example here uses some HTML and the Chart.js JavaScript library. As you can see from that page, a Pie chart is only one of several possibilities. The solution does not require internet access!




For questions about App Inventor,
please ask in the App Inventor community.Thank you.


App Inventor and the Web component


How to download a file and save it on your device

Download a file from the internet. Also an example of a file download from a Restricted Area is available.


How to use the PostFile block in App Inventor

This is a workaround of Scott's example if you can't set the flag always_populate_raw_post_data to on on your server. With this example you can pick an image from your device and upload it to my server.


A Chat Demo with App Inventor 2 and PubNubTM

This example uses the PubNub Realtime Network.


Different eMail solutions for App Inventor

The different eMail solutions for App Inventor are listed here. Also it is explained, how to send an email including attachment.
Now it's also possible to send HTML format in the eMail body!




App Inventor and the Advanced Features

How to work with the advanced features

Using the advanced features makes sense, if you have a lot of the same components (here checkboxes) and you like to execute the same action on them.



App Inventor and Multiple Screens

The recommended method of switching screens in App Inventor

A screen always returns to the screen that opened it. You can get the effect of screens switching to arbitrary other screen by setting up a "manager screen" that is used for opening all the other screens.


Tribblehunter's Multiple Screen Method

Open another screen and at the same time(!) close the current screen. Using this method there is no need of a manager screen.


Miscellaneous

A simple Bluetooth Chat with App Inventor 2

Both the bluetooth client and server modules are used to create a chat session. Both components are in the same app. The client component will be used for the device which starts the connection, the server component will be used for the device accepting the connection. The devices must have been paired first.


A quick Twitter Tutorial with App Inventor 2

Let's tweet with App Inventor 2! Now in App Inventor 2 we also can tweet with images!



How to pick a file from SD card

Pick a file from SD card with the help of the Activity Starter. Precondition: a file manager app is installed on your device.



Deprecated Tutorials

These are some examples, which do not work anymore because of Google updates or have become obsolete because of the new extension feature or added components in App Inventor, e.g. File component, Date picker, Time Picker.

App Inventor - Amazon SimpleDB interface

This example demonstrates how to access an Amazon SimpleDB database with App Inventor 2.
using the WebViewString property!




How to start an App Inventor app after a SMS has been received

Having apps that can do things in the background has been one of the most asked for App Inventor features.
Each time a SMS is received, SMS Receiver checks if the defined App Inventor app needs to be started depending on the stored settings (start for all messages or start only for trigger message).


Take Pictures programmatically using the Activity Starter calling a Java app

With the help of the Java app Take Picture, an App Inventor app can shoot a picture programmatically without user intervention.


How to create a pdf file

This example creates a pdf file using the web component and the Convert API.


fusionDB: Using Fusiontables Fusiontables with App Inventor as a Database

Use fusion tables with app inventor as a database and access it without having to log in with user id.


App Inventor - Google Drive Google Drive Interface

In this example the user can pick an image with the image picker and upload it to my Google Drive without need to login. My Google Drive will be used as some kind of public file storage for everybody who uses this example. Also the user can get a file list of the 10 last uploaded images and download one of them.


App Inventor - Gmail Gmail Interface

This example uses the new Gmail REST API. In this example the user can get a list of his last 10 Gmail messages, pick a message to see the details and send a message.


Accessing the Google Contacts API with App Inventor

How to get a contact name for a given phone number or a phone number for a given contact name.


How to refrain your device from sleeping

Use a videoplayer continuously playing an invisible video to refrain the device from sleeping.


App Inventor - MongoDB interface

This example demonstrates how to access a MongoDB database with App Inventor 2.


How to save text to a file in the Internet

Using the web component and a php script on the server we can save text in a file on the server.


App Inventor and HMAC-SHA1 encryption

The HTML/JavaScript supplies a HMAC-SHA1 hash in base64 format back to App Inventor.


How to get the Phone Number of the Device with App Inventor

Unfortunately there is currently no simple possibility to get a user's phone number. However with this trick the app sends a SMS with a authorization code to the phone number entered by the user and can confirm the phone number this way.


How to identify your user with OAuth OAuth

In the example the user can authorize the app to read some Google user profile info. To avoid setting up some kind of user identification yourself you can use this example to identify your user.


How to get some Device specific Info with App Inventor

This example provides the device specific info Android Version, Language and Device type.


Save a text file to SD card using the Activity Starter calling a Java app

App Inventor currently does not offer a possibility to store a file on SD card. In this example the Java app Save To SD can be called to save a text file.


A Date Picker with App Inventor, HTML and jQuery UIjQuery UI

The user can select a date from the date picker widget and the selected date will be returned to App Inventor.


How to import a multiline csv file on first run of the app

The example imports a multiline csv file stored as asset in App Inventor on first run of the app and stores it as list of lists in TinyDB. This solution also can import characters having accents etc.


How to read a text file with App Inventor

The example reads a text file stored as asset in App Inventor and displays its content in a label.


How to save text to a file on SD card using a php server (internet connection required)

This is a workaround of Scott's example if you can't set the flag always_populate_raw_post_data to on on your server. With this example you can save text from a textbox to a textfile on the SD card of your device. An Internet connection is required.



Home | Snippets | Tutorials | Extensions | Links | Search | Privacy Policy | Contact