https://github.com/juliandavidmr/messengerudla
Aplicación móvil para mensajería instantánea usando Ionic 2 y Firebase. Demostración para el taller de desarrollo de aplicaciones móviles.
https://github.com/juliandavidmr/messengerudla
firebase ionic2 messenger udla
Last synced: about 2 months ago
JSON representation
Aplicación móvil para mensajería instantánea usando Ionic 2 y Firebase. Demostración para el taller de desarrollo de aplicaciones móviles.
- Host: GitHub
- URL: https://github.com/juliandavidmr/messengerudla
- Owner: juliandavidmr
- Created: 2017-04-27T04:49:50.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-06-02T09:30:29.000Z (about 9 years ago)
- Last Synced: 2025-01-06T00:30:30.396Z (over 1 year ago)
- Topics: firebase, ionic2, messenger, udla
- Language: TypeScript
- Size: 1.64 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **Sistema de mensajería instantánea**
> Crear aplicación móvil para mensajería instantánea usando Ionic 2 y Firebase.
* **Herramientas implementadas:**
1. Ionic 2 (Compatible con v3)
2. AngularFire2
3. Firebase
* **Características**
1. Mensajes en tiempo real.
2. Soporte para registro de usuarios.
3. Detección de cambios automáticos.
## **Capturas**
## **Desarrollo**
### **Crear proyecto e instalar paquetes**
- Crear proyecto con estilo tabs por defecto:
```bash
$ ionic start MessengerUdla --v2
```
- Instalar los paquetes necesarios para **Firebase**:
```bash
# Usando NPM
$ npm istall angularfire2 firebase --save
# O usando yarn
$ yarn add angularfire2 firebase
```
### **Referenciar credenciales y tokens de Firebase**
Agregar credenciales y tokens de configuración de Firebase.
```ts
// app.module.ts
import { AngularFireModule, AngularFire } from "angularfire2";
```
Crear objeto para archivos de configuración de Firebase:
```ts
// 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`:
```ts
// app.module.ts
@NgModule({
/* ... */,
imports: [
/* ... */
AngularFireModule.initializeApp(COMMON_CONFIG)
],
/* ... */,
providers: [
/* ... */
AngularFire
]
})
export class AppModule { }
```
### **Crear elementos para Login**
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`:
```ts
// login.ts
import { AngularFire, FirebaseListObservable, AuthProviders, AuthMethods } from "angularfire2";
```
Posteriormente, crear una instancia de `AngularFire` en el constructor:
```ts
// login.ts
constructor(
/* ... */
public af: AngularFire) {
}
```
Las funciones para registrar, loguear y cerrar se sesión:
> crear usuario
```ts
// 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
```ts
// 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
```ts
// 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)]`.
```html
Login
Correo
Contraseña
Crear usuario
Entrar
```
### **Crear elementos para Home**
La página `Home` permite enviar y recibír mensajes de manera instantánea gracias a Firebase.
> home.ts
```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
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
```html
Home
Mensaje
Enviar
{{ msg.mensaje }}
{{ msg.usuario }}
{{ msg.fecha }}
```
### Más información
- [AngularFire2-Auth](https://github.com/angular/angularfire2/blob/master/docs/5-user-authentication.md)
- [Auth Firebase](http://tphangout.com/ionic-2-authentication-using-firebase)
- [Guía en inglés](https://www.joshmorony.com/building-a-crud-ionic-2-application-with-firebase-angularfire)
- [Guía 2 en inglés](https://www.pluralsight.com/guides/front-end-javascript/using-angularfire2-to-build-ionic-2-firebase-apps)
- [Quickstart firebase](https://firebase.google.com/docs/database/security/quickstart)