Crear una aplicació que utilitzi sensors mòbils

Els sensors us permeten afegir una funcionalitat més enriquida a les aplicacions aprofitant les capacitats del telèfon. En aquest article, aprendreu a utilitzar els sensors del dispositiu mòbil al Power Apps.

Per fer-ho, creareu una aplicació d'exemple amb dues pantalles. A la primera pantalla es mostrarà la capçalera de brúixola actual, la latitud, la longitud i l'altitud, i podreu llegir etiquetes NFC per obtenir informació de text. A la segona pantalla es mostrarà com es poden visualitzar les dades d'acceleròmetre per produir l'angle del dispositiu al llarg dels eixos X i Y.

Per configurar l'escenari darrere de la primera pantalla, imagineu-vos que esteu creant una aplicació per a una cerca del tresor basada en NFC. Cada participant utilitzarà l'aplicació per escanejar una etiqueta NFC que els proporcionarà una capçalera de brúixola, latitud i longitud que li indicaran la seva següent destinació. En aquesta destinació, el participant escanejarà una altra etiqueta i repetirà el procés fins que arribi al final de la cerca.

Per a la segona pantalla, imagineu-vos que necessiteu una eina per mesurar aproximadament els angles. Quan sigui a la segona pantalla, el participant podrà col·locar o situar el seu dispositiu sobre una superfície i obtenir els angles en els eixos X i Y del dispositiu, així com visualitzar una representació visual d'aquests angles.

Mireu aquest vídeo per aprendre a crear una aplicació que utilitzi sensors mòbils:

Requisits previs

• Per a aquesta aplicació es pot utilitzar qualsevol nivell de llicència del Power Apps, ja que no s'utilitza cap connexió de dades.

• Es necessitarà un dispositiu mòbil, com ara un telèfon mòbil o una tauleta amb GPS i capacitats d'acceleròmetre, ja que la majoria d'ordinadors no tenen els sensors necessaris.

• Cal un dispositiu compatible amb NFC per a la característica d'escaneig d'NFC. També se suposa que les etiquetes NFC que s'han d'escanejar s'han configurat prèviament per produir valors de text en el format de l'exemple següent:

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

  Proporcionarà el text en un format HTML entenedor per a l'aplicació. La configuració de les etiquetes NFC està fora de l'àmbit d'aquest article i els elements NFC es poden ignorar, si cal; l'enfocament principal és utilitzar els sensors mòbils al Power Apps.

Afegir una capçalera i text HTML per a les sortides de sensor del dispositiu

Etiqueta de capçalera

Amb una aplicació oberta per editar-la al Power Apps, afegiu una etiqueta Text a la pantalla arrossegant-la i deixant-la anar des de la subfinestra Insereix. Col·loqueu-la a la part superior esquerra de la pantalla i modifiqueu-ne les propietats següents a la subfinestra Propietats:

A continuació, a la subfinestra Avançada, modifiqueu les propietats següents:

Es proporcionarà una capçalera per a la pantalla.

Text HTML per a les sortides de sensor del dispositiu

A continuació, afegiu un control de text HTML. S'utilitzarà per mostrar totes les sortides de sensor del dispositiu en un sol lloc. Utilitzeu aquest codi a la propietat 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"

Canvieu les propietats següents a la subfinestra Avançada:

Si examineu el contingut d'HtmlText, és possible que observeu que s'utilitzen dos tipus de sensors.

En primer lloc, el sensor de Brúixola, que utilitza la propietat Heading per proporcionar la capçalera de brúixola del dispositiu.

En segon lloc, el sensor Ubicació, que proporciona la Latitud, la Longitud i l'Altitud. Hi ha dues consideracions sobre la ubicació. En primer lloc, si només utilitzeu Ubicació sense l'operador de punt i la propietat, obtindreu un registre que té camps per a Latitud, Longitud i Altitud. En segon lloc, la propietat Altitud està en metres per defecte. Si voleu convertir-la a peus substituïu la fórmula següent:

Utilitzeu metres:

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

Utilitzeu peus:

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

Ara col·loqueu el control de text HTML a la meitat inferior de la pantalla.

Botó Afegeix per a l'escaneig d'NFC i el control de text HTML

Botó d'escaneig d'NFC

Afegiu un botó a l'aplicació, col·loqueu-lo per sota del control de text HTML que heu afegit al darrer pas i canvieu les propietats següents a la subfinestra Avançada:

