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 to be used with Tap systems:
    • a Web App. This is the quickest way based on the ready to use IoTize Tap Manager mobile app.
    • 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 the development of your own mobile app.
  • These methods apply to both TapNlink (OEM solutions) and TapNPass product range.

Web App

Advantages

  • The Web app is 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 Web App 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 Web app.
  • 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 a Web app in HTML5 and JavaScript.
  • The Web app (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.
    • in your mobile device.
  • The 'Web app' 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 Web app and then Monitor.

Web App Development cycle

Setup configuration

To ensure seamless communication between Tap Manager and the Tap, the Tap must be configured 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 Web App. 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 Web apps.

Select IoTize Application|Mobile App from IOTZ Explorer view in IoTize Studio.

WebApp Configuration

Setup as follows:

  • App: select IoTize Tap Manager App.
  • Name: enter the name of your project. This name is used in Tap Manager's display and whenever an 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 Web app home page: [ROOT]/IoTize/URI
    • SD Card storage: for Android devices. URI will be the relative path to Web app 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 Web app home page: user.cloud.iotize.com/SerialNumber/SerialNumber.html
    • Other Location: Web based location which hosts your Web App. Please note that IoTize does not provide any services for publishing and hosting Web apps. In that case URI is the address of the Web App 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.

Build Web app

IoTize Studio Web App 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 this Web app to monitor your system. This Web app 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 Web App you should enable and setup the Wizard settings (in Studio Environment|Website Development and Monitoring Test). By default IoTize Studio generates the Web app in a subfolder of the project file.

Select IoTize Application|Studio from IOTZ Explorer view in IoTize Studio.

Web App generator

Setup as follows:

  • Automatic Web app generation:

    • Select 'Yes' to use automatic website generation (built-in Web app generator), which results in the automatic dispay of HTML pages (one for each profile)
    • Select 'No' if you want to build your Web app manually (or to customize HTML pages previously generated ) that you want to test from IoTize Studio.
  • Generation Sub Folder:

    • IoTize Studio generates the Web app (HTML files) 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 Web app generator (wizard)
      • one subfolder for the customized pages (in this case, it is better to )
  • Home Page file: the Web app home page generated by Studio using the current Tap serial number [SerialNumber].html.

  • Website Path for Monitoring: the complete path for the generated Web app 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 files

The Web App generator creates the following structure:

Web App generator

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 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.
  • 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 nut icon appeares next to the value. Clicking on this icon lets you change the value. Refer to IoTize Studio user manual to learn more about setting permissions to access variables.
  • The 'All Variables' view does not propose the modification of values.

Web App Customization

There are a few settings that could 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.
    Web App generator
  • Display in HTML: 'No' if you don't want to display this variable in the user interface.
  • Propose Submit: 'Yes' if you want this variable to be modifiable. Please note that the user also needs permission to modify the value to actually be proposed to do it.
  • Display as Floating Point , Display as Unsigned : value display.
  • Alias: the label for the variable display.
  • Expression: an optional operation on the value. For example to convert mV to V, enter: $/1000.0.
  • Unit: physical unit as a string.

Custom Mobile App

Development and publishing of companion mobile apps is your responsability. To help you get started easily with this task, IoTize provides an App Generator tool that could 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 does not know this framework, the following link is a good starting point to learn more about the process of mobile development using this framework.

IoTize App Generator tool (iode) is a standalone CLI tool that helps you develop, build and debug Tap companion apps based on Ionic Cordova framework. iode uses the "iotz" project file to generate the components and files needed to build a mobile app for monitoring your target system. With using the App generator you will have a working cross-platform companion app in minutes (source files and projects). These dependencies are automatically installed and integrated in the generated app.

iode is an npm package that should be installed as part of IoTize CLI. Please note that IoTize Studio's installation process does not install these tools as they need the npm installer.

IoTize App Generator uses IoTize Cordova plugins for handling the actual communication with Taps: BLE @iotize/cordova-plugin-iotize-ble, NFC @iotize/device-com-nfc.cordova and WiFi\Socket@iotize/device-com-wifi.cordova.

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

Generated App Sample

A generated app corresponding to '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 Generation Integrated in IoTize Studio

To make things easier, iode execution has been integrated in IoTize Studio, so you can change the generation settings and test directly the generated UI without leaving IoTize Studio. Two commands are available directly from IoTize Studio:

  • Generate App command will generate the source files based on the saved settings in the 'iotz' project. It will also run 'npm install' to setup all the necessary dependencies for building the mobile app.

  • Serve App command will use Angular 'ng serve' to build and serve your app. IoTize Studio will prompt you to ask if you want to display the served app in the integrated chrome view. With responding yes, you can test the generated UI directly from within the IDE, rebuilding on changes.

Setup configuration

IoTize Studio integrates the execution of the App Generator directly from its environment. You can set the main features of the generated app HMI from IoTize Studio environment.

General Settings

To configure and run the App Generator from IoTize Studio you should enable and setup the generation settings in IoTized Application|Mobile App.

Select IoTized Application|Mobile App from IOTZ Explorer view in IoTize Studio.

Mobile App generator

Setup as follows:

  • App type:

    • Select Generated App to enable App generation commands and display the corresponding settings.
  • Generated App Settings:

    • Location: choose the directory where the project should be created. Please note that if the folder already exists, it will be overwritten.
    • Layout and Display: global settings for the HMI.
      • Column per page: monitoring data is displayed in cellular components organized in rows and columns. The layout width will be divided using the provided number of columns.
      • App icon pathname: the source image for icons should ideally be at least 1024×1024px.
      • Primary Color, Secondary Color, Tertiary Color: Color theme of the Ionic app will be based on these three colors.
      • Monitoring page mode: 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 is available only for Android OS.
      • BLE: BLE communication with BLE Taps.
      • Socket: communication in socket with Wifi Taps.
      • MQTT: MQTT over websocket.
    • Pages: additional Information pages.
      • Generate Device Info Page: an additional page with information like the serial number, firmware version of the Tap, configuration version and the Application name.
      • Device Info Page Title: you can rename the info page title using this setting.
      • Device Info Content: additional info that could be added to the device info page.
        • Serial Number.
        • Firmware Version.
        • Configuration version.
        • App name.
      • Generate About Page.
      • About Page Title.
      • Generate Target Protocol Settings Page: Target<->Tap communication settings (modbus or uart settings).
      • Generate Supervision Page: this page gives access to some of the Tap configuration settings. User should be logged as supervisor or admin to get access to these settings. To change some of these settings, administrator rights are mandatory.
      • Supervision Page Title.
  • App reference stored on Tap NFC tag
    Taps have an embedded NFC tag, where an AAR record (Android) and a Universal Link (iOS) could be registered. You have to 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 type of NDEF record that is used by Google'Android operating system to launch your app to handle the communication with that Tap.
    • Universal Link for iOS: the universal link will redirect to your website where the apple-app-site-association file resides.

Monitoring 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' if you want this variable to be editable. Please note that the user also needs permission to modify the value to actually be proposed to do it.
  • Display as Floating Point, Display as Unsigned : value display.
  • Alias: the label for the variable display.
  • 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:

  • Show in Card: select 'Yes' to display the value inside a separated 'Ionic Card'.
  • 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 control allows the user to choose only one of a predefined set of mutually exclusive options. 'List of choices' option is a list of comma separated (label=value) sets that will define the possible choices: label1=value1;label2=value2;...
    • 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).