Cara Buat SaaS dengan Helipod: Panduan Lengkap dari Nol

Membangun SaaS application adalah impian banyak developer. Tapi banyak yang bingung harus mulai dari mana.

Artikel ini panduan lengkapnya.

Arsitektur SaaS di Helipod

┌─────────────────────────────────────────────────────┐
│                    HELIPOD                          │
├─────────────────────────────────────────────────────┤
│                                                     │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐ │
│  │   Frontend  │  │   Backend   │  │   Worker    │ │
│  │  (Next.js)  │  │  (Laravel)  │  │  (Queue)    │ │
│  └─────────────┘  └─────────────┘  └─────────────┘ │
│         │                │                │         │
│         └────────────────┼────────────────┘         │
│                          │                          │
│  ┌─────────────────────────────────────────────┐   │
│  │              Services                       │   │
│  │  ┌─────────┐ ┌─────────┐ ┌─────────────┐   │   │
│  │  │  Neon   │ │ Upstash │ │   Resend    │   │   │
│  │  │ (Postgres)│ │ (Redis) │ │  (Email)   │   │   │
│  │  └─────────┘ └─────────┘ └─────────────┘   │   │
│  └─────────────────────────────────────────────┘   │
│                                                     │
└─────────────────────────────────────────────────────┘

Tech Stack yang Direkomendasikan

Langkah 1: Setup Project

Buat Project di Helipod

1. Login ke helipod.io
2. Klik New Project
3. Pilih Next.js sebagai starter
4. Nama project: mysaas

Buat Services

mysaas/
├── frontend    (Next.js)
├── backend     (Laravel)
└── worker      (Queue processor)

Langkah 2: Setup Database (Neon)

Connect Neon

1. Buka Settings → Integrations → Neon
2. Connect akun Neon
3. Aktifkan Branch per environment

Database Schema

-- users table
CREATE TABLE users (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email VARCHAR(255) UNIQUE NOT NULL,
  name VARCHAR(255) NOT NULL,
  password VARCHAR(255) NOT NULL,
  plan VARCHAR(50) DEFAULT 'free',
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- organizations table
CREATE TABLE organizations (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name VARCHAR(255) NOT NULL,
  owner_id UUID REFERENCES users(id),
  plan VARCHAR(50) DEFAULT 'free',
  created_at TIMESTAMP DEFAULT NOW()
);

-- subscriptions table
CREATE TABLE subscriptions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES users(id),
  plan VARCHAR(50) NOT NULL,
  status VARCHAR(50) DEFAULT 'active',
  expires_at TIMESTAMP,
  created_at TIMESTAMP DEFAULT NOW()
);

Langkah 3: Setup Backend (Laravel)

Install Laravel

composer create-project laravel/laravel backend
cd backend

Konfigurasi Neon

# .env
DB_CONNECTION=pgsql
DB_HOST=ep-xxx.region.neon.tech
DB_PORT=5432
DB_DATABASE=mysaas
DB_USERNAME=xxx
DB_PASSWORD=xxx

Buat Models

// app/Models/User.php
class User extends Authenticatable
{
    use HasFactory, Notifiable;
    
    protected $fillable = ['name', 'email', 'password', 'plan'];
    
    protected $hidden = ['password', 'remember_token'];
    
    public function organization()
    {
        return $this->belongsTo(Organization::class);
    }
    
    public function subscription()
    {
        return $this->hasOne(Subscription::class);
    }
}

Buat API Routes

// routes/api.php
Route::post('/register', [AuthController::class, 'register']);
Route::post('/login', [AuthController::class, 'login']);

Route::middleware('auth:sanctum')->group(function () {
    Route::get('/user', [AuthController::class, 'user']);
    Route::apiResource('projects', ProjectController::class);
    Route::post('/deploy', [DeployController::class, 'deploy']);
});

Langkah 4: Setup Email (Resend)

Konfigurasi Resend

// config/services.php
'resend' => [
    'key' => env('RESEND_API_KEY'),
    'from' => env('RESEND_FROM'),
],

Buat Mail Classes

// app/Mail/WelcomeMail.php
class WelcomeMail extends Mailable
{
    public function __construct(public User $user) {}
    
    public function build()
    {
        return $this->view('emails.welcome')
                    ->subject('Selamat datang di MySaaS!');
    }
}

Kirim Email

// app/Http/Controllers/AuthController.php
public function register(Request $request)
{
    $user = User::create([
        'name' => $request->name,
        'email' => $request->email,
        'password' => Hash::make($request->password),
    ]);
    
    // Kirim welcome email
    Mail::to($user->email)->queue(new WelcomeMail($user));
    
    return response()->json(['token' => $user->createToken('auth')]);
}

