How to Build a CRUD App with Astro?

ikhtisar dalam panduan ini, anda akan belajar cara membuat aplikasi web crud (buat, baca, perbarui, dan hapus) menggunakan astro tutorial ini memandu anda melalui pengaturan proyek back4app—backend kami yang kuat—dan merancang struktur data yang mendukung operasi dasar kami kemudian akan membangun frontend astro yang berkomunikasi dengan back4app melalui api rest/graphql, memastikan manajemen data yang aman dan efisien pada akhir panduan ini, anda akan memiliki aplikasi web siap produksi lengkap dengan otentikasi pengguna dan penanganan data yang aman apa yang akan anda pelajari cara menyusun aplikasi crud dengan astro dan back4app merancang backend yang dapat diskalakan dengan koleksi kustom menggunakan antarmuka admin drag and drop untuk manajemen data yang mudah mengintegrasikan frontend astro anda dengan back4app menggunakan rest atau graphql menyebarkan proyek astro anda dan mengcontainerize nya dengan docker jika diperlukan prasyarat sebelum anda mulai, harap konfirmasi bahwa anda memiliki akun back4app dengan proyek baru yang siap lihat memulai dengan back4app https //www back4app com/docs/get started/new parse app untuk panduan lingkungan pengembangan astro yang sudah disiapkan gunakan dokumentasi resmi astro https //docs astro build untuk memulai pastikan node js (versi 14+) terinstal pemahaman dasar tentang javascript, astro, dan rest api kunjungi dokumentasi astro https //docs astro build jika anda perlu penyegaran langkah 1 – menginisialisasi proyek anda memulai proyek back4app baru masuk ke akun back4app anda klik “aplikasi baru” dari dasbor anda beri nama proyek anda basic crud app astro dan ikuti instruksi untuk menyelesaikan pengaturan buat proyek baru setelah dibuat, proyek anda akan muncul di dasbor back4app anda—fondasi anda untuk konfigurasi backend langkah 2 – membuat skema database anda menyusun model data anda untuk aplikasi crud kami, anda akan mendefinisikan beberapa koleksi di bawah ini adalah contoh koleksi dengan bidang dan tipe untuk membantu anda mengonfigurasi skema database anda secara efektif struktur ini mendukung operasi crud yang efisien 1\ koleksi barang bidang tipe tujuan id objectid kunci utama yang dihasilkan secara otomatis judul string nama atau judul item deskripsi string gambaran singkat tentang item tersebut dibuat pada tanggal stempel waktu pembuatan diperbarui pada tanggal stempel waktu untuk modifikasi terakhir 2\ koleksi pengguna bidang tipe tujuan id objectid kunci utama yang dihasilkan secara otomatis nama pengguna string pengidentifikasi unik untuk pengguna email string alamat email pengguna hash kata sandi string kata sandi terenkripsi untuk otentikasi dibuat pada tanggal ketika akun dibuat diperbarui pada tanggal waktu pembaruan terakhir untuk akun anda dapat mengonfigurasi koleksi ini secara manual di dasbor back4app anda dengan membuat kelas baru dan menambahkan kolom yang sesuai buat kelas baru untuk menambahkan sebuah field, pilih tipe data, berikan nama field, tentukan default jika diperlukan, dan tandai apakah field tersebut wajib buat kolom memanfaatkan agen ai back4app untuk pengaturan skema agen ai terintegrasi di back4app dapat menghasilkan skema anda secara otomatis deskripsikan koleksi dan field yang anda inginkan di antarmuka agen ai, tinjau rekomendasinya, dan 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 created) \ 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) alat ini mempercepat pengaturan sambil memastikan skema anda memenuhi persyaratan aplikasi langkah 3 – mengaktifkan antarmuka admin & tindakan crud menjelajahi antarmuka admin aplikasi admin back4app adalah alat tanpa kode yang menyediakan antarmuka visual untuk mengelola data backend anda desain drag and drop nya memungkinkan anda melakukan operasi crud dengan mudah mengaktifkan antarmuka admin buka menu “lainnya” di dasbor back4app anda pilih “aplikasi admin” dan klik “aktifkan aplikasi admin ” atur kredensial admin anda dengan membuat pengguna admin awal ini juga akan mengonfigurasi peran default (misalnya, b4aadminuser ) dan koleksi sistem aktifkan aplikasi admin setelah aktivasi, masuk ke aplikasi admin untuk mengelola koleksi anda dasbor aplikasi admin mengelola data dengan antarmuka admin di dalam aplikasi admin anda dapat tambahkan rekaman klik “tambahkan rekaman” di koleksi (seperti item) untuk membuat entri baru lihat/edit rekaman klik pada sebuah rekaman untuk memeriksa atau mengubah bidangnya hapus rekaman hapus entri yang tidak lagi diperlukan dengan mudah alat ini menyederhanakan operasi crud dengan antarmuka yang intuitif langkah 4 – menghubungkan astro dengan back4app dengan backend anda yang sudah dikonfigurasi, saatnya untuk mengintegrasikan frontend astro anda memanfaatkan rest/graphql apis karena astro adalah generator situs statis yang dioptimalkan untuk kinerja, kita akan berinteraksi dengan back4app menggunakan rest atau graphql apis pendekatan ini menghindari kebutuhan akan parse sdk contoh mengambil item melalui rest di bawah ini adalah contoh panggilan api rest dalam komponen astro // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { 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(); setitems(data results); } catch (error) { console error('failed to fetch items ', error); } }; fetchitems(); }, \[]); \ \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} – {item description} \</li> ))} \</ul> \</div> integrasikan panggilan api serupa untuk membuat, memperbarui, dan menghapus catatan dalam komponen astro anda langkah 5 – melindungi backend anda mengimplementasikan daftar kontrol akses (acl) lindungi data anda dengan mengatur acl pada objek misalnya, untuk membuat item yang hanya dapat dimodifikasi oleh pemiliknya async function createprivateitem(data, owner) { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title data title, description data description, acl { \[owner id] { read true, write true }, ' ' { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } mengonfigurasi izin tingkat kelas (clp) di dalam dasbor back4app, sesuaikan clp untuk setiap koleksi untuk mendefinisikan siapa yang dapat mengakses dan memodifikasi data anda langkah 6 – menambahkan autentikasi pengguna mengatur pendaftaran dan masuk pengguna back4app menggunakan kelas pengguna parse untuk otentikasi dalam proyek astro anda, buat komponen untuk pendaftaran dan masuk pengguna dengan memanfaatkan panggilan rest api contoh pendaftaran pengguna // src/components/signup astro \ import { usestate } from 'react'; const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (event) => { event preventdefault(); try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username, password, email }) }); const result = await response json(); alert('sign up successful!'); } catch (error) { alert('error during sign up ' + error message); } }; \ \<form on\ submit={handlesignup}> \<input type="text" placeholder="username" value={username} oninput={(e) => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} oninput={(e) => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} oninput={(e) => setemail(e target value)} /> \<button type="submit">register\</button> \</form> anda dapat membangun komponen serupa untuk masuk pengguna dan manajemen sesi langkah 7 – menerapkan frontend astro anda fitur web deployment back4app memungkinkan anda untuk menghosting proyek astro anda dengan mulus dengan menghubungkan repositori github anda 7 1 membangun versi produksi anda buka terminal di direktori proyek anda jalankan perintah build npm run build ini menghasilkan folder dist yang dioptimalkan dengan aset statis anda periksa build pastikan bahwa folder dist berisi sebuah index html bersama dengan direktori aset lainnya 7 2 mengorganisir repositori proyek anda repositori anda harus mencakup kode sumber astro yang lengkap struktur contoh mungkin seperti ini basic crud app astro/ ├── node modules/ ├── public/ │ └── favicon ico ├── src/ │ ├── components/ │ │ ├── itemslist astro │ │ └── signup astro │ └── pages/ │ └── index astro ├── package json └── readme md contoh file src/components/itemslist astro // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { const getitems = async () => { try { const res = 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 json = await res json(); setitems(json results); } catch (err) { console error('error retrieving items ', err); } }; getitems(); }, \[]); \ \<div> \<h2>item list\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> 7 3 mengkomit dan mendorong kode anda ke github inisialisasi repositori git (jika belum dilakukan) git init tambahkan semua file git add komit perubahan anda git commit m "komit awal untuk frontend astro" buat repositori di github (misalnya, basic crud app astro ) dan dorong git remote add origin https //github com/your username/basic crud app astro git git push u origin main 7 4 menghubungkan github dengan penyebaran web back4app akses web deployment masuk ke dasbor back4app anda, navigasikan ke proyek anda ( basic crud app astro ), dan pilih opsi web deployment hubungkan akun github anda ikuti petunjuk untuk mengizinkan back4app mengakses repositori anda pilih repositori dan cabang anda pilih repositori (misalnya, basic crud app astro ) dan cabang (biasanya main ) 7 5 mengonfigurasi pengaturan deployment perintah build tentukan perintah build (misalnya, npm run build ) jika repositori anda tidak memiliki output yang sudah dibangun direktori output atur ke dist sehingga back4app tahu di mana menemukan file statis anda variabel lingkungan tambahkan variabel yang diperlukan, seperti kunci api 7 6 dockerizing aplikasi astro anda (opsional) jika anda lebih suka penyebaran terkontainer, sertakan sebuah dockerfile seperti \# use an official node image for building from node 16 alpine as builder \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source files and build the project copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] integrasikan pengaturan docker dalam konfigurasi penyebaran web anda jika diinginkan 7 7 meluncurkan aplikasi anda tekan tombol deploy di bagian penyebaran web pantau proses pembangunan back4app akan mengambil kode anda, membangunnya, dan menyebarkan aplikasi anda terima url anda setelah disebarkan, back4app akan menyediakan url di mana situs anda aktif langkah 8 – menyelesaikan dan peningkatan masa depan kerja bagus! anda sekarang telah membuat aplikasi crud lengkap dengan astro dan back4app proyek anda mencakup backend dengan koleksi terperinci untuk item dan pengguna, serta frontend yang melakukan semua operasi crud melalui rest/graphql api langkah selanjutnya tingkatkan frontend tambahkan fitur seperti tampilan terperinci, kemampuan pencarian, dan notifikasi waktu nyata perluas fungsionalitas backend pertimbangkan untuk mengintegrasikan fungsi cloud atau endpoint api tambahan untuk logika yang lebih kompleks selami lebih dalam jelajahi sumber daya lebih lanjut di dokumentasi back4app https //www back4app com/docs dan dokumentasi astro https //docs astro build untuk topik lanjutan dengan mengikuti tutorial ini, anda sekarang memiliki pengetahuan untuk membangun aplikasi crud yang kuat dan dapat diskalakan menggunakan astro dan back4app selamat coding dan menjelajahi kemungkinan baru!