Bueno podemos decir que esta página web que hemos creado es una página web estática.
De hecho así eran las páginas web en un inicio en las primeras páginas web tenían muy poca dinámica
eran bastante aburridas.
Todo era rígido nada cambiaba a lo largo del tiempo.
Entonces lo que hago es descubrir el código que tengo por detrás para mostrarles algo.
Con el paso del tiempo empezaron a aparecer posibilidades y una de ésta fue la posibilidad de poder
incorporar código JavaScript para hacer nuestra página web dinámica.
Hacer que estas cosas cambien a lo largo del tiempo.
Bueno esta posibilidad es la que nosotros vamos a aprovechar para por un lado conectarnos al servidor
QTTF y por otro lado poder mostrar los datos que nos vayan llegando desde nuestro dispositivo.
Entonces empecemos esta tarea para escribir código JavaScript y que actúe sobre una web.
Es tan simple como aquí debajo voy a escribir Scripta llámelo propone a.
Voy a hacer Enter y miren nuevamente tengo una etiqueta que abre y otra que cierra lo que voy a hacer
esto acá es copiarlo para cortarlo y lo voy a incluir aquí dentro del body bien el body abre el body
cierra yo aquí voy a separar esto.
No se preocupen que esto de separar no causa ningún efecto en la web.
No lo entienden como espacios y aquí les voy a pegar bien.
Tratemos siempre de cuidar sobre todo en HTML lo que es la identificación.
Cuando tenemos cosas adentro de otra se inventa con un tab hacia adentro.
Algo así también hacemos con C++ acá voy a escribir código para poder actuar sobre esta etiqueta por
ejemplo y transformarla y que me vaya mostrando los distintos valores que llegan.
Pero para hacer eso primero me tengo que conectar al servidor MQ QTTF.
Esta sí que es una tarea compleja pero por suerte hay una librería que ya nos soluciona el 90 por ciento
del problema para incluir esa librería.
Yo lo voy a hacer aquí arriba es bastante largo se va de la pantalla pero miran se pone script y en
vez de escribir el código de la librería Yo indico dónde está yo podría tenerla acá a la librería fijense.
Este es el archivo de la librería.
Yo podría descargarme este archivo ingresando esta dirección y grabar el archivo dentro de mi proyecto
sería lo ideal porque en realidad lo que estoy haciendo es incluirla directamente desde Internet.
Cuál es la ventaja que siempre va a tener una librería actualizada.
Puede ser esa es la ventaja.
La desventaja es que si este sitio se cae mi sistema también se va a caer.
Pero ahora para hacerlo fácil yo directamente lo incluyo al vuelo digamos desde este sitio que pertenece
a Google.
Otra Librería que vamos a usar es la de Dj qwerty que es simplemente un framework que nos permite trabajar
de manera más cómoda para actuar sobre este marcado HTML desde javascript.
Así que procedemos a instalar esta nueva librería que es la de J jota Cuadri viene acá.
Perdón esta es la librería que la tenemos alojada en Google.
Fue un error.
Bueno acá está jQuery.
Yo podría bajarme este archivo es tan simple como entrar al navegador descargarlo y guardarlo acá y
aquí en vez de poner esta dirección pondría simplemente la ruta a El Archivo.
Eso sería más seguro digamos.
Pero ahora por practicidad lo hacemos de esta manera.
Ustedes opten el camino que más les parezca.
Bueno llegó el momento.
Entonces aquí de escribir quilombo a hacer de escribir el código para conectarnos a nuestro servidor.
La idea no es dar un curso de JavaScript en este momento pero yo como profesor tengo una ventaja con
ustedes mis alumnos.
Y es que ustedes ya son muy buenos en C++.
Uno de los lenguajes más complejos que hay es sumamente difícil C++ aunque no lo es aunque no lo crean.
Entonces como muchas veces le supe contar que si aprendiste un lenguaje te aprendiste todos los lenguajes.
Yo estoy seguro que no les va a costar esto.
Entonces miren en JavaScript también hay variables.
Y la verdad que es un poco diferente no tendremos tipos enteros flotantes y estas cosas que teníamos
en C++ pero colorcito más colorcito menos.
Es muy similar para declarar variables en JavaScript.
Simplemente utilizo la palabra reservada Bará y voy a poner el nombre de la variable en este caso quiero
crear el cliente Heydi de nuestro sistema.
Voy a grabar
cierro acá el archivo y lo vuelvo a abrir.
Por qué no me estaba reconociendo acá el código que escribió en JavaScript.
Ahora ven que se pone de color el bar.
Eso no me está mandando.
Pero simplemente se me va abriendo de nuevo se soluciona bar clienta y vi y qué es este clienta y di
que estoy generando acá y no se acuerdan.
Es lo mismo cuando yo me conectaba me vine a Arduino.
Miren acá yo genera un cliente allí se acuerdan que tenía que ser distinto cada vez que hacía un intento
para que no vas a hacer cosas que me rebotaron en esa conexión.
Acá pasa lo mismo.
Está esta página web que estamos preparando no deja de ser un cliente que se va a conectar al servidor
así que vamos a preparar un cliente ahí y acá allá les damos les voy a mostrar cómo generar esto de
los valores aleatorios.
Vamos a hacerlo de la siguiente manera.
El cliente Avivi va a ser igual y voy a poner un string cualquiera.
Puse clienta y vi más le estoy concatenando solo que JavaScript es un poco más noble y el poner el signo
más bueno ya.
él por su cuenta me está convirtiendo a este número que pongo acá.
Bueno yo no estoy obligado a poner un punto y coma pero de todos modos si lo pongo van a ver de que
no pasaría nada va a funcionar correctamente.
Entonces ya tenemos nuestro cliente y ahí aleatorio generado.
Vamos a ver si esto es cierto.
Tenemos una función que es consol.
Punto.
Lo vamos a imprimir que el cliente ahí donde se va a imprimir esto lo voy a grabar y miren yo vengo
de este lado aparentemente no se imprime en ningún lado esto pero sí se tendría que imprimir.
Yo voy a hacer click derecho inspeccionar me voy acá a Consol y ven acá en la consola del navegador
aparece el cliente Heydi que estamos generando.
Miren cómo cambia la parte numérica así que tenemos la certeza de que estamos generando un cliente Heydi
aleatoria y vamos avanzando un poco más la idea es que podamos conectarnos ya en esta clase en la siguiente
línea estamos creando una instancia de la librería cliente de QTTF.
Entonces la instancia acá adentro de la librería dentro del código perdón se va a llamar cliente.
Este nombre lo estoy eligiendo arbitrariamente.
No le vamos a poner cliente crea una instancia de este cliente y le tenemos que pasar es muy diferente
a lo que hacíamos en Arduino.
Le tengo que pasar por un lado la dirección del servidor eso lo tenemos claro eso no cambió pero yo
me vengo acá a QTTF a Clade me QTTF perdón y fíjense que el puerto el puerto que voy a usar es el correspondiente
a Web Sockets porque los navegadores no se pueden conectar a través de un puerto TCP común como es este
para eso tienen que utilizar un puerto del tipo web socket.
Así que yo he copiado este 32 4 80 y lo he puesto aquí como quien nos vamos a conectar.
Quiénes somos.
Ahí está le paso el Klei el Kleiman ahí vi que acabábamos de generar voy a hacer esto para tener más
espacio me estaba molestando.
Bueno sigamos adelante qué pasaba con nuestro código Arduino.
Se acuerdan que sentíamos un call back que en definitiva decíamos hoy cuando llegue un dato quiero que
se ejecute tal o cual cosa.
Bueno acá pasa algo parecido y vamos a colocar estas dos líneas.
Yo lo que les recomiendo es que como esta parte de acá del código esto de acá lo van a usar en cada
proyecto web relacionado con M QTTF que tampoco se vuelvan locos.
Si a esto se lo aprenden de memoria o no esto es el abecé del embrutece web.
Bueno cada vez que tengan que hacer un proyecto lo dejan a esto como un ejemplo lo copian lo pegan y
así arrancaran la mayoría de sus desarrollos web relacionados con QTTF.
Bueno ahora sí vamos a poner un array a donde este en este array estamos pasando toda la configuración
de la conexión.
Mirá el mono lo voy a ordenar un poco porque se me desordenó
y está en esta variable llamada opciones estoy poniendo distintos elementos y solamente a modo de comentario
hacemos una conexión segura porque no nos dejarían conectarnos si no fuera así como ven eran TLS only
o sea es a través de una conexión segura o cifrada o con certificados SSL que hay que hacerla.
Entonces simplemente lo ponemos en Tru y eso nos va a permitir que la conexión sea exitosa nombre de
usuario igual que como hicimos en Arduino clave.
Bueno si hay una conexión exitosa qué vamos a disparar vamos a ir para allá vamos a ver una función
que es la on Connect y que hacemos ante una falla.
Bueno esto es casi un manual es el abecé de las conexiones.
A mí me QTTF como les decía hace un rato bueno tenemos esto listo qué nos queda por hacer.
Llegó el momento de conectarnos Client punto a punto conecta y entre paréntesis que le voy a pasar las
opciones con las que me quiero conectar acá hasta darle paso esta configuración en esta función perfecta.
Vamos un paso más.
Qué dijimos.
Luego de hacer este intento de conexión nadie nos garantiza que esto va a suceder en la configuración
de deciamos.
En el caso de tener éxito disparar esta función entonces vamos a crear una función en JavaScript.
Las funciones se crean utilizando la palabra reservada function.
Esta se va a llamar con Connect.
Miren qué diferente de JavaScript.
Las funciones también reciben parámetros a través de unos paréntesis.
La misma cosa que en C++.
Abro y cierro paréntesis.
Tranquilamente podría poner Consol punto log para que aparezca por la consola como recién conexión exitosa.
Para que sepamos de qué estamos ya en el mes QTTF y vamos cliente punto sus pero sus Grahim me voy a
suscribir a un tópico vamos a Arduino y veamos que Arduino cuando mandaba mensajes hacía una publicación
sobre el tópico sãlida entonces mi tópico de entrada va a ser sãlida yo me quiero suscribir a ese tópico
aquí entonces me suscribo sãlida para que todo lo que diga la SP 32 me llegue acá perfecto.
Bueno también habíamos dicho que en el caso de que exista una falla a la hora de conectarnos ya llamáramos
a esa función du fail entonces le vamos a poner acá.
No creo que sea el caso pero puede ser y no queremos que se trabe nada ni se rompa nada.
Entonces esta función du fail que recibe el error que tuvo en ese momento el vamos a hacer algo simple
simplemente imprimimos por consola el tipo de error por el cual no se pudo conectar.
Bastante simple después voy a hacer otra función acabo de declararla que es una función que se va a
disparar de manera automática si luego de que una conexión fuera exitosa esa conexión se pierde.
Entonces qué quiero hacer si la conexión se pierde.
Bueno simplemente voy a mostrar cuál fue el motivo por el cual se perdió esa conexión.
El mensaje de error aclaró lo que estoy haciendo es sacarlo por consola.
El mensaje de error.
Entonces repasemos incluyamos las librerías preparábamos nuestro cliente Heydi preparamos con nuestro
cliente le pasábamos los datos a donde se tenía que conectar etcétera.
Luego preparábamos las opciones de la conexión y la efectuamos luego de esto teníamos una posibilidad
que la conexión fuera exitosa.
Esto es muy importante y después otro tipo de cosas que podían pasar ya menos importantes porque apostamos
a que no van a pasar.
Entonces qué es lo segundo más importante que tengo después de que realmente se produce una conexión
a sabiendas de que si se produce me suscribo a un tópico.
Pues bien de que nos llegue un mensaje por ese tópico entonces por eso yo le voy a poner acá la función
porque creo que es algo importante no quiero tener la pérdida de trabajo total yo sé que estas dos funciones
ya están no las voy a tocar mucho más pero esta función sí que es importante y es la función que automáticamente
se va a disparar cuando llegue un mensaje remarcó que en estos casos tengo que respetar el nombre acaso
no puedo andar inventando nombres tengo que dejarla así tal cual como está.
Esto si va a recibir aquí una variable que se va a llamar mesas y dentro de la función se va a guardar
aquí adentro el mensaje que está arribando
si un mensaje llega voy a hacer algo muy simple tan simple como imprimir por la consola de Google Crom
vamos a cambiar esto que está en inglés un mensaje ha llegado y como ven yo de este lado lo que hago
es estarle pegando el mensaje y lo que hago es mostrar el payload como string bueno grabo y tendríamos
que probar esto.
Bueno miren lo que sucede acá ya están dando pero yo lo voy a refrescar para arrancar de cero.
Conexión exitosa y nos están llegando los mensajes que manda la SP 32.
Miren llovida resetearlo SP 32.
En este momento 3 2 1 reception como ven van a dejar de llegar los mensajes.
Presiona el botón equivocado.
Vamos que no hay recetas
la idea es que la cuenta empiece de cero.
Ahí está bien.
La cuenta empezó de cero.
Por qué su receta LSP.
Miren qué rápido se conecta vía refrescará.
Esto va a generar una nueva conexión a esta.
Tenemos una nueva conexión por parte de nuestro cliente mejor que que nos muestra de este lado había
conexiones veamos que tenemos aquí bueno conexiones por web socket dice que tenemos dos conexiones.
Puede ser porque yo he refrescado muchas veces esto también.
Eso puede generar momentaneamente más de una conexión o también por qué esta herramienta web socket.
Uy.
También me genera una conexión.
Ahí se conecto.
Eso también puede generar otra conexión aguarden en un momento quiero probar algo interesante miren
yo por este lado voy a dejar conectado este sistema.
A ver ahí está y por el otro lado me había venido acá aguarde en un momento voy a tratar de organizar
esto para que se vea todo dentro de la pantalla chica acá y ahí está miren cómo en definitiva acá tengo
dos clientes conectados ahí que va un poco más ordenado el asunto está.
Miren estoy recibiendo datos porque este sistema está monitoreando lo que llega está suscripto en definitiva
a nuestro dispositivo y de este lado nuestra propia aplicación web también se ha suscrito y está recibiendo
valores.
O sea nuestra S.P. envía datos al servidor y el servidor automáticamente se encarga de mandarnos a nuestra
aplicación web propia y aquí a la aplicación que corre en MQ Teté.
Ha sido un éxito esta clase porque ya estamos recibiendo valores.
Vamos un poco más adelante en la siguiente clase nos vemos.