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

Para trabajar con Ionic debemos tener instalado previamente node.js y npm. Lo puedes ver en este artículo

Una vez que los tenemos, en la página oficial de Ionic nos explican la instalación. Simplemente hay que abrir la consola como administrador si estás en Windows y teclear:

npm install -g ionic

Una vez instalado nos situamos en la carpeta donde vayamos a crear el proyecto y tecleamos ionic start nombre_del_proyecto

ionic start angularjwt blank

Si no añadimos blank al final del comando el asistente nos preguntará que tipo de plantilla queremos. Elegimos blank (para movernos entre las opciones usaremos las flechas del teclado arriba y abajo, enter para seleccionar).

pickTemplate

Presionamos enter y esperamos a que se genere el proyecto, le llevará un buen rato, lo mismo que sucede en Angular.

Al final nos preguntará si queremos instalar el Appflow SDK, le decimos que no (tecla n).

Creación de los directorios:

Una vez que tenemos el proyecto creado lo abrimos con Visual Studio Code (o con vuestro editor favorito). Nos situamos en la carpeta del proyecto

cd angularjwt
code .

Una vez abierto el proyecto, lo primero que vamos a hacer es eliminar el directorio home. Luego vamos a crear las carpetas necesarias para el desarrollo. Para ello, seleccionamos el directorio app y hacemos click sobre el botón nueva carpeta:

nuevaCarpeta

Las carpetas que vamos a crear son estas:

  • guards
  • interceptors
  • models
  • pages
  • services

El árbol del proyecto quedará así:

arbolInit

Creación de los archivos:

Una vez que tenemos las carpetas vamos a crear los archivos, servicios, páginas, etc. Nos situamos sobre la carpeta models y pulsamos el botón “Nuevo archivo”:

nuevoArshivo

Creamos los siguientes:

  • jwt-model.ts
  • login-usuario.ts
  • nuevo-usuario.ts
  • producto.ts

Luego nos situamos sobre la carpeta guards, hacemos click derecho y seleccionamos la opción “Abrir en terminal”:

abrirTerminal

Creamos un servicio tecleando:

ionic g s guard --spec=false

Cerramos el terminal que acabamos de abrir pulsando el botón con el icono trash (contenedor de basura):

closeTerm
Nos situamos sobre la carpeta interceptors. La abrimos en otro terminal y creamos otro servicio:

ionic g s producto-interceptor --spec=false

Repetimos el proceso con la carpeta pages. Aquí vamos a crear las páginas, que son las vistas de la aplicación:

ionic g page admin --spec=false
ionic g page editar-producto --spec=false
ionic g page login --spec=false
ionic g page nuevo-producto --spec=false
ionic g page producto-detalle --spec=false
ionic g page registro --spec=false
ionic g page user --spec=false

Por último, abrimos en el terminal la carpeta services y creamos tres servicios:

ionic g s auth --spec=false
ionic g s producto --spec=false
ionic g s token --spec=false

El proyecto nos debería quedar así:

arbolEnd

Ahora vamos a poner las imágenes en assets. Dentro de esta carpeta crearemos otra nueva llamada img. Las imágenes que utilizaremos las podéis descargar de la página iconos8.es

assets

Configuración de las rutas:

En el archivo app.routing.module vamos a modificar varios aspectos, como el nombre de algunas rutas y cambiar el inicio de home -que ya no existe- a login. También hay que añadir el parámetro id a editar y a detalle. Este es el código:

Archivo app.module.ts:

Necesitamos importar los módulos para el cliente Http y para los formularios (HttpClientModule y FormsModule, respectivamente). Dejamos el archivo así:

Y ya tenemos el proyecto configurado. En el siguiente capítulo vamos a implementar el login.

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