Daftar Isi

1. Pengantar dan Gambaran Umum
2. Persiapan Lingkungan Pengembangan
3. Membangun REST API dengan ASP.NET Core
4. Membangun Frontend dengan Angular
5. Integrasi Angular dengan ASP.NET Core API
6. Deployment dan Pengujian Aplikasi
7. Sumber Belajar dan Source Code

1. Pengantar dan Gambaran Umum

Dalam ebook ini, Anda akan belajar membangun aplikasi web lengkap menggunakan Angular sebagai frontend dan ASP.NET Core sebagai backend REST API. Pendekatan ini sangat populer untuk membuat aplikasi modern yang scalable dan maintainable.

Angular adalah framework frontend berbasis TypeScript yang powerful, sedangkan ASP.NET Core adalah framework backend cross-platform dari Microsoft yang mendukung pembuatan REST API dengan performa tinggi.

Ebook ini akan membimbing Anda langkah demi langkah mulai dari persiapan lingkungan, pembuatan API, frontend, integrasi, hingga deployment.

2. Persiapan Lingkungan Pengembangan

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

• Visual Studio Code (atau IDE favorit Anda)
• Node.js dan npm (untuk Angular)
• .NET 7 SDK (untuk ASP.NET Core)
• Angular CLI (install dengan npm install -g @angular/cli )
• Postman atau Insomnia untuk testing API

Setelah semua terpasang, Anda bisa mulai membuat project baru untuk backend dan frontend.

3. Membangun REST API dengan ASP.NET Core

Langkah pertama adalah membuat backend REST API menggunakan ASP.NET Core. Ikuti langkah berikut:

1. Buat project baru ASP.NET Core Web API:
   Jalankan perintah di terminal:

   dotnet new webapi -n MyWebApi
             

2. Masuk ke folder project:
   

   cd MyWebApi
             

3. Buat model data sederhana, misalnya Product.cs di folder Models:
   

   namespace MyWebApi.Models
   {
       public class Product
       {
           public int Id { get; set; }
           public string Name { get; set; }
           public decimal Price { get; set; }
       }
   }
             

4. Buat controller API ProductsController.cs di folder Controllers:
   

   using Microsoft.AspNetCore.Mvc;
   using MyWebApi.Models;
   using System.Collections.Generic;
   using System.Linq;
   
   namespace MyWebApi.Controllers
   {
       [ApiController]
       [Route("api/[controller]")]
       public class ProductsController : ControllerBase
       {
           private static readonly List<Product> Products = new()
           {
               new Product { Id = 1, Name = "Laptop", Price = 15000000 },
               new Product { Id = 2, Name = "Smartphone", Price = 7000000 },
               new Product { Id = 3, Name = "Keyboard", Price = 300000 }
           };
   
           [HttpGet]
           public ActionResult<IEnumerable<Product>> Get()
           {
               return Ok(Products);
           }
   
           [HttpGet("{id}")]
           public ActionResult<Product> Get(int id)
           {
               var product = Products.FirstOrDefault(p => p.Id == id);
               if (product == null) return NotFound();
               return Ok(product);
           }
   
           [HttpPost]
           public ActionResult<Product> Post(Product product)
           {
               product.Id = Products.Max(p => p.Id) + 1;
               Products.Add(product);
               return CreatedAtAction(nameof(Get), new { id = product.Id }, product);
           }
   
           [HttpPut("{id}")]
           public IActionResult Put(int id, Product product)
           {
               var existing = Products.FirstOrDefault(p => p.Id == id);
               if (existing == null) return NotFound();
               existing.Name = product.Name;
               existing.Price = product.Price;
               return NoContent();
           }
   
           [HttpDelete("{id}")]
           public IActionResult Delete(int id)
           {
               var product = Products.FirstOrDefault(p => p.Id == id);
               if (product == null) return NotFound();
               Products.Remove(product);
               return NoContent();
           }
       }
   }
             

5. Jalankan API:
   

   dotnet run
             

   API akan berjalan di https://localhost:5001 (atau port lain sesuai konfigurasi).

4. Membangun Frontend dengan Angular

Selanjutnya, kita buat frontend menggunakan Angular yang akan berkomunikasi dengan API yang sudah dibuat.

1. Buat project Angular baru:
   

   ng new my-angular-app --routing --style=css
             

   Pilih Yes untuk Angular routing.
2. Masuk ke folder project:
   

   cd my-angular-app
             

