El protocol MQTT permet l'enviament i la recepció de dades de manera senzilla entre el microcontrolador i una aplicació mòbil. El servidor MQTT fa d'intermediari i així tant el microcontrolador com l'aplicació poden actuar com a clients. El protocol MQTT permet una comunicació molt més ràpida que la transmissió fent servir pàgines html.
Existeix la possibilitat de crear-se un servidor MQTT personal però per fer proves ens serà suficient amb la versió de prova (broker.mqtt-dashboard.com), que és gratuïta.
L'aplicació per a Android s'anomena MQTT Dash i la corresponent per a iOS es diu MQTT Probe i es poden trobar, respectivament, a Play Store i App Store.
Cal tenir present que la interacció entre el microcontrolador i l'aplicació es basa només en les etiquetes que fem servir i, per tant, si fem servir el servidor de proca correm el risc que algú altre hagi fet servir les mateixes etiquetes i hi hagi interferències indesitjades. En aplicacions professionals això s'evita emprant un servidor propi, de pagament. En aquest cas, hem posat oba_ a l'inici de cada etiqueta per reduir el risc.
Quan entrem a l'aplicació, haurem de crear un espai per a cada projecte. Inicialment no n'hi haurà cap. En crearem un picant al botó ⊕ i deixant la majoria de paràmetres per defecte. Només haurem d'editar els següents:
| Paràmetre | Exemple | Comentaris |
| Name | Control LED | Qualsevol nom que ens permeti diferenciar el projecte dels altres |
| Address | broker.mqtt-dashboard.com | Adreça del servidor MQTT que fem servir |
| Port | 1883 | Port emprat pel servidor, el normal és 1883 |
Després d'acabar la configuració, picarem sobre la icona
![]()
Dins de cada projecte podrem tenir un o diversos elements, cada un amb la seva funció. Per afegir un element haurem de picar en el botó ⊕. A continuació comentem els elements que és més probable que fem servir.
Aquest element permet llegir un valor i mostrar-lo a la pantalla o bé que l'usuari escrigui un valor i s'enviï al servidor. Fara una funció o una altra en funció del que fem en el programa del microcontrolador. Els paràmetres que normalment hem de configurar són:
| Paràmetre | Exemple | Comentaris |
| Name | Estat LED | Qualsevol nom que ens permeti diferenciar aquest element d'altres similars |
| Topic (sub) | oba_estat_LED | Etiqueta amb la que es guardarà el valor al servidor |
| Main text size | Medium | Mida de la lletra del text que es mostrarà |
| Main text color | ◼ | Color de la lletra del text que es mostrarà |
Després d'acabar la configuració, picarem sobre la icona
![]()
Aquest element permet enviar un valor (funcionament com a polsador) o dos valors que es van alternant (funcionament com a interruptor). Els paràmetres que normalment hem de configurar són:
| Paràmetre | Exemple | Comentaris |
| Name | LED | Qualsevol nom que ens permeti diferenciar aquest element d'altres similars |
| Topic (sub) | oba_accio_LED | Etiqueta amb la que es guardarà el valor al servidor |
| On | 1 | Text que s'envia quan piquem per encendre |
![]() |
Icona que es mostra quan piquem per encendre | |
| ◼ | Color de la icona que es mostra quan piquem per encendre | |
| Off | 0 | Text que s'envia quan piquem per apagar |
![]() |
Icona que es mostra quan piquem per apagar | |
| ◼ | Color de la icona que es mostra quan piquem per apagar |
Si volem que funcioni com un polsador, posarem els mateixos paràmetres a On i a Off.
Després d'acabar la configuració, picarem sobre la icona
![]()
Aquest element permet seleccionar un valor dins d'un rang. Els paràmetres que normalment hem de configurar són:
| Paràmetre | Exemple | Comentaris |
| Name | R | |
| Topic (sub) | oba_neopixel_R | L'etiqueta que hem posat al programa |
| Min | 0.0 | Valor mínim del rang |
| Max | 255.0 | Valor mínim del rang |
| Progress color | ◼ | Color del selector |
Després d'acabar la configuració, picarem sobre la icona
![]()
Aquest element permet seleccionar una opció dins d'una llista. Per a cada element de la llista tindrem una descripció i un text que s'enviarà. Això permet posar-li a l'usuari una descripció fàcil d'entendre i, d'altra banda, enviar al microcontrolador un text fàcil de processar. Els paràmetres que normalment hem de configurar són:
| Paràmetre | Exemple | Comentaris | |
| Name | Mesura | Qualsevol nom que ens permeti diferenciar aquest element d'altres similars | |
| Topic (sub) | oba_temphumi_sel | L'etiqueta que hem posat al programa | |
| Main text size | Medium | Mida de la lletra del text que es mostrarà | |
| Main text color | ◼ | Color de la lletra del text que es mostrarà | |
| Options | Payload | T | Text que s'enviarà en seleccionar aquesta opció |
| Label | Temperatura | Text que sortirà com a opció | |
| Payload | H | Text que s'enviarà en seleccionar aquesta opció | |
| Label | Humitat | Text que sortirà com a opció | |
Després d'acabar la configuració, picarem sobre la icona
![]()
Aquest element permet seleccionar un color o bé mostrar el color rebut. Els paràmetres que normalment hem de configurar són:
| Paràmetre | Exemple | Comentaris |
| Name | NeoPixel | Qualsevol nom que ens permeti diferenciar aquest element d'altres similars |
| Topic (sub) | oba_estat_neopixel | L'etiqueta que hem posat al programa |
| Payload format | HEX string | Format en el que es rebran les dades |
| Icon | ![]() |
Icona sobre la que es mostrarà el color |
Després d'acabar la configuració, picarem sobre la icona
![]()

Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.