How to Create a Basic CRUD App with Preact?

ภาพรวม ในคู่มือนี้ คุณจะพัฒนาแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, และลบ) โดยใช้ preact เราจะพาคุณไปสร้างระบบที่จัดการการดำเนินการข้อมูลพื้นฐาน ตั้งแต่การเริ่มต้นโครงการ back4app ที่ชื่อว่า basic crud app preact ไปจนถึงการจัดการข้อมูลได้อย่างง่ายดาย โครงการนี้มีแบ็กเอนด์ที่แข็งแกร่งและฟรอนต์เอนด์ที่เรียบง่าย สร้างด้วย preact เราจะเริ่มต้นด้วยการตั้งค่าโครงการใหม่บน back4app จากนั้นสร้างสคีมาฐานข้อมูลที่มีประสิทธิภาพ—ไม่ว่าจะทำด้วยตนเองหรือใช้ความช่วยเหลือจาก back4app ai assistant การออกแบบนี้จะรองรับฟังก์ชัน crud ที่จำเป็นทั้งหมด ถัดไป เราจะแนะนำ back4app admin app ซึ่งเป็นอินเทอร์เฟซแบบลากและวางที่ทำให้การจัดการข้อมูลง่ายขึ้น คุณสามารถเพิ่ม แก้ไข หรือเอาบันทึกออกได้อย่างรวดเร็วโดยใช้เครื่องมือนี้ สุดท้าย คุณจะเชื่อมต่อฟรอนต์เอนด์ preact ของคุณกับ back4app โดยใช้ rest/graphql เพื่อให้แน่ใจว่าแบ็กเอนด์ของคุณมีความปลอดภัยด้วยกฎการเข้าถึงที่ทันสมัย เมื่อสิ้นสุดบทเรียนนี้ คุณจะมีแอปพลิเคชันเว็บที่พร้อมใช้งานในระดับการผลิต ซึ่งมีการตรวจสอบสิทธิ์ผู้ใช้และการจัดการข้อมูลที่แข็งแกร่ง—ทั้งหมดสร้างด้วย preact และขับเคลื่อนโดย back4app ข้อมูลเชิงลึกหลัก เชี่ยวชาญในการสร้างแอปพลิเคชัน crud ที่จัดการข้อมูลได้อย่างมีประสิทธิภาพ โดยใช้แบ็กเอนด์ที่เชื่อถือได้ เรียนรู้การออกแบบโมเดลข้อมูลที่สามารถขยายได้และรวมเข้ากับฟรอนต์เอนด์ preact เพื่อประสบการณ์ผู้ใช้ที่ดีที่สุด ค้นพบว่า back4app admin app แบบลากและวางทำให้การสร้าง อ่าน อัปเดต และลบข้อมูลง่ายขึ้นอย่างไร เข้าใจกลยุทธ์การปรับใช้ รวมถึงการทำให้เป็นคอนเทนเนอร์ด้วย docker เพื่อเปิดตัวแอปพลิเคชันของคุณได้อย่างรวดเร็ว ข้อกำหนดเบื้องต้น ก่อนเริ่มต้น โปรดตรวจสอบให้แน่ใจว่าคุณมี บัญชี back4app และโครงการที่เริ่มต้นแล้ว สำหรับคำแนะนำ โปรดดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนา preact ใช้เครื่องมือเช่น preact cli https //github com/preactjs/preact cli หรือเทียบเท่า โดยต้องติดตั้ง node js (v14 หรือใหม่กว่า) ความรู้พื้นฐานเกี่ยวกับ javascript, preact, และ rest apis ดูที่ เอกสาร preact https //preactjs com/guide/v10/ หากจำเป็น ขั้นตอนที่ 1 – การตั้งค่าโครงการของคุณ การเริ่มต้นโครงการ back4app ลงชื่อเข้าใช้บัญชี back4app ของคุณ เลือกตัวเลือก “แอปใหม่” บนแดชบอร์ดของคุณ ตั้งชื่อโครงการของคุณ basic crud app preact และทำตามคำแนะนำในการตั้งค่า สร้างโครงการใหม่ หลังจากสร้างเสร็จแล้ว โครงการของคุณจะปรากฏบนแดชบอร์ด back4app ของคุณ ซึ่งเป็นการวางรากฐานสำหรับการกำหนดค่าด้านหลัง ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูลของคุณ การจัดโครงสร้างโมเดลข้อมูลของคุณ สำหรับแอป crud ของเรา คุณจะต้องมีหลายคอลเลกชัน ด้านล่างนี้คือตัวอย่างที่สรุปคอลเลกชันและฟิลด์ที่จำเป็นสำหรับการสนับสนุนการดำเนินการ crud 1 คอลเลกชันรายการ การรวบรวมนี้เก็บรายละเอียดเกี่ยวกับแต่ละรายการ สนาม ประเภทข้อมูล วัตถุประสงค์ id รหัสวัตถุ คีย์หลักที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อของรายการ คำอธิบาย สตริง คำอธิบายสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาสร้าง อัปเดตเมื่อ วันที่ เวลาที่อัปเดตล่าสุด 2 การรวบรวมผู้ใช้ นี่เก็บข้อมูลรับรองผู้ใช้และรายละเอียดโปรไฟล์ สนาม ประเภทข้อมูล วัตถุประสงค์ id รหัสวัตถุ คีย์หลักที่สร้างโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อผู้ใช้ที่ไม่ซ้ำกัน อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกัน รหัสผ่าน hash สตริง รหัสผ่านที่ถูกแฮชสำหรับการตรวจสอบสิทธิ์ สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาที่อัปเดตบัญชีล่าสุด คุณสามารถสร้างคอลเลกชันเหล่านี้ด้วยตนเองผ่านแดชบอร์ด back4app โดยการเพิ่มคลาสใหม่สำหรับแต่ละคอลเลกชันและกำหนดฟิลด์ที่เหมาะสม สร้างคลาสใหม่ คุณสามารถเพิ่มคอลัมน์ได้โดยการเลือกประเภทข้อมูล ตั้งชื่อคอลัมน์ และตั้งค่าค่าดีฟอลต์และธงที่จำเป็น สร้างคอลัมน์ การใช้ผู้ช่วย ai ของ back4app สำหรับการสร้างสคีมา ผู้ช่วย ai ที่มีอยู่ใน back4app สามารถสร้างสคีมาของคุณโดยอัตโนมัติตามคำอธิบายที่บรรยายถึงคอลเลกชันและฟิลด์ของคุณ ฟีเจอร์นี้ช่วยเร่งการตั้งค่าและรับประกันความสอดคล้อง ขั้นตอนการใช้ผู้ช่วย ai เปิดผู้ช่วย ai จากแดชบอร์ด back4app ของคุณ ป้อนคำอธิบายรายละเอียดเกี่ยวกับโมเดลข้อมูลของคุณ ตรวจสอบคอลเลกชันและการกำหนดฟิลด์ที่สร้างขึ้นโดยอัตโนมัติ จากนั้นนำไปใช้ในโปรเจกต์ของคุณ ตัวอย่างคำสั่ง create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) วิธีการนี้ช่วยประหยัดเวลาและรับประกันสคีมาที่มีโครงสร้างดี ขั้นตอนที่ 3 – เปิดใช้งานแอปผู้ดูแลระบบและจัดการการดำเนินการ crud แนะนำแอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app มีอินเทอร์เฟซที่ไม่ต้องเขียนโค้ดเพื่อจัดการข้อมูลแบ็คเอนด์ของคุณได้อย่างง่ายดาย ฟังก์ชันการลากและวางช่วยให้คุณสามารถดำเนินการ crud ได้โดยไม่ยุ่งยาก การเปิดใช้งานแอปผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” และคลิก “เปิดใช้งานแอปผู้ดูแลระบบ” ตั้งค่าผู้ใช้ผู้ดูแลระบบคนแรกของคุณ ซึ่งจะกำหนดบทบาทเช่น b4aadminuser และคอลเลกชันระบบ เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลระบบเพื่อจัดการข้อมูลของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การดำเนินการ crud ด้วยแอปผู้ดูแลระบบ ภายในอินเทอร์เฟซคุณสามารถ เพิ่มบันทึก ใช้ตัวเลือก “เพิ่มบันทึก” ในคอลเลกชันใด ๆ (เช่น รายการ) เพื่อสร้างรายการใหม่ ดูและแก้ไขบันทึก เลือกบันทึกเพื่อดูรายละเอียดหรือแก้ไขฟิลด์ของมัน ลบบันทึก ลบรายการที่ไม่จำเป็นอีกต่อไป เครื่องมือนี้ที่ใช้งานง่ายช่วยเพิ่มประสบการณ์ของผู้ใช้โดยการทำให้การจัดการข้อมูลมีประสิทธิภาพมากขึ้น ขั้นตอนที่ 4 – เชื่อมต่อ preact frontend ของคุณกับ back4app เมื่อมีแบ็คเอนด์แล้ว ถึงเวลาที่จะรวม preact frontend ของคุณ ตัวเลือก a การใช้ parse sdk ติดตั้ง parse sdk npm install parse ตั้งค่า parse ในโปรเจกต์ preact ของคุณ สร้างไฟล์ (เช่น, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; รวม parse ในคอมโพเนนต์ preact ตัวอย่างเช่น สร้างคอมโพเนนต์เพื่อดึงและแสดงรายการ // src/components/itemslist js import { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; import parse from ' /parseconfig'; const itemslist = () => { const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; ตัวเลือก b การใช้ rest หรือ graphql หาก sdk ของ parse ไม่สามารถใช้งานได้ ให้ใช้ rest หรือ graphql สำหรับการดำเนินการ crud ตัวอย่างเช่น เพื่อดึงรายการผ่าน rest // sample rest call to retrieve items const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); รวมการเรียก api เหล่านี้ภายในส่วนประกอบ preact ของคุณตามที่ต้องการ ขั้นตอนที่ 5 – การเสริมความปลอดภัยของแบ็คเอนด์ การใช้รายการควบคุมการเข้าถึง (acls) รักษาความปลอดภัยข้อมูลของคุณโดยการกำหนด acls ให้กับวัตถุของคุณ ตัวอย่างเช่น เพื่อสร้างรายการส่วนตัว async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl only the owner has read/write access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } การอนุญาตระดับคลาส (clps) ภายในแดชบอร์ด back4app ปรับ clps สำหรับแต่ละคอลเลกชันเพื่อจำกัดการเข้าถึงเฉพาะผู้ใช้ที่ได้รับการตรวจสอบหรือได้รับอนุญาตเท่านั้น ขั้นตอนที่ 6 – การนำไปใช้การตรวจสอบสิทธิ์ผู้ใช้ การกำหนดค่าบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ของ parse สำหรับการจัดการการตรวจสอบสิทธิ์ ในแอปพลิเคชัน preact ของคุณ ให้จัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้ดังนี้ // src/components/auth js import { h } from 'preact'; import { usestate } from 'preact/hooks'; import parse from ' /parseconfig'; export const signup = () => { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('user registration successful!'); } catch (error) { alert('registration error ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={e => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={e => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={e => setemail(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; วิธีการที่คล้ายกันสามารถใช้สำหรับการเข้าสู่ระบบและการจัดการเซสชัน ฟีเจอร์เพิ่มเติมเช่นการตรวจสอบสิทธิ์ทางสังคมและการกู้คืนรหัสผ่านสามารถตั้งค่าได้ผ่านแดชบอร์ด back4app ขั้นตอนที่ 7 – การเปิดตัว frontend preact ของคุณด้วยการปรับใช้เว็บ ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณโฮสต์แอปพลิเคชัน preact ของคุณโดยการเชื่อมโยงกับที่เก็บ github ในส่วนนี้ คุณจะเตรียมการสร้างผลิตภัณฑ์ของคุณ ทำการคอมมิตโค้ดของคุณ รวมเข้ากับการปรับใช้เว็บ และปรับใช้เว็บไซต์ของคุณ 7 1 สร้างไฟล์การผลิตของคุณ เปิดไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล รันคำสั่งสร้าง npm run build สิ่งนี้จะสร้าง build โฟลเดอร์ที่มีทรัพย์สินสถิตที่ปรับให้เหมาะสม (html, js, css, รูปภาพ) 3\ ยืนยันว่า build โฟลเดอร์รวมถึง index html ไฟล์และทรัพย์สินที่จำเป็น 7 2 จัดระเบียบและคอมมิตโค้ดต้นฉบับของคุณ ที่เก็บของคุณควรมีโค้ดต้นฉบับของ preact frontend ที่สมบูรณ์ โครงสร้างไดเรกทอรีตัวอย่าง basic crud app preact frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md ไฟล์ตัวอย่าง src/parseconfig js // src/parseconfig js import parse from 'parse'; // enter your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; import parse from ' /parseconfig'; function app() { const \[items, setitems] = usestate(\[]); const \[newitemtitle, setnewitemtitle] = usestate(""); const \[newitemdescription, setnewitemdescription] = usestate(""); const \[editingitemid, seteditingitemid] = usestate(null); const \[editingtitle, seteditingtitle] = usestate(""); const \[editingdescription, seteditingdescription] = usestate(""); const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; useeffect(() => { fetchitems(); }, \[]); const handleadditem = async () => { const items = parse object extend("items"); const item = new items(); item set("title", newitemtitle); item set("description", newitemdescription); try { await item save(); setnewitemtitle(""); setnewitemdescription(""); fetchitems(); } catch (error) { console error("error saving item ", error); } }; const handledeleteitem = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); fetchitems(); } catch (error) { console error("error deleting item ", error); } }; const starteditingitem = (item) => { seteditingitemid(item id); seteditingtitle(item get("title")); seteditingdescription(item get("description")); }; const handleupdateitem = async () => { try { const items = parse object extend("items"); const item = new items(); item id = editingitemid; item set("title", editingtitle); item set("description", editingdescription); await item save(); seteditingitemid(null); seteditingtitle(""); seteditingdescription(""); fetchitems(); } catch (error) { console error("error updating item ", error); } }; return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add item\</h2> \<input type="text" placeholder="title" value={newitemtitle} onchange={(e) => setnewitemtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={newitemdescription} onchange={(e) => setnewitemdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleadditem}>add item\</button> \</div> \<h2>item list\</h2> \<ul> {items map((item) => ( \<li key={item id} style={{ marginbottom '1rem' }}> {editingitemid === item id ? ( \<div> \<input type="text" value={editingtitle} onchange={(e) => seteditingtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" value={editingdescription} onchange={(e) => seteditingdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleupdateitem}>save\</button> \<button onclick={() => seteditingitemid(null)} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => starteditingitem(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => handledeleteitem(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } export default app; การส่งโค้ดของคุณไปยัง github เริ่มต้นรีโพซิทอรี git (ถ้ายังไม่ได้ทำ) git init จัดระเบียบไฟล์ต้นทางของคุณ git add บันทึกการเปลี่ยนแปลงของคุณ git commit m "initial commit of preact frontend source code" สร้างที่เก็บ github ใหม่ เช่น basic crud app preact frontend ผลักดันโค้ดของคุณ git remote add origin https //github com/your username/basic crud app preact frontend git git push u origin main 7 3 การเชื่อมต่อที่เก็บของคุณกับการปรับใช้เว็บ ไปที่ส่วนการปรับใช้เว็บในแดชบอร์ด back4app ของคุณ เปิดโปรเจกต์ของคุณ ( basic crud app preact ) และเลือก web deployment เชื่อมโยงบัญชี github ของคุณตามที่แนะนำ เพื่อให้ back4app สามารถเข้าถึงที่เก็บของคุณได้ เลือกที่เก็บ (เช่น, basic crud app preact frontend ) และเลือกสาขาที่เหมาะสม (เช่น, main ) 7 4 การกำหนดค่าการปรับใช้ ระบุการตั้งค่าเพิ่มเติม คำสั่งสร้าง หากไม่มีโฟลเดอร์ build ที่สร้างไว้ล่วงหน้า ให้ตั้งค่าคำสั่งสร้าง (เช่น, npm run build ) back4app จะรันคำสั่งนี้ระหว่างการปรับใช้ ไดเรกทอรีผลลัพธ์ กำหนดโฟลเดอร์ผลลัพธ์เป็น build เพื่อให้ back4app ระบุไฟล์สถิต ตัวแปรสภาพแวดล้อม เพิ่มคีย์ api หรือการตั้งค่าที่จำเป็นสำหรับแอปพลิเคชันของคุณ 7 5 การสร้างคอนเทนเนอร์แอปพลิเคชัน preact ของคุณด้วย docker หากคุณชอบ docker ให้รวม dockerfile ในที่เก็บของคุณคล้ายกับ # use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files copy package json / \# install dependencies run npm install \# copy the source code copy \# build the app run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] เลือกตัวเลือกการปรับใช้ docker ในการตั้งค่าการปรับใช้เว็บ back4app ของคุณ 7 6 การปรับใช้แอปพลิเคชันของคุณ คลิกที่ deploy ปุ่มเมื่อการตั้งค่าเสร็จสมบูรณ์ ติดตามกระบวนการสร้างเมื่อ back4app ดึงโค้ดของคุณ สร้าง และปรับใช้แอปพลิเคชันของคุณ เมื่อเสร็จสิ้น back4app จะให้ url ที่แอปพลิเคชันของคุณโฮสต์ 7 7 การตรวจสอบการปรับใช้ของคุณ เยี่ยมชม url ที่ให้มาเพื่อดูเว็บไซต์สดของคุณ ทดสอบฟังก์ชันทั้งหมดเพื่อให้แน่ใจว่าฟีเจอร์ทุกอย่าง รวมถึงเส้นทางและทรัพย์สิน โหลดอย่างถูกต้อง หากเกิดปัญหา ให้ตรวจสอบบันทึกคอนโซลของเบราว์เซอร์และบันทึกการปรับใช้ใน back4app ขั้นตอนที่ 8 – สรุปและทิศทางในอนาคต ทำได้ดีมาก! คุณได้พัฒนาแอปพลิเคชัน crud แบบเต็มรูปแบบโดยใช้ preact และ back4app สำเร็จแล้ว คุณได้ตั้งค่าโครงการชื่อ basic crud app preact , กำหนดคอลเลกชันฐานข้อมูลที่แข็งแกร่ง และใช้แอปผู้ดูแลระบบเพื่อการจัดการข้อมูลที่มีประสิทธิภาพ จากนั้นคุณได้เชื่อมต่อส่วนหน้า preact ของคุณกับส่วนหลังและดำเนินการควบคุมการเข้าถึงอย่างเข้มงวด ต่อไปจะทำอย่างไร? ปรับปรุงแอป preact ของคุณด้วยฟีเจอร์เพิ่มเติม เช่น มุมมองรายละเอียด ความสามารถในการค้นหา และการอัปเดตแบบเรียลไทม์ รวมตรรกะส่วนหลังที่ซับซ้อนมากขึ้น เช่น ฟังก์ชันคลาวด์หรือการรวม api ของบุคคลที่สาม ปรึกษา เอกสาร back4app https //www back4app com/docs และแหล่งข้อมูลอื่น ๆ เพื่อให้เข้าใจลึกซึ้งเกี่ยวกับการปรับแต่งและการกำหนดค่าที่กำหนดเอง โดยการติดตามบทแนะนำนี้ คุณได้เรียนรู้ทักษะในการสร้างแบ็กเอนด์ crud ที่สามารถปรับขนาดได้และปลอดภัยสำหรับแอปพลิเคชัน preact ของคุณโดยใช้ back4app สนุกกับการเขียนโค้ดและสำรวจฟีเจอร์ใหม่ ๆ!