Skip to content

Building a Mobile App

Overview

  • IoTize enables you to quickly convert mobile devices, such as smartphones, tablets and laptop PCs, into smart touchscreens for your embedded systems.
  • Once configured, your Tap handles the communication between your embedded system and mobile device, enabling you to monitor your system from a mobile app.
  • There are 2 methods to build a monitoring mobile app for Tap systems:
  • HTML pages: using the ready-to-use IoTize Tap Manager mobile app (this is the quickest method).
  • a Custom Mobile App: using IoTize App Generator tool. From IoTize Studio you can configure and generate an Ionic\Cordova based hybrid mobile app corresponding to your project. The generated app could be used as a starting point for developing your own mobile app.
  • These methods apply to both TapNLink (OEM solutions) and TapNPass product ranges.

HTML pages

Advantages
  • HTML pages are the fastest and easiest method, particularly suitable for developing POCs.
  • It does not require platform-specific (Android, iOS) expertise, as:
    • IoTize Tap Manager is a ready-to-use app, available from Google Play Store and Apple App Store.
    • IoTize Studio includes an HTML page generator (Wizard) to dynamically generate a simple Web app, in the form of HTML pages.
Architecture and principles
  • - Tap Manager app includes a browser-based WebView, used to retrieve and execute your HTML pages.
  • Tap Manager extends the basic browser application using native features of the various platforms to handle all the heavy lifting of the communication with Taps.
  • You just have to implement the GUI as HTML pages using HTML5 and JavaScript.
  • The HTML pages (static website) can be deployed:
    • on a remote server
      • IoTize server for IoTize primers (and more generally for 'provisioned' Taps in IoTize cloud platforms).
      • Custom servers.
    • on your mobile device.
  • The 'HTML pages' method applies to:
    • TapNLink, for MCU-based target systems.
    • Both TapNLink and TapNPass, for ModBus target systems.

Tap Manager

Development cycle

Simply set up the configuration, build the HTML pages and then Monitor.

HTML pages Development cycle

Setup configuration

To ensure seamless communication between Tap Manager and the Tap, the Tap must be configured to act as follows:

  • The Tap's NFC tag starts Tap Manager upon an NFC tap. The embedded NFC tag contains an AAR record (Android) and a Universal Link (iOS).
  • Record the location where Tap Manager can find the HTML pages. Upon connection, Tap Manager retrieves this location from the Tap. This location could be in the mobile internal storage (Android Only) or hosted on the Web. Please note that IoTize does not provide any services for hosting or deploying Tap Manager's HTML pages.
Setup IoTize Studio
  • Select IoTize Application|Mobile App from IOTZ Explorer view in IoTize Studio.
  • App: select IoTize Tap Manager App. Name: enter the name of your project. This name is used in Tap Manager's display and whenever advertizing is needed (BLE, WiFi) to identify the IoTized system.
  • Location and URI: Location of the 'Web app' could be one of the following:
    • Android Internal Storage: for Android devices. URI is the relative path to the HTML pages home page [ROOT]/IoTize/URI
    • SD Card storage: for Android devices. URI will be the relative path to the HTML pages home page [SDCARD_ROOT]/IoTize/URI
    • Primer Development Server: for TapNLink Primers (and optionally for other Taps which have been provisioned in IoTize cloud platforms), IoTize provides publishing and hosting services in 'Primers Development Server'. URI is the relative path to the HTML pages home page: user.cloud.iotize.com/SerialNumber/SerialNumber.html
    • Other Location: Web based location which hosts your HTML pages. Please note that IoTize does not provide any services for publishing and hosting HTML pages. In that case URI is the address of the HTML pages home page.
  • App AAR for Android: the ARR record of Tap's NFC tag is the App ID of *IoTize Tap Manager App*
  • Universal Link for iOS: the universal link redirects to www.iotize.com.

WebApp Configuration

Build HTML pages

IoTize Studio HTML pages generator (Wizard) dynamically generates a set of HTML and Javascript files that create a simple Web App according to your project's configuration. IoTize Studio's embedded Chromium Browser lets you visualize and use these HTML pages to monitor your system. These HTML pages could be tested directly from IoTize Studio, or used a starting point to build your own Web app, or be uploaded to the Web and used from a mobile through Tap Manager.

General Settings

To configure and test the IoTize Studio generated HTML pages you should enable and setup the Wizard settings (in Studio Environment|Website Development and Monitoring Test). By default IoTize Studio generates the HTML pages in a subfolder of the project file.

Setup IoTize Studio
  • Select IoTize Application|Mobile App from IOTZ Explorer view in IoTize Studio.
  • App: select IoTize Tap Manager App.
  • Automatic Website generation:
    • Select 'Yes' to use automatic website generation (built-in HTML pages generator), which results in the automatic dispay of HTML pages (one for each profile).
    • Select 'No' to build your Website manually (or to customize HTML pages previously generated) and test from IoTize Studio.
  • Generation Sub Folder:
    • IoTize Studio generates the HTML pages from this subfolder
    • You can use several subfolders and change this setting accordingly, with for example:
      • one subfolder for the HTML pages generated by the HTML page generator (wizard).
      • one subfolder for the customized pages.
  • Home Page file: HTML pages home page generated by Studio using the current Tap serial number [SerialNumber].html.
  • Website Path for Monitoring: complete path of the generated HTML pages is [Project Folder]\[Generation Subfolder]\[SerialNumber].html. The embedded browser in IoTize Studio uses this location for the monitoring command and to test the generated Web app.

Web App generator

Web App generator files

The Web App generator creates the following structure.

Among the generated files and folders you will find:
  • the js folder: contains IoTize Javascript Librairies implementing IoTize concepts and communication systems.
  • A set of html files: The Web App is designed as a single-page html file named 'SerialNumber'.html. For each project's profile there is a 'SerialNumber'.'profileID'.html, so a successful login brings up the corresponding page on the screen.
When uploading the Web app, all the files and directories should be uploaded, and the full URI path of the home page 'SerialNumber'.html should be recorded in the Tap's configuration as Mobile App|Customization|URI.

Web App generator

Web App User Interface

IoTize Studio generates a simple UI based on the project's configuration file.

Web App generator

  • The default page of the Web app displays all the bundles Variables. Variable values cannot be modified from this view.
  • Each bundle has a page, that you can navigate to from the hamburger menu on the top left of the title bar.
  • The UI has a login command available on the top right of the title bar. If the logged-in user has the right to modify a variable, a cog icon appeares next to the value. Click on this icon to change the value. Refer to IoTize Studio user manual to learn more about setting permissions to access variables.

Web App Customization

There are a few settings that help you customize the wizard generated Web App
  • Title name: the displayed name is the name as specified in IoTized Application|Mobile App|Name.
  • Title bar color: in Profile settings, title bar color can be different for each profile.
  • Page name: in Bundle settings, this page name corresponds to Bundle name.
  • Variable display: The way variables are displayed in HTML pages are defined in Variable settings.
  • HTML Generation
    • Display in HTML: 'No' if you don't want to display this variable in the user interface.
    • Propose Submit: 'Yes' to make this variable modifiable. A user also needs modification permissions to be able to modify it.
    • Display as Floating Point , Display as Unsigned : value display.
    • Alias: the label for the variable in the display.
    • Expression: an optional operation on the value. For example to convert mV to V, enter: $/1000.0.
    • Unit: physical unit as a string.

Web App generator

Custom Mobile App

Development and publishing of companion mobile apps is your responsibility. To help you get started easily with this task, IoTize provides an App Generator tool that can be launched directly from IoTize Studio environment.

IoTize App Generator
  • creates source files for Ionic\Apache Cordova framework. If you are new to mobile development and do not know this framework, https://ionicframework.com/resources/articles/what-is-apache-cordova is a good starting point to learn more about this process.
  • uses IoTize Cordova plugins to handle communication with Taps:
    • BLE https://www.npmjs.com/package/@iotize/cordova-plugin-iotize-ble
    • NFC https://www.npmjs.com/package/@iotize/device-com-nfc.cordova
    • WiFi\Socket https://www.npmjs.com/package/@iotize/device-com-wifi.cordova.

IoTize also provides native libraries for Android development. Refer to Application Development Center to learn about the other platforms and librairies.

App Generator example of Sensor Demo

A generated app corresponding to the 'Sensor Demo' configuration is available for installation and test from Google Play Store:

Get it on Google Play

Development cycle

Custom App Development cycle

App Generator commands in IoTize Studio

Two App Generator commands are available directly from IoTize Studio:

  • Project | Generate: generates the source files based on the saved 'iotz' project, and runs 'npm install' to setup all necessary dependencies to build the mobile app.

  • Project | Serve App: uses Angular 'ng serve' to build and serve your app. IoTize Studio asks if you want to display the served app in the integrated chrome view. If you reply yes, you can test the generated UI directly from within the IDE, rebuilding after changes.

Setup configuration

The App Generator can be executed from IoTize Studio, where you can setup the main features of the generated app.

