Tutorial Aplikasi Pemesanan Ruang Pertemuan dengan Back4App, Next.js dan Vercel

dalam tutorial ini, anda akan membangun bookit , sebuah sistem pemesanan ruang rapat menggunakan next js sebagai kerangka frontend dan back4app sebagai layanan backend anda akan menerapkan otentikasi pengguna, manajemen ruang, dan fungsionalitas pemesanan, serta menerapkan aplikasi di vercel 1 prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan akun back4app (daftar di back4app https //www back4app com/ ) proyek back4app (ikuti panduan ini https //www back4app com/docs/get started/welcome ) node js terinstal di mesin lokal anda ( panduan instalasi https //nodejs org/ ) pengetahuan dasar tentang javascript, next js, dan rest api (jika perlu, lihat dasar dasar javascript https //www back4app com/docs/javascript guide ) 2 menyiapkan back4app masuk ke akun back4app anda dan navigasikan ke dasbor proyek anda di sidebar kiri, klik database untuk mengakses data browser anda perlu membuat kelas berikut untuk memodelkan data 2 1 buat kelas user secara default, parse menangani otentikasi pengguna, jadi tidak perlu membuat kelas ini secara manual parse secara otomatis mengelola bidang berikut untuk anda email alamat email untuk login password kata sandi (hashed) username nama pengguna opsional 2 2 buat room kelas di data browser , klik buat kelas , pilih kustom , dan beri nama kelas ruang tambahkan kolom berikut nama kolom tipe deskripsi nama string nama ruangan deskripsi string deskripsi ruangan kapasitas nomor jumlah orang yang dapat ditampung ruangan fasilitas array daftar fasilitas (tv, wifi, dll ) harga nomor harga per jam gambar berkas url gambar pemilik penunjuk menunjukkan ke pengguna kelas 2 3 buat booking kelas buat kelas kustom lain bernama booking tambahkan kolom berikut nama kolom tipe deskripsi ruang penunjuk menunjuk ke kelas ruang pengguna penunjuk menunjuk ke kelas pengguna checkin tanggal tanggal/waktu mulai pemesanan checkout tanggal tanggal/waktu akhir pemesanan 3 menyiapkan next js dan parse sdk buat proyek next js baru npx create next app bookit app cd bookit app instal parse js sdk npm install parse di dalam pages/ app js file, inisialisasi parse dengan kredensial back4app anda 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; ganti 'your app id' dan 'your javascript key' dengan kredensial aplikasi back4app anda 4 mengimplementasikan autentikasi pengguna 4 1 pendaftaran pengguna buat halaman baru pages/signup js dengan formulir pendaftaran 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 masuk pengguna buat pages/login js untuk masuk pengguna 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 rute yang dilindungi untuk rute yang dilindungi, anda dapat menggunakan rute api next js dan memeriksa apakah pengguna terautentikasi 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 manajemen ruangan 5 1 menampilkan ruangan yang tersedia buat pages/index js untuk mencantumkan ruangan yang tersedia 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 menambahkan ruangan buat pages/add room js untuk menambahkan ruangan baru (untuk pengguna yang berwenang) 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 detail ruangan buat pages/rooms/\[id] js untuk melihat informasi detail tentang sebuah ruangan 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 sistem pemesanan 6 1 memesan ruangan tambahkan fungsionalitas pemesanan di pages/rooms/\[id] js dengan menambahkan formulir pemesanan 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 melihat dan membatalkan pemesanan buat pages/my bookings js untuk melihat dan membatalkan pemesanan 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 menerapkan ke vercel instal vercel cli npm install g vercel terapkan aplikasi next js anda dengan vercel ikuti petunjuk untuk menerapkan aplikasi anda ke vercel setelah diterapkan, aplikasi anda akan tersedia di url publik 8 kesimpulan dalam tutorial ini, anda telah membangun sebuah bookit aplikasi dengan next js untuk frontend dan back4app sebagai backend anda telah menerapkan otentikasi pengguna, manajemen ruangan, dan fungsionalitas pemesanan akhirnya, anda menerapkan aplikasi di vercel anda sekarang dapat memperluas aplikasi dengan fitur tambahan seperti pencarian, integrasi pembayaran, atau notifikasi