Cara Membangun Frontend Svelte dan Menghubungkannya ke Backend?

dalam tutorial ini, anda akan membangun aplikasi daftar tugas menggunakan svelte dan menghubungkannya ke layanan backend yang dikelola yang didukung oleh back4app panduan ini dirancang untuk anda jika anda ingin menguasai operasi crud (buat, baca, perbarui, hapus) yang penting dan membuat antarmuka yang intuitif menggunakan svelte pada akhir tutorial, aplikasi anda akan berinteraksi dengan mulus dengan backend yang menangani penyimpanan data, otentikasi, dan lainnya mengembangkan aplikasi full stack bisa menjadi kompleks karena konfigurasi backend dan manajemen database untuk menyederhanakan pekerjaan anda, kami menggunakan back4app—sebuah backend as a service —sehingga anda dapat fokus pada pembangunan frontend svelte yang dinamis back4app menyediakan database nosql yang sepenuhnya dikelola, otentikasi, cloud code untuk logika kustom, dan sdk untuk integrasi yang mulus ini memungkinkan anda untuk menerapkan aplikasi yang dapat diskalakan tanpa mengelola infrastruktur server poin penting dengan mengikuti tutorial ini, anda akan menginisialisasi proyek svelte modern dengan vite mengintegrasikan layanan backend dengan mulus untuk mengelola data aplikasi anda menerapkan operasi crud yang penting untuk sebuah daftar tugas menerapkan aplikasi fungsional penuh anda menggunakan alur kerja terkontainer di back4app prasyarat sebelum anda mulai, pastikan anda memiliki node js dan npm terinstal di mesin anda verifikasi dengan node v dan npm v pengetahuan dasar svelte , termasuk komponen, variabel reaktif, dan penanganan acara akun back4app untuk mengelola layanan backend anda daftar di back4app https //www back4app com/ jika anda belum memilikinya dengan prasyarat ini, anda siap untuk mulai membangun proyek anda pengaturan proyek mulailah dengan mengatur lingkungan pengembangan lokal anda dan menginisialisasi proyek svelte baru menggunakan vite pastikan anda memiliki node js (versi lts) terinstal jika tidak, unduh dari nodejs org https //nodejs org/ buat proyek svelte anda dengan menjalankan npm create vite\@latest todo app template svelte ubah ke direktori proyek anda cd todo app instal dependensi yang diperlukan npm install mulai server pengembangan untuk memverifikasi pengaturan npm run dev buka url yang diberikan di browser anda untuk melihat aplikasi svelte anda beraksi dengan frontend siap, lanjutkan untuk membuat backend anda di back4app membuat backend todo back4app menawarkan layanan backend yang sepenuhnya dikelola yang didukung oleh parse ini mencakup database nosql, otentikasi, cloud code, dan api yang dihasilkan secara otomatis ikuti langkah langkah ini untuk mengatur backend anda masuk ke dasbor back4app https //www back4app com/ dan klik "buat aplikasi baru " beri nama aplikasi anda (misalnya, todoapp ) dan pilih nodejs/parse sebagai jenis backend navigasi ke "database" > "browser" , klik "buat kelas" , dan pilih "kustom" nama kelas task dan atur izin untuk memungkinkan baca dan tulis publik (anda dapat memperbaiki ini nanti) di kelas task , tambahkan bidang berikut judul (string) – judul tugas deskripsi (string) – detail tentang tugas selesai (boolean) – status penyelesaian tugas tanggaljatuhtempo (tanggal) – tenggat waktu untuk tugas klik "simpan" untuk membuat skema mengintegrasikan back4app dengan svelte untuk menghubungkan aplikasi svelte anda dengan back4app, anda akan menggunakan parse javascript sdk instal parse sdk npm install parse konfigurasikan sdk dengan mengedit src/main js file impor sdk dan inisialisasi dengan application id anda dan javascript key dari dasbor back4app (temukan ini di bawah app settings > security & keys ) import app from ' /app svelte'; 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; const app = new app({ target document getelementbyid('app') }); export default app; dengan backend anda terhubung, anda sekarang dapat membangun antarmuka daftar tugas dan menerapkan operasi crud mengembangkan frontend aplikasi svelte anda akan terdiri dari komponen yang memungkinkan anda menambah, menampilkan, memperbarui, dan menghapus tugas anda akan memanfaatkan reaktivitas svelte untuk pembaruan dinamis menyusun komponen anda buat folder components di dalam src untuk mengorganisir komponen svelte anda mkdir src/components anda akan membuat komponen berikut taskform svelte – untuk menambahkan tugas baru tasklist svelte – untuk menampilkan daftar tugas taskitem svelte – untuk mewakili tugas individu taskform svelte komponen ini merender sebuah formulir yang menangkap detail tugas dan mengirimkannya ke back4app \<script> import { createeventdispatcher } from 'svelte'; import parse from 'parse/dist/parse min js'; let title = ''; let description = ''; const dispatch = createeventdispatcher(); async function handlesubmit(event) { event 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(); dispatch('refresh'); title = ''; description = ''; } catch (error) { console error('error adding task ', error); } } \</script> \<form on\ submit|preventdefault={handlesubmit}> \<input type="text" placeholder="task title" bind\ value={title} required /> \<input type="text" placeholder="description" bind\ value={description} required /> \<button type="submit">add task\</button> \</form> taskitem svelte komponen ini mewakili tugas individu, memungkinkan anda untuk mengubah status penyelesaiannya atau menghapusnya \<script> import parse from 'parse/dist/parse min js'; export let task; export let refresh; async function togglecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(task id); tasktoupdate set('completed', !task completed); await tasktoupdate save(); refresh(); } catch (error) { console error('error updating task ', error); } } async function deletetask() { try { const query = new parse query('task'); const tasktodelete = await query get(task id); await tasktodelete destroy(); refresh(); } catch (error) { console error('error deleting task ', error); } } \</script> \<div class="task item {task completed ? 'completed' ''}"> \<div> \<h3>{task title}\</h3> \<p>{task description}\</p> \</div> \<div> \<button on\ click={togglecomplete}> {task completed ? 'undo' 'complete'} \</button> \<button on\ click={deletetask}>delete\</button> \</div> \</div> tasklist svelte komponen ini menampilkan semua tugas dengan mengiterasi mereka dan merender masing masing menggunakan taskitem \<script> import taskitem from ' /taskitem svelte'; export let tasks = \[]; export let refresh; \</script> {#if tasks length === 0} \<p>no tasks available\</p> {\ else} {#each tasks as task (task id)} \<taskitem {task} {refresh} /> {/each} {/if} app svelte di komponen utama anda, kelola status aplikasi dan integrasikan komponen tugas anda \<script> import { onmount } from 'svelte'; import parse from 'parse/dist/parse min js'; import taskform from ' /components/taskform svelte'; import tasklist from ' /components/tasklist svelte'; let tasks = \[]; async function fetchtasks() { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); tasks = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } } onmount(fetchtasks); \</script> \<div class="container"> \<h1>to do list\</h1> \<taskform on\ refresh={fetchtasks} /> \<tasklist {tasks} refresh={fetchtasks} /> \</div> menata aplikasi buat sebuah src/global css file untuk menambahkan gaya dasar 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; } 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 stylesheet ini di src/main js import ' /global css'; menyebarkan frontend di back4app web deployment back4app web deployment menawarkan lingkungan terkontainer untuk menghosting aplikasi svelte anda mengonfigurasi vite untuk produksi sesuaikan vite config js jika perlu untuk mengatur jalur dasar dengan benar untuk lingkungan terkontainer import { defineconfig } from 'vite'; import { svelte } from '@sveltejs/vite plugin svelte'; export default defineconfig({ plugins \[svelte()], base ' /', }); hasilkan build produksi npm run build membuat dockerfile buat sebuah dockerfile di direktori root dengan konten berikut \# stage 1 build the svelte app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# stage 2 serve the app using nginx from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] menguji kontainer docker secara lokal bangun gambar docker anda docker build t todo frontend jalankan kontainer docker run p 8080 80 todo frontend buka http //localhost 8080 di browser anda untuk memverifikasi bahwa aplikasi svelte anda disajikan dengan benar menyebarkan ke back4app inisialisasi repositori git, tambahkan file proyek anda, dan lakukan commit 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 masuk ke penyebaran web back4app https //www back4app com/containers klik "buat aplikasi baru" , berikan nama proyek anda, dan pilih repositori github anda otorisasi back4app dan pilih penyebaran dockerfile konfirmasi pengaturan build dan klik "deploy" untuk memulai build pertama memantau penyebaran anda setelah penyebaran, gunakan dasbor back4app untuk melihat log untuk debugging memantau kinerja kontainer dan penggunaan sumber daya memicu rebuild pada komit baru mengonfigurasi domain kustom jika diperlukan akses aplikasi langsung anda di https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ pengujian dan pen debugan setelah penyebaran, pastikan bahwa frontend svelte anda berkomunikasi dengan backend back4app dengan benar verifikasi api gunakan alat pengembang browser anda (f12 → jaringan) untuk memeriksa panggilan api operasi tugas tambahkan, selesaikan, dan hapus tugas melalui ui dan verifikasi pembaruan di browser database back4app penanganan kesalahan periksa log konsol untuk kesalahan dan uji kasus tepi seperti mengirim tugas kosong pengujian kinerja simulasikan kondisi jaringan lambat menggunakan alat browser untuk menilai responsivitas praktik terbaik untuk menggunakan back4app dengan svelte untuk mengoptimalkan aplikasi anda permintaan efisien gunakan operasi batch saat menangani beberapa tugas const tasks = \[task1, task2, task3]; parse object saveall(tasks); kueri yang dioptimalkan ambil hanya bidang yang diperlukan query select('title', 'completed'); variabel lingkungan simpan kunci sensitif dalam sebuah env file vite parse app id=your app id vite parse js key=your js key keamanan gunakan acl untuk membatasi akses task setacl(new parse acl(parse user current())); pengalihan backend manfaatkan cloud code untuk logika bisnis yang kompleks untuk mengurangi paparan api kesimpulan anda sekarang telah membangun aplikasi to do list full stack dengan membuat frontend svelte, mengintegrasikannya dengan backend back4app, dan menyebarkannya menggunakan alur kerja terkontainer tutorial ini memandu anda melalui setiap langkah—dari pengembangan lokal hingga penyebaran cloud—memastikan interaksi yang lancar antara ui svelte anda dan layanan backend melihat ke depan, pertimbangkan untuk meningkatkan aplikasi anda dengan pembaruan waktu nyata, autentikasi yang lebih baik, dan integrasi pihak ketiga untuk pembelajaran lebih lanjut, kunjungi dokumentasi back4app https //www back4app com/docs dan jelajahi sumber daya komunitas