lifelong learner — urip iku urup, currently working on accenture.

menggunakan angularfire2 pada ionic 3+

0
Degananda.com -

Angularfire adalah library yang digunakan untuk mengintegrasikan aplikasi (frontend) yang dibangun dengan menggunakan firebase. Firebase adalah backend as a service yang menyediakan layanan meliputi database, auth, notification, dan lain sebagainnya.

Selayang pandang

Jika anda menggunakan ionic versi dua atau satu maka ulasan ini tidak relevan karena setup angularfire2 pada ionic versi 1/2 berbeda dengan ionic versi 3+. Pastikan bahwa project anda menggunakan versi 3+ ionic serta angular versi 4+. Carannya yakni melihat pada file package.json. File ini berada di bagian paling luar project ionic anda(tidak didalam folder).

silahkan anda buka file package.json tersebut dan pada bagian “depedencies” lihat line yang menunjukan package @ionic dan @angular. Contoh pada gambar dibawah ini project kami menggunakan angular versi 4.1.3 (which is lumayan out dated , saat ini july 25 2017 versi terahir adalah 4.3.3) dan ionic versi 3.12.1.

Jika telah memenuhi syarat diatas maka anda dapat mengikuti ulasan ini. Namun jika tidak maka anda dapat melihat ulasan khusus untuk versi ionic 2 dan angular 2. Integrasi tidak akan berfokus pada modul firebase auth (google / facebook / twitter). Autentikasi akan dibahas di ulasan selanjutnnya. Tentunnya jika angular dan ionic telah terinstall maka secara default nodejs pasti telah ada di komputer / laptop anda. Jika anda belum membuat project ionic maka gunakan perintah dibawah ini

ionic start nama_project

kemudian pilih template default (sidemenu / blank atau tabs) gunakan sesuai dengan requirement project anda. Berikut ini adalah spesifikasi dari ionic yang kami gunakan pada ulasan ini. Anda dapat menggunakan perintah dibawah ini untuk mengetahui spesifikasi dari ionic

ionic info

installasi

1.install firebase dan angularfire2

kita menggunakan npm untuk melakukan install firebase dan angularfire2 , perintah yang digunakan adalah

npm install angularfire2 firebase --save

setelah perintah diatas dijalankan seharusnya package.json di project anda telah terupdate. Terdapat  package angularfire dan juga firebase.

2.membuat project firebase

buka firebase.google.com kemudian buatlah sebuah project web disana.

3. Import 3 modul utama dari package angularfire.

terdapat tiga buah modul yang harus di import dari package angularfire. Lakukan import di @ngModule yang terdapat pada file app.module.ts. Jangan lupa nantinnya ketiga modul tadi di inject pada metadata imports di @ngModule.

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';

Lihat pada langkah ke empat (dibawah ini) karena langkah 3 dan 4 saling berhubungan.

4. Seting firebaseconfig

Masuk pada konsol (console.firebase.google.com) firebase dan pilih project anda. Klik ikon “add firebase to your web app” maka akan muncul konfigurasi project firebase anda.

setelah itu pada bagian imports (@ngModule) untuk mengintegrasikan firebase dan angularfire2. Sehingga secara keseluruhan isi dari app.module.ts adalah sebagai berikut ini.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

// angular

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';

// firebase config
export const firebaseConfig = {
    apiKey: "AIzaSyDMvfjVNu3AksNImAgYoHUsYRvDTxxISN8",
    authDomain: "angular-note-9a26a.firebaseapp.com",
    databaseURL: "https://angular-note-9a26a.firebaseio.com",
    storageBucket: "angular-note-9a26a.appspot.com",
    messagingSenderId: "633605417652"
};

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

5. Jalankan server development untuk ionic

gunakan perintah dibawah ini untuk menjalankan development server dari ionic.

ionic serve

jika tidak ada error maka angularfire2 telah berhasil di install.

6. Pengujian

namun untuk lebih yakin bahwa angularfire2 dan ionic telah terintegrasi kita akan mencoba mengambil data dari firebase. Buatlah endpoint di firebase (terserah hanya untuk uji coba). Pada kasus ini berikut adalah data yang kami miliki.

kita akan menampilkan data diatas dalam bentuk ion-list pada ionic. Pada salah satu halaman / page importlah modul FirebaseListObservable. Kemudian tuliskan kode dibawah ini.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FirebaseListObservable, AngularFireDatabase } from 'angularfire2/database';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  dataNote : FirebaseListObservable<any[]>;

  constructor(
    public navCtrl: NavController,
    private af : AngularFireDatabase
  ) {
    this.dataNote = this.af.list('/note');
    this.dataNote.subscribe(
      (res) => {
        console.log(res)
      }
    )
  }
  

}

Sedikit penjelasan, FirebaseListObservable adalah modul yang digunakan sebagai tipedata dari data yang diambil dari firebase. AngularFireDatabase merupakan instances dari angularfire2. Jika kita menggunakan angular versi dua dulu bernama AngularFire. Subscribe digunakan untuk mengambil nilai/data dari observable. /note adalah endpoint yang ada pada firebase anda.

Jalankan kode diatas jika pada konsol menampilkan data dari firebase anda maka firebase telah berhasil terintegrasi dengan ionic. selamat.

dari gambar diatas maka kita telah berhasil mengintegrasikan firebase dan ionic menggunakan angularfire2.