Siapkan Atlas — SaaS Manajemen Rental Mobil

Hosting Hostinger

Kode Atlas gratis; hosting adalah paket berbayar. Website live Anda berjalan di sini.

Pilih Paket Hostinger

Gunakan paket Unlimited atau paket Cloud dengan deployment Web App.

Claude Desktop

Asisten AI Anda untuk penyiapan. Claude mengerjakan bagian teknisnya di tab Code.

Unduh Claude Desktop

https://claude.ai/download

Node.js

Versi 20.19 atau lebih baru. Sisanya diurus Claude.

Unduh Node.js

https://nodejs.org/en/download

Git

Dipakai untuk memublikasikan salinan Atlas Anda. Claude menjalankan perintah Git untuk Anda.

Unduh Git

https://git-scm.com/

Akun Supabase

Paket gratis sudah cukup untuk memulai. Anda akan membuat proyek baru saat Claude memintanya.

Buat Akun Supabase

https://supabase.com/dashboard

Akun GitHub

Gratis. Di sinilah salinan pribadi Atlas milik Anda disimpan, dan Hostinger men-deploy dari sana.

Buat Akun GitHub

https://github.com/signup

Unduh Atlas

Atlas gratis dan open source di bawah Lisensi MIT.

Buka Atlas di GitHub

https://github.com/salhiworks/atlas-car-rental-saas

Klik Code, lalu Download ZIP Ekstrak file yang sudah diunduh Simpan folder atlas-car-rental-saas-main di tempat yang mudah ditemukan, misalnya Documents

Sudah memakai Git? Anda juga bisa meng-clone repository-nya. Penyiapan Claude berjalan dengan keduanya.

Buka Atlas di Claude Desktop

Claude Desktop Code Local Select Project Folder Open Trust Workspace

Pilih folder Atlas itu sendiri — yang berisi README.md.

Minta Claude Menyiapkan Atlas

Di tab Code, dengan folder Atlas terbuka, kirim pesan ini:

Prompt Penyiapan Atlas

Memulai penyiapan bawaan Atlas. Claude mengerjakan bagian teknisnya untuk Anda.

Set up Atlas for me.

Claude mengikuti skill penyiapan bawaan Atlas. Claude memeriksa komputer Anda, memasang apa yang dibutuhkan Atlas, dan mengerjakan bagian teknisnya sendiri. Claude hanya berhenti saat membutuhkan Anda, dan setiap momen itu adalah satu tugas di panduan ini.

Buat Proyek Supabase Anda

Claude memintanya lebih dulu. Atlas selalu dipasang di proyek baru yang kosong.

Buka Dashboard Supabase

https://supabase.com/dashboard

Klik New project — paket Free sudah cukup Beri nama dan simpan kata sandi database di tempat yang aman Setelah siap, salin Project ID-nya dan tempelkan ke Claude

Supabase Project Settings General

Jika Claude meminta Anda masuk ke Supabase atau menghubungkan proyek, ikuti persis instruksi yang diberikannya.

Setujui Pemasangan

Claude menampilkan nama, region, dan tanggal pembuatan proyek Anda, lalu meminta izin untuk memasang Atlas di sana. Pastikan itu proyek yang baru saja Anda buat, lalu balas yes. Satu yes itu mencakup semua langkah berikut:

Membuat database Atlas (54 migrasi, ditampilkan pratinjaunya lebih dulu)

Men-deploy dan memverifikasi 4 Edge Functions Atlas

Mengonfigurasi aplikasi hanya dengan publishable key Anda

Menjalankan build dan pemeriksaan otomatis Atlas

Prosesnya beberapa menit, dan tidak ada yang perlu Anda buka atau uji. Jika proyeknya tidak kosong, Claude berhenti dan tidak mengubah apa pun.

Buat Repository Private yang Kosong

Ini salinan Atlas milik Anda sendiri di GitHub. Hostinger men-deploy website Anda dari sini.

