Creare un'app che utilizza sensori mobili

I sensori ti consentono di aggiungere funzionalità più avanzate alle app utilizzando le capacità del tuo telefono. In questo articolo imparerai a utilizzare i sensori del tuo dispositivo mobile in Power Apps.

A questo proposito, creerai un'app di esempio con due schermate. La prima schermata visualizzerà latitudine, longitudine, altitudine nonché l'attuale direzione della bussola e potrà eseguire la scansione di tag NFC per ottenere informazioni di testo. La seconda schermata mostrerà come visualizzare i dati dell'accelerometro per produrre l'angolo del dispositivo lungo gli assi X e Y.

Per configurare lo scenario della prima schermata, immagina di creare un'app per una caccia al tesoro basata su NFC. Ogni partecipante utilizzerà l'app per eseguire la scansione di un tag NFC che fornirà la direzione della bussola nonché latitudine e longitudine della destinazione successiva. In quella destinazione, il partecipante eseguirà la scansione di un altro tag e ripeterà il processo fino alla fine della caccia al tesoro.

Per la seconda schermata, immagina di aver bisogno di uno strumento per misurare approssimativamente gli angoli. Quando si trova nella seconda schermata, il partecipante sarà in grado di posizionare o tenere il proprio dispositivo su una superficie e ottenere gli angoli sugli assi X e Y del dispositivo, nonché visualizzare una rappresentazione visiva di tali angoli.

Guarda questo video per imparare a creare un'app che utilizza i sensori per dispositivi mobili:

Prerequisiti

• Qualsiasi licenza Power Apps può essere utilizzata per questa app, poiché non vengono utilizzate connessioni dati.

• Sarà necessario un dispositivo mobile come un telefono cellulare o un tablet con funzionalità GPS e accelerometro poiché la maggior parte dei PC potrebbe non disporre dei sensori necessari.

• Un dispositivo compatibile con NFC è necessario per la funzionalità di scansione NFC. Si presume inoltre che i tag NFC da sottoporre a scansione siano stati preconfigurati per produrre valori di testo nel seguente formato di esempio:

  "<b>Heading: </b> 80 degrees <br>
  <b>Latitude: </b> 44.4604788 <br>
  <b>Longitude: </b> -110.82813759"
  

  Ciò fornirà il testo in un formato compatibile con HTML per l'app. L'impostazione dei tag NFC va oltre lo scopo di questo articolo e gli elementi NFC possono essere ignorati se necessario; l'obiettivo principale è utilizzare i sensori mobili in Power Apps.

Aggiungere intestazione e testo HTML per gli output dei sensori del dispositivo

Etichetta intestazione

Con un'app aperta per la modifica in Power Apps, aggiungi un'etichetta di testo alla schermata trascinandola e rilasciandola dal pannello Inserisci. Posizionalo nell'angolo in alto a sinistra della schermata e modifica le seguenti proprietà nel riquadro Proprietà:

Quindi modifica le seguenti proprietà nel riquadro Avanzate:

Ciò fornirà un'intestazione per la schermata.

Testo HTML per gli output dei sensori del dispositivo

Successivamente, aggiungi un controllo Testo HTML. Questo verrà utilizzato per visualizzare tutti gli output dei sensori del dispositivo in un'unica posizione. Usa questo codice nella proprietà HtmlText:

"<b><u>Current Location</u></b><br>  
<br>
<b>Compass Heading: </b>" & Round(Compass.Heading, 2) & Char(0176) &
"<br>
<br>
<b>Lat: </b>" & Location.Latitude & "<br>
<b>Long: </b>" & Location.Longitude & "<br>
<b>Alt: </b>" & Round(Location.Altitude, 2) & " m"

Modifica le seguenti proprietà nel riquadro Avanzate:

Se esamini ciò che è stato inserito in HtmlText, puoi notare che vengono utilizzati due tipi di sensori.

Il primo è il sensore Bussola, che utilizza la proprietà Heading per fornire la direzione della bussola dal dispositivo.

Il secondo è il sensore Posizione, che fornisce Latitudine, Longitudine e Altitudine. Ci sono due punti da prendere in considerazione in relazione alla posizione. Il primo è che se utilizzi solo Posizione senza l'operatore punto e la proprietà, otterrai un record con i campi Latitudine, Longitudine e Altitudine. Il secondo è che la proprietà Altitude è espressa in metri per impostazione predefinita. Se desideri convertirla in piedi, sostituisci la seguente formula:

Per usare i metri:

Round(Location.Altitude, 2) & " m"

Per usare i piedi:

Round(Location.Altitude \* 3.2808, 2) & " ft"

Ora posiziona il controllo Testo HTML vicino alla metà inferiore dello schermo.

Aggiungere Pulsante per la scansione NFC e il controllo Testo HTML

Pulsante di scansione NFC

