นำ prototype ที่มีอยู่มาใช้กับ Stardeck
เปลี่ยน prototype ที่ทำด้วย Claude, Codex หรือ coding tool บนเครื่องอื่นๆ ให้เป็นแอป Stardeck จริง
หากคุณสร้าง prototype ไว้แล้วด้วย Claude, Codex หรือ coding tool บนเครื่องอื่น คุณไม่ต้องเริ่มใหม่ สร้างแอปก่อน ตามคู่มือเริ่มต้นในเบราว์เซอร์ จากนั้นอัปโหลด prototype เข้าไปในแอป และวางแผนเวอร์ชัน production ด้วย Starcat Developer
ตัวอย่างในหน้านี้คือ Lamp Coffee เช่นเดิม: เจ้าของทำหน้าจองโต๊ะแบบจำลองไว้ด้วย Claude
และบันทึกเป็นโฟลเดอร์ชื่อ booking-mockup
สร้างบนเครื่องด้วย coding agent ของคุณเองอยู่ใช่ไหม? คัดลอกโฟลเดอร์ prototype ไปไว้ใน clone ของแอปคุณ แล้วให้ prompt ในขั้นตอนที่ 2 กับ agent ของคุณ ส่วนที่เหลือของ หน้านี้สำหรับการทำงานในเบราว์เซอร์
ลบไฟล์ .env API key credential และข้อมูลลับอื่นๆ ออกก่อนอัปโหลด
คุณไม่จำเป็นต้องอัปโหลดโฟลเดอร์ที่สร้างขึ้นอัตโนมัติ เช่น node_modules, .next, dist หรือ
build
1. อัปโหลด prototype ของคุณ
เปิด Lamp Coffee แล้วเลือกแท็บ Code แท็บนี้ปรากฏบนเดสก์ท็อปใน developer mode ในแผง Files เลือก:
- Upload files เพื่อเพิ่มไฟล์ HTML เดี่ยวหรือชุดไฟล์เล็กๆ
- Upload folder เพื่อเพิ่ม prototype ทั้งชุดและคงโครงสร้างโฟลเดอร์ไว้
ตัวอย่างเช่น การอัปโหลดโฟลเดอร์ booking-mockup จะเพิ่มเข้าไปใน repository เป็น booking-mockup/
แต่ละไฟล์ใหญ่ได้สูงสุด 25 MB โฟลเดอร์ dependency และ build ที่สร้างขึ้นอัตโนมัติจะถูกข้ามให้
เก็บ prototype ไว้ในโฟลเดอร์ของมันเอง แทนที่จะแทนที่ไฟล์เดิมของแอป วิธีนี้ให้ Starcat Developer มีตัวอ้างอิงที่ชัดเจนไว้ตรวจดู ขณะที่มันสร้างเวอร์ชัน production ในส่วนที่ถูกต้องของแอป
ไฟล์ที่ Starcat Developer ตรวจดูได้
Starcat Developer อ่านซอร์สโค้ด HTML, Markdown, JSON, CSV และไฟล์ข้อความอื่นๆ ได้โดยตรงจาก repository มันยังดึงเนื้อหาจาก PDF, เอกสาร DOCX, สเปรดชีต XLSX และงานนำเสนอ PPTX ได้ และบรรยายรูปภาพรูปแบบทั่วไป เช่น PNG และ JPEG ได้
ระบุไฟล์หรือโฟลเดอร์ที่เกี่ยวข้องใน prompt เพื่อให้ Starcat Developer รู้ว่าต้องตรวจอะไร ไฟล์ใหญ่ได้สูงสุด 25 MB ต่อไฟล์ ส่วนรูปภาพต้องมีขนาด 10 MB หรือเล็กกว่าเพื่อให้ Starcat Developer วิเคราะห์ได้ ไฟล์บีบอัดและไบนารีรูปแบบอื่นที่ไม่รองรับยังคงอยู่ใน repository ได้ แต่ Starcat Developer ตรวจดูเนื้อหาข้างในโดยตรงไม่ได้
2. วางแผนแอปจริงกับ Starcat Developer
ในแท็บ Build สลับแชตเป็นโหมด Plan และขอให้มันตรวจ prototype ที่อัปโหลดก่อนเปลี่ยนโค้ด อธิบายว่า prototype สาธิตอะไร และแอป production ต้องทำอะไรได้
คุณเริ่มด้วย prompt นี้ได้:
ฉันอัปโหลด prototype ของหน้าจองโต๊ะของ Lamp Coffee ไว้ใน
booking-mockup/ช่วยตรวจดู แล้ววางแผน สร้างมันเป็นส่วนหนึ่งของแอปนี้บน Booking Module เก็บดีไซน์และการโต้ตอบที่ใช้ได้ไว้ ระบุข้อมูลชั่วคราวและ flow ที่ยังไม่สมบูรณ์ และวางแผนเรื่องข้อมูลจริง การเข้าสู่ระบบ สิทธิ์ integration และการทดสอบ ยังไม่ต้องเปลี่ยนโค้ด
หากคุณอัปโหลดไฟล์ HTML ไฟล์เดียว ให้ระบุชื่อไฟล์ใน prompt เช่น booking-mockup.html
3. ตรวจแผน
ก่อนอนุมัติให้ลงมือทำ ตรวจว่าแผนตอบคำถามเหล่านี้:
- หน้าจอ การโต้ตอบ และรายละเอียดด้านภาพใดที่ควรคงไว้
- ข้อมูลที่ฮาร์ดโค้ดหรือข้อมูลตัวอย่างใดควรย้ายไปอยู่ใน Data Store
- แอปต้องมีระบบเข้าสู่ระบบ บทบาท หรือสิทธิ์หรือไม่
- ฟอร์ม การชำระเงิน อีเมล การอัปโหลด หรือบริการภายนอกใดต้องเชื่อมต่อจริง
- ควรทดสอบอะไรก่อนที่แอปจะออนไลน์
หากแผนขาดอะไรไป บอก Starcat Developer ว่าต้องแก้ตรงไหน เมื่อแผนดูถูกต้องแล้ว อนุมัติและให้ agent สร้างแอปตามโครงสร้างมาตรฐานของ Stardeck
4. ทดสอบ flow ของ production
ใช้ preview ทดสอบ workflow จริง ไม่ใช่แค่ดูว่า prototype ที่นำเข้ามายังหน้าตาถูกต้อง ตรวจฟอร์ม ข้อมูลที่บันทึก สิทธิ์ เลย์เอาต์บนมือถือ สถานะข้อผิดพลาด และบริการที่เชื่อมต่อทุกตัว ปรับแต่งแอปกับ Starcat Developer ต่อไปจนพร้อมเผยแพร่
ถัดไป: Refining and Polishing
เปลี่ยนแปลง Lamp Coffee ต่อไปและทดสอบไปพร้อมกัน