Bueno bienvenidos a una clase más y vamos a avanzar ahora si ya más contundentemente con nuestra aplicación
web.
Se acuerdan aca esta etiqueta que iba a representar el valor a mostrar en pantalla.
Bueno ya podemos ir borrando etiquetas display la vamos a dejar vacía lista para recibir los valores
que van a ir llegando por aquí.
Copiar esta etiqueta y copiar otra arriba y esta le vamos a poner de nombre status y la idea va a ser
mostrar aquí desconectaba el estado de la aplicación con respecto al servidor.
Queremos cambiar esto por conectado cuando la conexión sea exitosa.
Bueno veamos otro detalle más abajo en vez de crear un DIV voy a poner lo siguiente y escribir larga
UTE.
Ahí está ella me propone la etiqueta Button.
Voy a hacer click o presionar Enter y se me completa lo que es un botón por defecto voy a grabar voy
a venirme acá a la aplicación actualizo y casi no se ve porque es el botón no tiene ningún texto así
que le vamos a escribir algo.
Acá vamos a encender.
No necesito ningún nombre eso lo voy a sacar.
De momento grabo.
Vamos a ver cómo luce esto va a estar mejor.
Ya tiene forma de botón.
Voy a separar un poco las cosas.
Esta etiqueta va a generar un espacio o un o una línea en blanco digamos si esto acarrea el efecto que
busco.
Si está para que se separe un poco entonces puede copiar esto copio y pego y lo vamos a poner a pagar.
Bueno no está perfecto.
Me gustaría acá poner otro ver para que se separen más aún a ver si logro lo que quiero.
Ahí está bueno bajemos un poco y vamos a tratar de operar sobre estas etiquetas y hacer que cambien
de valor de acuerdo a las cosas que vayan pasando.
Entonces lo primero que quiero hacer es que esta etiqueta diga desconectado.
En el caso de que nos desconectamos y cambie a conectado.
En el caso de que nos conectemos cómo vamos a hacer esto no vamos a valer de la librería jQuery que
nos ayuda a hacer estas operaciones.
Entonces vamos a esta función nosotros sabemos que esta función se dispara cuando la conexión es exitosa
de hecho lo escribíamos por la consola entonces podemos hacer acá lo siguiente escribir signo de pesos
y entre paréntesis y entre comillas y poniendo el signo de número o numeral voy a pasar el Heydi de
la etiqueta que quiero modificar.
Cómo se llamaba la etiqueta que quiero modificar ahora se llamaba status bajo esto que estoy haciendo
ahora es utilizar la librería J QR entonces status disto todo esto que tengo acá hace referencia a esa
etiqueta.
Luego lo que viene a decir es utilizar el método HTML y entre paréntesis le voy a pasar qué quiero que
diga ahora conexión establecida.
Simple bueno entonces cuando se conecte el sistema se va a reemplazar lo que dice ahora de desconectado
por conexión exitosa.
Veamos si esto es cierto lleva grabado
vengo aquí refresco ven conexión establecida no bien se realizó.
Vamos de nuevo listo.
Eso ya está funcionando.
Bueno hacer entonces de que los datos se refresquen en la etiqueta display no va a ser algo para nada
difícil habiendo visto como hacemos esto.
Entonces lo que puedo hacer para hacer esto más eficiente es copiar esta línea.
Quizás sé que esta línea sirve para referenciar una etiqueta y modificarla y me puedo empezar a grabar
Amela en la mente.
Voy a agarrar acá cuando un mensaje llega aquí abajo además de mostrarlo por la consola no voy a sacar
eso yo quiero que le etiqueta como se llamaba la etiqueta display o no quiero que la etiqueta display
cambie su contenido y el contenido sea esto el mensaje vamos
a esta grabemos y veamos qué efecto tiene esto vamos a actualizar aquí para que se conecte se conecta.
Vamos a esperar un rato y vemos que no sucede nada porque yo lo estuve viendo no se preocupen.
Miren esta parte le hice bien acabada donde dice cuando el mensaje arrive arribe al etiqueta Display.
Le voy a mostrar o le voy a cambiar el contenido por el mensaje pero por qué no funciona porque ustedes
ya se dieron cuenta seguro pero no me han podido avisar que yo acá no puse la s.
Entonces vamos a volver.
Segundo intento no pasa nada.
Conexión establecida y tenemos los valores.
Miren como van cambiando.
Me gustaría separar esto para que quede un poquito mejor desconectado.
Voy a generar ahí un espacio bebamos y lo tomas a ver está perfecto.
Bueno la verdad que estoy muy contento de ver cómo llegan los valores y los estamos pudiendo mostrar.
Ahora ya para hacer esto de lujo a mi me gustaría encender o apagar a voluntad desde nuestra aplicación
el LED de nuestra placa entonces acompáñame en la próxima clase a completar esta tarea.
Muchas gracias.