Mobile APP Development using MIT APP Inventor

Workshop Objectives

1. Learn the mechanics of using App Inventor to build apps.

2. Learn how to design an app’s user interface with the App Inventor Designer, and its

behavior with the Blocks Editor.

3. Learn how an app’s behavior consists of event handlers-- blocks that specify how an app

responds to each event.

4. Learn how to use decision making (if) and control structures (for) loops.

5. Learn how to work with Firebase Console.

6. Learn how to use Firebase Storage.

7. Learn how to read and write data in Real-time Firebase Database using Android App.

8. Learn how to test an app, how to deploy it to a device.

1. How to Create Project in MIT APP Inventor:

Before you begin, make sure you have access to the following things:

Internet

A Gmail account (this is how you will log in to App Inventor)

Start the Designer and create a new project

In your web browser, go to the App Inventor website at ai2.appinventor.mit.edu/login/google?locale=en. If this is the first time you are using App Inventor, you will see a blank projects page.

Click Start new Project on the left side, near the top of the page.

Enter the project name HelloWorld (one word, with no spaces) in the dialog box that

appears, then click OK.

The browser will open the web page called the Designer, the place where you select

components for your app and design the user interface, and should look like this:

In addition to the Designer, you can find the Blocks Editor at the right hand side besides the

Designer option, the place where you set the behavior of the app. Changes made in the

Designer will be immediately reflected in the Blocks Editor.

The Blocks Editor

When you click Blocks from the window, the Blocks Editor will appear shown below.

2. How to Create Database in Firebase:

The first step for us is to setup the Firebase database in the cloud. The instructions are given

below:

Visit https://console.firebase.google.com/ and login with your Google account.

You will see the welcome screen with two buttons as shown below:

Click on Create New Project button.

This will bring up the Create a project screen as shown below, where you will need to provide

a project name. Note that you will need to provide a unique name for your project. Select a

Country/region where you would like your database to be hosted. Click on Create Project.

This will create a Firebase database under the Spark Plan. This plan is free and is good enough

for our scenario. As an example of what the Spark plan gives us, take a look at this table.

To iterate again, we are only going to look at the Database feature of Firebase and not other

services for now. Click on the Database link on the left. This will show up some details about

your database as shown below:

Important: Please note down your database URL as highlighted in the screen above. This is

the unique database url that is available to the outside world for integration. In our case, the

Android application that we shall be writing in App Inventor will be using this unique URL as

our backend database. Simple!

Another point to note here is that it shows the database name and a null next to it. This means

that currently there is no data in the database. Keep this screen handy, you will be coming

back to it and can see the database live here as it comes in. Even if not live, you can see what

the data currently is in the database over here.

Click on the Rules tab. You will notice that it has the following rules by default as shown

below. Let’s not get too much into rules for now but it is sufficient to understand that why

the magic text indicates is that to do database reads and writes, you will need to be

authenticated. Firebase supports multiple authentication mechanisms, but we will keep it

simple for now and not use any authentication. Note that what we are going to do is not

good practice but it is ok for our tutorial here. What we are going to do is open up access to

this Firebase database to allow anyone (everyone) to both read and write.

To do that, simply start editing the text to the one that is shown below:

Click on Publish. This will publish (associate) the rules with your database. It also indicates

clearly (and which is good by the way) that we have defined our database to be accessed by

the public (read and write). Boys and Girls, don’t try this at home (sorry … don’t try this in a

live database).

That’s it. We have a Firebase database in the cloud, all ready for read and write. Now, all we

need is to write this to our Android application.

Workshop Project Screenshots:

References: http://appinventor.mit.edu/explore/start-first-time.html http://appinventor.mit.edu/explore/designer-blocks.html https://rominirani.com/tutorial-mit-app-inventor-firebase-4be95051c325

Tutorials: http://appinventor.mit.edu/explore/sites/all/files/hourofcode/AppInventorTutorials.pdf