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

Ionic – http services (javascript)

0
Degananda.com -

Pada aplikasi mobile fungsi http sangat penting terutama untuk mengakomodasi pertukaran data. Ini dikarenakan aplikasi mobile biasannya mendapatkan datannya melalui API(Applicaiton programming interfaces). Bagaimanakah cara menggunakan http services pada ionic ? silahkan simak ulasan ini.

Http native vs javascript

Http modul yang dimanfaatkan pada ionic terdapat dua jenis. Pertama adalah modul yang berasal dari package @angular/http yang berarti berasal dari javascript dan yang Kedua adalah modul yang berasal dari native iOS ataupun Android. Keduannya memiliki fungsi yang sama yakni untuk melakukan http request. Namun, http native memiliki keunggulan dalam hal keamanan dan juga proses pertukaran data dilakukan dibackground sehingga memiliki performa yang lebih baik.

Namun pada ulasan ini, kami akan membahas cara penggunaan modul http dari pacakge @angular/http. Untuk penjelasan mengenai native http akan dibahas pada ulasan selanjutnya. Meskipun berasal dari javascript performannya tidak terlalu jauh dibandingkan dengan native (modul http) dan jika anda familiar dengan angular JS maka modul http dari javascript ini akan lebih mudah untuk dipelajari.

Persiapan

Sebelum mengimplemetasikan modul http (javascript) kita harus menyiapkan infratrukturnya terlebih dahulu dalam kasus ini adalah API. Anda dapat menggunakan api yang telah anda buat ataukah menggunakan infrastruktur yang kami buat. Untuk membuat api sederhana kita dapat memanfaatkan firebase database namun tidak menggunakan SDK nya untuk mengkasesnya melainkan akan diakses melalui http biasa.

Langkah 1 buatlah project firebase

langkah 2 – buat beberapa data pada database

Firebase merupakan BAAS (Background as a service) yang menyediakan berbagai laynanan mulai dari realtime database, notifikasi, auth, function dan lain sebagainnya. Namun dilain sisi jika kita tidak menggunakan SDK dari firebase database tersebut dapat kita akses selayaknya suatu API / Web services melalui http. Berikut ini adalah data yang kami gunakan (anda bebas menggunakan data apapun).


{
  "note" : {
    "_id1" : {
      "isi_note" : "buku kalkulus halaman 2",
      "judul_note" : "PR matematika",
      "link_attachment" : "http://blabla.com",
      "user" : {
        "dega" : {
          "email" : "degananda.ferdian@gmail.com",
          "nama" : "degananda ferdian"
        }
      }
    },
    "_id2" : {
      "isi_note" : "list nama kingdom",
      "judul_note" : "PR Biologi",
      "link_attachment" : "http://blabla.com",
      "user" : {
        "dega" : {
          "email" : "degananda.ferdian",
          "nama" : "degananda ferdian"
        }
      }
    }
  },
  "user" : {
    "dega" : {
      "email" : "degananda.ferdian@gmail.com",
      "nama" : "degananda ferdian"
    }
  }
}

jika anda ingin menggunakan endpoint ini untuk mengikuti ulasan ini berikut ini adalah url dari data diatas.

https://angular-note-9a26a.firebaseio.com/note.json

atau anda juga dapat mengimport data json keatas pada database firebase anda melalui tombol berikut ini.

url endpoint dari database anda dapat anda lihat pada link yang berada diatas breadcumb di realtime database seperti pada gambar dibawah ini dan dengan menambahkan .json dibelakangnya.

Anda dapat mengaksesnya layaknya sebuah endpoint. Berikut ini adalah contoh ketika endpoint diatas diakses melalui REStclient (sejenis postman).

Implementasi

Http modul berada dalam package @angular/http yang mana merupakan library dari javascript. Komponen-komponen yang harus ada(wajib) saat anda membuat melakukan http request adalah

  1. Endpoint atau url dari API.
  2. Http method (GET / POST / PUT / DELETE dan lain sebagainnya).

selain dua hal diatas merupakan opsional. Artinnya tergantung dengan konfigurasi API yang akan diakses. Misalnya terdapat API yang mengharuskan menggunakan http basic auth dan format pertukaran datannya adalah XML maka kita perlu untuk mendefinisikan headernya. Pada ulasan ini kita akan menggunakan kasus basic yakni endpoint firebase diatas dimana tidak memerlukan auth ataupun seting header untuk format pertukaran data karena hanya berupa HTTP GET. Biasannya mendefinisikan header(content-type) dilakukan saat post / put.

langkah 1 – buatlah provider

provider diperlukan karena http ini akan berjalan pada shared services. Meski kita juga dapat menggunakan http tanpa membuat provider / services tetapi kami menyarankan segala jenis kegiatan yang melibatkan http letakannya di provider / services. Hal ini dikarenakan adannya kemungkinan bahwa fungsi http tersebut akan dapat digunakan diberbagai komponen /page atau guna untuk memberikan sifat reuseable.

Untuk membuat provider perintah yang digunakan adalah (note = murupakan nama provider, ganti dengan nama provider anda). Kami menyarankan untuk membuatnya melalui CLI karena provider yang terbuat akan langsung terintegrasi dengan modul angular sehingga dapat mempersingkat waktu pengerjaan.

ionic generate provider note

langkah 2 – membuat fungsi yang mengimpmentasikan http

Pada kasus ini kita akan membuat fungsi untuk mengakses endpoint firebase untuk mendapatkan data note. Kita akan menggunakan observable untuk menerapkan reactive programming serta fungsi map untuk mentrasnformasikan response dari firebase menjadi json.


import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class NoteProvider {

  constructor(public http: Http) {
    console.log('Hello NoteProvider Provider');
  }

  getNote() : Observable<any> {
    return this.http.get('https://angular-note-9a26a.firebaseio.com/note.json').map(
        (res : Response) => res.json()
    );

  }

}


langkah 3 – import http module

kita belum dapat menggunakan http pada provider yang telah kita buat. Pada app.component.ts importlah HttpModul dari package @angular/http dan inject ke metadata imports pada @ngModule. Barulah http dapat digunakan


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';
// http
import { HttpModule } from '@angular/http';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { NoteProvider } from '../providers/note/note';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    NoteProvider
  ]
})
export class AppModule {}


langkah 4 – memanggil provider

Provider  / services dapat kita panggil pada suatu komponen atau page dengan metode DI (Dependency injection) di constructornya dengan menggunakan property “public” / “private”  tergantung dari kasusnya.


import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
// import provider
import { NoteProvider } from './../../providers/note/note';

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

  constructor(public navCtrl: NavController, public noteProvider : NoteProvider) {
    this.noteProvider.getNote().subscribe(
      (res) => {
        console.log(res)
      }
    )
  }

}


Untuk mendapatkan datannya kita akan menggunakan subscribe seperti pada contoh kode diatas. Jika anda belum familar dengan observable maka kami sarankan untuk membaca ulasan berikut ini

Angular – penjelasan observable

hasil dari kode-kode diatas saat ionic dijalankan pada browser adalah sebagai berikut :

viola! kita telah berhasil melakukan http request pada suatu endpoint dan mendapatkan datannya dalam bentuk json. Simak ulasan selanjutnya untuk melakukan http request tidak dengan menggunakan observable melainkan menggunakan promise.