Basics project 107m Building Stopwatch app with MIT App Inventor 2 Part 2


Basics: Project 107m

Project name: Building Stopwatch app with MIT App Inventor 2 Part 2

Tags: MIT App Inventor 2, Stopwatch, Android app

Attachments: stopwatch.jpg, stopwatch1.aia, stopwatch1.apk, icon1.png

General

We will extend stopwatch app, which was built with the MIT App Inventor 2 software, with SAVE and LOAD buttons. You will be able to save the result and load it if needed.

We assume that you have read our previous projects about MIT App Inventor 2.

Step By Step instruction

1.Go to Basics project 107l Building Stopwatch app with MIT App Inventor 2 and download the stopwatch.aia file.

stopwatch new

2. Go to appinventor.mit.edu and click on Create Apps! orange button.

stopwatch new

3. Click on My projects and select Import project (.aia) from my computer….

4. Choose file, click on Open button. Then click on OK button. Open the project Stopwatch.

5.Go to Designer editor tab.

6. From Storage pallete drag out the TinyDB component and drop it in the Viewer. You will see it in Non-visible components area.

stopwatch new

7. Go to Blocks editor tab. So far you have been arranging your app’s screen and components in the Designer, which is in a web browser window. To start programming the behavior of the app, you need to go to the Blocks editor. Click the Blocks button in the upper right of your screen to go to the Blocks Editor.

8.Go to SAVE drawer, drag out the when SAVE.Click do event handler block to work area.

STOPWATCH NEW

9. Go to TinyDB1 drawer, drag out the call TinyDB1.StoreValue tag valueToStore block and add it to the when SAVE.Click do block.

stopwatch new

10.Go to Text drawer, drag out the text string and add as shown below. Name it as TimeToSave. Go to RESULT drawer, drag out RESULT.Text block and attach as shown below. The RESULT label value will be saved in TinyDB1 under tag TimeToSave.

stopwatch now
stopwatch now

11. Select the LOAD drawer, drag out the when LOAD.Click do event handler block into the work area. Select the RESULT drawer, drag out the set RESULT.Text to block and add it to the when LOAD.Click do block.

stopwatch new
stopwatch new

12. Go to TinyDB1 drawer, drag out the call TinyDB1.GetValue tag valueIfTagNotThere block and add it to the set RESULT.Text to block. Move the text block to the “tag” and name it as TimeToStore.

stopwatch new

13. Go to RESULT drawer, drag out the RESULT.Text block and add as shown above.

14. We have also adjusted which buttons will be available for you depending on your choise. We have marked the conditions added. The final blocks diagram is below.

15.To test that it works, you either have to launch an emulator, or connect to a mobile device with the AI2 Companion.

16.While your device (emulator or phone/tablet) has been connected to App Inventor, your app has been running in real time on your device. If you disconnect the emulator/device from the Blocks Editor, the app will vanish. You can always make it return by reconnecting the device. To have an app running without being connected to App Inventor, you must “package” the app to produce an application package (apk file). To “package” the app to install on your device or to send to someone else, click the Build tab at the top of the screen. Under Build, select App (save to my computer) to download the app to your computer as an apk file, which you can distribute and share as you like by manually installing it on other devices.

stopwatch

Summary

We have successfully modified the Stopwatch app with MIT App Inventor 2.

AcoptexCom

Leave a Reply

Your email address will not be published.