1. Tutorials
  2. Integrate M2X with ViziApps

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.

ViziApps is a cloud-based Visual, Low-coding Mobile App platform for creating iOS, Android, and HTML5 mobile apps in 1/10th the time and cost of coded apps. ViziApps is the only mobile platform that enables users to visually create their mobile app’s user experience, app navigation, native device feature use, and backend data and IoT access with no coding. ViziApps apps can be easily enhanced with seamless insertion of JavaScript to extend the app user experience, flow logic, and backend services. The whole process of creating and publishing secure mobile apps can take just days instead of weeks or months. ViziApps includes integrated no coding support for AT&T M2X, as well as Google docs, Intuit QuickBase and QuickBooks Online, Red Hat MAP mBaaS, over 37 SQL databases, and Salesforce CRM, and has been stress-tested to millions of app users.

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.

  1. 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.

  2. 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.

  3. 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.

  4. 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

  1. 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

  2. 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.

  3. 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: