Pasar de crear datos manualmente en Postman a hacerlo directamente desde la aplicación móvil es un paso fundamental en cualquier proyecto real. Aquí se aborda exactamente eso: agregar botones de acción al toolbar, generar una nueva página con ionic generate page, configurar rutas dinámicas con parámetros en Angular y preparar la lógica para distinguir entre crear y editar una rodada.
¿Cómo agregar botones de acción al toolbar en Ionic?
El punto de partida es el archivo rides.page.html. Dentro del ion-toolbar se utiliza la etiqueta ion-buttons, que permite colocar botones a la izquierda o derecha del encabezado según el valor del atributo slot [0:49].
- Botón de refrescar: se ubica con
slot="start" y ejecuta la función getRides() al hacer clic. Muestra únicamente un ícono gracias a slot="icon-only" con el nombre refresh.
- Botón de crear: se ubica con
slot="end" y en lugar de un evento de clic utiliza un routerLink para redirigir a una nueva pantalla. Su ícono es add.
El componente ion-icon con la propiedad slot="icon-only" indica que el botón no tendrá texto visible, solo el ícono, lo cual mantiene la interfaz limpia.
¿Cómo se refactoriza getRides para reutilizarlo?
En rides.page.ts se extrae el código que antes vivía dentro de ngOnInit hacia un método independiente llamado getRides() [1:35]. Después, ngOnInit simplemente invoca this.getRides(). De esta forma, la carga inicial y el refresco manual comparten la misma lógica sin duplicar código.
typescript
ngOnInit() {
this.getRides();
}
getRides() {
// Llamado HTTP para obtener las rodadas
}
Al probar en el navegador, cada clic en el botón de refresh genera un nuevo llamado en la pestaña Network, confirmando que la lista se actualiza correctamente [2:48].
¿Cómo crear una nueva página con ionic generate page?
Desde la terminal, dentro de la carpeta del front, se ejecuta el comando ionic generate page rideForm [3:20]. Este comando genera automáticamente la carpeta con sus archivos .html, .ts, .scss y el módulo correspondiente, exactamente como se hizo antes con la página de rides.
En el archivo ride-form.page.html se personaliza el título del toolbar con el texto "Crear ride" para que el usuario sepa en qué pantalla se encuentra [3:52].
¿Cómo configurar rutas dinámicas con parámetros en Angular?
La página rideForm necesita recibir un parámetro en la URL para distinguir si se está creando una rodada nueva o editando una existente. En app-routing.module.ts se modifica el path agregando /:id al final [4:30]:
typescript
{ path: 'ride-form/:id', loadChildren: () => import('./ride-form/ride-form.module') }
Si se accede a /ride-form sin parámetro, Angular lanza un error porque no encuentra un segmento válido. La solución es siempre incluir el parámetro: para rodadas nuevas se usa la palabra new y para ediciones se pasa el ID real de la rodada [4:55].
¿Cómo leer parámetros de ruta con ActivatedRoute?
Dentro de ride-form.page.ts se inyectan tres dependencias en el constructor [5:30]:
- ActivatedRoute: proviene del Angular Router y permite acceder a los datos de la ruta activa.
- NavController: propio de Ionic, facilita la navegación programática desde código TypeScript.
- RideService: el servicio HTTP reutilizable que ya se tenía para obtener rodadas.
En ngOnInit se extrae el parámetro con this.activatedRoute.snapshot.paramMap.get('id') [6:25]. El nombre 'id' debe coincidir exactamente con lo definido en el routing module.
typescript
ngOnInit() {
this.id = this.activatedRoute.snapshot.paramMap.get('id');
}
¿Cómo distinguir entre crear y editar una rodada?
Se crea una propiedad booleana llamada editing, que inicia en false. Su valor se determina comparando el parámetro recibido [7:18]:
typescript
this.editing = this.id !== 'new';
Cuando la URL contiene new, la bandera queda en false e indica creación. Cualquier otro valor implica edición. El método save() utiliza esta bandera para decidir qué acción ejecutar [7:42]:
typescript
save() {
if (this.editing) {
// Lógica de edición
} else {
this.rideService.create(/* parámetros */);
}
}
El método create del rideService aún no está implementado, pero la estructura ya queda lista para conectar el formulario con la base de datos MongoDB a través de Sails.
Con esta preparación, el siguiente paso natural es construir el formulario visual, implementar create en el servicio y redirigir al usuario de vuelta a la lista de rodadas tras guardar. ¿Ya tienes ideas sobre qué campos adicionales agregarías al formulario de creación?
