Basic Operasi Database Firebase pada Aplikasi IONIC 3 [Bahasa]

vanessaayumi (36)in #utopian-io • 7 years ago (edited)

Image Source - Sumber Gambar

Basic Tutorial of Firebase Database Operation on IONIC Applications 3 Using Indonesian Language.

What Will I Learn? (Apa Yang akan Saya Pelajari ? )

Pada tutorial kali ini anda akan mempelajari beberapa hal diantaranya.

Mengonfigurasi firebase pada project IONIC 3
Mempelajari dan mempraktekkan hirarki Create , Read, Update dan Delete pada database firebase yang diintegrasikan ke proyek IONIC 3 .

Requirements (Apa Saja Yang Diperlukan)

Yang anda perlukan untuk bisa memulai tutorial ini diantaranya

Komputer yang sudah terinstall NPM
Komputer yang sudah terinsall CLI IONIC 3
Pengetahuan dasar tentang cara membuat IONIC Project
Pengetahuan dasar HTML , CSS dan Typescript

Difficulty (Tingkat Kerumitan)

Intermediate (Menegah)

Tutorial Contents (Kontent Tutorial)

Sebelum memulai membuat proyek ionic 3 terlebih dahulu periksalah versi NPM dan CLI IONIC 3 yang ada di sistem komputer yang akan kita pakai. Anda dapat memeriksanya dengan mengunjungi situs resmi NodeJS dan Github Ionic Team.

Setelah proses pemeriksaan sistem selesai mari kita mulai dengan membuat proyek IONIC 3 proyek ini akan saya beri nama CRUDFIREBASE. Silahkan buka terminal pada komputer anda dan ketikkan perintah pada codeblock berikut ini.

$ ionic start CRUDFIREBASE blank

Dapat anda perhatikan dari command ionic diatas saya membuat sebuah project dengan perintah ionic start. Proyek yang saya buat saya beri nama CRUDFIREBASE dan menggunakan theme blank. Ada beberapa theme pada proyek IONIC anda dapat mengecek theme yang tersedia pada situs ionicframework.com atau melalu github ionic-team.

Setelah proses pembuatan project menggunakan CLI selesai silahkan buka folder CRUDFIREBASE dan lakukan cek pada package.json maka tampilannya akan seperti codeblock berikut ini.

{
  "name": "CRUDFIREBASE",
    "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project"
}

File diatas berisi daftar paket dan modul yang ada pada proyek yang baru saja kita buat menggunakan CLI IONIC. Proses berikutnya adalah memasukkan library AngularFire pada project IONIC. Caranya cukup mudah silahkan buka kembali terminal anda kemudian arahkan path pada terminal ke folder CRUDFIREBASE kemudian ketikkan perintah berikut ini.

$ npm install angularfire2 firebase

Langkah berikutnya adalah menginialisasi atau mendeklarasikan alamat dan kode kunci untuk mengakses firebase pada proyek IONIC yang kita buat. Yang harus anda lakukan adalah buat file app.config.firebase.ts pada folder src/app. Kemudian ketikkan kode berikut pada file yang tadi anda buat.

// CRUDFIREBASE Settings
export const FIREBASE_CONFIG = {
  /* isi dengan kode konfigurasi pada project firebase anda */
  };

Langkah selanjutnya kita akan memasukkan konstatnta FIREBASE_CONFIG pada file app.module.ts kemudian perhatikan pada @NgModule ubahlah bagian imports menjadi seperti kode blok berikut ini.

imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(FIREBASE_CONFIG),
    AngularFireAuthModule
  ],

Kode Berikut merupakan perintah untuk memasukkan data pada FIREBASE_CONFIG ke bagian module project. Jangan lupa melakukan import beberapa kode berikut pada bagian atas file app.module.ts terlebih dahulu

import { AngularFireModule } from 'angularfire2';

