Project Setup Buku Resep – 1

by

Pendekatan tutorial adalah membuat real project, sambil mempelajar fitur-fitur Angular.

Anda bisa membuat tema project sendiri, pada tutorial akan dibuat Buku Resep.

Membuat Project Baru

Untuk membuat angular project, lihat modul https://skillplus.web.id/instalasi-dan-project-setup/

Kita akan gunakan CSS Framework Bootstrap, lihat modul https://skillplus.web.id/menggunakan-bootstrap-pada-project-angular/

Planning Aplikasi

Web app yang akan dibuat adalah seperti ini:

Setup Project

Silakan bereksperimen dengan membuat kerangka component-component diatas. Jangan lupa untuk melakukan pengelompokan component berdasarkan fiturnya.

SIlakan mencoba membuat component secara manual, dan membuat component menggunakan Angular CLI.

Pada tutorial akan dilakukan proses sebagai berikut

Header Component

Anda bisa membuat folder untuk header atau langsung didalam folder app. Pada tutorial akan dibuat folder terpisah.

Buat folder baru, src/app/header, kemudian buat file header.component.ts dan header.component.html.

//file: header.component.ts

import { Component } from "@angular/core";

@Component({
    selector: 'app-header',
    templateUrl: './header.component.html'
})

export class HeaderComponent{
    
}
<!-- file: header.component.html -->
<p>Header goes here</p>

Perhatian: karena component dibuat secara manual, jangan lupa tambahkan informasi header.component di file app.module.ts. (lihat baris import dan property declarations, ditambahkan informasi HeaderComponent).

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

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

Recipes Component

Recipes component adalah root component untuk component recipes lainnya (list, item dan detail).

Untuk recipes component kita gunakan Angular CLI.

$ ng g c recipes --skip-tests true

CLI akan memberikan konfirmasi generate component seperti berikut

CREATE src/app/recipes/recipes.component.html (22 bytes)
CREATE src/app/recipes/recipes.component.ts (279 bytes)
CREATE src/app/recipes/recipes.component.css (0 bytes) 
UPDATE src/app/app.module.ts (482 bytes)

Perhatian: option –skip-tests true berguna agar file spec.ts tidak digenerate.

Recipes Child component

Berikutnya kita buat recipes list component, yang akan disimpan dibawah folder recipes. Perhatikan, digunakan path recipes pada nama component.

$ ng g c recipes/recipe-list --skip-tests true

CREATE src/app/recipes/recipe-list/recipe-list.component.html (26 bytes)
CREATE src/app/recipes/recipe-list/recipe-list.component.ts (294 bytes)
CREATE src/app/recipes/recipe-list/recipe-list.component.css (0 bytes)
UPDATE src/app/app.module.ts (590 bytes)

Kemudian Buat component child lainnya, yaitu recipe-item dan recipe-detail.

Perhatian: Pada tutorial recipe-item akan disimpan dalam recipe-list folder.

$ ng g c recipes/recipe-detail --skip-tests true
$ ng g c recipes/recipe-list/recipe-item --skip-tests true

Shopping Component

Berikutnya kita buat shopping component, yaitu shopping-list dan shopping-edit (child dari shopping-list).

$ ng g c shopping-list --skip-tests true
$ ng g c shopping-list/shopping-edit --skip-tests true

Berikut struktur aplikasi versi tutorial, Anda bisa menggunakan pendekatan sendiri. Silakan bereksperimen.

src/app
 - header
    - header.component.html
    - header.component.ts
 - recipes
    - recipe-detail
       - recipe-detail.component.css
       - recipe-detail.component.html
       - recipe-detail.component.ts
   - recipe-list
      - recipe-item
         -recipe-item.component.css
         -recipe-item.component.html
         -recipe-item.component.ts
      - recipes-list.component.css
      - recipes-list.component.html
      - recipes-list.component.ts
   - recipe.component.css
   - recipe.component.html
   - recipe.component.ts
 - shopping-list
    - shopping-edit
       - shopping-edit.component.css
       - shopping-edit.component.html
       - shopping-edit.component.ts
    - shopping-list.component.css
    - shopping-list.component.html
    - shopping-list.component.ts

Sampai disini kita sudah selesai menyiapkan kerangka dasar aplikasi. Kedepannya, ada kemungkinan penambahan atau pengurangan.

Modul berikutnya kita mulai membuat content dari masing-masing component diatas.

Sharing is caring:

Leave a Comment