Conectar una aplicación móvil con un backend es uno de los pasos más importantes en el desarrollo de cualquier proyecto. Aquí se aborda cómo realizar la primera petición HTTP desde una app de Ionic hacia un API construido con Sails.js, específicamente para obtener una lista de rodadas y prepararla para su visualización con componentes visuales como IonCard.
¿Cómo generar una nueva página en Ionic para mostrar datos?
Antes de hacer cualquier petición, es necesario crear la pantalla donde se desplegará la información. Ionic ofrece una herramienta de línea de comandos muy útil para esto. Con el comando ionic generate page rides [02:40] se genera automáticamente una carpeta con varios archivos: el módulo, el archivo de rutas, el HTML, el TypeScript para la lógica, el CSS para estilos y el archivo spec para pruebas unitarias.
Una recomendación práctica es mantener siempre el servidor de Ionic corriendo con ionic serve en una pestaña de terminal, mientras se usa otra pestaña para ejecutar comandos. Esto permite que cada cambio guardado en el código se refleje automáticamente en el navegador, acelerando mucho el flujo de trabajo.
Una vez creada la página, se puede acceder a ella cambiando la ruta en el navegador. Por ejemplo, reemplazando /home por /rides [03:30] se visualiza la nueva pantalla con su título predeterminado.
¿Qué es IonCard y cómo se usa para mostrar información?
El componente IonCard [04:10] es un elemento visual de Ionic ideal para presentar información estructurada al usuario. En la documentación oficial se encuentran varias variantes: tarjetas con título, con header y con listas de items. A veces lo que se ve en la vista previa de la documentación no coincide exactamente con el código que aparece debajo, pero siempre hay un enlace view source que lleva al repositorio de GitHub con el código completo.
Se copia el bloque completo desde <ion-card> hasta su cierre y se coloca dentro de <ion-content> en el archivo rides.page.html. Las imágenes de ejemplo se pueden reemplazar por imágenes propias o incluso por imágenes subidas por el usuario.
¿Cómo crear un servicio HTTP para consumir el API de Sails.js?
Con la vista lista, el siguiente paso es traer los datos reales desde el backend. En el archivo del servicio (ride.service.ts), se implementa un método público llamado getAll [05:50] que retorna un Observable. Esta clase se importa desde la librería RxJS, que ya viene incluida en Ionic.
typescript
public getAll(): Observable<Ride[]> {
return this.http.get(this.url) as Observable<Ride[]>;
}
El método this.http.get() funciona de manera análoga al GET que se ejecuta en Postman [06:20]. La misma lógica aplica para post, put y delete, que se cubren en etapas posteriores.
¿Por qué crear un modelo de datos en la carpeta Models?
Para que el Observable sepa qué tipo de datos va a recibir, se necesita definir un modelo. Se crea una carpeta models dentro de src y dentro de ella un archivo ride.ts [07:10]. Este archivo define la estructura del objeto:
typescript
export class Ride {
_id?: string;
title: string;
start: string;
end?: string;
waypoints?: any;
}
El símbolo ? indica que un atributo es opcional [08:15]. Por ejemplo, _id no existe hasta que el registro se guarda en la base de datos, y end y waypoints pueden no estar definidos al momento de crear una rodada. En cambio, title y start son requeridos.
El tipo string predomina porque es el formato más común en MongoDB. Para waypoints, que almacena estructuras JSON complejas, se utiliza el tipo any.
También es buena práctica exportar un objeto vacío por defecto:
typescript
export const defaultRideObject: Ride = {
title: '',
start: ''
};
¿Cómo inyectar el servicio en el componente de la página?
Una vez listo el servicio, se registra en app.module.ts dentro del arreglo de providers [09:40]. Luego, en el controlador rides.page.ts, se inyecta el servicio a través del constructor:
typescript
constructor(private rideService: RideService) {}
Dentro del método ngOnInit se llama a this.rideService.getAll() y se suscribe al Observable para asignar los resultados a una variable local rides de tipo Ride[] [10:15]. Esta variable será la que se itere en el HTML para generar dinámicamente una tarjeta por cada rodada almacenada en la base de datos.
Este flujo completo, desde la petición HTTP hasta la visualización con componentes, es la base para cualquier aplicación que necesite consumir datos de un API REST. Si tienes dudas sobre cómo extender este patrón a operaciones de creación o eliminación, compártelas en los comentarios.