El codi de la propietat OnSelect està utilitzant la funció ReadNFC(), que activa el lector d'NFC. A continuació, emmagatzema allò que es llegeix de l'etiqueta NFC en una col·lecció anomenada colNFCScan. Aquesta col·lecció tindrà quatre camps: RTD, Text, TNF i URI. Tot i que una explicació completa d'aquests camps està fora de l'àmbit d'aquest article, pot ser que alguna explicació sigui útil. TNF vol dir Format de nom de tipus i s'utilitza per definir l'estructura de la Definició del tipus de registre, o RTD, que al seu torn defineix el tipus de registre que s'inclou als camps Text i/o URI. URI significa Identificador uniforme de recurs, que bàsicament és l'adreça d'un recurs. Per a les etiquetes NFC que s'utilitzen en aquest exemple, a més del camp Text que conté el text d'exemple de la introducció d'aquest tema, contindran un valor TNF, un valor 1, un valor RTD de T i un valor URI en blanc.

Afegir un control de text HTML per visualitzar la informació d'escaneig d'NFC

Afegiu un segon control de text HTML i utilitzeu la fórmula següent a la propietat HTMLText:

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

Canvieu les propietats següents a la subfinestra Avançada:

Si no hi ha dades NFC presents, el control mostrarà Destinació següent. Quan s'escaneja una etiqueta NFC, mostrarà Destinació següent i després les dades del camp Text de les dades recopilades de l'escaneig.

Suposant que les dades de les etiquetes NFC s'hagin configurat de la manera descrita a la introducció, l'usuari veurà els valors de capçalera de brúixola, latitud i longitud següents per a la següent ubicació de la cerca del tresor després d'escanejar una d'aquestes etiquetes.

Provar l'aplicació

Deseu i publiqueu l'aplicació. En un dispositiu mòbil amb els sensors necessaris, obriu l'aplicació i observeu els valors de capçalera de brúixola, latitud, longitud i altitud. Proveu de moure-us mentre gireu en diverses direccions per veure els canvis de les diferents lectures dels sensors.

Premeu el botó Escaneja l'etiqueta NFC per observar el control del lector NFC. Si teniu una etiqueta NFC que pot produir un valor de Text, escanegeu l'etiqueta per observar el text a l'aplicació. Si no, seleccioneu Cancel·la.

Afegir i configurar la segona pantalla

Afegiu una Pantalla en blanc nova per a la part de mesurament d'angles de l'aplicació.

Després d'afegir la pantalla, torneu a la primera pantalla i afegiu una icona de Fletxa de següent a + Insereix > Icones > trieu la icona Fletxa de següent. Col·loqueu-la a la part superior dreta de la pantalla i canvieu les propietats següents a la subfinestra Avançades:

Si heu canviat el nom de la segona pantalla que acabeu d'afegir, substituïu el nom de Screen2 a la funció Navega.

Obteniu una visualització prèvia de l'aplicació, seleccionant la icona que acabeu d'afegir per verificar que permet navegar a la pantalla en blanc que s'acaba d'afegir.

Afegir configuracions per als angles X i Y

Afegiu una Etiqueta de text a la pantalla arrossegant-la i deixant-la anar des de la subfinestra Insereix. Col·loqueu-la a la part superior esquerra de la pantalla i modifiqueu-ne les propietats següents a la subfinestra Propietats:

A continuació, a la subfinestra Avançada, modifiqueu les propietats següents:

Es proporcionarà una capçalera per a la segona pantalla.

A continuació, afegiu una icona de Fletxa enrere a + Inserir > Icones > trieu la icona Fletxa enrere. Col·loqueu-la a la part superior esquerra de la pantalla i canvieu les propietats següents a la subfinestra Avançades:

Si heu canviat el nom de la primera pantalla que acabeu d'afegir, substituïu el nom de Screen1 a la funció Navega.

Per últim, afegiu un control de text HTML. S'utilitzarà per mostrar totes les sortides de sensor del dispositiu en un sol lloc. Utilitzeu la fórmula següent a la propietat Text HTML:

"<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>"

Canvieu les propietats següents a la pestanya Avançada:

Col·loqueu aquest control a la part superior de la pantalla de l'aplicació.

Si examineu el contingut d'HtmlText, pot ser que observeu que utilitza el sensor Acceleration, amb les propietats X i Y. També hi ha una propietat Z que no estem utilitzant en aquest escenari.

