Crear aplicación móvil para mensajería instantánea usando Ionic 2 y Firebase.
-
Herramientas implementadas:
- Ionic 2 (Compatible con v3)
- AngularFire2
- Firebase
-
Características
- Mensajes en tiempo real.
- Soporte para registro de usuarios.
- Detección de cambios automáticos.
- Crear proyecto con estilo tabs por defecto:
$ ionic start MessengerUdla --v2- Instalar los paquetes necesarios para Firebase:
# Usando NPM
$ npm istall angularfire2 firebase --save
# O usando yarn
$ yarn add angularfire2 firebaseAgregar credenciales y tokens de configuración de Firebase.
// app.module.ts
import { AngularFireModule, AngularFire } from "angularfire2";Crear objeto para archivos de configuración de Firebase:
// app.module.ts
const COMMON_CONFIG = {
apiKey: "AIzaSyDw8eKS2GCZ8dePI-Dhs15DtF6ewtCpg1Q",
authDomain: "messenger-6168d.firebaseapp.com",
databaseURL: "https://messenger-6168d.firebaseio.com",
storageBucket: "messenger-6168d.appspot.com/"
};Referenciar modulos de AngularFire en el @ngModule:
// app.module.ts
@NgModule({
/* ... */,
imports: [
/* ... */
AngularFireModule.initializeApp(COMMON_CONFIG)
],
/* ... */,
providers: [
/* ... */
AngularFire
]
})
export class AppModule { }La vista login permite registrar, ingresar y cerrar sesión. Para el registro es necesario unicamente un usuario y contraseña. Importante: El registro es necesario para poder enviar mensajes.
Crear pagina para Login, en el archivo login.ts se deben colocar las referencias algunos componentes que provee AngularFire:
// login.ts
import { AngularFire, FirebaseListObservable, AuthProviders, AuthMethods } from "angularfire2";Posteriormente, crear una instancia de AngularFire en el constructor:
// login.ts
constructor(
/* ... */
public af: AngularFire) {
}Las funciones para registrar, loguear y cerrar se sesión:
crear usuario
// login.ts
crear(email, pass) {
this.af.auth.createUser({ email: email, password: pass }).then(res => {
console.log("Usuario creado:", res)
}).catch(err => {
console.log("ERROR: ", err);
})
}logear usuario
// login.ts
login(email, pass) {
this.af.auth.login(
{
email: email,
password: pass
}, {
provider: AuthProviders.Password,
method: AuthMethods.Password,
}
).then(res => {
console.log("Usuario logueado:", res)
}).catch(err => {
console.log("ERROR: ", err);
})
}cerrar sesión
// login.ts
logout() {
this.af.auth.logout().then(val => {
console.log(val);
}).catch(err => {
console.log("ERROR:", err);
})
}login.html
La vista de iniciar sesión debe tener dos elementos de entrada de datos, para esto se hace uso de la directiva [(ngModel)].
<ion-header>
<ion-navbar>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label stacked>Correo</ion-label>
<ion-input [(ngModel)]="email" type="email" placeholder="¿Cúal es tu correo?"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Contraseña</ion-label>
<ion-input [(ngModel)]="pass" type="password" placeholder="Contraseña"></ion-input>
</ion-item>
<button ion-button block (click)="crear(email, pass)">Crear usuario</button>
<button ion-button block (click)="login(email, pass)">Entrar</button>
</ion-content>La página Home permite enviar y recibír mensajes de manera instantánea gracias a Firebase.
home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFire, FirebaseListObservable } from "angularfire2";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
mensaje: string = ''
mensajes: FirebaseListObservable<any>
constructor(
public navCtrl: NavController,
public af: AngularFire) {
this.mensajes = af.database.list('/mensajes')
console.log(this.mensajes)
}
enviar(mensaje:string) {
this.mensajes.push({
mensaje: mensaje,
fecha: (new Date()).toString(),
usuario: this.af.auth.getAuth().auth.email
})
}
}home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label stacked>Mensaje</ion-label>
<ion-input [(ngModel)]="mensaje" type="text" placeholder="Escribe un mensaje"></ion-input>
</ion-item>
<button ion-button color="secondary" outline full (click)="enviar(mensaje)">Enviar</button>
<p>
<ion-list>
<ion-item *ngFor="let msg of mensajes | async">
<h2>{{ msg.mensaje }}</h2>
<h3>{{ msg.usuario }}</h3>
<p>{{ msg.fecha }}</p>
</ion-item>
</ion-list>
</p>
</ion-content>