Login

Build an Android App using MIT App Inventor

Objectives

  • Set up a database on Google Firebase
  • Develop an Android App using MIT App Inventor
  • Use the Android App to control an LED on the NodeMCU

Things

  1. NodeMCU board (quantity: 1 no.)
  2. Micro USB cable A to B (quantity: 1 no.)
  3. Breadboard (quantity: 1 no.)
  4. Android mobile phone (quantity: 1 no)
  5. Google account
  6. MIT App inventor account
  7. Arduino IDE on your computer

Let’s begin!

MIT App inventor is an easy way to make Android apps. It provides you a simple solution to drag and drop blocks. We will use this to interact with a database we make on Google Firebase. We will then control an LED on the NodeMCU using the Android app. To see how MIT App inventor looks, click MIT App Inventor

Create a Realtime database on Google Firebase

Step 1: Go to https://firebase.google.com/ and login using your Google account. Click on GO TO CONSOLE

Step 2: Click on Add project

Step 3: Give a project name. Select Analytics location as India. Click on Create project

Step 4: Click on settings the symbol beside Project Overview. Click on Project settings.

Step 5: Under the Service accounts tab, click on Database secrets. Click on Show and copy the secret code. Make a note of this code as you will need it while programming.

Step 6: On the left hand side, go to Develop and select Database. Scroll to find Realtime Database and click on Create database

Step 7: Select Start in test mode. Click on Enable.

Step 8: Copy the URL above the database and make a note of it. Make sure to remove “https://” and any”/” and “\”.

Create an Android App using MIT App Inventor

Step 1: Go to ai2.appinventor.mit.edu and create a new Project.

Step 2: From User Interface on the Palette, drag and drop a button onto the screen as shown. Repeat once

Step 3: In Properties, change the Height and Width to Fill parent

Step 4: Change the Text of the buttons to ON and OFF.

Step 5: From Experimental on the Palette, drag and drop FirebaseDB onto the screen as shown. Ignore any warnings you get

Step 6: Select FirebaseDB1 in Components. In Properties, paste your Firebase Database URL in the FirebaseURL area. Make sure Use Default is unchecked and ProjectBucket is empty

Step 7: Click on Blocks (top right corner) to continue with the logic part of the code

Step 8: Select Button1 in Blocks. Drag the Button1.Click block onto the canvas. Repeat for Button2

Step 9: Select FirebaseDB1 in Blocks. Drag the FirebaseDB1.StoreValue block onto the canvas. Repeat this once more.

Step 10: Attach the FirebaseDB1.StoreValue blocks to the ButtonX.Click blocks

Step 11: From Text, drag the text string (” “) block and attach it to tag on the Firebase blocks.

Step 12: From Math, drag the number (0) block and attach it to valueToStore on the Firebase blocks. Repeat once

Step 13: Change the text and number values in the blocks

Step 14: Now your App is ready. You can make color changes to your screen and button. To download the App, click on Build and select App (save .apk to my computer ). Copy this apk to an android phone and install

 

If you have trouble making the App as shown, you can download the AIA file of the completed project and upload it to MIT App Inventor as shown below, make changes to your Firebase URL and download the apk.

 

Opening an .aia file in MIT App Inventor

 

Final Code

Download the FirebaseArduino library  Open Arduino IDE. Go to Sketch -> Include Library -> Add .ZIP library. Add the zip file you downloaded.

You will also need to install ArduinoJson library version 5.13.1. Go to Sketch -> Include Library -> Manage libraries. Search for ArduinoJson, select version 5.13.1 and click install.

To copy the code, right click on view raw at the bottom of the code, click on open link in new tab and then copy the code.

Uploading the code

Step 1: Enter the final code in the Arduino IDE window.

  • When you click on New to open a new blank code in the Arduino IDE, you will get a new window with two functions: void setup() and void loop()
  • You can either type commands as shown in the final code under void setup() and void loop() functions or
  • Delete the contents of this window. Then copy and paste the final code in the Arduino IDE window.

Step 2: Compile/ verify the code by clicking on the verify button.

  • Make sure the board is connected to your computer
  • Check if the correct board and port is selected.

Step 3: Upload the code by clicking on the upload button, which is right next to the verify button.

  • The Arduino IDE provides a progress bar when it’s uploading.
  • After it is done, you will see “Done uploading” on the bottom left of your IDE.
  • If you encounter any errors, you need to go back to the code and fix the errors.

 

We would love to see what you build out of these learnings!

Click here to submit your projects, share it with the world and stand a chance to be rewarded.

top

Knowledge and Content by Li2 Technologies | © 2021 NASSCOM Foundation | All rights reserved

X