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

dalam panduan ini, anda akan membangun aplikasi daftar tugas menggunakan blitz js dan menghubungkannya ke backend yang dikelola di back4app tutorial langkah demi langkah ini dirancang untuk membantu anda menerapkan operasi crud yang penting dan membuat antarmuka pengguna yang dinamis menggunakan blitz js membangun aplikasi full stack bisa menjadi kompleks jika anda harus mengelola sistem frontend dan backend dengan memanfaatkan back4app, anda dapat menyederhanakan manajemen backend melalui a baas yang dapat diskalakan , memungkinkan anda untuk berkonsentrasi pada pembangunan antarmuka blitz js yang menarik back4app menyediakan serangkaian layanan backend, termasuk database nosql yang siap digunakan, otentikasi, fungsi cloud, dan endpoint api fitur fitur ini memungkinkan anda untuk dengan cepat mengembangkan dan menerapkan aplikasi anda tanpa beban pemeliharaan server poin penting pada akhir tutorial ini, anda akan dapat mengatur proyek blitz js modern menggunakan alat standar industri mengintegrasikan backend back4app dengan aplikasi blitz js anda menggunakan parse sdk menerapkan operasi crud untuk mengelola daftar tugas mengontainerisasi dan menerapkan aplikasi blitz js anda menggunakan web deployment dari back4app prasyarat sebelum anda mulai, pastikan anda memiliki hal hal berikut node js dan npm terinstal di mesin anda verifikasi instalasi dengan node v dan npm v di terminal anda pengetahuan dasar tentang blitz js , termasuk routing, query, dan mutasi memahami react sangat bermanfaat karena blitz js dibangun di atasnya akun back4app untuk mengonfigurasi dan mengelola layanan backend anda daftar di back4app https //www back4app com/ jika anda belum melakukannya dengan prasyarat ini terpenuhi, anda siap untuk menginisialisasi proyek blitz js anda dan mengintegrasikannya dengan backend yang kuat pengaturan proyek mulailah dengan mengatur aplikasi blitz js anda blitz js menyediakan pengalaman pengembang yang efisien dengan menggabungkan kekuatan next js dengan kerangka kerja full stack jalankan perintah berikut untuk membuat proyek blitz js baru ganti todo app dengan nama proyek yang anda pilih npx blitz new todo app navigasikan ke direktori proyek anda cd todo app jalankan server pengembangan anda untuk memverifikasi bahwa semuanya telah diatur dengan benar npm run dev kunjungi url yang ditampilkan di terminal anda untuk mengonfirmasi bahwa aplikasi blitz js anda sedang berjalan menyiapkan backend todo di back4app back4app menawarkan backend parse yang dikelola yang menyederhanakan manajemen data untuk aplikasi anda di bagian ini, anda akan membuat model data untuk menyimpan tugas untuk daftar to do anda membuat aplikasi backend anda masuk ke dasbor back4app https //www back4app com/ dan klik "buat aplikasi baru " berikan nama untuk aplikasi anda (misalnya, todoblitzapp ) dan pilih nodejs/parse sebagai jenis backend di bagian "database" > "browser" , klik "buat kelas" dan pilih "kustom " nama kelas task dan atur izin tingkat kelas untuk mengizinkan baca dan tulis publik (anda dapat menyesuaikan pengaturan ini nanti) tambahkan bidang berikut ke kelas task judul (string) – judul dari tugas deskripsi (string) – detail tentang tugas selesai (boolean) – apakah tugas sudah selesai tanggaljatuhtempo (tanggal) – tenggat waktu untuk tugas klik "simpan" untuk membuat skema mengintegrasikan back4app dengan blitz js untuk menghubungkan aplikasi blitz js anda ke back4app, instal parse javascript sdk npm install parse selanjutnya, konfigurasikan parse sdk di proyek blitz js anda buat file konfigurasi baru (misalnya, src/parseclient js ) dan inisialisasi parse seperti yang ditunjukkan di bawah ganti placeholder dengan kredensial back4app anda dari pengaturan aplikasi > keamanan & kunci // 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; anda sekarang dapat mengimpor konfigurasi ini dalam kueri dan mutasi blitz js anda untuk berinteraksi dengan backend anda membangun frontend dengan blitz js dengan backend yang sudah disiapkan, saatnya untuk membangun antarmuka daftar tugas di blitz js anda akan menggunakan kueri dan mutasi bawaan blitz js untuk melakukan operasi crud menyusun halaman dan panggilan api anda di blitz js, halaman berada di bawah src/pages direktori buka src/pages/index tsx dan tambahkan kode berikut untuk mengatur halaman, mengquery tugas dari back4app, dan mendefinisikan mutasi untuk menambahkan, mengubah, dan menghapus tugas // 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 halaman ini memanfaatkan hook kueri tanstack untuk mengambil tugas dan menangani tindakan pengguna, memastikan integrasi yang mulus dengan backend back4app anda untuk memastikan usequery berfungsi, anda perlu membungkus seluruh aplikasi anda dalam queryclientprovider anda melakukan ini di src/pages/ app tsx file ganti kode di src/pages/ app tsx file dengan blok kode di bawah ini // 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) menambahkan gaya global untuk mendefinisikan gaya dasar aplikasi anda, tambahkan blok kode ke file css di 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; } } impor gaya global anda dengan menambahkan baris berikut di src/pages/ app tsx (atau file komponen app kustom anda) / src/pages/ app tsx / import " /styles/globals css"; aplikasi blitz js anda sekarang menampilkan antarmuka daftar tugas yang sepenuhnya fungsional yang terintegrasi dengan back4app mengcontainerisasi dan mendeploy aplikasi blitz js anda di back4app penyebaran web back4app menyediakan lingkungan tercontainerisasi yang menyederhanakan proses penyebaran anda akan mengemas aplikasi blitz js anda ke dalam kontainer docker dan mendeploynya dengan mulus mempersiapkan aplikasi blitz js anda untuk produksi pertama, bangun aplikasi blitz js anda untuk produksi blitz build membuat dockerfile buat sebuah dockerfile di direktori root proyek anda dengan konten berikut 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 ini membangun proyek blitz js anda dan menyiapkan gambar produksi menggunakan runtime node js yang ringan setelah membuat dockerfile anda, buat sebuah dockerignore file dan salin serta tempel file gitignore anda membangun dan menguji kontainer docker anda bangun gambar docker secara lokal docker build t todo blitz frontend jalankan kontainer untuk mengujinya docker run p 3000 3000 todo blitz frontend kunjungi http //localhost 3000 di browser anda untuk memverifikasi bahwa aplikasi blitz js anda berjalan dengan benar menyebarkan aplikasi anda melalui penyebaran web back4app dorong proyek anda ke 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 kemudian, masuk ke penyebaran web back4app https //www back4app com/containers dan ikuti langkah langkah ini klik "buat aplikasi baru" dan masukkan detail proyek anda pilih repositori github dan berikan izin kepada back4app pilih repositori todo blitz anda pilih penyebaran dockerfile dan verifikasi pengaturan build klik "sebarkan" untuk memulai proses penyebaran setelah disebarkan, gunakan dasbor back4app untuk memantau log, mengelola build, dan mengatur domain kustom jika diperlukan pengujian dan debugging aplikasi anda setelah penyebaran, pastikan aplikasi anda berfungsi seperti yang diharapkan dengan memeriksa konektivitas api gunakan alat pengembang di browser anda untuk memverifikasi bahwa permintaan api untuk menambahkan, mengubah, dan menghapus tugas berhasil memverifikasi persistensi data tambahkan tugas melalui ui dan segarkan halaman untuk mengonfirmasi bahwa mereka disimpan di database back4app menguji operasi crud validasi bahwa tugas dapat diubah dan dihapus, dan periksa log konsol untuk kesalahan menangani kasus tepi cobalah mengirimkan input yang tidak valid untuk menguji ketahanan validasi anda praktik terbaik dan tips optimisasi pertimbangkan rekomendasi berikut untuk aplikasi yang aman dan efisien optimalkan permintaan api gunakan pemrosesan batch dan batasi bidang yang ditanyakan untuk mengurangi beban jaringan amankan variabel lingkungan simpan kredensial sensitif (id aplikasi dan kunci javascript) di file env yang aman terapkan kontrol akses gunakan acl dinamis untuk memastikan hanya pengguna yang berwenang yang dapat mengubah data manfaatkan cloud code alihkan logika kompleks ke cloud code back4app untuk meningkatkan kinerja dan keamanan kesimpulan anda sekarang telah membangun aplikasi to do list full stack menggunakan blitz js yang terintegrasi dengan backend back4app tutorial ini membimbing anda melalui inisialisasi proyek, integrasi backend, dan penyebaran terkontainer saat anda melanjutkan, pertimbangkan untuk memperluas aplikasi anda dengan fitur seperti manajemen pengguna yang lebih canggih, pembaruan waktu nyata, dan integrasi pihak ketiga untuk wawasan tambahan, jelajahi dokumentasi back4app https //www back4app com/docs dan sumber daya blitz js