Autor de ion-book y desarrollador web especializado en el área de Front-end & HybripApps, enfocado en aprendizaje de JS y al desarrollo de apps con Angular2 y ionic2
Un Backend as a Service, es un modelo de servicio para otorgar a desarrolladores WEB Y de App Moviles una forma de vincular sus apps con almacenamiento y servicios analíticos entre otros
Velocidad
Seguridad
Auntenticación
Persistencia
Bases de datos NoSQL
Uso intensivo de JSON
Realtime
Offline
Multiplataforma
RESTful API
Conocimiento en cada plataforma
Base de código totalmente independiente
El desarrollo toma tiempo
Decremento pobre
Obsesionado por la rapidez
Basado en
Angular
Enfocado en
Nativo
Bello y personalizable
Un poderoso
CLI
Gran comunidad
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 las librerías
npm install @types/request@0.0.30 --save-dev --save-exact
npm install firebase angularfire2 --save
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
}
imports: [
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig, myFirebaseAuthConfig)
],
import { AngularFireAuth } from 'angularfire2';
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(email: string, password: string){
return this.auth.login({
email: email,
password: password
})
}
getUser(){
return this.auth.getAuth().auth;
}
logout(){
this.auth.logout();
}
this.auth.subscribe(user => {
if(user){
this.rootPage = ChatPage;
}else{
this.rootPage = LoginPage;
}
})
Ahora vamos a crear la pagina de chat
import { FirebaseListObservable, AngularFireDatabase } from 'angularfire2';
messages: FirebaseListObservable<any>;
newMessage: any = {};
constructor(
public navCtrl: NavController,
public database: AngularFireDatabase,
public authService: AuthService
) {
this.messages = this.database.list('/messages');
}
<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>
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 = {};
}
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 = {};
}
Demo
Repo
<ion-footer>
<ion-grid>
<ion-row>
<ion-col width-80>
<ion-input placeholder="Message" [(ngModel)]="newMessage.text"></ion-input>
</ion-col>
<ion-col>
<button ion-button block icon-only (click)="sendMessage()">
<ion-icon name="send"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>