สร้างแอปการขายบัตรด้วย Next.js, Vercel และ Back4App

ในบทช่วยสอนนี้ เราจะสร้าง ระบบการจองตั๋ว โดยใช้ next js กับแอปเราท์เตอร์, back4app เป็นบริการแบ็กเอนด์, และ tailwind css สำหรับการจัดรูปแบบ แอปนี้อนุญาตให้ผู้ใช้สร้าง, อัปเดต, ดู, และลบตั๋ว ขณะเดียวกันก็ใช้ parse server บน back4app สำหรับการจัดการฐานข้อมูล 1\ ข้อกำหนดเบื้องต้น ก่อนเริ่มต้น ให้แน่ใจว่าคุณมี node js ติดตั้งบนเครื่องของคุณ ( คู่มือการติดตั้ง node js https //nodejs org/ ) บัญชี back4app ( ลงทะเบียนฟรี https //www back4app com/ ) บัญชี vercel สำหรับการปรับใช้ ( ลงทะเบียนสำหรับ vercel https //vercel com/ ) 2\ การตั้งค่า back4app เข้าสู่ระบบแดชบอร์ด back4app ของคุณและสร้างโปรเจกต์ใหม่ ไปที่ data browser และสร้างคลาสใหม่ชื่อ ticket ด้วยสคีมาดังต่อไปนี้ ชื่อฟิลด์ ประเภท ชื่อเรื่อง สตริง คำอธิบาย สตริง หมวดหมู่ สตริง ลำดับความสำคัญ หมายเลข ความก้าวหน้า หมายเลข สถานะ สตริง สร้างเมื่อ วันที่ (สร้างโดยอัตโนมัติ) อัปเดตเมื่อ วันที่ (สร้างโดยอัตโนมัติ) 3\ การตั้งค่า frontend (next js) 3 1 สร้างโปรเจกต์ next js ใหม่ เรียกใช้คำสั่งต่อไปนี้เพื่อสร้างโปรเจกต์ next js ใหม่ npx create next app\@latest ticketing app cd ticketing app 3 2 ติดตั้ง dependencies ติดตั้ง tailwind css , font awesome , และ parse sdk สำหรับการดำเนินการด้านหลัง npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome free parse npx tailwindcss init p 3 3 ตั้งค่า tailwind css แก้ไขไฟล์ tailwind config js เพื่อกำหนดเส้นทางเนื้อหาของ tailwind css module exports = { content \[ ' /app/ / {js,ts,jsx,tsx}', ' /components/ / {js,ts,jsx,tsx}', ], theme { extend {}, }, plugins \[], } ใน styles/globals css , เพิ่มการนำเข้า tailwind @tailwind base; @tailwind components; @tailwind utilities; 3 4 สร้างโครงสร้างโปรเจกต์ ตามโครงสร้างที่ให้มา สร้างไดเรกทอรีและคอมโพเนนต์ที่จำเป็น โครงสร้างไดเรกทอรี /app /tickets /\[id] page js layout js page js /components deleteblock jsx nav jsx prioritydisplay jsx progressdisplay jsx statusdisplay jsx ticketcard jsx ticketform jsx /lib parseclient js 4\ การตั้งค่า parse client ใน /lib โฟลเดอร์ ให้สร้าง parseclient js ไฟล์เพื่อกำหนดค่า parse sdk import parse from 'parse'; // initialize parse sdk parse initialize('your app id', 'your js key'); parse serverurl = 'https //parseapi back4app com'; export default parse; แทนที่ 'your app id' และ 'your js key' ด้วยข้อมูลประจำตัวโปรเจกต์ back4app ของคุณ 5\ การสร้างคอมโพเนนต์หลัก 5 1 ticketform คอมโพเนนต์นี้จะจัดการทั้ง การสร้าง และ การอัปเดต ตั๋ว ใน /components/ticketform jsx , สร้างสิ่งต่อไปนี้ import { usestate } from 'react'; import parse from ' /lib/parseclient'; export default function ticketform({ ticket }) { const \[title, settitle] = usestate(ticket? title || ''); const \[description, setdescription] = usestate(ticket? description || ''); const handlesubmit = async (e) => { e preventdefault(); const ticket = parse object extend('ticket'); const newticket = ticket || new ticket(); newticket set('title', title); newticket set('description', description); try { await newticket save(); alert('ticket saved successfully!'); } catch (error) { console error('error saving ticket ', error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" value={title} onchange={(e) => settitle(e target value)} placeholder="title" required /> \<textarea value={description} onchange={(e) => setdescription(e target value)} placeholder="description" required /> \<button type="submit">save ticket\</button> \</form> ); } 5 2 ticketcard ส่วนประกอบนี้จะแสดงข้อมูลตั๋วแต่ละใบ ใน /components/ticketcard jsx import link from 'next/link'; import progressdisplay from ' /progressdisplay'; export default function ticketcard({ ticket }) { return ( \<div classname="border p 4"> \<h2>{ticket title}\</h2> \<p>{ticket description}\</p> \<progressdisplay progress={ticket progress} /> \<link href={`/tickets/${ticket objectid}`}>edit\</link> \</div> ); } 5 3 ลบบล็อก ส่วนประกอบการยืนยันสำหรับการลบตั๋ว ใน /components/deleteblock jsx import parse from ' /lib/parseclient'; export default function deleteblock({ ticketid, ondelete }) { const handledelete = async () => { const query = new parse query('ticket'); const ticket = await query get(ticketid); try { await ticket destroy(); alert('ticket deleted successfully'); ondelete(); } catch (error) { console error('error deleting ticket ', error); } }; return ( \<button onclick={handledelete}>delete ticket\</button> ); } 5 4 แสดงความก้าวหน้า ส่วนประกอบนี้จะแสดงความก้าวหน้าเป็นแถบเปอร์เซ็นต์ ใน /components/progressdisplay jsx export default function progressdisplay({ progress }) { return ( \<div> \<div classname="w full bg gray 200 rounded"> \<div classname="bg blue 600 text xs font medium text blue 100 text center p 0 5 leading none rounded" style={{ width `${progress}%` }} \> {progress}% \</div> \</div> \</div> ); } 5 4 แสดงความก้าวหน้า 6\ หน้าและการนำทาง 6 1 รายการตั๋ว ใน /app/page js , แสดงรายการตั๋ว import { useeffect, usestate } from 'react'; import parse from ' /lib/parseclient'; import ticketcard from ' /components/ticketcard'; export default function home() { const \[tickets, settickets] = usestate(\[]); useeffect(() => { const fetchtickets = async () => { const query = new parse query('ticket'); const results = await query find(); settickets(results); }; fetchtickets(); }, \[]); return ( \<div> \<h1>tickets\</h1> {tickets map(ticket => ( \<ticketcard key={ticket id} ticket={ticket} /> ))} \</div> ); } 6 2 รายละเอียดตั๋วและแก้ไข ใน /app/tickets/\[id]/page js import { useeffect, usestate } from 'react'; import { userouter } from 'next/router'; import parse from ' / / /lib/parseclient'; import ticketform from ' / / /components/ticketform'; import deleteblock from ' / / /components/deleteblock'; export default function ticketdetail() { const router = userouter(); const { id } = router query; const \[ticket, setticket] = usestate(null); useeffect(() => { if (!id) return; const fetchticket = async () => { const query = new parse query('ticket'); const result = await query get(id); setticket(result); }; fetchticket(); }, \[id]); const handledelete = () => { router push('/'); }; if (!ticket) return \<div>loading \</div>; return ( \<div> \<ticketform ticket={ticket} /> \<deleteblock ticketid={ticket id} ondelete={handledelete} /> \</div> ); } 7\ การปรับใช้กับ vercel 7 1 สร้างบัญชี vercel หากคุณยังไม่มีบัญชี vercel ให้ไปที่ vercel com https //vercel com/ และสร้างบัญชี คุณสามารถลงทะเบียนด้วย github, gitlab หรือ bitbucket vercel ทำให้การเชื่อมโยงที่เก็บของคุณโดยตรงสำหรับการปรับใช้ง่ายขึ้น 7 2 ดันโค้ดของคุณไปยัง github ในการติดตั้งแอปของคุณบน vercel คุณต้องมีโปรเจกต์ของคุณที่โฮสต์บนแพลตฟอร์มควบคุมเวอร์ชัน เช่น github (หรือ gitlab/bitbucket) หากโปรเจกต์ของคุณยังไม่ได้อยู่บน github ให้ทำตามขั้นตอนเหล่านี้ เริ่มต้น git ในไดเรกทอรีโปรเจกต์ของคุณ เพิ่มโปรเจกต์ของคุณไปยัง github 7 3 ติดตั้ง vercel cli (ไม่บังคับ) หากคุณต้องการติดตั้งโดยตรงจากบรรทัดคำสั่ง ให้ติดตั้ง vercel cli ทั่วโลก อีกทางเลือกหนึ่ง คุณสามารถติดตั้งผ่านแดชบอร์ดของ vercel ซึ่งเราจะพูดถึงในตอนถัดไป 7 4 เชื่อมต่อที่เก็บ github ของคุณกับ vercel ไปที่ vercel https //vercel com/ คลิก โครงการใหม่ เลือกที่เก็บ git ที่มีโครงการ next js ของคุณ กำหนดค่าโครงการของคุณ vercel จะตรวจจับโดยอัตโนมัติว่ามันเป็น next js โครงการและใช้การตั้งค่าการสร้างที่ถูกต้อง ตั้งค่า ไดเรกทอรีหลัก เป็นโฟลเดอร์ของโครงการ (ถ้าจำเป็น) 7 5 ตั้งค่าตัวแปรสภาพแวดล้อม คุณจะต้องกำหนดค่าข้อมูลรับรอง back4app และตัวแปรสภาพแวดล้อมอื่น ๆ ใน vercel ใน การตั้งค่าโครงการ , ไปที่ ตัวแปรสภาพแวดล้อม ส่วน เพิ่มตัวแปรสภาพแวดล้อมต่อไปนี้ 7 6 ตั้งค่าการกำหนดค่า parse ใน env local (ไม่บังคับ) หากคุณใช้ตัวแปรสภาพแวดล้อมในท้องถิ่นระหว่างการพัฒนา ให้แน่ใจว่าคุณได้สร้างไฟล์ env local ในไดเรกทอรีโครงการหลักของคุณพร้อมกับตัวแปรต่อไปนี้ ตัวแปรสภาพแวดล้อมเหล่านี้จะถูกใช้โดย vercel เมื่อถูกตั้งค่าในแดชบอร์ดของ vercel 7 7 กำหนดค่าการตั้งค่าการสร้าง (ไม่บังคับ) ตรวจสอบให้แน่ใจว่า เวอร์ชัน node js และ คำสั่งสร้าง ถูกกำหนดค่าอย่างถูกต้อง (vercel จะตรวจจับโดยอัตโนมัติ) สำหรับ แอป next js การตั้งค่าเริ่มต้นควรเป็น คำสั่งสร้าง npm run build ไดเรกทอรีผลลัพธ์ next/ 7 8 ปรับใช้โครงการ หลังจากที่คุณเชื่อมโยงที่เก็บ github ของคุณ vercel จะเริ่มกระบวนการสร้างและปรับใช้โดยอัตโนมัติ คุณสามารถดูสถานะของการสร้างในแดชบอร์ด vercel 7 9 ตรวจสอบบันทึกการปรับใช้ หากมีปัญหาเกิดขึ้นระหว่างการปรับใช้ คุณสามารถตรวจสอบบันทึกการปรับใช้เพื่อแก้ไขปัญหาได้ 7 10 เข้าถึงแอปที่ปรับใช้ของคุณ เมื่อการปรับใช้สำเร็จ vercel จะให้ url ที่ไม่ซ้ำกันซึ่งแอป next js ของคุณออนไลน์ คุณสามารถเยี่ยมชม url เพื่อเข้าถึงแอป ticketing ที่ปรับใช้ของคุณ ตัวอย่างเช่น https //your app name vercel app/ 8\ การรับประกันการปรับใช้ที่ราบรื่น ข้อมูลประจำตัว back4app ตรวจสอบให้แน่ใจว่าตัวแปรสภาพแวดล้อม back4app ของคุณถูกตั้งค่าอย่างถูกต้องในทั้ง env local (สำหรับการพัฒนาในเครื่อง) และแดชบอร์ด vercel (สำหรับการผลิต) cors (การแชร์ทรัพยากรข้ามต้นทาง) ตรวจสอบให้แน่ใจว่า back4app อนุญาต url ของ vercel ของคุณในการตั้งค่า cors ซึ่งคุณสามารถกำหนดค่าได้ในแดชบอร์ด back4app ภายใต้ ความปลอดภัย ทดสอบ api ของคุณ ก่อนที่จะปรับใช้ ให้ทดสอบการโต้ตอบ api ของ back4app ในเครื่องเพื่อให้แน่ใจว่าทุกอย่างทำงานได้อย่างราบรื่น 9\ สรุป ด้วยขั้นตอนเหล่านี้ แอป next js ticketing app ของคุณควรจะถูกปรับใช้บน vercel , โดยใช้ back4app สำหรับแบ็กเอนด์ นี่คือการเสร็จสิ้นวงจรการพัฒนาทั้งหมด ตั้งแต่การตั้งค่า back4app การสร้างส่วนหน้าใน next js จนถึงการปรับใช้แอปออนไลน์บน vercel หากคุณต้องการทำการอัปเดต เพียงแค่ผลักดันการเปลี่ยนแปลงไปยังที่เก็บ github ของคุณ และ vercel จะเริ่มการปรับใช้ใหม่โดยอัตโนมัติ