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 mobile app:
    • a Web App, the quickest implementation, that uses IoTize Tap Manager mobile app to communicate with the Tap
    • your own Custom Mobile App using IoTize development librairies.
  • 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 primer (and more generally for 'provisioned' Taps in IoTize cloud platforms)
      • Customer 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

  • Univeral 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

Tap Manager App is a good and easy starting point for monitoring Tap solutions, but you may prefer to build and publish your own monitoring app.

Development and publishing is your responsability, whether you want your monitoring app to use mobile features like camera or phone, or you just prefer to brand your own app. To help you with this task, IoTize provides a set of native and hybrid mobile librairies which handle the heavy lifting of the communication with Taps, so you can concentrate on your own business logic.

You can develop two types of mobile App:

  • Native you must build a native application for each platform (iOS, Android, and so on)
  • Hybrid you can write an application using web technologies (like HTML, CSS, and JavaScript) and wrap the App inside a container WebView using an hybrid platform like Cordova

At the time of writing this documentation, IoTize provides native libraries only for Android development. For the other platforms you must build hybrid Apps using IoTize Cordova plugins and Javascript librairies. Refer to Application Development Center to learn about the available platforms and librairies.

Development cycle

Custom App Development cycle

The development cycle depends on the platform and targets for which you want to build an App. IoTize provides a set of native and hybrid librairies that handle the main features of Taps.

Taps have an embedded NFC tag, where an AAR record (Android) and a Universal Link (iOS) could be recorded. You have to modify the configuration of your Tap to write this information in the tag.

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

WebApp Configuration

Setup as follows:

  • App: Select Custom App.
  • Name: Select the name of your project. This name will be used in Tap Manager's display but also whenever an advertizing is needed (BLE, Wifi) to identify the IoTized device.
  • App AAR for Android: the AAR record of Tap's NFC tag will be the App ID of your mobile App.
  • Universal Link for iOS: the universal link will redirect to your website where the apple-app-site-association file resides.