Daftar Isi

1. Pendahuluan
2. Persiapan Lingkungan Pengembangan
3. Membuat Proyek Backend dengan .Net
4. Membuat Proyek Frontend dengan React
5. Membangun API untuk Produk dan User
6. Menghubungkan Frontend dengan Backend
7. Membangun Fitur Toko: Keranjang, Checkout, dan Autentikasi
8. Deploy Aplikasi ke Produksi
9. Sumber Belajar dan Referensi

1. Pendahuluan

Dalam panduan ini, Anda akan belajar cara membangun sebuah aplikasi toko e-commerce lengkap menggunakan teknologi .Net untuk backend dan React untuk frontend. Panduan ini dirancang untuk pemula hingga menengah yang ingin memahami alur pengembangan aplikasi modern dengan arsitektur API dan SPA (Single Page Application).

Anda akan mempelajari mulai dari persiapan lingkungan, pembuatan proyek, pengembangan API, integrasi frontend-backend, hingga deployment aplikasi.

2. Persiapan Lingkungan Pengembangan

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

• .Net SDK 7.0 - untuk membuat backend API. Download dari https://dotnet.microsoft.com/en-us/download
• Node.js dan npm - untuk menjalankan React dan mengelola paket. Download dari https://nodejs.org/en/download/
• Visual Studio Code atau IDE favorit Anda untuk coding.
• Postman atau alat serupa untuk testing API.

Setelah menginstall, pastikan versi sudah benar dengan perintah di terminal:

dotnet --version
node --version
npm --version

3. Membuat Proyek Backend dengan .Net

Langkah pertama adalah membuat proyek API menggunakan .Net Web API template.

Buka terminal dan jalankan perintah berikut:

dotnet new webapi -n ECommerceAPI
cd ECommerceAPI
dotnet run

Ini akan membuat proyek API dasar dan menjalankannya di https://localhost:5001 .

Struktur folder utama:

• Controllers/ - tempat membuat API endpoint
• Models/ - tempat mendefinisikan model data
• Program.cs - konfigurasi aplikasi

Contoh membuat model produk:

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

Contoh controller produk sederhana:

using Microsoft.AspNetCore.Mvc;
using ECommerceAPI.Models;
using System.Collections.Generic;

namespace ECommerceAPI.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class ProductsController : ControllerBase
    {
        private static readonly List<Product> Products = new()
        {
            new Product { Id = 1, Name = "Sepatu Sneakers", Description = "Sepatu sneakers nyaman dan stylish", Price = 350000, ImageUrl = "https://placehold.co/200x200/png?text=Sepatu+Sneakers" },
            new Product { Id = 2, Name = "Kaos Polos", Description = "Kaos polos berkualitas tinggi", Price = 120000, ImageUrl = "https://placehold.co/200x200/png?text=Kaos+Polos" }
        };

        [HttpGet]
        public IEnumerable<Product> Get() => Products;

        [HttpGet("{id}")]
        public ActionResult<Product> Get(int id)
        {
            var product = Products.Find(p => p.Id == id);
            if (product == null) return NotFound();
            return product;
        }
    }
}

4. Membuat Proyek Frontend dengan React

Selanjutnya, buat proyek React untuk frontend toko online.

Jalankan perintah berikut di terminal (pastikan Node.js sudah terinstall):

npx create-react-app ecommerce-frontend
cd ecommerce-frontend
npm start

Ini akan menjalankan aplikasi React di http://localhost:3000 .

Struktur folder utama:

• src/components/ - komponen UI
• src/App.js - komponen utama aplikasi
• src/index.js - entry point aplikasi

Contoh komponen Produk:

import React from 'react';

export default function Product({ product }) {
  return (
    <div className="border rounded p-4 shadow hover:shadow-lg transition">
      <img src={product.imageUrl} alt={`Gambar produk ${product.name}`} className="w-full h-48 object-cover mb-2 rounded" />
      <h3 className="text-xl font-semibold mb-1">{product.name}</h3>
      <p className="text-gray-700 mb-2">{product.description}</p>
      <p className="font-bold text-indigo-600">Rp {product.price.toLocaleString()}</p>
    </div>
  );
}

5. Membangun API untuk Produk dan User

Selain produk, Anda juga perlu membuat API untuk user dan autentikasi. Berikut contoh sederhana API user:

