En esta ocación les traigo un pequeño tutorial pero muy interesante, actualmente estoy comenzando a explorar ionic que como muchos saben es un framework para el desarrollo de aplicaciones hibridas.
En este tutorial veremos como leer datos json de un servidor externo y mostrarla en nuestra aplicacion local. Cabe aclarar que tienes que tener unos conocimientos previos como saber crear un proyecto.
Luego de tener creado el proyecto tenemos que crear un nuevo proveedor, el cual va a ser nuestro proveedor de servicio, esto lo hacemos desde la consola, ubicandonos en la raiz del proyecto y procedemos a escribir el siguiente codigo.
g provider proveedor
donde g provider es el comando para crear un nuevo proveedor y proveedor es el nombre de nuestro proveedor que estamos creando con el comando g provider.
Una vez salga ok, quiere decir que el proveedor ya se ha creado y eso lo podemos comprobar abriendo nuestro editor.
Ahi vemos como se ha creado la carpeta provider y el archivo proveedor.ts, donde vemos que automaticamente se nos importan dos librerías muy importantes y se nos crea la clase ProveedorProvider.
Acontinuación nos ubicamos en la carpeta app/app.module.ts
Y como podemos se nos importa automaticamente el proveedor, ahora lo que tenemos que hacer es importar otra librería que es HttpClientModule la cual nos sirve para conectarnos con un cliente externo a través de http.
Ahora tomamos HttpClientModule y la pegamos en imports.
Guardamos y nos devolvemos a la carpeta providers/proveedor/proveedor.ts.
Aca tambien tenemos que importar HttpClientModule.
Acontinacion fuera del constructor creamos una funcion, le colocaremos como nombre obtenerdatos() o como ustedes la quieran llamar, dentro de esta funcion colocaremos el siguiente codigo.
obtenerdatos(){
return this.http.get('aqui va la url de donde queremos obtener los datos json');
}
Para este ejemplo tomaremos la siguiente url. https://jsonplaceholder.typicode.com/users.
y estos son los datos que vamos a obtener y mostrar en nuestra aplicacion.
Ahora nos vamos a la pagina donde querramos que muestren los datos que obtendremos de la url anteriormente escrita. En esta ocacion mostraremos estos datos en la pagina home, por lo tanto nos tenemos que ubicar en la carpeta pages/home/home.ts.
Aquí tenemos que importar nuestro proveedor para poder utilizar la conexion que hicimos dentro de proveedor.ts y lo haremos con la siguiente linea.
import {ProveedorProvider} from '../../providers/proveedor/proveedor';
Ademas crearemos un array dentro de la clase HomePage llamado usuarios=[] que es donde guardaremos los datos que vamos a obtener, tambien en el constructor al lado de NavController colocamos una coma (,) y escribimos public proveedor : ProveedorProvider. para poder utilizar lo que hagamos en la clase ProveedorProvider.
Fuera del contructor llamaremos a la siguiente función ionViewDidLoad().
Abrimos llaves y escribimos las siguientes lineas de codigo.
ionViewDidLoad() {
this.proveedor.obtenerdatos()
.subscribe(
(data)=>{this.usuarios = data;},
(error)=>{console.log(error);}
)
}
Aquí lo que estamos haciendo es utilizar una instancia de la clase ProveedorProvider para llamar al metodo obtenerdatos() y estos datos asignarselos al array usuarios=[].
El archivo home.ts quedaría así.
Guardamos y nos ubicamos en home.html que es la vista donde finalmente vamos a mostrar los datos obtenidos.
Aquí modificaremos esta vista escribiendo el siguiente codigo.
Lo que hacimos en este codigo fué crear una lista de botones donde mostramos los datos obtenidos gracias a la instruccion *ngfor="let usuario of usuarios" que lo que hace es recorrer el array usuarios y almacenarlo en la variable usuario y en la siguiente instruccion {{usuario.id}} - {{usuario.name}} lo que hacemos es acceder a las propiedades del array y mostrarlas.
Ya hemos terminado, lo ultimo que toca hacer es correr el servidor y mirar el resultado.
y si todo sale bien, les debería salir lo siguiente.
En este tutorial veremos como leer datos json de un servidor externo y mostrarla en nuestra aplicacion local. Cabe aclarar que tienes que tener unos conocimientos previos como saber crear un proyecto.
Luego de tener creado el proyecto tenemos que crear un nuevo proveedor, el cual va a ser nuestro proveedor de servicio, esto lo hacemos desde la consola, ubicandonos en la raiz del proyecto y procedemos a escribir el siguiente codigo.
g provider proveedor
donde g provider es el comando para crear un nuevo proveedor y proveedor es el nombre de nuestro proveedor que estamos creando con el comando g provider.
Una vez salga ok, quiere decir que el proveedor ya se ha creado y eso lo podemos comprobar abriendo nuestro editor.
Ahi vemos como se ha creado la carpeta provider y el archivo proveedor.ts, donde vemos que automaticamente se nos importan dos librerías muy importantes y se nos crea la clase ProveedorProvider.
Acontinuación nos ubicamos en la carpeta app/app.module.ts
Y como podemos se nos importa automaticamente el proveedor, ahora lo que tenemos que hacer es importar otra librería que es HttpClientModule la cual nos sirve para conectarnos con un cliente externo a través de http.
Ahora tomamos HttpClientModule y la pegamos en imports.
Guardamos y nos devolvemos a la carpeta providers/proveedor/proveedor.ts.
Aca tambien tenemos que importar HttpClientModule.
Acontinacion fuera del constructor creamos una funcion, le colocaremos como nombre obtenerdatos() o como ustedes la quieran llamar, dentro de esta funcion colocaremos el siguiente codigo.
obtenerdatos(){
return this.http.get('aqui va la url de donde queremos obtener los datos json');
}
Para este ejemplo tomaremos la siguiente url. https://jsonplaceholder.typicode.com/users.
y estos son los datos que vamos a obtener y mostrar en nuestra aplicacion.
El archivo proveedor.ts debería quedar de la siguiente forma.
Ahora nos vamos a la pagina donde querramos que muestren los datos que obtendremos de la url anteriormente escrita. En esta ocacion mostraremos estos datos en la pagina home, por lo tanto nos tenemos que ubicar en la carpeta pages/home/home.ts.
Aquí tenemos que importar nuestro proveedor para poder utilizar la conexion que hicimos dentro de proveedor.ts y lo haremos con la siguiente linea.
import {ProveedorProvider} from '../../providers/proveedor/proveedor';
Ademas crearemos un array dentro de la clase HomePage llamado usuarios=[] que es donde guardaremos los datos que vamos a obtener, tambien en el constructor al lado de NavController colocamos una coma (,) y escribimos public proveedor : ProveedorProvider. para poder utilizar lo que hagamos en la clase ProveedorProvider.
Fuera del contructor llamaremos a la siguiente función ionViewDidLoad().
Abrimos llaves y escribimos las siguientes lineas de codigo.
ionViewDidLoad() {
this.proveedor.obtenerdatos()
.subscribe(
(data)=>{this.usuarios = data;},
(error)=>{console.log(error);}
)
}
Aquí lo que estamos haciendo es utilizar una instancia de la clase ProveedorProvider para llamar al metodo obtenerdatos() y estos datos asignarselos al array usuarios=[].
El archivo home.ts quedaría así.
Guardamos y nos ubicamos en home.html que es la vista donde finalmente vamos a mostrar los datos obtenidos.
Aquí modificaremos esta vista escribiendo el siguiente codigo.
Lo que hacimos en este codigo fué crear una lista de botones donde mostramos los datos obtenidos gracias a la instruccion *ngfor="let usuario of usuarios" que lo que hace es recorrer el array usuarios y almacenarlo en la variable usuario y en la siguiente instruccion {{usuario.id}} - {{usuario.name}} lo que hacemos es acceder a las propiedades del array y mostrarlas.
Ya hemos terminado, lo ultimo que toca hacer es correr el servidor y mirar el resultado.
y si todo sale bien, les debería salir lo siguiente.
Eso es todo, si les sirvió no se olviden comentar y compartir o también si les quedó alguna duda. Gracias.
5 comentarios
Write comentariosHola, buenas tardes
ReplyComo hago para mostrar los datos de la address que estan en un array según tu ejemplo?
Necesito ayuda, gracias
Ahora como podríamos abrir una ventana nueva mostrando el detalle de ese listado de nombres, al hacer click a alguno de ellos?
Replypuedo usar ese código para leer un json local y como puedo hacerlo? Gracias.
Replyhola... estaba haciendo tu ejemplo pero aparece el error en la siguientes linea:
Reply(data)=>{this.usuarios = data;}
hola buen día me pareció perfecto tu ejemplo y me funciona muy bien, tengo problemas al cambiar la url, obviamente también cambio {{usuario.id}}, pero no se que mas hacer, la url es un json. agradecería tu ayuda
ReplyConversionConversion EmoticonEmoticon