How to Build a Basic CRUD App with Riot.js: A Step-by-Step Guide

ภาพรวม ในคู่มือนี้ คุณจะได้เรียนรู้การสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, และลบ) โดยใช้ riot js เราจะเดินผ่านการตั้งค่าโปรเจกต์ back4app—ชื่อ basic crud app riotjs —เพื่อใช้เป็นแบ็กเอนด์ของคุณ และจากนั้นรวมเข้ากับฟรอนต์เอนด์ของ riot js บทเรียนนี้ครอบคลุมทุกอย่างตั้งแต่การออกแบบสคีมาฐานข้อมูลของคุณและการจัดการข้อมูลด้วย back4app admin app ไปจนถึงการรวมฟรอนต์เอนด์ของคุณโดยใช้ sdk (ถ้าใช้ได้) หรือการเรียก api แบบ rest/graphql เมื่อสิ้นสุด คุณจะมีแอปพลิเคชันเว็บที่ทำงานได้อย่างเต็มที่และพร้อมใช้งานในระดับการผลิต โดยมีการตรวจสอบสิทธิ์ผู้ใช้และการจัดการข้อมูลอย่างปลอดภัย ประโยชน์หลัก เชี่ยวชาญการดำเนินการ crud โดยใช้ระบบแบ็กเอนด์ที่สามารถขยายได้ ได้รับข้อมูลเชิงลึกเกี่ยวกับการรวมฟรอนต์เอนด์ของ riot js กับ back4app ใช้ back4app admin app ที่ใช้งานง่ายสำหรับการจัดการข้อมูลอย่างง่ายดาย เรียนรู้กลยุทธ์การปรับใช้ รวมถึงการทำให้เป็นคอนเทนเนอร์ docker ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมี บัญชี back4app พร้อมโปรเจกต์ใหม่ ดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app เพื่อคำแนะนำ การตั้งค่าการพัฒนาสำหรับ riot js คุณสามารถใช้ riot cli หรือรวม riot ผ่านแท็กสคริปต์ ตรวจสอบให้แน่ใจว่าได้ติดตั้ง node js (v14 หรือใหม่กว่า) ความรู้พื้นฐานเกี่ยวกับ javascript, riot js และ rest apis หากจำเป็น ให้ปรึกษา เอกสาร riot js https //riot js org/ เพื่อข้อมูลเพิ่มเติม ขั้นตอนที่ 1 – การเริ่มต้นโปรเจกต์ การสร้างโปรเจกต์ back4app ลงชื่อเข้าใช้บัญชี back4app ของคุณ คลิก “แอปใหม่” บนแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app riotjs และทำตามคำแนะนำในการตั้งค่า สร้างโปรเจกต์ใหม่ โปรเจกต์ของคุณจะปรากฏบนแดชบอร์ด back4app ของคุณ ซึ่งทำหน้าที่เป็นกระดูกสันหลังสำหรับข้อมูลของแอปพลิเคชันของคุณ ขั้นตอนที่ 2 – การออกแบบสคีมาฐานข้อมูลของคุณ การสร้างโมเดลข้อมูลของคุณ สำหรับแอปพลิเคชัน crud ของเรา คุณจะต้องกำหนดหลายคอลเลกชัน ด้านล่างนี้เป็นตัวอย่างคอลเลกชันและฟิลด์เพื่อช่วยให้คุณจัดโครงสร้างฐานข้อมูลของคุณสำหรับการดำเนินการ crud ที่มีประสิทธิภาพ 1\ คอลเลกชันรายการ คอลเลกชันนี้เก็บรายละเอียดเกี่ยวกับแต่ละรายการ สนาม ประเภท คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อรายการ คำอธิบาย สตริง คำอธิบายรายการสั้น ๆ สร้างเมื่อ วันที่ เวลาที่รายการถูกเพิ่ม อัปเดตเมื่อ วันที่ เวลาที่รายการถูกแก้ไข 2\ การรวบรวมผู้ใช้ คอลเลกชันนี้ประกอบด้วยรายละเอียดผู้ใช้และข้อมูลการตรวจสอบสิทธิ์ สนาม ประเภท คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อผู้ใช้ที่ไม่ซ้ำกัน อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกัน รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัส สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาที่อัปเดตบัญชีล่าสุด คุณสามารถกำหนดค่าคอลเลกชันเหล่านี้ด้วยตนเองบนแดชบอร์ด back4app โดยการสร้างคลาสใหม่และกำหนดคอลัมน์ต่างๆ สร้างคลาสใหม่ คุณสามารถเพิ่มฟิลด์โดยการเลือกประเภทข้อมูล กำหนดชื่อ ตั้งค่าเริ่มต้น และทำเครื่องหมายว่าฟิลด์นั้นเป็นฟิลด์ที่จำเป็นหรือไม่ สร้างคอลัมน์ การใช้ประโยชน์จาก back4app ai agent สำหรับการสร้างสคีมา back4app ai agent ซึ่งเข้าถึงได้จากแดชบอร์ดของคุณ สามารถสร้างสคีมาโดยอัตโนมัติด้วยการประมวลผลคำสั่งที่ละเอียดซึ่งอธิบายถึงคอลเลกชันและฟิลด์ที่คุณต้องการ การใช้ ai agent เปิด ai agent ค้นหามันในการตั้งค่าโปรเจกต์หรือเมนูของคุณ ป้อนโมเดลข้อมูลของคุณ วางคำสั่งที่อธิบายถึงคอลเลกชันและฟิลด์ของพวกเขา ตรวจสอบและยืนยัน ตรวจสอบสคีมาที่สร้างขึ้นและนำไปใช้ในโปรเจกต์ของคุณ ตัวอย่างคำสั่ง 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 ของคุณ เลือก “แอปผู้ดูแลระบบ” และคลิก “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าบัญชีผู้ดูแลระบบของคุณ โดยการสร้างผู้ใช้ผู้ดูแลระบบเริ่มต้น ซึ่งจะกำหนดบทบาทเริ่มต้นด้วย เปิดใช้งานแอปผู้ดูแลระบบ เมื่อเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลระบบเพื่อจัดการข้อมูลด้านหลังของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การดำเนินการ crud ผ่านแอปผู้ดูแลระบบ ภายในอินเทอร์เฟซนี้ คุณสามารถ เพิ่มบันทึก ใช้ปุ่ม “เพิ่มบันทึก” ภายในคอลเลกชัน (เช่น รายการ) เพื่อสร้างรายการใหม่ แก้ไขบันทึก คลิกที่บันทึกใด ๆ เพื่อดูและแก้ไขรายละเอียด ลบบันทึก ลบบันทึกใด ๆ ที่ไม่จำเป็นอีกต่อไป เครื่องมือนี้ช่วยให้การทำงานของคุณมีประสิทธิภาพมากขึ้นโดยการเสนออินเทอร์เฟซที่เรียบง่ายสำหรับการจัดการข้อมูล ขั้นตอนที่ 4 – เชื่อมต่อ riot js กับ back4app ตอนนี้ที่แบ็กเอนด์ของคุณถูกตั้งค่าแล้ว ถึงเวลาที่จะเชื่อมต่อฟรอนต์เอนด์ riot js ของคุณกับ back4app ตัวเลือก a การใช้ parse sdk ติดตั้ง parse sdk npm install parse เริ่มต้น parse ในโปรเจกต์ riot js ของคุณ สร้างไฟล์ (เช่น, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; ใช้ parse ในแท็ก riot สร้างแท็ก riot (เช่น, items riot ) เพื่อดึงและแสดงรายการ items { item get("title") } — { item get("description") } ตัวเลือก b การใช้ rest หรือ graphql apis หาก parse sdk ไม่เหมาะสม ให้ดำเนินการ crud ผ่านการเรียก api ตัวอย่างเช่น การดึงรายการโดยใช้ rest // rest api example to get items async function fetchitems() { 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 เหล่านี้ภายในแท็ก riot js ของคุณตามที่ต้องการ ขั้นตอนที่ 5 – ปกป้อง backend ของคุณ การกำหนดค่า access control lists (acls) รักษาความปลอดภัยข้อมูลของคุณโดยการตั้งค่า acl บนวัตถุของคุณ ตัวอย่างเช่น การสร้างรายการส่วนตัว 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); // define 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); } } การปรับแต่ง class level permissions (clps) ภายในแดชบอร์ด back4app ของคุณ ให้กำหนด clps สำหรับแต่ละคอลเลกชันเพื่อให้แน่ใจว่าผู้ใช้ที่ได้รับการตรวจสอบหรือได้รับอนุญาตเท่านั้นที่เข้าถึงข้อมูลที่ละเอียดอ่อน ขั้นตอนที่ 6 – การตรวจสอบสิทธิ์ผู้ใช้ การกำหนดค่าบัญชีผู้ใช้ แอปพลิเคชัน riot js สามารถจัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้โดยใช้คลาส parse user ที่มีอยู่ใน back4app ด้านล่างนี้คือตัวอย่างแท็ก riot สำหรับการลงทะเบียนผู้ใช้ sign up กลยุทธ์ที่คล้ายกันสามารถนำไปใช้สำหรับการเข้าสู่ระบบและการจัดการเซสชัน ฟีเจอร์เพิ่มเติมเช่นการเข้าสู่ระบบด้วยโซเชียล การตรวจสอบอีเมล หรือการกู้คืนรหัสผ่านสามารถตั้งค่าได้ในแดชบอร์ด back4app ของคุณ ขั้นตอนที่ 7 – การปรับใช้ frontend ของคุณด้วย riot js ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณโฮสต์แอป riot js ของคุณโดยการเชื่อมโยงกับที่เก็บ github ของคุณ ทำตามขั้นตอนเหล่านี้เพื่อปรับใช้การสร้างผลิตภัณฑ์ของคุณ 7 1 สร้างไฟล์ผลิตภัณฑ์ของคุณ เปิดไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล รันคำสั่งสร้างของคุณ npm run build นี่จะสร้าง โฟลเดอร์ build ที่มีไฟล์สถิตที่ปรับให้เหมาะสม (html, js, css, รูปภาพ) ยืนยันการสร้าง ตรวจสอบว่า โฟลเดอร์ build รวมถึง index html และไดเรกทอรีทรัพย์สินที่จำเป็น 7 2 จัดระเบียบและส่งโค้ดของคุณไปยัง github ที่เก็บของคุณควรมีแหล่งที่มาของ riot js frontend ที่สมบูรณ์ โครงสร้างทั่วไปอาจเป็น basic crud app riotjs frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── app riot \| ├── parseconfig js \| └── tags/ \| ├── items riot \| └── auth riot \| package json \| readme md ตัวอย่าง src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your actual back4app keys here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; ตัวอย่าง src/app riot riot js crud app คอมมิตและผลักดันโค้ดของคุณ เริ่มต้นรีโป git (ถ้ายังไม่ได้ทำ) git init เพิ่มไฟล์ของคุณ git add คอมมิตการเปลี่ยนแปลงของคุณ git commit m "คอมมิตเริ่มต้นสำหรับส่วนหน้า riot js" สร้างรีโป github (เช่น, basic crud app riotjs frontend ) และผลักดันโค้ดของคุณ git remote add origin https //github com/your username/basic crud app riotjs frontend git git push u origin main 7 3 รวมรีโพ github ของคุณกับการปรับใช้เว็บ back4app เปิดการปรับใช้เว็บ ลงชื่อเข้าใช้แดชบอร์ด back4app ของคุณ เลือกโปรเจกต์ของคุณ ( basic crud app riotjs ) และคลิกที่ การปรับใช้เว็บ เชื่อมต่อกับ github ทำตามคำแนะนำเพื่อลิงก์บัญชี github และรีโพของคุณ เลือกรีโพและสาขาของคุณ เลือกรีโพของคุณ (เช่น, basic crud app riotjs frontend ) และสาขาที่เหมาะสม (เช่น main ) 7 4 การกำหนดค่าการปรับใช้ คำสั่งสร้าง หากที่เก็บของคุณไม่มี โฟลเดอร์สร้าง ที่สร้างไว้ล่วงหน้า ให้ระบุคำสั่งสร้าง (เช่น, npm run build ) back4app จะดำเนินการตามนั้น ไดเรกทอรีผลลัพธ์ ตั้งค่านี้เป็น build เพื่อระบุว่าไฟล์สถิตของคุณอยู่ที่ไหน ตัวแปรสภาพแวดล้อม รวมตัวแปรที่จำเป็น (เช่น คีย์ api) ในการกำหนดค่าของคุณ 7 5 การทำให้แอป riot js ของคุณเป็น docker (ไม่บังคับ) หากคุณต้องการการปรับใช้ในรูปแบบคอนเทนเนอร์ ให้เพิ่ม dockerfile ลงในโปรเจกต์ของคุณ \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire app and build it copy 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 ในการตั้งค่าการปรับใช้เว็บของคุณหากคุณเลือกเส้นทางนี้ 7 6 เปิดแอปพลิเคชันของคุณ ปรับใช้ คลิกที่ ปรับใช้ หลังจากตั้งค่าของคุณเสร็จสิ้น ตรวจสอบกระบวนการ back4app จะดึงโค้ดของคุณ รันคำสั่งสร้าง และปรับใช้แอปของคุณในคอนเทนเนอร์ รับ url ของคุณ เมื่อปรับใช้แล้ว back4app จะให้ url ที่แอปพลิเคชัน riot js ของคุณถูกโฮสต์ 7 7 ตรวจสอบการปรับใช้ของคุณ เยี่ยมชม url เปิด url ที่ให้มาในเบราว์เซอร์ของคุณ ทดสอบแอป ยืนยันว่าทุกเส้นทางและทรัพย์สิน (css, javascript, รูปภาพ) ทำงานได้อย่างถูกต้อง แก้ไขปัญหา ใช้เครื่องมือพัฒนาเบราว์เซอร์และบันทึก back4app หากมีปัญหาเกิดขึ้น ขั้นตอนที่ 8 – สรุปและทิศทางในอนาคต ขอแสดงความยินดี! คุณได้สร้างแอป crud ที่ทำงานได้อย่างสมบูรณ์ด้วย riot js และ back4app คุณได้ตั้งค่าโครงการที่เรียกว่า basic crud app riotjs , ออกแบบสคีมาฐานข้อมูลที่แข็งแกร่งสำหรับ items และ users และจัดการข้อมูลของคุณด้วย admin app คุณได้รวมฟรอนต์เอนด์ riot js ของคุณและดำเนินการมาตรการด้านความปลอดภัยเช่น acls ขั้นตอนถัดไป ปรับปรุงฟรอนต์เอนด์ เพิ่มฟีเจอร์เช่น มุมมองรายละเอียด, ความสามารถในการค้นหา, และการอัปเดตแบบเรียลไทม์ ขยายฟังก์ชันการทำงาน สำรวจการดำเนินการด้านหลังที่ซับซ้อนเช่น cloud functions หรือรวม api ของบุคคลที่สาม ลึกซึ้งในการเรียนรู้ของคุณ เยี่ยมชม เอกสาร back4app https //www back4app com/docs และแหล่งข้อมูลอื่น ๆ เพื่อเพิ่มประสิทธิภาพและขยายแอปพลิเคชันของคุณ ด้วยขั้นตอนเหล่านี้ คุณมีความเชี่ยวชาญในการสร้างแอป crud ที่สามารถขยายได้โดยใช้ riot js และ back4app ขอให้สนุกกับการเขียนโค้ด!