Blog Tecnológico

Integração offline em aplicativos Android e iOS utilizando Ionic 4

Renato Probst • 29 ago 2018

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:

Banco de dados no Firebase cloud firestore


Iniciando o desenvolvimento

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

Cloud Firestore

 

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:

Firestore

 

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.

Firebase

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:

Firebase

 

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:

Firebase

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.

Renato Probst

Renato Policeno Probst – Formado em Sistemas para Internet, com especialização em Aplicativos Móveis e Computação em Nuvem. Experiência com diversas linguagens de programação voltadas para desenvolvimento mobile (Android, Swift, Cordova, Ionic, SQLite) e desenvolvimento web (PHP, HTML5, CSS, Javascript, mySQL, RESTful).

Possui em seu portfólio mais de 12 aplicativos publicados, entre eles aplicativos para venda e classificado de veículos, CRMs, aplicativos para streaming de áudio, jogos, POS, guia de serviços, entre outros.

Também possui em seu portfólio sites e apis em tecnologia RESTful. Atua atualmente como instrutor na ENG, onde ministra cursos de desenvolvimento mobile, já tendo ministrado cursos para empresas como Grupo RPC, Prodesp, Banco do Brasil, SENAI e TRE, além de dezeas de alunos nos laboratórios da ENG SP, PR e DF.

CONTATO