Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Angular 2 práctico: Sitio de consumo de videos

Conectarse a un servidor

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
Una parte fundamental de nuestra aplicación es la capacidad de conectarse a una API. En esta lección vamos a aprender a utilizar el módulo http para interactuar con datos externos y procesar datos de y hacia la API.
07:18

Transcripción

En esta lección, vamos a crear un componente que se conecta con datos externos de nuestra aplicación y los trae para que podamos procesarlos dentro de ella. Vamos a crear un nuevo módulo desde la línea de comandos, insertando el código "ng g", y le vamos a crear un nuevo componente llamado "lista-de-videos". Se acaba de crear el nuevo componente, lo voy a buscar dentro de la carpeta en que se encuentra el código fuente de mi aplicación, y vamos a refrescar para que aparezca. ¡Listo! Acá tengo el nuevo componente. Para que este componente se despliegue dentro de mi aplicación, tengo que buscar el componente principal de mi aplicación, en este caso sería "app.component", en este caso, voy a modificar el html, y lo que voy a hacer es que voy a mostrar una etiqueta en donde se encuentra mi componente. En este caso, vamos a buscar el nombre, vemos que se llama, según el selector, "app-lista-de-videos". Voy a copiarlo para estar seguro de que es el nombre correcto. Cerramos la etiqueta y vamos a levantar el servidor para poder ver la información que acabamos de incluir dentro de "localhost", en este caso, el puerto 4200. ¡Listo! Tenemos acá un texto que nos dice "lista-de-videos works" Eso significa que está funcionando correctamente el componente llamado "lista-de-videos", y vamos a comenzar a modificarlo porque lo que queremos es que se conecte con un servicio externo de datos. Para hacer eso, vamos a comenzar modificando el componente. Vamos a buscar "lista-de-videos.component.ts", y vamos a escribir, en la primera línea, después de la invocación a "@angular/core" —que es el módulo central de angular— vamos a importar un nuevo módulo. En este caso, el módulo "Http", que nos va a servir para hacer llamados de datos externos. Así que vamos a poner "Http" y también vamos a llamar a "Response", que nos va a servir para trabajar con la información que obtenemos de "http" Vamos a decir que esto se importe desde "angular", específicamente, de los módulos "http". ¡Listo! Ahora, podemos trabajar con documentos externos dentro de nuestra aplicación. Vamos ahora a configurar nuestro documento y vamos a buscar el constructor, y dentro del constructor, vamos a crear una variable privada, que se va a llamar "http" y que va a ser de tipo "Http". Ahora vamos a poder trabajar con esta variable dentro de nuestra aplicación. También, vamos a ver, que acá tenemos un método llamado "ngOnInit", este método se va a incluir dentro de los módulos que vamos a crear, y se va a ejecutar en el momento en el que se inicializa el módulo. Lo que podemos hacer es incluir un código dentro de este método que se va a ejecutar en el momento en llamemos "lista-de-videos". Así que, vamos a poner acá una función que se va a llamar "this.peticionExterna();". Esto va a llamar datos externos y creamos el método que acabamos de invocar, "peticionExterna()", vamos a definir cuál es el resultado de este método, en este caso, no devuelve nada, así que vamos a poner "void", y dentro de "peticionExterna()", vamos a llamar a la variable "http" que acabamos de crear. La llamamos como "this.http", y vamos a llamar un método que se encuentra dentro de "http" que se llama "request", y lo que vamos a hacer es una petición externa, vamos a definir a dónde queremos que sea la petición. En mi caso, ya tengo un servidor funcionando, un servidor "php", que se encuentra funcionando en "localhost/API/lista-de-videos". Esta es la información que está devolviendo este servidor. Cada vez que entramos, acá, nos va a devolver una serie de datos, que en este caso es una lista de videos con detalles e información relativa a unos videos. Vamos a volver a la aplicación, y vamos a decirle que en el momento que inicialice nuestro módulo, llame a "peticionExterna()", y "peticionExterna()" va a utilizar a "http" para hacer una petición a nuestro servidor "php". También vamos a utilizar una promesa, en este caso vamos a utilizar ".subscribe" que nos va a permitir a nosotros conectarnos a esta respuesta. En el momento en que obtengamos algún resultado de este servicio, vamos a ejecutar un código. El código que vamos a ejecutar en este caso es que vamos a procesar una respuesta, que va a ser de tipo "Response", y vamos a ejecutar una función, y básicamente esta función lo que va a hacer es que va a mostrar dentro de la consola la información que obtenemos en formato "JSON" Entonces, en este caso, vamos a poner "res", que es la respuesta, ".json()". ¡Listo! Tenemos acá la respuesta. Sólo nos falta incluir este componente dentro de nuestra aplicación, vamos a revisar si ya lo tenemos dentro de "app.component.html", ya lo tenemos listo, así que ya está funcionando. Vamos a ejecutarlo directamente. Volvemos otra vez a nuestro servidor. Vamos a ver que nos aparece el mismo texto, pero si revisamos la consola, vamos a buscar acá en la consola, en este caso yo puse "Inspeccionar", y entraba a la sección de la consola, vemos que acá tenemos un arreglo. Vamos a ampliarlo para que sea más sencillo de leer. Este arreglo nos va a mostrar dos objetos, un objeto que va a tener información sobre "Mi video", y este segundo objeto dice "Mi video 2". Si revisamos dentro de la base de datos en la que estamos trabajando, vamos a ver que tenemos, efectivamente, dos videos, uno con el título "Mi video", y el otro con "Mi video 2", ya estamos invocando la información externa a nuestra aplicación, estamos desplegándola dentro de la consola, tal como lo indica la programación que acabamos de realizar.

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.
 

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.