Building a CRUD Application with Qwik: A Comprehensive Tutorial

ภาพรวม ในคู่มือนี้ คุณจะได้เรียนรู้การสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่ใช้งานได้จริงโดยใช้ qwik เราจะแสดงการดำเนินการที่จำเป็นสำหรับการจัดการข้อมูลในขณะที่เชื่อมต่อแอปของคุณกับ back4app ในเบื้องต้น คุณจะตั้งค่าโครงการ back4app ที่ชื่อ basic crud app qwik เพื่อทำหน้าที่เป็นแบ็กเอนด์สำหรับการจัดการข้อมูล ถัดไป คุณจะกำหนดค่าฐานข้อมูลที่สามารถปรับขนาดได้โดยการกำหนดคอลเลกชันและฟิลด์—ไม่ว่าจะทำด้วยตนเองหรือด้วยความช่วยเหลือจาก back4app ai agent ซึ่งจะทำให้แน่ใจว่าโมเดลข้อมูลของคุณได้รับการปรับให้เหมาะสมสำหรับการจัดการงาน crud อย่างมีประสิทธิภาพ จากนั้น คุณจะใช้ back4app admin app ซึ่งเป็นอินเทอร์เฟซที่ใช้งานง่ายแบบลากและวาง เพื่อจัดการคอลเลกชันของคุณได้อย่างราบรื่น เครื่องมือนี้ช่วยให้การดำเนินการด้านข้อมูลง่ายขึ้นโดยเสนอวิธีที่เข้าใจง่ายในการสร้าง อัปเดต และลบระเบียน สุดท้าย คุณจะรวมส่วนหน้า qwik ของคุณกับ back4app โดยใช้ rest หรือ graphql apis พร้อมกับการนำระบบควบคุมความปลอดภัยที่แข็งแกร่งมาใช้ เมื่อสิ้นสุดการสอนนี้ แอปพลิเคชันที่พร้อมใช้งานในผลิตภัณฑ์ของคุณจะไม่เพียงแต่จัดการการดำเนินการ crud แต่ยังสนับสนุนการตรวจสอบสิทธิ์ผู้ใช้และการเข้าถึงข้อมูลอย่างปลอดภัย ข้อมูลเชิงลึกที่สำคัญ เชี่ยวชาญในการพัฒนาแอปพลิเคชัน crud ที่จัดการข้อมูลได้อย่างมีประสิทธิภาพโดยใช้แบ็คเอนด์ที่เชื่อถือได้ ค้นพบวิธีการออกแบบแบ็คเอนด์ที่ปรับเปลี่ยนได้และรวมเข้ากับฟรอนต์เอนด์ qwik เพื่อเพิ่มการมีส่วนร่วมของผู้ใช้ สำรวจข้อดีของอินเทอร์เฟซผู้ดูแลระบบแบบลากและวาง (back4app admin app) เพื่อทำให้ฟังก์ชัน crud ง่ายขึ้น เรียนรู้เกี่ยวกับกลยุทธ์การปรับใช้ รวมถึงการทำให้เป็นคอนเทนเนอร์ docker เพื่อเปิดตัวแอปพลิเคชันเว็บของคุณอย่างรวดเร็ว ข้อกำหนดเบื้องต้น ก่อนเริ่มโปรดตรวจสอบให้แน่ใจว่าคุณมี บัญชี back4app ที่มีการตั้งค่าโครงการใหม่ เยี่ยมชม เริ่มต้นใช้งานกับ back4app https //www back4app com/docs/get started/new parse app เพื่อขอความช่วยเหลือ สภาพแวดล้อมการพัฒนา qwik ตั้งค่าโครงการของคุณโดยใช้ เอกสาร qwik https //qwik builder io/docs/getting started/ ตรวจสอบให้แน่ใจว่าคุณติดตั้ง node js (เวอร์ชัน 14 หรือใหม่กว่า) ความเข้าใจพื้นฐานเกี่ยวกับ javascript, qwik, และ rest apis ปรึกษา เอกสาร qwik https //qwik builder io/docs/ หากคุณต้องการการทบทวน ขั้นตอนที่ 1 – การเริ่มต้นโครงการ การสร้างโครงการ back4app ใหม่ ลงชื่อเข้าใช้บัญชี back4app ของคุณ คลิกที่ “แอปใหม่” ในแดชบอร์ดของคุณ ป้อนชื่อโปรเจกต์ basic crud app qwik และทำตามคำแนะนำเพื่อสร้างโปรเจกต์ของคุณ สร้างโปรเจกต์ใหม่ โปรเจกต์ใหม่ของคุณจะปรากฏในแดชบอร์ดของคุณ ซึ่งเป็นพื้นฐานของแบ็กเอนด์สำหรับแอปพลิเคชันของคุณ ขั้นตอนที่ 2 – การออกแบบสคีมาฐานข้อมูลของคุณ การสร้างโมเดลข้อมูลของคุณ สำหรับแอป crud นี้ คุณจะต้องกำหนดหลายคอลเลกชัน ด้านล่างนี้เป็นตัวอย่างที่แสดงฟิลด์และประเภทที่จำเป็นเพื่อช่วยให้คุณสร้างสคีมาฐานข้อมูลที่มีประสิทธิภาพสำหรับการจัดการการดำเนินการ crud 1\ การรวบรวมรายการ การรวบรวมนี้เก็บรายละเอียดสำหรับแต่ละรายการ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ คีย์หลักที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อของรายการ คำอธิบาย สตริง รายละเอียดสั้น ๆ เกี่ยวกับรายการ สร้างเมื่อ วันที่ เวลาที่สร้างรายการ อัปเดตเมื่อ วันที่ เวลาของการอัปเดตครั้งล่าสุด 2\ การรวบรวมผู้ใช้ คอลเลกชันนี้เก็บรายละเอียดผู้ใช้และข้อมูลการตรวจสอบสิทธิ์ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ คีย์หลักที่สร้างโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัสสำหรับการเข้าสู่ระบบ สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาที่อัปเดตล่าสุดสำหรับบัญชีผู้ใช้ คุณสามารถเพิ่มคอลเลกชันเหล่านี้ด้วยตนเองผ่านแดชบอร์ด back4app โดยการสร้างคลาสใหม่และกำหนดค่าคอลัมน์แต่ละคอลัมน์ตามที่ต้องการ สร้างคลาสใหม่ เพิ่มฟิลด์ได้อย่างง่ายดายโดยการเลือกประเภท, กำหนดชื่อ, และกำหนดค่าพื้นฐานและข้อจำกัด สร้างคอลัมน์ การใช้ประโยชน์จาก back4app ai agent สำหรับการสร้าง schema back4app ai agent สามารถสร้าง schema ของคุณโดยอัตโนมัติตามคำอธิบายที่ให้ไว้ ฟีเจอร์นี้ช่วยเร่งการตั้งค่าโปรเจกต์และรับประกันความสอดคล้อง วิธีการใช้งาน ai agent เข้าถึง ai agent ค้นหามันในแดชบอร์ด back4app ของคุณหรือภายในการตั้งค่าโปรเจกต์ของคุณ รายละเอียดโมเดลข้อมูลของคุณ ให้คำอธิบายที่อธิบายถึงคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและนำไปใช้ ประเมินข้อเสนอ schema ที่สร้างขึ้นและนำไปใช้ในโปรเจกต์ของคุณ ตัวอย่างคำอธิบาย create the following 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) วิธีการนี้ช่วยประหยัดเวลาและรับประกัน schema ที่มีโครงสร้างดีซึ่งเหมาะสำหรับแอปพลิเคชันของคุณ ขั้นตอนที่ 3 – เปิดใช้งานแอปผู้ดูแลระบบ & จัดการการดำเนินการ crud แนะนำแอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app ให้ส่วนติดต่อที่ไม่มีโค้ดสำหรับการจัดการข้อมูลด้านหลัง ฟังก์ชันการลากและวางที่ใช้งานง่ายช่วยให้คุณสามารถดำเนินการ crud ได้อย่างง่ายดาย วิธีเปิดใช้งานแอปผู้ดูแลระบบ เข้าถึงเมนู “เพิ่มเติม” จากแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” และจากนั้นคลิก “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบ โดยการสร้างผู้ใช้ผู้ดูแลระบบ ซึ่งจะสร้างบทบาทและคอลเลกชันระบบโดยอัตโนมัติ เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งานแล้ว ลงชื่อเข้าใช้แอปผู้ดูแลระบบเพื่อจัดการข้อมูลของคุณได้อย่างง่ายดาย แดชบอร์ดแอปผู้ดูแลระบบ การดำเนินการ crud ผ่านแอปผู้ดูแลระบบ เพิ่มบันทึก ใช้ปุ่ม “เพิ่มบันทึก” ภายในคอลเลกชันใด ๆ (เช่น รายการ) เพื่อสร้างรายการใหม่ ดู/แก้ไขบันทึก คลิกที่บันทึกใด ๆ เพื่อตรวจสอบรายละเอียดหรือทำการอัปเดต ลบบันทึก ใช้ฟังก์ชันลบเพื่อลบรายการที่ล้าสมัย เครื่องมือนี้ช่วยให้การดำเนินการข้อมูลเป็นไปอย่างราบรื่น เพื่อให้แน่ใจว่าประสบการณ์ของผู้ใช้เป็นไปอย่างราบรื่น ขั้นตอนที่ 4 – เชื่อมต่อ qwik กับ back4app ตอนนี้ที่แบ็กเอนด์ของคุณถูกกำหนดค่าแล้ว ถึงเวลาเชื่อมต่อส่วนหน้า qwik ของคุณกับ back4app ตัวเลือก ใช้ rest หรือ graphql apis เราจะใช้การเรียก rest api เพื่อโต้ตอบกับ back4app ตัวอย่าง การดึงรายการผ่าน rest ใน qwik สร้างคอมโพเนนต์ qwik (เช่น, src/components/itemslist tsx ) ที่ดึงข้อมูลและแสดงรายการ // src/components/itemslist tsx import { component$, usetask$ } from '@builder io/qwik'; export const itemslist = component$(() => { const items = \[]; usetask$(async () => { 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(); items push( data results); } catch (error) { console error('error retrieving items ', error); } }); return ( \<div> \<h2>items\</h2> \<ul> {items map((item any) => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> ); }); export default itemslist; คอมโพเนนต์นี้ใช้ api fetch เพื่อเรียกจุดสิ้นสุด rest ของ back4app โดยดึงรายการของรายการ สำหรับการดำเนินการ crud อื่นๆ (สร้าง, อัปเดต, ลบ) ให้รวมการเรียก rest ที่คล้ายกันเข้าไปในคอมโพเนนต์ qwik ของคุณ ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับ backend ของคุณ การดำเนินการควบคุมการเข้าถึง (acls) เพิ่มความปลอดภัยให้กับข้อมูลของคุณโดยการตั้งค่า acls บนวัตถุของคุณ ตัวอย่างเช่น เพื่อจำกัดการเข้าถึงรายการเฉพาะ async function createprivateitem(itemdata { title string; description string }, ownerid string) { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, ' ' { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } catch (error) { console error('error creating private item ', error); } } การกำหนดสิทธิ์ระดับคลาส (clps) ภายในแดชบอร์ด back4app ปรับ clps สำหรับแต่ละคอลเลกชันเพื่อบังคับใช้นโยบายการเข้าถึงเริ่มต้น โดยให้แน่ใจว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถโต้ตอบกับข้อมูลที่ละเอียดอ่อน ขั้นตอนที่ 6 – การตรวจสอบสิทธิ์ผู้ใช้ การสร้างบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ของ parse สำหรับการจัดการการตรวจสอบสิทธิ์ ในแอป qwik ของคุณ ให้ดำเนินการลงทะเบียนผู้ใช้และการเข้าสู่ระบบตามที่แสดงด้านล่าง ตัวอย่าง ส่วนประกอบการลงทะเบียนใน qwik // src/components/auth tsx import { component$, usestore } from '@builder io/qwik'; export const signup = component$(() => { const store = usestore({ username '', password '', email '' }); const handlesignup = async (e event) => { e preventdefault(); try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username store username, password store password, email store email }) }); const data = await response json(); alert('user successfully registered!'); } catch (error any) { alert('registration error ' + error message); } }; return ( \<form onsubmit$={handlesignup}> \<input type="text" placeholder="username" value={store username} oninput$={(e) => (store username = (e target as htmlinputelement) value)} /> \<input type="password" placeholder="password" value={store password} oninput$={(e) => (store password = (e target as htmlinputelement) value)} /> \<input type="email" placeholder="email" value={store email} oninput$={(e) => (store email = (e target as htmlinputelement) value)} /> \<button type="submit">register\</button> \</form> ); }); วิธีการที่คล้ายกันสามารถนำไปใช้กับการเข้าสู่ระบบและการจัดการเซสชัน ตัวเลือกเพิ่มเติมเช่นการตรวจสอบสิทธิ์ทางสังคม การตรวจสอบอีเมล และการกู้คืนรหัสผ่านสามารถกำหนดค่าได้ผ่าน back4app ขั้นตอนที่ 7 – การปรับใช้ส่วนหน้า qwik ของคุณผ่านการปรับใช้เว็บ บริการการปรับใช้เว็บของ back4app ช่วยให้การโฮสต์ส่วนหน้า qwik ของคุณเป็นไปอย่างราบรื่นโดยการเชื่อมโยงกับที่เก็บ github ของคุณ ปฏิบัติตามขั้นตอนเหล่านี้เพื่อปรับใช้เว็บไซต์ของคุณ 7 1 สร้างการสร้างผลิตภัณฑ์ของคุณ เปิดโฟลเดอร์โปรเจกต์ของคุณในเทอร์มินัล รันคำสั่งสร้าง npm run build นี่จะสร้าง build โฟลเดอร์ที่มีไฟล์สแตติกที่ถูกปรับให้เหมาะสม ยืนยันการสร้าง ตรวจสอบว่า build โฟลเดอร์มีไฟล์ index html พร้อมกับไดเรกทอรีของแอสเซทที่เกี่ยวข้อง 7 2 จัดระเบียบและคอมมิตโค้ดของคุณไปยัง github ที่เก็บของคุณควรมีซอร์สโค้ดทั้งหมดสำหรับ qwik frontend ของคุณ โครงสร้างทั่วไปอาจเป็น basic crud app qwik frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── root tsx \| ├── entry tsx \| └── components/ \| ├── itemslist tsx \| └── auth tsx \| package json \| readme md ตัวอย่าง src/root tsx // src/root tsx import { component$ } from '@builder io/qwik'; import itemslist from ' /components/itemslist'; export default component$(() => { return ( \<div style={{ padding '2rem' }}> \<h1>crud application\</h1> \<itemslist /> \</div> ); }); การส่งโค้ดของคุณ เริ่มต้น git (ถ้ายังไม่ได้ทำ) git init จัดเตรียมไฟล์ของคุณ git add บันทึกการเปลี่ยนแปลงของคุณ git commit m "การบันทึกครั้งแรกของโค้ด qwik frontend" สร้างที่เก็บ github ตัวอย่างเช่น ตั้งชื่อว่า basic crud app qwik frontend ส่งโค้ดของคุณไปยัง github git remote add origin https //github com/your username/basic crud app qwik frontend git git push u origin main 7 3 การเชื่อมต่อที่เก็บของคุณกับการปรับใช้เว็บ เข้าถึงการปรับใช้เว็บ เข้าสู่ระบบแดชบอร์ด back4app ของคุณ เลือกโปรเจกต์ของคุณ (basic crud app qwik) และไปที่ การปรับใช้เว็บ ส่วน เชื่อมโยงกับ github ทำตามคำแนะนำบนหน้าจอเพื่อเชื่อมต่อบัญชี github ของคุณ เลือกที่เก็บและสาขา เลือกที่เก็บของคุณ (เช่น basic crud app qwik frontend ) และสาขาที่เกี่ยวข้อง (เช่น main ) 7 4 การกำหนดค่าการปรับใช้ ระบุการตั้งค่าเพิ่มเติม คำสั่งสร้าง หากไม่มี build โฟลเดอร์ที่สร้างไว้ล่วงหน้า ให้ตั้งค่าคำสั่ง (เช่น npm run build ) ไดเรกทอรีผลลัพธ์ กำหนดไดเรกทอรีผลลัพธ์เป็น build ตัวแปรสภาพแวดล้อม แทรกตัวแปรที่จำเป็นเช่น api keys 7 5 การทำให้แอป qwik ของคุณเป็นคอนเทนเนอร์ด้วย docker (ไม่บังคับ) หากคุณเลือกใช้ docker ให้รวม dockerfile ที่คล้ายกับ \# use node for building the app from node 16 alpine as build workdir /app copy package json / run npm install copy run npm run build \# serve the built app with nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] จากนั้นเลือกตัวเลือก docker ในการตั้งค่าการปรับใช้เว็บของคุณ 7 6 การปรับใช้แอปพลิเคชันของคุณ คลิกปุ่ม deploy เมื่อการกำหนดค่าครบถ้วน ให้กด deploy ดูการสร้าง back4app จะดึงโค้ดของคุณ สร้างมัน และปรับใช้คอนเทนเนอร์ รับ url ของคุณ หลังจากการปรับใช้ จะมี url ที่ให้บริการแอปของคุณ 7 7 การตรวจสอบการปรับใช้ของคุณ เยี่ยมชม url เปิดลิงก์ที่ให้ไว้ในเบราว์เซอร์ของคุณ ทดสอบฟังก์ชันการทำงาน ตรวจสอบให้แน่ใจว่าทุกเส้นทางและทรัพย์สินโหลดอย่างถูกต้อง แก้ไขหากจำเป็น ใช้เครื่องมือพัฒนาเบราว์เซอร์และบันทึก back4app เพื่อตรวจสอบปัญหา ขั้นตอนที่ 8 – สรุปและการปรับปรุงในอนาคต ทำได้ดีมาก! คุณได้สร้างแอป crud ที่สมบูรณ์แบบโดยใช้ qwik และ back4app สำเร็จแล้ว คุณได้สร้างโปรเจกต์ basic crud app qwik , สร้างสคีมาฐานข้อมูลที่ละเอียดสำหรับ items และ users และจัดการข้อมูลด้วย admin app นอกจากนี้ คุณได้เชื่อมต่อ frontend ของคุณกับ backend และใช้มาตรการรักษาความปลอดภัยที่เข้มงวด ขั้นตอนถัดไป ขยาย frontend ของคุณ ปรับปรุงแอป qwik ของคุณด้วยฟีเจอร์เช่นการดูรายละเอียดรายการ ฟังก์ชันการค้นหา หรือการอัปเดตแบบเรียลไทม์ เพิ่มฟังก์ชันการทำงานเพิ่มเติม พิจารณาการรวมตรรกะ backend ขั้นสูง api ของบุคคลที่สาม หรือการควบคุมการเข้าถึงตามบทบาท สำรวจแหล่งข้อมูลเพิ่มเติม อ้างอิงจาก เอกสาร back4app https //www back4app com/docs และบทเรียน qwik เพิ่มเติมเพื่อความรู้เชิงลึกเกี่ยวกับการปรับปรุงประสิทธิภาพและการรวมที่กำหนดเอง โดยการติดตามบทแนะนำนี้ คุณตอนนี้มีความรู้ในการสร้าง