2016

FINAL PROJECT
WHATSAPPINVENTORMIT FOR APP INVENTOR

MIT MASTER TRAINERS IN MOBILE EDUCATIONAL COMPUTING

JOSÉ LUIS NÚÑEZ MONTES


THIS PAGE IS INTENTIONALLY LEFT BLANK



CONTENT

Overview .............................................................................................................................................. 2

What is Firebase? .............................................................................................................. 2

Learning objectives .............................................................................................................................. 2

Step-by-Step Instructions ..................................................................................................................... 2

Building the Main Screen(Screen1) .................................................................................... 3

Screen1 - Designer view .................................................................................................... 3

Adding other screens ......................................................................................................... 6

scrCreateUsers - Designer view ......................................................................................... 7

scrViewUsers - Designer view .......................................................................................... 11

scrChat - Designer view ................................................................................................... 15

Blocks for the main screen(Screen1) ................................................................................ 19

Blocks for scrCreateUsers ................................................................................................ 20

Blocks for scrViewUsers .................................................................................................. 21

Blocks for scrChat ............................................................................................................ 21

Links ................................................................................................................................................... 22

References ......................................................................................................................................... 23

Summary ............................................................................................................................................ 23

Conceptualize and Customize ............................................................................................................. 23

Discussion Questions ....................................................................................................... 23

Customizations ................................................................................................................ 23

OVERVIEW

In this tutorial, we are going to study how to use the experimental Firebase component. We are going to
develop an app that allows users to chat with each other using persistent data.

WHAT IS FIREBASE?

Firebase provides a way to use data stored online. The data can be used for different apps that share
them in real-time. In addition, the service provides application developers with an API that allows
application data to be synchronized across clients and stored on Firebase's cloud. It is an amazing new
component in App Inventor!

This tutorial assumes that you are familiar with the basics of App Inventor, including using the
Component Designer to build a user interface, and the Blocks Editor to specify the app's behavior. If you
are not familiar with the basics, try going through some of the basic tutorials before continuing.

LEARNING OBJECTIVES

After completing this tutorial, you should be able to:

• Design an app that uses three different screens(multiscreen)

• Use images in your buttons
• Define a project bucket in Firebase
• Read/Write data in a Firebase database using tags and values
• Manage all events triggered by a Firebase component

STEP-BY-STEP INSTRUCTIONS

We can develop an app with several screens using App Inventor. In this sense, WhatsAppInventorMIT
will be able to manage three different screens in order to do the following tasks:

• Create the users that communicate with each other (scrCreateUsers)

• View users previously created by the app (scrViewUsers)
• Show a window where users can send/receive messages (scrChat)

All the screens will use the information stored in the same Firebase database. This tutorial presents
Firebase as a way to work with real-time cloud data service.

BUILDING THE MAIN SCREEN(SCREEN1)

You start building a multiscreen app by creating a new project, just as with any other app. As usual, App
Inventor automatically creates the main screen and names it Screen1 and you can add components.
Here is the Designer and the Components panel when all the components for Screen1 have been added:

SCREEN1 - DESIGNER VIEW

The main objective of Screen1 is to display all the buttons needed to access different screens of the app.
We can choose to:

• Create new users

• View users (it is assumed there are previously created users)
• Chat
• Close app and exit

The components are:

Palette Purpose of the

Component type Name Settings
group component

Screen Screen1 Displays the AlignHorizontal:

layout Center

AlignVertical: Center

AppName:
WhatsAppInventorMIT

Background color:
None

Icon: iconoapp.png

Height: Fill parent

Width: Fill parent

Title:""

TitleVisible: False

ShowStatusBar: False

VerticalArrangement Layout VerticalArrangement1 Displays the AlignHorizontal:

buttons aligned Center
to
center(horizontal AlignVertical: Center
and vertical)
Background color:
None

Height: Fill parent

Width: Fill parent

Image:
background.png

Button User btnCreateUsers Launches screen Image:

Interface scrCreateUsers btnCreateUsers.png

Text:""

VerticalArrangement Layout VerticalArrangement2 Creates the Background color:

padding needed None
to separate
buttons Height: 5%

Button User btnViewUsers Launches screen Image:

Interface scrViewUsers btnViewUsers.png

Text:""

VerticalArrangement Layout VerticalArrangement3 Creates the Background color:

padding needed None
to separate
buttons Height: 5%