General Settings To configure and run the App Generator from IoTize Studio, select IoTized Application|Mobile App from IOTZ Explorer view in IoTize Studio.
  • App type: Select Generated App to enable App generator commands and display the corresponding settings.
  • Generated App Settings:
    • Location: choose the directory where the project should be created. NOTE that if the folder already exists, it will be overwritten.
    • Layout and Display: HMI global settings.
      • Column per page: monitoring data is displayed in cellular components organized in rows and columns. The layout width depends on the number of columns.
      • App icon pathname: the Logo image should be at least 1024×1024px.
      • Splash screen pathname: the Splash image should be at least 1024×1024px.
      • Primary Color, Secondary Color, Tertiary Color: The color theme of the ionic app will be based on these three colors.
      • Monitoring page mode: There are two ways to organize the display.
        • One page per profile: values are grouped in a single page per profile.
        • One page per bundle: values are grouped in tabs, each corresponding to a bundle.
    • Communication Protocols: phone<->Tap communication protocols to be implemented in the app.
      • NFC: NFC communication with all Taps.
      • BLE: BLE communication with BLE Taps.
      • Socket: communication in socket with WiFi Taps.
      • MQTT: MQTT over websocket.
    • Pages: additional information pages.
      • Device Info: Generate Page: shows information like the serial number, firmware version of the Tap, configuration version and the Application name.
      • Device Info: Page Title: renames the info page title.
      • Device Info: Content: additional info that could be added to the device info page.
        • Serial number.
        • Firmware version.
        • Configuration version.
        • App name.
      • About: Generate Page.
      • About: Page Title.
      • Device Info: Content: additional info that could be added to the device info page. App version, developer name and more.
      • Generate Target Protocol settings Page: Target<->Tap communication settings (modbus or uart settings). Specify page title.
      • Generate Supervision Page: gives access to some Tap configuration settings for supervisor or admin users. Only users with administration rights can change these settings. Specify page title.
      • Connectivity settings. Specify page title.
    • App reference stored on Tap NFC tag: Taps have an embedded NFC tag, where an AAR record (Android) or a Universal Link (iOS) could be registered. You must modify the configuration of your Tap to write this information in the tag.
      • App AAR for Android: the Android Application Record (AAR) is a special NDEF record used by Google' Android operating system to launch your app and handle communication with that Tap.
      • Universal Link for iOS: the universal link will redirect to your website where the apple-app-site-association file resides.
    • More: General purpose binary data: can contain up to 200 bytes character string of private data for your app.

Mobile App generator

UI Settings

Apart from the general settings of the application layout, the way that monitored values are displayed can be configured. Select the variable from the IOTZ Explorer view to setup the display settings of the variable in the generated app.

Mobile App generator

  • HTML Generation:

  • Display in HTML: 'No' if you don't want to display this variable in the user interface.

  • Propose Submit: 'Yes' to make this variable editable. Please note that the user also needs permission to modify the value to actually be proposed to do it.

  • Alias: the label for the variable display.

  • Digits for float : Number of float digits.

  • Expression: an optional operation on the value. For example to convert mV to V, enter: $/1000.0.

  • Unit: physical unit as a string.

  • Details for the generated App:

  • Mode: Choose the type of control for displaying the value:

    • Text : value is displayed in a text field. To make this field editable, the user should have read and write permissions on the corresponding variable, and the option 'Propose Submit' should have been set to 'Yes'.
    • Gauge: value is displayed in a gauge control. Additional setup for the min and max values of the displayed gauge.
    • OnOff: toggle button. Value of 0 means 'Off', and 1 means 'On'. The label 'On'and 'Off' could be renamed.
    • Buttons: multiple buttons that correspond to multiple choices. The user may choose only one option. 'List of choices' option is a list of comma separated (label=value) sets that define the choices: label1=value1;label2=value2;...
    • Select: List of multiple choices: eg 1=red;2=green;4=blue; ( defines an enum list of 3 values represented as text, but stored as their numeric values).
    • Slider: slider control with a min and a max value.
    • Chart: line chart, scaled for your data values (Y axis) and the time they have been measured (Y axis).
    • ValueMapping: use mapping to set conditional values.
    • Bits: Specify a bit position (or range) to be matched with the condition.
    • Condition: e.g. 1, or 0xFF, or 0b0101
    • Content: content to display when the condition matches.
    • Code: insert angular code or Java to customize your display
  • Min: min value, option only available for certain modes.
  • Max: max value, option only available for certain modes.
  • Card Options
    • Show in Card: select 'Yes' to display the value inside a separated 'Ionic Card'.
    • Header icon: Icon name to use.
    • Header color name: for example dark, light, primary or secondary.
    • Additional text: to display.
Back to top