| Exemples | Referència | Plaques | Recursos CITCEA | |
| Projectes | Programació | Perifèrics | Inici |
En aquest llegirem el sensor de temperatura i humitat des d'una aplicació mòbil desenvolupada amb App Inventor. El programa del microcontrolador serà exactament el mateix que el d'aquest exemple perquè així tenim un programa genèric que també ens permet accedir des d'un navegador web. No explicarem aquí els detalls del funcionament de l'App Inventor sinó que donarem només un programa bàsic que permet complir els objectius de l'exemple. Per a més informació sobre l'App Inventor podeu consultar aquest web.
Hem de tenir present que, atès que hem agafat un programa de microcontrolador que crea una pàgina web, el nostre programa amb App Inventor haurà de descodificar la informació rebuda per extreure les dades necessàries. Això vol dir que si modifiquem el disseny de la pàgina web que envia el microcontrolador ens caldrà refer el tractament que en faci l'App Inventor.
En fer l'aplicació, hem suposat que l'adreça IP del microcontrolador començarà per 192.168.1. i probablement serà 192.168.1.66. A la primera línia li indiquem a l'usuari aquesta adreça i li donem la possibilitat de canviar el darrer valor. A la segona línia hi ha un espai que normalment estarà ocult però que permetrà, en cas que n'hi hagi, mostrar els missatges d'error. Després hi ha dues línies, amb mida de lletra més grossa i centrada, que seran les que mostraran la temperatura i la humitat. A la darrera línia hi haurà un polsador per fer una nova lectura. L'aspecte de l'aplicació serà el següent:
Atès que en aquest web el nostre objectiu no és crear aplicacions, ens hem preocupat només del funcionament i la comprensió però no del disseny. Si ho desitgem, l'App Inventor ens permet personalitzar la disposició, els colors i altres propietats dels elements de la pantalla segons els nostres gustos.
Les següents taules mostren les propietats de cada un dels elements:
| Propietat | Valor | Comentaris |
| Nom | HorizontalArrangement_adre | Aquest nom l'hem de posar en el requadre Components |
| Width | Fill parent |
| Propietat | Valor | Comentaris |
| Nom | Label_adre | Aquest nom l'hem de posar en el requadre Components |
| Text | Adreça: 192.168.1. |
| Propietat | Valor | Comentaris |
| Nom | TextBox_adre | Aquest nom l'hem de posar en el requadre Components |
| Text | 66 |
| Propietat | Valor | Comentaris |
| Nom | Label_avis | Aquest nom l'hem de posar en el requadre Components |
| TextColor | Red |
| Propietat | Valor | Comentaris |
| Nom | Label_T | Aquest nom l'hem de posar en el requadre Components |
| FontSize | 50 | |
| Width | Fill parent | |
| Text | T °C | |
| TextAlignment | center |
| Propietat | Valor | Comentaris |
| Nom | Label_H | Aquest nom l'hem de posar en el requadre Components |
| FontSize | 50 | |
| Width | Fill parent | |
| Text | H % | |
| TextAlignment | center |
| Propietat | Valor | Comentaris |
| Nom | Button_consulta | Aquest nom l'hem de posar en el requadre Components |
| Text | Nova lectura |
| Propietat | Valor | Comentaris |
| Nom | Web_connecta | Aquest nom l'hem de posar en el requadre Components |
El programa es mostra a continuació. La part que correspon a la inicialització és molt senzilla. També ho és la part que correspon al botó que es limita a enviar la comanda GET corresponent. Aquesta comanda l'hem posada en una funció per poder-la fer servir també a la inicialització i així visualitzar ja una lectura quan s'obre l'aplicació. On el programa és més llarg és quan arriba la resposta de la comanda GET.
Si tot ha anta bé (resposta 200) és quan hem d'analitzar el contingut de la resposta per saber les lectures. En cas contrari mostrem un missatge d'error al lloc corresponent. En cas que tot sigui correcte, la resposta serà similar a aquesta:
<!DOCTYPE HTML> <meta charset='UTF-8'> <html> <h1>Temperatura i humitat actuals</h1> <p></p> <p></p> <p>T = 20,40 C</p> <p></p> <p>H = 63,70 %</p> </html>
Observem que les dades que ens interessen (els valors de temperatura i humitat) estàn en línies que comencen per <p>T = i <p>H =. Atès que la resposta són diverses línies, farem servir la instrucció split per separar el text en els salts de línia (\n) i guardem el resultat en una llista. Tot seguit fem un bucle sobre tota la llista per trobar a quines línies hi ha les instruccions <p>T = i <p>H =. Un cop trobades les línies, les descomposem (primer una i després l'altra) separant pels espais en blanc i ho guardem a una altra llista. En alguna de les posicions de la llista hi hauria d'haver el valor. Atès que en l'App Inventor entén els números amb els decimals separats amb punt i nosaltres hem enviat els valors amb els decimals separats per coma no podem comprovar si el contingut de la filera de la llista és un nombre. El que fem, doncs, és mirar si ho és el primer caràcter; encara que hi hauria altres possibilitats per trobar el valor. Un cop trobada la línia que té el valor, el mostrem en el lloc corresponent afegint l'indicador d'unitats (°C o %).
El programa serà el següent:
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.