Button User btnChar Launches screen Image: btnChat.png

Interface scrChat
Text:""

VerticalArrangement Layout VerticalArrangement4 Creates the Background color:

padding needed None
to separate
buttons Height: 5%

Button User btnCloseApp Closes app Image: btnChat.png

Interface
Text:""

FirebaseDB Experimental FirebaseDB1 Database that ProjectBucket:

will be used by WhatsAppInventorMIT
the app

These are screenshots of the properties of some components:

ADDING OTHER SCREENS

To add a new screen to your app, click the Add Screen button in the top toolbar of the Designer window.
A dialog window will appear, in which you provide a name for the new screen. Our app needs three new
screens: scrCreateUsers, scrViewUsers and scrChat. To create a new one you can use the Add Screen ...
button:

SCRCREATEUSERS - DESIGNER VIEW

This screen allows users to create two new nicknames or usernames in the database. We will be able to
chat using these usernames, so it is very important to create them at the start.

To save data on the Internet, we need to click on a button that connects our app with the Firebase
service. To return to Screen1, we click on another button that closes the screen. We use a notifier
component for displaying messages on the screen.

The components are:

Palette Purpose of the

Component type Name Settings
group component

Screen scrCreateUsers Displays the AlignHorizontal:

layout Center

AlignVertical: Center

BackgroundColor:
None

Background Image:
background.png

Scrollable: False

Title:""

TitleVisible: False

ShowStatusBar: False

VerticalArrangement Layout VerticalArrangement1 Displays the AlignHorizontal:

labels and Center
textboxes
aligned to AlignVertical: Center
center(horizontal
and vertical) Background color:
None

Height: Fill parent

Width: Fill parent

HorizontalArragement Layout HorizontalArragement1 Displays the AlignHorizontal:

label Label1 Center
centered
AlignVertical: Center

Background color:
None

Width: Fill parent

Label User Label1 Shows the text Background color:

Interface "Create users..." None

Fontsize: 18

Text: "Create
users..."

Text color: White

HorizontalArragement Layout HorizontalArragement2 Displays the AlignHorizontal:

label Label2 and Center
the textbox
txtUsername1 AlignVertical: Center
aligned to
center(horizontal Background color:
and vertical) None

Label User Label2 Shows the text Background color:

Interface "Username 1:" None

Fontsize: 18

Text: "Username 1:"

Text color: White

Textbox User txtUsername1 Gets input from Fontsize:18

Interface user for reading
username 1 Hint: ""

Text: ""

HorizontalArragement Layout HorizontalArragement3 Displays the AlignHorizontal:

label Label3 and Center
the textbox
txtUsername2 AlignVertical: Center
aligned to
center(horizontal Background color:
and vertical) None

Label User Label3 Shows the text Background color:

Interface "Username 2:" None

Fontsize: 18

Text: "Username 2:"

Text color: White

Textbox User txtUsername2 Gets input from Fontsize:18

Interface user for reading
username 2 Hint: ""

Text: ""

HorizontalArragement Layout HorizontalArragement4 Creates the Height: 5%

padding needed
to separate
buttons

HorizontalArragement Layout HorizontalArragement5 Displays the AlignHorizontal:

buttons btnSave Center
and btnBack
centered AlignVertical: Center

Background color:
None

Button User btnSave Saves Background color:

Interface usernames on None
the database
Text: ""

Image:btnSave.png

Button User btnBack Closes the Background color:

Interface current screen None
and back to
Screen1 Text: ""

Image:btnBack.png

Firebase Experimental FirebaseDB Connects to the All defaults

Firebase
database on the ProjectBucket:
Internet and WhatsAppInventorMIT
saves data

Notifier User Notifier1 Shows messages

Interface on the screen

10

SCRVIEWUSERS - DESIGNER VIEW

This screen displays the current users saved on the Firebase database. It is assumed that this screen will
be opened to check the usernames previously created.

It is similar in appearance to scrCreateUsers but the textboxes are disabled and there is only one button
to return to the main screen.

11

The components are:

Palette Purpose of the

Component type Name Settings
group component

Screen scrViewUsers Displays the AlignHorizontal:

layout Center

AlignVertical: Center

BackgroundColor:
None

Background Image:
background.png

Scrollable: False

Title:""

TitleVisible: False

ShowStatusBar: False

