Menggunakan Http Request Pada Project Buku Resep – 1

Setelah kita pelajari http request pada modul sebelumnya, kita akan implementasikan pada project buku resep dari tutorial sebelumnya. File project terakhir dapat di download disini: https://drive.google.com/file/d/1B0Zm9EGZ4lAalcCXq1U2oWjTKnx4YZSr/view?usp=sharing

Pada tutorial, data resep akan disimpan di Firebase (tentu Anda dapat menggunakan server dan membuat API sendiri).

Buat project baru pada Firebase seperti yang telah dilakukan pada modul Http Request – 1,

kemudian buat realtime database untuk menyimpan data resep, seperti yang telah kita lakukan pada modul Http Request – 2. Dan gunakan url endpoint yang telah disediakan oleh Firebase, pada tutorial digunakan url: https://ng-buku-resep-c435d-default-rtdb.asia-southeast1.firebasedatabase.app/

Anda bisa menambahkan http request pada recipe.service.ts, namun pada tutorial akan digunakan file baru, agar kita dapat fokus pada topik yang dibahas, tidak dibingungkan dengan code pada modul sebelumnya.

Buka file app.component.ts, tambahkan library HttpClientModule.

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

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { RecipesComponent } from './recipes/recipes.component';
import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-item.component';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';
import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-edit.component';
import { DropDownDirective } from './shared/dropdown.directive';
import { ShoppingListService } from './shopping-list/shopping-list.service';
import { AppRoutingModule } from './app-routing.module';
import { RecipeHomeComponent } from './recipes/recipe-home/recipe-home.component';
import { RecipeEditComponent } from './recipes/recipe-edit/recipe-edit.component';
import { RecipeService } from './recipes/recipe.service';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    RecipesComponent,
    RecipeListComponent,
    RecipeDetailComponent,
    RecipeItemComponent,
    ShoppingListComponent,
    ShoppingEditComponent,
    DropDownDirective,
    RecipeHomeComponent,
    RecipeEditComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule, //import httpclientmodule
    AppRoutingModule
  ],
  providers: [ShoppingListService, RecipeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Buat file baru di folder shared, data-storage.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable({providedIn: 'root'})
export class DataStorageService{
    constructor(private http: HttpClient){}
}

Sampai disini kita sudah melakukan setup awal untuk menggunakan http request, pada modul berikutnya kita akan mulai implementasi melakukan save recipe.