How to Create a Basic CRUD App with Preact?

ikhtisar dalam panduan ini, anda akan mengembangkan aplikasi crud (buat, baca, perbarui, dan hapus) menggunakan preact kami akan memandu anda melalui pembangunan sistem yang menangani operasi data dasar, mulai dari menginisialisasi proyek back4app bernama basic crud app preact hingga mengelola data dengan mudah proyek ini menyediakan backend yang kuat dan frontend yang ramping dan minimal yang dibangun dengan preact kami akan mulai dengan menyiapkan proyek baru di back4app, kemudian merancang skema database yang efisien—baik secara manual atau dengan bantuan asisten ai back4app desain ini akan mendukung semua fungsionalitas crud yang penting selanjutnya, kami memperkenalkan aplikasi admin back4app, antarmuka seret dan lepas yang menyederhanakan manajemen data anda dapat dengan cepat menambahkan, memodifikasi, atau menghapus catatan menggunakan alat ini akhirnya, anda akan menghubungkan frontend preact anda ke back4app menggunakan rest/graphql, memastikan backend anda aman dengan aturan akses yang canggih pada akhir tutorial ini, anda akan memiliki aplikasi web siap produksi yang menampilkan otentikasi pengguna dan manajemen data yang kuat—semua dibangun dengan preact dan didukung oleh back4app wawasan utama kuasi pembangunan aplikasi crud yang secara efisien mengelola data menggunakan backend yang dapat diandalkan pelajari cara merancang model data yang dapat diskalakan dan mengintegrasikannya dengan frontend preact untuk pengalaman pengguna yang optimal temukan bagaimana aplikasi admin back4app yang seret dan lepas menyederhanakan operasi buat, baca, perbarui, dan hapus pahami strategi penyebaran, termasuk kontainerisasi dengan docker, untuk meluncurkan aplikasi anda dengan cepat prasyarat sebelum memulai, pastikan anda memiliki akun back4app dan proyek yang sudah diinisialisasi untuk panduan, lihat memulai dengan back4app https //www back4app com/docs/get started/new parse app lingkungan pengembangan preact gunakan alat seperti preact cli https //github com/preactjs/preact cli atau yang setara, pastikan node js (v14 atau lebih baru) terinstal pengetahuan dasar tentang javascript, preact, dan rest api rujuk ke dokumentasi preact https //preactjs com/guide/v10/ jika diperlukan langkah 1 – menyiapkan proyek anda menginisialisasi proyek back4app masuk ke akun back4app anda pilih opsi “aplikasi baru” di dasbor anda beri nama proyek anda basic crud app preact , dan ikuti petunjuk pengaturan buat proyek baru setelah pembuatan, proyek anda akan terlihat di dasbor back4app anda, meletakkan dasar untuk konfigurasi backend langkah 2 – membuat skema database anda menyusun model data anda untuk aplikasi crud kami, anda akan memerlukan beberapa koleksi di bawah ini adalah contoh yang menguraikan koleksi dan bidang yang penting untuk mendukung operasi crud 1\ koleksi item koleksi ini menyimpan rincian tentang setiap item bidang tipe data tujuan id objectid kunci utama yang dihasilkan secara otomatis judul string nama item tersebut deskripsi string deskripsi singkat tentang item tersebut dibuat pada tanggal timestamp pembuatan diperbarui pada tanggal timestamp pembaruan terakhir 2\ koleksi pengguna ini menyimpan kredensial pengguna dan detail profil bidang tipe data tujuan id objectid kunci utama yang dihasilkan secara otomatis nama pengguna string nama pengguna yang unik email string alamat email yang unik hash kata sandi string kata sandi yang di hash untuk otentikasi dibuat pada tanggal stempel waktu pembuatan akun diperbarui pada tanggal timestamp pembaruan akun terakhir anda dapat membuat koleksi ini secara manual melalui dasbor back4app dengan menambahkan kelas baru untuk setiap koleksi dan mendefinisikan bidang yang sesuai buat kelas baru anda dapat menambahkan kolom dengan memilih jenis data, memberi nama kolom, dan mengatur nilai default serta tanda wajib buat kolom menggunakan asisten ai back4app untuk pembuatan skema asisten ai yang tersedia di back4app dapat secara otomatis menghasilkan skema anda berdasarkan prompt yang menggambarkan koleksi dan bidang anda fitur ini mempercepat pengaturan dan memastikan konsistensi langkah langkah untuk menggunakan asisten ai buka asisten ai dari dasbor back4app anda masukkan deskripsi rinci tentang model data anda tinjau koleksi dan definisi bidang yang dihasilkan secara otomatis, lalu terapkan pada proyek anda contoh prompt create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) pendekatan ini menghemat waktu dan menjamin skema yang terstruktur dengan baik langkah 3 – mengaktifkan aplikasi admin & mengelola operasi crud memperkenalkan aplikasi admin aplikasi admin back4app menyediakan antarmuka tanpa kode untuk mengelola data backend anda dengan mudah fungsionalitas seret dan lepasnya memungkinkan anda melakukan operasi crud tanpa kesulitan mengaktifkan aplikasi admin pergi ke menu “lainnya” di dasbor back4app anda pilih “aplikasi admin” dan klik “aktifkan aplikasi admin ” atur pengguna admin pertama anda, yang juga akan mengonfigurasi peran seperti b4aadminuser dan koleksi sistem aktifkan aplikasi admin setelah aktivasi, masuk ke aplikasi admin untuk mengelola data anda dasbor aplikasi admin melakukan tindakan crud dengan aplikasi admin di dalam antarmuka anda dapat menambahkan rekaman gunakan opsi “tambahkan rekaman” di koleksi mana pun (misalnya, item) untuk membuat entri baru melihat dan mengedit rekaman pilih sebuah rekaman untuk melihat detailnya atau mengubah bidangnya menghapus rekaman hapus entri yang tidak lagi diperlukan alat intuitif ini meningkatkan pengalaman pengguna dengan menyederhanakan manajemen data langkah 4 – menghubungkan frontend preact anda ke back4app dengan backend yang sudah siap, saatnya untuk mengintegrasikan frontend preact anda opsi a menggunakan parse sdk instal parse sdk npm install parse siapkan parse di proyek preact anda buat file (misalnya, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; integrasikan parse dalam komponen preact misalnya, buat komponen untuk mengambil dan menampilkan item // src/components/itemslist js import { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; import parse from ' /parseconfig'; const itemslist = () => { const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; opsi b memanfaatkan rest atau graphql jika sdk parse tidak memungkinkan, gunakan rest atau graphql untuk operasi crud misalnya, untuk mengambil item melalui rest // sample rest call to retrieve items const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); integrasikan panggilan api ini dalam komponen preact anda sesuai kebutuhan langkah 5 – meningkatkan keamanan backend menggunakan daftar kontrol akses (acl) amankan data anda dengan menetapkan acl ke objek anda misalnya, untuk membuat item pribadi async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl only the owner has read/write access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } izin tingkat kelas (clp) di dalam dasbor back4app, sesuaikan clp untuk setiap koleksi untuk membatasi akses hanya untuk pengguna yang terautentikasi atau berwenang langkah 6 – mengimplementasikan autentikasi pengguna mengonfigurasi akun pengguna back4app memanfaatkan kelas pengguna parse untuk mengelola autentikasi dalam aplikasi preact anda, kelola pendaftaran dan login pengguna sebagai berikut // src/components/auth js import { h } from 'preact'; import { usestate } from 'preact/hooks'; import parse from ' /parseconfig'; export const signup = () => { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('user registration successful!'); } catch (error) { alert('registration error ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={e => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={e => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={e => setemail(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; metode serupa dapat digunakan untuk login dan mengelola sesi fitur tambahan seperti autentikasi sosial dan pemulihan kata sandi dapat diatur melalui dasbor back4app langkah 7 – meluncurkan frontend preact anda dengan penyebaran web fitur penyebaran web back4app memungkinkan anda untuk menghosting aplikasi preact anda dengan menghubungkan repositori github dalam bagian ini, anda akan menyiapkan build produksi anda, mengkomit kode anda, mengintegrasikan dengan penyebaran web, dan menyebarkan situs anda 7 1 buat berkas produksi anda buka direktori proyek anda di terminal jalankan perintah build npm run build ini menghasilkan sebuah build folder dengan aset statis yang dioptimalkan (html, js, css, gambar) 3\ konfirmasikan bahwa build folder mencakup sebuah index html file dan aset yang diperlukan 7 2 atur dan komit kode sumber anda repositori anda harus berisi kode sumber frontend preact yang lengkap struktur direktori contoh basic crud app preact frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md contoh berkas src/parseconfig js // src/parseconfig js import parse from 'parse'; // enter your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; import parse from ' /parseconfig'; function app() { const \[items, setitems] = usestate(\[]); const \[newitemtitle, setnewitemtitle] = usestate(""); const \[newitemdescription, setnewitemdescription] = usestate(""); const \[editingitemid, seteditingitemid] = usestate(null); const \[editingtitle, seteditingtitle] = usestate(""); const \[editingdescription, seteditingdescription] = usestate(""); const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; useeffect(() => { fetchitems(); }, \[]); const handleadditem = async () => { const items = parse object extend("items"); const item = new items(); item set("title", newitemtitle); item set("description", newitemdescription); try { await item save(); setnewitemtitle(""); setnewitemdescription(""); fetchitems(); } catch (error) { console error("error saving item ", error); } }; const handledeleteitem = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); fetchitems(); } catch (error) { console error("error deleting item ", error); } }; const starteditingitem = (item) => { seteditingitemid(item id); seteditingtitle(item get("title")); seteditingdescription(item get("description")); }; const handleupdateitem = async () => { try { const items = parse object extend("items"); const item = new items(); item id = editingitemid; item set("title", editingtitle); item set("description", editingdescription); await item save(); seteditingitemid(null); seteditingtitle(""); seteditingdescription(""); fetchitems(); } catch (error) { console error("error updating item ", error); } }; return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add item\</h2> \<input type="text" placeholder="title" value={newitemtitle} onchange={(e) => setnewitemtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={newitemdescription} onchange={(e) => setnewitemdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleadditem}>add item\</button> \</div> \<h2>item list\</h2> \<ul> {items map((item) => ( \<li key={item id} style={{ marginbottom '1rem' }}> {editingitemid === item id ? ( \<div> \<input type="text" value={editingtitle} onchange={(e) => seteditingtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" value={editingdescription} onchange={(e) => seteditingdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleupdateitem}>save\</button> \<button onclick={() => seteditingitemid(null)} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => starteditingitem(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => handledeleteitem(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } export default app; mengirim kode anda ke github inisialisasi repositori git (jika belum dilakukan) git init siapkan file sumber anda git add kirim perubahan anda git commit m "initial commit of preact frontend source code" buat repositori github baru, misalnya, basic crud app preact frontend dorong kode anda git remote add origin https //github com/your username/basic crud app preact frontend git git push u origin main 7 3 menghubungkan repositori anda dengan penyebaran web pergi ke bagian web deployment di dasbor back4app anda, buka proyek anda ( basic crud app preact ), dan pilih web deployment tautkan akun github anda seperti yang diminta, sehingga back4app dapat mengakses repositori anda pilih repositori (misalnya, basic crud app preact frontend ) dan pilih cabang yang sesuai (misalnya, main ) 7 4 konfigurasi penyebaran tentukan pengaturan tambahan perintah build jika folder build yang sudah dibangun tidak ada, atur perintah build (misalnya, npm run build ) back4app akan menjalankan perintah ini selama penyebaran direktori output tentukan folder output sebagai build sehingga back4app dapat mengidentifikasi file statis variabel lingkungan tambahkan kunci api atau pengaturan yang diperlukan oleh aplikasi anda 7 5 mengkontainerisasi aplikasi preact anda dengan docker jika anda lebih suka docker, sertakan sebuah dockerfile di repositori anda yang mirip dengan \# use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files copy package json / \# install dependencies run npm install \# copy the source code copy \# build the app run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] pilih opsi penyebaran docker di pengaturan penyebaran web back4app anda 7 6 menyebarkan aplikasi anda klik tombol deploy setelah konfigurasi selesai pantau proses pembangunan saat back4app mengambil kode anda, membangun, dan menyebarkan aplikasi anda setelah selesai, back4app akan memberikan url di mana aplikasi anda dihosting 7 7 memverifikasi penyebaran anda kunjungi url yang diberikan untuk melihat situs anda secara langsung uji semua fungsionalitas untuk memastikan setiap fitur, termasuk rute dan aset, dimuat dengan benar jika terjadi masalah, tinjau log konsol browser dan log penyebaran di back4app langkah 8 – penutupan dan arah masa depan kerja bagus! anda telah berhasil mengembangkan aplikasi crud penuh menggunakan preact dan back4app anda telah menyiapkan proyek bernama basic crud app preact , mendefinisikan koleksi database yang kuat, dan menggunakan admin app untuk manajemen data yang efisien anda kemudian menghubungkan frontend preact anda ke backend anda dan menerapkan kontrol akses yang ketat apa selanjutnya? tingkatkan aplikasi preact anda dengan fitur tambahan seperti tampilan rinci, kemampuan pencarian, dan pembaruan waktu nyata gabungkan logika backend yang lebih canggih seperti cloud functions atau integrasi api pihak ketiga konsultasikan dokumentasi back4app https //www back4app com/docs dan sumber daya lainnya untuk wawasan yang lebih dalam tentang optimasi dan konfigurasi kustom dengan mengikuti tutorial ini, anda telah memperoleh keterampilan untuk membangun backend crud yang dapat diskalakan dan aman untuk aplikasi preact anda menggunakan back4app selamat coding dan menjelajahi fitur baru!