M2X Integrated with ViziApps for Building IoT Mobile Apps Fast
This tutorial will walk through the steps needed to access and manage data from M2X for use within a mobile app built using ViziApps.
The application we’ll be building will use the List Data Streams endpoint of the M2X API in order to list a Device’s Streams along with their last logged value.
Create the Mobile App and its First Page
If you don’t already have a ViziApps account, go to ViziApps and click on Start a Free Trial to create your own ViziApps free 30-day Trial Account, and open the ViziApps Studio on your browser with your ViziApps Username and Password. To view official documentation on how to create an app click on Your First App.
Create the App: Open ViziApps Studio on your browser, and select Create a New App. Fill in the Application Name, App Type and First Page Name.
Add M2X Data Source: After you create your app you will be navigated to the first app page. Now let's add M2X as a data source for your application. Click on Manage Data->new Data Source->M2X. Then fill in your M2X Master Key, select Save and exit the dialog. You can obtain your M2X Master Key from the M2X Account Settings screen.
Page Title: Now create the page title by double clicking on the Label tool to the left of the canvas. Fill the Label ID, Label Text and select Header Font for the Themed Font option. Then click on Insert Label and place the label at the top center of the page.
Add Button to Get Data: Next create the button that will get the M2X data by double clicking on the Button tool. Fill in the dialog form as shown below. Then click on Insert Button and place the button below the title.
Button ID: getStreams
Button Label: Get Streams and Latest Values
When a user taps this button: Get or send device data via a web data source
Connect the App to M2X
Create Data Streams Display Table: To create the table of streams, click the Table tool to the left of the device canvas. Fill in the Table ID, Display Name, table row type, and field names as shown below. Then click on Insert Table and place the table below the button.
Table ID: streamTable
Table Display Name: Stream Names & Latest Values
Select table row type: 2 text fields
Enter 2 Field Names separated by a comma: streamName,streamValue
Store the Device ID: Add a hidden field to store the M2X Device ID by clicking on the Hidden field tool and setting the device ID as shown by the following and then click on Insert Hidden Field. Note that the hidden field will not be seen when the app runs. You can find the Device ID for any of your M2X Devices by viewing the Device's detail page.
Connect to M2X: First Save all the recent changes you’ve made to the app home page. Then, to connect M2X to the table of device data streams, click Manage Data.
On the Manage Data screen select the plus(+) button next to Select Data Sources to Use for this Page and in the Add App Data Source dropdown menu choose M2X. Then choose the "getStreams" from the Select a Page or Field to Start Operations on the Selected Data Source dropdown menu.
Next, select Add Command and choose List Data Streams. Then drag and drop the "deviceID", "streamName" and "streamValue" fields from the app Storyboard on the left to the "id", "name" and "value" fields in the query tree on the right. Then click Save.
Run the Final App
Now you can test your app by previewing in the browser or running on a mobile device.
To preview the app in your browser choose Preview App:
To preview the app on your mobile device choose Select for Device Test. Then, download the ViziApps Mobile App to your device from the App Store (for iOS) or Google Play (for Android). Open the ViziApps mobile app and enter your Free Trial Account Username and Password. Your new app will open on your device.
One you tap the "Get Streams and Latest Values" button your app should list the streams and values and will look like this: