ตั้งค่า Atlas — SaaS สำหรับจัดการธุรกิจรถเช่า

โฮสติ้ง Hostinger

โค้ดของ Atlas ฟรี ส่วนโฮสติ้งเป็นแพ็กเกจแบบเสียเงิน เว็บไซต์จริงของคุณจะรันอยู่ที่นี่

เลือกแพ็กเกจ Hostinger

ใช้แพ็กเกจ Unlimited หรือแพ็กเกจ Cloud ที่รองรับการดีพลอย Web App

Claude Desktop

ผู้ช่วย AI สำหรับการตั้งค่า Claude ทำงานด้านเทคนิคในแท็บ Code

ดาวน์โหลด Claude Desktop

https://claude.ai/download

Node.js

เวอร์ชัน 20.19 ขึ้นไป ที่เหลือ Claude จัดการให้

ดาวน์โหลด Node.js

https://nodejs.org/en/download

Git

ใช้สำหรับเผยแพร่สำเนา Atlas ของคุณ Claude รันคำสั่ง Git ให้คุณ

ดาวน์โหลด Git

https://git-scm.com/

บัญชี Supabase

แพ็กเกจฟรีเพียงพอสำหรับเริ่มต้น คุณจะสร้างโปรเจกต์ใหม่เมื่อ Claude ขอ

สร้างบัญชี Supabase

https://supabase.com/dashboard

บัญชี GitHub

ฟรี ใช้เก็บสำเนา Atlas แบบส่วนตัวของคุณเอง ซึ่ง Hostinger จะดีพลอยจากที่นี่

สร้างบัญชี GitHub

https://github.com/signup

ดาวน์โหลด Atlas

Atlas ฟรีและเป็นโอเพนซอร์สภายใต้ MIT License

เปิด Atlas บน GitHub

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

กด Code แล้วกด Download ZIP แตกไฟล์ที่ดาวน์โหลดมา เก็บโฟลเดอร์ atlas-car-rental-saas-main ไว้ในที่ที่หาง่าย เช่น Documents

ใช้ Git อยู่แล้วใช่ไหม? คุณจะโคลน repository แทนก็ได้ การตั้งค่าของ Claude ใช้ได้ทั้งสองแบบ

เปิด Atlas ใน Claude Desktop

Claude Desktop Code Local Select Project Folder Open Trust Workspace

เลือกโฟลเดอร์ Atlas โดยตรง — โฟลเดอร์ที่มี README.md อยู่ข้างใน

ขอให้ Claude ตั้งค่า Atlas

ในแท็บ Code ขณะที่เปิดโฟลเดอร์ Atlas อยู่ ให้ส่งข้อความนี้:

พรอมต์ตั้งค่า Atlas

เริ่มการตั้งค่าที่มีมาในตัวของ Atlas Claude ทำงานด้านเทคนิคแทนคุณ

Set up Atlas for me.

Claude ทำตามสกิลการตั้งค่าที่มีมาในตัวของ Atlas โดยตรวจสอบคอมพิวเตอร์ของคุณ ติดตั้งสิ่งที่ Atlas ต้องใช้ และทำงานด้านเทคนิคเอง Claude จะหยุดเฉพาะเมื่อต้องการคุณ และแต่ละช่วงนั้นคือหนึ่งงานในคู่มือนี้

สร้างโปรเจกต์ Supabase ของคุณ

Claude จะขอสิ่งนี้เป็นอย่างแรก Atlas จะติดตั้งลงในโปรเจกต์ใหม่ที่ว่างเปล่าเสมอ

เปิดแดชบอร์ด Supabase

https://supabase.com/dashboard

กด New project — ใช้แพ็กเกจ Free ได้ ตั้งชื่อ และบันทึกรหัสผ่านฐานข้อมูลไว้ในที่ปลอดภัย เมื่อพร้อมแล้ว ให้คัดลอก Project ID แล้ววางลงใน Claude

Supabase Project Settings General

ถ้า Claude ขอให้คุณลงชื่อเข้าใช้ Supabase หรือเชื่อมต่อโปรเจกต์ ให้ทำตามคำแนะนำที่ Claude ให้ทุกขั้นตอน

อนุมัติการติดตั้ง

Claude จะแสดงชื่อ ภูมิภาค และวันที่สร้างโปรเจกต์ของคุณ แล้วถามว่าจะติดตั้ง Atlas ลงไปหรือไม่ ตรวจสอบว่าเป็นโปรเจกต์ที่คุณเพิ่งสร้าง แล้วตอบ yes การตอบ yes ครั้งเดียวนั้นครอบคลุมขั้นตอนที่เหลือทั้งหมด:

สร้างฐานข้อมูล Atlas (migration 54 รายการ แสดงตัวอย่างก่อน)

ดีพลอยและตรวจสอบ Edge Functions 4 ตัวของ Atlas

กำหนดค่าแอปด้วย Publishable key เท่านั้น

รันการบิลด์และการตรวจสอบอัตโนมัติของ Atlas

ใช้เวลาไม่กี่นาที และคุณไม่ต้องเปิดหรือทดสอบอะไร ถ้าโปรเจกต์ไม่ว่าง Claude จะหยุดและไม่เปลี่ยนแปลงอะไรเลย

สร้าง repository ส่วนตัวที่ว่างเปล่า

นี่คือสำเนา Atlas ของคุณเองบน GitHub ซึ่ง Hostinger จะดีพลอยเว็บไซต์ของคุณจากที่นี่

สร้าง repository บน GitHub

https://github.com/new

ตั้งชื่อ repository เลือก Private ปิด README, .gitignore และ license ไว้ กด Create repository คัดลอก URL ของ repository

อนุมัติการเผยแพร่

วาง URL ของ repository ลงใน Claude เมื่อ Claude ขอ Claude จะเตรียม Git ตรวจสอบว่าไม่มีข้อมูลลับติดไปด้วย และแสดงสรุปสั้นๆ ได้แก่ repository ของคุณและ branch main ตรวจสอบว่าเป็น repository ของคุณ แล้วตอบ yes

Claude จะไม่ push ไปยัง repository ต้นฉบับของ Atlas ถ้า Git ขอให้ลงชื่อเข้าใช้ Claude จะขอให้คุณรันการ push เอง — ให้ลงชื่อเข้าใช้ผ่านเบราว์เซอร์ เพราะ GitHub ไม่รับรหัสผ่านบัญชีของคุณตรงนั้น

นำเข้า repository ของคุณ

ยังไม่มีโฮสติ้งใช่ไหม? ให้เลือกแพ็กเกจในส่วนสิ่งที่ต้องมีก่อน

Hostinger Websites Add Website Web App Import Git Repository

เชื่อมต่อ GitHub แล้วเลือก Only select repositories เลือก repository Atlas ของคุณและ branch main เลือกโดเมนชั่วคราวฟรีหรือโดเมนของคุณเอง

ตั้งค่าการบิลด์และดีพลอย

ใช้พรีเซ็ตเฟรมเวิร์ก Vite ที่ Hostinger ตรวจพบ เลือก Node.js 22 หรือเวอร์ชันใหม่ที่สุดที่มีให้เลือก ตั้งคำสั่งบิลด์เป็น npm run build ตั้งไดเรกทอรีเอาต์พุตเป็น dist

เพิ่มตัวแปรสภาพแวดล้อมสองตัวนี้เท่านั้น Claude จะแสดงค่าทั้งสองให้คุณ และคุณไม่ต้องสนใจคำแนะนำอื่น:

VITE_SUPABASE_URL VITE_SUPABASE_PUBLISHABLE_KEY

VITE_SUPABASE_URL

URL ของโปรเจกต์

VITE_SUPABASE_PUBLISHABLE_KEY

Publishable key

รับค่าเหล่านี้จาก Supabase

เปิด Connect

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

ความปลอดภัย

ใส่เฉพาะ Publishable key ที่นี่ ห้ามใส่ Secret key หรือ service_role key ในตัวแปร VITE_ — ทุกอย่างที่ขึ้นต้นด้วย VITE_ จะมองเห็นได้ในเบราว์เซอร์

กด Deploy แล้วรอให้บิลด์เสร็จ คัดลอกที่อยู่เว็บไซต์ของคุณแล้ววางลงใน Claude

Claude จะตรวจสอบว่าเว็บไซต์จริงโหลดผ่าน HTTPS และเชื่อมต่อกับโปรเจกต์ Supabase ของคุณแล้ว

เพิ่มที่อยู่เว็บไซต์จริงลงใน Supabase

อีเมลสมัครสมาชิกและอีเมลรหัสผ่านจะลิงก์ไปยังที่อยู่เหล่านี้ Claude จะส่ง Site URL และ Redirect URLs ทั้งสี่ที่ถูกต้องสำหรับโดเมน Hostinger ของคุณ — ให้คัดลอกจากข้อความของ Claude

Supabase Authentication URL Configuration

ตั้ง Site URL เป็นที่อยู่เว็บไซต์จริงของคุณ โดยขึ้นต้นด้วย https:// เพิ่ม Redirect URLs ทั้งสี่ทีละรายการ กด Save แล้วบอก Claude ว่าเสร็จแล้ว

Redirect URL แต่ละรายการคือที่อยู่เว็บไซต์จริงของคุณตามด้วยพาธใดพาธหนึ่งต่อไปนี้:

/auth/callback

/accept-invite

/auth/reset-password

/confirm-email

สร้างเอเจนซีของคุณ

เปิดลิงก์สมัครที่ Claude ให้ — ที่อยู่เว็บไซต์จริงของคุณตามด้วย /sign-up สร้างเอเจนซีด้วยอีเมลเดียวกับบัญชี Supabase ของคุณ เปิดอีเมลยืนยันในเบราว์เซอร์เดียวกัน ลงชื่อเข้าใช้ แล้วบอก Claude เมื่อแดชบอร์ดแสดงเอเจนซีของคุณ

ทำไมต้องใช้อีเมลเดียวกัน: อีเมลในตัวของ Supabase ส่งได้เฉพาะที่อยู่ของทีม Supabase ของคุณ ประมาณสองฉบับต่อชั่วโมง จากนั้น Claude จะยืนยันว่าเอเจนซีของคุณมีอยู่จริงโดยมีคุณเป็น Owner — คุณไม่ต้องทดสอบอะไร

Atlas ออนไลน์แล้ว ทุกครั้งที่ push ไปยัง branch main ระบบจะดีพลอยใหม่บน Hostinger ดังนั้นขอให้ Claude เปลี่ยนอะไรก็ได้ รวมถึงชื่อ โลโก้ หรือสีของคุณเอง แล้วขอให้ Claude push

ก่อนรับลูกค้าจริง

เชื่อมต่อผู้ให้บริการอีเมลของคุณเอง (Custom SMTP) ก่อนที่ลูกค้าหรือพนักงานนอกทีม Supabase ของคุณจะสมัคร:

Supabase Authentication Emails SMTP Settings