Aquest sensor detecta eles forces gravitatòries del dispositiu sobre tres plans. Si utilitzem un telèfon mòbil com a exemple, imagineu-vos una línia que s'estén des dels costats del telèfon. Seria el pla X. Aixecar la part dreta del telèfon produirà un valor positiu, i aixecant el costat esquerre produirà un valor negatiu. Una línia que s'estén des de la part superior i la inferior del telèfon representaria el pla Y. Aixecar la part superior del telèfon produirà un valor positiu, i aixecar la part inferior produirà un valor negatiu. Per últim, una línia que surt de la pantalla i la part posterior del telèfon representaria el pla Z. Girar la pantalla cap amunt produirà un valor positiu i girar-la cap avall produirà un valor negatiu.

L'acceleròmetre mesurarà les forces que actuen en el dispositiu en moviment, per exemple si el deixeu anar, i en repòs, per exemple si l'inclineu en un o més dels eixos descrits abans. En repòs, els valors teòrics han d'estar entre 0 i +/- 9,81 m/s2, on 0 indica que l'eix relatiu és paral·lel a la Terra sense que la gravetat actuï en el sensor, i una lectura de 9,81 indica que l'eix relatiu és perpendicular a la Terra i tota la força de la gravetat actua en el sensor.

Mireu el codi del control de text HTML que heu afegit i observeu la secció següent:

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

En aquesta fórmula, des de dins cap a fora, primer l'Acceleració del pla X es multiplica per (90 / 9,81). S'utilitza el valor teòric màxim en repòs per convertir la lectura del sensor en graus. El valor de 90 està present perquè en el valor teòric màxim, el dispositiu seria perpendicular a la Terra en aquest pla, cosa que dona una mesura de 90 graus.

Aquest valor en graus s'arrodoneix a zero posicions decimals per proporcionar un valor de grau enter. Finalment, el valor absolut d'aquest número arrodonit es calcula per donar una lectura positiva. Això és així perquè no importi si l'angle es mesura des d'un costat o un altre.

Afegir elements visuals de nivell

En aquest pas, utilitzarem alguns controls de maneres poc convencionals per aconseguir un objectiu visual.

Element visual de bombolla circular similar al nivell

Per començar, afegiu un control de Botó a la pantalla, canviant-li el nom per btnCircleLevel i canvieu les propietats següents a la subfinestra Avançada:

El resultat d'aquests canvis hauria de produir un botó circular al centre de la pantalla que no es pot prémer perquè està inhabilitat.

A continuació, afegiu una forma de Cercle, definiu el radi de la vora com a 400 i canvieu les propietats següents a la subfinestra Avançada:

Les propietats X i Y permeten que la forma Cercle es mogui al centre de la pantalla de l'aplicació, amb un canvi relatiu als valors del sensor d'Acceleració, però que es troba dins de l'àrea circular de btnCircleLevel.

Elements visuals de bombolla similar al nivell dels eixos X i Y

Afegiu un control de Control lliscant a l'aplicació, canvieu-li el nom per sldXValue i canvieu les propietats següents a la subfinestra Avançada:

Aquest control lliscant mostrarà l'angle de manera similar a com ho fa un nivell de bombolla: el control es mourà cap al costat alçat del dispositiu, de manera similar a com ho fa la bombolla d'un nivell de bombolla.

A continuació, copieu btnCircleLevel seleccionant-lo, prement Ctrl + C i, a continuació, Ctrl + V. Canvieu el nom del control per btnXValueOverlay i canvieu les propietats següents a la subfinestra Avançada:

Aquests canvis el col·locaran sobre el control sldXValue, impedint a l'usuari canviar-ne el valor i proporcionant una vora visual.

Copieu i enganxeu sldXValue, utilitzant el mateix mètode que s'utilitza per copiar btnCircleLevel. Canvieu-ne el nom per sldYValue i canvieu les propietats següents:

Copieu i enganxeu btnXValueOverlay, canviant-li el nom per btnYValueOverlay i canviant les propietats següents:

D'aquesta forma es completen els elements visuals similars a un nivell de bombolla.

Proveu l'aplicació de nivell

Deseu i publiqueu l'aplicació. En un dispositiu mòbil amb els sensors necessaris, obriu l'aplicació i aneu a la pantalla amb els elements visuals de nivell de bombolla. Inclineu el dispositiu d'esquerra a dreta, a continuació amunt i avall, i finalment en totes les direccions, observant els canvis en les propietats dels angles i en els elements visuals. Cerqueu una superfície amb angle per col·locar-hi el dispositiu i torneu a observar els angles i els elements visuals.

Consulteu també

• Senyals d'acceleració, d'aplicació, de brúixola, de connexió i d'ubicació al Power Apps
• Controls de realitat mixta al Power Apps
• Controls geoespacials al Power Apps