Hola a todos. Esta nueva serie de tutoriales es la continuación del proyecto full-stack con Spring–Boot, MySql, Jwt y Angular 7. Vamos a crear la parte correspondiente a Ionic, por lo que para seguir la serie es necesario tener implementada al menos la parte del backend. Puedes verla haciendo click en este enlace
En cuanto a la parte de Angular, puedes saltártela, aunque recomiendo que la sigas pues el código es muy parecido y podrás reutilizar gran parte del mismo. Además, es necesario tener conocimientos previos de Angular para trabajar con Ionic. Pero bueno, si ya eres todo un experto en Angular con la parte de Spring–Boot es más que suficiente para este tutorial. Podéis descargar los repositorios de estos enlaces:
Como acabo de decir, el proyecto es muy similar al frontend que hicimos con Angular, sólo que en esta ocasión vamos a implementar una aplicación híbrida para dispositivos móviles. Así que sin más dilación -y no, no me apetece ponerme a explicar qué es Ionic, las diferencias entre aplicaciones nativas vs. híbridas, etc, para eso hay millones de artículos en la web- voy a mostrar las capturas del resultado final.
Página de inicio (login):
La página de inicio es la de login. Es un diseño muy simple, donde introduciremos el nombre de usuario y la contraseña. Si los valores son erróneos mostrará un mensaje de alerta:
Panel de usuario:
Una vez que nos logueamos aparecerá la pantalla que nos da la bienvenida con el nombre de usuario
En la parte superior izquierda aparece el botón del menú. Si lo pulsamos nos mostrará las opciones para un usuario genérico, esto es, sin privilegios de administrador.
En el panel de usuario aparece la lista con los productos de la tabla.
Si pulsamos sobre un elemento de la lista nos conduce a la pantalla donde se ven los detalles de dicho elemento.
Panel de administrador:
El menú del administrador es igual al del usuario, sólo cambia el texto del segundo botón.
Si lo pulsamos veremos la misma tabla que el usuario genérico pero con las opciones de editar, borrar y crear un nuevo registro.
Si hacemos click en nuevo producto nos lleva al formulario.
Al dejar algún campo vacío o insertar un nombre repetido mostrará un mensaje de error.
La pantalla de edición es similar a la de crear un nuevo producto con la diferencia de que los campos ya están llenos con los valores correspondientes del producto seleccionado.
El botón de borrar mostrará un mensaje de confirmación -bastante dramático, por cierto- antes de proceder a la eliminación definitiva del registro.
Registro de un nuevo usuario:
Para acceder a la pantalla de creación de una cuenta nueva hay que estar deslogueado. Se accede desde la pantalla inicial del login.
Si se introducen mal los campos (email o nombre de usuario repetido, dirección de correo no válida, etc) también mostrará un mensaje de error.
**MUY IMPORTANTE: la parte del REST ya está implementada en el tutorial con Angular, pero debemos hacer una pequeña modificación en los controladores AuthController y ProductoController. La línea
@CrossOrigin(origins = "http://localhost:4200")
la cambiamos por
@CrossOrigin(origins = "*")
Con esto abrimos el servicio REST a cualquier URL, así funcionará tanto con Angular (puerto 4200) como con Ionic (puerto 8100).
La aplicación es muy simple como se puede ver. En el siguiente post comenzaremos creando el nuevo proyecto.
inezpre5 