Aggiungi un pulsante all'app, posizionandolo sotto il controllo Testo HTML aggiunto nell'ultimo passaggio e modifica le seguenti proprietà nel riquadro Avanzate:

Il codice nella proprietà OnSelect sta utilizzando la funzione ReadNFC(), che attiva il lettore NFC. Quindi memorizza ciò che viene letto dal tag NFC in una raccolta denominata colNFCScan. Questa raccolta avrà quattro campi: RTD, Testo, TNF e URI. Sebbene una spiegazione completa di questi campi esuli dallo scopo di questo articolo, una breve descrizione potrebbe rivelarsi utile. Con TNF (Type Name Format) si intende il formato del nome di tipo ed è usato per definire la struttura della definizione del tipo di record o RTD (Record Type Definition), che a sua volta definisce il tipo di record contenuto nei campi Testo e/o URI. URI sta per Uniform Resource Identifier, che è essenzialmente l'indirizzo di una risorsa. I tag NFC utilizzati in questo esempio, oltre al campo Testo contenente il testo di esempio dell'introduzione di questo argomento, contengono un valore TNF pari a 1, un valore RTD pari a T e un valore URI vuoto.

Aggiungere il controllo Testo HTML per visualizzare le informazioni di scansione NFC

Aggiungi un secondo controllo Testo HTML e utilizza la seguente formula nella proprietà HTMLText:

"<b><u>Next Destination</u></b><br>
<br>" &
First(colNFCScan).Text

Modifica le seguenti proprietà nel riquadro Avanzate:

Senza alcun dato NFC presente, il controllo visualizzerà Destinazione successiva. Quando si esegue la scansione di un tag NFC, verrà visualizzato Destinazione successiva e quindi i dati del campo Testo nei dati raccolti dalla scansione.

Supponendo che i dati per i tag NFC siano stati configurati come descritto nell'introduzione, l'utente vedrà i successivi valori di latitudine, longitudine e direzione della bussola per la successiva posizione della caccia al tesoro dopo aver eseguito la scansione di uno di questi tag.

Testare l'app

Salvare e pubblicare l'app. In un dispositivo mobile con i sensori necessari, apri l'app e osserva i valori di latitudine, longitudine, altitudine e direzione della bussola. Prova a camminare mentre ti giri in varie direzioni per vedere i cambiamenti nelle varie letture del sensore.

Premi il pulsante Scansione tag NFC per osservare il controllo del lettore NFC. Se disponi di un tag NFC in grado di produrre un valore Testo, esegui la scansione del tag per osservare il testo nell'app. In caso contrario, seleziona Annulla.

Aggiungere e configurare una seconda schermata

Aggiungi una nuova schermata vuota per la parte dell'app relativa alla misurazione dell'angolo.

Dopo aver aggiunto la schermata, torna alla prima schermata e aggiungi un'icona Freccia avanti selezionando + Inserisci > Icone > icona Freccia avanti. Posizionala nell'angolo in alto a destra della schermata e modifica le seguenti proprietà nel riquadro Avanzate:

Se hai rinominato la seconda schermata appena aggiunta, sostituisci quel nome con Screen2 nella funzione Navigate.

Visualizza l'anteprima dell'app, selezionando l'icona appena aggiunta per verificare che visualizza la schermata vuota appena aggiunta.

Aggiungere la configurazione per gli angoli X e Y

Aggiungi una tabella di testo alla schermata trascinandola e rilasciandola dal pannello Inserisci. Posizionala nell'angolo in alto a sinistra della schermata e modifica le seguenti proprietà nel riquadro Proprietà:

Quindi modifica le seguenti proprietà nel riquadro Avanzate:

Ciò fornirà un'intestazione per la seconda schermata.

Aggiungi quindi un'icona Freccia indietro selezionando + Inserisci > Icone > icona Freccia indietro. Posizionala nell'angolo in alto a sinistra della schermata e modifica le seguenti proprietà nel riquadro Avanzate:

Se hai rinominato la prima schermata appena aggiunta, sostituisci quel nome con Screen1 nella funzione Navigate.

Infine, aggiungi un controllo Testo HTML. Questo verrà utilizzato per visualizzare tutti gli output dei sensori del dispositivo in un'unica posizione. Utilizza la seguente formula nella proprietà HTML Text:

"<b><u>Angles:</u></b><br>
<br>
<table width='100%'>
<tr>
<td width='50%'><b>X: </b>" & Abs(Round(Acceleration.X * (90 / 9.81),
0)) & Char(0176) & "</td>
<td width='50%'><b>Y: </b>" & Abs(Round(Acceleration.Y * (90 / 9.81),
0)) & Char(0176) & "</td>
</tr>
</table>"

Modifica le seguenti proprietà nella scheda Avanzate:

Posiziona questo controllo nella parte superiore della schermata dell'app.

Se esamini cosa è stato inserito in HtmlText, potresti notare che viene utilizzato il sensore Accelerazione con le proprietà X e Y. Esiste anche una proprietà Z non utilizzata in questo scenario.

