How to Develop a CRUD Application with Deno? A Comprehensive Guide

ภาพรวม คู่มือนี้แสดงวิธีการสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่ง่ายโดยใช้ deno เราจะใช้ back4app เป็นแพลตฟอร์มการจัดการแบ็กเอนด์ของเรา โดยกำหนดค่าให้ทำงานเป็นโซลูชันฐานข้อมูลที่เชื่อถือได้ และเราจะใช้วิธี api เพื่อโต้ตอบกับบริการแบ็กเอนด์ของเรา ในบทเรียนนี้ คุณจะ ตั้งค่าโครงการ back4app ที่เรียกว่า basic crud app deno ออกแบบและกำหนดค่าโครงสร้างฐานข้อมูลของคุณด้วยคอลเลกชันและฟิลด์ที่ปรับให้เหมาะสมสำหรับการดำเนินการ crud ใช้แอป back4app admin เพื่อจัดการคอลเลกชันของคุณผ่านอินเทอร์เฟซที่ใช้งานง่ายแบบลากและวาง เชื่อมต่อส่วนหน้า deno ของคุณกับ back4app โดยใช้การเรียก rest/graphql รักษาความปลอดภัยให้กับแบ็กเอนด์ของคุณด้วยมาตรการควบคุมการเข้าถึงที่แข็งแกร่ง เมื่อสิ้นสุดคู่มือนี้ คุณจะได้สร้างแอปพลิเคชันเว็บที่พร้อมใช้งานในระดับการผลิตซึ่งรองรับการดำเนินการข้อมูลที่สำคัญและการตรวจสอบสิทธิ์ผู้ใช้ ข้อมูลเชิงลึกที่สำคัญ เชี่ยวชาญฟังก์ชัน crud เพื่อจัดการข้อมูลอย่างมีประสิทธิภาพ เรียนรู้วิธีการออกแบบแบ็กเอนด์ที่สามารถขยายได้ซึ่งรวมเข้ากับส่วนหน้าที่ใช้ deno ใช้แอป back4app admin สำหรับการจัดการข้อมูลที่ราบรื่น ค้นพบกลยุทธ์การปรับใช้ รวมถึงการบรรจุใน docker ข้อกำหนดเบื้องต้น ก่อนเริ่มต้น โปรดตรวจสอบให้แน่ใจว่าคุณมี บัญชี back4app และโครงการที่เริ่มต้นแล้ว ดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app หากจำเป็น การตั้งค่าการพัฒนา deno ตรวจสอบให้แน่ใจว่า deno ได้รับการติดตั้งและอัปเดต (แนะนำเวอร์ชัน 1 10+) ความคุ้นเคยกับ javascript/typescript, deno, และแนวคิด rest api ปรึกษา คู่มือ deno https //deno land/manual สำหรับการอ่านเพิ่มเติม ขั้นตอนที่ 1 – การเริ่มต้นโครงการของคุณ การเปิดโครงการ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “แอปใหม่” บนแดชบอร์ดของคุณ ตั้งชื่อโครงการของคุณ basic crud app deno และทำตามคำแนะนำบนหน้าจอ สร้างโปรเจกต์ใหม่ หลังจากที่โปรเจกต์ถูกสร้างขึ้น มันจะปรากฏบนแดชบอร์ดของคุณ ซึ่งเป็นการวางรากฐานสำหรับการกำหนดค่าด้านหลังของคุณ ขั้นตอนที่ 2 – การสร้างโครงสร้างฐานข้อมูล การจัดโครงสร้างโมเดลข้อมูลของคุณ สำหรับแอปพลิเคชัน crud นี้ คุณจะต้องกำหนดหลายคอลเลกชัน ด้านล่างนี้คือคอลเลกชันตัวอย่างพร้อมฟิลด์ที่แนะนำเพื่ออำนวยความสะดวกในการดำเนินการพื้นฐาน 1\ คอลเลกชัน รายการ คอลเลกชันนี้มีรายละเอียดสำหรับแต่ละรายการ สนาม ประเภท วัตถุประสงค์ id รหัสวัตถุ คีย์หลักที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อของรายการ คำอธิบาย สตริง สรุปสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่รายการถูกเพิ่มเข้ามา อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตล่าสุด 2\ การเก็บรวบรวม ผู้ใช้ การเก็บรวบรวมนี้จัดเก็บโปรไฟล์ผู้ใช้และข้อมูลการตรวจสอบสิทธิ์ สนาม ประเภท วัตถุประสงค์ id รหัสวัตถุ คีย์หลักที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่าน hash สตริง รหัสผ่านที่ถูกแฮชอย่างปลอดภัย สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาที่อัปเดตล่าสุด คุณสามารถสร้างคอลเลกชันเหล่านี้ด้วยตนเองในแดชบอร์ด back4app โดยการสร้างคลาสใหม่สำหรับแต่ละคลาสและเพิ่มคอลัมน์เพื่อกำหนดแต่ละฟิลด์ สร้างชั้นเรียนใหม่ คุณยังสามารถเพิ่มฟิลด์ได้โดยการเลือกประเภท ตั้งชื่อ ตั้งค่าค่าพื้นฐาน และทำเครื่องหมายว่าจำเป็นต้องใช้ สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema back4app ai agent ช่วยให้การสร้าง schema ง่ายขึ้นโดยการให้คุณป้อนข้อความที่มีรายละเอียด ซึ่งจะสร้างคอลเลกชันและฟิลด์ที่จำเป็นโดยอัตโนมัติ ขั้นตอนการใช้ ai agent เข้าถึง ai agent เปิดแดชบอร์ด back4app ของคุณและค้นหาตัวเลือก ai agent ป้อนคำอธิบายโมเดลข้อมูลของคุณ ให้ข้อความที่มีรายละเอียดซึ่งระบุคอลเลกชันและฟิลด์ของคุณ ตรวจสอบและนำไปใช้ ตรวจสอบข้อเสนอ schema ที่สร้างขึ้นและนำไปใช้ในโปรเจกต์ของคุณ ตัวอย่างข้อความ create the following collections in my back4app application 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) วิธีนี้ช่วยให้มั่นใจได้ถึงความสอดคล้องและประสิทธิภาพในการตั้งค่า schema ของแบ็กเอนด์ของคุณ ขั้นตอนที่ 3 – เปิดใช้งานอินเทอร์เฟซผู้ดูแลระบบและฟังก์ชัน crud ภาพรวมของอินเทอร์เฟซผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app มีอินเทอร์เฟซที่ไม่ต้องเขียนโค้ดเพื่อจัดการข้อมูลแบ็กเอนด์ของคุณ การออกแบบที่ใช้งานง่ายด้วยการลากและวางช่วยให้การจัดการการดำเนินการ crud เป็นเรื่องง่าย เปิดใช้งานแอปผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” บนแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแล” และคลิกที่ “เปิดใช้งานแอปผู้ดูแล ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลของคุณ โดยการสร้างผู้ใช้ผู้ดูแลเริ่มต้น ซึ่งยังตั้งค่าบทบาท (เช่น, b4aadminuser ) และคอลเลกชันระบบ เปิดใช้งานแอปผู้ดูแล เมื่อเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลเพื่อจัดการคอลเลกชันของคุณได้อย่างง่ายดาย แดชบอร์ดแอปผู้ดูแล การจัดการการดำเนินการ crud ผ่านแอปผู้ดูแล ในแอปผู้ดูแล คุณสามารถ เพิ่มบันทึก คลิก “เพิ่มบันทึก” ในคอลเลกชันใด ๆ (เช่น, รายการ) เพื่อสร้างรายการใหม่ ดู/แก้ไขบันทึก เลือกบันทึกเพื่อตรวจสอบหรือแก้ไขรายละเอียด ลบบันทึก ลบรายการที่ไม่จำเป็นอีกต่อไป เครื่องมือง่าย ๆ นี้ช่วยให้กระบวนการดำเนินการข้อมูลพื้นฐานเป็นไปอย่างราบรื่น ขั้นตอนที่ 4 – เชื่อมต่อ deno กับ back4app เมื่อคุณตั้งค่าด้านหลังเสร็จแล้ว ถึงเวลาที่จะเชื่อมต่อ deno frontend ของคุณโดยใช้ rest หรือ graphql apis ตัวเลือก การใช้ rest/graphql api calls เราจะพึ่งพาการเรียก api เพื่อโต้ตอบกับ back4app ตัวอย่าง การดึงข้อมูลผ่าน rest ใน deno สร้างโมดูล (เช่น, fetchitems ts ) ด้วยโค้ดต่อไปนี้ const application id = "your application id"; const rest api key = "your rest api key"; const server url = "https //parseapi back4app com/classes/items"; export async function fetchitems() { try { const response = await fetch(server url, { headers { "x parse application id" application id, "x parse rest api key" rest api key, }, }); const data = await response json(); console log("retrieved items ", data results); } catch (error) { console error("error retrieving items ", error); } } fetchitems(); รวมการเรียก api ดังกล่าวเข้ากับแอปพลิเคชัน deno ของคุณตามที่ต้องการ ขั้นตอนที่ 5 – เสริมความปลอดภัยให้กับ backend ของคุณ การใช้ access control lists (acls) ปกป้องข้อมูลของคุณโดยการกำหนด acls ให้กับแต่ละวัตถุ ตัวอย่างเช่น เพื่อให้แน่ใจว่าสินค้าเป็นส่วนตัว async function createprivateitem(itemdata { title string; description string }, ownertoken string) { const server url = "https //parseapi back4app com/classes/items"; const response = await fetch(server url, { method "post", headers { "content type" "application/json", "x parse application id" "your application id", "x parse rest api key" "your rest api key", "x parse session token" ownertoken, }, body json stringify({ title itemdata title, description itemdata description, acl { " " { read false, write false }, \[ownertoken] { read true, write true } } }), }); const result = await response json(); console log("private item created ", result); } การกำหนดสิทธิ์ระดับคลาส (clps) ภายในแดชบอร์ด back4app ปรับ clps สำหรับแต่ละคอลเลกชันเพื่อกำหนดนโยบายการเข้าถึงเริ่มต้น โดยให้แน่ใจว่าผู้ใช้ที่ได้รับการตรวจสอบหรือได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงหรือแก้ไขข้อมูลที่ละเอียดอ่อนได้ ขั้นตอนที่ 6 – การจัดการการตรวจสอบสิทธิ์ผู้ใช้ การสร้างบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ parse สำหรับการตรวจสอบสิทธิ์ ในแอปพลิเคชัน deno ของคุณ จัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้ผ่านการเรียก rest api ตัวอย่าง การลงทะเบียนผู้ใช้ใน deno async function registeruser(username string, password string, email string) { const server url = "https //parseapi back4app com/users"; try { const response = await fetch(server url, { method "post", headers { "content type" "application/json", "x parse application id" "your application id", "x parse rest api key" "your rest api key" }, body json stringify({ username, password, email }) }); const data = await response json(); console log("user registered ", data); } catch (error) { console error("registration error ", error); } } registeruser("newuser", "securepassword", "user\@example com"); วิธีการนี้สามารถนำไปใช้กับการเข้าสู่ระบบและการจัดการเซสชันได้เช่นกัน ขั้นตอนที่ 7 – การปรับใช้ frontend deno ของคุณด้วยการปรับใช้เว็บ ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณโฮสต์ frontend ที่ใช้ deno โดยการปรับใช้โค้ดโดยตรงจากที่เก็บ github 7 1 – การสร้างเวอร์ชันการผลิตของคุณ เปิดไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล รันคำสั่งสร้าง ตัวอย่างเช่น หากใช้ bundler เช่น esbuild deno run allow read allow write build script ts ยืนยันผลลัพธ์การสร้าง ตรวจสอบให้แน่ใจว่าไดเรกทอรีผลลัพธ์ (เช่น, dist ) มีไฟล์สถิตที่จำเป็น เช่น index html , javascript ที่รวมกัน, css, และภาพ 7 2 – การจัดระเบียบและการมอบหมายโค้ดของคุณ ที่เก็บของคุณควรประกอบด้วยไฟล์ต้นฉบับทั้งหมดสำหรับ deno frontend ของคุณ โครงสร้างตัวอย่างอาจเป็น basic crud app deno/ ├── deps ts ├── controllers/ ├── public/ │ └── index html ├── routes/ ├── src/ │ ├── app ts │ └── fetchitems ts ├── dockerfile ├── build script ts └── readme md ไฟล์ตัวอย่าง deps ts export { serve } from "https //deno land/std\@0 140 0/http/server ts"; ไฟล์ตัวอย่าง src/app ts import { serve } from " /deps ts"; import { fetchitems } from " /fetchitems ts"; serve(async (req) => { const { pathname } = new url(req url); if (pathname === "/api/items") { const items = await fetchitems(); return new response(json stringify(items), { headers { "content type" "application/json" }, }); } return new response(await deno readtextfile(" /public/index html"), { headers { "content type" "text/html" }, }); }); การส่งโค้ดของคุณไปยัง github เริ่มต้น git git init จัดเตรียมไฟล์ทั้งหมด git add บันทึกการเปลี่ยนแปลงของคุณ git commit m "initial commit for deno crud frontend" ส่งไปยัง github สร้างที่เก็บ (เช่น, basic crud app deno ) และส่ง git remote add origin https //github com/your username/basic crud app deno git git push u origin main 7 3 – การเชื่อมต่อ github กับการปรับใช้เว็บ back4app เข้าสู่ระบบ back4app และไปที่โปรเจกต์ของคุณ คลิกที่ฟีเจอร์การปรับใช้เว็บ เชื่อมต่อบัญชี github ของคุณ ตามคำแนะนำ เลือกที่เก็บและสาขาของคุณ (เช่น, main ) ที่เก็บโค้ด deno ของคุณ 7 4 – การตั้งค่าการปรับใช้ ระบุ คำสั่งสร้าง หากไม่มี dist โฟลเดอร์ที่สร้างไว้ล่วงหน้า ให้ตั้งค่าคำสั่ง (เช่น deno run allow read allow write build script ts ) ไดเรกทอรีเอาต์พุต กำหนดโฟลเดอร์เอาต์พุต เช่น dist ตัวแปรสภาพแวดล้อม เพิ่มตัวแปรสภาพแวดล้อมที่จำเป็น (เช่น คีย์ api) 7 5 – การทำให้แอปพลิเคชัน deno ของคุณเป็น docker ในการปรับใช้ด้วย docker ให้รวม dockerfile ในโปรเจกต์ของคุณ \# use the official deno image from denoland/deno\ alpine 1 25 0 \# set the working directory workdir /app \# cache dependencies copy deps ts run deno cache deps ts \# copy the application code copy \# expose port 8000 expose 8000 \# run the application cmd \["run", " allow net", " allow read", "src/app ts"] เลือกตัวเลือกการปรับใช้ docker ใน back4app หากคุณต้องการการทำให้เป็นคอนเทนเนอร์ 7 6 – การเปิดตัวแอปพลิเคชันของคุณ เริ่มการปรับใช้ คลิกที่ deploy ปุ่มในแดชบอร์ด back4app ของคุณ ติดตามกระบวนการ back4app จะดึงโค้ดของคุณ ดำเนินการขั้นตอนการสร้าง และปรับใช้แอปของคุณ เข้าถึงเว็บไซต์ของคุณ หลังจากการปรับใช้ จะมี url ที่ให้ไว้ซึ่งแอป deno ของคุณออนไลน์ 7 7 – ยืนยันความสำเร็จในการปรับใช้ เยี่ยมชม url ที่ให้ไว้ เปิด url ในเบราว์เซอร์ของคุณ ทดสอบแอปพลิเคชันของคุณ ตรวจสอบให้แน่ใจว่าทุกเส้นทาง ทรัพย์สินสถิต และจุดสิ้นสุด api ทำงานได้อย่างถูกต้อง แก้ไขปัญหา หากมีปัญหาเกิดขึ้น ให้ตรวจสอบบันทึกการปรับใช้และตรวจสอบการกำหนดค่าของคุณ ขั้นตอนที่ 8 – สรุปและทิศทางในอนาคต ขอแสดงความยินดี! คุณได้สร้างแอปพลิเคชัน crud เบื้องต้นโดยใช้ deno พร้อมกับ back4app เป็นแบ็กเอนด์ของคุณสำเร็จแล้ว คุณได้ตั้งค่าโปรเจกต์ basic crud app deno , จัดโครงสร้างฐานข้อมูลของคุณ จัดการข้อมูลผ่านแอปผู้ดูแลระบบ เชื่อมต่อส่วนหน้า deno ของคุณผ่านการเรียก api และรักษาความปลอดภัยข้อมูลของคุณด้วย acls และ clps การปรับปรุงในอนาคต ขยายส่วนหน้า เพิ่มฟีเจอร์เช่น มุมมองรายละเอียด ตัวกรองการค้นหา หรือการอัปเดตแบบเรียลไทม์ ตรรกะแบ็กเอนด์ขั้นสูง รวมฟังก์ชันคลาวด์หรือการรวม api เพิ่มเติม เพิ่มความปลอดภัย สำรวจการเข้าถึงตามบทบาทและมาตรการการตรวจสอบสิทธิ์เพิ่มเติม สำหรับรายละเอียดเพิ่มเติม โปรดตรวจสอบ เอกสาร back4app https //www back4app com/docs และสำรวจแหล่งข้อมูลเพิ่มเติม ขอให้สนุกกับการเขียนโค้ดและเพลิดเพลินกับการสร้างแอปพลิเคชัน deno crud ที่สามารถขยายได้!