This tutorial is intended to show you how to create your own personal Android app that is capable of displaying MIT App Inventor data in Ubidots.

Sending hours, minutes, and seconds to Ubidots might not be a typical IoT use case, but it serves as a way to understand how these two platforms can work together.

Requirements

NOTE 1: Step 2 is very helpful if you have no prior knowledge or experience of Ubidots. However, knowledge and experience are not required to successfully complete this tutorial

NOTE 2: The creator of the video in step 3 named his parameters temperature, humidity, and air flow, but you are not dealing with such parameters in this tutorial. Let's name only one parameter, "time" as that is our focus. As for the device, you can name it whatever you like, i.e. "time-teller." 

2. Clicking the "web" icon under "components" will reveal the component's "Properties."

3. In the URL box of the web's "properties", copy and paste the below URL: 

4. Replace the words "your-device" with the exact name of your device that you named while you were following the YouTube video previously. If you've forgotten, go back to your Ubidots account and it can be found within the device's details. 

5. Replace the word "TOKEN" (the very last part of the above URL) with your Ubidots token. Can't find your token, check out this simple guide.

2. In the "components" category, click the "clock" icon to display "properties" 

3. Make sure the "Timerinterval" reads as 1000

4. From the category "user interface" in the Palette, click and drag the "button" icon to the center screen.

5. Click on the button icon "Text for Button1" on the middle of the screen , and the "properties" will appear.

Tip: making font size a little larger (20 is a decent font size)
6. In the box labeled "Text" name your button. For example, name it "Tell Time".
7. From the category "user interface" in the Palette, click and drag the "label" icon to the center screen.

8. In your center screen, click the label icon "Text for Label1" and again the "properties" will appear on the right.

Tip: making font size a little larger (20 is a decent font size)
9. Check the box for "FontBold"
10. Make this Label hidden (under "visible"). 

Now we are ready to build the time stamp app!
​

3. Click and drag the first building block (when, Button1, click, do).

4. Under "Blocks" click on Label1, and select the building block that says: set, Label1, Text, to, and connect it to the previous building block like this:

5. Under "Blocks", click on "Text", and choose the second building block ("Join"), and connect it to the previous building block:

6. Click on the "Clock1" icon. We need three building blocks from here: call, Clock1, hour, instant... call, Clock1, minute, instant... and call, Clock1, second, instant.

7. Next, click on the blue symbol located on the pink building block that says "Join."

8. We need this block to have 6 nodes instead of just 2. To do that, click and drag the single mini building block that says "string" and place it under the other mini building blocks. 

9. Next, connect these three clock building blocks to the "Join" building block, leaving a node empty between each clock building block:

10. Replace those two empty nodes with the first building block from "Text":

11. Next, click "Variables," select the building block that says... initialize, global, name, to... and change the name to whatever is appropriate. Let's call it "timenow"

12. Under "Text", take the first building block again, and connect it to the previous. In it, type in "text"

13. Under "Variables," select the second building block (the one that says "get") and attach it to the clock building block "call, Clock1, hour, instant" 

14. In its drop down menu, select "global timenow" and then connect that block to the 2 other clock building blocks. Right click to duplicate and drag:

15. Under "Variables," select the third building block (the one that says "set... to" on it), connect it right under the first building block (when, Button1, click, do) and in its drop down menu select "global timenow":

16. Click on the "Clock1" icon, select the building block that says... call, Clock1, now... and connect it to the building block just put down:

17. Click on "Label1", select the building block that says... set, Label1, visible, to... and paste it in between here:

18. Finally, select the first building block under "Logic" (the one that says "true") and connect it to the previous building block you just put down:

Step 6: Build the code that allows connectivity to Ubidots

Congratulations! You have built the foundation for telling time. But, before we proceed, let's add the necessary components to this foundation to ensure connectivity to Ubidots. The YouTube video to begin this tutorial showed how to fill out the HTTP request webpage, using the Ubidots documentation webpage. What was done here was prepare the Ubidots cloud for receiving an HTTP request. Now, in order to receive an HTTP request, Ubidots needs a device (like this MIT app converter) to send one! 

The format to send a HTTP requests is in a syntax called "JSON dictionary". We are sending a request for 3 variables (hours, minutes, seconds), the JSON dictionary syntax for these three variables is as follows:

Once you've added the necessary building blocks to send HTTP request, you will be able to see how the JSON dictionary syntax above is implemented into our foundation.

Building the Application

2. Click on "Lists," and double click the building block called "Make a list." Connect them as described below, making sure that the second block has 2 nodes instead of just 1:

