¿Pues a ver si lo adivinas? … hay que volver a depurar; es lógico, no es que las cosas estén mal hechas, los programadores nos pasamos más tiempo depurando …
que escribiendo código. Así que en éste video vamos a ver todo el proceso que hemos llevado hasta ahora, pues aún en esa conexión del “FrontEnd” con el “BackEnd”
nos quedan cosas que pulir, que hay que dejar más orientadas para el funcionamiento ya definitivo; y vamos a verlo en éste video.
Continuamos con el curso de extensiones para Chrome. Hoy vamos hacer el “settings HTML” y el “settings JS”; que básicamente, nos va a servir para
que la persona pueda elegir cuál es el canal que quiere le salga aquí, sin tener que estar escribiendo código. Por lo general las personas no saben programar;
entonces, nos vamos aquí y hacemos primero “settings HTML”… lo abrimos y aquí lo tenemos; lo voy a explicar bien, pero ya está. Tenemos un HTML normal
añadimos JQuery y un “Style”. Luego tenemos un “script” que es el “settings JS” que es ésta “script”, que luego la vamos a terminar y el “Body”, como ven
no tiene mucha cosa, sólo es un “Input” le vamos a dar la ID como “youtubeLink”; para el “title” coloca (por Ej.): “Pon el link del canal o de la Web del video”
como lo quieras decir… le ponemos un “placeholder” para que la persona sepa cómo se escribe y un “input” de tipo “button”, que sea un “submit” …
como vemos aquí en el “value” será el botón que nos va a servir para guardar … estos son los estilos visuales que aquí no es importante … lo importante es esto
¿qué tenemos? … una “función anónima” de JavaScript y la variable “data”; una función “getSavedChannel”. Tomamos el canal … antes vamos hacer una cosa,
¿por qué no se ve? … no la he guardado, pero igual debería verse… se supone que está bien todo, no sé porque motivo nos los abre así… esto es muy extraño.
no hay código fuente, ni nada… a ver un momento, voy hacer una cosa, voy habilitar mi última extensión, porque los cambios han podido afectar el código.
En la mía ya está hecha. Tengo ya esto, con el botón de “save” y el “placeholder” de cuál es el canal; les voy a explicar mejor con esto…
básicamente ¿Qué es esto? … el “getSavedChannel” busca en el “localStorage” cuál el canal que tenemos guardado y va a cambiar aquí en el “placeholder”…
este “input” lo va a cambiar por el canal guardado; así aquí nos sale el link que tenemos actualmente añadido, y luego hacemos un “setTimeout” de un segundo
porque si la persona cambia el canal, le sale el “nuevo canal”; luego ésta función básicamente, lo que va hacer es comprobar si está bien la URL que ha puesto.
Aquí si es menor a 28, es lo mínimo con el link de YouTube para un canal; le hacemos un “return” de “Invalid URL” que le mostrará en rojo ya lo veremos porque.
Le saldrá “Invalid URL”; es más, si le doy a la “s”… ¿ves? nos sale “Invalid URL” y pues no podemos usarla. Luego en data.indexOf(“videos”)
si no hay en ningún momento videos, entonces hacemos que borre “featured” (a ver un momento) y lo cambie por nada, y le añada “/videos”.
Eso por si la persona le ha puesto el menú de inicio, en vez de videos; vamos a quitar esto, y a poner “/videos”, básicamente para asegurarnos
que siempre acabemos en ésta página. Luego, si no hay el link de YouTube, es una URL invalida y si la última palabra (luego después de ejecutar todo eso)
no es videos, también es invalida la URL. Aquí tenemos un “return true”…. ¿esto que va hacer exactamente? Va hacer “var correct = checkParameters(data)”
hacemos (“#checkResponse”).remove() … ahora mismo, no recuerdo que hace… continuamos luego averiguo en otro tutorial … luego data = $(“#yotutubeLink”).val()
y “var correct = checkParameters(data)” … como les estaba explicando si está mal va a retornar “Invalid URL”, si está bien va a retornar “true”
entonces hacemos “if (corrrect == true)”, esto es un poco absurdo porque podríamos hacer así… que sería lo mismo ahora que lo pienso. Hacemos que guarde
La nueva dirección y en el “body” añada centrado, un “span” con el “checkResponse” … esto lo que hace es, por ejemplo, el “checkRespond” lo que hace es borrar
el “Invalid URL”. Hacemos dos cambios de línea; hacemos guardado correctamente (en negrita). Cerramos el “span”. Hacemos un “fadeOut”
se pone transparente desaparece poco a poco hasta desaparecer en 3,5 segundos; sino es correcto, va hacer “Invalid URL” o lo que sea, porque podemos añadir
más valores, lo que va hacer es añadir en el “body” lo mismo pero, en color rojo, y además, usando la variable que nos ha retornado: si estaba bien era “true”
pero si está mal, podremos hacer varios errores pero en éste caso será “Invalid URL”. Y así básicamente, es como hacemos esto. Si ahora volviera a mi canal…
si yo pusiera aquí, por ejemplo, podemos poner esto para probar, no hace nada… no se puede, “lo sentimos mucho Señor”, pero no. Pero si pongo
incluso en el “inicio”… esto. Dice guardado correctamente y desaparece poco a poco; y ahora si yo viniera aquí, bueno ahora mismo porque no se ha ejecutado bien
aquí sí, ¿ves? … vuelve hacer mi canal… ahora me voy a “jostajotavm”, esto es la mía que ya está acabada. Esta no sé por qué da error al abrirse el “settings”
luego lo solucionaré. Si volvemos al de “jotajotavm” ¿ves?... también lo podemos coger. En los ajustes lo colocamos y cuando “recarguemos”
Ya sale el de “jotajotavm” y así con cualquiera. Podríamos probar con cualquier cosa… “HolaSoyGerman”. No quiero aquí copyright y si pongo “HolaSoyGerman”
también se guarda y ahora ves que nos sale “HolaSoyGerman”, su último video. Y eso es básicamente lo que hemos conseguido con éste “script”, solamente nos falta
Hacer que se muestre bien el “settings”, que eso ya explicaré en el siguiente video; ahora voy a intentar averiguar por qué. Lo más importante
hacer en el “background.js” nos envíe una notificación, cuando hay un nuevo video, eso va hacer bastante fácil en el siguiente video les explico cómo hacerlo.
Hasta luego.
