Accelerate Your IoT and Robotics Development Using Web Technology and Apache Cordova*

1Intel® Open Source Technology CenterIntel® Open Source Technology Center
Accelerate your IoT and Robotics development
by using Web Technology and Cordova*
Halton Huo <halton.huo@intel.com>
Dev Manager of SSG/OTC Web Platform

Agenda
● Web Development for IoT
● Overview
○ Basics of Intel® Joule™ and Android Things*
○ Web Application and Cordova*
● Tranings:
○ Development environment setup
○ Step by step to create a Web App
○ Add/Develop/Debug Cordova plugin
● Resources and API readiness
● Q&A

3Intel® Open Source Technology Center
Why Use Web Technology for Robotics/IoT

Industry Voice: Web Technology Adoption in IoT
Leverage web & mobile developers to build WoT

Web Application = JavaScript + CSS + HTML

Agenda
● Overview
● Tranings:
● Q&A

Android Things*
● Embedded operating system platform by
Google*
● Announced at Google I/O 2015.
● Supported boards (Intel, NXP, Raspberry
Pi)
● Extends the core Android framework with
Things Support Library.
● Integrate with new types of hardware.
● Streamlined for single application use.

Intel® Joule™ Module
https://ark.intel.com/products/series/96417/Intel-Joule-Compute-Modules
Specification
CPU & Memory
IntelⓇ Atom™
1.5/1.7GHz quad-core x86,
14nm
3GB/4GB RAM
Storage 8GB/16GB eMMC
Display
Intel® HD Graphics: HDMI
1.4B
Camera CSI-2
Audio USB2.0
Networking
Wi-Fi 802.11ac
BluetoothⓇ 4.2

Agenda
● Overview
● Tranings:
● Q&A

Cordova Architecture for Android Things*
Web
Standard
APIs
Cordova
Plugins

Agenda
● Overview
● Tranings:
● Q&A

Development environment setup - Hardwares
● Android Studio HW minimal requirements
● Intel® Joule™ board
● Grove Maker Kit for Intel Joule
● Optional
○ HDMI Display
○ USB keyboard & Mouse
○ Grove - Temperature and Humidity
○ Grove - Infrared Temperature Sensor

1
2
3
4
56
Name Connected
To
Purpose
1 Power
Cable
Outlet Power
supply
2 USB
Type C
Host PC Debug
3* USB Display USB
Mini B
Power of
display
4* Mini
HDMI
Display HDMI Display
5 Grove
buzzer
Grove shield
6 Grove
LED
Grove shield
optional items marked with *

Development environment setup - Softwares
1. Burn Android Things image to Intel® Joule™
a. https://developer.android.com/things/hardware/joule.html
2. Install Android Studio
3. Setup environment variables
a. https://cordova.apache.org/docs/en/latest/guide/platforms/android/
b. $JAVA_HOME
c. $ANDROID_HOME
d. $ANDROID_HOME/platform-tools and $ANDROID_HOME/tools added to $PATH
4. Install latest Google Chrome browser and Node.js, LTS is prefered
5. Install Cordova npm install -g cordova

Agenda
● Overview
● Tranings:
● Q&A

Lab1: Simple steps to create a Cordova app
cordova create hello com.intel.hello
cd hello
cordova platform add android
cordova build
More command line options , please check
https://cordova.apache.org/docs/en/latest/reference/cordova-cli/index.html

Project Structure
• config.xml controls cordova application behavior
• www contains your HTML, JS, CSS files
• hooks special scripts to customize cordova commands
• platforms project specific platform
• plugins installed plugins (both JS files and native resources)
• package.json npm manifest

Run the application
● Via CLI (prefered)
● Import into Android Studio
a. Launch Android Studio
b. File->New->Import Project
c. Select folder of
<project>/platform/android, then
click OK
d. Click Run/Debug as usual.
cordova run

Cordova on Android lifecycle
Cordova Event Rough Android Equivalent Meaning
deviceready onCreate() Application is starting (not from background)
pause onPause() Application is moving to the background
resume onResume() Application is returning to the foreground

Remote Debugging (for HTML/JavaScript/CSS)
chrome://inspect

Lab2: Live demo of DevTools
● Inspecting the DOM and styles in Elements Tab
● Map local files do live editing in Sources Tab
● Debugging JavaScript
○ console.log()
○ Set breakpoints
○ Set event listener breakpoints

Agenda
● Overview
● Tranings:
● Q&A

Cordova Plugin on Android
What is a Cordova plugin?
A plugin is a bit of add-on code that provides
JavaScript interface to native components.
They allow your app to use native device
capabilities beyond what is available to pure
web apps.
Web app
JS
Plugin A
JS
Plugin B
Java
Plugin A
Java
Plugin B
Android OS

Manage your plugin
To Add:
cordova plugin add <PLUGIN_ID> | <GIT_URL> | <LOCAL_PATH>
To Remove:
cordova plugin remove <PLUGIN_ID>
To List:
cordova plugin

Lab 3: Create Web applications w/ vibration plugin
cordova plugin add https://github.com/fujunwei/cordova-plugin-vibration.git#android_things
cordova build
cordova run
1. Add plugin
navigator.vibrate(3000);
2. Start inspector in chrome, and choose Joule device
3. Beep for 3 second
navigator.vibrate([200,100,200,275,425,100,200,100,200,275,425,100,75,25,75,125,75,25,75,125,100,100]);
4. Play James Bond 007, youtube link

How Java and JavaScript communicate
cordova.exec(<successFunction>,
<failFunction>,
<service>,
<action>,
[<args>]);
public class service extends CordovaPlugin {
@Override
public boolean execute(action, args, callbackContext) {
if (action.equals("foo")) {
...
}
}
plugin.xml

Lab 4: Create you own plugin
1. Design your interface
echo.say(message: string,
successCallback: function,
errorCallback: function)
plugman create --name Echo --plugin_id cordova-plugin-echo --plugin_version 0.0.1
2. Create plugin (npm install -g plugman before)
3. Add Android platform
plugman platform add --platform_name android
27

Lab 4: Create you own plugin (cont.)
plugman createpackagejson .
4. Do changes, please check commit
5. Create package.json
cordova add <path_of_echo_plugin>
cordova run
6. Add plugin to Cordova app, build and run
7. Verify: launch inspector in Chrome, and try the echo interface
> echo.say("IoT DevFest", function(msg) {console.log(msg);});
Hi IoT DevFest. I'm from Java.
Tip: You need remove and
re-add plugin if there is code
change on plugin side.

Advanced plugin development
● Android Plugin Development Guide
○ http://cordova.apache.org/docs/en/latest/guide/platforms/android/p
lugin.html
● Lifecycle in CodovaPlugin
● Event listener, refer to cordova-plugin-network-information

Debugging with Android Studio (for Java code)

Agenda
● Overview
● Tranings:
● Q&A

Web Standard APIs
https://www.w3schools.com
https://developer.mozilla.org
http://caniuse.com/
1
2
3
DP4 WebView version: 52.0.2743.100

Cordova and Cordova plugins
● Cordova documentation: https://cordova.apache.org/docs/en/latest/
● Android Things ready plugins:
○ https://github.com/intel-iot-devkit/android-things-cordova
● 3rd Cordova plugin search: https://cordova.apache.org/plugins/ and pick
up the Android ready one.
○ Not guarantee work on Android Things, but we can try and update above status page.

Repository of this slide
● Hello World: https://github.com/halton/cordova-hello
● Vibration plugin: https://github.com/halton/cordova-plugin-vibration
● Echo plugin: https://github.com/halton/cordova-plugin-intel-echo

Intel® Open Source Technology Center
Q & A
Halton Huo
halton.huo@intel.com

Android* v/s Android Things*
● No system apps and content
providers.
● No common intents,
ContactsContract,
DownloadManager,
Telephony, etc.
● No APIs that require user
input/authentication
credentials.

Proxy setup if behind firewall
Edit $PROJECT/platforms/android/gradle.properties
systemProp.htts.proxyHost=<proxy_server>
systemProp.http.proxyPort=<proxy_port>
systemProp.https.proxyHost=<proxy_server>
systemProp.https.proxyPort=<proxy_port>

Accelerate Your IoT and Robotics Development Using Web Technology and Apache Cordova*

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Accelerate Your IoT and Robotics Development Using Web Technology and Apache Cordova*

Similar to Accelerate Your IoT and Robotics Development Using Web Technology and Apache Cordova* (20)

More from Intel® Software

More from Intel® Software (20)

Recently uploaded

Recently uploaded (20)

Accelerate Your IoT and Robotics Development Using Web Technology and Apache Cordova*