Click on the project selector (point 1) and choose + New Project. Under the HTML5 COMPANION HYBRID MOBILE OR WEB APP tab, click on Samples and Demos and then on General. On the right-hand side of the window, you'll find two options: Standard HTML5 and HTML5 + Cordova. Click on the second one and choose the Touch Notifier companion app project. Name your companion app project. We'll be naming it doorbell-mobile.
Now you'll see that your workspace has changed a bit:
The companion app development workspace
Here you can find the following key components:
|
Options |
Features |
|---|---|
|
A |
Emulate app |
|
B |
Test app |
|
C |
Debug app |
|
D |
Profiling |
|
E |
Build mobile app |
|
F |
Run mobile app |
|
G |
App interface editor |
|
H |
Connected mobile devices |
As you can see, there are many options available. Let's start by testing the emulation (point A in the preceding list) option by clicking on it. Here, you are able to select a mobile device and the display orientation, using it as a real device when interacting with your IoT app.
By now you should see the first HTML page displayed on your screen:
Emulating the companion app
Enter your board's IP address and in the port number, insert 1337, which is the port your IoT app server is listening to. Now you can finally press the touch sensor connected to Galileo. Touch it and you'll hear the buzzer ringing and see the emulated app displaying a message to check your door.
Now let's test it using a real mobile device. Grab your smartphone or tablet and install the Intel App previewer from one of the popular app stores.
In the XDK, click on the TEST tab (point B), and you'll be asked if you want to push your files to the testing server. If you do so, you'll have your app available right away inside the Intel App previewer. Another option is to just scan the displayed QR code.
Open the Intel App previewer on your mobile device and log in with your developer account credentials. If you pushed the app files to the test server, you'll find your app listed under the Server Apps tab. If you didn't push your files, click on the camera button on the top-right of the app and scan the displayed QR code.
The companion app should now be running on your device. Insert the IP address and the app server port (1337), and you'll find your app waiting for the buzzer to ring:
Running the companion app as a mobile app
Try pressing the touch sensor and take a look at your mobile device. It should be displaying the message you saw earlier.