Membangun Aplikasi Ticketing dengan Next.js, Vercel, dan Back4App

dalam tutorial ini, kita akan membangun sebuah sistem tiket menggunakan next js dengan router aplikasi, back4app sebagai layanan backend, dan tailwind css untuk styling aplikasi ini memungkinkan pengguna untuk membuat, memperbarui, melihat, dan menghapus tiket, sambil memanfaatkan parse server di back4app untuk manajemen database 1\ prasyarat sebelum memulai, pastikan anda memiliki node js terinstal di mesin anda ( panduan instalasi node js https //nodejs org/ ) akun back4app ( daftar gratis https //www back4app com/ ) akun vercel untuk penyebaran ( daftar untuk vercel https //vercel com/ ) 2\ menyiapkan back4app masuk ke dasbor back4app anda dan buat proyek baru navigasikan ke data browser dan buat kelas baru bernama tiket dengan skema berikut nama bidang tipe judul string deskripsi string kategori string prioritas nomor kemajuan nomor status string dibuatpada tanggal (dihasilkan secara otomatis) diperbaruipada tanggal (dihasilkan secara otomatis) 3\ menyiapkan frontend (next js) 3 1 buat proyek next js baru jalankan perintah berikut untuk membuat proyek next js baru npx create next app\@latest ticketing app cd ticketing app 3 2 instal dependensi instal tailwind css , font awesome , dan parse sdk untuk operasi backend npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome free parse npx tailwindcss init p 3 3 siapkan tailwind css edit file tailwind config js untuk mengonfigurasi jalur konten tailwind css module exports = { content \[ ' /app/ / {js,ts,jsx,tsx}', ' /components/ / {js,ts,jsx,tsx}', ], theme { extend {}, }, plugins \[], } di styles/globals css , tambahkan impor tailwind @tailwind base; @tailwind components; @tailwind utilities; 3 4 buat struktur proyek mengikuti struktur yang disediakan, buat direktori dan komponen yang diperlukan struktur direktori /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\ menyiapkan klien parse di folder /lib , buat file parseclient js untuk mengonfigurasi sdk parse import parse from 'parse'; // initialize parse sdk parse initialize('your app id', 'your js key'); parse serverurl = 'https //parseapi back4app com'; export default parse; ganti 'your app id' dan 'your js key' dengan kredensial proyek back4app anda 5\ membuat komponen utama 5 1 formulir tiket komponen ini akan menangani pembuatan dan pembaruan tiket di /components/ticketform jsx , buat yang berikut 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 kartu tiket komponen ini akan menampilkan informasi tiket individu di /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 hapusblok komponen konfirmasi untuk menghapus tiket di /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 tampilkanprogres komponen ini menunjukkan progres sebagai bilah persentase di /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 tampilkanprogres 6\ halaman dan routing 6 1 daftar tiket di /app/page js , tampilkan daftar tiket 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 detail dan edit tiket di /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\ menerapkan ke vercel 7 1 buat akun vercel jika anda belum memiliki akun vercel, kunjungi vercel com https //vercel com/ dan buat akun anda dapat mendaftar dengan github, gitlab, atau bitbucket vercel memudahkan untuk menghubungkan repositori anda langsung untuk penerapan 7 2 dorong kode anda ke github untuk menerapkan aplikasi anda di vercel, anda perlu memiliki proyek anda yang dihosting di platform kontrol versi seperti github (atau gitlab/bitbucket) jika proyek anda belum ada di github, ikuti langkah langkah ini inisialisasi git di direktori proyek anda tambahkan proyek anda ke github 7 3 instal vercel cli (opsional) jika anda lebih suka menerapkan langsung dari baris perintah, instal vercel cli secara global sebagai alternatif, anda dapat menerapkan melalui dasbor vercel, yang akan kami bahas selanjutnya 7 4 hubungkan repositori github anda ke vercel pergi ke vercel https //vercel com/ klik proyek baru pilih repositori git yang berisi proyek next js anda konfigurasi proyek anda vercel akan secara otomatis mendeteksi bahwa ini adalah proyek next js dan menerapkan pengaturan build yang benar atur direktori root ke folder proyek (jika perlu) 7 5 atur variabel lingkungan anda perlu mengonfigurasi kredensial back4app anda dan variabel lingkungan lainnya di vercel di pengaturan proyek vercel, pergi ke bagian variabel lingkungan tambahkan variabel lingkungan berikut 7 6 atur konfigurasi parse di env local (opsional) jika anda menggunakan variabel lingkungan lokal selama pengembangan, pastikan untuk membuat file env local di direktori root proyek anda dengan variabel berikut variabel lingkungan ini juga akan digunakan oleh vercel setelah mereka diatur di dasbor vercel 7 7 konfigurasi pengaturan build (opsional) pastikan bahwa versi node js dan perintah build telah dikonfigurasi dengan benar (vercel mendeteksi ini secara otomatis) untuk aplikasi next js , pengaturan default harusnya perintah build npm run build direktori output next/ 7 8 deploy proyek setelah anda menghubungkan repositori github anda, vercel akan secara otomatis memicu proses build dan deployment anda dapat melihat status build anda di dasbor vercel 7 9 periksa log deployment jika ada masalah yang muncul selama deployment, anda dapat memeriksa log deployment untuk melakukan debug 7 10 akses aplikasi yang dideploy setelah deployment berhasil, vercel akan memberikan anda url unik di mana aplikasi next js anda dapat diakses anda dapat mengunjungi url tersebut untuk mengakses aplikasi tiket yang telah dideploy misalnya https //your app name vercel app/ 8\ memastikan deployment yang lancar kredensial back4app periksa kembali bahwa variabel lingkungan back4app anda telah diatur dengan benar di env local (untuk pengembangan lokal) dan di dasbor vercel (untuk produksi) cors (cross origin resource sharing) pastikan bahwa back4app mengizinkan url vercel anda dalam pengaturan cors nya, yang dapat anda konfigurasi di dasbor back4app di bawah keamanan uji api anda sebelum melakukan deployment, uji interaksi api back4app anda secara lokal untuk memastikan semuanya berjalan lancar 9\ kesimpulan dengan langkah langkah ini, aplikasi tiket next js anda sekarang seharusnya telah dideploy di vercel , menggunakan back4app untuk backend ini menyelesaikan siklus pengembangan penuh, dari pengaturan back4app, membuat frontend di next js, hingga mendepoy aplikasi secara langsung di vercel jika anda ingin melakukan pembaruan, cukup dorong perubahan ke repositori github anda, dan vercel akan secara otomatis memicu deployment baru