Cara Buat SaaS dengan Helipod: Panduan Lengkap dari Nol

Tim Helipod

2026년 6월 17일6분 소요

이 글은 인도네시아어로 작성되었습니다.

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#

Layer	Technology	Kenapa
Frontend	Next.js	React, SSR, SEO-friendly
Backend	Laravel	PHP, ORM, Queue
Database	Neon (PostgreSQL)	Serverless, branching
Cache	Upstash (Redis)	Serverless, bayar per use
Email	Resend	API-based, deliverability
Storage	Cloudflare R2	S3-compatible, murah

Langkah 1: Setup Project#

Buat Project di Helipod#

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

Buat Services#

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

Langkah 2: Setup Database (Neon)#

Connect Neon#

Buka Settings → Integrations → Neon
Connect akun Neon
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#

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 support@helipod.io

Baca juga: