Creating a mobile app with App Generator
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.
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).
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 firstname.lastname@example.org
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:
NB: If IoTize CLI seems blocked, quit (ctrl+C) and replace "iotize" by "iode" in your commands.
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 :
Both Android and iOS
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.
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:
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 v126.96.36.1998+
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.