Angular Http Request – 2

Setelah selesai setup Firebase backend pada modul sebelumnya, kita akan mulai menggunakan API untuk menyimpan data kedalam database.

Untuk keperluan tutorial http request, Anda dapat download file project disini https://drive.google.com/file/d/1teXBec0zHG4OcPZr2S3kbK3m2IJiH_u-/view?usp=sharing

Project sederhana yang akan memiliki tampilan seperti gambar dibawah, dimana kita dapat mempelajar proses post, fetch dan clear data.

Untuk menggunakan http request, pastikan library HttpClientModule diimport. Buka file app.module.ts

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

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

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Kemudian inject HttpClientModule melalui constructor pada modul yang akan menggunakannya. Pada tutorial pada file app.module.ts.

constructor(private http: HttpClient) {}

Post Request

Untuk melakukan post request, digunakan perintah post dengan syntax seperti berikut

http.post(url, postData).subscribe(
  responseData=>{
    //your code goese here
  }
);

Perhatian, Khusus firebase, kita gunakan link yang disediakan ketika membuat realtime database pada modul sebelumnya. Link tersebut perlu ditambahkan end point kita sendiri yang diakhiri .json. Contohnya posts.json. (url bisa berbeda tergantung penyedia service).

Buka file app.component.ts, lalu tambahkan code pada method onCreatePost.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  loadedPosts = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {}

  onCreatePost(postData: { title: string; content: string }) {
    // Send Http request
    this.http.post('https://angular03-f9c9b-default-rtdb.firebaseio.com/posts.json', postData).subscribe(
      responseData =>{
        console.log(responseData);
      }
    );
  }

  onFetchPosts() {
    // Send Http request
  }

  onClearPosts() {
    // Send Http request
  }
}

Jika Anda cek console pada browser. Dapat dilihat terdapat response data yang dikembalikan oleh Firebase.

Jika Anda buka Realtime Database pada Firebase, dapat dilihat data sudah ditambahkkan.

Dapat dilihat, responseData yang dikembalikan adalah autogenerate ID dari data yang ditambahkan kedalam Firebase.

Jika ada kendala dalam melakukan http request, Anda dapat melakukan pemeriksaan pada developer tools pada tab network.

Pada modul berikutnya kita akan membahas fetch data atau mengambil data dari firebase.