Preparar el entorno de desarrollo para una aplicación móvil con Ionic implica mucho más que ejecutar un comando de instalación. Desde generar el proyecto con una plantilla funcional hasta configurar un servicio que se comunique con un backend existente, cada paso sienta las bases para construir operaciones CRUD completas. Aquí se explica cómo lograrlo paso a paso.
¿Cómo se instala Ionic y se genera un proyecto desde la terminal?
El proceso comienza en la documentación oficial de Ionic, desde donde se copia el comando de instalación global:
bash
npm install -g ionic
Este comando es muy similar a la forma en que se instalan herramientas como Sails o MongoDB [01:00]. Una vez instalado, se genera el proyecto con:
bash
ionic start frontend sidemenu
El nombre frontend puede reemplazarse por cualquier otro. La palabra sidemenu corresponde al template elegido, que es una plantilla con funcionalidad de navegación ya integrada [02:05]. Durante la instalación, Ionic pregunta si se desea usar Angular o React; en este caso se selecciona Angular [02:30].
Es importante considerar que la instalación de una app de Ionic tarda más que otros paquetes como Sails o Mongo, debido a la cantidad de librerías que necesita [02:50].
Para ejecutar la aplicación se ingresa a la carpeta y se corre el servidor:
bash
cd frontend
ionic serve
Esto abre automáticamente el navegador con la aplicación corriendo [03:20].
¿Qué hacer cuando la aplicación muestra contenido en caché?
Si ya se han creado proyectos Ionic anteriormente, es probable que el navegador muestre archivos en caché de una aplicación previa [03:40]. La solución es sencilla:
- Clic derecho en cualquier parte de la pantalla.
- Seleccionar Inspect.
- Clic derecho sobre el botón de actualizar del navegador.
- Elegir Empty Cache and Hard Reload [04:10].
Con esto se visualiza correctamente la aplicación recién generada, que incluye pantallas como Home y List gracias al template sidemenu.
¿Cómo se estructura el proyecto y se crea un servicio HTTP?
La carpeta principal de trabajo es src/app, donde se encuentran las pantallas y el archivo App Routing Module, que controla qué pantalla se muestra según la URL activa [05:00].
Además de las pantallas, Ionic permite crear servicios. Los servicios son una parte fundamental porque permiten conectarse a entidades externas, como una API REST [05:30]. Para crear uno:
- Dentro de
src, crear una carpeta llamada services.
- Dentro de ella, crear un archivo llamado
ride.ts.
La extensión .ts se usa porque Ionic trabaja con TypeScript en lugar de JavaScript. TypeScript es un superset de JavaScript que incorpora lo que se conoce como syntactic sugar o azúcar sintáctica, lo cual permite escribir código con un estilo orientado a objetos [06:00].
¿Qué es la inyección de dependencias en Angular?
El servicio se define como una clase exportable con el decorador @Injectable, importado desde @angular/core [07:10]. Este concepto se llama inyección de dependencias: permite que una clase reciba funcionalidades externas, como la capacidad de hacer llamados HTTP.
typescript
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class RideService {
url = 'http://localhost:1337';
constructor(private http: HttpClient) {}
}
El HttpClientModule se debe registrar en el archivo app.module.ts, dentro del arreglo de imports, para que esté disponible en toda la aplicación [07:50]. Un error común es importar el module directamente en el servicio; solo debe usarse HttpClient ahí [08:20].
¿Qué son los CORS y cómo se configuran para desarrollo?
Para que Ionic pueda comunicarse con el backend, es necesario configurar los CORS (Cross-Origin Resource Sharing) en el servidor de Sails [09:00]. Los CORS protegen la API para que no acepte llamados desde destinos no autorizados.
En el archivo config/security.js del backend se descomentan las líneas correspondientes y se ajustan estos valores:
allRoutes: cambiar de false a true.allowOrigins: dejar en '*' para permitir cualquier origen.allowCredentials: mantener en false [09:30].
Esta configuración es válida exclusivamente para ambientes de desarrollo. En producción, se deben restringir los orígenes permitidos para mantener la seguridad de la aplicación.
Con el servicio HTTP listo y los CORS habilitados, el entorno queda preparado para implementar operaciones CRUD desde Ionic hacia el backend con Sails y MongoDB. ¿Ya tienes tu proyecto configurado? Comparte tu experiencia en los comentarios.
