Building Android Apps: How To With MIT Inventor

We featured the free MIT App Inventor 2.0 tool in our previous Android app development article. It is an excellent tool because it allows you to create functional and fairly complex Android apps in a short time. In the same article, we have explained how the progress in the development of the Android app and its perfect functioning can be verified simply by connecting the smartphone to the Wi-Fi network (after installing the MIT AI2 Companion application on the mobile device ).

Create Android Apps That Read GPS Data

I invite you to refer to the article How to create an Android app from scratch to learn the basics of MIT App Inventor. Let’s try to create an Android app capable of geolocating the user . After starting MIT App Inventor by pointing the browser to this address, you must create a new project and place a whole series of elements on the main application screen.

From the left column, click on User Interface and insert 14 labels and 2 buttons. By clicking on Layout, still, in the left column, you will have to drag HorizontalArrangement 6 to the Android app screen. Two labels will be positioned in each Horizontal Arrangement element (allows you to adjust the Layout so that the elements it contains are automatically aligned horizontally).

The Text properties of the various labels ( labels ) must be initialized as in the first image. In particular, the four labels to the right of the labels set to latitude and longitude must have an empty Text field. The two labels showing the unknown string must be renamed in Address and Address_MEM by clicking the Rename button in the Components column. The labels to the left of the four latitude and longitude strings should be renamed LAT, LONG, LAT_MEM, and LONG_MEM, respectively.

The two buttons must contain the texts Remember the location and Bring me here. The respective Enabled boxes ( Properties column ) must be deactivated in both cases. Acting on the left column, it will therefore be necessary to drag a LocationSensor onto the screen (drag it from the Sensors section), an aTinyDB element ( Storage section ), and, finally, an ActivityStarter ( Connectivity section ).

The first is an element that allows you to establish the user’s geographical position by drawing on the various sensors used by the Android device; the second allows you to store information permanently (therefore, even after closing the app) in a local database; the third allows you to open other activities (in our case it will be used to open a Google Maps map with an indication of the route to follow).

By clicking in a free area of ​​the main screen, click on the Title property ( Properties column ) and change it to Where did I park? We want to achieve an application that allows memorizing where the car is parked and visualizing the route to return to retrieve it . After clicking on ActivityStarter (Nonvisible components at the bottom of the main screen of the app), you will need to set the following properties as indicated:

• Action android.intent.action.VIEW
• ActivityClass com. google. Android. Maps.MapsActivity
• ActivityPackage com. google. Android. Apps. maps

Also Read: React Native: The Ideal Framework For Mobile Development

Program Android App Behavior

At this point, by clicking on the Blocks button at the top right, you can program the behavior of the Android app. Five blocks are enough to reach the finish line.

1st Block: Establish The User’s Geographic Positioning

The first block establishes the user’s location by estimating the address and retrieving the GPS coordinates from the operating system. To get started, click, in the left column, on LocationSensor1, then drag the block when LocationSensor1.LocationChanged .As in the case of puzzle pieces, the first block you just added will act as a container for other elements.

The various green set elements can be found by clicking on the corresponding labels, always acting on the left column of the block editor. The Location1.CurrentAddress element can be found by clicking on LocationSensor1: as the name suggests, it is a block that allows you to estimate the current address based on the user’s geographic location.

Then moving the mouse pointer over latitude and longitude, you can drag the two elements to get latitude and longitude. Of course, they allow you to find the GPS coordinates by querying Android. The true value, combined with the last green element, can be dragged by referring to the Logic menu.

Overall, the block thus created will allow detecting the moment in which the user’s geographic location changes (the user physically moves). Each time the user’s position changes, the content of the labels containing address, latitude, and longitude is modified, and then the first button, Remember position, is activated (Property Enabled ).

2nd Block: Stores The User’s Geographical Position

The second block allows the user’s geographical position to be stored in a database, stored locally on the Android device. This way, the information will be kept in memory even if the user has to close the app temporarily. The block container is, in this case, when Remember. Click do. This block can be dragged into the editor by clicking the Remember button in the left column.

In this case, the first three dark green sub-blocks ( set ) allow you to set the three indicated labels by displaying ( Text property ) the information from the Android sensors that establish the user’s position. You can drag the next three purple tiles by clicking on TinyDB1 in the left column. Next to the tag values, ​​it will be necessary to drag three empty text strings ( Text section in the left column) and assign them the indicated values ​​( address, lat, and long ).

The app will create a local database containing address, lat, and long fields. By combining the data from the LocationSensor1 element with valueToStore (“value to store” in the database), it will be possible to save the current address, latitude, and longitude. The last block allows you to enable (Property Enabled set to true ) the button to get directions.

3rd Block: Displays Directions To The Starting Point On A Google Maps Map

The third block returns directions to the starting point when the user clicks the Take me here button. The join block is located in the Text section and can combine multiple character strings. Once dragged to the editor, in the correct position, it will be necessary to click on the blue box of the join block to make room for eight strings: Note that the first string must be set to http://maps.google.com/maps?saddr=, the third and week must contain only a comma, the fifth the string &daddr=. The objective is to compose the address that causes the opening of Google Maps, bypassing the geographical coordinates of the starting and arrival points.

4th Block: Global Variable Containing The Address

By accessing the Variables section (left column) and dragging initialize global (…), you can initialize a global variable addressTemp containing the address where the user is located. This variable must be initialized as empty.

5th Block: When The App Is Started, It Retrieves The Previously Stored Information

The last block, which at first glance may seem the most complex, allows you to recover all the data previously stored in the database and restore them in the right positions. The mustard-colored block container is located in the Screen1 section and allows you to perform operations as soon as the app’s main screen loads ( when Screen1.Initialize do ).

First, it is required to set the previously created global variable addressTemp, saving the address field’s contents. If this does not exist (the app is launched for the first time), the variable will remain empty ( valueIfTagNotThere ). Further on (in case the global variable contains the address), the contents of the labels are set by reading the GPS coordinates from the database ( lat and long fields ). And finally, here is the Android app running on your smartphone.

Also Read: 5 Mobile App Testing Challenges You Need To Know About