Daftar Isi

1. Pengantar Angular 2 dan E-Commerce
2. Persiapan Lingkungan Pengembangan
3. Struktur Proyek Angular 2
4. Membuat Komponen Utama
5. Routing dan Navigasi
6. Membuat Layanan (Service) untuk Data Produk
7. Menampilkan Daftar Produk
8. Halaman Detail Produk
9. Fitur Keranjang Belanja
10. Halaman Checkout
11. Autentikasi Pengguna
12. Deploy Aplikasi
13. Sumber Belajar dan Source Code

1. Pengantar Angular 2 dan E-Commerce

Angular 2 adalah framework front-end yang dikembangkan oleh Google untuk membangun aplikasi web yang dinamis dan responsif. Dalam panduan ini, kita akan membangun aplikasi e-commerce sederhana yang memungkinkan pengguna melihat produk, menambahkannya ke keranjang, dan melakukan checkout.

Aplikasi e-commerce ini akan menggunakan Angular 2 dengan TypeScript, memanfaatkan komponen, layanan, dan routing untuk membuat pengalaman pengguna yang mulus.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai coding, pastikan Anda sudah menginstal beberapa tools berikut:

• Node.js (versi terbaru) dan npm
• Angular CLI (Command Line Interface) dengan perintah npm install -g @angular/cli
• Editor kode seperti Visual Studio Code

Untuk membuat proyek baru, jalankan perintah berikut di terminal:

ng new ecommerce-app --routing --style=css
cd ecommerce-app
ng serve
      

Perintah ini akan membuat proyek Angular baru dengan routing dan menjalankan server pengembangan di http://localhost:4200 .

3. Struktur Proyek Angular 2

Setelah membuat proyek, struktur folder utama yang perlu diperhatikan adalah:

• src/app/ - Tempat semua komponen, layanan, dan modul aplikasi
• src/assets/ - Tempat menyimpan gambar dan file statis
• src/environments/ - Konfigurasi environment

Struktur ini memudahkan pengelolaan kode dan pengembangan aplikasi secara modular.

4. Membuat Komponen Utama

Komponen adalah blok bangunan utama dalam Angular. Kita akan membuat beberapa komponen seperti:

• HomeComponent - Halaman utama
• ProductListComponent - Menampilkan daftar produk
• ProductDetailComponent - Detail produk
• CartComponent - Keranjang belanja
• CheckoutComponent - Halaman checkout

Contoh membuat komponen ProductList dengan Angular CLI:

ng generate component product-list
      

Ini akan membuat folder product-list dengan file komponen di dalamnya.

5. Routing dan Navigasi

Routing memungkinkan navigasi antar halaman tanpa reload. Contoh konfigurasi routing di app-routing.module.ts :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductListComponent },
  { path: 'products/:id', component: ProductDetailComponent },
  { path: 'cart', component: CartComponent },
  { path: 'checkout', component: CheckoutComponent },
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

      

Dengan ini, pengguna dapat berpindah halaman menggunakan URL yang sesuai.

6. Membuat Layanan (Service) untuk Data Produk

Layanan Angular digunakan untuk mengelola data dan logika bisnis. Kita buat layanan untuk produk:

ng generate service product
      

Contoh isi product.service.ts :

import { Injectable } from '@angular/core';

export interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  imageUrl: string;
}

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private products: Product[] = [
    {
      id: 1,
      name: 'Sepatu Olahraga',
      description: 'Sepatu olahraga nyaman untuk lari dan gym.',
      price: 750000,
      imageUrl: 'https://placehold.co/400x300/png?text=Sepatu+Olahraga'
    },
    {
      id: 2,
      name: 'Tas Ransel',
      description: 'Tas ransel stylish dan tahan air.',
      price: 500000,
      imageUrl: 'https://placehold.co/400x300/png?text=Tas+Ransel'
    },
    {
      id: 3,
      name: 'Jam Tangan Pintar',
      description: 'Jam tangan pintar dengan berbagai fitur kesehatan.',
      price: 1500000,
      imageUrl: 'https://placehold.co/400x300/png?text=Jam+Tangan+Pintar'
    },
    {
      id: 4,
      name: 'Kacamata Hitam',
      description: 'Kacamata hitam UV protection untuk gaya sehari-hari.',
      price: 300000,
      imageUrl: 'https://placehold.co/400x300/png?text=Kacamata+Hitam'
    },
    {
      id: 5,
      name: 'Headphone Wireless',
      description: 'Headphone wireless dengan suara jernih dan bass kuat.',
      price: 850000,
      imageUrl: 'https://placehold.co/400x300/png?text=Headphone+Wireless'
    }
  ];

  constructor() { }

  getProducts(): Product[] {
    return this.products;
  }

  getProductById(id: number): Product | undefined {
    return this.products.find(p => p.id === id);
  }
}

      

Layanan ini menyediakan data produk yang bisa dipakai di komponen lain.

7. Menampilkan Daftar Produk

Di product-list.component.ts , kita ambil data produk dari layanan dan tampilkan di template:

import { Component, OnInit } from '@angular/core';
import { Product, ProductService } from '../product.service';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
  products: Product[] = [];

  constructor(private productService: ProductService) { }

  ngOnInit(): void {
    this.products = this.productService.getProducts();
  }
}

      

