How to Create a CRUD Application with Koa.js?

บทนำ ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการพัฒนาแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) โดยใช้ koa js บทเรียนนี้จะพาคุณผ่านขั้นตอนสำคัญในการจัดการข้อมูลและสร้าง api ที่ใช้งานได้โดยการรวมแบ็กเอนด์ koa js ของคุณกับ back4app คุณจะเริ่มต้นด้วยการตั้งค่าโปรเจกต์ back4app ที่เรียกว่า basic crud app koajs , ซึ่งทำหน้าที่เป็นแบ็กเอนด์ที่ทรงพลังสำหรับแอปพลิเคชันของคุณ หลังจากนั้น คุณจะออกแบบสคีมาฐานข้อมูลที่ยืดหยุ่นโดยการสร้างคอลเลกชันและกำหนดฟิลด์—ไม่ว่าจะทำด้วยตนเองหรือด้วยความช่วยเหลือจาก back4app ai agent การตั้งค่านี้จะช่วยให้ข้อมูลของคุณถูกจัดระเบียบเพื่อให้การดำเนินการ crud เป็นไปอย่างราบรื่น ถัดไป คุณจะใช้ back4app admin app ซึ่งเป็นเครื่องมือแบบไม่ต้องเขียนโค้ดที่ช่วยให้การจัดการข้อมูลเป็นเรื่องง่าย เช่น การสร้าง, อ่าน, อัปเดต และลบระเบียน สุดท้าย คุณจะกำหนดค่าเซิร์ฟเวอร์ koa js ของคุณเพื่อโต้ตอบกับ back4app ผ่าน rest apis ในขณะที่ดำเนินการควบคุมการเข้าถึงที่แข็งแกร่งเพื่อรักษาความปลอดภัยให้กับแบ็กเอนด์ของคุณ เมื่อสิ้นสุดบทเรียนนี้ คุณจะได้สร้างแอปพลิเคชันเซิร์ฟเวอร์ที่พร้อมใช้งานในระดับการผลิต ซึ่งไม่เพียงแต่รองรับการดำเนินการ crud พื้นฐาน แต่ยังรวมถึงการตรวจสอบสิทธิ์ผู้ใช้และการจัดการข้อมูลอย่างปลอดภัย ข้อสรุปที่สำคัญ ค้นพบวิธีการสร้างแอปพลิเคชัน crud ด้วย koa js ขณะใช้แบ็คเอนด์คลาวด์ที่เชื่อถือได้ รับข้อมูลเชิงลึกเกี่ยวกับการออกแบบแบ็คเอนด์ที่สามารถขยายได้และการรวมเข้ากับ restful api เรียนรู้การใช้ back4app admin app ที่ใช้งานง่ายเพื่อลดความซับซ้อนของการดำเนินการ crud สำรวจกลยุทธ์การปรับใช้ รวมถึงการใช้ docker เพื่อเปิดตัวแอปพลิเคชัน koa js ของคุณอย่างรวดเร็ว ข้อกำหนดเบื้องต้น ก่อนที่จะเริ่มต้น ให้แน่ใจว่าคุณมีสิ่งต่อไปนี้ บัญชี back4app ที่มีโครงการที่ใช้งานอยู่ ตรวจสอบ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app เพื่อคำแนะนำ สภาพแวดล้อมการพัฒนา node js ที่ใช้งานได้ ติดตั้ง node js (v14 หรือใหม่กว่า) และตั้งค่าโครงการ koa js ของคุณ ความรู้พื้นฐานเกี่ยวกับ javascript, koa js, และ rest apis ตรวจสอบ เอกสาร koa js https //koajs com/ หากจำเป็น ขั้นตอนที่ 1 – การตั้งค่าโปรเจกต์ back4app ของคุณ การสร้างโปรเจกต์ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “แอปใหม่” จากแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app koajs และทำตามคำแนะนำเพื่อเสร็จสิ้นการตั้งค่า สร้างโปรเจกต์ใหม่ เมื่อโปรเจกต์ของคุณถูกสร้างขึ้น มันจะปรากฏบนแดชบอร์ดของคุณ โดยให้โครงสร้างพื้นฐานด้านหลังที่จำเป็นสำหรับแอปพลิเคชันของคุณ ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูล การออกแบบโมเดลข้อมูลของคุณ สำหรับแอปพลิเคชัน crud นี้ คุณจะต้องตั้งค่าหลายคอลเลกชัน ด้านล่างนี้คือคอลเลกชันตัวอย่างพร้อมฟิลด์และประเภทที่แนะนำเพื่อช่วยให้คุณกำหนดค่ารูปแบบฐานข้อมูลของคุณได้อย่างมีประสิทธิภาพ 1\ คอลเลกชันรายการ คอลเลกชันนี้มีรายละเอียดสำหรับแต่ละรายการ สนาม ประเภท คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อรายการ คำอธิบาย สตริง คำอธิบายสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่สร้างรายการ อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตล่าสุด 2\ คอลเลกชันผู้ใช้ คอลเลกชันนี้จัดการข้อมูลผู้ใช้และข้อมูลรับรองการพิสูจน์ตัวตน สนาม ประเภท คำอธิบาย id รหัสวัตถุ คีย์หลักที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อผู้ใช้ที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่าน hash สตริง รหัสผ่านที่ถูกแฮชอย่างปลอดภัย สร้างเมื่อ วันที่ เวลาที่สร้างบัญชี อัปเดตเมื่อ วันที่ เวลาของการอัปเดตบัญชีล่าสุด คุณสามารถสร้างคอลเลกชันเหล่านี้ได้ผ่านแดชบอร์ด back4app โดยการเพิ่มคลาสใหม่สำหรับแต่ละคลาสและกำหนดคอลัมน์ที่เกี่ยวข้อง สร้างคลาสใหม่ คุณสามารถกำหนดฟิลด์โดยการเลือกประเภทที่เหมาะสม ตั้งค่าเริ่มต้น และระบุว่าฟิลด์นั้นเป็นฟิลด์ที่จำเป็นหรือไม่ สร้างคอลัมน์ การใช้ประโยชน์จาก back4app ai agent สำหรับการตั้งค่า schema back4app ai agent ซึ่งมีอยู่ในแดชบอร์ดของคุณ สามารถสร้าง schema ฐานข้อมูลของคุณโดยอัตโนมัติจากคำอธิบายที่ละเอียดซึ่งอธิบายถึงคอลเลกชันและฟิลด์ของคุณ ฟีเจอร์นี้ช่วยเร่งการตั้งค่าโครงการและรับประกัน schema ที่สอดคล้องกันสำหรับการดำเนินการ crud วิธีการใช้ ai agent เปิด ai agent จากแดชบอร์ด back4app ของคุณหรือภายในการตั้งค่าโครงการ ให้คำอธิบายที่ชัดเจนเกี่ยวกับคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบ schema ที่สร้างขึ้นและนำการกำหนดค่ามาใช้กับโครงการของคุณ ตัวอย่างคำอธิบาย 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 เป็นอินเทอร์เฟซที่ใช้งานง่ายที่ช่วยให้คุณจัดการข้อมูลแบ็กเอนด์ของคุณได้อย่างง่ายดายผ่านการควบคุมแบบลากและวาง เครื่องมือนี้ไม่ต้องเขียนโค้ดช่วยให้การดำเนินการต่างๆ เช่น การสร้าง การอ่าน การอัปเดต และการลบระเบียนง่ายขึ้น การเปิดใช้งานแอปผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” และคลิกที่ “เปิดใช้งานแอปผู้ดูแลระบบ” ตั้งค่าบัญชีผู้ดูแลระบบเริ่มต้นของคุณ; กระบวนการนี้จะกำหนดบทบาทของระบบ เช่น b4aadminuser และเตรียมคอลเลกชันของระบบ เปิดใช้งานแอปผู้ดูแลระบบ เมื่อเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลระบบเพื่อจัดการคอลเลกชันและระเบียนของคุณ แดชบอร์ดแอปผู้ดูแลระบบ ภายในแอปผู้ดูแลระบบ คุณสามารถ เพิ่มระเบียนใหม่ ใช้ปุ่ม “เพิ่มระเบียน” ในคอลเลกชันใดๆ (เช่น รายการ) เพื่อสร้างรายการใหม่ ดูและแก้ไขระเบียน เลือกระเบียนเพื่อตรวจสอบรายละเอียดหรือแก้ไขฟิลด์ของมัน ลบระเบียน ลบรายการที่ไม่จำเป็นอีกต่อไป ขั้นตอนที่ 4 – เชื่อมต่อ backend koa js ของคุณกับ back4app ตอนนี้ที่ backend ของคุณถูกกำหนดค่าและจัดการแล้ว ถึงเวลาที่จะตั้งค่าเซิร์ฟเวอร์ koa js ของคุณเพื่อโต้ตอบกับ back4app การใช้ rest apis กับ koa js บทเรียนนี้จะแสดงวิธีการใช้การเรียก rest api จากเซิร์ฟเวอร์ koa js ของคุณเพื่อดำเนินการ crud บนคอลเลกชัน back4app ของคุณ การตั้งค่าเซิร์ฟเวอร์ koa js เบื้องต้น ติดตั้ง koa js และ middleware ที่จำเป็น npm install koa koa router koa bodyparser node fetch สร้างไฟล์เซิร์ฟเวอร์ (เช่น, server js ) // server js const koa = require('koa'); const router = require('koa router'); const bodyparser = require('koa bodyparser'); const fetch = require('node fetch'); const app = new koa(); const router = new router(); const application id = 'your application id'; const rest api key = 'your rest api key'; const base url = 'https //parseapi back4app com'; // fetch all items router get('/items', async (ctx) => { try { const response = await fetch(`${base url}/classes/items`, { headers { 'x parse application id' application id, 'x parse rest api key' rest api key } }); const data = await response json(); ctx body = data results; } catch (error) { ctx status = 500; ctx body = { error 'failed to fetch items' }; } }); // create a new item router post('/items', async (ctx) => { const { title, description } = ctx request body; try { const response = await fetch(`${base url}/classes/items`, { method 'post', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json' }, body json stringify({ title, description }) }); const newitem = await response json(); ctx body = newitem; } catch (error) { ctx status = 500; ctx body = { error 'error creating item' }; } }); // update an item router put('/items/\ id', async (ctx) => { const { id } = ctx params; const { title, description } = ctx request body; try { const response = await fetch(`${base url}/classes/items/${id}`, { method 'put', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json' }, body json stringify({ title, description }) }); const updateditem = await response json(); ctx body = updateditem; } catch (error) { ctx status = 500; ctx body = { error 'error updating item' }; } }); // delete an item router delete('/items/\ id', async (ctx) => { const { id } = ctx params; try { await fetch(`${base url}/classes/items/${id}`, { method 'delete', headers { 'x parse application id' application id, 'x parse rest api key' rest api key } }); ctx body = { message 'item deleted successfully' }; } catch (error) { ctx status = 500; ctx body = { error 'error deleting item' }; } }); app use(bodyparser()); app use(router routes()) use(router allowedmethods()); const port = process env port || 3000; app listen(port, () => { console log(`server is running on port ${port}`); }); การตั้งค่านี้จะทำให้คุณมีเซิร์ฟเวอร์ koa js ที่สื่อสารกับ back4app ผ่านการเรียก rest โดยจัดการการดำเนินการ crud ทั้งหมด ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับ backend ของคุณ การดำเนินการควบคุมการเข้าถึง ปกป้องข้อมูลของคุณโดยการใช้ access control lists (acls) ที่ระดับวัตถุ ตัวอย่างเช่น เมื่อสร้างรายการส่วนตัว ให้ตั้งค่า acls เพื่อจำกัดการเข้าถึง async function createsecureitem(itemdata, ownersessiontoken) { try { const response = await fetch(`${base url}/classes/items`, { method 'post', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json', 'x parse session token' ownersessiontoken }, body json stringify({ title itemdata title, description itemdata description, acl { " " { "read" false, "write" false }, "owner" { "read" true, "write" true } } }) }); const result = await response json(); console log('secure item created ', result); } catch (error) { console error('error creating secure item ', error); } } การตั้งค่าการอนุญาตระดับคลาส (clps) ภายในแดชบอร์ด back4app ของคุณ ให้กำหนด clps สำหรับแต่ละคอลเลกชันเพื่อสร้างกฎเริ่มต้น โดยมั่นใจว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อนได้ ขั้นตอนที่ 6 – การตรวจสอบสิทธิ์ผู้ใช้ การกำหนดค่าบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ในการจัดการการตรวจสอบสิทธิ์ ในเซิร์ฟเวอร์ koa js ของคุณ ให้จัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้โดยการเชื่อมต่อกับ back4app rest api ตัวอย่าง จุดสิ้นสุดการลงทะเบียนผู้ใช้ router post('/signup', async (ctx) => { const { username, password, email } = ctx request body; try { const response = await fetch(`${base url}/users`, { method 'post', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json' }, body json stringify({ username, password, email }) }); const userdata = await response json(); ctx body = userdata; } catch (error) { ctx status = 500; ctx body = { error 'error signing up' }; } }); คุณสามารถสร้างจุดสิ้นสุดที่คล้ายกันสำหรับการเข้าสู่ระบบและการจัดการเซสชันตามที่ต้องการ ขั้นตอนที่ 7 – การปรับใช้แอปพลิเคชัน koa js ของคุณ ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณโฮสต์เซิร์ฟเวอร์ koa js ของคุณโดยการเชื่อมโยงกับที่เก็บ github ของคุณ 7 1 – สร้างและจัดระเบียบโปรเจกต์ของคุณ ตรวจสอบให้แน่ใจว่าโปรเจกต์ของคุณมีโครงสร้างที่เหมาะสม ตัวอย่างเลย์เอาต์อาจเป็น basic crud app koajs/ ├── node modules/ ├── server js ├── package json └── readme md คอมมิตไฟล์ต้นฉบับทั้งหมดของคุณไปยังที่เก็บ git คำสั่ง git ตัวอย่าง git init git add git commit m "initial commit of koa js backend" git remote add origin https //github com/your username/basic crud app koajs git git push u origin main 7 2 – รวมเข้ากับการปรับใช้เว็บของ back4app เข้าสู่ระบบแดชบอร์ด back4app ของคุณ เปิดโปรเจกต์ของคุณ basic crud app koajs , และไปที่ web deployment ส่วน เชื่อมต่อบัญชี github ของคุณหากคุณยังไม่ได้ทำ เลือกที่เก็บของคุณและสาขาที่เกี่ยวข้อง (เช่น, main ) 7 3 – กำหนดค่าการตั้งค่าการปรับใช้ของคุณ คำสั่งสร้าง หากโปรเจกต์ของคุณต้องการการสร้าง (เช่น การแปลง javascript สมัยใหม่) ให้ระบุคำสั่งสร้างเช่น npm run build ไดเรกทอรีผลลัพธ์ ระบุโฟลเดอร์ที่มีไฟล์ที่พร้อมสำหรับการผลิตของคุณ หากมี ตัวแปรสภาพแวดล้อม เพิ่มตัวแปรสภาพแวดล้อมที่จำเป็น (เช่น คีย์ api) ในการกำหนดค่าการปรับใช้ 7 4 – ตัวเลือก ทำให้เซิร์ฟเวอร์ koa js ของคุณเป็น docker หากคุณต้องการปรับใช้แอปพลิเคชันของคุณในฐานะคอนเทนเนอร์ ให้รวม dockerfile ในที่เก็บของคุณ \# use the official node js image as a base from node 16 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application code copy \# expose the desired port expose 3000 \# run the application cmd \["node", "server js"] 7 5 – เริ่มต้นแอปพลิเคชันของคุณ คลิกที่ deploy ปุ่มบน back4app ตรวจสอบบันทึกการปรับใช้เพื่อให้แน่ใจว่าแอปของคุณถูกสร้างและปรับใช้สำเร็จ เมื่อเสร็จสิ้น back4app จะให้ url ที่เซิร์ฟเวอร์ koa js ของคุณสามารถเข้าถึงได้ 7 6 – ตรวจสอบการปรับใช้ของคุณ เยี่ยมชม url ที่ให้มาเพื่อตรวจสอบว่าแอปพลิเคชันของคุณกำลังทำงาน ทดสอบแต่ละจุดสิ้นสุด (การดำเนินการ crud, การตรวจสอบสิทธิ์ผู้ใช้) เพื่อยืนยันการทำงานที่ถูกต้อง หากเกิดปัญหา ให้ตรวจสอบบันทึกและการตั้งค่าการปรับใช้ของคุณเพื่อการแก้ไขปัญหา ขั้นตอนที่ 8 – สรุปและการปรับปรุงในอนาคต ทำได้ดีมาก! ตอนนี้คุณได้สร้างแอปพลิเคชัน crud ที่ทำงานได้อย่างเต็มที่โดยใช้ koa js ที่รวมเข้ากับ back4app แล้ว โครงการของคุณ basic crud app koajs มีการออกแบบคอลเลกชันสำหรับรายการและผู้ใช้ที่มีการวางแผนอย่างรอบคอบ แอปผู้ดูแลระบบที่ใช้งานง่ายสำหรับการจัดการข้อมูล และแบ็กเอนด์ที่ปลอดภัย ขั้นตอนถัดไป ขยาย api ของคุณ ปรับปรุงเซิร์ฟเวอร์ koa js ของคุณด้วยเส้นทางเพิ่มเติม มิดเดิลแวร์ หรือแม้แต่ฟีเจอร์เรียลไทม์ ปรับปรุงการตรวจสอบสิทธิ์ พิจารณาการใช้การตรวจสอบสิทธิ์แบบใช้โทเค็น การเข้าสู่ระบบผ่านโซเชียล หรือการตรวจสอบหลายปัจจัย สำรวจเอกสารเพิ่มเติม ตรวจสอบ เอกสาร back4app https //www back4app com/docs และ คู่มือ koa js https //koajs com/ เพื่อหัวข้อที่มีความซับซ้อนและการปรับแต่งที่มากขึ้น โดยการติดตามบทแนะนำนี้ คุณมีทักษะในการสร้างแบ็กเอนด์ crud ที่สามารถปรับขนาดได้ ปลอดภัย และมีประสิทธิภาพด้วย koa js และ back4app ขอให้สนุก