namespace ECommerceAPI.Models
{
    public class User
    {
        public int Id { get; set; }
        public string Username { get; set; }
        public string Password { get; set; } // Untuk contoh, simpan plaintext (tidak disarankan di produksi)
        public string Email { get; set; }
    }
}

using Microsoft.AspNetCore.Mvc;
using ECommerceAPI.Models;
using System.Collections.Generic;
using System.Linq;

namespace ECommerceAPI.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class UsersController : ControllerBase
    {
        private static readonly List<User> Users = new()
        {
            new User { Id = 1, Username = "admin", Password = "admin123", Email = "admin@example.com" }
        };

        [HttpPost("login")]
        public ActionResult<User> Login([FromBody] User login)
        {
            var user = Users.FirstOrDefault(u => u.Username == login.Username && u.Password == login.Password);
            if (user == null) return Unauthorized();
            return user;
        }
    }
}

Anda bisa mengembangkan API ini dengan database dan autentikasi JWT untuk keamanan lebih baik.

6. Menghubungkan Frontend dengan Backend

Untuk mengambil data produk dari API .Net ke React, gunakan fetch atau library seperti axios .

import React, { useEffect, useState } from 'react';
import Product from './Product';

export default function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://localhost:5001/api/products')
      .then(res => res.json())
      .then(data => {
        setProducts(data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  if (loading) return <p className="text-center text-lg mt-10">Memuat produk...</p>;

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
      {products.map(product => (
        <Product key={product.id} product={product} />
      ))}
    </div>
  );
}

7. Membangun Fitur Toko: Keranjang, Checkout, dan Autentikasi

Berikut beberapa fitur penting yang harus Anda buat:

• Keranjang Belanja (Shopping Cart) - menyimpan produk yang dipilih user sebelum checkout.
• Checkout - proses pembayaran dan konfirmasi pesanan.
• Autentikasi User - login dan registrasi user untuk keamanan dan personalisasi.

Contoh sederhana Keranjang Belanja di React:

import React, { useState } from 'react';

export default function ShoppingCart() {
  const [cartItems, setCartItems] = useState([]);

  function addToCart(product) {
    setCartItems(prev => [...prev, product]);
  }

  function removeFromCart(index) {
    setCartItems(prev => prev.filter((_, i) => i !== index));
  }

  return (
    <div>
      <h4 className="text-lg font-bold mb-2">Keranjang Belanja</h4>
      {cartItems.length === 0 ? (
        <p>Keranjang kosong</p>
      ) : (
        <ul className="list-disc list-inside">
          {cartItems.map((item, i) => (
            <li key={i} className="flex justify-between items-center mb-1">
              {item.name} - Rp {item.price.toLocaleString()}
              <button onClick={() => removeFromCart(i)} className="text-red-600 hover:text-red-800 ml-4">Hapus</button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

Contoh Autentikasi sederhana dengan fetch API:

function login(username, password) {
  fetch('https://localhost:5001/api/users/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username, password })
  })
  .then(res => {
    if (!res.ok) throw new Error('Login gagal');
    return res.json();
  })
  .then(user => {
    console.log('Login berhasil:', user);
    // Simpan token atau data user di localStorage/sessionStorage
  })
  .catch(err => alert(err.message));
}

8. Deploy Aplikasi ke Produksi

Setelah aplikasi selesai, Anda bisa melakukan deploy backend dan frontend ke layanan hosting seperti:

• Backend (.Net API): Azure App Service, AWS Elastic Beanstalk, atau VPS dengan Docker.
• Frontend (React): Vercel, Netlify, GitHub Pages, atau hosting statis lainnya.

Contoh deploy React ke Vercel:

npm run build
vercel deploy --prod

Untuk backend, publish dengan perintah:

dotnet publish -c Release

9. Sumber Belajar dan Referensi

Berikut beberapa sumber belajar yang sangat membantu untuk memperdalam pengembangan aplikasi e-commerce dengan .Net dan React:

• Dokumentasi resmi ASP.NET Core
• Dokumentasi resmi React
• Channel YouTube .NET
• Channel YouTube Academind (React & Web Dev)
• Pluralsight - Building Web Applications with ASP.NET Core
• Udemy - React - The Complete Guide