Introduzione.
Riprendiamo il nostro percorso dall’articolo Arduino due e Mobile Service, che trovate a questo link. Abbiamo visto come da una scheda Arduino due è possibile salvare mediante Rest Api i valori di temperatura e umidità letti da un sensore DHT11. In quest’articolo, vediamo come visualizzare i dati presenti nella tabella del Mobile Service su un dispositivo Windows Phone.
Creazione dell’applicazione Windows Phone.
Apriamo Visual Studio 2015, dal menù “File”, “Nuovo progetto”, andiamo a selezionare il template “Applicazione vuota” come visibile in figura e la denominiamo SensorFarm.
Creato il progetto, come prima cosa aggiungeremo nelle reference il pacchetto WindowsAzure.MobileServices mediante Nuget come rappresentato nelle figure successive.
Digitiamo ora nella casella di ricerca WindowsAzure.MobileSerices e click sul pulsante installa.
Click su “Accetto” nelle successive schermate.
A fine installazione, dobbiamo avere una condizione come mostrato in figura.
Abbiamo installato il package necessario per interagire con il Mobile Service creato seguendo il precedente articolo, andiamo ora a creare l’interfaccia e il codice per la visualizzazione dei dati.
Creazione dell’interfaccia grafica.
Procediamo ora con la creazione dell’interfaccia grafica, rimaniamo nel file MainPage.xaml, ed inseriamo il codice seguente.
<Page
x:Class=”SensorFarm.MainPage”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:local=”using:SensorFarm”
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
mc:Ignorable=”d”
Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=”*”/>
</Grid.RowDefinitions>
<ListBox Grid.Row=”0″ x:Name=”lstValue” Background=”CornflowerBlue” FontSize=”20″>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=”Auto”/>
<RowDefinition Height=”Auto”/>
<RowDefinition Height=”Auto”/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”Auto”/>
<ColumnDefinition Width=”20″/>
<ColumnDefinition Width=”Auto”/>
<ColumnDefinition Width=”Auto”/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row=”0″ Grid.Column=”0″ Text=”Temp value”/>
<TextBlock Grid.Row=”0″ Grid.Column=”2″ Foreground=”Yellow” Text=”{Binding tempvalue }”/>
<TextBlock Grid.Row=”0″ Grid.Column=”3″ Text=”°c”/>
<TextBlock Grid.Row=”1″ Grid.Column=”0″ Text=”Humidity value”/>
<TextBlock Grid.Row=”1″ Grid.Column=”2″ Foreground=”Red” Text=”{Binding humidityvalue }”/>
<TextBlock Grid.Row=”1″ Grid.Column=”3″ Text=”%”/>
<TextBlock Grid.Row=”2″ Grid.Column=”0″ Text=”Created at”/>
<TextBlock Grid.Row=”2″ Grid.Column=”2″ Foreground=”Green” Text=”{Binding __createdAt }”/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Page>
Analizziamo il codice precedente. E stato definito il grid principale, dentro il quali sono inseriti I controlli che compongono l’interfaccia, vi e un controllo ListBox con al suo interno un datatemplate composto da un altro controllo grid con al suo interno una serie di controlli TextBlock, dove in alcuni di essi la proprietà Text e in Binding con delle proprietà della classe tabsensor che vedremo successivamente. Non descriveremo cosa e il DataBinding, poiché esula dal contesto di questo articolo. Gli altri controlli TextBlock anno invece nella proprietà Text del testo statico. Se tutto il codice è stato inserito in maniera corretta, la nostra interfaccia avrà quest’aspetto.
Non preoccupiamoci se vediamo quest’aspetto, poiché avendo definito un datatemplate e non avendo dati di esempio da visualizzare, vedremo il tutto quando l’applicazione sarà in esecuzione. Terminata l’interfaccia grafica, occupiamoci ora della parte di codebheind.
Creazione della classe tabsensor.
Procediamo ora alla creazione della classe tabsensor, necessaria per la gestione e visualizzazione dei dati, cosa importante, dobbiamo chiamarla con lo stesso nome assegnato alla tabella sul Mobile Service, stessa cosa per le proprietà, ossia il nome e il tipo di variabile, devono corrispondere a quelle sul Mobile Service, diversamente oltre non visualizzare I dati rischiamo di avere un’eccezione a runtime. Creiamo una nuova classe denominata tabsensor, mettendoci con il mouse sul nome del progetto, tasto destro e selezioniamo “Aggiungi”, “Classe”, saremo condotti nella schermata seguente come mostrato in figura.
A classe creata, inseriamo il codice C# seguente.
using System;
namespace SensorFarm
{
public class tabsensor
{
public string id { get; set; }
public string tempvalue { get; set; }
public string humidityvalue { get; set; }
public DateTime __createdAt { get; set; }
}
}
Sono state definite quattro proprietà, id, tempvalue, humidityvalue e __createdAt. L’ultimo e presente di default al momento della creazione della tabella sul Mobile Service, che non fa altro che memorizzare quando abbiamo inserito l’ultimo record, stessa cosa vale per la proprietà Id, che non e altro che la chiave primaria della tabella. Questa classe la useremo al momento che andiamo a recuperare I dati dalla tabella.
Creazione della classe ServiceData.
Ultima classe da creare, e quella per interagire con I MobileService per recuperare e visualizzare I dati dalla tabella tabsensor, con la stessa procedura per la creazione della classe tabsensor, creiamo una classe denominata ServiceData ed inseriamo il codice seguente.
using System;
using System.Collections.Generic;
using Windows.UI.Popups;
using Windows.UI.Xaml.Controls;
namespace SensorFarm
{
public class ServiceData
{
List<tabsensor> sensor = new List<tabsensor>();
public async void GetData(ListBox lstValue)
{
try
{
sensor = await App.MobileService.GetTable<tabsensor>().ToListAsync();
lstValue.ItemsSource = sensor;
}
catch (Exception ex)
{
await new MessageDialog(ex.Message).ShowAsync();
}
}
}
}
Analizzando il codice, è stata definita una collection di tipo tabsensor, la classe creata in precedenza, il metodo GetData, richiede un oggetto di tipo ListBox, noi passeremo il riferimento a quello creato nell’interfaccia grafica, in seguito il metodo GetTable<>, richiede un parametro di tipo IMobileServiceTable, ed ecco che ora capiamo perché la classe tabsensor deve essere identica alla tabella presente sul MobileService. Dopo andiamo a valorizzare la proprietà ItemSource al parametro lstValue del metodo GetData con il valore della variabile sensor, così da visualizzare I dati della tabella sul controllo ListBox passato come riferimento al metodo. Qui capiamo anche il funzionamento del databinding, sono state valorizzate le proprietà della classe tabsensor implicitamente poiché abbiamo definito e valorizzato la collection sensor di tipo tabsensor. Consiglio di approfondire quest’argomento perché è molto più vasto di quanto affermato ora.
Modifica della classe App.xaml.cs.
Per accedere al Mobile Service creato abbiamo ancora bisogno di una cosa, autenticarci mediante un uri e un application key che ci viene fornito al momento della creazione del Mobile Service su Microsoft Azure. Solitamente troviamo nella sezione DASHBOARD il “MOBILE SERVICE URL” e l’application keys facendo un clik sul button “MANAGE KEYS” che troviamo in basso a sinistra nel portale di Microsoft Azure. Individuato sul portale questi due cose, apriamo il file App.xaml.cs ed inseriamo prima di tutto il namespace seguente.
using Microsoft.WindowsAzure.MobileServices;
Questo è necessario per fare uso della classe MobileServiceClient, la quale fornisce il necessario per l’autenticazione. Aggiungiamo ora il codice come segue.
public sealed partial class App : Application
{
public static MobileServiceClient client = new MobileServiceClient(“mobineserviceurl here”, “appkey here”);
//Altro codice C# della classe App.xaml.cs
Test dell’applicazione.
Abbiamo eseguito tutto il necessario, e arrivato il momento di provare quanto creato. Tasto F5 ed eseguiamo l’applicazione in modalità Debug, se abbiamo eseguito tutto correttamente, ecco l’applicazione in fase di esecuzione.
Se invece si verifica un problema, tipo assenza della connessione Wifi o rete dati, ecco cosa visualizzeremo a runtime.
Conclusione.
In questo terzo articolo abbiamo visto in che modo e possibile visualizzare I dati presenti su un Mobile Service e quali sono le classi necessarie per ottenere tutto ciò. Io ho preferito creare un’applicazione Windows Phone 8.1, ma vi sono comunque altri modi per la visualizzazione. Nel prossimo articolo, amplieremo quest’applicazione inserendo dei valori d’impostazione, immaginiamo di visualizzare la temperatura di casa nostra sul device, inseriremo a che ora vogliamo che accenda la caldaia di casa, a che temperatura dovrà allo stesso modo far accendere la caldaia, il tutto visto e letto dalla scheda Arduino due utilizzata nel precedente articolo.
