Membuat SaaS dari Nol dengan AI Coding

Tujuan: Membimbing Anda membangun layanan SaaS lengkap—backend, frontend, CI/CD, dan deployment—dengan bantuan AI coding (ChatGPT Plus, Claude Pro, Gemini Advanced). Tutorial ini mengasumsikan pengetahuan dasar pemrograman Python/JavaScript dan penggunaan terminal Linux.

Pendahuluan

SaaS (Software as a Service) memerlukan tiga lapisan utama:

1. Backend API – logika bisnis, otentikasi, penyimpanan data.
2. Frontend – UI/UX yang berinteraksi dengan API.
3. Infrastruktur – container, orchestration, CI/CD, monitoring.

AI coding mempercepat penulisan boilerplate, refactoring, dan dokumentasi. Kami akan memanfaatkan:

• ChatGPT Plus – menghasilkan kode dan penjelasan cepat.
  https://tools.jartekindo.com/tool/chatgpt-plus/
• Claude Pro – review keamanan kode.
  https://tools.jartekindo.com/tool/claude-pro/
• Gemini Advanced – membantu menulis unit test.
  https://tools.jartekindo.com/tool/gemini-advanced/

Prasyarat & Persiapan

Catatan: Pastikan Docker daemon berjalan (systemctl status docker) dan Anda memiliki hak sudo.

Langkah Demi Langkah

Step 1 – Inisialisasi Repository & Struktur Proyek

# Buat folder proyek
mkdir saas-ai-coding && cd saas-ai-coding

# Inisialisasi git
git init

# Buat struktur dasar
mkdir backend frontend infra docs
touch README.md .gitignore

.gitignore (contoh):

# Python
__pycache__/
*.py[cod]
env/
venv/

# Node
node_modules/
dist/
.next/

# Docker
*.env

Step 2 – Backend dengan FastAPI (Python)

Gunakan ChatGPT Plus untuk menghasilkan skeleton FastAPI:

# Buat virtual environment
python3 -m venv env
source env/bin/activate

# Install FastAPI & Uvicorn
pip install fastapi uvicorn sqlalchemy alembic pydantic[email] python-jose[cryptography]

# Buat file utama
mkdir -p backend/app
cat > backend/app/main.py <<'PY'
from fastapi import FastAPI, Depends, HTTPException, status
from fastapi.security import OAuth2PasswordBearer
from pydantic import BaseModel

app = FastAPI(title="SaaS AI Demo")

oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")

class User(BaseModel):
    username: str
    email: str

@app.get("/users/me", response_model=User)
def read_current_user(token: str = Depends(oauth2_scheme)):
    # TODO: validate JWT (use python-jose)
    return {"username": "demo", "email": "demo@example.com"}
PY

Menjalankan secara lokal

uvicorn backend/app/main:app --reload --host 0.0.0.0 --port 8000

Akses: http://localhost:8000/docs (OpenAPI UI).

Step 3 – Frontend dengan React + Vite

Gunakan Claude Pro untuk meninjau dependensi keamanan.

# Pindah ke folder frontend
cd frontend

# Scaffold dengan Vite (React + TypeScript)
npm create vite@latest . -- --template react-ts
npm install

# Tambahkan axios untuk API call
npm i axios

# Contoh komponen Auth.tsx
cat > src/components/Auth.tsx <<'TSX'
import axios from "axios";
import { useState } from "react";

export default function Auth() {
  const [user, setUser] = useState<any>(null);

  const fetchMe = async () => {
    const token = localStorage.getItem("access_token");
    const res = await axios.get("http://localhost:8000/users/me", {
      headers: { Authorization: `Bearer ${token}` },
    });
    setUser(res.data);
  };

  return (
    <div>
      <button onClick={fetchMe}>Load Profile</button>
      {user && <pre>{JSON.stringify(user, null, 2)}</pre>}
    </div>
  );
}
TSX

Jalankan:

npm run dev

Akses: http://localhost:5173.

Step 4 – Containerisasi dengan Docker

Dockerfile Backend

# backend/Dockerfile
FROM python:3.11-slim

WORKDIR /app
COPY backend/requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

COPY backend/app ./app
EXPOSE 8000
CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]

Dockerfile Frontend

# frontend/Dockerfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY frontend/package*.json ./
RUN npm ci
COPY frontend/ .
RUN npm run build

FROM nginx:stable-alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80

Docker Compose

