Cara Membangun Frontend Preact dan Menghubungkannya ke Backend?

dalam tutorial ini, anda akan membangun aplikasi daftar tugas menggunakan preact dan menghubungkannya ke backend yang kuat yang disediakan oleh back4app panduan ini sempurna untuk memulai karena mencakup operasi crud inti (buat, baca, perbarui, hapus) dan memandu anda melalui pembuatan ui yang bersih dan fungsional pada akhir, anda akan memiliki aplikasi yang sepenuhnya beroperasi yang menunjukkan cara mengintegrasikan backend yang dikelola sambil menggunakan preact untuk frontend yang ringan dan cepat membangun aplikasi full stack bisa menjadi kompleks, terutama ketika berurusan dengan pengaturan backend, manajemen database, otentikasi, dan penyebaran untuk menyederhanakan tantangan ini, kami menggunakan back4app—sebuah backend as a service (baas) solusi—sehingga anda dapat fokus pada pengembangan frontend anda sementara ia menangani hosting, database, dan api back4app menyediakan layanan backend yang komprehensif termasuk database siap pakai, otentikasi, cloud code untuk logika sisi server, dan sdk untuk integrasi yang mulus ini juga mendukung penyebaran terkontainer, menjadikannya pilihan yang sangat baik untuk aplikasi full stack modern dengan sumber daya ini, anda dapat dengan cepat mengembangkan dan menyebarkan aplikasi tanpa beban mengelola infrastruktur server poin penting dengan mengikuti tutorial ini, anda akan belajar untuk menginisialisasi proyek preact modern menggunakan vite mengintegrasikan layanan backend untuk mengelola data aplikasi anda menerapkan operasi crud inti untuk antarmuka pengguna yang interaktif menyebarkan aplikasi daftar tugas yang sepenuhnya fungsional menggunakan alur kerja terkontainer di back4app prasyarat sebelum anda mulai, pastikan anda memiliki hal hal berikut node js dan npm instal versi lts terbaru dari node js dari nodejs org https //nodejs org/ dan verifikasi dengan menjalankan node v dan npm v di terminal anda pengetahuan dasar preact keterampilan dengan komponen fungsional, hooks (seperti usestate dan useeffect ), dan sintaks jsx diharapkan jika anda baru mengenal preact, pertimbangkan untuk meninjau dasarnya terlebih dahulu akun back4app daftar di back4app https //www back4app com/ untuk mengatur dan mengelola layanan backend anda dengan prasyarat ini, anda siap untuk mengatur proyek anda dan mulai membangun pengaturan proyek mulailah dengan menyiapkan lingkungan pengembangan lokal anda dan menginisialisasi proyek preact anda menggunakan vite untuk pengalaman pengembangan yang lebih lancar konfirmasi bahwa node js (versi lts) telah terinstal jika perlu, unduh dan instal dari nodejs org https //nodejs org/ verifikasi dengan menjalankan node v npm v inisialisasi proyek preact anda menggunakan vite jalankan perintah berikut di terminal anda (ganti todo app dengan nama proyek yang anda inginkan) npm create vite\@latest todo app template preact navigasikan ke direktori proyek anda cd todo app instal dependensi yang diperlukan npm install mulai server pengembangan untuk memverifikasi pengaturan anda npm run dev aplikasi preact anda sekarang harus berjalan secara lokal buka url yang disediakan di browser anda untuk mengonfirmasi selanjutnya, anda akan menyiapkan backend anda di back4app untuk mengelola penyimpanan data dan interaksi api membuat backend todo back4app menawarkan layanan backend yang sepenuhnya dikelola yang didukung oleh parse , yang menyediakan database nosql, otentikasi, cloud code, dan api yang dihasilkan secara otomatis bagian ini akan memandu anda melalui pembuatan model data task untuk menyimpan item yang harus anda lakukan dan menghubungkannya ke frontend preact anda mengatur aplikasi backend anda masuk ke dasbor back4app https //www back4app com/ dan klik "buat aplikasi baru " beri nama aplikasi anda (misalnya, todopreactapp ) dan pilih nodejs/parse sebagai jenis backend setelah aplikasi dibuat, navigasikan ke "database" > "browser" klik "buat kelas" dan pilih "kustom" beri nama kelas task dan atur izin tingkat kelas untuk mengizinkan baca dan tulis publik (anda dapat menyesuaikan pengaturan ini nanti) di kelas task , tambahkan bidang berikut judul (string) – judul tugas deskripsi (string) – detail tentang tugas selesai (boolean) – menunjukkan apakah tugas telah selesai tanggaljatuhtempo (tanggal) – tenggat waktu untuk tugas klik "simpan" untuk menyelesaikan pengaturan skema anda mengintegrasikan back4app dengan preact integrasikan back4app ke dalam proyek preact anda menggunakan parse javascript sdk instal sdk melalui npm npm install parse konfigurasikan sdk dengan menginisialisasinya menggunakan application id dan javascript key ambil kredensial ini dari dasbor back4app anda di bawah app settings > security & keys di src/main jsx , impor dan konfigurasikan parse sebagai berikut import { render } from 'preact' import ' /index css' import app from ' /app jsx' 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; render(\<app />, document getelementbyid('app')) dengan backend terhubung, anda siap untuk membangun ui daftar tugas di preact dan menerapkan operasi crud mengembangkan frontend dengan preact sekarang bahwa backend anda telah dikonfigurasi, bangun antarmuka pengguna untuk aplikasi daftar tugas anda menggunakan preact anda akan membuat komponen untuk menambah, menampilkan, memperbarui, dan menghapus tugas sambil mengelola status dengan hooks mengorganisir komponen anda aplikasi anda akan mencakup komponen kunci berikut taskform jsx – mengelola penambahan tugas baru tasklist jsx – menampilkan semua tugas dan menyediakan kontrol untuk menyelesaikan atau menghapusnya taskitem jsx – mewakili tugas individu dengan tindakan untuk mengubah penyelesaian atau menghapus tugas buat sebuah folder komponen di dalam src dan tambahkan file file ini mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx mengelola status dengan hooks gunakan hooks preact ( usestate dan useeffect ) untuk manajemen state dan efek samping mulailah dengan mengatur state di app jsx import { usestate, useeffect } from "preact/hooks"; import taskform from " /components/taskform jsx"; import tasklist from " /components/tasklist jsx"; import parse from "parse/dist/parse min js"; function app() { const \[tasks, settasks] = usestate(\[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map(task => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; useeffect(() => { fetchtasks(); }, \[]); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; membangun komponen form tugas di taskform jsx , buatlah form terkontrol untuk menambahkan tugas gunakan usestate untuk mengelola nilai input dan mengirim data ke back4app import { usestate } from "preact/hooks"; import parse from "parse/dist/parse min js"; function taskform({ fetchtasks }) { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e preventdefault(); try { 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(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} oninput={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} oninput={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; menampilkan daftar tugas di tasklist jsx , render daftar tugas dengan memetakan melalui array tugas dan menggunakan taskitem komponen import taskitem from " /taskitem jsx"; function tasklist({ tasks, fetchtasks }) { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map(task => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); } export default tasklist; membuat komponen item tugas di taskitem jsx , buat komponen yang memungkinkan anda menandai tugas sebagai selesai atau menghapusnya import parse from "parse/dist/parse min js"; function taskitem({ task, fetchtasks }) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div class={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; menata aplikasi anda tambahkan gaya berikut di index css file di folder src / container styling / 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; box sizing border box; 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; } container p { font size 1rem; } task item { display flex; flex direction column; align items center; justify content 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 css ini ke dalam src/main jsx import " /index css"; menyelesaikan ui aplikasi daftar tugas preact anda sekarang memiliki frontend dinamis yang terintegrasi dengan back4app dan gaya kustom aplikasi ini memungkinkan anda untuk menambahkan, menampilkan, memperbarui, dan menghapus tugas sambil mempertahankan komunikasi frontend backend yang efisien selanjutnya, anda akan menerapkan aplikasi preact anda menggunakan platform web deployment dari back4app menyebarkan frontend di back4app web deployment back4app web deployment menyediakan lingkungan terkelola sepenuhnya dan terkontainer untuk menyebarkan aplikasi anda dengan penyebaran berbasis docker, anda dapat mengemas frontend preact anda dan menyebarkannya dengan mudah mengonfigurasi vite untuk produksi proyek preact yang dibangun dengan vite berjalan dalam mode pengembangan secara default untuk produksi, bangun versi statis dan sajikan menggunakan server web ringan seperti nginx perbarui vite config js anda untuk mengatur jalur dasar yang benar import { defineconfig } from 'vite'; import preact from '@preact/preset vite'; export default defineconfig({ plugins \[preact()], base ' /', // ensures asset paths are correct in a containerized environment }); hasilkan file siap produksi npm run build membuat dockerfile untuk aplikasi anda buat sebuah dockerfile di direktori root untuk mendefinisikan kontainer anda \# build stage using a lightweight node js image from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# production stage using nginx to serve static files from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] menguji kontainer secara lokal sebelum menyebarkan, bangun dan uji kontainer docker anda secara lokal docker build t todo preact frontend jalankan kontainer docker run p 8080 80 todo preact frontend kunjungi http //localhost 8080 di browser anda untuk memastikan bahwa aplikasi anda disajikan dengan benar mengunggah ke github dan menerapkan melalui 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, lakukan penyebaran menggunakan back4app web deployment masuk ke back4app web deployment https //www back4app com/containers klik "buat aplikasi baru" , berikan nama, dan pilih github repository otorisasi back4app untuk mengakses repositori anda dan pilih todo preact repo pilih dockerfile deployment dan konfirmasi pengaturan build klik "deploy" untuk memulai proses build memantau dan mengelola penyebaran setelah penyebaran, gunakan dasbor back4app untuk melihat log untuk pemecahan masalah memantau kinerja kontainer dan penggunaan sumber daya memicu penyebaran ulang pada komit baru mengonfigurasi domain kustom jika diperlukan pengujian dan pen debugging aplikasi anda setelah penerapan, uji aplikasi preact anda secara menyeluruh verifikasi konektivitas api buka konsol pengembang browser anda (f12 → jaringan) untuk memantau panggilan api selama operasi tugas tambahkan dan ambil tugas gunakan ui untuk menambahkan tugas, lalu segarkan halaman untuk memverifikasi keberlanjutan di browser database back4app uji operasi crud pastikan bahwa menandai tugas sebagai selesai dan penghapusan tercermin dengan benar di backend penanganan kasus tepi validasi input formulir dan simulasi kondisi jaringan lambat menggunakan alat pengembang jika anda mengalami masalah, tinjau log back4app atau periksa konfigurasi api anda praktik terbaik untuk menggunakan layanan back4app tingkatkan kinerja dan keamanan aplikasi anda dengan mengikuti praktik terbaik ini optimalkan panggilan api gunakan permintaan batch untuk beberapa operasi dan pilih hanya bidang yang diperlukan dalam kueri anda amankan data sensitif simpan kredensial seperti id aplikasi dan kunci javascript dalam variabel lingkungan dengan vite, buat sebuah env file vite parse app id=your app id vite parse js key=your js key aktifkan auto scaling aktifkan auto scaling di back4app web deployment untuk mengelola lalu lintas tinggi tingkatkan keamanan batasi izin tingkat kelas (clp) untuk mengontrol modifikasi data dan atur acl sesuai kebutuhan manfaatkan cloud code alihkan logika kompleks ke cloud code untuk kinerja yang lebih baik dan pengurangan paparan api kesimpulan anda sekarang telah membangun aplikasi to do list full stack menggunakan preact untuk frontend dan layanan backend back4app yang kuat tutorial ini memandu anda melalui penginisialisasian proyek preact, mengintegrasikan parse sdk, dan menerapkan aplikasi anda menggunakan alur kerja terkontainer di back4app saat anda terus mengembangkan, pertimbangkan untuk menambahkan fitur seperti otentikasi pengguna yang lebih canggih, pembaruan waktu nyata, dan integrasi pihak ketiga untuk detail tambahan dan dukungan, lihat dokumentasi back4app https //www back4app com/docs