1 00:00:00,630 --> 00:00:05,510 Bueno podemos decir que esta página web que hemos creado es una página web estática. 2 00:00:05,560 --> 00:00:13,210 De hecho así eran las páginas web en un inicio en las primeras páginas web tenían muy poca dinámica 3 00:00:13,480 --> 00:00:14,980 eran bastante aburridas. 4 00:00:14,980 --> 00:00:17,820 Todo era rígido nada cambiaba a lo largo del tiempo. 5 00:00:18,610 --> 00:00:26,220 Entonces lo que hago es descubrir el código que tengo por detrás para mostrarles algo. 6 00:00:26,700 --> 00:00:33,810 Con el paso del tiempo empezaron a aparecer posibilidades y una de ésta fue la posibilidad de poder 7 00:00:33,810 --> 00:00:39,680 incorporar código JavaScript para hacer nuestra página web dinámica. 8 00:00:39,750 --> 00:00:44,460 Hacer que estas cosas cambien a lo largo del tiempo. 9 00:00:44,680 --> 00:00:56,110 Bueno esta posibilidad es la que nosotros vamos a aprovechar para por un lado conectarnos al servidor 10 00:00:56,430 --> 00:01:03,250 QTTF y por otro lado poder mostrar los datos que nos vayan llegando desde nuestro dispositivo. 11 00:01:04,780 --> 00:01:15,040 Entonces empecemos esta tarea para escribir código JavaScript y que actúe sobre una web. 12 00:01:15,140 --> 00:01:21,230 Es tan simple como aquí debajo voy a escribir Scripta llámelo propone a. 13 00:01:21,260 --> 00:01:27,470 Voy a hacer Enter y miren nuevamente tengo una etiqueta que abre y otra que cierra lo que voy a hacer 14 00:01:27,470 --> 00:01:36,380 esto acá es copiarlo para cortarlo y lo voy a incluir aquí dentro del body bien el body abre el body 15 00:01:36,380 --> 00:01:39,450 cierra yo aquí voy a separar esto. 16 00:01:39,560 --> 00:01:42,950 No se preocupen que esto de separar no causa ningún efecto en la web. 17 00:01:43,160 --> 00:01:47,210 No lo entienden como espacios y aquí les voy a pegar bien. 18 00:01:47,210 --> 00:01:52,420 Tratemos siempre de cuidar sobre todo en HTML lo que es la identificación. 19 00:01:52,460 --> 00:01:57,680 Cuando tenemos cosas adentro de otra se inventa con un tab hacia adentro. 20 00:01:57,830 --> 00:02:06,540 Algo así también hacemos con C++ acá voy a escribir código para poder actuar sobre esta etiqueta por 21 00:02:06,540 --> 00:02:11,610 ejemplo y transformarla y que me vaya mostrando los distintos valores que llegan. 22 00:02:11,610 --> 00:02:17,140 Pero para hacer eso primero me tengo que conectar al servidor MQ QTTF. 23 00:02:17,310 --> 00:02:23,760 Esta sí que es una tarea compleja pero por suerte hay una librería que ya nos soluciona el 90 por ciento 24 00:02:23,820 --> 00:02:28,530 del problema para incluir esa librería. 25 00:02:28,560 --> 00:02:35,550 Yo lo voy a hacer aquí arriba es bastante largo se va de la pantalla pero miran se pone script y en 26 00:02:35,550 --> 00:02:42,580 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. 27 00:02:42,660 --> 00:02:46,140 Este es el archivo de la librería. 28 00:02:46,140 --> 00:02:52,260 Yo podría descargarme este archivo ingresando esta dirección y grabar el archivo dentro de mi proyecto 29 00:02:52,260 --> 00:02:58,330 sería lo ideal porque en realidad lo que estoy haciendo es incluirla directamente desde Internet. 30 00:02:58,410 --> 00:03:01,810 Cuál es la ventaja que siempre va a tener una librería actualizada. 31 00:03:01,830 --> 00:03:03,330 Puede ser esa es la ventaja. 32 00:03:03,330 --> 00:03:07,810 La desventaja es que si este sitio se cae mi sistema también se va a caer. 33 00:03:07,950 --> 00:03:15,840 Pero ahora para hacerlo fácil yo directamente lo incluyo al vuelo digamos desde este sitio que pertenece 34 00:03:15,840 --> 00:03:18,220 a Google. 35 00:03:18,330 --> 00:03:25,020 Otra Librería que vamos a usar es la de Dj qwerty que es simplemente un framework que nos permite trabajar 36 00:03:25,020 --> 00:03:33,830 de manera más cómoda para actuar sobre este marcado HTML desde javascript. 37 00:03:33,900 --> 00:03:39,310 Así que procedemos a instalar esta nueva librería que es la de J jota Cuadri viene acá. 38 00:03:39,360 --> 00:03:42,150 Perdón esta es la librería que la tenemos alojada en Google. 39 00:03:42,150 --> 00:03:43,510 Fue un error. 40 00:03:44,100 --> 00:03:46,240 Bueno acá está jQuery. 41 00:03:46,260 --> 00:03:52,260 Yo podría bajarme este archivo es tan simple como entrar al navegador descargarlo y guardarlo acá y 42 00:03:52,710 --> 00:03:58,770 aquí en vez de poner esta dirección pondría simplemente la ruta a El Archivo. 43 00:03:58,770 --> 00:04:00,670 Eso sería más seguro digamos. 44 00:04:00,690 --> 00:04:03,300 Pero ahora por practicidad lo hacemos de esta manera. 45 00:04:03,300 --> 00:04:07,020 Ustedes opten el camino que más les parezca. 46 00:04:08,750 --> 00:04:10,120 Bueno llegó el momento. 47 00:04:10,120 --> 00:04:21,000 Entonces aquí de escribir quilombo a hacer de escribir el código para conectarnos a nuestro servidor. 48 00:04:21,310 --> 00:04:29,200 La idea no es dar un curso de JavaScript en este momento pero yo como profesor tengo una ventaja con 49 00:04:29,320 --> 00:04:31,170 ustedes mis alumnos. 50 00:04:31,170 --> 00:04:33,880 Y es que ustedes ya son muy buenos en C++. 51 00:04:33,970 --> 00:04:40,920 Uno de los lenguajes más complejos que hay es sumamente difícil C++ aunque no lo es aunque no lo crean. 52 00:04:41,050 --> 00:04:48,520 Entonces como muchas veces le supe contar que si aprendiste un lenguaje te aprendiste todos los lenguajes. 53 00:04:48,540 --> 00:04:50,690 Yo estoy seguro que no les va a costar esto. 54 00:04:50,800 --> 00:04:54,130 Entonces miren en JavaScript también hay variables. 55 00:04:54,250 --> 00:04:59,650 Y la verdad que es un poco diferente no tendremos tipos enteros flotantes y estas cosas que teníamos 56 00:04:59,650 --> 00:05:03,010 en C++ pero colorcito más colorcito menos. 57 00:05:03,070 --> 00:05:05,700 Es muy similar para declarar variables en JavaScript. 58 00:05:05,770 --> 00:05:13,600 Simplemente utilizo la palabra reservada Bará y voy a poner el nombre de la variable en este caso quiero 59 00:05:13,600 --> 00:05:18,520 crear el cliente Heydi de nuestro sistema. 60 00:05:18,610 --> 00:05:19,540 Voy a grabar 61 00:05:22,070 --> 00:05:25,490 cierro acá el archivo y lo vuelvo a abrir. 62 00:05:25,490 --> 00:05:30,140 Por qué no me estaba reconociendo acá el código que escribió en JavaScript. 63 00:05:30,140 --> 00:05:32,210 Ahora ven que se pone de color el bar. 64 00:05:32,210 --> 00:05:33,090 Eso no me está mandando. 65 00:05:33,180 --> 00:05:39,450 Pero simplemente se me va abriendo de nuevo se soluciona bar clienta y vi y qué es este clienta y di 66 00:05:39,470 --> 00:05:41,240 que estoy generando acá y no se acuerdan. 67 00:05:41,240 --> 00:05:45,170 Es lo mismo cuando yo me conectaba me vine a Arduino. 68 00:05:45,260 --> 00:05:50,300 Miren acá yo genera un cliente allí se acuerdan que tenía que ser distinto cada vez que hacía un intento 69 00:05:50,300 --> 00:05:55,150 para que no vas a hacer cosas que me rebotaron en esa conexión. 70 00:05:55,160 --> 00:05:57,020 Acá pasa lo mismo. 71 00:05:57,220 --> 00:06:02,330 Está esta página web que estamos preparando no deja de ser un cliente que se va a conectar al servidor 72 00:06:02,660 --> 00:06:11,300 así que vamos a preparar un cliente ahí y acá allá les damos les voy a mostrar cómo generar esto de 73 00:06:11,360 --> 00:06:13,980 los valores aleatorios. 74 00:06:14,310 --> 00:06:15,730 Vamos a hacerlo de la siguiente manera. 75 00:06:17,170 --> 00:06:23,220 El cliente Avivi va a ser igual y voy a poner un string cualquiera. 76 00:06:23,230 --> 00:06:32,370 Puse clienta y vi más le estoy concatenando solo que JavaScript es un poco más noble y el poner el signo 77 00:06:32,370 --> 00:06:33,590 más bueno ya. 78 00:06:33,600 --> 00:06:39,250 él por su cuenta me está convirtiendo a este número que pongo acá. 79 00:06:39,390 --> 00:06:43,950 Bueno yo no estoy obligado a poner un punto y coma pero de todos modos si lo pongo van a ver de que 80 00:06:43,950 --> 00:06:47,620 no pasaría nada va a funcionar correctamente. 81 00:06:48,720 --> 00:06:53,250 Entonces ya tenemos nuestro cliente y ahí aleatorio generado. 82 00:06:54,500 --> 00:06:56,630 Vamos a ver si esto es cierto. 83 00:06:56,630 --> 00:06:59,080 Tenemos una función que es consol. 84 00:06:59,090 --> 00:06:59,720 Punto. 85 00:06:59,770 --> 00:07:08,120 Lo vamos a imprimir que el cliente ahí donde se va a imprimir esto lo voy a grabar y miren yo vengo 86 00:07:08,120 --> 00:07:17,660 de este lado aparentemente no se imprime en ningún lado esto pero sí se tendría que imprimir. 87 00:07:17,660 --> 00:07:28,040 Yo voy a hacer click derecho inspeccionar me voy acá a Consol y ven acá en la consola del navegador 88 00:07:28,460 --> 00:07:31,390 aparece el cliente Heydi que estamos generando. 89 00:07:31,390 --> 00:07:37,940 Miren cómo cambia la parte numérica así que tenemos la certeza de que estamos generando un cliente Heydi 90 00:07:38,110 --> 00:07:46,370 aleatoria y vamos avanzando un poco más la idea es que podamos conectarnos ya en esta clase en la siguiente 91 00:07:46,370 --> 00:07:51,130 línea estamos creando una instancia de la librería cliente de QTTF. 92 00:07:51,230 --> 00:07:56,530 Entonces la instancia acá adentro de la librería dentro del código perdón se va a llamar cliente. 93 00:07:56,600 --> 00:07:58,770 Este nombre lo estoy eligiendo arbitrariamente. 94 00:07:58,770 --> 00:08:06,070 No le vamos a poner cliente crea una instancia de este cliente y le tenemos que pasar es muy diferente 95 00:08:06,070 --> 00:08:08,750 a lo que hacíamos en Arduino. 96 00:08:08,750 --> 00:08:17,870 Le tengo que pasar por un lado la dirección del servidor eso lo tenemos claro eso no cambió pero yo 97 00:08:17,870 --> 00:08:31,850 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 98 00:08:31,970 --> 00:08:39,780 a Web Sockets porque los navegadores no se pueden conectar a través de un puerto TCP común como es este 99 00:08:41,210 --> 00:08:45,740 para eso tienen que utilizar un puerto del tipo web socket. 100 00:08:45,860 --> 00:08:53,240 Así que yo he copiado este 32 4 80 y lo he puesto aquí como quien nos vamos a conectar. 101 00:08:53,230 --> 00:08:54,160 Quiénes somos. 102 00:08:54,170 --> 00:09:00,530 Ahí está le paso el Klei el Kleiman ahí vi que acabábamos de generar voy a hacer esto para tener más 103 00:09:00,530 --> 00:09:02,400 espacio me estaba molestando. 104 00:09:02,420 --> 00:09:08,520 Bueno sigamos adelante qué pasaba con nuestro código Arduino. 105 00:09:08,660 --> 00:09:16,670 Se acuerdan que sentíamos un call back que en definitiva decíamos hoy cuando llegue un dato quiero que 106 00:09:16,670 --> 00:09:18,500 se ejecute tal o cual cosa. 107 00:09:18,500 --> 00:09:24,140 Bueno acá pasa algo parecido y vamos a colocar estas dos líneas. 108 00:09:24,140 --> 00:09:30,440 Yo lo que les recomiendo es que como esta parte de acá del código esto de acá lo van a usar en cada 109 00:09:30,620 --> 00:09:35,600 proyecto web relacionado con M QTTF que tampoco se vuelvan locos. 110 00:09:35,600 --> 00:09:41,230 Si a esto se lo aprenden de memoria o no esto es el abecé del embrutece web. 111 00:09:41,230 --> 00:09:46,250 Bueno cada vez que tengan que hacer un proyecto lo dejan a esto como un ejemplo lo copian lo pegan y 112 00:09:46,250 --> 00:09:52,140 así arrancaran la mayoría de sus desarrollos web relacionados con QTTF. 113 00:09:52,210 --> 00:10:02,240 Bueno ahora sí vamos a poner un array a donde este en este array estamos pasando toda la configuración 114 00:10:02,390 --> 00:10:03,660 de la conexión. 115 00:10:03,710 --> 00:10:06,410 Mirá el mono lo voy a ordenar un poco porque se me desordenó 116 00:10:09,250 --> 00:10:19,420 y está en esta variable llamada opciones estoy poniendo distintos elementos y solamente a modo de comentario 117 00:10:19,750 --> 00:10:29,490 hacemos una conexión segura porque no nos dejarían conectarnos si no fuera así como ven eran TLS only 118 00:10:29,550 --> 00:10:36,530 o sea es a través de una conexión segura o cifrada o con certificados SSL que hay que hacerla. 119 00:10:36,900 --> 00:10:42,750 Entonces simplemente lo ponemos en Tru y eso nos va a permitir que la conexión sea exitosa nombre de 120 00:10:42,750 --> 00:10:46,770 usuario igual que como hicimos en Arduino clave. 121 00:10:46,860 --> 00:10:55,040 Bueno si hay una conexión exitosa qué vamos a disparar vamos a ir para allá vamos a ver una función 122 00:10:55,040 --> 00:10:59,000 que es la on Connect y que hacemos ante una falla. 123 00:10:59,000 --> 00:11:03,810 Bueno esto es casi un manual es el abecé de las conexiones. 124 00:11:03,850 --> 00:11:09,110 A mí me QTTF como les decía hace un rato bueno tenemos esto listo qué nos queda por hacer. 125 00:11:09,110 --> 00:11:18,470 Llegó el momento de conectarnos Client punto a punto conecta y entre paréntesis que le voy a pasar las 126 00:11:18,470 --> 00:11:29,330 opciones con las que me quiero conectar acá hasta darle paso esta configuración en esta función perfecta. 127 00:11:29,690 --> 00:11:31,040 Vamos un paso más. 128 00:11:33,440 --> 00:11:34,660 Qué dijimos. 129 00:11:34,900 --> 00:11:41,260 Luego de hacer este intento de conexión nadie nos garantiza que esto va a suceder en la configuración 130 00:11:41,260 --> 00:11:42,660 de deciamos. 131 00:11:42,670 --> 00:11:49,850 En el caso de tener éxito disparar esta función entonces vamos a crear una función en JavaScript. 132 00:11:49,870 --> 00:11:55,110 Las funciones se crean utilizando la palabra reservada function. 133 00:11:55,340 --> 00:11:59,010 Esta se va a llamar con Connect. 134 00:11:59,350 --> 00:12:00,850 Miren qué diferente de JavaScript. 135 00:12:00,850 --> 00:12:04,900 Las funciones también reciben parámetros a través de unos paréntesis. 136 00:12:04,900 --> 00:12:08,440 La misma cosa que en C++. 137 00:12:08,440 --> 00:12:10,930 Abro y cierro paréntesis. 138 00:12:10,930 --> 00:12:19,250 Tranquilamente podría poner Consol punto log para que aparezca por la consola como recién conexión exitosa. 139 00:12:19,810 --> 00:12:32,760 Para que sepamos de qué estamos ya en el mes QTTF y vamos cliente punto sus pero sus Grahim me voy a 140 00:12:32,760 --> 00:12:44,400 suscribir a un tópico vamos a Arduino y veamos que Arduino cuando mandaba mensajes hacía una publicación 141 00:12:44,610 --> 00:12:52,440 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 142 00:12:52,560 --> 00:13:03,100 aquí entonces me suscribo sãlida para que todo lo que diga la SP 32 me llegue acá perfecto. 143 00:13:03,130 --> 00:13:12,310 Bueno también habíamos dicho que en el caso de que exista una falla a la hora de conectarnos ya llamáramos 144 00:13:12,550 --> 00:13:16,620 a esa función du fail entonces le vamos a poner acá. 145 00:13:16,690 --> 00:13:21,330 No creo que sea el caso pero puede ser y no queremos que se trabe nada ni se rompa nada. 146 00:13:21,400 --> 00:13:29,200 Entonces esta función du fail que recibe el error que tuvo en ese momento el vamos a hacer algo simple 147 00:13:29,200 --> 00:13:36,910 simplemente imprimimos por consola el tipo de error por el cual no se pudo conectar. 148 00:13:36,910 --> 00:13:43,930 Bastante simple después voy a hacer otra función acabo de declararla que es una función que se va a 149 00:13:43,930 --> 00:13:51,340 disparar de manera automática si luego de que una conexión fuera exitosa esa conexión se pierde. 150 00:13:51,370 --> 00:13:54,130 Entonces qué quiero hacer si la conexión se pierde. 151 00:13:54,130 --> 00:14:01,080 Bueno simplemente voy a mostrar cuál fue el motivo por el cual se perdió esa conexión. 152 00:14:01,080 --> 00:14:05,220 El mensaje de error aclaró lo que estoy haciendo es sacarlo por consola. 153 00:14:05,220 --> 00:14:06,090 El mensaje de error. 154 00:14:06,360 --> 00:14:15,210 Entonces repasemos incluyamos las librerías preparábamos nuestro cliente Heydi preparamos con nuestro 155 00:14:15,210 --> 00:14:19,970 cliente le pasábamos los datos a donde se tenía que conectar etcétera. 156 00:14:20,250 --> 00:14:29,290 Luego preparábamos las opciones de la conexión y la efectuamos luego de esto teníamos una posibilidad 157 00:14:29,380 --> 00:14:31,260 que la conexión fuera exitosa. 158 00:14:31,300 --> 00:14:38,080 Esto es muy importante y después otro tipo de cosas que podían pasar ya menos importantes porque apostamos 159 00:14:38,080 --> 00:14:39,160 a que no van a pasar. 160 00:14:39,850 --> 00:14:45,340 Entonces qué es lo segundo más importante que tengo después de que realmente se produce una conexión 161 00:14:46,240 --> 00:14:50,410 a sabiendas de que si se produce me suscribo a un tópico. 162 00:14:50,410 --> 00:14:56,290 Pues bien de que nos llegue un mensaje por ese tópico entonces por eso yo le voy a poner acá la función 163 00:14:56,290 --> 00:15:01,300 porque creo que es algo importante no quiero tener la pérdida de trabajo total yo sé que estas dos funciones 164 00:15:01,930 --> 00:15:08,470 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 165 00:15:08,470 --> 00:15:17,000 se va a disparar cuando llegue un mensaje remarcó que en estos casos tengo que respetar el nombre acaso 166 00:15:17,020 --> 00:15:20,750 no puedo andar inventando nombres tengo que dejarla así tal cual como está. 167 00:15:20,890 --> 00:15:28,630 Esto si va a recibir aquí una variable que se va a llamar mesas y dentro de la función se va a guardar 168 00:15:28,630 --> 00:15:32,350 aquí adentro el mensaje que está arribando 169 00:15:34,980 --> 00:15:43,590 si un mensaje llega voy a hacer algo muy simple tan simple como imprimir por la consola de Google Crom 170 00:15:45,510 --> 00:15:54,630 vamos a cambiar esto que está en inglés un mensaje ha llegado y como ven yo de este lado lo que hago 171 00:15:54,690 --> 00:16:04,470 es estarle pegando el mensaje y lo que hago es mostrar el payload como string bueno grabo y tendríamos 172 00:16:04,470 --> 00:16:05,210 que probar esto. 173 00:16:06,750 --> 00:16:10,980 Bueno miren lo que sucede acá ya están dando pero yo lo voy a refrescar para arrancar de cero. 174 00:16:11,250 --> 00:16:17,820 Conexión exitosa y nos están llegando los mensajes que manda la SP 32. 175 00:16:17,820 --> 00:16:19,970 Miren llovida resetearlo SP 32. 176 00:16:19,980 --> 00:16:27,170 En este momento 3 2 1 reception como ven van a dejar de llegar los mensajes. 177 00:16:27,270 --> 00:16:28,660 Presiona el botón equivocado. 178 00:16:28,790 --> 00:16:29,820 Vamos que no hay recetas 179 00:16:35,120 --> 00:16:37,580 la idea es que la cuenta empiece de cero. 180 00:16:37,580 --> 00:16:38,920 Ahí está bien. 181 00:16:39,140 --> 00:16:40,590 La cuenta empezó de cero. 182 00:16:40,590 --> 00:16:42,110 Por qué su receta LSP. 183 00:16:43,280 --> 00:16:45,190 Miren qué rápido se conecta vía refrescará. 184 00:16:45,200 --> 00:16:49,250 Esto va a generar una nueva conexión a esta. 185 00:16:49,290 --> 00:16:55,550 Tenemos una nueva conexión por parte de nuestro cliente mejor que que nos muestra de este lado había 186 00:16:55,600 --> 00:17:05,950 conexiones veamos que tenemos aquí bueno conexiones por web socket dice que tenemos dos conexiones. 187 00:17:05,960 --> 00:17:10,000 Puede ser porque yo he refrescado muchas veces esto también. 188 00:17:10,110 --> 00:17:17,140 Eso puede generar momentaneamente más de una conexión o también por qué esta herramienta web socket. 189 00:17:17,150 --> 00:17:17,800 Uy. 190 00:17:17,990 --> 00:17:19,350 También me genera una conexión. 191 00:17:19,370 --> 00:17:20,500 Ahí se conecto. 192 00:17:20,570 --> 00:17:27,050 Eso también puede generar otra conexión aguarden en un momento quiero probar algo interesante miren 193 00:17:28,150 --> 00:17:34,350 yo por este lado voy a dejar conectado este sistema. 194 00:17:34,510 --> 00:17:41,890 A ver ahí está y por el otro lado me había venido acá aguarde en un momento voy a tratar de organizar 195 00:17:41,890 --> 00:17:50,140 esto para que se vea todo dentro de la pantalla chica acá y ahí está miren cómo en definitiva acá tengo 196 00:17:50,140 --> 00:17:56,360 dos clientes conectados ahí que va un poco más ordenado el asunto está. 197 00:17:56,610 --> 00:18:03,870 Miren estoy recibiendo datos porque este sistema está monitoreando lo que llega está suscripto en definitiva 198 00:18:04,140 --> 00:18:09,930 a nuestro dispositivo y de este lado nuestra propia aplicación web también se ha suscrito y está recibiendo 199 00:18:09,930 --> 00:18:10,730 valores. 200 00:18:10,970 --> 00:18:17,190 O sea nuestra S.P. envía datos al servidor y el servidor automáticamente se encarga de mandarnos a nuestra 201 00:18:17,190 --> 00:18:23,680 aplicación web propia y aquí a la aplicación que corre en MQ Teté. 202 00:18:23,970 --> 00:18:28,720 Ha sido un éxito esta clase porque ya estamos recibiendo valores. 203 00:18:28,740 --> 00:18:32,310 Vamos un poco más adelante en la siguiente clase nos vemos.