แท็บโค้ด: อ่านและแก้ไขโค้ดของแอป
สรุปสั้น ๆแท็บโค้ดแสดงทุกไฟล์ของแอปเป็นโครงสร้างโฟลเดอร์ พร้อมตัวแก้ไขอยู่ข้าง ๆ คลิกไฟล์เพื่ออ่าน พิมพ์เพื่อแก้ แล้วกด บันทึก (หรือ ⌘S / Ctrl+S) การบันทึกแต่ละครั้งจะกลายเป็นเวอร์ชันที่ย้อนกลับไปได้ แอปสร้างด้วย TanStack Start, React และ TypeScript โค้ดเป็นของคุณ ดาวน์โหลดได้จาก การตั้งค่าโปรเจกต์ → ส่งออก หรือเก็บไว้ใน GitHub
คุณไม่จำเป็นต้องเปิดดูโค้ดเลย เพราะ MonstarX เขียนและแก้ไขให้ แต่โค้ดทั้งหมดอยู่ตรงนั้นให้ดูได้เสมอ เมื่อคุณ (หรือนักพัฒนาที่ทำงานด้วย) อยากดู แท็บ โค้ด แสดงทุกไฟล์ของแอปและให้คุณแก้ไขเองได้
แท็บโค้ดแสดงอะไรบ้าง
หัวข้อที่มีชื่อว่า “แท็บโค้ดแสดงอะไรบ้าง”ทางซ้ายเป็นโครงสร้างโฟลเดอร์ที่มีทุกไฟล์ของแอป ทางขวาเป็นไฟล์ที่คุณเลือก พร้อมสีของโค้ดและเลขบรรทัด
บนมือถือ แตะชื่อไฟล์ที่ด้านบนเพื่อเปิดโครงสร้างโฟลเดอร์ขึ้นมา
อะไรอยู่ตรงไหน
หัวข้อที่มีชื่อว่า “อะไรอยู่ตรงไหน”ไม่จำเป็นต้องรู้ แต่รู้ไว้จะช่วยเวลาอ่านโค้ดตาม
| โฟลเดอร์หรือไฟล์ | มีอะไรอยู่ |
|---|---|
src/routes/ | 1 ไฟล์ต่อ 1 หน้า index.tsx คือหน้าแรก pricing.tsx คือ /pricing |
src/components/ | ส่วนที่ใช้ในหลายหน้า เช่น ส่วนหัวและส่วนท้าย |
src/server/ | โค้ดที่ทำงานบนเซิร์ฟเวอร์ เช่น บันทึกการจอง อ่านตารางเรียน |
src/db/ | โครงสร้างข้อมูลของแอป |
migrations/ | ขั้นตอนที่สร้างและเปลี่ยนตารางในฐานข้อมูล |
public/ | ไฟล์ที่แอปส่งให้เบราว์เซอร์ตามเดิมโดยไม่แปลง เช่น ไอคอน |
src/styles.css | สี ฟอนต์ และการจัดรูปแบบอื่น ๆ |
แอปของฉันสร้างด้วยอะไร
หัวข้อที่มีชื่อว่า “แอปของฉันสร้างด้วยอะไร”แอปที่ MonstarX สร้างเป็นเว็บแอปสมัยใหม่ที่ใช้
- TypeScript คือ JavaScript ที่มีการตรวจสอบช่วยจับข้อผิดพลาดก่อนแอปทำงาน
- React วิธีสร้างหน้าตาเว็บที่นิยมใช้มากที่สุด
- TanStack Start เฟรมเวิร์กที่เปลี่ยนหน้า React ให้เป็นแอปเต็มรูปแบบพร้อมเซิร์ฟเวอร์ หน้าจึงโหลดเร็วและข้อมูลปลอดภัยบนเซิร์ฟเวอร์
- Tailwind CSS ชุดเครื่องมือจัดรูปแบบสำหรับสี ระยะห่าง และเลย์เอาต์
การ์ดในหน้าโปรเจกต์ก็แสดงข้อมูลนี้ เช่น TanStack Start · React · TypeScript แอปที่นำเข้ามาจะใช้เทคโนโลยีเดิมที่สร้างไว้
แก้ไขไฟล์เองอย่างไร
หัวข้อที่มีชื่อว่า “แก้ไขไฟล์เองอย่างไร”-
เปิดแท็บ โค้ด แล้วคลิกไฟล์ในโครงสร้างโฟลเดอร์
-
คลิกในตัวแก้ไขแล้วแก้ตามต้องการ คำว่า ยังไม่ได้บันทึก จะขึ้นที่ด้านบน พร้อมปุ่ม ละทิ้ง และ บันทึก
-
คลิก บันทึก หรือกด ⌘S (Mac) หรือ Ctrl+S (Windows) พรีวิวจะอัปเดตทันที
การบันทึกแต่ละครั้งจะเก็บเป็นเวอร์ชันชื่อ “แก้ไข” ตามด้วยพาธของไฟล์ เช่น “แก้ไข src/routes/schedule.tsx” คุณจึงย้อนกลับได้ถ้ามีอะไรผิดพลาด ถ้าโปรเจกต์เชื่อมกับ GitHub และเปิดการพุชอัตโนมัติไว้ (ค่าเริ่มต้น) ระบบจะพุชการเปลี่ยนแปลงไปที่นั่นด้วย MonstarX จะเห็นการแก้ไขของคุณในครั้งถัดไปที่คุณขอให้ทำอะไร
ละทิ้ง จะลบการเปลี่ยนแปลงที่ยังไม่ได้บันทึกทิ้ง
เมื่อไรที่แก้ไขไม่ได้
หัวข้อที่มีชื่อว่า “เมื่อไรที่แก้ไขไม่ได้”- ระหว่างที่ MonstarX กำลังเปลี่ยนแอป ไฟล์จะอ่านได้อย่างเดียวจนกว่าจะเสร็จ โดยมีข้อความ “MonstarX กำลังเปลี่ยนแอปของคุณ ไฟล์จะอ่านได้อย่างเดียวจนกว่าจะเสร็จ”
- เมื่อไฟล์เปลี่ยนไปหลังจากคุณเริ่มแก้ ถ้า MonstarX หรือคนอื่นบันทึกไฟล์นั้นในระหว่างนั้น คุณจะเห็นข้อความ “ไฟล์นี้เปลี่ยนแปลงหลังจากคุณเริ่มแก้ไข” และปุ่ม บันทึก จะเป็นสีเทา ฉบับร่างของคุณยังเก็บไว้จนกว่าจะละทิ้ง คุณจึงเปรียบเทียบ ละทิ้ง แล้วแก้ใหม่ได้
- ไฟล์ที่ MonstarX จัดการ ในแอปที่ MonstarX สร้าง ไฟล์การตั้งค่า (เช่น
package.jsonและไฟล์กำหนดค่าของ Vite กับ TypeScript) และบริการในตัวสำหรับบัญชีผู้ใช้ ฐานข้อมูล อีเมล พื้นที่จัดเก็บ และ AI จะอยู่ในความดูแลของ MonstarX ไฟล์เหล่านี้ไม่อยู่ในโครงสร้างโฟลเดอร์ แต่มีอยู่ในไฟล์ zip เมื่อคุณส่งออก - สิทธิ์ดูอย่างเดียว คนที่ได้รับแชร์โปรเจกต์แบบ ดูและแสดงความคิดเห็นได้ จะเห็นข้อความ “ดูได้อย่างเดียว: คุณอ่านโค้ดได้ แต่เปลี่ยนแปลงไม่ได้” ส่วนคนที่ แก้ไขได้ จะแก้ไขและบันทึกไฟล์ได้เหมือนคุณ
ดาวน์โหลดโค้ดได้ไหม
หัวข้อที่มีชื่อว่า “ดาวน์โหลดโค้ดได้ไหม”ได้ โค้ดเป็นของคุณ คุณเป็นเจ้าของสิ่งที่สร้างด้วย MonstarX รวมถึงโค้ดที่ MonstarX เขียน นำโค้ดไปได้ 2 วิธี
- ดาวน์โหลดไฟล์ zip ที่ การตั้งค่าส่งออก ในเวิร์กสเปซ แล้วคลิก ดาวน์โหลด .zip คุณจะได้โปรเจกต์ที่ทำงานได้ด้วยตัวเองบนคอมพิวเตอร์ของคุณ ดู ส่งออกแอป
- เก็บไว้ใน GitHub เชื่อมรีโพซิทอรีแล้วทุกการเปลี่ยนแปลงจะกลายเป็นคอมมิต ดู GitHub
คำถามที่พบบ่อย
หัวข้อที่มีชื่อว่า “คำถามที่พบบ่อย”ต้องเขียนโค้ดเป็นไหมถึงจะใช้ MonstarX ได้
ไม่ต้อง แท็บโค้ดมีไว้สำหรับตอนที่คุณอยากดู ทุกอย่างทำได้ด้วยการอธิบายสิ่งที่ต้องการในแชท
MonstarX จะย้อนการแก้ไขของฉันไหม
ไม่ MonstarX อ่านไฟล์ตามสภาพตอนที่คุณส่งคำขอถัดไป รวมถึงสิ่งที่คุณแก้ ถ้าอยากให้ MonstarX รู้ว่าทำไมคุณถึงแก้ ให้บอกในแชท
เพิ่มไฟล์ใหม่ในแท็บโค้ดได้ไหม
แท็บโค้ดใช้แก้ไขไฟล์ที่มีอยู่ ถ้าต้องการหน้าหรือไฟล์ใหม่ ให้ขอ MonstarX ในแชท
เพิ่มแพ็กเกจหรือไลบรารีอย่างไร
ขอในแชท เช่น “ใช้ไลบรารีตัวเลือกวันที่ในแบบฟอร์มจอง” MonstarX จะเพิ่มแพ็กเกจให้
ใครเป็นเจ้าของโค้ดที่ MonstarX เขียน
คุณ ข้อกำหนดของ MonstarX ระบุว่าคุณเป็นเจ้าของคำขอ ไฟล์ โค้ด และแอปของคุณ และส่งออกได้ทุกเมื่อ