DSL

UNICORDOBA- SAHAGUN

EST. JESUS DAVID VERGARA SIERRA

PASO A PASO

CREAR UN CRUD EN FIRABASE CON IONIC 4

CREAR REGISTRO Y LOGIN CON FIREBASE

Lo primero es instalar las dependencias del proyecto, para ello se usó la interfaz
de línea de comandos de ionic, para ello creamos el proyecto:

ionic start crud-maria blank

A continuación, se muestra la estructura del proyecto

Estructura del proyecto:

src
app
home
login
register
settings
tabs
Creamos las páginas para login, register, tabs y settings con el comando:
ionic generate page login
…y así para cada una de las páginas.

CONEXIÓN CON FIREBASE

Para crear el proyecto en Firebase debemos ir a la consola de ellos en la siguiente

dirección:
https://console.firebase.google.com
Allí crearemos un nuevo proyecto, al cual le pondremos un nombre y seguimos los
pasos.
Para agregar nuestra base de datos nos vamos a app.module.ts donde haremos
nuestra conexión con la base de datos, para tratar de llevar las cosas más
ordenadas llamamos a base de datos a enviroment.ts y después importamos la
clase hacia app.module.ts.
Luego en la parte de Autenticación habilitaremos para poder iniciar sesión con
correo y contraseña, además en este proyecto usaremos google como proveedores
de acceso.

Para agregar firebase a nuestro proyecto debemos instalarlo mediante npm con el
comando: npm install firebase @angular/fire –save
Podemos encontrar la documentación de angular fire en
https://github.com/angular/angularfire2

Luego procedemos hacer nuestro respectivo diseño al login.html poniendo los

botones y campos a registrar.
Para las acciones de nuestro sistema o clases logicas contaremos con un servicio que se llama
auth.service.ts importando todos los modulos necesarios.
Después tenemos todas nuestras clases crear, modificar, registrar y borrar las cuales se harán
llamando nuestra tabla Students en la base de datos e iniciar sesión, esta clases serán llamadas
sobre otra clase.

Iniciar sesion

Registrar usuario

Crear nuevo estudiante en el registro de estudiantes, actualizar,leer, borrar y salir.

Ahora procedemos hacer la parte lógica de nuestro proyecto en la clase login.ts, donde tenemos
clase de autenticar un usuario, hacer login con Gmail y por otro lado tenemos el botón register en
el que el cliente ser llevado a una nueva pagina para ser registrado.
Esta es la parte lógica de nuestra pagina de registrar un nuevo estudiante clase register.ts

Después de registrar un usuario vamos y hacer login, nos dirigimos a la nueva pagina que es home.

Donde haremos nuestro diseño home.html y su respectiva parte lógica home.ts

Comenzamos creando nuestros atributos con los que trabajaremos para la base de datos

tenemos la ngOnInit() en la que mostraremos los datos de la base de datos

Tenemos la clase para crear nuevo estudiante en la que vamos a llamar nuestra clase inter del
servicio auth.service.ts

Tenemos la opción de eliminar, actualizar y editar los datos de un estudiante

Y por últimos tenemos un botón en el cual cerraremos sesión.
 ASÍ QUEDARÍA NUESTRA APLICACIÓN

Nuestros respectivo login

Registrar nuevo usuario

Nuestro login con Google

Y aquí entramos a nuestra pagina home
Como se puede ver podemos crear en la parte superior un estudiante al crearlo se guardara y se
mostrara, donde tendremos las opcione de editar, borrar y actualizar datos.
También tenemos nuestro botón de borrar y un botón para cerrar sesión .