Presentamos a

El Back-end en tiempo real para tu APP

Resultado

1. Bases de datos NoSQL

2. Uso intensivo de JSON

3. Realtime

4. Offline

5. Multiplataforma

6. RESTful API

Firebase Database

Presentamos a

Aplicaciones hibridas

1. Podemos utilizar nuestros conocimientos web en HTML, JS Y CSS
2. Corren en un Webview 
3. Se conectan a las partes nativas por medio de cordova
4. Una sola base de codigo

"Quiero un app nativa"

No siempre es lo adecuado

Desventajas de Nativo

1. Conocimiento en cada plataforma

2. Base de código totalmente independiente

3. El desarrollo toma tiempo

4. Decremento pobre

Todas las plataformas

Obsesionado por la rapidez

Basado en

Angular

Enfocado en

Nativo

Bello y personalizable

Un poderoso

CLI

Gran comunidad

Construido por NERDS (como tú)

Ionic Framework

Muéstrame el codigo

Manos a la obra

npm install -g cordova ionic

Instalamos ionic

//Nos basamos en un template
ionic start myApp blank --v2

cd myApp
//Agregamos nuestras platformas
ionic platform add android
ionic resources

Empezamos un proyecto

Agregamos Firebase

//Agregamos las librerías
npm install @types/request@0.0.30 --save-dev --save-exact
npm install firebase angularfire2 --save

Incluímos en app.module.ts

import { AngularFireModule, AuthProviders, AuthMethods } from 'angularfire2';

export const firebaseConfig = {
  apiKey: "AIzaSyAzCa_ln4xFu50Azk7EEq95MDmnsRAw52Q",
  authDomain: "chat-12b2e.firebaseapp.com",
  databaseURL: "https://chat-12b2e.firebaseio.com",
  storageBucket: "chat-12b2e.appspot.com",
  messagingSenderId: "70646797274"
};

const myFirebaseAuthConfig = {
  provider: AuthProviders.Password,
  method: AuthMethods.Password
}

Incluímos en imports

imports: [
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig, myFirebaseAuthConfig)
],

Ionic g provider auth

importaciones

import { AngularFireAuth } from 'angularfire2';

register

register(email: string, password: string, image: string){
    return this.auth.createUser({
      email: email,
      password: password,
    })
    .then(data =>{
      return this.auth.getAuth().auth.updateProfile({
        displayName: '',
        photoURL: image
      })
    })
  }

login

login(email: string, password: string){
    return this.auth.login({
      email: email,
      password: password
    })
  }

getUser y logout

getUser(){
    return this.auth.getAuth().auth;
}

logout(){
    this.auth.logout();
}

listener Auth

this.auth.subscribe(user => {
    if(user){
        this.rootPage = ChatPage;
    }else{
        this.rootPage = LoginPage;
    }
})

Creamos los forms que consumirán el servicio

Resultado

Respiramos

Ahora vamos a crear la pagina de chat

ionic g page chat

Importaciones

import { FirebaseListObservable, AngularFireDatabase  } from 'angularfire2';

Declaración de variables

  messages: FirebaseListObservable<any>;
  newMessage: any = {};

  constructor(
    public navCtrl: NavController,
    public database: AngularFireDatabase,
    public authService: AuthService
  ) {
    this.messages = this.database.list('/messages');
  }

Iterar mensajes

<ion-list>
    <ion-item *ngFor="let message of messages | async" text-wrap>
      <ion-avatar item-left>
        <img *ngIf="message.user.image" [src]="message.user.image">
        <img *ngIf="!message.user.image" src="assets/imgs/avatar.png">
      </ion-avatar>
      <h2>{{ message.user.email }}</h2>
      <p>{{ message.text }}</p>
    </ion-item>
  </ion-list>

Métodos

logout(){
    this.authService.logout();
 }

 sendMessage(){
    this.newMessage.user = {
      email: this.authService.getUser().email,
      image: this.authService.getUser().photoURL
    }
    this.messages.push( this.newMessage );
    this.newMessage = {};
  }

Agregar imagen

logout(){
    this.authService.logout();
 }

 sendMessage(){
    this.newMessage.user = {
      email: this.authService.getUser().email,
      image: this.authService.getUser().photoURL
    }
    this.messages.push( this.newMessage );
    this.newMessage = {};
  }

Title Text

Subtitle

LISTO!!

http://www.ion-book.com/laucher/chat-firebase/

https://github.com/nicobytes/chatIonicFirebase

Demo

Repo