Skip to content

Mobile app project generator

iotize-app-gen command line interface is a mobile app project generator. It creates an ionic-based cross-platform app project from your configuration in IoTize Studio.

It can generate for you

  • A device discovery page to scan for BLE or WiFi Tap device around you.
  • Connections through multiple protocols (NFC, MQTT, Socket)
  • Monitoring dashboards with gauge, charts, sliders, buttons or text.
  • A connectivity configuration page for your device (WiFi SSID/WiFi key, MQTT connection settings)
  • A login page

Once the projet is generated, you can run the app on your mobile device or generated an app package to be shared:

  • For Google Play, generate and Android Package (APK)
  • For App Store, generate an iOS App Store Package (IPA)

As the generated project is a Standard ionic/angular project, you can edit source code with any code editor (works great with Visual Studio code) to further adapt it to your needs.

Installation

Node version 10 or a later version must be installed The download page has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility. Make sure the latest Node LTS is installed.

Then you can use npm to install the generator:

npm install -g @iotize/ionic-toolkit@latest

That's all you need to generate your ionic-based app project.

However, if you want to build a package for iOS (IPA) or Android (APK) you must also install the corresponding application development tools.

Usage

You can use this tool as a command line interface or from IoTize Studio.

With IoTize Studio

Generating the application with IoTize Studio is as simple as cliking.

IoTize Studio menu

  • Generate app: it generates the app project
  • Serve app: it generates the app project and serve it as a web app. It will be displayed in IoTize Studio web view. It's very usefull during your app developmenent as configuration changes are automatically reloaded and displayed in the Webview.

As a Command Line Interface

To display the CLI help, use the iotize-app-gen --help or iotize-app-gen <cmd> --help commands.

Generate an app according to an IoTize Studio configuration file (.iotz):

iotize-app-gen start <my-app-path> --tap-config <your-tap-config-file-path.iotz>

You can also generate an app with the Sensor demo configuration template:

iotize-app-gen start <my-app-path> --template SensorDemo

This command creates a working Ionic app. It installs dependencies for you and sets up your project.

The first argument is your app's name. The project id is generated from the app name unless explicitly specified.

--tap-config option is used to pass the IoTize studio configuration file path.

Once your app is generated, go to the newly created folder and run your app with one of the following commands:

# Go to generated directory
cd <my-app-name>
# Run on an Android device
npm run android
# Or run on iOS (You must be on a MAC)
npm run ios
# Or run in a browser
npm run webapp

The first time you run on android or iOS, it will take several minutes to install the Cordova project and its dependencies, be patient.

As the generated project is based on Ionic Framwork, you can use ionic CLI.

Generated app features

Tap scanner / Tap connection

Scan for Wi-Fi or BLE Tap or connect with NFC, Socket or MQTT.

Tap info

Display current Tap configuration info such as the serial number, firmware version or configuration version.

Dashboards

It will generate one dashboard per profile that will allow you to monitor and edit variable values.

For each variable, you can define if and how it will be displayed.

Per variable configuration

Show how variable will be displayed in the dashboard. As a text, a gauge or a chart for example.

About

Display application developer, description and version

Serial settings

If your Tap is communicates with your target through serial, this page will allow you to reconfigure serial settings such as Baud rate and parity.

Connectivity settings

Configure/reconfigure Tap connectivity settings for NFC, BLE or Wi-Fi.

Supervision page

Supervision page provides an interface to change user passwords, session life time or data log acquisition period for bundles.

Application settings

Configure application theme colors, logo and splashscreen.

Architecture

The generated app project is based on ionicframework v4 and angular. Ionic framework documentation can be found here.

Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript). Ionic Framework is focused on the frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations). It’s easy to learn, and integrates nicely with other libraries or frameworks, such as Angular, or can be used standalone without a frontend framework using a simple script include.

Supported Plaforms

According to the runtime platform/version of the generated app, some features may or may not work.

Here a non-exhaustive list of supported platforms:

Mobile OS

Platform Supported Tested version Notes
Android YES Android >= 6.0 Android Platform Guide
iOS YES iOS 13 To test/run the generated app on iOS, you must use a MacOS device configured for iOS development. Start Developing iOS Apps (Swift)

Desktop browsers

Browser Supported Tested version Supported protocols
Chrome YES Tested on version 76.0.3809.132 BLE, Websocket, MQTT
Safari YES Tested on version 12.1.2 Websocket, MQTT
Opera YES Tested on version 63.0.3368.71 Websocket, MQTT
Firefox YES None Websocket, MQTT
Edge YES Tested on version 42.17134.1.0 Websocket, MQTT
Internet Explorer NO

Mobile browsers

Browser Supported Tested version
Chrome YES None
Opera YES None
Safari YES None