El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Angular 2 práctico: Sitio de consumo de videos

Insertar Video HTML5

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En esta lección, y con ayuda de la API que ofrece HTML5, aprenderemos a crear un reproductor básico de video para desplegar información de un video y usaremos datos dinámicos para mostrar diferentes contenidos.
09:21

Transcripción

En esta lección vamos a aprender a incluir información dinámicamente en un componente de Angular 2. Yo acá tengo una aplicación en la que tengo dos enlaces y estos enlaces me están enviando información dinámica utilizando el URL. Al hacer clic sobre uno de ellos, vamos a ver que me está enviando a un componente llamado "video-player" y estoy enviando un dato, en este caso "123", que es una variable que estamos capturando dentro de este documento. Ahora, vamos a utilizar este dato para cargar información externa desde un servicio en PHP que nos va a desplegar información dentro de nuestra aplicación. Vamos a entrar a código, y yo acá estoy utilizando el componente "video-player" y vamos a hacer unas modificaciones para poder invocar información. Vamos a revisar un poco el código y vemos que estoy utilizando acá algunos módulos adicionales de Angular principalmente para obtener la información del "id" que esté llegando desde el URL. Ahora, sabiendo que tenemos esa información yo voy a crear un nuevo método que lo voy a nombrar como "obtenerInfoVideo". Estoy llamándolo específicamente en este punto porque debo esperar a que se inicialice el componente y que el componente tenga acceso a la información que viene desde el URL. Entonces, una vez que tenga esa información yo puedo llamar este método y una vez que lo llamamos, vamos a crearlo acá, vamos a decir que la información que devuelva sea "void" porque no va a devolver nada y vamos entonces a crear acá una petición. En este caso, vamos a utilizar "this.http", que es un módulo que me permite invocar datos externos. Yo este módulo ya lo he importado previamente, en esta línea, y también lo he inicializado en esta otra. Ahora, sabiendo que tenemos acceso a este módulo, voy a invocar un método que tiene dentro de él que se llama "request" que me permite a mí hacer invocaciones a archivos externos. En este caso, vamos a llamar un servicio que yo tengo funcionando en este momento dentro de un servidor Apache, y es un archivo PHP que me está devolviendo un resultado dentro de una base de datos. Ahora, cuando yo lo llamo directamente utilizando este URL, no va a mostrar ninguna información porque para desplegarme información de un elemento en particular necesita el identificador. En este caso, estamos utilizando una variable llamada "id" y vamos a asignarle el valor "123" que yo sé que existe un elemento con ese "id" y nos está mostrando acá la información. Entonces, este servicio necesita un parámetro llamado "id". Vamos a copiar este enlace. Vemos que justamente este "id" es el que se está enviando acá. Así que nosotros vamos a recuperar la información que viene de URL y vamos a solicitar la información dentro del servidor Apache enviándole el parámetro que necesitamos. Volvemos al código y vamos a hacer el "request" justamente a esa dirección. Tenemos acá en este caso, el "localhost" que es un servidor local pero recuerda que cuando esté trabajando en tu aplicación debes incluir la dirección correcta. En este caso, estamos utilizando el "id=123" pero necesitamos que la información sea dinámica. Así que lo voy a borrar y voy a agregar una variable. La variable que voy a agregar, en este caso va a ser "id". "id" es la información que nosotros estamos obteniendo desde el URL. Así que, en este caso, va a ser "123" pero va a ser información dinámica y si la ruta dice 650 nos va a enviar directamente el "id=650". Una vez que tenemos esto vamos a generar una promesa. En este caso, un "subscribe" que nos va a permitir ejecutar código una vez que tengamos una respuesta desde el código PHP. Así que, cuando tengamos esto vamos a recuperar un dato que le vamos a poner "Res" que va a ser de tipo "Response". Listo, y vamos a hacer que esto ejecute una función en cuanto tengamos los datos y básicamente lo que vamos a hacer es que esto va a asignar el valor que recibimos desde el servicio PHP y lo va a asignar a una variable interna. En este caso, voy a crear una variable que se llama “videoInfo” que ya tengo acá previamente inicializada y estoy utilizando el tipo especial llamado "any". En TypeScript cuando nosotros utilizamos un tipo llamado "any" significa que estamos usando un comodín, porque no sabemos exactamente qué tipo de información vamos a utilizar. Sabiendo eso, vamos a definir que “videoInfo” sea igual a "res.json". O sea el resultado que obtenemos en formato JSON. Solamente para ahorrarnos algo de tiempo yo voy a aprovechar y voy a asignar que este sea un valor cero. ¿Por qué estoy haciendo esto? Porque yo conozco el formato que vamos a recibir y si lo revisamos, vemos que es un arreglo y yo necesito el primer valor. El primer valor dentro de un arreglo tiene el numeral cero, así que, estoy obteniendo directamente este valor. Eso lo estoy haciendo simplemente para acelerar el proceso pero esto no es parte del proceso estándar para obtener los datos desde un servidor, simplemente porque conozco el formato que vamos a recibir. Sabiendo eso, tenemos “videoInfo”. Así que vamos a ir a la plantilla. Revisemos una última vez nuestro código y vamos a ver que ya está funcionando, sin embargo, todavía no tiene ningún efecto. Vamos a la plantilla, y vamos a asignarle algunos valores. La plantilla de este componente se llama "video-player.component.html" y ya tiene algunos datos acá, tengo una etiqueta “video”, tengo algún texto y voy a empezarle a asignar valores. Ahora, los valores que voy a asignar para acelerar un poco el proceso ya los tengo copiados, en vez de este "LOREM IPSUM" y de este "p" yo voy a utilizar acá el título y la descripción. Los valores que vienen acá, vienen de “videoInfo” que es el objeto que acabo de recuperar a través de la petición por "http" y la propiedad “título” y “descripción” son valores que yo sé que contiene el arreglo que estamos invocando. Vamos a revisar el resultado, y vemos que tenemos un error. Está sucediendo acá un error y realmente no es que el código está malo. Vamos a revisar, de hecho, nuestro código y cuando entramos a la parte que acabamos de crear vemos que tenemos un error y justamente nos dice que la propiedad "título" no está funcionando. Sin embargo, yo sé que "título” está acá y que llega correctamente. El error que está sucediendo es que nosotros estamos invocando antes de tener acceso a los datos. Recordemos que en este punto nosotros estamos trabajando en una aplicación asincrónica. Entonces, cuando nosotros mostramos el HTML de la plantilla, todavía no tenemos acceso a los valores que nos van a llegar del PHP y no podemos mostrar ese valor. ¿Por qué? Nos va a dar un error, aún no está disponible. ¿Cómo solucionamos eso? Fácil. Vamos a utilizar una directiva llamada "ngIf". Vamos a hacer que todo este bloque, yo ya tenía un "div" que contenía todos los elementos de esta plantilla. Voy a hacer que este "div" no se muestre hasta que tengamos acceso al objeto donde viene la información. Así vamos a evitar tener algún error porque no se va a mostrar la información, no vamos a invocar ninguna variable indefinida dentro de nuestra plantilla, y vamos a mostrar la información correctamente, únicamente cuando tenemos los datos correctos. Ahora, me falta también una parte que es el video, que tenemos acá, y tenemos una etiqueta de "video" El video lo vamos a controlar utilizando una etiqueta llamada "source". Quiero que notes que estoy incluyendo esto dentro la etiqueta “video”, esto es para darle mejor soporte. Vamos a agregar la propiedad "src" y acá vamos a incluir la dirección en la que se encuentra nuestro video. En mi caso yo sé que tengo este video dentro de un servidor, así que voy a poner la dirección correspondiente al servidor y voy a ponerle también información dinámica. ¿Qué información voy a poner? Fácil, vamos a poner acá la información de “videoInfo” y en este caso estamos utilizando un parámetro que se va a llamar "video_src" que es información que nos viene desde la base de datos. Ahora, ya tenemos definido la ruta del video. Vamos a revisar nuestra aplicación y ya estamos cargando el video dinámicamente. Vamos a entrar a la lista de videos, entramos a nuestro video y acá se está cargando nuestro video correctamente con información dinámica.

Angular 2 práctico: Sitio de consumo de videos

Aprende a crear un sitio web de consumo de vídeos con Angular 2, desarrollando el back-end y conectando con el servidor local, terminando por la personalización del reproductor.

2:41 horas (26 Videos)
Actualmente no hay comentarios.
 
Formadores:
Fecha de publicación:12/04/2017
Duración:2:41 horas (26 Videos)

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.