Buat Repository GitHub

https://github.com/new

Beri nama repository Pilih Private Biarkan README, .gitignore, dan license tetap nonaktif Klik Create repository Salin URL repositori

Setujui Publikasi

Tempelkan URL repository ke Claude saat diminta. Claude menyiapkan Git, memastikan tidak ada data rahasia yang ikut, lalu menampilkan ringkasan singkat: repository Anda dan branch main. Pastikan repository itu milik Anda, lalu balas yes.

Claude tidak pernah melakukan push ke repository Atlas asli. Jika Git meminta Anda masuk, Claude akan meminta Anda menjalankan push sendiri — masuklah lewat browser, karena GitHub tidak menerima kata sandi akun Anda di sana.

Impor Repository Anda

Belum punya hosting? Ambil paket di Persyaratan terlebih dahulu.

Hostinger Websites Add Website Web App Import Git Repository

Hubungkan GitHub dan pilih Only select repositories Pilih repository Atlas Anda dan branch main Pilih domain sementara gratis atau domain Anda sendiri

Atur Build dan Deploy

Biarkan preset framework Vite yang terdeteksi oleh Hostinger Pilih Node.js 22, atau versi terbaru yang tersedia Atur perintah build ke npm run build Atur direktori output ke dist

Tambahkan tepat dua environment variable ini. Claude menampilkan kedua nilainya, dan Anda bisa mengabaikan saran lainnya:

VITE_SUPABASE_URL VITE_SUPABASE_PUBLISHABLE_KEY

VITE_SUPABASE_URL

URL proyek

VITE_SUPABASE_PUBLISHABLE_KEY

Publishable key

Ambil nilai ini dari Supabase

Buka Connect

https://supabase.com/dashboard/project/_?showConnect=true

Keamanan

Hanya Publishable key yang dimasukkan di sini. Jangan pernah memasukkan Secret key atau service_role key ke variabel VITE_ — apa pun yang diawali VITE_ terlihat di browser.

Klik Deploy dan tunggu build selesai Salin alamat website Anda dan tempelkan ke Claude

Claude memeriksa bahwa website live dimuat lewat HTTPS dan terhubung ke proyek Supabase Anda.

Tambahkan Alamat Live Anda ke Supabase

Email pendaftaran dan kata sandi menautkan ke alamat-alamat ini. Claude mengirimkan Site URL dan empat Redirect URLs yang tepat untuk domain Hostinger Anda — salin dari pesan Claude.

Supabase Authentication URL Configuration

Atur Site URL ke alamat live Anda, diawali https:// Tambahkan keempat Redirect URLs, satu per satu Klik Save, lalu beri tahu Claude bahwa sudah selesai

Setiap Redirect URL adalah alamat live Anda diikuti salah satu path berikut:

/auth/callback

/accept-invite

/auth/reset-password

/confirm-email

Buat Agensi Anda

Buka link pendaftaran yang diberikan Claude — alamat live Anda diikuti /sign-up Buat agensi Anda dengan email yang sama seperti akun Supabase Anda Buka email konfirmasi di browser yang sama Masuk, lalu beri tahu Claude saat dashboard menampilkan agensi Anda

Kenapa email yang sama: email bawaan Supabase hanya terkirim ke alamat tim Supabase Anda, sekitar dua pesan per jam. Claude lalu memastikan agensi Anda sudah ada dengan Anda sebagai Owner — tidak ada yang perlu Anda uji.

Atlas sudah live. Setiap push ke branch main kini men-deploy ulang Atlas di Hostinger, jadi minta Claude untuk perubahan apa pun, termasuk nama, logo, atau warna Anda sendiri, lalu minta Claude melakukan push.

Sebelum ada pelanggan sungguhan

Hubungkan penyedia email Anda sendiri (Custom SMTP) sebelum pelanggan atau staf di luar tim Supabase Anda mendaftar:

Supabase Authentication Emails SMTP Settings