# docker-compose.yml
version: "3.9"
services:
  backend:
    build:
      context: .
      dockerfile: backend/Dockerfile
    ports:
      - "8000:8000"
    environment:
      - DATABASE_URL=postgresql://postgres:postgres@db:5432/app
    depends_on:
      - db

  frontend:
    build:
      context: .
      dockerfile: frontend/Dockerfile
    ports:
      - "80:80"

  db:
    image: postgres:15-alpine
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: app
    volumes:
      - pgdata:/var/lib/postgresql/data

volumes:
  pgdata:

Jalankan seluruh stack:

docker compose up -d

Step 5 – Orkestrasi dengan Kubernetes (Optional)

Jika target produksi menggunakan DigitalOcean Kubernetes atau AWS EKS, buat manifest:

# infra/k8s/backend-deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: saas-backend
spec:
  replicas: 2
  selector:
    matchLabels:
      app: saas-backend
  template:
    metadata:
      labels:
        app: saas-backend
    spec:
      containers:
        - name: backend
          image: ghcr.io/yourorg/saas-backend:latest
          ports:
            - containerPort: 8000
          env:
            - name: DATABASE_URL
              valueFrom:
                secretKeyRef:
                  name: db-secret
                  key: url
---
apiVersion: v1
kind: Service
metadata:
  name: saas-backend-svc
spec:
  selector:
    app: saas-backend
  ports:
    - protocol: TCP
      port: 80
      targetPort: 8000
  type: ClusterIP

Deploy dengan kubectl apply -f infra/k8s/.

Step 6 – CI/CD dengan GitHub Actions

Buat file .github/workflows/ci-cd.yml:

name: CI/CD Pipeline

on:
  push:
    branches: [ main ]

jobs:
  build-test:
    runs-on: ubuntu-latest
    services:
      postgres:
        image: postgres:15-alpine
        env:
          POSTGRES_USER: postgres
          POSTGRES_PASSWORD: postgres
          POSTGRES_DB: test
        ports: [5432:5432]
        options: >-
          --health-cmd "pg_isready -U postgres"
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5

    steps:
      - uses: actions/checkout@v3

      # ---------- Backend ----------
      - name: Set up Python
        uses: actions/setup-python@v4
        with:
          python-version: "3.11"

      - name: Install backend deps
        run: |
          python -m venv env
          source env/bin/activate
          pip install -r backend/requirements.txt
          pip install pytest

      - name: Run backend tests
        run: |
          source env/bin/activate
          pytest backend/tests

      # ---------- Frontend ----------
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: "20"

      - name: Install frontend deps
        run: |
          cd frontend
          npm ci

      - name: Lint & Build
        run: |
          cd frontend
          npm run lint
          npm run build

      # ---------- Docker Build ----------
      - name: Login to GitHub Container Registry
        uses: docker/login-action@v2
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

      - name: Build & Push Images
        run: |
          docker build -t ghcr.io/${{ github.repository }}/backend:latest -f backend/Dockerfile .
          docker build -t ghcr.io/${{ github.repository }}/frontend:latest -f frontend/Dockerfile .
          docker push ghcr.io/${{ github.repository }}/backend:latest
          docker push ghcr.io/${{ github.repository }}/frontend:latest

      # ---------- Deploy ----------
      - name: Deploy to DigitalOcean Kubernetes
        uses: digitalocean/action-doctl@v2
        with:
          token: ${{ secrets.DO_TOKEN }}
      - run: |
          doctl kubernetes cluster kubeconfig save ${{ secrets.DO_CLUSTER_ID }}
          kubectl set image deployment/saas-backend backend=ghcr.io/${{ github.repository }}/backend:latest
          kubectl set image deployment/saas-frontend frontend=ghcr.io/${{ github.repository }}/frontend:latest

Tip: Simpan kredensial (DB URL, DO token) di GitHub Secrets.

Step 7 – Monitoring & Logging

• Prometheus + Grafana (deploy via Helm) untuk metrik.
• ELK Stack atau ** Loki** untuk log terpusat.
• Gunakan Claude Pro untuk meninjau konfigurasi keamanan Prometheus (misalnya, non‑exposed endpoints).

Step 8 – UI/Branding dengan AI Image Tools

• Midjourney atau Canva Pro untuk membuat logo, hero image, dan screenshot demo.
  https://tools.jartekindo.com/tool/midjourney/
  https://tools.jartekindo.com/tool/canva-pro/

Export aset ke folder frontend/public/assets.

Tips Optimasi & Keamanan

Troubleshooting Error Umum