3. Buat service untuk mengakses API:
   Jalankan:
   

   ng generate service services/product
             

   Kemudian edit src/app/services/product.service.ts :

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';
   
   export interface Product {
     id: number;
     name: string;
     price: number;
   }
   
   @Injectable({
     providedIn: 'root'
   })
   export class ProductService {
     private apiUrl = 'https://localhost:5001/api/products';
   
     constructor(private http: HttpClient) {}
   
     getProducts(): Observable<Product[]> {
       return this.http.get<Product[]>(this.apiUrl);
     }
   
     getProduct(id: number): Observable<Product> {
       return this.http.get<Product>(`${this.apiUrl}/${id}`);
     }
   
     addProduct(product: Product): Observable<Product> {
       return this.http.post<Product>(this.apiUrl, product);
     }
   
     updateProduct(id: number, product: Product): Observable<void> {
       return this.http.put<void>(`${this.apiUrl}/${id}`, product);
     }
   
     deleteProduct(id: number): Observable<void> {
       return this.http.delete<void>(`${this.apiUrl}/${id}`);
     }
   }
             

4. Tambahkan HttpClientModule di app.module.ts :
   

   import { HttpClientModule } from '@angular/common/http';
   
   @NgModule({
     declarations: [ ... ],
     imports: [
       BrowserModule,
       AppRoutingModule,
       HttpClientModule
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
             

5. Buat komponen untuk menampilkan daftar produk:
   Jalankan:
   

   ng generate component components/product-list
             

   Edit src/app/components/product-list/product-list.component.ts :

   import { Component, OnInit } from '@angular/core';
   import { ProductService, Product } from '../../services/product.service';
   
   @Component({
     selector: 'app-product-list',
     templateUrl: './product-list.component.html',
     styleUrls: ['./product-list.component.css']
   })
   export class ProductListComponent implements OnInit {
     products: Product[] = [];
     loading = true;
     error = '';
   
     constructor(private productService: ProductService) {}
   
     ngOnInit(): void {
       this.productService.getProducts().subscribe({
         next: (data) => {
           this.products = data;
           this.loading = false;
         },
         error: (err) => {
           this.error = 'Gagal memuat data produk.';
           this.loading = false;
         }
       });
     }
   }
             

   Dan buat tampilan di product-list.component.html :

   <div class="p-4">
     <h3 class="text-2xl font-semibold mb-4 text-indigo-700">Daftar Produk</h3>
   
     <div *ngIf="loading" class="text-indigo-500">Memuat data...</div>
     <div *ngIf="error" class="text-red-600">{{ error }}</div>
   
     <ul *ngIf="!loading && !error" class="space-y-3">
       <li *ngFor="let product of products" class="border rounded p-3 bg-white shadow-sm hover:shadow-md transition">
         <h4 class="font-bold text-lg">{{ product.name }}</h4>
         <p>Harga: Rp {{ product.price | number }}</p>
       </li>
     </ul>
   </div>
             

6. Jalankan aplikasi Angular:
   

   ng serve
             

   Buka http://localhost:4200 di browser.

5. Integrasi Angular dengan ASP.NET Core API

Agar Angular dapat mengakses API ASP.NET Core tanpa masalah CORS, kita perlu mengaktifkan CORS di backend.

1. Tambahkan konfigurasi CORS di Program.cs ASP.NET Core:
   

   var builder = WebApplication.CreateBuilder(args);
   
   builder.Services.AddCors(options =>
   {
       options.AddPolicy("AllowAngularApp",
           policy => policy.WithOrigins("http://localhost:4200")
                           .AllowAnyHeader()
                           .AllowAnyMethod());
   });
   
   builder.Services.AddControllers();
   
   var app = builder.Build();
   
   app.UseCors("AllowAngularApp");
   
   app.MapControllers();
   
   app.Run();
             

2. Pastikan API dan Angular berjalan bersamaan:
   Jalankan API dengan dotnet run dan Angular dengan ng serve .
3. Uji koneksi API dari Angular:
   Buka aplikasi Angular dan pastikan data produk muncul dari API.

6. Deployment dan Pengujian Aplikasi

Setelah aplikasi selesai, Anda bisa melakukan deployment dan pengujian dengan langkah berikut:

1. Build Angular untuk produksi:
   

   ng build --prod
             

   Hasil build akan ada di folder dist/my-angular-app .
2. Integrasikan frontend Angular ke ASP.NET Core:
   Anda bisa meng-copy hasil build Angular ke folder wwwroot di project ASP.NET Core dan konfigurasi middleware Static Files.
3. Deploy ke server atau cloud:
   Gunakan Azure, AWS, atau server lain untuk hosting aplikasi.
4. Pengujian:
   Gunakan Postman untuk API dan browser untuk frontend. Pastikan semua fitur berjalan lancar.

7. Sumber Belajar dan Source Code

Berikut beberapa sumber belajar dan repository source code yang bisa Anda gunakan untuk memperdalam dan mempraktikkan materi ini:

• Angular Official Tutorial
• ASP.NET Core Web API Documentation
• ASP.NET Core Web API Samples on GitHub
• Angular GitHub Repository
• Channel YouTube Academind (Angular & Web Development)
• Channel YouTube IAmTimCorey (ASP.NET Core Tutorials)

Anda juga dapat mengunduh source code lengkap dari repository berikut: