Skip to content

Creating a mobile app with App Generator

Introduction

IoTize provides a CLI tool to help you develop IoTize apps. This tool can be used from a command interpreter or within IoTize Studio.

Android and iOS apps can be generated locally, but only Android apps can be generated on IoTize servers.

In this guide, we will use the App Generator feature of this CLI to create a hybrid application project from a .iotz configuration file.

If you don't have a .iotz configuration file, refer to TapNLink Getting Started or TapNPass Getting Started

The hybrid application generated is based on the Ionic Framework. Ionic uses Angular to create a web application, and Cordova to wrap this web application into a native one (Android / iOS).

Requirements

CLI Installation

Pre-installation

IoTize CLI depends on NodeJS, so you need to install NodeJS.

On Windows 10

Run the following command in an elevated PowerShell before installing IoTize CLI. To open an elevated PowerShell, right-click on the windows start button and click on PowerShell (admin).

npm install --global --production windows-build-tools@4.0.0

You can now install the CLI as a global package (making it available everywhere on your computer).

npm install --global @iotize/cli

IoTize CLI is now ready. Check its version with:

iotize version

NB: If IoTize CLI seems blocked, quit (ctrl+C) and replace "iotize" by "iode" in your commands.

iode version

NB: if the CLI version is <= 0.0.23, you will need to install the Angular CLI as a global command:

npm i -g @angular/cli

Hybrid Applications SDK Installation

The IoTize CLI uses Cordova to build hybrid applications, so we need to install the specific SDKs needed for each platform we want to build on. You will find more information on these requirements here :

Mobile

Both Android and iOS

Android

To deploy your application on Android, the Android SDK must be set up on your computer. The easiest way to do this is to install Android Studio, as it comes with everything you need to develop on Android, and will set up the environment variables properly. Android studio is available on Windows, MacOS and Linux.

Once installed, launch Android Studio once, it will guide you through the process of installing the Android SDK.

If you encounter difficulties installing the SDK, please refer to the Cordova documentation: Cordova Android Platform Guide.

iOS

To deploy your application on iOS, you need both iOS SDK and a valid Apple developer account. iOS development is only available on MacOS.

To install the SDK, install the latest Xcode application:

Once Xcode is installed, run these commands to enable the usage of Cordova and automatic deployment on an iOS device:

xcode-select --install
npm install -g ios-deploy

You are now able to develop and run your app inside an iOS simulator. Unfortunately you will need a real iOS device to communicate with IoTize products. In order to be able to deploy your application on your testing device, you will need a valid Apple developer account to create the certificates you need. The following documentation explains how to do this:

Web Browser

You can also load your application inside a web browser to communicate with your IoTize devices, using the BLE antenna of your computer or Android phone. (This currently only works on Google Chrome (and Chrome for Android). Install Google Chrome Latest Version if required.

Once the configuration is complete, you can generate your application from the CLI and from IoTize Studio.

Application Generation from IoTize Studio

This feature is available on IoTize Studio v1.27.19.298+

Generating a project

Once the above requirements met, you may generate your application project from within IoTize Studio:

  • Within IOTZ Explorer, select IoTized Application > Mobile App > App Type > Generated App.

  • Click on the "Generate App" button in the shortcuts (or by clicking Project > Generate). This process may take a while: check the IoTize Studio Output window to see the App Generators progress.

  • Once the project is created, you can click on "Serve App" (Project > Serve app) to see the generated project in Studio. While the app is being served, any changes you make to the layout are seen immediately in the Studio display. You can also use the "Monitor" feature of Studio to dynamically see how your data is displayed.

Generating an Android APK

To build an APK from your generated project, open a command prompt inside the folder of your project, and run:

npm run android

This generates a debug APK of your app. If an Android phone with debugging tools enabled is connected to your computer, it will also install and launch your application on this device.

If you want to see more about app generation, check out the Ionic official documentation:

Application Generation from the CLI

Open a terminal in the folder where you want to create your project. Get your .iotz configuration file path, and run:

iotize app start <my-app-name> --tap-config <your-tap-config-file-path>

Where <my-app-name> will be the name of your app. This creates an Ionic project in a folder <my-app-name>, and installs every dependency the application needs.

Once the installation has finished, go into the newly created project, plug your Android or iOS device into your computer and run your app on the device you want:

# 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

NFC application ID: AAR

Android allows your app to start automatically when your phone detects a properly configured NFC Tap. On creation, your application gets an ID: it can be seen (and modified) at the top of the "config.xml" file of the generated project.

<widget id="com.iotize.generatedapp.sensordemo" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Above is the second line of the config.xml of a generated appl. Here, the app id is "com.iotize.generatedapp.sensordemo".

This ID is the app AAR that should be configured within your Tap.

More information