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 พร้อมโปรเจกต์ใหม่ ดูที่ https //www back4app com/docs/get started/new parse app เพื่อคำแนะนำ การตั้งค่าการพัฒนาสำหรับ riot js คุณสามารถใช้ riot cli หรือรวม riot ผ่านแท็กสคริปต์ ตรวจสอบให้แน่ใจว่าได้ติดตั้ง node js (v14 หรือใหม่กว่า) ความรู้พื้นฐานเกี่ยวกับ javascript, riot js และ rest apis หากจำเป็น ให้ปรึกษา 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 ของบุคคลที่สาม ลึกซึ้งในการเรียนรู้ของคุณ เยี่ยมชม https //www back4app com/docs และแหล่งข้อมูลอื่น ๆ เพื่อเพิ่มประสิทธิภาพและขยายแอปพลิเคชันของคุณ ด้วยขั้นตอนเหล่านี้ คุณมีความเชี่ยวชาญในการสร้างแอป crud ที่สามารถขยายได้โดยใช้ riot js และ back4app ขอให้สนุกกับการเขียนโค้ด!