Pues ahora si, tenemos toda la parte del “backend” ya terminada y depurada. Por otro lado anteriormente teníamos la parte del Pop-up terminado.
Nos queda que se comuniquen el “frontend” con el “backend”, así que en este vídeo vamos a ver cómo se establece la comunicación
entre ambos desarrollos, que hemos estado haciendo durante el curso ¡Adelante!
Vale, continuamos… Vamos a hacer la script “getVideos.js”
¿Vale? Cómo recordais, hace tiempo en el Pop-up le añadimos ésta script: “getVideos.js” Esto se va a ejecutar al abrir el Pop-up y entonces…
Cogemos “getVideos.js” ¿Vale? Aquí ya la tengo escrita y básicamente voy a hacer. Os lo voy a explicar bien; lo que hace es esto, hacemos una función VideoLoader,
que nos tienen que pasar un... la variable “name” y la variable “url” y escribe en el archivo un “iframe” con la clase “link” y el “source” es la variable “url”
Eh… “Frameborder” 0, le poneis un 0, porque sino me parece que salen unos bordes ehm.. y “allowfullscreen” para.. bueno, eso..
La verdad es que, cómo el “iframe”, no me acordaba cómo se escribía, lo busqué en internet y me salía así. Supongo, bueno.. para habilitar la pantalla completa
No sé, bueno… “background”, bueno… “bg” pero lo vamos a usar como “background”, básicamente esto es el objeto, debe… la script esta, ósea,
está script que se ejecutaba… Uy, con ésto lo que estamos haciendo es coger por así decirlo referencias a esta script, porque recordemos que está ahora
todo el rato ejecutándose, luego el “background url” . Cogemos “bg” que es el objeto del “background” y ponemos la variable embedLink.
Que si os acordais...hay ¿Vale? No había guardado lo que había escrito, no pasa nada eso se arregla en un momento; Por que lo puse aquí… bueno, pues
ahora lo vuelvo a escribir, pero por ahora.. mmm… bueno da igual, voy a continuar bueno, si recordais; ésta variable es el, ósea, era parseando la web
, ósea, haciendo lo de los “index” y todo eso, conseguíamos saber cuál era el link para meterlo dentro del “iframe” y luego el vídeo
, es un nuevo “videoLoader”, lo usamos cómo si fuera una clase y le pasamos el “background” videoname, que también es una variable que está guardada en el
background, se me ha abierto sin querer el Sony Vegas, y le pasamos el background url que hemos guardado aquí. ¿Vale?
¿Vale? Entonces va a ejecutarlo y va a hacer el document.write y lo va a escrbir. Luego, función Jquery, una tupla ¿No? Una función anónima.
Eh.. cuando cliqueemos el link, veis, si lo recordais es la clase “link” y se lo hemos puesto al “iframe”, cuando cliqueemos, eh.. no sé si habeis visto cómo es
exactamente un “iframe” de YouTube, pero cuando le cliqueas reproduce el vídeo pero nosotros no queremos que nos reproduzca el vídeo porque sino
sería muy molesto porque al salirse perderíamos el vídeo y nosotros lo que queremos es que al abrir una ventana, que podamos verlo libremente.
Entonces, hacemos un “preventDefault” para que no ejecute el click en ese objeto y luego hacemos un “window.open” del background url,
que como recordais lo hemos guardado aquí, en modo Pop-up y le damos estas dimensiones, y luego el settings.Img que en el archivo Pop-up.html,
si recordais este botoncito de aquí, en esta animación y lo que vamos a hacer es, bueno el preventDefault lo eh copiado antes esto
y hacemos un “window.open” tambien, de un archivo que haremos ahora, que se hará más tarde, un settings.html que será para configurar
que será para configurar qué canal queremos que la extensión, que canal queremos que éste comprobando los vídeos y nos avise cuando suben nuevo vídeo y todo.
Pop-up y luego witdh le hacemos 800 y 500 ¿Vale? ¿Si? ¿Todo bien? Lo voy a copiar, a bueno y esto de aquí sino recuerdo mal era para ejecutar una notificación
que luego te avisará cuando hubiera nuevo vídeo, pero por ahora sólo es un apunte que no vamos a usar ¿Vale?
Hacemos esto, esto fuera, no nos hace falta ahora mismo y tenemos ya esto. Entonces ahora, a ver… Muy bien, nuestro primer error,
es cómo el chiste de que te vuelves loco si compila a la primera, pero no, nunca pasa. Mmm.. creo una extensión, undefined… pordría ser…
¡Hay! Claro, cómo antes no hemos puesto el background, a ver, a ver… programación, pero la variable no existe entonces, menos mal que ya tengo todo acabado,
aunque me parece que sin querer lo borré mal y veis, eso de que te avise cuando hay vídeo nuevo no lo acabé de hacer bien pero …
en el primer vídeo sí que estaba bien hecho pero me parece que sin querer modifiqué el código y lo hice mal, borré algo
pero bueno, ahora lo volveré a hacer, aquí… eh ¿Vale? Vamos a copiar todo esto y lo vamos a poner en nuestro background para que las variables existan ¿No?
Porque sino vamos a tener un problema.. pa, pa, pam, a ver… que es lo que pasa… vamos a volver a recargarla. ¿Vale? ¡Madre mía!
¿Cuál es el vídeo? ¿Vale? Éste, entonces.. ahora me direis, bueno si pero sólo tu canal, aun no esta hecho el settings; Véis, no existe pero…
eh… creo que, creo que… tampoco me quiero arriesgar pero back.. veis tenemos, si dais click aquí podeis inspeccionar el Pop-up
y podeis acceder, por ejemplo, al objeto de background, que es ésta variable que tenemos aquí.. ¿Vale? Y ahora por ejemplo, yo podría hacer esto ¿Vale?
Si miramos el background, es “localStorage.youtubechannel” Entonces, si hacemos esto… mmm, uy… eh..
no sé si exactamente nos va a acceder pero a ver, vamos a intentarlo, esperate voy a copiar esto y voy a cerrar de momento ¿Vale? Por ejemplo,
para asegurarnos de que funciona, sino ahora lo haremos con el settings.html, a ver…
¿Vale? Aquí tenemos todos estos vídeos ¿No? Pues, podríamos hacer.. pam.. youtubechannel y probar hacer esto, a ver… ¿Qué nos dice? ¡Hay claro! Tiene que ser
un string obviamente, wepa… joder, a ver ¿Qué pasa ahora?
Esto, se me había ido sin querer ¿Vale? LocarStorage y ahora, si ejecutamos ésto, mmmm, mmm, ¿Vale? Me parece que cada aplicación tiene su propio localStorage
Así que, a ver. Me parece que vamos a tener que esperar a hacer el settings para poder modificar el vídeo, pero quería que vierais ahora mismo
¿Vale? Veis, ahora sí. Eh cambiado y ya tenemos el canal de jotajoravm, y así podrías probarlo con cualquier canal, seguro que funciona… ¿Vale?
Cómo os vuelvo a decir, si os fijas siempre será lo mismo; Esto es muy útil porque usando está técnica podreis parsear cualquier cosa, ósea, cualquier página web
Pensar que es bastante vulnerable en ese sentido, de que cualquier información se puede sacar, si sabes como hacerlo y la mejor manera que se me ocurre a mí es esa
, la de los dos índices: El principio de lo que quieres coger y el final y entre en medio es tú informacion, ¿Veis? También es a class, no sé que, no sé cuantos
siempre es lo mismo, luego ya si quisieras tener todos, pues bueno eso ya sería un poco mas… daría bastante más trabajo,
sobretodo por el problema de cargar más, porque como vemos no se carga, ósea no es que esté cargado y oculto sino que en el momento que cliquea
hace por así decirlo, seguramente hará un xml http request asíncrono y lo cargará, entonces lo de ver todos los vídeos del canal; Pues eso sería más complicado
pero el último vídeo, es super fácil de ver, es el más facil justamente de encontrar.
