Angular 2 práctico: Sitio de consumo de videos

Mostrar listas de videos

¡Prueba gratis durante 10 días

nuestros 1240 cursos !

Prueba gratis Mostrar modalidades de suscripción
Una vez que tengamos acceso a los datos, utilizaremos la directiva ng For para iterar sobre los resultados de la API y los convertiremos en una lista de HTML para desplegarse gráficamente en un documento web.
08:52

Transcripción

Vamos, en esta lección, a utilizar información que se encuentra dentro de un servicio externo, en este caso, en PHP, y la vamos a desplegar gráficamente dentro de una aplicación Angular. Acá yo tengo un componente en el que estoy trabajando, una conexión a un servicio externo, en este caso PHP, que me devuelve una lista de videos. En este punto, lo que estoy haciendo es que estoy recogiendo la información y la estoy mostrando dentro de la consola. Vamos a ver cuál es el resultado actual de esta aplicación. Vemos que en este momento solo me muestra un texto. Pero si reviso dentro de "Inspeccionar", voy a tener dentro de la consola la información que me está llegando desde un archivo externo. Vemos que la infomación es, básicamente, un arreglo que tiene dos objetos, y cada uno de estos objetos tiene una serie de propiedades, como por ejemplo: título, imagen, descripción... La información que llega se encuentra dentro de un servicio PHP y es esta que te estoy mostrando ahora. Es información completamente pura, es una información que nada más es texto, y nosotros la estamos desplegando en nuestra aplicación. La información llega desde una base de datos donde vemos que también se repiten las mismas propiedades, como: título, descripción, video, imagen... Nota que también tienen exactamente los mismos nombres porque los estamos extrayendo desde la base de datos. La forma en que los vamos a recuperar también es utilizando los mismos nombres. Vamos a desplegar la información que ahora aparece en consola, pero la vamos a desplegar gráficamente en nuestra aplicación. Así que vamos a comenzar a procesar nuestro componente. En este caso, yo estoy trabajando dentro de mi aplicación, un componente llamado "lista-de-videos", y voy a agregar algunos elementos adicionales. Por ejemplo, voy a inicializar una variable que se va a llamar "videos". Esta variable va a ser de tipo "array" y, dentro de ese arreglo, vamos a incluir objetos. Recordemos que dentro de TypeScript debemos definir el tipo de dato que va a tener toda variable. Así que, en este caso, estoy definiendo qué es lo que va a contener la variable "videos". También vamos a utilizar esta variable "videos" y vamos a ir al punto donde inicializamos nuestra aplicación y solamente para estar seguros de que no vamos a tener ningún problema de información o algún conflicto, vamos a poner que "this.videos"... Nota que vamos a utilizar "this", en este caso, para acceder a la variable que se encuentra dentro de nuestra clase. Y vamos a decir que "this.video" es igual a un arreglo vacío. Así vaciamos cualquier información que pueda quedar almacenada. Vamos a poner "videos"... Tenía un error dentro del código. Afortunadamente el sistema me muestra cuando tenga algún error en mis variables. Y también vamos a decir que "this.videos" es igual a la información que nosotros estamos recopilando desde el servicio en PHP, que es la misma información que estaba mostrando hace unos segundos en consola. Listo. Ahora tenemos la información y va a estar disponible dentro de nuestra aplicación. El siguiente paso es desplegarla gráficamente. Para hacerlo, vamos a pasar a la capa de presentación, en este caso, el archivo "lista-de-videos.component.html". Por ahora, está mostrando nada más un valor que dice "lista-de-videos works!", que es el valor por defecto. Vamos a borrarlo y vamos a comenzar a incluir código en HTML. En este caso, yo voy a incluir un "div" donde ya tengo definidas algunas clases de CSS. Y este "div" va a contener la información de nuestra lista. También voy a agregar otro "div" más. Y este "div" es el que yo voy a utilizar para iterar sobre los elementos de la lista. En este caso, sobre los valores que se encuentran dentro de la variable "videos". ¿Cómo voy a hacer eso? Lo voy a hacer utilizando una directiva de Angular que se llama "*ngFor"... Quiero que notes que acabo de incluir un asterisco. Esta es la sintaxis que tiene Angular 2. En este caso, voy a definir cuáles van a ser los parámetros de esta iteración. Vamos a crear una variable que va a ser una instancia y se va a llamar "video". Esta variable va a existir únicamente dentro de este "div". Y vamos a decir que "video" exista por cada uno de los elementos que contenga la variable "videos". La variable "videos" es la que se encuentra dentro de nuestro componente y, una vez más, es la que tiene los elementos de la lista que nos llega de PHP. Listo. Ahora, toda la información que se encuentre dentro de "videos" se va a mostrar acá y vamos a mostrar cada uno de los ítems que están dentro de la lista de manera individual. Yo ya tengo un código preparado para que podamos ver la información. Y vamos a ver qué es lo que contiene este código. Vemos que estamos utilizando, en este punto, llaves, que es la forma en que nosotros desplegamos los valores que se encuentran dentro de Angular. En este caso, yo estoy llamando un objeto llamado "video" con una propiedad "título". Estos son los mismos nombres que estamos recibiendo desde PHP. Estos valores también coinciden exactamente en los nombres con los que aparecen en la base de datos. Si quieres llamar cualquier otro valor que, por ejemplo, no aparezca acá o que agregues dentro de tu base de datos, por ejemplo si agregas una celda más en tu base de datos que se llame "perro", simplemente tienes que poner "video.perro" y vamos a obtener la información. Dicho eso, vamos a guardar y vamos a ver el resultado. Y ya tenemos acá el título del video y la descripción tal como aparecen en la base de datos. Vemos que tenemos "Mi video 1" y "Mi video 2" con una descripción que en este punto estamos utilizando un texto de relleno. Es la información que nos llega de PHP y la estamos desplegando acá. Vamos también a incluir una imagen. En este caso, lo vamos a hacer un poco más rápido. Y lo que voy a hacer es que yo ya tengo un código listo para desplegar la imagen. Dentro del servicio que nos llega de PHP nos llega una imagen con el nombre de un archivo, en este caso, que puede ser PNG o JPG, y... vamos a guardar esto... Vamos a ver que acá yo estoy llamando el valor "imagen_src". Lo estamos recibiendo también desde la base de datos... Vamos a revisar la información... Y vemos que "imagen_src" es un archivo directamente en PNG. Pero nos falta definir exactamente la ruta en la que se encuentra. En este caso, yo lo tengo almacenado en un servidor y lo que voy a hacer es que voy a definir esta ruta a través de la variable "rutaServer". Esa "rutaServer" la voy a incluir dentro de mi componente para que sea más fácil de acceder. Así que vamos a ir al componente, vamos a ir al "ng Init", y acá vamos a definir el valor de "rutaServer". Acá nos aparece un error porque "rutaServer" no tiene definido el tipo, así que vamos a ir junto a "videos" y decimos que "rutaServer" sea de tipo "String", o una cadena de texto. Guardamos y ya tenemos que la ruta al servidor va a ser esta que está acá. Y ahí es donde vamos a acceder las imágenes... Aquí es donde yo tengo copiadas todas las imágenes de mi aplicación... Entonces, en esta sección, yo defino que la ruta de la imagen se encuentre acá y que de ahí me acceda al archivo directamente. Listo. Tenemos la parte visual. Y ya se ve. Tenemos una imagen, tenemos una descripción, pero visualmente todavía nos falta un poco. Yo ya tengo algunos elementos de CSS listos para que lo podamos ver y tengamos el resultado final. Para eso, vamos a buscar el archivo "lista-de-videos.component.css", copio las clases de CSS y ya tenemos listo el resultado final. Vamos a revisar y estamos desplegando visualmente la información que hasta hace unos segundos se encontraba en formato de texto dentro de un PHP.

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.