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

Angular 2 avanzado: Trabajo con APIs

Depurar y observar resultados con Robomongo y Chrome

¡Prueba gratis durante 10 días

nuestros 1287 cursos !

Prueba gratis Mostrar modalidades de suscripción
MongoDB es la base de datos en la que vamos a trabajar en este proyecto. Utilizaremos el programa Robomongo para observar la información almacenada y los plugins del navegador Chrome para simular las llamadas http.
07:46

Transcripción

En esta lección te voy a mostrar un par de herramientas de depuración bastante útiles que nos van a permitir a nosotros observar los datos que se encuentran dentro de nuestra base de datos. Cuando trabajamos en una base de datos Mongo, nosotros no vamos a tener acceso directo a ella, al menos con un cliente gráfico, así que vamos a trabajar con un par de herramientas que nos van a permitir a nosotros ver la información, saber qué está pasando y también hacer pruebas sobre las llamadas de datos que estamos haciendo en una aplicación. Esto es particularmente útil cuando estamos trabajando en una API REST porque vamos a poder ver las respuestas de acuerdo a los diferentes métodos. Por desgracia, cuando trabajamos dentro del navegador, el único método que podemos ver directamente es el "get", pero métodos como "post", "update" o "delete" no podemos interactuar directamente. Te voy a mostrar un par de herramientas para poder hacerlo. Acá yo estoy trabajando con una aplicación que está recibiendo un mensaje por "post ". En este caso, lo que estamos haciendo es que recibimos datos que nos lleguen desde la dirección'api/ lista'. Si nos llega un dato llamado "texto", nosotros lo vamos a procesar, vamos a almacenarlo en la base de datos y vamos a desplegar una respuesta con la base de datos actualizada dentro del navegador. Ahora, esto no lo podemos ver directamente desde el navegador, tenemos que interactuar de una forma distinta. Vamos a utilizar dos herramientas. La primera que quiero que veas es una herramienta que se llama Robomongo. Esta herramienta nos permite conectarnos a una base de datos y revisar sus contenidos. Acá yo ya tengo una base de datos almacenada, pero podemos hacer otra conexión, solamente para que la veas. Básicamente lo que estoy haciendo es que me estoy conectando a una aplicación y estoy utilizando'localhost' en el puerto 27017, que es el puerto por defecto que utilizamos dentro de MongoDB. En este caso, voy a dejar esta dirección tal como está y voy a conectarme directo a ella, y ahora que estoy conectado a ella veo que tengo las dos bases de datos que se generan por defecto. Vamos dejar esta información así y voy a trabajar con la segunda herramienta que yo te quiero mostrar. Esta herramienta es un cliente que nos va a servir a nosotros para desplegar información utilizando aplicaciones REST. Yo estoy trabajando en este momento con Google Chrome. Dentro de la tienda de Google Chrome, si haces una búsqueda sobre el término REST dentro esta tienda, vas encontrar una serie de diferentes "plugins" que te van a servir para hacer peticiones de diferentes tipos. Como te digo, dentro del navegador nosotros solamente tenemos de manera visible la petición "get", pero podemos hacer diferentes peticiones. Así que en este caso yo estoy utilizando un cliente llamado "Cliente de servicios Web RESTful". Para instalarlo, simplemente tienes que utilizar Chrome y añadirlo, es completamente gratuito. Una vez que está instalado, te va a mostrar un botón dentro del navegador y también vas a poder ver una ventana donde puedes agregar llamadas a una API utilizando diferentes métodos. Acá yo ya tengo la dirección de mi API. Como puedes ver, estoy utilizando la dirección'localhost: ' en el puerto 8080, en la dirección'api/lista'. Esta es exactamente la dirección que he configurado dentro de mi servidor. Como vemos, estoy trabajando en el puerto 8080 y tengo la ruta'/api/lista'. Ahora, el detalle está en que si yo entro a través del navegador de manera normal, no voy a poder ver correctamente la información, porque la respuesta que yo he configurado es utilizando el método "post". Acá yo puedo definir qué método quiero usar. Tenemos los principales métodos que se utilizan dentro de una API REST, así que vamos a utilizar en este caso el método "post". Acá yo tengo la dirección y voy a enviar datos a esta petición. Voy a buscar en este caso la opción "cuerpo" y tengo acá unos datos que ya he incluido previamente. Estoy utilizando la nomenclatura JSON, o sea, estoy creando un objeto dentro de llaves. Estoy definiendo una propiedad entre comillas, dos puntos y le estoy asignando un valor. En este caso estoy incluyendo la propiedad "texto" y le estoy asignando un valor que en este caso es "xx", pero puede ser cualquier valor que sea una cadena de texto. Ahora, ¿por qué estoy incluyendo este valor con este nombre: "texto"? Porque justamente este es el valor que dentro de mi aplicación he definido que me va a llegar desde la petición por "post". Sabemos que vamos a tener una propiedad que se llama "texto", que me va a llegar desde la petición, y yo la voy a guardar con ese mismo nombre dentro de la base de datos. Volvemos otra vez al "plugin" de Chrome. Ahora que tengo definido este valor, y si quisiera poner otro, que en este caso no lo voy a incluir, pero si quisiera poner más valores, solamente los separo por comas y continúo con el mismo formato. Por ahora solo voy a enviar este valor. Ahora ya tengo la ruta, el método y los datos. Voy a enviar un valor y ahora tengo una respuesta. En este caso la respuesta es un poco confusa, pero puedo revisar la respuesta en formato RAW o la respuesta con formato y puedo ver que me está devolviendo una información. La información que me está devolviendo según yo configuré mi servidor –volvemos a revisarlo– es que si no hay ningún error después de insertar –en este caso crear– un registro, si no hay errores, vamos a conectarnos a la base de datos y también, si no hay errores, vamos a obtener la información en formato JSON. Justamente esta línea es la que estamos obteniendo como respuesta dentro de nuestro "plugin". Esta es la información que está en la base de datos. Vamos a incluir entonces otro registro. Volvemos acá, a "cuerpo", y vamos a poner un registro más. Voy a cambiar estas líneas, esta vez vamos a poner asteriscos, voy a volver enviar la información, revisamos la respuesta, puede ser "Raw" o "Con formato". Vemos que ahora hay dos registros. Esto es una forma de interactuar con nuestra base de datos y podemos ver que es la información que tenemos acá, porque cada vez que insertamos un registro, vamos a tener la versión actualizada de nuestra base de datos. Pero también podemos utilizar Robomongo, y acá todavía nos está mostrando los datos, pero si hacemos clic derecho sobre la base de datos, presionamos "refresh", vamos a ver que ya aparece la "lista-angular". Si revisamos la aplicación también vemos que ese es el nombre que yo he definido al momento de crear mi base de datos. Volvemos otra vez, revisamos también que el mismo patrón que he definido, tengo una base de datos llamada "lista-angular". Tenemos acá, dentro de las colecciones, una llamada "listas" y tenemos la estructura que he definido. Voy a hacer doble clic sobre "listas" y acá me va a aparecer la información –es todo de manera gráfica– y puedo ver cada uno de los datos que se encuentran en ella. Vemos que estamos insertando el valor "texto" y estos dos valores se generan automáticamente, que son los valores para identificar cada uno de los registros. Así es como nosotros podemos depurar nuestras bases de datos, podemos ver cuál es la información que tenemos almacenada y también, gracias a algunos "plugins", podemos enviar información utilizando diferentes métodos y no quedar atrapados únicamente en el método "get", que es el que nos da el navegador por defecto.

Angular 2 avanzado: Trabajo con APIs

Comprende el funcionamiento de una API y cómo llevar a cabo sus procesos, así como controlar su funcionamiento mediante Angular 2, gracias a este ejemplo práctico.

3:02 horas (29 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:4/05/2017

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.