VerticalArrangement Layout VerticalArrangement1 Displays the AlignHorizontal:

labels and Center
textboxes
aligned to AlignVertical: Center
center(horizontal
and vertical) Background color:
None

Height: Fill parent

Width: Fill parent

HorizontalArragement Layout HorizontalArragement1 Displays the AlignHorizontal:

label Label1 Center
centered
AlignVertical: Center

Background color:
None

Label User Label1 Shows the text Background color:

Interface "Current None
users..."
Fontsize: 18

Text: "Current
users..."

Text color: White

12

HorizontalArragement Layout HorizontalArragement2 Displays the AlignHorizontal:

label Label2 and Center
the textbox
txtUsername1 AlignVertical: Center
aligned to
center(horizontal Background color:
and vertical) None

Label User Label2 Shows the text Background color:

Interface "User 1:" None

Fontsize: 18

Text: "User 1:"

Text color: White

Textbox User txtUsername1 Displays the Fontsize:18

Interface current
username for Enabled: False
user 1
Hint:""

Text:""

HorizontalArragement Layout HorizontalArragement3 Displays the AlignHorizontal:

label Label3 and Center
the textbox
txtUsername2 AlignVertical: Center
aligned to
center(horizontal Background color:
and vertical) None

Label User Label3 Shows the text Background color:

Interface "User 2:" None

Fontsize: 18

Text: "User 2:"

Text color: White

Textbox User txtUsername2 Displays the Fontsize:18

Interface current
username for Enabled: False
user 2
Hint:""

Text:""

13

HorizontalArragement Layout HorizontalArragement4 Creates the Height: 5%

padding needed
to separate
buttons

HorizontalArragement Layout HorizontalArragement5 Displays the AlignHorizontal:

buttons btnSave Center
and btnBack
centered AlignVertical: Center

Background color:
None

Button User btnBack Closes the Background color:

Interface current screen None
and back to
Screen1 Text: ""

Image:btnBack.png

Firebase Experimental FirebaseDB Connects to the All defaults

Firebase
database on the ProjectBucket:
Internet and WhatsAppInventorMIT
saves data

14

SCRCHAT - DESIGNER VIEW

The most important screen is scrChat, which allows us to choose a user, send and receive messages in
real-time using the Firebase component and view them on the screen.

To make all the processes work, we need the following:

• A horizontal arrangement that displays a button to choose a user.

• Another arrangement that allows the user to write a message.
• A centered button to save messages on the database and send them to another device.
• An area to display all the messages between the two users.
• A horizontal arrangement that displays a button to return to the main screen.
• A Firebase component that connects our app with the service on the Internet.
• A clock that waits a set time before getting messages.
• A notifier to display messages.

We can test our app using the same device and changing the user or we can use the app in different
devices. To keep the app working correctly, it is very important to use the same developer account
and the project bucket related to the Firebase component.

15

The components are:

Palette Purpose of the

Component type Name Settings
group component

Screen scrChat Displays the AlignHorizontal:

layout Center

AlignVertical: Center

BackgroundColor:
None

Background Image:
background.png

Scrollable: False

Title:""

TitleVisible: False

ShowStatusBar: False

VerticalArrangement Layout VerticalArrangement1 Displays the AlignHorizontal:

horizontal Center
arrangements
aligned to AlignVertical: Center
center(horizontal
and vertical) Background color:
None

Height: Fill parent

Width: Fill parent

HorizontalArragement Layout HorizontalArragement1 Displays the AlignHorizontal:

listpicker Center
component
centered AlignVertical: Center

Background color:
None

ListPicker User ListPicker1 Display a Background color:

Interface listpicker None
component to
choose a user ElementsFromString:
""

Image:
btnChooseUser.png

Text: ""

16

Title: "Choose user..."

HorizontalArragement Layout HorizontalArragement2 Displays the AlignHorizontal:

label Label1 and Center
the textbox
txtMessage AlignVertical: Center
aligned to
center(horizontal Background color:
and vertical) None

Width: Fill parent

Label User Label1 Shows the text Background color:

Interface "Message:" None

Fontsize: 18

Text: "Message:"

Text color: White

Textbox User txtMessage Gets input from Fontsize:18

Interface user for sending
a message by Enabled: False
using the
Firebase Hint:""
component
Text:""

HorizontalArragement Layout HorizontalArragement3 Displays the AlignHorizontal:

