← กลับหน้าหลักสูตร
Rawinnipa

AI Web Studio

Prince of Songkla University, Phuket Campus
มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต

AI WEB STUDIO

คลังแผนภาพหลักสูตร

ออกแบบและพัฒนาเว็บไซต์ด้วย AI
977-121 Module: Website Design and Development

แผนภาพ 17 ชิ้น สร้างจากคำจำกัดความที่ทำซ้ำได้

สถาปัตยกรรมแสดงคำขอไฟล์เว็บไซต์ไปยัง Static Assets และคำขอ API ผ่าน Cloudflare Worker ไปยัง D1คำขอหนึ่งครั้งเดินทางอย่างไรarchitectureชั้นบริบทห้าชั้นจากเป้าหมายผู้ใช้ กฎ workspace เอกสารออกแบบ ไฟล์งาน และหลักฐานการตรวจสอบบริบทที่ทำให้ Agent ทำงานตรงโจทย์layersผังงานจาก brief ผ่านบริบท สร้าง ตรวจสอบ และ deploy โดยผลตรวจไม่ผ่านย้อนกลับไปแก้ไขวงจรส่งงานจนผ่านการตรวจสอบflowchartกระบวนการกำหนดทิศทางภาพ เขียน prompt สร้างภาพ เก็บต้นฉบับ ปรับ WebP และตรวจในหน้าเว็บจากทิศทางภาพสู่ Asset ที่พร้อมใช้flowchartลำดับข้อความจากผู้ใช้ผ่านหน้าเว็บและ Worker ไปยัง D1 แล้วส่งรหัสอ้างอิงกลับลำดับการส่งแบบฟอร์มติดต่อsequenceผังงานแยกการเช็กคิวเชิงแนะนำออกจากธุรกรรมจองที่ใช้ trigger ป้องกันสต็อกเกินการเช็กคิวกับการจองจริงflowchartวงจรชีวิตแถวการจองจาก reserved-demo ไปหมดผลตาม expires_at แล้วถูก scheduled cleanup ลบสถานะจริงของการจองสาธิตstateลำดับสร้างใบเสนอราคาที่ Worker รับเฉพาะรหัสสินค้าและจำนวนแล้วอ่านราคาจริงจาก D1ราคาใบเสนอราคาต้องมาจากเซิร์ฟเวอร์sequenceสถาปัตยกรรมแสดง Browser แยกคำขอไฟล์ไป Static Assets และ API ไป Worker ซึ่งอ่านเขียน D1 ผ่าน bindingตำแหน่งที่ระบบทำงานบน Cloudflarearchitectureผังประตูคุณภาพจาก lint และ typecheck ผ่าน API tests, browser tests, build dry run, deploy และ production smokeประตูคุณภาพก่อนเผยแพร่flowchartกระบวนการรับข้อมูล ทำ HMAC fingerprint จัดเก็บ rental demo 30 นาทีหรือ contact และ quote 7 วัน แล้ว scheduled cleanup ลบตาม TTLวงจรชีวิตข้อมูลสาธิตflowchartเส้นทางผู้ใช้จากดูรายการ กรองและเรียง เปิดรายละเอียด บันทึกรายการโปรด และส่งข้อความสนใจเส้นทางผู้ใช้เว็บบ้านสบายflowchartกระบวนการเลือกความหมายและชนิดภาพ ยืนยัน tokens ทำ HTML ก่อน สกัด SVG และตรวจ accessibility กับ geometryวิธีสร้างแผนภาพด้วย Diagram DesignflowchartER diagram แสดง equipment เชื่อม rentals และ rental_days พร้อม idempotency_keys ที่อ้าง resource_id เชิงตรรกะแบบจำลองข้อมูลการเช่าerเส้นเวลาสองวัน วันละสี่ชั่วโมง จากพื้นฐาน การใช้ AI และการออกแบบ ไปยังข้อมูล การเคลื่อนไหว การเผยแพร่ และ capstone พร้อมรางเรียนต่อด้วยตนเองสำหรับบท 00–10 และ labsเส้นทางเรียน 2 วัน 8 ชั่วโมงtimelineผังงานแสดงการรวบรวมข้อมูลพร้อม source ID การวิจัยแบบแยกข้อเท็จจริง ข้ออนุมาน และช่องว่าง ก่อนสร้าง website brief, mini brandbook, ระบบ icon และ key visual ที่เก็บ prompt provenance แล้วส่งมอบเว็บไซต์พร้อมตรวจคุณภาพ โดยวนกลับไปวิจัยเมื่อหลักฐานยังไม่พอจากข้อมูลสู่ Brand System สำหรับเว็บไซต์flowchartกระบวนการของ $rw-web เริ่มจากวิจัยข้อมูลจริงและสร้าง Brandkit ก่อนออกแบบเนื้อหาและเว็บไซต์ โดยอาจใช้ gpt-image-2 สร้างภาพประกอบ จากนั้นตรวจเว็บไซต์พร้อมภาพ capture แล้วจึง deploy ไปยัง Cloudflare และตรวจ HTTPS เมื่อได้รับอนุญาต$rw-web: จากข้อมูลสู่เว็บไซต์จริงflowchart