Practical Internet of Things with JavaScript

Setting up the mobile app

In the last section, we saw how to build and run the desktop app for the smart weather station. In this section, we are going to update the template of the mobile app to show the weather station data.

Open mobile-app/src/pages/view-device/view-device.html and update it, as shown here:

<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>Temperature</ion-label>                <ion-label>{{lastRecord.data.t}}</ion-label>            </ion-item>            <ion-item> <ion-label>Humidity</ion-label> ...