Template product-list.component.html :

Dengan ini, pengguna dapat melihat daftar produk dengan gambar, deskripsi, dan harga.

8. Halaman Detail Produk

Halaman detail menampilkan informasi lengkap produk dan tombol untuk menambah ke keranjang.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Product, ProductService } from '../product.service';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  product: Product | undefined;

  constructor(
    private route: ActivatedRoute,
    private productService: ProductService
  ) { }

  ngOnInit(): void {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.product = this.productService.getProductById(id);
  }

  addToCart(product: Product) {
    // Logika menambah produk ke keranjang akan dibuat di bagian keranjang
    alert(product.name + ' ditambahkan ke keranjang!');
  }
}

      

Template product-detail.component.html :

Tombol "Tambah ke Keranjang" akan kita kembangkan lebih lanjut di bagian fitur keranjang.

9. Fitur Keranjang Belanja

Keranjang belanja menyimpan produk yang dipilih pengguna. Kita buat layanan cart.service.ts untuk mengelola keranjang:

import { Injectable } from '@angular/core';
import { Product } from './product.service';

@Injectable({
  providedIn: 'root'
})
export class CartService {
  private items: Product[] = [];

  constructor() { }

  addToCart(product: Product) {
    this.items.push(product);
  }

  getItems(): Product[] {
    return this.items;
  }

  clearCart() {
    this.items = [];
    return this.items;
  }
}

      

Modifikasi fungsi addToCart di product-detail.component.ts :

import { CartService } from '../cart.service';

constructor(
  private route: ActivatedRoute,
  private productService: ProductService,
  private cartService: CartService
) { }

addToCart(product: Product) {
  this.cartService.addToCart(product);
  alert(product.name + ' berhasil ditambahkan ke keranjang!');
}

      

Buat komponen keranjang cart.component.ts untuk menampilkan isi keranjang:

import { Component, OnInit } from '@angular/core';
import { CartService } from '../cart.service';
import { Product } from '../product.service';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
  items: Product[] = [];

  constructor(private cartService: CartService) { }

  ngOnInit(): void {
    this.items = this.cartService.getItems();
  }

  clearCart() {
    this.items = this.cartService.clearCart();
  }

  getTotal(): number {
    return this.items.reduce((acc, item) => acc + item.price, 0);
  }
}

      

Template cart.component.html :

Dengan ini, pengguna dapat melihat isi keranjang dan total harga.

10. Halaman Checkout

Halaman checkout berisi form pengisian data pengiriman dan pembayaran. Contoh sederhana:

import { Component } from '@angular/core';
import { CartService } from '../cart.service';

@Component({
  selector: 'app-checkout',
  templateUrl: './checkout.component.html',
  styleUrls: ['./checkout.component.css']
})
export class CheckoutComponent {
  name = '';
  address = '';
  phone = '';
  items = this.cartService.getItems();

  constructor(private cartService: CartService) { }

  onSubmit() {
    alert('Terima kasih, pesanan Anda sedang diproses!');
    this.cartService.clearCart();
    this.name = '';
    this.address = '';
    this.phone = '';
  }
}

      

Template checkout.component.html :

Form ini akan mengumpulkan data pengguna dan mengosongkan keranjang setelah submit.

11. Autentikasi Pengguna

Untuk aplikasi e-commerce yang lebih lengkap, autentikasi pengguna sangat penting. Anda bisa menggunakan Firebase Authentication atau layanan lain.

Contoh sederhana menggunakan Firebase:

• Daftarkan aplikasi di Firebase Console
• Install Firebase SDK dengan npm install firebase @angular/fire
• Konfigurasi modul AngularFire di app.module.ts
• Buat layanan autentikasi untuk login, register, dan logout

Dokumentasi lengkap bisa ditemukan di Angular Official dan Firebase Authentication .

12. Deploy Aplikasi

Setelah aplikasi selesai, Anda bisa melakukan deploy ke hosting seperti Firebase Hosting, Netlify, atau Vercel.

Contoh deploy dengan Firebase Hosting:

1. Build aplikasi dengan ng build --prod
2. Install Firebase CLI dengan npm install -g firebase-tools
3. Login ke Firebase dengan firebase login
4. Inisialisasi hosting dengan firebase init dan pilih folder dist/ecommerce-app
5. Deploy dengan firebase deploy

Aplikasi Anda akan tersedia secara online dengan URL yang diberikan Firebase.

13. Sumber Belajar dan Source Code

Berikut beberapa sumber belajar dan referensi untuk memperdalam Angular dan pengembangan e-commerce:

• Angular Official Tutorial - Panduan resmi Angular dari Google.
• Udemy - The Complete Guide to Angular 2+ - Kursus lengkap berbayar.
• Firebase Web Setup - Dokumentasi Firebase untuk autentikasi dan hosting.
• GitHub Angular Repository - Source code Angular.
• Source Code Contoh Aplikasi E-Commerce Angular 2 - Contoh lengkap aplikasi e-commerce (ganti dengan repo Anda).

Selalu praktikkan dengan membuat proyek sendiri dan eksplorasi fitur Angular untuk menguasai framework ini.