Questo sensore rileva le forze gravitazionali sul dispositivo su tre piani. Usando un telefono cellulare come esempio, immagina una linea che si estende oltre i lati del telefono. Questo sarebbe il piano X. Se si solleva il lato destro del telefono, si avrà un valore positivo; se si solleva il lato sinistro, si avrà un valore negativo. Una linea che si estende oltre la parte superiore e quella inferiore del telefono rappresenterebbe il piano Y. Se si solleva la parte superiore del telefono, si avrà un valore positivo; se si solleva la parte inferiore, si avrà un valore negativo. Infine, una linea che esce dalla schermata e dalla parte posteriore del telefono rappresenterebbe il piano Z. Se la schermata è rivolta verso l'alto, si avrà un valore positivo; se è rivolta verso il basso, si avrà un valore negativo.

L'accelerometro misurerà le forze che agiscono sul dispositivo sia in movimento, come se lo si lasciasse cadere, sia a riposo, come se lo si inclinasse su uno o più degli assi descritti in precedenza. A riposo, i valori teorici dovrebbero essere compresi tra 0 e +/- 9,81 m/s2, con 0 che indica che l'asse relativo è parallelo alla Terra senza gravità che agisce sul sensore e con 9,81 che indica che l'asse relativo è perpendicolare alla Terra e tutta la forza di gravità agisce sul sensore.

Guardando il codice nel controllo Testo HTML che hai appena aggiunto, nota la seguente sezione:

Abs(Round(Acceleration.X * (90 / 9.81), 0))

In questa formula, l'Accelerazione sul piano X viene moltiplicata per (90 / 9,81). Per convertire la lettura del sensore in gradi viene utilizzato il valore massimo teorico a riposo. Il valore 90 è presente perché al valore teorico massimo, il dispositivo sarebbe perpendicolare alla Terra su quel piano, fornendo una misura di 90 gradi.

Tale valore in gradi viene quindi arrotondato a zero posizioni decimali per fornire un valore intero in gradi. Infine, viene calcolato il valore assoluto di quel numero arrotondato per restituire una lettura positiva. Non importa quindi se l'angolo viene misurato da un lato o da un altro.

Aggiungere gli oggetti visivi di livello

In questo passaggio, utilizzeremo alcuni controlli in modi non convenzionali per raggiungere un obiettivo visivo.

Oggetto visivo livella circolare

Per iniziare, aggiungi un controllo Pulsante alla schermata, rinominalo in btnCircleLevel e modifica le seguenti proprietà nel riquadro Avanzate:

Il risultato di queste modifiche deve produrre un pulsante circolare al centro della schermata che non può essere premuto perché disabilitato.

Quindi, aggiungi una forma Cerchio imposta il raggio del bordo su 400 e modifica le seguenti proprietà nel riquadro Avanzate:

Le proprietà X e Y consentono alla forma Cerchio di spostarsi al centro della schermata dell'app, una modifica relativa dei valori del sensore Accelerazione ma contenuta all'interno dell'area circolare di btnCircleLevel.

Oggetto visivo livella con assi X e Y

Aggiungi un controllo Dispositivo di scorrimento all'app, rinominalo sldXValue e modifica le seguenti proprietà nel riquadro Avanzate:

Il controllo Dispositivo di scorrimento visualizzerà l'angolo in modo simile a come fa una livella: il punto di controllo si sposterà verso il lato sollevato del dispositivo, in modo simile alla bolla d'aria in una livella.

Quindi, copia btnCircleLevel selezionandolo e premendo CTRL + C e quindi CTRL + V. Rinomina il controllo in btnXValueOverlay e modifica le seguenti proprietà nel riquadro Avanzate:

Queste modifiche lo posizioneranno sopra il controllo sldXValue, impedendo all'utente di modificarne il valore e fornendo un bordo visivo.

Copia e incolla sldXValue, utilizzando lo stesso metodo utilizzato per copiare btnCircleLevel. Rinominalo in sldYValue e modifica le seguenti proprietà:

Copia e incolla btnXValueOverlay, rinominandolo in btnYValueOverlay, modificando le seguenti proprietà:

Gli oggetti visivi livella risultano completati.

Testare l'app di livello

Salvare e pubblicare l'app. In un dispositivo mobile con i sensori necessari, apri l'app e vai alla schermata con gli oggetti visivi livella. Inclina il dispositivo da sinistra a destra, quindi su e giù e infine in tutte le direzioni, osservando le modifiche nelle proprietà dell'angolo e negli oggetti visivi. Trova una superficie angolata su cui posizionare il dispositivo e osserva nuovamente gli angoli e gli oggetti visivi.

Vedi anche

• Segnali di accelerazione, app, bussola, connessione e posizione in Power Apps
• Controlli di realtà mista in Power Apps
• Controlli Geospatial in Power Apps