Blog Tecnológico

O Ionic é uma das ferramentas de desenvolvimento híbrido mais utilizadas do mundo. Através dele é possível criar aplicativos Android e iOS utilizando TypeScript e HTML5.

O Ionic permite a integração com o Firebase, conjunto de funcionalidades Cloud da Google. Utilizando o firebase em conjunto com o Ionic podemos criar um aplicativo que funciona 100% offline utilizando o firebase Cloud Firestore.

Criando o banco de dados no Firebase Cloud Firestore

Para criar o banco de dados que utilizaremos na integração devemos acessar o console do firebase e criar um projeto:

Iniciando o desenvolvimento

Após criar o projeto do firebase iremos adicionar o suporte ao Cloud Firestore utilizando a biblioteca Angularfire2:

App.module.ts

export const config = {
    apiKey: "AIzaSyBqU_xhD4d6H4zu0MiOrRY9LlI0qn_99sw",
    authDomain: "teste-ionic-1d230.firebaseapp.com",
    databaseURL: "https://teste-ionic-1d230.firebaseio.com",
    projectId: "teste-ionic-1d230",
    storageBucket: "",
    messagingSenderId: "136221593539"
  };
  
  
  @NgModule({
    declarations: [
      MyApp,
      HomePage
    ],
    imports: [
      AngularFireModule.initializeApp(config),
      AngularFirestoreModule.enablePersistence(),
  
      NgPipesModule,
      BrowserModule,
      HttpClientModule,
      IonicModule.forRoot(MyApp),
      IonicStorageModule.forRoot(),
      ComponentsModule
    ],

...

Na sequência iremos criar o banco de dados no firebase no modo de testes para que possamos acessa-lo de forma mais pratica:

Cloud Firestore

O Cloud Firestore trabalha com uma base de dados não relacional. Ele separa os tipos de dados por coleções. Cada coleção atua como se fosse uma tabela do banco.

Cada item de uma coleção é chamado de documento e possui um id alfanumérico único (o id precisa ser alfanumérico para que ao ser gerado offline, a possibilidade do id já existir na base online ser menor).

Por fim vamos criar um Provider para que seja realizado o acesso ao banco de dados do Cloud Firestore:

…

@Injectable()
  export class FirebaseProvider {
  
    private itemsCollection: AngularFirestoreCollection<any>;
    items: Observable<any[]>;
  
    constructor(private angularFirestore: AngularFirestore) {
      console.log('Hello BuildingFirebaseProvider Provider');
    }
  
    getAll() {
      this.itemsCollection = this.angularFirestore.
        collection<any>('sales');
  
      this.items = this.itemsCollection.snapshotChanges().map(actions => {
        return actions.map(item => {
          const data = item.payload.doc.data();
          const id = item.payload.doc.id;
  
          return { id, ...data };
        });
      });
  
      return this.items;
    }
  
    getById(id) {
      var doc = this.angularFirestore.collection<any>('sales').doc(id);
  
      return doc.ref.get().then((doc) => {
        const data = doc.data();
        const id = doc.id;
        return { id, ...data };
      })
    }
  
    add(object) {
      this.itemsCollection = this.angularFirestore.
      collection<any>('sales');
      return this.itemsCollection.add(object);
    }
  
    edit(object) {
      return this.angularFirestore.collection<any>('sales')
      .doc(object.id).update(object);
    }
  
  }

 …

Criaremos também a página de lista e a página de adicionar venda:

List.ts
…

getData() {
  
    this.firebaseProvider.getAll().subscribe((data: any) => {
      

        this.list = data;

      }
    }, (error) => {
  
    })
  }

…

Add-edit.ts
…

onSubmit(form : NgForm) {
    if (form.valid) {
      this.firebaseProvider.add(this.sale)
      .subscribe((data) => {
        this.navCtrl.pop();
        this.showSuccessMessage();
      })
    }
  }

…

Agora sempre que adicionarmos uma venda ela será sincronizada com o servidor do Cloud Firestore:

Se o dispositivo estiver offline na hora de adicionar a venda, a venda será salva em um banco de dados local e automaticamente sincronizada com o Firebase assim que houver internet.

Os itens adicionados através de outros celulares ou diretamente na base também são automaticamente sincronizados no dispositivo, permitindo que múltiplos usuários trabalhem com o mesmo banco de dados.

Gostou deste conteúdo?