Practical Internet of Things with JavaScript

Updating the mobile app template

In the last section, we have updated the desktop app. In this section, we are going to update the mobile app template to display the three axis data.

First we are going to update the view-device template. Update mobile-app/src/pages/view-device/view-device.html as follows:

<ion-header>    <ion-navbar>        <ion-title>Mobile App</ion-title>    </ion-navbar></ion-header><ion-content padding>    <div *ngIf="!lastRecord">        <h3 class="text-center">Loading!</h3>    </div>    <div *ngIf="lastRecord">        <ion-list>            <ion-item>                <ion-label>Name</ion-label>                <ion-label>{{device.name}}</ion-label>            </ion-item>            <ion-item>                <ion-label>X-Axis</ion-label>                <ion-label>{{lastRecord.data.acclVals.x}} {{lastRecord.data.acclVals.units}}</ion-label> </ion-item> ...