How to Create a CRUD Application with Svelte?

ikhtisar dalam panduan ini, anda akan belajar bagaimana membangun aplikasi crud (buat, baca, perbarui, hapus) lengkap menggunakan svelte kami akan memanfaatkan back4app sebagai platform backend kami, yang menawarkan backend low code yang kuat untuk mengelola data aplikasi anda panduan ini menjelaskan cara mengatur proyek back4app, merancang skema data yang fleksibel, dan menerapkan operasi crud dalam aplikasi svelte pertama, anda akan membuat proyek back4app berjudul basic crud app svelte proyek ini membentuk dasar pengaturan backend anda, di mana anda akan mendefinisikan skema data anda baik secara manual atau dengan bantuan ai agent terintegrasi dari back4app selanjutnya, anda akan menjelajahi aplikasi admin back4app—antarmuka yang ramah pengguna untuk manajemen data—yang memungkinkan anda untuk dengan mudah melakukan operasi crud akhirnya, anda akan menghubungkan aplikasi svelte anda ke back4app, memanfaatkan baik parse javascript sdk atau panggilan api rest/graphql langsung, sambil memastikan penanganan data yang aman pada akhir tutorial ini, anda akan memiliki aplikasi svelte yang sepenuhnya fungsional yang melakukan tugas crud dasar bersama dengan otentikasi pengguna yang aman apa yang akan anda pelajari cara mengatur aplikasi crud berbasis svelte dengan backend yang fleksibel metode untuk mengorganisir backend anda dan menghubungkannya ke aplikasi svelte anda cara memanfaatkan aplikasi admin back4app untuk operasi data yang mulus strategi untuk menerapkan aplikasi svelte anda, termasuk kontainerisasi docker prasyarat sebelum anda mulai, pastikan anda memiliki akun back4app dengan proyek aktif butuh bantuan? kunjungi panduan memulai back4app https //www back4app com/docs/get started/new parse app untuk panduan pengaturan pengembangan svelte anda dapat menggunakan editor kode seperti vscode dan pastikan node js terinstal pemahaman dasar tentang svelte, javascript, dan rest api tinjau dokumentasi svelte https //svelte dev/docs jika diperlukan langkah 1 – menyiapkan proyek anda meluncurkan proyek back4app baru masuk ke akun back4app anda tekan tombol “aplikasi baru” di dasbor anda beri nama proyek anda basic crud app svelte dan ikuti instruksi di layar untuk menyelesaikan pengaturan buat proyek baru setelah membuat proyek anda, anda akan melihatnya di dasbor anda, yang berfungsi sebagai dasar untuk mengonfigurasi backend anda langkah 2 – membuat skema data menyusun data anda untuk aplikasi crud ini, anda perlu mendefinisikan beberapa koleksi di proyek back4app anda di bawah ini adalah contoh koleksi kunci dan bidang yang diperlukan untuk mendukung operasi crud svelte anda 1\ koleksi item koleksi ini menyimpan informasi untuk setiap item bidang tipe rincian id objectid pengidentifikasi unik yang dihasilkan secara otomatis judul string nama atau judul item deskripsi string deskripsi singkat tentang item tersebut dibuatpada tanggal stempel waktu ketika item dibuat diperbaruipada tanggal timestamp untuk pembaruan terakhir pada item 2\ koleksi pengguna koleksi ini mengelola kredensial pengguna dan detail otentikasi bidang tipe rincian id objectid pengidentifikasi unik yang dihasilkan secara otomatis nama pengguna string nama pengguna yang unik untuk setiap pengguna email string alamat email pengguna hashkatasandi string kata sandi terenkripsi untuk otentikasi dibuatpada tanggal stempel waktu pembuatan akun diperbaruipada tanggal timestamp untuk pembaruan akun terakhir anda dapat membuat koleksi ini dan mendefinisikan bidang langsung dari dasbor back4app anda buat kelas baru anda dapat menambahkan bidang dengan memilih jenis yang sesuai, memberi nama pada bidang, mengatur nilai default, dan menandainya sebagai wajib buat kolom menggunakan agen ai back4app untuk generasi skema cepat agen ai terintegrasi di back4app dapat secara otomatis mengatur skema data anda berdasarkan deskripsi sederhana alat ini memperlancar proses pengaturan dan memastikan bahwa skema anda dioptimalkan untuk operasi crud cara memanfaatkan agen ai buka ai agent di pengaturan proyek anda di dasbor back4app, temukan ai agent rincikan persyaratan skema anda berikan prompt yang jelas yang menguraikan koleksi dan bidang yang anda butuhkan tinjau dan konfirmasi periksa skema yang diusulkan dan konfirmasi untuk menerapkannya contoh prompt create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) metode ini menghemat waktu dan memastikan skema backend anda selaras dengan kebutuhan aplikasi anda langkah 3 – mengelola data dengan aplikasi admin ikhtisar aplikasi admin aplikasi admin back4app menawarkan lingkungan tanpa kode untuk mengelola data backend anda dengan antarmuka seret dan lepas, anda dapat dengan mudah melakukan operasi seperti menambahkan, mengedit, dan menghapus catatan mengaktifkan aplikasi admin pergi ke menu “lainnya” di dasbor back4app anda pilih “aplikasi admin” dan kemudian klik pada “aktifkan aplikasi admin ” siapkan akun admin anda dengan mengikuti petunjuk untuk menetapkan kredensial anda proses ini juga akan mengatur peran (seperti b4aadminuser ) dan konfigurasi sistem lainnya aktifkan aplikasi admin setelah diaktifkan, masuk ke aplikasi admin untuk mengelola data proyek anda secara efektif dasbor aplikasi admin cara menggunakan aplikasi admin masukkan rekor baru gunakan fitur “tambahkan rekor” dalam koleksi (seperti item) untuk memperkenalkan data baru periksa atau edit rekor klik pada sebuah rekor untuk melihat detailnya atau mengubah bidangnya hapus rekor hapus entri data yang sudah usang atau tidak diperlukan antarmuka intuitif ini membuat pengelolaan data backend anda menjadi sederhana dan efisien langkah 4 – menghubungkan aplikasi svelte anda ke back4app sekarang setelah backend anda disiapkan, saatnya menghubungkan aplikasi svelte anda ke back4app opsi a menggunakan parse javascript sdk instal sdk gunakan npm atau yarn untuk menginstal parse javascript sdk npm install parse inisialisasi parse di aplikasi svelte anda di file javascript utama anda (misalnya, src/main js ), inisialisasi parse // src/main js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; // kode inisialisasi aplikasi svelte anda mengikuti implementasikan fungsi crud buat modul (misalnya, src/services/items js ) untuk menangani operasi crud // src/services/items js import parse from 'parse'; export async function fetchitems() { const query = new parse query("items"); try { const results = await query find(); return results; } catch (error) { console error("error fetching items ", error); return \[]; } } export async function additem(title, description) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); try { await item save(); console log("item berhasil dibuat!"); } catch (error) { console error("error creating item ", error); } } export async function updateitem(objectid, newtitle, newdescription) { const query = new parse query("items"); try { const item = await query get(objectid); item set("title", newtitle); item set("description", newdescription); await item save(); console log("item berhasil diperbarui!"); } catch (error) { console error("error updating item ", error); } } export async function removeitem(objectid) { const query = new parse query("items"); try { const item = await query get(objectid); await item destroy(); console log("item berhasil dihapus!"); } catch (error) { console error("error deleting item ", error); } } opsi b menggunakan rest/graphql api jika sdk parse tidak ideal untuk kasus penggunaan anda, anda dapat langsung memanggil endpoint rest atau graphql back4app misalnya, untuk mengambil item melalui rest export async function getitemsrest() { 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(); return data results; } catch (error) { console error("rest error fetching items ", error); return \[]; } } integrasikan panggilan api ini dalam komponen svelte anda sesuai kebutuhan langkah 5 – mengamankan backend anda menggunakan daftar kontrol akses (acl) tingkatkan keamanan data anda dengan mengatur acl pada objek anda misalnya, untuk membuat item yang hanya terlihat oleh pemiliknya import parse from 'parse'; export async function createprivateitem(title, description, owner) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log("private item successfully created!"); } catch (error) { console error("error saving private item ", error); } } mengatur izin tingkat kelas (clp) konfigurasikan clp langsung di dasbor back4app anda untuk membatasi akses sehingga hanya pengguna yang terautentikasi yang dapat berinteraksi dengan koleksi tertentu langkah 6 – menerapkan autentikasi pengguna di svelte mengatur akun pengguna back4app memanfaatkan koleksi pengguna bawaan parse untuk mengelola autentikasi di aplikasi svelte anda, terapkan fungsi pendaftaran dan login yang mirip dengan contoh di bawah ini import parse from 'parse'; export async function registeruser(username, password, email) { const user = new parse user(); user set("username", username); user set("password", password); user set("email", email); try { await user signup(); console log("user registered successfully!"); } catch (error) { console error("registration error ", error); } } export async function loginuser(username, password) { try { const user = await parse user login(username, password); console log("user logged in ", user get("username")); } catch (error) { console error("login failed ", error); } } pendekatan ini dapat diperluas untuk mengelola sesi, reset kata sandi, dan fitur otentikasi tambahan langkah 7 – menerapkan aplikasi svelte anda back4app menyederhanakan proses penerapan anda dapat menerapkan aplikasi svelte anda menggunakan beberapa metode, termasuk kontainerisasi docker 7 1 bangun aplikasi svelte anda kompilasi aplikasi anda jalankan perintah build svelte anda, biasanya npm run build tinjau build pastikan bahwa file yang dihasilkan (biasanya di dalam public atau build folder) mencakup semua aset yang diperlukan 7 2 contoh struktur proyek struktur proyek svelte yang khas mungkin terlihat seperti basic crud app svelte/ \| public/ \| | build/ \| | global css \| | index html \| src/ \| | components/ \| | | itemlist svelte \| | | itemform svelte \| | services/ \| | | items js \| | | auth js \| | app svelte \| | main js \| package json \| readme md 7 3 menggunakan docker untuk aplikasi svelte anda jika anda lebih suka penerapan terkontainer, buat sebuah dockerfile di root proyek anda \# use a node js image to build the app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the project files and build the app copy run npm run build \# use a lightweight server to serve the built files from nginx\ alpine copy from=build /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 penyebaran melalui penyebaran web back4app tautkan repositori github anda hosting proyek svelte anda di github atur penyebaran di back4app di dasbor back4app, pilih opsi penyebaran web , sambungkan repositori anda (misalnya, basic crud app svelte ), dan pilih cabang target anda tentukan pengaturan build tentukan perintah build anda (seperti npm run build ) dan tunjukkan ke direktori output build terapkan aplikasi anda klik terapkan dan pantau log sampai aplikasi anda aktif langkah 8 – penutupan dan peningkatan masa depan selamat! anda telah membangun aplikasi crud berbasis svelte yang terhubung ke back4app anda mengatur proyek bernama basic crud app svelte , mengonfigurasi koleksi untuk item dan pengguna, dan mengelola data anda melalui aplikasi admin back4app anda kemudian mengintegrasikan frontend svelte anda menggunakan parse javascript sdk (atau rest/graphql) dan menambahkan langkah langkah keamanan yang kuat apa selanjutnya? perluas fungsionalitas tambahkan fitur seperti pencarian lanjutan, tampilan detail, atau pembaruan waktu nyata tingkatkan logika backend eksperimen dengan fungsi cloud, integrasi api pihak ketiga, atau kontrol akses berbasis peran perdalam pembelajaran anda jelajahi tutorial lebih lanjut dan dokumentasi back4app https //www back4app com/docs untuk mengoptimalkan aplikasi anda selamat coding dan nikmati membangun aplikasi crud svelte anda!