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

Integrasi angularfire2 dengan angular

0
Degananda.com -

Firebase adalah sebuah backend as a services atau BAAS yang menyediakan layanan backend mulai dari realtime database, auth, function, analytics dan lain sebagainnya. Angular merupakan framework SPA(Single page application) yang dibuat oleh google. Kita dapat mengintegrasikan kedua hal tersebut menggunakan angularfire. Silahkan simak ulasan ini.

Firebase

Sebelum membahas mengenai integrasi firebase dan angular perlu diketahui bahwa firebase adalah backend as a services atau BAAS. Keuntungan yang ditawarkan dari suatu baas dan secara khusus firebase adalah :

  1. Less code pada server (bukan berarti kita tidak perlu setup server untuk backend).
  2. Tidak perlu menyiapkan “infrastructure”.
  3. Terdapat free plan sehingga cocok untuk startup tanpa modal uangpun.
  4. Realtime database.
  5. Notification

Poin pertama mengenai less code pada server maksutnya adalah firebase tidak dapat menggantikan 100% fungsi backend untuk aplikasi melainkan hanya mensupport operasi seperti CRUD yang dapat dilakukan langsung pada Client. Hal yang paling powerful mengenai firebase adalah pada poin ke empat yakni realtime database. Jika anda memiliki project yang membutuhkan realtime database maka firebase adalah pilihan yang tepat. Karena mensetup sendiri realtime database membutuhkan effort yang cukup besar misalnya dengan menggunakan mongodb dan socket.io.

Selain itu, meski firebase adalah BAAS namun, yang paling menjadi sorotan (menurut pendapat kami) adalah dibagian integritas data dan querying. Integritas data pada firebase harus kita pastikan sendiri. Karena firebase tidak mengenal adannya relasi, trigger dan tools lain yang ada pada RDBMS untuk menjaga integritas data. Selain itu, firebase menyimpan datannya dalam bentuk JSON sederhana. Sehingga integritas data harus dijaga dengna menggunakan firebase admin. Kita harus memastikan bahwa setiap node yang berhubungan saling memiliki data terkait secara “manual”. Lebih lanjut mengenai data modelling akan dibahas pada ulasan selanjutnya.

Firebase hadir dengan free plan sehingga sangat membantu bagi kita yang sekedar ingin membuat project kecil ataukah akan memulai startup yang memiliki modal minim. Jika kita mengembangkan android maka fitur notifikasi juga dapat digunakan namun fitur tersebut tidak diakomodasi oleh angularfire.

Angularfire2

Angularfire adalah package yang dapat membantu untuk mengintegrasikan antara firebase dan angular. Meski kita juga masih dapat menggunakan library firebase javascript pada angular tetapi angularfire hadir dengan berbagai fitur menarik.  Paling utama adalah angularfire ditulis dalam bentuk typescript dan memiliki dokumentasi yang cukup lengkap. Dibandingkan menggunakan library javascript untuk firebase , angularfire lebih mudah digunakan karena sudah disesuaikan dengan framework angular.

Terdapat dua versi dari angularfire yakni untuk angular 1 dan angular 2++. Pada ulasan ini akan dibahas bagaimana melakukan integrasi atau setup anguarfire2 realtime database dengan  angular. Sebelum menuju kesana, berikut ini adalah fitur-fitur yang telah disupport oleh angularfire2 (untuk website, bukan ionic) :

  1. Mengambil data (retrieving data sebagai list ataupun object)
  2. Create , update , delete data
  3. Query terhadap list
  4. Autentikasi

memang tidak banyak yang disupport oleh angularfire contohnya fitur upload pada library firenbase untuk javascript masih belum disupport. Sehingga jika aplikasi anda menggunakan firebase storage maka fitur upload dan membaca storage masih harus menggunakan firebase untuk javascript biasa. Ulasan ini hanya akan membahas bagaimana mensetup project angular dengan angularfire.

Setup

langkah 1 – buatlah project angularfire

jika anda menggunakan exiting project anda dapat menskip langkah ini. Perintah yang digunakna adalah

ng new "nama project"

langkah 2 – install angularfire melalui NPM

package yang dinstall adalah angularfire2 dan firebase (library javascript biasa). Sehingga jika anda ingin menggunakan library untuk storage dapat langsung menggunakan package firebase. Perintah yang digunakan adalah

npm install angularfire2 firebase --save

langkah 3 – buat project pada firebase

daftarkan diri anda pada firebase dan buatlah sebuah project

langkah 4 –  atur environent variable

login pada firebase dan masuk pada salah satu project. Pada bagian kiri (sidebar) pilih icon berbentuk roda gigi atau cod dan masuk ke menu project settings seperti terlihat pada gambar dibawah ini

scroll kebawah dan pilih “add firebase to web app

copy variable config pada kode tersebut

buka app.module.ts dan paste config diatas namun gunakan const / konstanta + diexport (firebase.initializeapp tidak perlu dicopy) kemudian import modul angularfiremodule dari package angularfire2 dan inject firebase provider pada metadata import di @ngModule seperti dibawah ini

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

// import Angularfire stuff
import { AngularFireModule } from 'angularfire2';

// component
import { AppComponent } from './app.component';

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


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseEnvironment.firebase)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

done silahkan jalankan project anda jika tidak ada error maka firebase telah terintegrasi dengan angular melalui angularfire2. Jika anda mendapatkan error mengenai polyfil(Module not found: Error: Can’t resolve ‘promise-polyfill’ )

solusi yang harus dilakukan adalah

npm install promise-polyfill --save-exact