How to Build a Blitz.js Frontend and Connect It to a Backend?

ในคู่มือนี้ คุณจะสร้างแอปพลิเคชัน to do list โดยใช้ blitz js และเชื่อมต่อกับแบ็กเอนด์ที่จัดการโดย back4app บทเรียนทีละขั้นตอนนี้ออกแบบมาเพื่อช่วยให้คุณดำเนินการ crud ที่จำเป็นและสร้างส่วนติดต่อผู้ใช้ที่มีพลศาสตร์โดยใช้ blitz js การสร้างแอปพลิเคชันแบบฟูลสแต็กอาจซับซ้อนหากคุณต้องจัดการทั้งระบบฟรอนต์เอนด์และแบ็กเอนด์ โดยการใช้ back4app คุณสามารถทำให้การจัดการแบ็กเอนด์ง่ายขึ้นผ่าน baas ที่สามารถปรับขนาดได้ , ทำให้คุณสามารถมุ่งเน้นไปที่การสร้างส่วนติดต่อ blitz js ที่น่าสนใจ back4app มีชุดบริการแบ็กเอนด์ รวมถึงฐานข้อมูล nosql ที่พร้อมใช้งาน การตรวจสอบสิทธิ์ ฟังก์ชันคลาวด์ และ api endpoints ฟีเจอร์เหล่านี้ช่วยให้คุณพัฒนาและปรับใช้แอปพลิเคชันของคุณได้อย่างรวดเร็วโดยไม่ต้องรับภาระการบำรุงรักษาเซิร์ฟเวอร์ ข้อสรุปที่สำคัญ เมื่อสิ้นสุดบทเรียนนี้ คุณจะสามารถ ตั้งค่าโปรเจกต์ blitz js ที่ทันสมัยโดยใช้เครื่องมือมาตรฐานในอุตสาหกรรม รวมแบ็กเอนด์ back4app กับแอปพลิเคชัน blitz js ของคุณโดยใช้ parse sdk ดำเนินการ crud เพื่อจัดการกับ to do list บรรจุและปรับใช้แอปพลิเคชัน blitz js ของคุณโดยใช้การปรับใช้เว็บของ back4app ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้ node js และ npm ติดตั้งบนเครื่องของคุณ ตรวจสอบการติดตั้งด้วย node v และ npm v ในเทอร์มินัลของคุณ ความรู้พื้นฐานเกี่ยวกับ blitz js , รวมถึงการจัดการเส้นทาง คำถาม และการเปลี่ยนแปลง ความคุ้นเคยกับ react จะเป็นประโยชน์เนื่องจาก blitz js สร้างขึ้นจากมัน บัญชี back4app สำหรับการกำหนดค่าและจัดการบริการแบ็กเอนด์ของคุณ ลงทะเบียนที่ back4app https //www back4app com/ หากคุณยังไม่ได้ทำ เมื่อคุณมีข้อกำหนดเบื้องต้นเหล่านี้แล้ว คุณก็พร้อมที่จะเริ่มต้นโปรเจกต์ blitz js ของคุณและรวมเข้ากับแบ็กเอนด์ที่แข็งแกร่ง การตั้งค่าโปรเจกต์ เริ่มต้นด้วยการตั้งค่าแอปพลิเคชัน blitz js ของคุณ blitz js มอบประสบการณ์การพัฒนาที่ราบรื่นโดยการรวมพลังของ next js กับเฟรมเวิร์กแบบเต็มสแตก รันคำสั่งต่อไปนี้เพื่อสร้างโปรเจกต์ blitz js ใหม่ เปลี่ยน todo app เป็นชื่อโปรเจกต์ที่คุณเลือก npx blitz new todo app ไปที่ไดเรกทอรีโปรเจกต์ของคุณ cd todo app รันเซิร์ฟเวอร์พัฒนาเพื่อยืนยันว่าทุกอย่างตั้งค่าอย่างถูกต้อง npm run dev ไปที่ url ที่แสดงในเทอร์มินัลของคุณเพื่อยืนยันว่าแอป blitz js ของคุณกำลังทำงานอยู่ การตั้งค่าพื้นหลัง todo บน back4app back4app มีพื้นหลัง parse ที่จัดการได้ซึ่งทำให้การจัดการข้อมูลสำหรับแอปพลิเคชันของคุณง่ายขึ้น ในส่วนนี้ คุณจะสร้างโมเดลข้อมูลเพื่อเก็บงานสำหรับรายการที่ต้องทำของคุณ การสร้างแอปพลิเคชันพื้นหลังของคุณ เข้าสู่ระบบที่ แดชบอร์ด back4app https //www back4app com/ และคลิก "สร้างแอปใหม่ " ระบุชื่อสำหรับแอปพลิเคชันของคุณ (เช่น, todoblitzapp ) และเลือก nodejs/parse เป็นประเภทพื้นหลัง ใน "ฐานข้อมูล" > "เบราว์เซอร์" ให้คลิก "สร้างคลาส" และเลือก "กำหนดเอง " ตั้งชื่อคลาสว่า task และตั้งค่าการอนุญาตระดับคลาสให้อนุญาตการอ่านและเขียนสาธารณะ (คุณสามารถปรับการตั้งค่าเหล่านี้ได้ในภายหลัง) เพิ่มฟิลด์ต่อไปนี้ใน task คลาส title (string) – ชื่อของงาน description (string) – รายละเอียดเกี่ยวกับงาน completed (boolean) – ว่างานเสร็จสิ้นหรือไม่ duedate (date) – กำหนดเวลาสำหรับงาน คลิก "บันทึก" เพื่อสร้างสคีมา การรวม back4app กับ blitz js เพื่อเชื่อมต่อแอป blitz js ของคุณกับ back4app ให้ติดตั้ง parse javascript sdk npm install parse ถัดไป ให้กำหนดค่า parse sdk ในโปรเจกต์ blitz js ของคุณ สร้างไฟล์การกำหนดค่าใหม่ (เช่น, src/parseclient js ) และเริ่มต้น parse ตามที่แสดงด้านล่าง เปลี่ยนข้อมูลที่เป็นตัวแทนด้วยข้อมูลรับรอง back4app ของคุณจาก app settings > security & keys // src/parseclient 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; คุณสามารถนำเข้าการตั้งค่านี้ในคำถามและการเปลี่ยนแปลงของ blitz js ของคุณเพื่อโต้ตอบกับแบ็กเอนด์ของคุณได้แล้ว การสร้างส่วนหน้าด้วย blitz js เมื่อแบ็กเอนด์ถูกตั้งค่าแล้ว ถึงเวลาที่จะสร้างอินเทอร์เฟซรายการที่ต้องทำใน blitz js คุณจะใช้คำถามและการเปลี่ยนแปลงที่มีอยู่ใน blitz js เพื่อดำเนินการ crud การจัดโครงสร้างหน้าและการเรียก api ของคุณ ใน blitz js, หน้าเพจจะอยู่ภายใต้ src/pages ไดเรกทอรี เปิด src/pages/index tsx และเพิ่มโค้ดต่อไปนี้เพื่อจัดตั้งหน้าเพจ, คิวรีงานจาก back4app, และกำหนดการเปลี่ยนแปลงสำหรับการเพิ่ม, สลับ, และลบงาน // src/pages/index tsx import layout from "src/core/layouts/layout" import { blitzpage } from "@blitzjs/next" import { usequery } from "@tanstack/react query" import parse from " /parseclient" import { usestate } from "react" const fetchtasks = async () => { const task = parse object extend("task") const query = new parse query(task) const results = await query find() return results map((task) => ({ id task id, task tojson() })) } const addtask = async (title string, description string) => { const task = parse object extend("task") const task = new task() task set("title", title) task set("description", description) task set("completed", false) await task save() } const toggletask = async (id string, currentstatus boolean) => { const task = parse object extend("task") const query = new parse query(task) const task = await query get(id) task set("completed", !currentstatus) await task save() } const deletetask = async (id string) => { const task = parse object extend("task") const query = new parse query(task) const task = await query get(id) await task destroy() } const home blitzpage = () => { const { data tasks, refetch, isloading } = usequery(\["tasks"], fetchtasks) const \[title, settitle] = usestate("") const \[description, setdescription] = usestate("") if (isloading) return \<div>loading \</div> return ( \<layout title="home"> \<div classname="container"> \<h1>to do list\</h1> \<form onsubmit={async (e) => { e preventdefault() await addtask(title, description) settitle("") setdescription("") await refetch() }} classname="form" \> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> \<div classname="tasks"> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<div key={task id} classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={async () => { await toggletask(task id, task completed) await refetch() }} \> {task completed ? "undo" "complete"} \</button> \<button onclick={async () => { await deletetask(task id) await refetch() }} \> delete \</button> \</div> )) )} \</div> \</div> \</layout> ) } export default home หน้านี้ใช้ hooks ของ tanstack เพื่อดึงข้อมูลงานและจัดการการกระทำของผู้ใช้ เพื่อให้การรวมเข้ากับ back4app backend ของคุณเป็นไปอย่างราบรื่น เพื่อให้ usequery ทำงานได้ คุณต้องห่อหุ้มแอปพลิเคชันทั้งหมดของคุณใน queryclientprovider คุณทำสิ่งนี้ใน src/pages/ app tsx ไฟล์ แทนที่โค้ดใน src/pages/ app tsx ไฟล์ด้วยบล็อกโค้ดด้านล่าง // src/pages/ app tsx import { errorfallbackprops, errorcomponent, errorboundary, appprops } from "@blitzjs/next" import react from "react" import { withblitz } from "src/blitz client" import { queryclient, queryclientprovider } from "@tanstack/react query" const queryclient = new queryclient() function rooterrorfallback({ error } errorfallbackprops) { return ( \<errorcomponent statuscode={(error as any)? statuscode || 400} title={error message || error name} /> ) } function myapp({ component, pageprops } appprops) { const getlayout = component getlayout || ((page) => page) return ( \<queryclientprovider client={queryclient}> \<errorboundary fallbackcomponent={rooterrorfallback}> {getlayout(\<component { pageprops} />)} \</errorboundary> \</queryclientprovider> ) } export default withblitz(myapp) การเพิ่มสไตล์ทั่วโลก เพื่อกำหนดสไตล์พื้นฐานของแอปของคุณ ให้เพิ่มบล็อกโค้ดไปยังไฟล์ css ที่ src/styles/globals css / src/styles/globals 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; 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; } tasks p { font size 1rem; } task item { display flex; flex direction column; align items 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/pages/ app tsx (หรือไฟล์คอมโพเนนต์ app ที่กำหนดเองของคุณ) / src/pages/ app tsx / import " /styles/globals css"; แอป blitz js ของคุณตอนนี้แสดงผลอินเทอร์เฟซ to do list ที่ใช้งานได้อย่างสมบูรณ์ซึ่งรวมเข้ากับ back4app การทำให้แอป blitz js ของคุณเป็นคอนเทนเนอร์และการปรับใช้บน back4app การปรับใช้เว็บ back4app ให้สภาพแวดล้อมที่เป็นคอนเทนเนอร์ซึ่งทำให้กระบวนการปรับใช้ง่ายขึ้น คุณจะบรรจุแอป blitz js ของคุณลงในคอนเทนเนอร์ docker และปรับใช้ได้อย่างราบรื่น การเตรียมแอป blitz js ของคุณสำหรับการผลิต ก่อนอื่น สร้างแอปพลิเคชัน blitz js ของคุณสำหรับการผลิต blitz build การสร้าง dockerfile สร้าง dockerfile ในไดเรกทอรีหลักของโปรเจกต์ของคุณด้วยเนื้อหาดังต่อไปนี้ from node 18 arg database url arg port=3000 env database url ${database url} workdir /usr/src/app copy package json / run npm install run npm install g blitz copy run blitz build expose 3000 cmd \["blitz", "start", " p", "3000"] dockerfile นี้จะสร้างโปรเจกต์ blitz js ของคุณและเตรียมภาพการผลิตโดยใช้ node js runtime ที่มีน้ำหนักเบา หลังจากสร้าง dockerfile ของคุณแล้ว ให้สร้าง dockerignore ไฟล์และคัดลอกและวางไฟล์ gitignore ของคุณ การสร้างและทดสอบ docker container ของคุณ สร้างภาพ docker ในเครื่อง docker build t todo blitz frontend เรียกใช้คอนเทนเนอร์เพื่อลองทดสอบมัน docker run p 3000 3000 todo blitz frontend เยี่ยมชม http //localhost 3000 ในเบราว์เซอร์ของคุณเพื่อตรวจสอบว่าแอป blitz js ของคุณทำงานถูกต้อง การปรับใช้แอปของคุณผ่าน back4app web deployment ผลักดันโปรเจกต์ของคุณไปยัง 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 เลือก todo blitz repository เลือก dockerfile deployment และตรวจสอบการตั้งค่าการสร้าง คลิก "ปรับใช้" เพื่อเริ่มกระบวนการปรับใช้ เมื่อปรับใช้แล้ว ใช้ back4app dashboard เพื่อตรวจสอบบันทึก จัดการการสร้าง และตั้งค่าชื่อโดเมนที่กำหนดเองหากจำเป็น การทดสอบและการดีบักแอปพลิเคชันของคุณ หลังจากการปรับใช้ ให้แน่ใจว่าแอปของคุณทำงานตามที่คาดหวังโดย ตรวจสอบการเชื่อมต่อ api ใช้เครื่องมือพัฒนาในเบราว์เซอร์ของคุณเพื่อตรวจสอบว่าคำขอ api สำหรับการเพิ่ม การสลับ และการลบงานประสบความสำเร็จหรือไม่ ตรวจสอบความคงอยู่ของข้อมูล เพิ่มงานผ่าน ui และรีเฟรชหน้าเพื่อยืนยันว่าพวกเขาถูกบันทึกในฐานข้อมูล back4app ทดสอบการดำเนินการ crud ยืนยันว่าสามารถสลับและลบงานได้ และตรวจสอบบันทึกคอนโซลสำหรับข้อผิดพลาดใด ๆ จัดการกรณีขอบ ลองส่งข้อมูลที่ไม่ถูกต้องเพื่อตรวจสอบความแข็งแกร่งของการตรวจสอบของคุณ แนวทางปฏิบัติที่ดีที่สุดและเคล็ดลับการเพิ่มประสิทธิภาพ พิจารณาคำแนะนำต่อไปนี้สำหรับแอปพลิเคชันที่ปลอดภัยและมีประสิทธิภาพ เพิ่มประสิทธิภาพคำขอ api ใช้การประมวลผลแบบกลุ่มและจำกัดฟิลด์ที่ค้นหาเพื่อลดภาระเครือข่าย รักษาตัวแปรสภาพแวดล้อมให้ปลอดภัย เก็บข้อมูลรับรองที่ละเอียดอ่อน (application id และ javascript key) ไว้ใน env ไฟล์ที่ปลอดภัย ดำเนินการควบคุมการเข้าถึง ใช้ acl แบบไดนามิกเพื่อให้แน่ใจว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถแก้ไขข้อมูลได้ ใช้ประโยชน์จาก cloud code โอนภาระงานที่ซับซ้อนไปยัง back4app cloud code เพื่อเพิ่มประสิทธิภาพและความปลอดภัย บทสรุป คุณได้สร้างแอปพลิเคชัน to do list แบบฟูลสแต็กโดยใช้ blitz js ที่รวมเข้ากับ back4app backend แล้ว บทแนะนำนี้ได้แนะนำคุณเกี่ยวกับการเริ่มต้นโครงการ การรวม backend และการปรับใช้ในรูปแบบคอนเทนเนอร์ เมื่อคุณก้าวไปข้างหน้า ให้พิจารณาขยายแอปของคุณด้วยฟีเจอร์เช่นการจัดการผู้ใช้ขั้นสูง การอัปเดตแบบเรียลไทม์ และการรวมกับบุคคลที่สาม สำหรับข้อมูลเพิ่มเติม ให้สำรวจ เอกสาร back4app https //www back4app com/docs และทรัพยากร blitz js