Langkah 5: Setup Cache (Upstash)

Konfigurasi Redis

// config/database.php
'redis' => [
    'client' => 'predis',
    'default' => [
        'url' => env('UPSTASH_REDIS_REST_URL'),
        'password' => env('UPSTASH_REDIS_REST_TOKEN'),
    ],
],

Implementasi Caching

// app/Services/CacheService.php
class CacheService
{
    public function get(string $key, callable $callback, int $ttl = 3600)
    {
        $cached = Redis::get($key);
        
        if ($cached) {
            return json_decode($cached, true);
        }
        
        $data = $callback();
        Redis::setex($key, $ttl, json_encode($data));
        
        return $data;
    }
    
    public function invalidate(string $key)
    {
        Redis::del($key);
    }
}

Langkah 6: Setup Queue

Konfigurasi Queue

# .env
QUEUE_CONNECTION=redis

Buat Jobs

// app/Jobs/SendWelcomeEmail.php
class SendWelcomeEmail implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
    
    public function __construct(public User $user) {}
    
    public function handle()
    {
        Mail::to($this->user->email)->send(new WelcomeMail($this->user));
    }
}

Jalankan Queue Worker

# Di Helipod terminal
php artisan queue:work --sleep=3 --tries=3

Langkah 7: Setup Frontend (Next.js)

Install Next.js

npx create-next-app@latest frontend
cd frontend

Konfigurasi API

// lib/api.ts
const API_URL = process.env.NEXT_PUBLIC_API_URL;

export async function fetchApi(endpoint: string, options?: RequestInit) {
  const res = await fetch(`${API_URL}${endpoint}`, {
    ...options,
    headers: {
      'Content-Type': 'application/json',
      ...options?.headers,
    },
  });
  
  return res.json();
}

Buat Pages

// app/dashboard/page.tsx
import { fetchApi } from '@/lib/api';

export default async function Dashboard() {
  const user = await fetchApi('/user');
  
  return (
    <div>
      <h1>Dashboard</h1>
      <p>Selamat datang, {user.name}!</p>
    </div>
  );
}

Langkah 8: Deploy ke Helipod

Konfigurasi Deploy

# helipod.yml
services:
  frontend:
    type: static
    build: next build
    output: .next
    
  backend:
    type: php
    build: composer install
    start: php artisan serve
    
  worker:
    type: php
    build: composer install
    start: php artisan queue:work

Deploy

# Push ke GitHub
git add .
git commit -m "Initial commit"
git push origin main

# Helipod otomatis deploy

Fitur SaaS yang Perlu Dibuat

1. Authentication

// Register, Login, Logout
// Gunakan Laravel Sanctum

2. Multi-tenancy

// Setiap user punya organization
// Data terisolasi per organization

3. Billing & Subscription

// Integrasi payment gateway
// Handle subscription lifecycle

4. Dashboard

// API endpoints untuk dashboard
// CRUD operations

5. Notifications

// Email notifications
// In-app notifications

Pricing Strategy

Free Tier:
- 1 project
- 100MB storage
- 1000 API calls/day

Pro Tier ($29/month):
- Unlimited projects
- 10GB storage
- 100,000 API calls/day
- Priority support

Enterprise ($99/month):
- Custom limits
- Dedicated support
- SLA guarantee

Best Practices

1. Security

// Gunakan HTTPS
// Validasi input
// Rate limiting
// CSRF protection

2. Performance

// Gunakan caching
// Optimasi query
// Lazy loading
// CDN untuk static assets

3. Monitoring

// Error tracking
// Performance monitoring
// Uptime monitoring
// Analytics

4. Backup

// Database backup
// File backup
// Disaster recovery plan

Checklist

• Setup project di Helipod
• Setup Neon database
• Setup Laravel backend
• Setup Resend email
• Setup Upstash cache
• Setup queue worker
• Setup Next.js frontend
• Implement authentication
• Implement billing
• Deploy ke production
• Setup monitoring
• Setup backup

Kesimpulan

Membangun SaaS di Helipod itu mudah dengan tech stack yang tepat:

• ✅ Next.js untuk frontend
• ✅ Laravel untuk backend
• ✅ Neon untuk database
• ✅ Upstash untuk cache
• ✅ Resend untuk email
• ✅ Helipod untuk deployment

Butuh bantuan? Hubungi [email protected]

Baca juga:

• Integrasi Neon Database di Helipod
• Laravel + Resend Email
• Next.js + Upstash Caching