1 00:00:00,710 --> 00:00:07,620 Bueno bienvenidos a una clase más y vamos a avanzar ahora si ya más contundentemente con nuestra aplicación 2 00:00:07,620 --> 00:00:08,380 web. 3 00:00:08,490 --> 00:00:16,750 Se acuerdan aca esta etiqueta que iba a representar el valor a mostrar en pantalla. 4 00:00:16,780 --> 00:00:22,380 Bueno ya podemos ir borrando etiquetas display la vamos a dejar vacía lista para recibir los valores 5 00:00:22,710 --> 00:00:24,660 que van a ir llegando por aquí. 6 00:00:24,930 --> 00:00:35,580 Copiar esta etiqueta y copiar otra arriba y esta le vamos a poner de nombre status y la idea va a ser 7 00:00:35,580 --> 00:00:42,210 mostrar aquí desconectaba el estado de la aplicación con respecto al servidor. 8 00:00:42,390 --> 00:00:48,010 Queremos cambiar esto por conectado cuando la conexión sea exitosa. 9 00:00:48,060 --> 00:00:58,310 Bueno veamos otro detalle más abajo en vez de crear un DIV voy a poner lo siguiente y escribir larga 10 00:00:58,400 --> 00:00:59,230 UTE. 11 00:00:59,300 --> 00:01:02,870 Ahí está ella me propone la etiqueta Button. 12 00:01:02,870 --> 00:01:12,780 Voy a hacer click o presionar Enter y se me completa lo que es un botón por defecto voy a grabar voy 13 00:01:12,850 --> 00:01:22,760 a venirme acá a la aplicación actualizo y casi no se ve porque es el botón no tiene ningún texto así 14 00:01:22,760 --> 00:01:25,160 que le vamos a escribir algo. 15 00:01:25,170 --> 00:01:27,660 Acá vamos a encender. 16 00:01:28,280 --> 00:01:33,410 No necesito ningún nombre eso lo voy a sacar. 17 00:01:33,410 --> 00:01:35,560 De momento grabo. 18 00:01:35,720 --> 00:01:40,090 Vamos a ver cómo luce esto va a estar mejor. 19 00:01:40,100 --> 00:01:42,860 Ya tiene forma de botón. 20 00:01:42,860 --> 00:01:44,760 Voy a separar un poco las cosas. 21 00:01:44,860 --> 00:01:55,850 Esta etiqueta va a generar un espacio o un o una línea en blanco digamos si esto acarrea el efecto que 22 00:01:55,850 --> 00:01:56,280 busco. 23 00:01:56,280 --> 00:02:07,890 Si está para que se separe un poco entonces puede copiar esto copio y pego y lo vamos a poner a pagar. 24 00:02:07,930 --> 00:02:12,840 Bueno no está perfecto. 25 00:02:12,840 --> 00:02:18,430 Me gustaría acá poner otro ver para que se separen más aún a ver si logro lo que quiero. 26 00:02:18,480 --> 00:02:29,010 Ahí está bueno bajemos un poco y vamos a tratar de operar sobre estas etiquetas y hacer que cambien 27 00:02:29,010 --> 00:02:32,730 de valor de acuerdo a las cosas que vayan pasando. 28 00:02:32,730 --> 00:02:37,770 Entonces lo primero que quiero hacer es que esta etiqueta diga desconectado. 29 00:02:37,800 --> 00:02:41,060 En el caso de que nos desconectamos y cambie a conectado. 30 00:02:41,070 --> 00:02:50,190 En el caso de que nos conectemos cómo vamos a hacer esto no vamos a valer de la librería jQuery que 31 00:02:50,190 --> 00:02:53,120 nos ayuda a hacer estas operaciones. 32 00:02:53,190 --> 00:03:02,250 Entonces vamos a esta función nosotros sabemos que esta función se dispara cuando la conexión es exitosa 33 00:03:02,260 --> 00:03:10,560 de hecho lo escribíamos por la consola entonces podemos hacer acá lo siguiente escribir signo de pesos 34 00:03:11,550 --> 00:03:19,500 y entre paréntesis y entre comillas y poniendo el signo de número o numeral voy a pasar el Heydi de 35 00:03:19,500 --> 00:03:21,260 la etiqueta que quiero modificar. 36 00:03:21,270 --> 00:03:29,080 Cómo se llamaba la etiqueta que quiero modificar ahora se llamaba status bajo esto que estoy haciendo 37 00:03:29,080 --> 00:03:38,140 ahora es utilizar la librería J QR entonces status disto todo esto que tengo acá hace referencia a esa 38 00:03:38,140 --> 00:03:39,290 etiqueta. 39 00:03:39,430 --> 00:03:48,280 Luego lo que viene a decir es utilizar el método HTML y entre paréntesis le voy a pasar qué quiero que 40 00:03:48,280 --> 00:03:54,600 diga ahora conexión establecida. 41 00:03:54,760 --> 00:04:04,450 Simple bueno entonces cuando se conecte el sistema se va a reemplazar lo que dice ahora de desconectado 42 00:04:04,510 --> 00:04:06,320 por conexión exitosa. 43 00:04:06,340 --> 00:04:08,950 Veamos si esto es cierto lleva grabado 44 00:04:11,430 --> 00:04:18,760 vengo aquí refresco ven conexión establecida no bien se realizó. 45 00:04:18,760 --> 00:04:21,120 Vamos de nuevo listo. 46 00:04:21,120 --> 00:04:22,650 Eso ya está funcionando. 47 00:04:23,220 --> 00:04:30,840 Bueno hacer entonces de que los datos se refresquen en la etiqueta display no va a ser algo para nada 48 00:04:30,840 --> 00:04:33,180 difícil habiendo visto como hacemos esto. 49 00:04:33,180 --> 00:04:39,440 Entonces lo que puedo hacer para hacer esto más eficiente es copiar esta línea. 50 00:04:39,450 --> 00:04:46,130 Quizás sé que esta línea sirve para referenciar una etiqueta y modificarla y me puedo empezar a grabar 51 00:04:46,130 --> 00:04:48,090 Amela en la mente. 52 00:04:48,090 --> 00:04:56,760 Voy a agarrar acá cuando un mensaje llega aquí abajo además de mostrarlo por la consola no voy a sacar 53 00:04:56,760 --> 00:05:06,470 eso yo quiero que le etiqueta como se llamaba la etiqueta display o no quiero que la etiqueta display 54 00:05:06,860 --> 00:05:14,660 cambie su contenido y el contenido sea esto el mensaje vamos 55 00:05:17,630 --> 00:05:28,750 a esta grabemos y veamos qué efecto tiene esto vamos a actualizar aquí para que se conecte se conecta. 56 00:05:29,220 --> 00:05:36,700 Vamos a esperar un rato y vemos que no sucede nada porque yo lo estuve viendo no se preocupen. 57 00:05:36,840 --> 00:05:44,600 Miren esta parte le hice bien acabada donde dice cuando el mensaje arrive arribe al etiqueta Display. 58 00:05:44,630 --> 00:05:51,740 Le voy a mostrar o le voy a cambiar el contenido por el mensaje pero por qué no funciona porque ustedes 59 00:05:51,740 --> 00:05:58,130 ya se dieron cuenta seguro pero no me han podido avisar que yo acá no puse la s. 60 00:05:58,240 --> 00:06:01,100 Entonces vamos a volver. 61 00:06:01,100 --> 00:06:03,230 Segundo intento no pasa nada. 62 00:06:03,230 --> 00:06:06,560 Conexión establecida y tenemos los valores. 63 00:06:06,560 --> 00:06:08,440 Miren como van cambiando. 64 00:06:08,660 --> 00:06:14,660 Me gustaría separar esto para que quede un poquito mejor desconectado. 65 00:06:14,850 --> 00:06:26,650 Voy a generar ahí un espacio bebamos y lo tomas a ver está perfecto. 66 00:06:26,690 --> 00:06:31,730 Bueno la verdad que estoy muy contento de ver cómo llegan los valores y los estamos pudiendo mostrar. 67 00:06:31,730 --> 00:06:38,960 Ahora ya para hacer esto de lujo a mi me gustaría encender o apagar a voluntad desde nuestra aplicación 68 00:06:39,410 --> 00:06:47,870 el LED de nuestra placa entonces acompáñame en la próxima clase a completar esta tarea. 69 00:06:47,870 --> 00:06:48,530 Muchas gracias.