How to Build a CRUD App with SvelteKit? A Comprehensive Tutorial

ikhtisar dalam panduan ini, anda akan membuat aplikasi crud sederhana (buat, baca, perbarui, hapus) menggunakan sveltekit kami akan menunjukkan cara melakukan operasi data standar dan mengelola backend aplikasi web anda dengan back4app tutorial dimulai dengan menyiapkan proyek back4app yang berjudul basic crud app sveltekit , yang berfungsi sebagai backend yang kuat anda kemudian akan merancang skema basis data yang dapat disesuaikan dengan membuat koleksi dan bidang secara manual, atau dengan memanfaatkan ai agent back4app ini memastikan bahwa model data anda dioptimalkan untuk operasi crud yang efisien selanjutnya, anda akan menggunakan aplikasi admin back4app—alat tanpa kode, seret dan lepas—untuk mengelola koleksi anda, menyederhanakan proses manajemen data anda akhirnya, anda akan mengintegrasikan frontend sveltekit anda dengan back4app menggunakan rest api langkah langkah keamanan lanjutan, seperti kontrol akses, juga akan dikonfigurasi untuk melindungi backend anda pada akhir tutorial ini, anda akan memiliki aplikasi web yang siap produksi yang mendukung operasi crud bersama dengan otentikasi pengguna dan pembaruan data dinamis poin utama kuasi pembuatan aplikasi crud yang secara efektif menangani data dengan backend yang dapat diandalkan pahami cara menyusun database yang dapat diskalakan dan menghubungkannya dengan frontend sveltekit pelajari cara memanfaatkan alat admin visual (aplikasi admin back4app) untuk melakukan operasi data dengan lancar jelajahi strategi penyebaran, termasuk kontainerisasi docker, untuk meluncurkan aplikasi anda dengan cepat prasyarat sebelum anda mulai, pastikan anda memiliki akun back4app dengan proyek baru yang siap lihat panduan memulai dengan back4app https //www back4app com/docs/get started/new parse app untuk panduan lingkungan pengembangan sveltekit instal sveltekit mengikuti dokumentasi resmi https //kit svelte dev/docs pemahaman dasar tentang javascript, sveltekit, dan rest api lihat dokumentasi sveltekit https //kit svelte dev/docs untuk detail lebih lanjut langkah 1 – inisialisasi proyek menyiapkan proyek back4app baru masuk ke dasbor back4app anda klik tombol “aplikasi baru” di dasbor anda masukkan nama proyek basic crud app sveltekit dan ikuti petunjuk di layar untuk membuat proyek anda buat proyek baru setelah dibuat, proyek baru anda muncul di dasbor anda, menyediakan platform yang stabil untuk konfigurasi backend langkah 2 – membuat skema database merumuskan model data anda untuk aplikasi crud kami, kami perlu membuat beberapa koleksi berikut adalah contoh yang menguraikan koleksi yang diperlukan dan bidangnya untuk mengatur skema database anda untuk melakukan operasi crud 1\ koleksi barang koleksi ini menyimpan rincian tentang setiap barang bidang tipe data deskripsi id objectid kunci utama yang dihasilkan secara otomatis judul string judul item deskripsi string gambaran singkat tentang item tersebut dibuat pada tanggal timestamp ketika item dibuat diperbarui pada tanggal timestamp untuk pembaruan terbaru 2\ koleksi pengguna koleksi ini menyimpan kredensial pengguna dan detail profil bidang tipe data deskripsi id objectid kunci utama yang dihasilkan secara otomatis nama pengguna string pengidentifikasi unik untuk pengguna email string alamat email pengguna yang unik hash kata sandi string kata sandi terenkripsi untuk otentikasi dibuat pada tanggal stempel waktu pembuatan akun diperbarui pada tanggal timestamp untuk pembaruan profil terbaru anda dapat membuat koleksi ini secara manual di dasbor back4app dengan membuat kelas baru untuk masing masing dan menambahkan kolom yang sesuai buat kelas baru tentukan setiap bidang dengan memilih tipe data yang sesuai, menamakannya, mengatur nilai default, dan menandainya sebagai wajib jika perlu buat kolom mengotomatiskan pembuatan skema dengan agen ai back4app agen ai back4app menyederhanakan proses pengaturan skema langsung dari dasbor anda dengan memasukkan prompt yang menggambarkan koleksi dan bidang anda, anda dapat secara otomatis menghasilkan struktur basis data anda cara menggunakan agen ai akses agen ai buka dasbor back4app anda dan navigasikan ke agen ai dalam pengaturan proyek anda deskripsikan model anda tempelkan prompt rinci yang menjelaskan koleksi dan bidang yang anda butuhkan tinjau dan konfirmasi setelah pengiriman, tinjau koleksi dan definisi bidang yang dihasilkan, lalu terapkan ke proyek anda contoh prompt create the following 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 memastikan skema anda konsisten dan dioptimalkan langkah 3 – mengaktifkan aplikasi admin & melaksanakan operasi crud memperkenalkan aplikasi admin aplikasi admin back4app menawarkan antarmuka visual untuk mengelola backend anda dengan mudah dengan fitur seret dan lepas, melakukan operasi crud menjadi sederhana mengaktifkan aplikasi admin pergi ke bagian “more” di dasbor back4app anda pilih “aplikasi admin” lalu klik “aktifkan aplikasi admin ” atur kredensial admin buat pengguna admin awal untuk menetapkan peran (misalnya, b4aadminuser ) dan koleksi sistem aktifkan aplikasi admin setelah aktivasi, masuk ke aplikasi admin untuk mulai mengelola data anda dasbor aplikasi admin mengelola operasi crud dengan aplikasi admin di dalam aplikasi admin anda dapat menambahkan rekaman klik tombol “tambah 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 gunakan opsi hapus untuk menghilangkan entri yang tidak lagi diperlukan antarmuka intuitif ini secara signifikan menyederhanakan proses manajemen data anda langkah 4 – menghubungkan sveltekit dengan back4app dengan backend anda dikonfigurasi melalui aplikasi admin, saatnya menghubungkan frontend sveltekit anda ke back4app memanfaatkan rest api di sveltekit anda akan melakukan operasi crud menggunakan panggilan rest api contoh mengambil data buat endpoint atau komponen sveltekit yang mengambil item dari back4app \<! src/routes/items svelte > \<script> import { onmount } from 'svelte'; let items = \[]; const loaditems = 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(); items = data results; } catch (error) { console error('failed to fetch items ', error); } }; onmount(loaditems); \</script> \<h2>items\</h2> \<ul> {#each items as item (item objectid)} \<li>{item title} – {item description}\</li> {/each} \</ul> integrasikan panggilan api serupa dalam komponen sveltekit anda untuk operasi buat, perbarui, dan hapus langkah 5 – mengamankan backend anda mengonfigurasi daftar kontrol akses (acl) lindungi data anda dengan mengatur acl untuk setiap objek misalnya, untuk membuat item pribadi async function createprivateitem(itemdata, ownerid) { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } mengatur izin tingkat kelas (clp) di dasbor back4app, konfigurasikan clp untuk setiap koleksi sehingga hanya pengguna yang berwenang yang dapat mengakses data sensitif langkah 6 – mengimplementasikan autentikasi pengguna mengelola akun pengguna back4app menggunakan kelas pengguna parse untuk autentikasi di aplikasi sveltekit anda, atur formulir pendaftaran dan login yang berinteraksi dengan back4app melalui panggilan rest api contoh pendaftaran pengguna \<! src/routes/signup svelte > \<script> let username = ''; let email = ''; let password = ''; const handlesignup = async () => { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, email, password }) }); const data = await response json(); if (data objectid) { alert('registration successful!'); } else { alert('sign up failed ' + data error); } } catch (error) { console error('error during sign up ', error); } }; \</script> \<form on\ submit|preventdefault={handlesignup}> \<input type="text" placeholder="username" bind\ value={username} /> \<input type="email" placeholder="email" bind\ value={email} /> \<input type="password" placeholder="password" bind\ value={password} /> \<button type="submit">register\</button> \</form> metode serupa dapat diterapkan untuk login pengguna dan manajemen sesi langkah 7 – menerapkan frontend sveltekit anda fitur penerapan web back4app memungkinkan anda untuk menghosting frontend sveltekit anda dengan menghubungkannya ke repositori github bagian ini membahas cara membangun file produksi anda, mendorong kode sumber anda, dan menerapkan situs anda 7 1 membuat build produksi buka terminal anda di direktori proyek jalankan perintah build npm run build ini menghasilkan folder build (atau output ) dengan aset statis yang dioptimalkan verifikasi build pastikan folder build berisi index html dan semua direktori aset yang diperlukan 7 2 menyusun dan mengunggah kode anda repositori anda harus memiliki kode sumber sveltekit yang lengkap struktur yang umum mungkin adalah basic crud app sveltekit/ ├── node modules/ ├── static/ │ └── global css ├── src/ │ ├── routes/ │ │ ├── items svelte │ │ └── signup svelte │ └── lib/ │ └── api js ├── package json └── readme md contoh file api src/lib/api js export const fetchitems = async () => { 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 data = await res json(); return data results; }; komit ke github inisialisasi git (jika belum dilakukan) git init tambahkan file anda git add komit perubahan anda git commit m "komit awal untuk frontend sveltekit" buat repositori github namai, misalnya, basic crud app sveltekit dorong kode anda git remote add origin https //github com/your username/basic crud app sveltekit git git push u origin main 7 3 menghubungkan repositori github anda dengan penyebaran web buka penyebaran web masuk ke back4app, navigasikan ke proyek anda (basic crud app sveltekit), dan pilih opsi penyebaran web hubungkan ke github ikuti petunjuk untuk menghubungkan akun github anda agar back4app dapat mengakses repositori anda pilih repositori dan cabang anda pilih repositori sveltekit anda (misalnya, basic crud app sveltekit ) dan cabang yang berisi kode anda (biasanya main ) 7 4 menyiapkan penyebaran anda sediakan pengaturan tambahan ini perintah build jika tidak ada folder yang sudah dibangun, atur perintah (misalnya, npm run build ) direktori output tentukan folder (biasanya build atau output ) yang menyimpan file statis anda variabel lingkungan tambahkan variabel yang diperlukan seperti kunci api 7 5 mengdockerisasi aplikasi sveltekit anda jika docker adalah pilihan penyebaran anda, sertakan dockerfile di repositori anda \# use a node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire source code and build the app copy run npm run build \# use nginx to serve the built files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] konfigurasikan penyebaran web untuk menggunakan docker jika diinginkan 7 6 menerapkan aplikasi anda klik tombol deploy setelah konfigurasi selesai, tekan tombol deploy pantau penerapan back4app akan mengambil kode anda, menjalankan build, dan menerapkan aplikasi anda dalam sebuah kontainer dapatkan url anda setelah penerapan berhasil, back4app menyediakan url untuk aplikasi sveltekit yang dihosting 7 7 memvalidasi penerapan anda kunjungi url buka url yang diberikan di browser anda uji fungsionalitas pastikan aplikasi anda dimuat dengan benar, rute berfungsi, dan semua aset disajikan dengan baik debug jika diperlukan gunakan alat pengembang browser untuk memeriksa kesalahan, dan tinjau log back4app untuk pemecahan masalah langkah 8 – penutupan dan arah masa depan selamat telah membangun aplikasi crud lengkap dengan sveltekit dan back4app! anda telah menyiapkan proyek bernama basic crud app sveltekit , membuat koleksi terperinci untuk item dan pengguna, dan mengelola backend anda melalui aplikasi admin selain itu, anda mengintegrasikan frontend sveltekit anda melalui rest api dan menerapkan kontrol akses yang ketat peningkatan masa depan perluas frontend anda tingkatkan aplikasi sveltekit anda dengan tampilan terperinci, kemampuan pencarian, dan notifikasi waktu nyata tambahkan fitur lanjutan terapkan logika sisi server (misalnya, cloud functions), integrasikan api pihak ketiga, atau aktifkan izin berbasis peran perdalam pengetahuan anda kunjungi dokumentasi back4app https //www back4app com/docs dan jelajahi lebih banyak tutorial untuk perbaikan kinerja dan integrasi kustom tutorial ini telah membekali anda dengan keterampilan yang diperlukan untuk membuat backend crud yang dapat diskalakan untuk aplikasi sveltekit anda menggunakan back4app selamat coding dan selamat membangun!