คู่มือการจองห้องประชุมด้วย Back4App, Next.js และ Vercel

ในบทแนะนำนี้ คุณจะสร้าง bookit , ระบบการจองห้องประชุมโดยใช้ next js เป็นเฟรมเวิร์กด้านหน้าและ back4app เป็นบริการด้านหลัง คุณจะดำเนินการตรวจสอบสิทธิ์ผู้ใช้ การจัดการห้อง และฟังก์ชันการจอง และนำแอปไปใช้งานบน vercel 1 ข้อกำหนดเบื้องต้น ในการทำตามบทแนะนำนี้ คุณจะต้องมี บัญชี back4app (ลงทะเบียนที่ back4app https //www back4app com/ ) โครงการ back4app (ทำตาม คู่มือนี้ https //www back4app com/docs/get started/welcome ) ติดตั้ง node js บนเครื่องของคุณ ( คู่มือการติดตั้ง https //nodejs org/ ) ความรู้พื้นฐานเกี่ยวกับ javascript, next js และ rest apis (หากจำเป็น ดูที่ พื้นฐาน javascript https //www back4app com/docs/javascript guide ) 2 การตั้งค่า back4app เข้าสู่ระบบบัญชี back4app ของคุณและไปที่แดชบอร์ดโครงการของคุณ ในแถบด้านซ้าย คลิก ฐานข้อมูล เพื่อเข้าถึง data browser คุณจะต้องสร้างคลาสต่อไปนี้เพื่อจำลองข้อมูล 2 1 สร้าง คลาสผู้ใช้ โดยค่าเริ่มต้น parse จะจัดการการตรวจสอบสิทธิ์ผู้ใช้ ดังนั้นจึงไม่จำเป็นต้องสร้างคลาสนี้ด้วยตนเอง parse จะจัดการฟิลด์ต่อไปนี้ให้คุณโดยอัตโนมัติ อีเมล ที่อยู่ อีเมล สำหรับการเข้าสู่ระบบ รหัสผ่าน รหัสผ่าน (เข้ารหัส) ชื่อผู้ใช้ ชื่อผู้ใช้ (ไม่บังคับ) 2 2 สร้าง ห้อง คลาส ใน data browser , คลิก create a class , เลือก custom , และตั้งชื่อคลาสว่า room เพิ่มคอลัมน์ต่อไปนี้ ชื่อคอลัมน์ ประเภท คำอธิบาย ชื่อ สตริง ชื่อห้อง คำอธิบาย สตริง คำอธิบายห้อง ความจุ หมายเลข จำนวนคนที่ห้องสามารถรองรับได้ สิ่งอำนวยความสะดวก อาเรย์ รายการสิ่งอำนวยความสะดวก (ทีวี, wifi, ฯลฯ) ราคา หมายเลข ราคาต่อชั่วโมง ภาพ ไฟล์ url รูปภาพ เจ้าของ ตัวชี้ ชี้ไปที่ ผู้ใช้ คลาส 2 3 สร้าง booking คลาส สร้างคลาสที่กำหนดเองอีกอันชื่อ booking เพิ่มคอลัมน์ต่อไปนี้ ชื่อคอลัมน์ ประเภท คำอธิบาย ห้อง ตัวชี้ ชี้ไปที่ คลาสห้อง ผู้ใช้ ตัวชี้ ชี้ไปที่ คลาสผู้ใช้ เช็คอิน วันที่ วัน/เวลาที่เริ่มต้นการจอง เช็คเอาท์ วันที่ วัน/เวลาที่สิ้นสุดการจอง 3 การตั้งค่า next js และ parse sdk สร้างโปรเจกต์ next js ใหม่ npx create next app bookit app cd bookit app ติดตั้ง parse js sdk npm install parse ใน pages/ app js ไฟล์ ให้เริ่มต้น parse ด้วยข้อมูลรับรอง back4app ของคุณ import parse from 'parse'; parse initialize('your app id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; function myapp({ component, pageprops }) { return \<component { pageprops} /> } export default myapp; แทนที่ 'your app id' และ 'your javascript key' ด้วยข้อมูลรับรองแอป back4app ของคุณ 4 การดำเนินการรับรองผู้ใช้ 4 1 การลงทะเบียนผู้ใช้ สร้างหน้าใหม่ pages/signup js พร้อมแบบฟอร์มการลงทะเบียน import { usestate } from 'react'; import parse from 'parse'; export default function signup() { const \[email, setemail] = usestate(''); const \[password, setpassword] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', email); user set('email', email); user set('password', password); try { await user signup(); alert('signup successful!'); } catch (error) { alert('error ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="email" value={email} onchange={(e) => setemail(e target value)} placeholder="email" /> \<input type="password" value={password} onchange={(e) => setpassword(e target value)} placeholder="password" /> \<button type="submit">sign up\</button> \</form> ); } 4 2 การเข้าสู่ระบบผู้ใช้ สร้าง pages/login js สำหรับการเข้าสู่ระบบของผู้ใช้ import { usestate } from 'react'; import parse from 'parse'; export default function login() { const \[email, setemail] = usestate(''); const \[password, setpassword] = usestate(''); const handlelogin = async (e) => { e preventdefault(); try { await parse user login(email, password); alert('login successful!'); } catch (error) { alert('error ' + error message); } }; return ( \<form onsubmit={handlelogin}> \<input type="email" value={email} onchange={(e) => setemail(e target value)} placeholder="email" /> \<input type="password" value={password} onchange={(e) => setpassword(e target value)} placeholder="password" /> \<button type="submit">login\</button> \</form> ); } 4 3 เส้นทางที่ได้รับการป้องกัน สำหรับเส้นทางที่ได้รับการป้องกัน คุณสามารถใช้เส้นทาง api ของ next js และตรวจสอบว่าผู้ใช้ได้รับการตรวจสอบสิทธิ์หรือไม่ import parse from 'parse'; export default async function handler(req, res) { const user = parse user current(); if (!user) { return res status(401) json({ message 'unauthorized' }); } // proceed with the request } 5 การจัดการห้อง 5 1 การแสดงห้องที่ว่าง สร้าง pages/index js เพื่อแสดงรายการห้องที่ว่าง import { useeffect, usestate } from 'react'; import parse from 'parse'; export default function home() { const \[rooms, setrooms] = usestate(\[]); useeffect(() => { const fetchrooms = async () => { const room = parse object extend('room'); const query = new parse query(room); const results = await query find(); setrooms(results); }; fetchrooms(); }, \[]); return ( \<div> \<h1>available rooms\</h1> {rooms map(room => ( \<div key={room id}> \<h2>{room get('name')}\</h2> \<img src={room get('image') url()} alt={room get('name')} /> \<p>capacity {room get('capacity')}\</p> \<p>price ${room get('price')} per hour\</p> \</div> ))} \</div> ); } 5 2 การเพิ่มห้อง สร้าง pages/add room js สำหรับการเพิ่มห้องใหม่ (สำหรับผู้ใช้ที่ได้รับอนุญาต) import { usestate } from 'react'; import parse from 'parse'; export default function addroom() { const \[name, setname] = usestate(''); const \[description, setdescription] = usestate(''); const \[capacity, setcapacity] = usestate(0); const \[price, setprice] = usestate(0); const handleaddroom = async (e) => { e preventdefault(); const room = parse object extend('room'); const room = new room(); room set('name', name); room set('description', description); room set('capacity', capacity); room set('price', price); try { await room save(); alert('room added successfully!'); } catch (error) { alert('error ' + error message); } }; return ( \<form onsubmit={handleaddroom}> \<input type="text" value={name} onchange={(e) => setname(e target value)} placeholder="room name" /> \<textarea value={description} onchange={(e) => setdescription(e target value)} placeholder="description">\</textarea> \<input type="number" value={capacity} onchange={(e) => setcapacity(parseint(e target value))} placeholder="capacity" /> \<input type="number" value={price} onchange={(e) => setprice(parseint(e target value))} placeholder="price" /> \<button type="submit">add room\</button> \</form> ); } 5 3 รายละเอียดห้อง สร้าง pages/rooms/\[id] js เพื่อดูข้อมูลรายละเอียดเกี่ยวกับห้อง import { userouter } from 'next/router'; import { useeffect, usestate } from 'react'; import parse from 'parse'; export default function roomdetails() { const router = userouter(); const { id } = router query; const \[room, setroom] = usestate(null); useeffect(() => { if (!id) return; const fetchroom = async () => { const room = parse object extend('room'); const query = new parse query(room); query equalto('objectid', id); const result = await query first(); setroom(result); }; fetchroom(); }, \[id]); if (!room) return \<div>loading \</div>; return ( \<div> \<h1>{room get('name')}\</h1> \<img src={room get('image') url()} alt={room get('name')} /> \<p>{room get('description')}\</p> \<p>capacity {room get('capacity')}\</p> \<p>price ${room get('price')} per hour\</p> \</div> ); } 6 ระบบการจอง 6 1 การจองห้อง เพิ่มฟังก์ชันการจองใน pages/rooms/\[id] js โดยการเพิ่มแบบฟอร์มการจอง const \[checkin, setcheckin] = usestate(''); const \[checkout, setcheckout] = usestate(''); const handlebooking = async () => { const booking = parse object extend('booking'); const booking = new booking(); booking set('room', room); booking set('user', parse user current()); booking set('checkin', new date(checkin)); booking set('checkout', new date(checkout)); // check for double booking (example logic) const query = new parse query(booking); query equalto('room', room); query greaterthanorequalto('checkin', new date(checkin)); query lessthanorequalto('checkout', new date(checkout)); const overlap = await query first(); if (!overlap) { try { await booking save(); alert('booking successful!'); } catch (error) { alert('error ' + error message); } } else { alert('room is already booked for the selected time range '); } }; 6 2 การดูและยกเลิกการจอง สร้าง pages/my bookings js เพื่อดูและยกเลิกการจอง import { useeffect, usestate } from 'react'; import parse from 'parse'; export default function mybookings() { const \[bookings, setbookings] = usestate(\[]); useeffect(() => { const fetchbookings = async () => { const booking = parse object extend('booking'); const query = new parse query(booking); query equalto('user', parse user current()); const results = await query find(); setbookings(results); }; fetchbookings(); }, \[]); const handlecancel = async (id) => { const booking = bookings find(b => b id === id); if (booking) { await booking destroy(); setbookings(bookings filter(b => b id !== id)); } }; return ( \<div> \<h1>my bookings\</h1> {bookings map(booking => ( \<div key={booking id}> \<p>room {booking get('room') get('name')}\</p> \<p>check in {new date(booking get('checkin')) tolocalestring()}\</p> \<p>check out {new date(booking get('checkout')) tolocalestring()}\</p> \<button onclick={() => handlecancel(booking id)}>cancel booking\</button> \</div> ))} \</div> ); } 7 การปรับใช้กับ vercel ติดตั้ง vercel cli npm install g vercel ปรับใช้แอป next js ของคุณด้วย vercel ทำตามคำแนะนำเพื่อปรับใช้แอปของคุณไปยัง vercel เมื่อปรับใช้แล้ว แอปของคุณจะออนไลน์ที่ url สาธารณะ 8 สรุป ในบทเรียนนี้ คุณได้สร้าง bookit แอปด้วย next js สำหรับส่วนหน้าและ back4app เป็นแบ็กเอนด์ คุณได้ดำเนินการตรวจสอบสิทธิ์ผู้ใช้ การจัดการห้อง และฟังก์ชันการจอง สุดท้าย คุณได้ปรับใช้แอปบน vercel ตอนนี้คุณสามารถขยายแอปด้วยฟีเจอร์เพิ่มเติม เช่น การค้นหา การรวมการชำระเงิน หรือการแจ้งเตือน