3. Next, click on "Text," and double click the first building block, and type in one of them "Content-Type" and the other "application/json". Connect the two to the 2 nodes of the "make a list" building block:

4. Click on the "web" icon, and select the building block called... call, Web1, PostText.... and place it at the bottom of our foundation.

5. Using similar building blocks that you have already used, the rest of this foundation is as follows. Make sure to type in the seconds, minutes, and hour text blocks exactly as you see them, so that they could exactly match the JSON dictionary syntax!

Now, rather than a single numerical value for time, we need to assign some structure to make it easily readable. We must add colons to separate the hours, minutes, and seconds, and we must also make sure that each of these segments--hours, minutes, and seconds-- always has two digits. For example, if it is 5 minutes and 7 seconds past noon, 12:05:07 looks more pleasing to the eye than 12557.

Step 7: Assigning structure to your display

NOTE: I moved the building block "set, label1, visible, to" and its attached block that says "true" towards the bottom of the foundation for nothing more than to make it look a little tidier up top. Here are two screenshots to compare:

2. Under "Blocks" click on "Control," and take the building block that says if, then, else on it, and place it above the first colon.

3. Under "Blocks" click on "Lists" then choose the building block that is is in list?thing, list an connect it to the "if" node of the building block you put down in the previous step.

4. Connect the clock building block....call, Clock1, hour, instant.... along with its attached block "get global timenow" to the "thing" node of the building block you put down in the previous step.

5. Under "Blocks" click on "Lists" and choose the building block that reads "make a list." This building block needs to have 10 nodes instead of 2, so use the blue symbol to add some more nodes. Fill in each node with the first building block of the "Math" category, and number these building blocks from 0-9:

6. Connect these 10-nodes to the building block "is in list? thing" at the node where it says "list

7. Under "Blocks" click on "Text" and choose the building block that says "Join" and connect it to the "then" node of the "if, then, else" block:

8. Under "Blocks" click on "Text" and choose the first building block, connect it to the first node of the "Join" block, and enter a "0" (zero) in it:

9. Take the clock building block "call, Clock1, hour, instant" along with its attached block "get global timenow" (right click and duplicate if you have to) and connect it to the other node of the "Join" block as described below:

10. Take the clock building block "call, Clock1, hour, instant" along with its attached block "get global timenow" and connect it to the "else" node of the "if, then, else" block."

11. Steps 1-10 need to be repeated exactly the same way, this time replacing the "call, clock1, hour, instant" block with the "call, clock1, minutes, instant" block.

12. Steps 1-10 need to be repeated exactly the same way, this time replacing the "call, clock1, hour, instant" block with the "call, clock1, second, instant" block. I recommend simply right clicking on the "if, then, else" block, duplicating it, and simply replacing the two clock blocks mentioned. Then connect it to the node that comes after the second colon after duplicating and replacing the clock blocks with "call, Clock1, second, instant" instead of "call, Clock1, hour, instant"

and connecting it after the second colon:

Our code is officially done and you have the complete building blocks to your time stamp application.
​​
Step 8: Create your app and send data to Ubidots

2. Back in the MIT app inventor, click on "Build" in the top of the page, and select the first App from the dropdown

3. A barcode similar to the one below will appear:

4. In the app of your phone, click on "scan QR code" and take a picture of the barcode. Your phone should automatically start installing another app, which is your app that you've created within this tutorial!

Some Android phones present you with a little problem like this:

5. No reason to worry. Click on "settings," check the box named "Unknown sources" and "OK."

Your phone is now installing your app! Our app is called "clock" as this is the device-label used when filling out the HTTP request page.

8. Once installed, click "OPEN". Your new app will open, and your button will appear on the screen:

(This phone is set in military time but the hours come first, then the minutes, then the seconds):

As you can see in this example, the time displayed is 18:23:05, or 18 o'clock, 23 minutes, and 5 seconds (6:23 PM and 5 seconds). If you go to your Ubidots page under the "Devices" tab, you will see that whenever pressing the button in your app the variables in Ubidots (hours, minutes, seconds) update immediately.

The creative mind can only go so far without the help of technical knowledge, but the app inventor stretches the boundaries of what we can accomplish. Telling time is only a simple, small example of what you can do with the app inventor, but when paired with Ubidots, one is capable of rapid development.

There's the cliche that "technology makes our lives easier", and this is also true with the Internet of Things. Only the difference being IoT makes an individual's life easier. The IoT allows users to explore their own niche and improve their own environments. To begin your innovation and IoT development, create a Free Ubidots account today and begin your betterment.