Ionic 4 con JWT Spring Boot y MySql. Capítulo 1: Presentación del proyecto

Hola a todos. Esta nueva serie de tutoriales es la continuación del proyecto full-stack con SpringBoot, 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 SpringBoot 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):

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:

failCredenciales

Panel de usuario:

Una vez que nos logueamos aparecerá la pantalla que nos da la bienvenida con el nombre de usuario

wellcome

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.

menuUser

En el panel de usuario aparece la lista con los productos de la tabla.

panelUser

Si pulsamos sobre un elemento de la lista nos conduce a la pantalla donde se ven los detalles de dicho elemento.

detail

Panel de administrador:

El menú del administrador es igual al del usuario, sólo cambia el texto del segundo botón.

menuAdmin

Si lo pulsamos veremos la misma tabla que el usuario genérico pero con las opciones de editar, borrar y crear un nuevo registro.

panelAdmin

Si hacemos click en nuevo producto nos lleva al formulario.

newProd

Al dejar algún campo vacío o insertar un nombre repetido mostrará un mensaje de error.

failProducto

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.

editProd

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.

borrarProd

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.

register

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.

failRegister

**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.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s