Building a Basic CRUD Application with Cycle.js: A Comprehensive Guide

ภาพรวม คู่มือนี้จะพาคุณไปสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, และลบ) ที่มีฟีเจอร์ครบถ้วนโดยใช้ cycle js ในบทเรียนนี้ คุณจะตั้งค่าโปรเจกต์ back4app ที่ชื่อว่า basic crud app cyclejs ซึ่งจะทำหน้าที่เป็นแบ็กเอนด์ที่แข็งแกร่งสำหรับแอปพลิเคชันของคุณ คุณจะได้เรียนรู้การออกแบบโมเดลข้อมูลที่สามารถขยายได้, จัดการข้อมูลของคุณผ่านแอป back4app admin ที่ใช้งานง่าย, และรวมฟรอนต์เอนด์ cycle js ของคุณกับ back4app โดยใช้ rest/graphql calls เมื่อสิ้นสุด คุณจะมีเว็บแอปที่พร้อมใช้งานในระดับการผลิตที่สามารถดำเนินการ crud พร้อมกับการตรวจสอบสิทธิ์ผู้ใช้และการจัดการข้อมูลอย่างปลอดภัย ข้อมูลเชิงลึกที่สำคัญ สร้างระบบ crud ที่ใช้งานได้จริงพร้อมแบ็กเอนด์ที่เชื่อถือได้ ได้รับประสบการณ์จริงในการออกแบบโมเดลข้อมูลที่สามารถขยายได้ ใช้เครื่องมือจัดการข้อมูลแบบลากและวางเพื่อการจัดการข้อมูลที่ราบรื่น รวมฟรอนต์เอนด์ cycle js กับ back4app ผ่าน rest/graphql เรียนรู้กลยุทธ์การปรับใช้รวมถึงการทำให้เป็นคอนเทนเนอร์ docker ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณมี บัญชี back4app ที่มีโปรเจกต์ที่ใช้งานอยู่ หากคุณต้องการความช่วยเหลือ โปรดดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app การตั้งค่าการพัฒนา cycle js ใช้เครื่องมือเช่น create cycle app https //github com/cyclejs community/create cycle app และตรวจสอบให้แน่ใจว่าได้ติดตั้ง node js (เวอร์ชัน 14 หรือใหม่กว่า) ความคุ้นเคยกับ javascript, cycle js, และ rest apis หากต้องการทบทวน โปรดดูที่ เอกสาร cycle js https //cycle js org/ ขั้นตอนที่ 1 – การเริ่มต้นโปรเจกต์ การสร้างโปรเจกต์ back4app ใหม่ ลงชื่อเข้าใช้บัญชี back4app ของคุณ กดปุ่ม “แอปใหม่” บนแดชบอร์ดของคุณ กำหนดชื่อโปรเจกต์ basic crud app cyclejs และทำตามคำแนะนำในการตั้งค่า สร้างโปรเจกต์ใหม่ หลังจากสร้างแล้ว โปรเจกต์ของคุณจะปรากฏบนแดชบอร์ด พร้อมสำหรับการกำหนดค่าและการจัดการด้านหลัง ขั้นตอนที่ 2 – การกำหนดโครงสร้างฐานข้อมูลของคุณ การจัดโครงสร้างโมเดลข้อมูลของคุณ สำหรับแอปพลิเคชัน crud นี้ คุณจะสร้างหลายคอลเลกชันเพื่อจัดการข้อมูลของคุณ ด้านล่างนี้เป็นตัวอย่างคอลเลกชันพร้อมฟิลด์และประเภทข้อมูลที่จำเป็น 1\ คอลเลกชันรายการ การรวบรวมนี้จะเก็บรายละเอียดของแต่ละรายการ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อรายการ คำอธิบาย สตริง สรุปสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่เพิ่มรายการ อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตล่าสุด 2\ การรวบรวมผู้ใช้ การรวบรวมนี้จัดการรายละเอียดผู้ใช้และการตรวจสอบสิทธิ์ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำของผู้ใช้ อีเมล สตริง ที่อยู่อีเมลของผู้ใช้ รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัสสำหรับการตรวจสอบสิทธิ์ที่ปลอดภัย สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตล่าสุด คุณสามารถกำหนดคอลเลกชันเหล่านี้ด้วยตนเองผ่านแดชบอร์ด back4app โดยการสร้างคลาสใหม่และกำหนดค่าฟิลด์ที่เกี่ยวข้อง สร้างชั้นเรียนใหม่ ในการเพิ่มฟิลด์ ให้เลือกประเภทข้อมูล กำหนดชื่อฟิลด์ ตั้งค่าค่าปริยายตามต้องการ และทำเครื่องหมายฟิลด์ว่าเป็นฟิลด์ที่จำเป็นหากจำเป็น สร้างคอลัมน์ การสร้างสคีม่าโดยอัตโนมัติด้วย back4app ai agent back4app ai agent ช่วยให้การสร้างสคีม่าง่ายขึ้นโดยการสร้างโมเดลข้อมูลของคุณโดยอัตโนมัติตามคำสั่งที่ให้ไว้ ซึ่งช่วยให้การออกแบบฐานข้อมูลมีความสอดคล้องและมีประสิทธิภาพ ขั้นตอนในการใช้ ai agent เข้าถึง ai agent เข้าสู่ระบบแดชบอร์ด back4app ของคุณและเลือก 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 ของคุณ เลือก “แอปผู้ดูแลระบบ” และจากนั้นคลิกที่ “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบของคุณ โดยการสร้างผู้ใช้ผู้ดูแลระบบคนแรกของคุณ การกระทำนี้จะเริ่มต้นบทบาทของระบบด้วย (เช่น, b4aadminuser ) เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งานแล้ว ให้ลงชื่อเข้าใช้แอปผู้ดูแลระบบเพื่อเริ่มจัดการคอลเลกชันของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การดำเนินการ crud ผ่านแอปผู้ดูแลระบบ ภายในแอปผู้ดูแลระบบ คุณสามารถ เพิ่มบันทึก คลิกที่ปุ่ม “เพิ่มบันทึก” ในคอลเลกชันใด ๆ (เช่น, รายการ) เพื่อแทรกข้อมูลใหม่ ดู/แก้ไขบันทึก เลือกบันทึกที่มีอยู่เพื่อตรวจสอบรายละเอียดหรือแก้ไขฟิลด์ ลบบันทึก ใช้ตัวเลือกลบเพื่อลบข้อมูลที่ไม่ต้องการ อินเทอร์เฟซที่ใช้งานง่ายนี้ช่วยเพิ่มการจัดการและการบริหารข้อมูลของคุณอย่างมาก ขั้นตอนที่ 4 – การรวม cycle js กับ back4app ตอนนี้ที่แบ็กเอนด์ของคุณทำงานผ่าน back4app แล้ว ถึงเวลาในการรวมฟรอนต์เอนด์ cycle js ของคุณ ตัวเลือก การใช้ rest/graphql apis เราจะมุ่งเน้นไปที่การเรียก rest api เพื่อโต้ตอบกับแบ็กเอนด์ของคุณ ด้านล่างนี้คือตัวอย่างคอมโพเนนต์ cycle js ที่ดึงและแสดงรายการจากฐานข้อมูล back4app ของคุณโดยใช้ไดรเวอร์ http ของ cycle ตัวอย่าง การดึงและแสดงรายการด้วย cycle js import xs from 'xstream'; import {run} from '@cycle/run'; import {div, h1, ul, li, input, button, makedomdriver} from '@cycle/dom'; import {makehttpdriver} from '@cycle/http'; function main(sources) { // intent capture add item interactions const addclick$ = sources dom select(' add') events('click'); // model make an http request to fetch items const request$ = xs of({ url 'https //parseapi back4app com/classes/items', category 'items', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); // intent handle http responses const items$ = sources http select('items') flatten() map(res => res body results); // view render the items list const vdom$ = items$ startwith(\[]) map(items => div(\[ h1('items'), button(' add', 'add item'), ul( items map(item => li(`${item title} — ${item description}`) ) ) ]) ); return { dom vdom$, http request$ }; } const drivers = { dom makedomdriver('#app'), http makehttpdriver() }; run(main, drivers); โค้ดตัวอย่างนี้แสดงให้เห็นถึงวิธีการใช้ cycle js เพื่อทำการร้องขอ http get เพื่อดึงรายการและเรนเดอร์พวกมันแบบไดนามิก ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับแบ็คเอนด์ของคุณ การใช้ access control lists (acls) ปกป้องวัตถุของคุณโดยการกำหนด acls ตัวอย่างเช่น เมื่อสร้างรายการส่วนตัว async function createprivateitem(data, owneruser) { const newitem = { title data title, description data description }; // define acl restrict access to the owner only newitem acl = { \[owneruser id] { read true, write true }, ' ' { read false, write false } }; try { const response = await fetch('https //parseapi back4app com/classes/items', { 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(newitem) }); const result = await response json(); console log('created item ', result); } catch (error) { console error('error creating item ', error); } } การกำหนดสิทธิ์ระดับคลาส (clps) ภายในแดชบอร์ด back4app ปรับ clps สำหรับแต่ละคอลเลกชันเพื่อให้แน่ใจว่าผู้ใช้ที่ได้รับการตรวจสอบแล้วเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อนได้ ขั้นตอนที่ 6 – การดำเนินการตรวจสอบสิทธิ์ผู้ใช้ การตั้งค่าการลงทะเบียนบัญชีและการเข้าสู่ระบบ back4app ใช้คลาสผู้ใช้สำหรับการตรวจสอบสิทธิ์ ใช้การเรียก api แบบ rest เพื่อจัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้ภายในแอปพลิเคชัน cycle js ของคุณ ด้านล่างนี้คือตัวอย่างการจัดการการลงทะเบียนผู้ใช้ async function signupuser(userdata) { 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({ username userdata username, password userdata password, email userdata email }) }); const result = await response json(); alert('registration successful!'); return result; } catch (error) { alert('registration error ' + error message); } } คุณสามารถทำซ้ำรูปแบบที่คล้ายกันสำหรับการเข้าสู่ระบบของผู้ใช้และการจัดการเซสชัน ขั้นตอนที่ 7 – การปรับใช้ส่วนหน้า cycle js ของคุณด้วยการปรับใช้เว็บ ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณโฮสต์แอปพลิเคชัน cycle js ของคุณได้อย่างง่ายดายผ่านการรวมกับที่เก็บ github ของคุณ 7 1 การเตรียมการสร้างโปรดักชันของคุณ เปิดไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล รันคำสั่งสร้าง npm run build นี่จะสร้าง build ไดเรกทอรีที่มีไฟล์สถิตที่ปรับให้เหมาะสม ยืนยันการสร้าง ตรวจสอบว่า build โฟลเดอร์มี index html และไดเรกทอรีสินทรัพย์ที่เกี่ยวข้อง 7 2 การจัดระเบียบและอัปโหลดโค้ดต้นฉบับของคุณ ที่เก็บ git ของคุณควรรวมแอปพลิเคชัน cycle js ทั้งหมด โครงสร้างไฟล์ตัวอย่าง basic crud app cyclejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── main js │ ├── httpdrivers js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md ไฟล์ตัวอย่าง src/main js import xs from 'xstream'; import {run} from '@cycle/run'; import {div, h1, makedomdriver} from '@cycle/dom'; import {makehttpdriver} from '@cycle/http'; import itemslist from ' /components/itemslist'; function main(sources) { const itemsvtree$ = itemslist(sources); const vdom$ = itemsvtree$ map(tree => div(\[ h1('cycle js crud application'), tree ]) ); return { dom vdom$ }; } const drivers = { dom makedomdriver('#app'), http makehttpdriver() }; run(main, drivers); การส่งข้อมูลไปยัง github เริ่มต้น git repository (ถ้ายังไม่ได้ทำ) git init จัดเตรียมไฟล์ของคุณ git add บันทึกงานของคุณ git commit m "initial commit for cycle js frontend" สร้าง github repository (เช่น, basic crud app cyclejs frontend ) ส่ง repository ของคุณ git remote add origin https //github com/your username/basic crud app cyclejs frontend git git push u origin main 7 3 การเชื่อมโยงที่เก็บของคุณกับการปรับใช้เว็บ เข้าถึงการปรับใช้เว็บ ลงชื่อเข้าใช้ back4app ไปที่โปรเจกต์ของคุณ ( basic crud app cyclejs ) และเลือก ฟีเจอร์การปรับใช้เว็บ เชื่อมต่อกับ github ทำตามคำแนะนำเพื่อลิงก์บัญชี github ของคุณเพื่อให้ back4app สามารถเข้าถึงที่เก็บของคุณได้ เลือกที่เก็บและสาขา เลือกที่เก็บของคุณ (เช่น basic crud app cyclejs frontend ) และสาขา (โดยปกติคือ main ) 7 4 การตั้งค่าการปรับใช้ คำสั่งสร้าง หากที่เก็บของคุณขาด โฟลเดอร์สร้าง , โปรดระบุคำสั่งสร้าง (เช่น, npm run build ) ไดเรกทอรีผลลัพธ์ ตั้งค่านี้เป็น build เพื่อให้ back4app รู้ว่าจะหาสิ่งไฟล์สถิตได้ที่ไหน ตัวแปรสภาพแวดล้อม รวมถึงคีย์ api หรือรายละเอียดการกำหนดค่าที่จำเป็น 7 5 การทำให้แอปพลิเคชัน cycle js ของคุณเป็น docker หากคุณเลือกการปรับใช้ docker ให้เพิ่ม dockerfile ลงในที่เก็บของคุณ \# use an official node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency definitions copy package json / \# install dependencies run npm install \# copy the remaining files copy \# build the cycle js application run npm run build \# use nginx to serve the built files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] เลือกตัวเลือกการปรับใช้ docker ในการกำหนดค่าการปรับใช้เว็บของคุณหากคุณเลือกที่จะทำให้แอปของคุณเป็นคอนเทนเนอร์ 7 6 การเปิดตัวแอปพลิเคชันของคุณ เปิดใช้งานแอปของคุณ คลิกที่ เปิดใช้งาน หลังจากตั้งค่าของคุณเสร็จสิ้น ติดตามการเปิดใช้งาน back4app จะดึงโค้ดของคุณจาก github สร้างแอป (ถ้าตั้งค่าไว้) และเปิดใช้งานมัน เข้าถึงแอปพลิเคชันของคุณ เมื่อการเปิดใช้งานเสร็จสิ้น back4app จะให้ url สำหรับแอป cycle js ของคุณ 7 7 การทดสอบการเปิดใช้งานของคุณ เยี่ยมชม url ที่เปิดใช้งาน เปิด url ที่ให้มาในเบราว์เซอร์ของคุณ ยืนยันฟังก์ชันการทำงาน ตรวจสอบให้แน่ใจว่าทุกเส้นทางและทรัพย์สินโหลดอย่างถูกต้อง แก้ไขปัญหาหากจำเป็น ใช้เครื่องมือพัฒนาเบราว์เซอร์และตรวจสอบบันทึกการเปิดใช้งานของ back4app เพื่อแก้ไขปัญหาใด ๆ ขั้นตอนที่ 8 – สรุปและการปรับปรุงในอนาคต ขอแสดงความยินดี! คุณได้สร้างแอปพลิเคชัน crud โดยใช้ cycle js และ back4app สำเร็จแล้ว คุณได้ตั้งค่าโครงการชื่อ basic crud app cyclejs , กำหนดโครงสร้างฐานข้อมูลของคุณสำหรับ items และ users และจัดการข้อมูลของคุณผ่านแอป admin ที่ใช้งานง่าย นอกจากนี้ คุณได้รวมส่วนหน้า cycle js ของคุณกับส่วนหลังโดยใช้ rest/graphql และรักษาความปลอดภัยข้อมูลของคุณด้วยการควบคุมการเข้าถึงที่เหมาะสม ขั้นตอนถัดไป ขยายส่วนหน้า เพิ่มมุมมองที่ซับซ้อนมากขึ้น การกรอง หรือการอัปเดตแบบเรียลไทม์ รวมฟีเจอร์ส่วนหลังเพิ่มเติม พิจารณาเพิ่ม cloud functions, api ของบุคคลที่สาม หรือการควบคุมการเข้าถึงตามบทบาท การเรียนรู้เพิ่มเติม สำรวจ เอกสาร back4app https //www back4app com/docs เพื่อข้อมูลเพิ่มเติมเกี่ยวกับการปรับแต่งประสิทธิภาพและการรวมที่กำหนดเอง ด้วยคู่มือนี้ คุณมีทักษะในการสร้างส่วนหลัง crud ที่สามารถปรับขนาดได้สำหรับแอปพลิเคชัน cycle js ของคุณโดยใช้ back4app ขอให้สนุกกับการเขียนโค้ด!