How to Build a Qwik Frontend and Connect It to a Backend?

ในบทแนะนำนี้ คุณจะสร้างแอปพลิเคชันรายการสิ่งที่ต้องทำโดยใช้ qwik และเชื่อมต่อกับแบ็คเอนด์ที่มีความแข็งแกร่งซึ่งขับเคลื่อนโดย back4app คู่มือนี้ออกแบบมาสำหรับนักพัฒนาที่ต้องการใช้ประโยชน์จากความสามารถในการกลับมาทำงานใหม่และการโหลดแบบขี้เกียจของ qwik ในขณะที่รวมการดำเนินการ crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่จำเป็นกับแบ็คเอนด์ที่จัดการ เมื่อสิ้นสุด คุณจะมีแอปพลิเคชันที่ทำงานได้อย่างสมบูรณ์ซึ่งแสดงให้เห็นว่าคุณจะรวมส่วนหน้าที่ทันสมัยของ qwik กับบริการแบ็คเอนด์ที่เชื่อถือได้ของ back4app ได้อย่างไร การสร้างแอปพลิเคชันแบบฟูลสแต็กอาจเป็นเรื่องท้าทายเพราะเกี่ยวข้องกับการตั้งค่าแบ็คเอนด์ การจัดการฐานข้อมูล การตรวจสอบสิทธิ์ และการปรับใช้ เพื่อทำให้การทำงานเหล่านี้ง่ายขึ้น เราใช้ back4app— https //blog back4app com/backend as a service baas/ —เพื่อให้คุณสามารถมุ่งเน้นไปที่การสร้างแอป qwik ของคุณในขณะที่มันดูแลการโฮสต์ ฐานข้อมูล และ api back4app มอบชุดบริการแบ็คเอนด์ที่ครอบคลุม รวมถึงฐานข้อมูล nosql ที่พร้อมใช้งาน การตรวจสอบสิทธิ์ cloud code สำหรับตรรกะฝั่งเซิร์ฟเวอร์ และการรวม sdk ที่ราบรื่น การสนับสนุนการปรับใช้ในรูปแบบคอนเทนเนอร์ทำให้มันเป็นตัวเลือกที่ยอดเยี่ยมสำหรับแอปพลิเคชันฟูลสแต็กสมัยใหม่ ด้วยเครื่องมือเหล่านี้อยู่ในมือคุณ คุณสามารถพัฒนาและปรับใช้แอปพลิเคชันได้อย่างรวดเร็วโดยไม่ต้องมีภาระในการจัดการโครงสร้างพื้นฐานของเซิร์ฟเวอร์ ข้อสรุปที่สำคัญ โดยการติดตามบทแนะนำนี้ คุณจะได้เรียนรู้ที่จะ เริ่มต้นโปรเจกต์ qwik สมัยใหม่ รวมบริการ backend เพื่อจัดการข้อมูลของแอปพลิเคชันของคุณ ดำเนินการ crud ที่จำเป็นสำหรับส่วนติดต่อผู้ใช้ที่โต้ตอบได้ ปรับใช้ https //todoapp ku5ofg8s b4a run/ โดยใช้กระบวนการทำงานที่บรรจุใน back4app ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้ node js และ npm ติดตั้งเวอร์ชัน lts ล่าสุดจาก https //nodejs org/ และตรวจสอบด้วย node v และ npm v ความรู้พื้นฐานเกี่ยวกับ qwik แนะนำให้มีความคุ้นเคยกับส่วนประกอบของ qwik สัญญาณ (ใช้ usesignal ), และแนวคิดการกลับคืนของมัน หากคุณเป็นมือใหม่ใน qwik ให้ตรวจสอบเอกสารของมันก่อน บัญชี back4app ลงทะเบียนที่ https //www back4app com/ เพื่อจัดตั้งและจัดการบริการ backend ของคุณ เมื่อมีข้อกำหนดเบื้องต้นเหล่านี้แล้ว คุณก็พร้อมที่จะตั้งค่าโปรเจกต์ของคุณและเริ่มสร้าง การตั้งค่าโครงการ เริ่มต้นด้วยการตั้งค่าสภาพแวดล้อมการพัฒนาท้องถิ่นของคุณและเริ่มต้นโครงการ qwik ของคุณ ยืนยันว่า node js (เวอร์ชัน lts) ได้ถูกติดตั้งแล้ว node v npm v สร้างโครงการ qwik ใหม่โดยใช้ qwik cli รันคำสั่งต่อไปนี้ npm create qwik\@latest ตอบคำถามที่ cli จะให้มา ตั้งชื่อโครงการว่า todo app หรือเปลี่ยนเป็นชื่อที่คุณต้องการ เปลี่ยนไปยังไดเรกทอรีโครงการของคุณ cd todo app เริ่มเซิร์ฟเวอร์การพัฒนาเพื่อตรวจสอบการตั้งค่าของคุณ npm start แอป qwik ของคุณควรทำงานได้ในท้องถิ่นแล้ว เปิด url ที่ให้มาในเบราว์เซอร์ของคุณเพื่อตรวจสอบ จากนั้นคุณจะตั้งค่าด้านหลังของคุณบน back4app เพื่อจัดการการจัดเก็บข้อมูลและการโต้ตอบ api การสร้างแบ็กเอนด์ todo back4app เสนอการบริการ backend ที่จัดการอย่างเต็มที่ซึ่งข powered by parse บริการนี้มีฐานข้อมูล nosql, การตรวจสอบสิทธิ์, cloud code, และ api ที่สร้างขึ้นโดยอัตโนมัติทันที ส่วนนี้จะนำคุณผ่านการสร้าง task โมเดลข้อมูลเพื่อเก็บรายการที่คุณต้องทำและเชื่อมโยงกับ frontend qwik ของคุณ การตั้งค่าแอปพลิเคชัน backend ของคุณ เข้าสู่ระบบ ไปที่ https //www back4app com/ และคลิก "สร้างแอปใหม่" ตั้งชื่อแอปพลิเคชันของคุณ (เช่น, todoqwikapp ) และเลือก nodejs/parse เป็นประเภท backend เมื่อสร้างเสร็จแล้ว ให้ไปที่ "ฐานข้อมูล" > "เบราว์เซอร์" คลิก "สร้างคลาส" และเลือก "กำหนดเอง" ตั้งชื่อคลาสว่า task และตั้งค่าการอนุญาตระดับคลาส class level permissions เพื่ออนุญาตให้มีการอ่านและเขียนสาธารณะ (คุณสามารถปรับแต่งการตั้งค่าเหล่านี้ได้ในภายหลัง) ในคลาส task ให้เพิ่มฟิลด์ต่อไปนี้ title (string) – ชื่อของงาน description (string) – รายละเอียดเกี่ยวกับงาน completed (boolean) – ระบุว่างานเสร็จสมบูรณ์หรือไม่ duedate (date) – กำหนดเวลาสำหรับงาน คลิก "บันทึก" เพื่อสรุปสคีมาของคุณ การรวม back4app กับ qwik รวม back4app เข้ากับโปรเจกต์ qwik ของคุณโดยใช้ parse javascript sdk ติดตั้ง sdk ผ่าน npm npm install parse กำหนดค่า sdk โดยการเริ่มต้นด้วย application id และ javascript key ดึงข้อมูลรับรองเหล่านี้จากแดชบอร์ด back4app ของคุณภายใต้ app settings > security & keys สร้างไฟล์การกำหนดค่า (เช่น src/lib/parse js ) และเพิ่มสิ่งต่อไปนี้ import parse from "parse/dist/parse min js"; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; export default parse; คุณสามารถนำเข้าการกำหนดค่านี้ในคอมโพเนนต์และเส้นทาง qwik ของคุณเพื่อโต้ตอบกับแบ็กเอนด์ของคุณได้แล้ว การพัฒนา frontend ด้วย qwik ตอนนี้ที่แบ็กเอนด์ของคุณเชื่อมต่อแล้ว ให้สร้างส่วนติดต่อผู้ใช้สำหรับแอปพลิเคชันรายการที่ต้องทำของคุณโดยใช้ qwik คุณจะสร้างคอมโพเนนต์เพื่อเพิ่ม แสดง อัปเดต และลบงานในขณะที่จัดการสถานะด้วยสัญญาณ qwik การจัดระเบียบคอมโพเนนต์ของคุณ แอปพลิเคชันของคุณจะรวมคอมโพเนนต์หลักต่อไปนี้ taskform tsx – คอมโพเนนต์สำหรับจัดการการเพิ่มงานใหม่ tasklist tsx – คอมโพเนนต์สำหรับแสดงงานทั้งหมดและให้การควบคุมสำหรับการทำเครื่องหมายงานว่าเสร็จสมบูรณ์หรือลบออก taskitem tsx – คอมโพเนนต์ที่แสดงถึงงานแต่ละงานพร้อมการกระทำในการสลับสถานะการเสร็จสิ้นหรือลบออก สร้าง components โฟลเดอร์ภายใน src และเพิ่มไฟล์เหล่านี้ mkdir src/components touch src/components/taskform tsx src/components/tasklist tsx src/components/taskitem tsx การจัดการสถานะด้วย qwik signals ใช้ usesignal ของ qwik สำหรับการจัดการสถานะเชิงโต้ตอบ ในหน้าแรกของคุณ (เช่น, src/routes/index tsx ) ตั้งค่าสถานะและการดึงข้อมูลดังนี้ import { component$, usesignal, usevisibletask$, $ } from '@builder io/qwik'; import parse from ' /lib/parse js'; import taskform from ' /components/taskform'; import tasklist from ' /components/tasklist'; export default component$(() => { const tasks = usesignal< { id string; createdat string; updatedat string; title string; description string; completed boolean; }\[] \>(\[]); const fetchtasks = $ ( async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); tasks value = results map(task => ({ id task id ?? '', createdat task createdat ? task createdat toisostring() '', updatedat task updatedat ? task updatedat toisostring() '', title task get('title') ?? '', description task get('description') ?? '', completed task get('completed') ?? false, })); } catch (error) { console error("error fetching tasks ", error); } }); usevisibletask$(async () => { await fetchtasks(); }); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform ontaskadded$={fetchtasks} /> \<tasklist tasks={tasks value} ontaskschange$={fetchtasks} /> \</div> ); }); การสร้างส่วนประกอบแบบฟอร์มงาน ใน src/components/taskform tsx , สร้างคอมโพเนนต์ฟอร์มเพื่อเพิ่มงาน ใช้สัญญาณเชิงปฏิกิริยาของ qwik สำหรับข้อมูลฟอร์ม import { component$, usesignal, $, qrl } from '@builder io/qwik'; import parse from ' /lib/parse js'; interface taskformprops { ontaskadded$ qrl<() => void>; } export default component$((props taskformprops) => { const title = usesignal(''); const description = usesignal(''); const handlesubmit$ = $(async (e event) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title value); task set("description", description value); task set("completed", false); await task save(); title value = ''; description value = ''; return true; } catch (error) { console error("error adding task ", error); return false; } }); return ( \<form preventdefault\ submit onsubmit$={async (event) => { const success = await handlesubmit$(event); if (success) { await props ontaskadded$(); } }} \> \<input type="text" placeholder="task title" value={title value} oninput$={(e) => title value = (e target as htmlinputelement) value} required /> \<input type="text" placeholder="description" value={description value} oninput$={(e) => description value = (e target as htmlinputelement) value} required /> \<button type="submit">add task\</button> \</form> ); }); การสร้างรายการงานและคอมโพเนนต์รายการ ใน src/components/tasklist tsx , แสดงรายการงาน import { component$ } from '@builder io/qwik'; import taskitem from ' /taskitem'; interface task { id string; title string; description string; completed boolean; } interface tasklistprops { tasks task\[]; ontaskschange$ () => void; } export default component$((props tasklistprops) => { return ( \<div> {props tasks length === 0 ? ( \<p>no tasks available\</p> ) ( props tasks map(task => ( \<taskitem key={task id} task={task} ontaskschange$={props ontaskschange$} /> )) )} \</div> ); }); ใน src/components/taskitem tsx , สร้างคอมโพเนนต์สำหรับงานแต่ละงานพร้อมการกระทำเพื่อสลับสถานะการทำเสร็จหรือลบงาน import { component$, $ } from '@builder io/qwik'; import parse from ' /lib/parse js'; interface task { id string; title string; description string; completed boolean; } interface taskitemprops { task task; ontaskschange$ () => void; } export default component$((props taskitemprops) => { const handletoggle = $(async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(props task id); tasktoupdate set("completed", !props task completed); await tasktoupdate save(); props ontaskschange$(); } catch (error) { console error("error updating task ", error); } }); const handledelete = $(async () => { try { const query = new parse query("task"); const tasktodelete = await query get(props task id); await tasktodelete destroy(); props ontaskschange$(); } catch (error) { console error("error deleting task ", error); } }); return ( \<div class={`task item ${props task completed ? "completed" ""}`}> \<h3>{props task title}\</h3> \<p>{props task description}\</p> \<button onclick$={handletoggle}> {props task completed ? "undo" "complete"} \</button> \<button onclick$={handledelete}>delete\</button> \</div> ); }); การจัดรูปแบบแอปพลิเคชันของคุณ สร้างไฟล์ src/global css เพื่อเพิ่มการจัดรูปแบบพื้นฐาน / src/global css / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } container p { font size 1rem; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } นำเข้ารูปแบบทั่วโลกในไฟล์หลักของคุณ (เช่น, src/root tsx ) import " /global css"; การทำให้ ui เสร็จสมบูรณ์ แอปพลิเคชัน qwik to do list ของคุณตอนนี้มีฟรอนต์เอนด์ที่มีพลศาสตร์ซึ่งรวมเข้ากับ back4app และการออกแบบที่กำหนดเอง แอปนี้ช่วยให้คุณสามารถเพิ่ม แสดง อัปเดต และลบงานได้ในขณะที่มั่นใจว่ามีการสื่อสารที่ราบรื่นระหว่างฟรอนต์เอนด์และแบ็กเอนด์ ถัดไป คุณจะปรับใช้แอปพลิเคชัน qwik ของคุณโดยใช้แพลตฟอร์มการปรับใช้เว็บของ back4app การปรับใช้ frontend บน back4app web deployment back4app web deployment ให้สภาพแวดล้อมที่จัดการอย่างเต็มที่และบรรจุในคอนเทนเนอร์สำหรับโฮสต์แอปพลิเคชันของคุณ ด้วยการปรับใช้ที่ใช้ docker คุณสามารถบรรจุแอป qwik ของคุณและปรับใช้ได้อย่างราบรื่น เพิ่ม express server adapter qwik ช่วยให้คุณกำหนดค่าอะแดปเตอร์การปรับใช้สำหรับเป้าหมายเฉพาะ เราจะเพิ่มอะแดปเตอร์ express เพื่อให้บริการโครงการของคุณในสภาพแวดล้อมการผลิต ติดตั้งอะแดปเตอร์ npm run qwik add จากนั้นเลือก adapter node js express server และยืนยันการติดตั้ง นี่จะอัปเดต readme ของคุณและเพิ่มสคริปต์การปรับใช้ใหม่ใน package json ของคุณ อัปเดตสคริปต์เริ่มต้น เปิด package json และเปลี่ยนสคริปต์เริ่มต้นเป็น "start" "node server/entry express" ถ้าต้องการ คุณสามารถเก็บสคริปต์การพัฒนาที่แยกต่างหากหากจำเป็น สิ่งนี้จะช่วยให้โครงการของคุณใช้ express เพื่อให้บริการการสร้างในสภาพแวดล้อมการผลิต การกำหนดค่า qwik สำหรับการผลิต สร้างเว็บไซต์ qwik ที่พร้อมสำหรับการผลิตของคุณด้วย npm run build การสร้าง dockerfile สำหรับแอปของคุณ สร้าง dockerfile ในรากของโปรเจกต์เพื่อทำให้แอป qwik ของคุณเป็นคอนเทนเนอร์ # build stage from node\ lts alpine as builder user node workdir /home/node copy package json run npm ci copy chown=node\ node run npm run build \# final run stage from node\ lts alpine as runner env node env=production user node workdir /home/node copy from=builder chown=node\ node /home/node/package json copy from=builder chown=node\ node /home/node/node modules /node modules copy from=builder chown=node\ node /home/node/dist /dist copy from=builder chown=node\ node /home/node/server /server arg port expose ${port 3000} cmd \["node", "server/entry express"] การผลักดันไปยัง github และการปรับใช้ผ่าน back4app ผลักดันโปรเจกต์ของคุณไปยัง github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main จากนั้น ปรับใช้โดยใช้ back4app web deployment เข้าสู่ระบบที่ https //www back4app com/containers คลิก "สร้างแอปใหม่" , ระบุชื่อ และเลือก github repository อนุญาตให้ back4app เข้าถึงที่เก็บของคุณและเลือกที่เก็บโปรเจกต์ qwik ของคุณ เลือก dockerfile deployment และยืนยันการตั้งค่าการสร้าง คลิก "deploy" เพื่อเริ่มกระบวนการสร้าง การตรวจสอบและการจัดการการปรับใช้ หลังจากการปรับใช้ ใช้ back4app dashboard เพื่อ ดูบันทึกสำหรับการแก้ไขปัญหา ติดตามประสิทธิภาพของคอนเทนเนอร์และการใช้ทรัพยากร กระตุ้นการปรับใช้ใหม่เมื่อมีการผลักดันการเปลี่ยนแปลงใหม่ กำหนดค่าชื่อโดเมนที่กำหนดเองหากจำเป็น การทดสอบและการแก้ไขข้อผิดพลาดในแอปพลิเคชันของคุณ เมื่อถูกใช้งานแล้ว ให้ทดสอบแอป qwik ของคุณอย่างละเอียด ตรวจสอบการเชื่อมต่อ api เปิดคอนโซลนักพัฒนาของเบราว์เซอร์ของคุณ (f12 → network) เพื่อตรวจสอบการเรียก api ในระหว่างการดำเนินการงาน เพิ่มและดึงงาน ใช้ ui เพื่อเพิ่มงาน จากนั้นรีเฟรชเพื่อยืนยันการเก็บข้อมูลใน back4app database browser ทดสอบการดำเนินการ crud ตรวจสอบให้แน่ใจว่าการทำเครื่องหมายงานว่าเสร็จสมบูรณ์และการลบสะท้อนผลอย่างถูกต้องในแบ็กเอนด์ จัดการกรณีขอบ ตรวจสอบความถูกต้องของข้อมูลที่กรอกในฟอร์มและจำลองสภาพเครือข่ายที่ช้าโดยใช้เครื่องมือสำหรับนักพัฒนา หากเกิดปัญหา ให้ตรวจสอบบันทึกของ back4app หรือเช็คการตั้งค่า api ของคุณอีกครั้ง แนวทางปฏิบัติที่ดีที่สุดในการใช้บริการ back4app ปรับปรุงประสิทธิภาพและความปลอดภัยของแอปพลิเคชันของคุณโดย ปรับแต่งการเรียก api ใช้คำขอแบบกลุ่มสำหรับการดำเนินการหลายรายการและสอบถามเฉพาะฟิลด์ที่จำเป็น รักษาข้อมูลที่ละเอียดอ่อน เก็บข้อมูลรับรองเช่น application id และ javascript key ในตัวแปรสภาพแวดล้อม ใน qwik ให้สร้างไฟล์ env vite parse app id=your app id vite parse js key=your js key การเปิดใช้งาน auto scaling เปิดใช้งานการปรับขนาดอัตโนมัติใน back4app web deployment เพื่อจัดการกับการเข้าชมที่สูง การเพิ่มความปลอดภัย จำกัดสิทธิ์ระดับคลาส (clps) เพื่อควบคุมการแก้ไขข้อมูลและตั้งค่า acl ตามที่ต้องการ การใช้ cloud code โอนภาระงานที่ซับซ้อนไปยัง cloud code เพื่อปรับปรุงประสิทธิภาพและลดการเปิดเผย api บทสรุป คุณได้สร้างแอปพลิเคชัน to do list แบบฟูลสแต็กโดยใช้ qwik สำหรับส่วนหน้าและบริการแบ็คเอนด์ที่แข็งแกร่งของ back4app บทแนะนำนี้ได้แนะนำคุณในการตั้งค่าโปรเจกต์ qwik การรวม parse sdk และการปรับใช้ไซต์ของคุณโดยใช้เวิร์กโฟลว์ที่บรรจุใน back4app เมื่อคุณพัฒนาต่อไป ให้พิจารณาเพิ่มฟีเจอร์เช่นการตรวจสอบสิทธิ์ผู้ใช้ขั้นสูง การอัปเดตแบบเรียลไทม์ และการรวมกับบุคคลที่สาม สำหรับข้อมูลเพิ่มเติมและการสนับสนุน โปรดดูที่ https //www back4app com/docs