คู่มือ ChanTan Studioพรีวิวสด (App Preview) ใน ChanTan Studio ทำงานยังไง
แผงฝั่งขวาคือแอปจริงของคุณที่กำลังรันอยู่ และเห็นได้แค่คุณคนเดียว เรียนรู้แถบเครื่องมือ ขนาดมือถือกับแท็บเล็ต ทำไมมันหลับหลัง 20 นาที และวิธีปลุกฟรี
ฝั่งขวาของโปรเจกต์คือ พรีวิวสด ซึ่งมีป้ายกำกับว่า "พรีวิวแอป"
นี่คือแอปของคุณที่กำลังรันอยู่จริง ๆ ไม่ใช่ภาพนิ่ง ไม่ใช่ภาพจำลอง คุณคลิกลิงก์ข้างในได้ กรอกฟอร์มได้ และเดินไปมาระหว่างหน้าต่าง ๆ ได้เหมือนคนที่เข้ามาเยี่ยมชมเว็บจริง ๆ เจ้าของร้านครัวริมคลองกดเข้าหน้าเมนูแล้วลองกดปุ่มสั่งล่วงหน้าดูได้เลยตรงนี้ ก่อนที่ลูกค้าคนไหนจะได้เห็น
สองเรื่องที่ต้องรู้ก่อน
1. พรีวิวเป็นของส่วนตัว ไม่ใช่เว็บที่เผยแพร่แล้ว ไม่มีใครเปิดดูได้นอกจากคุณ ทุกอย่างที่คุณและ AI เปลี่ยนจะมาปรากฏที่นี่ก่อน คนอื่นจะไม่เห็นอะไรเลยจนกว่าคุณจะกด "เผยแพร่"
2. พรีวิวหลับโดยตั้งใจ หลังจากไม่มีความเคลื่อนไหวประมาณ 20 นาที พื้นที่ทำงานของแอปจะถูกพักไว้เพื่อประหยัดทรัพยากร ถ้าคุณเปิดโปรเจกต์ค้างไว้และยังเชื่อมต่ออยู่ มันจะตื่นนานกว่านั้น แต่ไม่เกินประมาณ 60 นาที
เมื่อขึ้นว่า "แอปของคุณกำลังพักอยู่"
คุณจะเห็นการ์ดรูปพระจันทร์ทับอยู่บนภาพเบลอ ๆ ของแอปคุณ
🌙 "แอปของคุณกำลังพักอยู่" — "เราพักไว้เพื่อประหยัดทรัพยากร แตะเพื่อปลุกให้ตื่น"
นี่ไม่ใช่ข้อผิดพลาด และไม่มีอะไรหายไป โค้ด ข้อมูล และเว็บที่เผยแพร่แล้วของคุณไม่ถูกแตะเลย กด "ปลุก" แล้วมันจะเริ่มทำงานใหม่
การปลุกฟรี ไม่มีการหักเครดิตใด ๆ
แถบเครื่องมือเหนือแอปของคุณ
ทุกอย่างบนแถบนี้ฟรีทั้งหมด
| ปุ่ม | ป้ายกำกับ | ทำอะไร |
|---|---|---|
| ไอคอนขยาย | "เข้าสู่เต็มจอ" | ซ่อนแชทให้พรีวิวเต็มหน้าจอ กด ESC เพื่อออก ไม่แสดงบนมือถือ |
| ช่องหน้าเว็บ | แสดง / หรือ /about |
เปิดแล้วจะเห็นรายชื่อหน้าทั้งหมดของแอป เลือกหน้าไหนก็กระโดดไปหน้านั้น |
| ปุ่มขนาด 3 ปุ่ม | "เดสก์ท็อป" · "iPad" · "มือถือ" | แสดงแอปแบบเต็มความกว้าง, 820 × 1180 และ 390 × 844 |
| ลูกศรวงกลม | "รีเฟรชพรีวิว" | โหลดหน้าที่กำลังแสดงอยู่ใหม่ |
| ลูกศรออกจากกล่อง | "เปิดในแท็บใหม่" | เปิดหน้าเดียวกันในแท็บของตัวเอง ยังคงเป็นพรีวิวส่วนตัวอยู่ |
| ดินสอ | "แก้ไขข้อความ สี และรูปโดยตรง" | เปิดโหมดคลิกเพื่อแก้ ออกจากโหมดด้วยปุ่ม "ยกเลิก" บนแถบสีเขียว |
ขนาดหน้าจอเหล่านี้เป็นของจริง ไม่ใช่แค่ย่อภาพหลอกตา แอปของคุณเชื่อจริง ๆ ว่ามันอยู่บนแท็บเล็ตกว้าง 820 หรือมือถือกว้าง 390 ดีไซน์แบบ responsive จึงตอบสนองตามจริง กรอบที่เห็นแค่ถูกย่อทางสายตาให้พอดีจอคุณเท่านั้น การสลับขนาดไม่โหลดอะไรใหม่ คุณจึงไม่เสียตำแหน่งที่ดูอยู่
มีให้เลือกแค่ 3 ขนาดเท่านั้น ไม่มีช่องกรอกความกว้างเอง
บางหน้าถูกตัดออกจากรายการโดยตั้งใจ ได้แก่ หน้าที่ต้องมีค่าในที่อยู่เว็บ (สินค้าชิ้นเดียว คำสั่งซื้อรายการเดียว) และหน้า "ไม่พบหน้านี้" แบบครอบจักรวาล เพราะเปิดลอย ๆ ไม่ได้ จึงไม่ถูกเสนอให้เลือก
ข้อความที่ลอยอยู่เหนือพรีวิว
| ข้อความ | หมายความว่าอะไร |
|---|---|
| "กำลังอัปเดต..." หรือ "ขั้นตอนที่ 3 จาก 7" | AI กำลังเปลี่ยนแอปของคุณอยู่ตอนนี้ ส่วนใหญ่อัปเดตโดยไม่ต้องโหลดใหม่เลย |
| "พรีวิวเจอปัญหา" พร้อมปุ่ม "แก้ไขเลย" และ "ปิด" | แอปของคุณเกิดข้อผิดพลาด ⚠️ "แก้ไขเลย" เริ่มงานสร้างด้วย AI จริง จึงมีค่าเครดิต ส่วน "ปิด" แค่ซ่อนข้อความเฉย ๆ |
| "กำลังดูเวอร์ชันเก่า — นี่ไม่ใช่สถานะปัจจุบัน" | คุณกำลังดูเวอร์ชันที่บันทึกไว้จากประวัติ กด "กลับสู่ปัจจุบัน" |
| "กำลังย้อนกลับหนึ่งเวอร์ชัน..." | คุณกดเลิกทำ รอให้มันทำงานเสร็จ |
ปุ่ม "แก้ไขเลย" จะถูกซ่อนโดยตั้งใจในระหว่างที่มีงานสร้างรันอยู่ ระหว่างที่พรีวิวกำลังเริ่ม และระหว่างเชื่อมต่อใหม่ คุณจึงไม่ถูกเสนอให้จ่ายเงินแก้ปัญหาที่กำลังจะหายไปเอง
สิ่งอื่นที่คุณอาจเห็นแทนแอป
| สิ่งที่คุณเห็น | ต้องทำอะไร |
|---|---|
| ภาพเบลอพร้อมป้ายเม็ดยา "กำลังโหลด…" | ไม่ต้องทำอะไร เดี๋ยวมันจางหายเอง |
| หน้าจอมีโลโก้ ChanTan พร้อมแถบความคืบหน้า | รอ พื้นที่ทำงานกำลังเริ่ม หรืองานสร้างครั้งแรกกำลังรัน แต่ละบรรทัดคือขั้นตอนจริง |
| "กำลังเชื่อมต่อพรีวิวของคุณใหม่…" | รอประมาณ 8 วินาที ถ้ายังไม่หาย ปุ่ม "ปลุก" จะโผล่ขึ้นมา กดได้เลย |
| ปุ่ม "ลองอีกครั้ง" ปุ่มเดียวโดด ๆ | กดมัน ถ้ายังพลาดซ้ำ ให้รีสตาร์ตพรีวิว (ดูด้านล่าง) |
ChanTan แอบตรวจสุขภาพของพรีวิวทุก 3 นาทีระหว่างที่คุณเปิดโปรเจกต์อยู่ และตรวจอีกครั้งเมื่อคุณกลับมาที่แท็บนี้ ปกติคุณจะไม่เห็นอะไรเลย และการเริ่มช้าจะไม่ถูกเข้าใจผิดว่าแอปตายแล้ว
การรีสตาร์ตพรีวิวด้วยตัวเอง
นี่คือทางที่ถูกต้องเมื่อพรีวิวค้าง ขาวโล่ง หรือทำตัวแปลก ๆ หลังจากรีเฟรชไปหลายรอบแล้ว
- เปิดแผง "ประวัติเวอร์ชัน" ทางซ้ายของโปรเจกต์
- เลือก "รีสตาร์ตพรีวิว"
- ยืนยันด้วย "ใช่ รีสตาร์ตเลย"
หน้าต่างยืนยันจะบอกชัดเจนว่าจะเกิดอะไรขึ้น: "การดำเนินการนี้สร้างพรีวิวของแอปคุณใหม่ตั้งแต่ต้น โดยปกติใช้เวลา 30–60 วินาที (นานสุด 3 นาทีในกรณีหายาก) โค้ดและข้อมูลของคุณไม่ได้รับผลกระทบ — รีสตาร์ตเฉพาะคอนเทนเนอร์พรีวิวเท่านั้น"
ฟรีและปลอดภัย
พรีวิวคือเว็บที่เผยแพร่แล้วหรือเปล่า
ไม่ใช่ เป็นคนละอย่างกัน
| พรีวิว | เว็บที่เผยแพร่แล้ว | |
|---|---|---|
| ใครเห็นได้ | คุณคนเดียว | ใครก็ตามที่มีลิงก์ |
| แสดงอะไร | งานล่าสุดที่สุดของคุณ | เฉพาะสิ่งที่คุณกดเผยแพร่ครั้งล่าสุด |
| หลับไหม | หลับ หลังราว 20 นาที | ไม่เคยหลับ |
"เปิดในแท็บใหม่" เปิดพรีวิว ไม่ใช่เว็บที่เผยแพร่แล้ว และแท็บนั้นจะใช้ไม่ได้เมื่อพรีวิวหลับ ถ้าจะแชร์แอปให้คนอื่น ต้องกดเผยแพร่
ข้อจำกัดที่ต้องรู้ตามตรง
- การปลุก รีสตาร์ต รีเฟรช ปรับขนาด เต็มจอ และเปิดในแท็บใหม่ ฟรีทั้งหมด มีแค่งานที่ AI ทำให้คุณเท่านั้นที่คิดเครดิต
- พรีวิวสะท้อนงานล่าสุดของคุณภายในไม่กี่วินาทีหลังทุกการเปลี่ยนแปลง ส่วนการเปลี่ยนรูปจะทำให้โหลดใหม่หนึ่งครั้ง การโหลดครั้งนั้นเป็นเรื่องปกติ
- ถ้าพรีวิวขาวหรือว่างเปล่าและรีเฟรชแล้วไม่ช่วย ให้ใช้ "รีสตาร์ตพรีวิว" ก่อน มันแก้ได้มากกว่าการรีเฟรชเยอะ