button btnSend Center
aligned to
center(horizontal AlignVertical: Center
and vertical)
Background color:
None

Button User btnSend Saves the Background color:

Interface message on the None
database
Image: btnSend.png

Text: ""

17

VerticalArrangement Layout VerticalArrangement2 Displays the AlignHorizontal: Left

labels for both
users AlignVertical: Top

BackgroundColor:
None

Height: Fill parent

Width: Fill parent

Image: none

Label User lblU1U2 Shows the BackgroundColor:

Interface messages sent None
from user 1 to
user 2 FontSize: 16

Text: "U1-->U2"

TextColor: Orange

Label User lblU2U1 Shows the BackgroundColor:

Interface messages sent None
from user 2 to
user 1 FontSize: 16

Text: "U2-->U1"

TextColor: Yellow

HorizontalArragement Layout HorizontalArragement4 Displays the AlignHorizontal:

button btnBack Center
centered
AlignVertical: Center

Background color:
None

Button User btnBack Closes the Background color:

Interface current screen None
and back to
Screen1 Text: ""

Image:btnBack.png

Firebase Experimental FirebaseDB Connects to the All defaults

Firebase
database on the ProjectBucket:
Internet and WhatsAppInventorMIT
saves data

18

Clock

Notifier

BLOCKS FOR THE MAIN SCREEN(SCREEN1)

These blocks essentially manage the click events and open new windows.

Because other apps may use the Firebase component, you should add a call to procedure
Unauthenticate in order to clear the internal Firebase cache.

19

BLOCKS FOR SCRCREATEUSERS

Firebase uses a tag-value pair to save/read data on the cloud, so our app will use the usernames as tags.
When a user clicks on the save button, the app ensures that both fields are filled to avoid having saved
data without a tag.

If an error should occur, the FirebaseError event would be triggered and our app would notify us.

Look at these blocks to understand how scrCreateUsers works:

Note that we use a notifier component to show certain messages according to the events described.

20

BLOCKS FOR SCRVIEWUSERS

This screen gets the values previously saved in scrCreateUsers. The Initialize event is used for calling the
GetValue procedure of the Firebase component and the GotValue event fills the textboxes.

BLOCKS FOR SCRCHAT

The first thing this screen needs is the usernames that will be used to store data related to them. The
initialize event gets these values reading tags "User1" and "User2". Next, using GetValue, the app reads
messages previously sent between the users. It uses the "real usernames" previously read as tags. When
the screen opens, it uses a clock sensor with a timer to prevent reading from an empty tag.

Our app is able to send messages between two different users; however, it is also possible to simulate
two users by using the choose button. To choose the username sending the message, click on the
button and select it from the list.

When a user writes a message and clicks on the Send button, the app will test which index of the
previous list has been selected. The procedure StoreValue relates to each user with its message and the
DataChanged event is the procedure that deals with the updated data.

Our app implements a procedure called checkTagValueAndWriteText to check which tag is being
changed in our database in a specific moment. The main mission of the procedure is to receive and deal
with data from the Internet. Depending on the tag, the procedure will set a pair of global variables that
it will use later or it will show the messages on the screen.

21

LINKS

WhatsAppInventorMIT in Gallery:

http://ai2.appinventor.mit.edu/?galleryId=6176442605371392

All the resources:

https://drive.google.com/folderview?id=0B0k5c5YtPa8ETUs2NzExVmtDWGc&usp=sharing

22

REFERENCES

• Using the FirebaseDB component

• Important concepts in App Inventor
• Firebase (Wikipedia)
• Official Firebase website

SUMMARY

In this tutorial you have learned:

• How to make an app with multiple screens.

• How to set images on buttons.
• How to share data between different devices using the experimental Firebase component.

CONCEPTUALIZE AND CUSTOMIZE

DISCUSSION QUESTIONS

1. Why is it necessary to use the Unauthenticate procedure in Screen1?

2. How can you save date and time on the database in addition to the message?
3. How could a different app share the same information?
4. The DataChanged event is triggered by Firebase when the database is updated. What kind of
improvement does Firebase represent as compared to the TinyWebDB component?

CUSTOMIZATIONS

1. Let users delete all messages sent between them. Hint: use a new button component to store
blank data in the convenient tag.
2. Add a new functionality to the app that allows users to send date and time to their messages
and develop the needed changes to show this new information on the screen.

23