Untuk membantu anda saya berikan secara lengkap tampilan file app.module.ts. Secara lengkap file app.module.ts pada proyek CRUDFIREBASE akan terlihat seperti berikut ini. Jika ada format yang salah silahkan diperbaiki.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { AngularFireModule } from 'angularfire2';
import { MyApp } from './app.component';
import { FIREBASE_CONFIG } from './app.config.firebase';
import { HomePage} from '../pages/home/home';
@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(FIREBASE_CONFIG)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Langkah berikutnya yang akan kita lakukan adalah mendapatkan variabel console firebase dari website console.firebase.google.com. Silahkan login ke website tersebut menggunakan akun google anda kemudian buta sebuah project bernama CRUDFIREBASE. Silahkan pilih Add Firebase to your web app untuk mendapatkan variabel konfigurasi firebase.

Setelah memilih menu Add Firebase to your web app anda akan mendapatkan beberapa variabel seperti pada code block dibawah ini.

 apiKey: "",
  authDomain: "",
  databaseURL: "",
  storageBucket: "",
  messagingSenderId: ""

Silahkan tambahkan variabel tersebut pada file app.config.firebase.ts. Setelah menyimpan variabel konfigurasi dari firebase langkah berikutnya adalah membuat sebuah model data untuk data yang kita input ke database. Silahkan masuk ke folder src pada proyek CRUDFIREBASE menggunakan exploler apps pada operating system anda buat sebuah folder models dan file todo.ts pada folder src.

export interface Todo {
    judul : string;
    deskripsi : string;
}

Langkah berikutnya yang akan kita lakukan adalah melakukan templating html pada halaman home silahkan buka src/pages/home/home.html. Kita akan membuat sebuah form untuk menginput data to do list ke dalam database firebase. Ketikkan code pada block code berikut ini pada file home.html

<ion-content padding>
    <ion-item>
        <ion-label floating>Judul</ion-label>
        <ion-input type="text" [(ngModel)]="todo.judul"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Deskripsi</ion-label>
        <ion-input type="text" [(ngModel)]="todo.deskripsi"></ion-input>
      </ion-item>
  <button ion-button secondary (click)="saveData(todo)" >Simpan Data</button>
</ion-content>

Langkah berikutnya adalah melakukan import AngularFire2 dan Observable List. Silahkan tambahkan pada permulaan file home.ts.

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

Sekarang kita akan menyuntikkan AngularFire2 ke dalam constructor kita dan menginisialisasi variabel todo.

constructor(public navCtrl: NavController, angDatabase: AngularFireDatabase) {
  this.songs = angDatabase.list('/todo').valueChanges();
}

Kita telah membuat database reference yang akan merespon jika ada perubahan data pada firebase database yang ada di akun konsol aplikasi CRUDFIREBASE. Jadi jika anda melakukan input data todo pada konsol Firebase maka data tersebut akan muncul di HomePage. Proses perubahan data di database dan tampilan pada aplikasi akan berlangsung secara realtime sehingga anda tidak perlu melakukan refresh aplikasi jika ada perubahan data.

Sekarang saatnya kita menguji fitur realtime database pada firebase, untuk itu, kita akan membuat sebuah fungsi untuk menambahkan data ke dalam database todo list.

Terkadang diperlukan halaman terpisah untuk proses input dan update data pada database, tapi karena data yang di input hanyalah judul dan deskripsi kita akan membuat sebuah dialog sehingga user bisa menambahkan data tanpa berpindah ke halaman yang berbeda.

Pertama, kita akan mengimpor controller untuk dialog(Prompt) Alert atau bisa kita sebut dengan alert prompts.

import { NavController, AlertController } from 'ionic-angular';

Kemudian tambahkan AlertController ke fungsi constructor :

constructor(public navCtrl: NavController, public alertCtrl: AlertController,
  todoDatabase: AngularFire) {...}

Sekarang kita akan membuat fungsi saveData pada home.ts , yang sebelumnya telah kita deklarasikan pada element html di file home.html

saveData(){
  let prompt = this.alertCtrl.create({
    title: 'To do List',
    message: "Tambahkan daftar pekerjaan yang ingin anda lakukan",
    inputs: [
      {
        name: 'judul',
        placeholder: 'Judul',
        name: 'deskripsi',
        placeholder: 'Deskripsi'
      },
    ],
    buttons: [
      {
        text: 'Cancel',
        handler: data => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Save',
        handler: data => {
          const newTodoRef = this.todo.push({});
          newTodoRef.set({
            id: newTodoRef.key
            judul: data.judul
            deskripsi: data.deskripsi
          });
        }
      }
    ]
  });
  prompt.present();
}

Skrip diatas akan membangun sebuah dialog yang meminta user masukkan judul dan derkripsi untuk dimasukkan ke dalam to do list database di firebase. Skrip id: newTodoRef.key berfungsi untuk mebuat unique ID pada setiap node data di database firebase.

Kita telah membuat fungsi untuk menambahkan data langkah selanjutnya adalah mengubah dan menghapus data pada firebase database. Untuk mengubah dan menghapus data kita memerlukan sebuah action script. Tambahkan action sheet dengan mengikuti code block berikut silahkan ubah pada file home.ts

import {
  NavController,
  AlertController,
  ActionSheetController } from 'ionic-angular';

Sama halnya dengan AlertController, kita harus memasukkan ActionSheetController pada Constructor.

constructor(public navCtrl: NavController, public alertCtrl: AlertController,
todoDatabase: AngularFire, public actionSheetCtrl: ActionSheetController) {...}

Langkah berikutnya adalah menambahkan showOptions() pada fungsi ngClick di listview to do list file home.html. Kemudian lakukan konfigurasi berikut ini pada file home.ts

showOptions(todoID, todoJudul, todoDeskripsi) {
  let actionSheet = this.actionSheetCtrl.create({
    title: 'What do you want to do?',
    buttons: [
      {
        text: 'Delete Todo data',
        role: 'destructive',
        handler: () => {
          this.removeTodo(todoID);
        }
      },{
        text: 'Update Todo data',
        handler: () => {
          this.updateSong(todoID, todoJudul, todoDeskripsi);
        }
      },{
        text: 'Cancel',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }
    ]
  });
  actionSheet.present();
}

Fungsi di atas akan menerima to do list id , judul, dan deskripsi sebagai parameter,dan kemudian menggunakannya untuk mengatarkan data ke fungsi delete maupaun update.

Untuk fingsi delete kita akan menggunakan kode yang cukup sederhana cukup tambahkan kode .remove() , Jika ingin melakukan aksi lain atau menangkap pesan error anda bisa menamhankan .then(). Secara lengkap fungsi delete adalah seperti berikut ini.

removeTodo(todoID: string){
  this.todo.remove(todoID);
}

Berikutnya adalah fungsi updateTodo() yang menerima masukan id, judul dan deskripsi ** to do list**. Berikut ini adalah code blok lengkap untuk fungsi updateTodo.

updateTodo(todoID, todoJudul, todoDeskripsi){
  let prompt = this.alertCtrl.create({
    title: 'Upadate Todo',
    message: "Update To do List Data",
    inputs: [
      {
        name: 'judul',
        placeholder: 'Judul',
        value: judul,
        name: 'deskripsi',
        placeholder: 'Derskripsi',
        value: deskripsi
      },
    ],
    buttons: [
      {
        text: 'Cancel',
        handler: data => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Save',
        handler: data => {
          this.todo.update(todoID, {
            judul: data.judul, deskripsi:data.deskripsi
          });
        }
      }
    ]
  });
  prompt.present();
}

Fungsi di atas sebenarnya hampir sama degan fungsi saveData namun kita memiliki beberapa perbedaan dikarenakan funsi update memerlukan data id untuk mengetahui data apa yang akan di ubah. Demikianlah tutorial saya kali ini mengenai operasi dasar database firebase pada proyek IONIC3. Jika anda memiliki pertanyaan jangan ragu untuk megisinya di kolom komentar. Terima Kasih

Posted on Utopian.io - Rewarding Open Source Contributors

#programming #ionic #firebase #indonesia