App First Attempt

7 June

Week16 Interface and Application Programming

---AppInventor---

I used the App Inventor to develop my first App. It's an online platform developed by MIT. I used a spare android phone to simulate the app. One of the problems for Chinese developers is that this site requires an google account to log in. Due to the fire wall issue, Chinese users might want to find alternatives to App Inventor.

I downloaded an simulator to my android phone. However, for the Chinese users who do not have direct access to google play, the simulator can be easily installed from its APK file directly from AppInventor's website.

---Code and Design with AppInventor--

There are mainly two steps in the design process. Interface design and code.

When click on the 'Designer' on the top right of the page, users can arrange the interface by dragging the design and specific functions from the left column. I designed two mainly two functions on this page: 'bluetooth pairing' and 'choose tea types'. Therefore I created four buttons for users to click on. Also users can easily upload pictures they like to beautify the screen. When I'm done with this, I move on to the second step - code.

Click on 'blocks' on the top right screen to define the actions of each elements created in the designer's page. I define the action of connecting to bluetooth devices when the 'Connect' button is clicked upon. Then I made the type line beneath the button show 'Connected' or 'Not connected' using an If Command when the responding result is true/ false respectively.

In the process of sending order to the MCU, the app would send signals 1, 2, 3 corresponding to the tea type of their choice (green tea, black tea, and oolong tea). That said, the app is actually sending numbers instead of words to the MCU. And the MCU which I've already programmed during the previous weeks, would take different actions when it receives orders of 1, 2, and 3.

The final step is to download the apk file to your mobile phone.

☞ Tips

The format of the editing file for App Inventor is actually .aia. Therefore if you want to edit it, you should use the AIA file.

The video showing me using the app on my mobile phone can be viewed from here: presentation.mp4

The APK file can be downloaded here:TeaBrewer.apk