How to Build a Basic CRUD App with Marko? A Step-by-Step Guide

ภาพรวม คู่มือนี้จะพาคุณไปสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) แบบครบวงจร โดยใช้ marko และ back4app ในบทเรียนนี้ คุณจะตั้งค่าโครงการ—ชื่อว่า basic crud app marko —บน back4app ออกแบบสคีมาฐานข้อมูลที่แข็งแกร่ง และรวมส่วนหน้า marko ของคุณเข้ากับ api ของ back4app บทเรียนยังอธิบายวิธีการรักษาความปลอดภัยให้กับแบ็กเอนด์ของคุณและปรับใช้แอปพลิเคชันของคุณสำหรับการใช้งานในผลิตภัณฑ์ สิ่งที่คุณจะได้เรียนรู้ วิธีการสร้างแอปพลิเคชัน crud ที่จัดการข้อมูลได้อย่างมีประสิทธิภาพโดยใช้แบ็กเอนด์ที่เชื่อถือได้ เคล็ดลับในการออกแบบสคีมาที่สามารถขยายได้และเชื่อมโยงกับส่วนหน้าที่ใช้ marko การใช้ส่วนติดต่อผู้ดูแลระบบที่ใช้งานง่ายของ back4app เพื่อจัดการข้อมูลได้อย่างง่ายดาย กลยุทธ์การปรับใช้ รวมถึงการบรรจุใน docker สำหรับการเปิดตัวแอปพลิเคชันเว็บของคุณ ข้อกำหนดเบื้องต้น ก่อนเริ่มต้น ให้แน่ใจว่าคุณมี บัญชี back4app และโครงการใหม่ ทำตามคำแนะนำใน เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app หากจำเป็น การตั้งค่าสภาพแวดล้อมการพัฒนา marko ใช้ marko cli หรือวิธีการตั้งค่าที่คุณชื่นชอบ ตรวจสอบให้แน่ใจว่าได้ติดตั้ง node js (v14 หรือใหม่กว่า) ความรู้พื้นฐานเกี่ยวกับ javascript, marko และ rest apis เยี่ยมชม เอกสาร marko https //markojs com/docs/ เพื่อดูรายละเอียดเพิ่มเติม ขั้นตอนที่ 1 – การตั้งค่าโครงการของคุณ เริ่มโครงการ back4app ใหม่ ลงชื่อเข้าใช้บัญชี back4app ของคุณ เลือก “แอปใหม่” บนแดชบอร์ดของคุณ ป้อนชื่อโครงการ basic crud app marko และทำตามคำแนะนำบนหน้าจอ สร้างโครงการใหม่ โครงการใหม่ของคุณจะปรากฏบนแดชบอร์ด back4app ของคุณ ซึ่งเป็นการวางรากฐานสำหรับแบ็กเอนด์ของคุณ ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูลของคุณ การสร้างโมเดลข้อมูลของคุณ สำหรับแอป crud นี้ คุณจะสร้างคอลเลกชันสองสามรายการ ด้านล่างนี้เป็นตัวอย่างของคอลเลกชันพร้อมฟิลด์ที่แนะนำเพื่อช่วยคุณออกแบบสคีมาฐานข้อมูลที่ใช้งานได้จริง 1\ คอลเลกชัน ผลิตภัณฑ์ คอลเลกชันนี้จะเก็บรายละเอียดเกี่ยวกับผลิตภัณฑ์แต่ละรายการ สนาม ประเภท รายละเอียด id รหัสวัตถุ รหัสประจำตัวหลักที่สร้างโดยอัตโนมัติ ชื่อ สตริง ชื่อผลิตภัณฑ์ รายละเอียด สตริง คำอธิบายสั้น ๆ ของผลิตภัณฑ์ สร้างเมื่อ วันที่ เวลาที่ทำเครื่องหมายการสร้างผลิตภัณฑ์ อัปเดตเมื่อ วันที่ เวลาของการอัปเดตครั้งล่าสุด 2\ การเก็บรวบรวม ผู้ใช้ คอลเลกชันนี้เก็บข้อมูลผู้ใช้และข้อมูลการตรวจสอบสิทธิ์ สนาม ประเภท รายละเอียด id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อที่ไม่ซ้ำใครสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกัน รหัสผ่าน สตริง เวอร์ชันที่ถูกแฮชของรหัสผ่านของผู้ใช้ สร้างเมื่อ วันที่ เวลาสร้างบันทึก อัปเดตเมื่อ วันที่ เวลาที่แก้ไขล่าสุด คุณสามารถกำหนดคอลเลกชันเหล่านี้ด้วยตนเองในแดชบอร์ด back4app โดยการสร้างคลาสใหม่สำหรับแต่ละคอลเลกชันและจากนั้นเพิ่มคอลัมน์ที่เหมาะสม สร้างคลาสใหม่ คุณสามารถเพิ่มฟิลด์ได้อย่างรวดเร็วโดยการเลือกประเภท ตั้งชื่อคอลัมน์ของคุณ ตั้งค่าค่าพื้นฐาน และทำเครื่องหมายว่าจำเป็นหากจำเป็น สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema back4app ai agent ช่วยให้การออกแบบ schema ง่ายขึ้นโดยการสร้างการกำหนดคอลเลกชันและฟิลด์ตามคำสั่งของคุณ ฟีเจอร์นี้ช่วยประหยัดเวลาและรับประกันความสอดคล้องในตั้งค่าฐานข้อมูลของคุณ วิธีการใช้ ai agent เข้าถึง ai agent ไปที่แดชบอร์ด back4app ของคุณและค้นหา ai agent ในการตั้งค่าโปรเจกต์ของคุณ อธิบาย schema ของคุณ ให้คำสั่งที่ละเอียดเกี่ยวกับคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและดำเนินการ หลังจากการสร้าง ให้ตรวจสอบ schema ที่แนะนำและนำไปใช้การเปลี่ยนแปลง ตัวอย่างคำสั่ง create the following collections for my back4app project 1\) collection products \ fields \ id objectid (auto generated) \ name string \ details 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 string \ created at date (auto generated) \ updated at date (auto updated) วิธีการนี้ช่วยให้กระบวนการสร้าง schema ของคุณมีประสิทธิภาพมากขึ้น ขั้นตอนที่ 3 – เปิดใช้งาน admin interface & ฟังก์ชัน crud แนะนำ admin interface แอป back4app admin เป็นอินเทอร์เฟซที่ไม่ต้องเขียนโค้ดที่ทำให้การจัดการข้อมูลเป็นเรื่องง่าย ฟีเจอร์การลากและวางช่วยให้คุณสามารถเพิ่ม แก้ไข ดู หรือ ลบระเบียนได้อย่างง่ายดาย เปิดใช้งาน admin interface ไปที่ส่วน “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแล” และจากนั้นคลิกที่ “เปิดใช้งานแอปผู้ดูแล ” ตั้งค่าข้อมูลประจำตัวผู้ดูแล สร้างบัญชีผู้ดูแลคนแรกของคุณซึ่งจะกำหนดบทบาทระบบเช่น b4aadminuser เปิดใช้งานแอปผู้ดูแล เมื่อเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลเพื่อจัดการแบ็กเอนด์ของคุณ แดชบอร์ดแอปผู้ดูแล การจัดการการดำเนินการ crud ผ่านอินเทอร์เฟซผู้ดูแล ภายในแอปผู้ดูแลคุณสามารถ เพิ่มรายการใหม่ ใช้ตัวเลือก “เพิ่มบันทึก” ในคอลเลกชัน (เช่น ผลิตภัณฑ์) ดู/แก้ไขบันทึก คลิกที่รายการใดรายการหนึ่งเพื่อตรวจสอบหรืออัปเดตรายละเอียด ลบรายการ ใช้ฟังก์ชันลบเพื่อลบบันทึกที่ล้าสมัย อินเทอร์เฟซที่เรียบง่ายนี้ช่วยเพิ่มประสบการณ์ผู้ใช้โดยการทำให้การจัดการข้อมูลง่ายขึ้น ขั้นตอนที่ 4 – เชื่อมต่อ marko กับ back4app ตอนนี้ที่แบ็กเอนด์ของคุณถูกกำหนดค่าแล้ว ถึงเวลาที่จะรวมส่วนหน้า marko ของคุณกับ back4app โดยใช้ api ตัวเลือก a การใช้ api คุณจะใช้การเรียก rest api เพื่อดำเนินการ crud ในแอปพลิเคชัน marko ของคุณ ตัวอย่าง การดึงข้อมูลผ่าน rest // in a marko component script file (e g , fetchproducts marko) import { onmount } from 'marko/src/runtime/client'; onmount(async () => { try { const response = await fetch('https //parseapi back4app com/classes/products', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('products ', data results); } catch (error) { console error('failed to fetch products ', error); } }); โค้ดนี้แสดงวิธีการดึงข้อมูลผลิตภัณฑ์จาก back4app โดยใช้การเรียก rest api ขั้นตอนที่ 5 – การปกป้องแบ็กเอนด์ของคุณ การกำหนดค่าการควบคุมการเข้าถึง เพิ่มความปลอดภัยโดยการใช้ access control lists (acls) กับบันทึกของคุณ ตัวอย่างเช่น เพื่อสร้างรายการผลิตภัณฑ์ส่วนตัว async function createsecureproduct(productdata, owner) { const product = { name productdata name, details productdata details }; // setup acl only the owner has read/write privileges product acl = { " " { read false, write false }, \[owner id] { read true, write true } }; try { const response = await fetch('https //parseapi back4app com/classes/products', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify(product) }); const result = await response json(); console log('secure product created ', result); } catch (error) { console error('error creating product ', error); } } การตั้งค่าการอนุญาตเริ่มต้น ใช้แดชบอร์ด back4app เพื่อกำหนดค่าการอนุญาตระดับคลาส (clps) สำหรับแต่ละคอลเลกชัน เพื่อให้แน่ใจว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อน ขั้นตอนที่ 6 – การตั้งค่าการตรวจสอบสิทธิ์ผู้ใช้ การสร้างบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้สำหรับการตรวจสอบสิทธิ์ ในแอป marko ของคุณ ให้ดำเนินการลงทะเบียนผู้ใช้และการเข้าสู่ระบบดังนี้ // in a marko component script (e g , auth marko) import { onmount } from 'marko/src/runtime/client'; async function registeruser(username, email, password) { const userdata = { username, email, password }; try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify(userdata) }); const result = await response json(); console log('user registered ', result); } catch (error) { console error('registration error ', error); } } โค้ดนี้แสดงให้เห็นถึงการลงทะเบียนผู้ใช้ที่ง่ายโดยใช้ rest calls ขั้นตอนที่ 7 – การปรับใช้ frontend ของคุณ marko ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณสามารถโฮสต์โปรเจกต์ marko ของคุณโดยตรงจาก github repository 7 1 – การสร้างเวอร์ชันการผลิตของคุณ เปิดไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล รันคำสั่ง build npm run build สิ่งนี้จะสร้าง build ไดเรกทอรีที่มีไฟล์สถิตที่ปรับให้เหมาะสมของคุณ ยืนยันการสร้าง ตรวจสอบว่า build โฟลเดอร์รวมถึง index html และไดเรกทอรีทรัพย์สินทั้งหมด 7 2 – การจัดระเบียบและอัปโหลดโค้ดของคุณ ที่เก็บของคุณควรเก็บแหล่งที่มาทั้งหมดของโปรเจกต์ marko ของคุณ โครงสร้างไดเรกทอรีทั่วไปอาจมีลักษณะดังนี้ basic crud app marko frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── components/ │ │ ├── fetchproducts marko │ │ └── auth marko │ ├── app marko │ └── api js ├── package json └── readme md ตัวอย่าง src/api js // src/api js export const api headers = { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }; export async function fetchproducts() { const response = await fetch('https //parseapi back4app com/classes/products', { headers api headers }); const data = await response json(); return data results; } การส่งข้อมูลไปยัง github เริ่มต้น git (ถ้าจำเป็น) git init จัดเตรียมไฟล์ของคุณ git add บันทึกการเปลี่ยนแปลงของคุณ git commit m "initial commit for marko crud frontend" สร้างและส่งไปยังที่เก็บ github ของคุณ ตัวอย่างเช่น ใช้ที่เก็บชื่อ basic crud app marko frontend 7 3 – การเชื่อมโยง github กับการปรับใช้เว็บ เข้าถึงการปรับใช้เว็บ ลงชื่อเข้าใช้ back4app ไปที่โปรเจกต์ของคุณ (basic crud app marko) และเปิด ส่วนการปรับใช้เว็บ เชื่อมต่อบัญชี github ของคุณ ทำตามคำแนะนำเพื่อเชื่อมโยงบัญชี github ของคุณ เลือกที่เก็บและสาขา เลือกที่เก็บ (เช่น basic crud app marko frontend ) และสาขา (เช่น main ) เพื่อปรับใช้ 7 4 – การกำหนดค่าการปรับใช้ ตั้งค่าพารามิเตอร์เพิ่มเติม คำสั่งสร้าง หากไม่มี build โฟลเดอร์ที่สร้างไว้ล่วงหน้า ให้ตั้งค่าคำสั่งสร้าง (เช่น npm run build ) ไดเรกทอรีเอาต์พุต ระบุ build เป็นโฟลเดอร์เอาต์พุต ตัวแปรสภาพแวดล้อม ป้อนตัวแปรที่จำเป็น (เช่น api keys) 7 5 – การสร้าง container ด้วย docker หากคุณชอบ docker ให้รวม dockerfile ในที่เก็บโปรเจกต์ของคุณ \# use a node image for building the app from node 16 alpine as build \# set working directory workdir /app \# install dependencies copy package json / run npm install \# copy all files and build the app copy run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] ในการตั้งค่าการปรับใช้ของคุณ ให้เลือกตัวเลือกการปรับใช้ docker 7 6 – การปรับใช้แอปพลิเคชันของคุณ กดปุ่ม deploy back4app จะดึงที่เก็บข้อมูลของคุณ รันการสร้าง และปรับใช้แอปของคุณ ติดตามกระบวนการ ดูบันทึกการปรับใช้สำหรับปัญหาการสร้างหรือการทำงาน เข้าถึงเว็บไซต์ของคุณ เมื่อปรับใช้แล้ว back4app จะให้ url สำหรับแอป marko ที่โฮสต์ของคุณ 7 7 – การยืนยันการปรับใช้ของคุณ เปิด url ที่ให้มา ตรวจสอบว่าแอปพลิเคชันของคุณโหลดได้อย่างถูกต้อง ทดสอบแอป ตรวจสอบว่าทุกหน้าถูกโหลดและฟังก์ชัน crud ทำงานตามที่คาดหวัง แก้ไขปัญหาหากจำเป็น ใช้เครื่องมือพัฒนาเบราว์เซอร์และบันทึก back4app เพื่อแก้ไขปัญหาใด ๆ ขั้นตอนที่ 8 – ความคิดสุดท้ายและการปรับปรุงในอนาคต ทำได้ดีมาก! ตอนนี้คุณได้สร้างแอปพลิเคชัน crud ที่มีฟีเจอร์ครบถ้วนด้วย marko และ back4app แล้ว คุณได้ตั้งค่าโครงการที่เรียกว่า basic crud app marko , สร้างคอลเลกชันที่ละเอียดสำหรับผลิตภัณฑ์และผู้ใช้ จัดการข้อมูลผ่านอินเทอร์เฟซผู้ดูแลระบบที่ใช้งานง่าย รวมถึงการรวมส่วนหน้าของ marko ของคุณโดยใช้ rest apis และรักษาความปลอดภัยให้กับแบ็กเอนด์ของคุณด้วยการควบคุมที่แข็งแกร่ง ขั้นตอนถัดไป ปรับปรุง ui ของคุณ พิจารณาเพิ่มฟีเจอร์ขั้นสูง เช่น หน้าแสดงรายละเอียดผลิตภัณฑ์ ฟังก์ชันการค้นหา และการแจ้งเตือนแบบสด ขยายความสามารถของแบ็กเอนด์ พิจารณาการรวมฟังก์ชันแบบไม่มีเซิร์ฟเวอร์หรือ api ของบุคคลที่สามเพื่อเพิ่มฟังก์ชันการทำงาน เพิ่มพูนความรู้ของคุณ อ้างอิงจาก เอกสาร back4app https //www back4app com/docs และบทเรียนเพิ่มเติมเพื่อให้เข้าใจเกี่ยวกับการปรับแต่งประสิทธิภาพและการรวมที่กำหนดเองมากขึ้น ขอให้สนุกกับการเขียนโค้ดด้วย marko และ back4app!