How to Build a Qwik Frontend and Connect It to a Backend?

dalam tutorial ini, anda akan membangun aplikasi daftar tugas menggunakan qwik dan menghubungkannya ke backend yang kuat yang didukung oleh back4app panduan ini ditujukan untuk pengembang yang ingin memanfaatkan kemampuan resumabilitas dan pemuatan malas qwik sambil mengintegrasikan operasi crud (buat, baca, perbarui, hapus) yang penting dengan backend yang dikelola pada akhir tutorial, anda akan memiliki aplikasi yang sepenuhnya fungsional yang menunjukkan cara menggabungkan frontend qwik modern dengan layanan backend back4app yang andal membangun aplikasi full stack bisa menjadi tantangan karena melibatkan pengaturan backend, manajemen database, otentikasi, dan penyebaran untuk menyederhanakan tugas tugas ini, kami menggunakan back4app— backend as a service (baas) yang dapat diskalakan —sehingga anda dapat berkonsentrasi pada pembangunan aplikasi qwik anda sementara ia mengurus hosting, database, dan api back4app menyediakan rangkaian layanan backend yang komprehensif, termasuk database nosql yang siap digunakan, otentikasi, cloud code untuk logika sisi server, dan integrasi sdk yang mulus dukungan penyebaran terkontainer membuatnya menjadi pilihan yang sangat baik untuk aplikasi full stack modern dengan alat alat ini di ujung jari anda, anda dapat dengan cepat mengembangkan dan menyebarkan aplikasi tanpa beban mengelola infrastruktur server poin penting dengan mengikuti tutorial ini, anda akan belajar untuk menginisialisasi proyek qwik modern mengintegrasikan layanan backend untuk mengelola data aplikasi anda menerapkan operasi crud yang penting untuk antarmuka pengguna yang interaktif menyebarkan aplikasi daftar tugas yang sepenuhnya fungsional menggunakan alur kerja terkontainer di back4app prasyarat sebelum anda mulai, pastikan anda memiliki hal hal berikut node js dan npm instal versi lts terbaru dari nodejs org https //nodejs org/ dan verifikasi dengan node v dan npm v pengetahuan dasar qwik memahami komponen qwik, sinyal (menggunakan usesignal ), dan konsep resumabilitasnya sangat disarankan jika anda baru mengenal qwik, tinjau dokumentasinya terlebih dahulu akun back4app daftar di back4app https //www back4app com/ untuk mengatur dan mengelola layanan backend anda dengan prasyarat ini, anda siap untuk mengatur proyek anda dan mulai membangun pengaturan proyek mulailah dengan mengatur lingkungan pengembangan lokal anda dan menginisialisasi proyek qwik anda konfirmasi bahwa node js (versi lts) telah terinstal node v npm v buat proyek qwik baru menggunakan qwik cli jalankan perintah berikut npm create qwik\@latest jawab pertanyaan yang akan diberikan oleh cli namai proyek todo app atau ganti dengan nama lain yang anda inginkan berpindah ke direktori proyek anda cd todo app mulai server pengembangan untuk memverifikasi pengaturan anda npm start aplikasi qwik anda sekarang harus berjalan secara lokal buka url yang diberikan di browser anda untuk mengonfirmasi selanjutnya, anda akan mengonfigurasi backend anda di back4app untuk mengelola penyimpanan data dan interaksi api membuat backend todo back4app menawarkan layanan backend yang sepenuhnya dikelola yang didukung oleh parse layanan ini menyediakan database nosql, otentikasi, cloud code, dan api yang dihasilkan secara otomatis bagian ini membimbing anda melalui pembuatan model data task untuk menyimpan item yang harus dilakukan anda dan menghubungkannya dengan frontend qwik anda menyiapkan aplikasi backend anda masuk ke dasbor back4app https //www back4app com/ dan klik "buat aplikasi baru " beri nama aplikasi anda (misalnya, todoqwikapp ) dan pilih nodejs/parse sebagai jenis backend setelah dibuat, navigasikan ke "database" > "browser" klik "buat kelas" dan pilih "kustom" nama kelas task dan atur izin tingkat kelas untuk mengizinkan baca dan tulis publik (anda dapat memperbaiki pengaturan ini nanti) di kelas task , tambahkan bidang berikut judul (string) – judul tugas deskripsi (string) – detail tentang tugas selesai (boolean) – menunjukkan apakah tugas telah selesai tanggaljatuhtempo (tanggal) – tenggat waktu untuk tugas klik "simpan" untuk menyelesaikan skema anda mengintegrasikan back4app dengan qwik integrasikan back4app ke dalam proyek qwik anda menggunakan parse javascript sdk instal sdk melalui npm npm install parse konfigurasikan sdk dengan menginisialisasinya menggunakan application id dan javascript key ambil kredensial ini dari dasbor back4app anda di bawah app settings > security & keys buat file konfigurasi (misalnya, src/lib/parse js ) dan tambahkan yang berikut 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; export default parse; anda sekarang dapat mengimpor konfigurasi ini di komponen dan rute qwik anda untuk berinteraksi dengan backend anda mengembangkan frontend dengan qwik sekarang bahwa backend anda terhubung, bangun antarmuka pengguna untuk aplikasi daftar tugas anda menggunakan qwik anda akan membuat komponen untuk menambah, menampilkan, memperbarui, dan menghapus tugas sambil mengelola status dengan sinyal qwik mengorganisir komponen anda aplikasi anda akan mencakup komponen kunci berikut taskform tsx – sebuah komponen untuk menangani penambahan tugas baru tasklist tsx – sebuah komponen untuk menampilkan semua tugas dan menyediakan kontrol untuk menandai tugas sebagai selesai atau menghapusnya taskitem tsx – sebuah komponen yang mewakili tugas individu dengan tindakan untuk mengubah status penyelesaian atau menghapusnya buat sebuah folder komponen di dalam src dan tambahkan file file ini mkdir src/components touch src/components/taskform tsx src/components/tasklist tsx src/components/taskitem tsx mengelola status dengan sinyal qwik manfaatkan usesignal dari qwik untuk manajemen status reaktif di halaman utama anda (misalnya, src/routes/index tsx ), atur status dan pengambilan data sebagai berikut import { component$, usesignal, usevisibletask$, $ } from '@builder io/qwik'; import parse from ' /lib/parse js'; import taskform from ' /components/taskform'; import tasklist from ' /components/tasklist'; export default component$(() => { const tasks = usesignal< { id string; createdat string; updatedat string; title string; description string; completed boolean; }\[] \>(\[]); const fetchtasks = $ ( async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); tasks value = results map(task => ({ id task id ?? '', createdat task createdat ? task createdat toisostring() '', updatedat task updatedat ? task updatedat toisostring() '', title task get('title') ?? '', description task get('description') ?? '', completed task get('completed') ?? false, })); } catch (error) { console error("error fetching tasks ", error); } }); usevisibletask$(async () => { await fetchtasks(); }); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform ontaskadded$={fetchtasks} /> \<tasklist tasks={tasks value} ontaskschange$={fetchtasks} /> \</div> ); }); membangun komponen form tugas di src/components/taskform tsx , buat komponen formulir untuk menambahkan tugas gunakan sinyal reaktif qwik untuk input formulir import { component$, usesignal, $, qrl } from '@builder io/qwik'; import parse from ' /lib/parse js'; interface taskformprops { ontaskadded$ qrl<() => void>; } export default component$((props taskformprops) => { const title = usesignal(''); const description = usesignal(''); const handlesubmit$ = $(async (e event) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title value); task set("description", description value); task set("completed", false); await task save(); title value = ''; description value = ''; return true; } catch (error) { console error("error adding task ", error); return false; } }); return ( \<form preventdefault\ submit onsubmit$={async (event) => { const success = await handlesubmit$(event); if (success) { await props ontaskadded$(); } }} \> \<input type="text" placeholder="task title" value={title value} oninput$={(e) => title value = (e target as htmlinputelement) value} required /> \<input type="text" placeholder="description" value={description value} oninput$={(e) => description value = (e target as htmlinputelement) value} required /> \<button type="submit">add task\</button> \</form> ); }); membangun daftar tugas dan komponen item di src/components/tasklist tsx , render daftar tugas import { component$ } from '@builder io/qwik'; import taskitem from ' /taskitem'; interface task { id string; title string; description string; completed boolean; } interface tasklistprops { tasks task\[]; ontaskschange$ () => void; } export default component$((props tasklistprops) => { return ( \<div> {props tasks length === 0 ? ( \<p>no tasks available\</p> ) ( props tasks map(task => ( \<taskitem key={task id} task={task} ontaskschange$={props ontaskschange$} /> )) )} \</div> ); }); di src/components/taskitem tsx , buat komponen untuk tugas individu dengan tindakan untuk mengubah penyelesaian atau menghapus tugas import { component$, $ } from '@builder io/qwik'; import parse from ' /lib/parse js'; interface task { id string; title string; description string; completed boolean; } interface taskitemprops { task task; ontaskschange$ () => void; } export default component$((props taskitemprops) => { const handletoggle = $(async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(props task id); tasktoupdate set("completed", !props task completed); await tasktoupdate save(); props ontaskschange$(); } catch (error) { console error("error updating task ", error); } }); const handledelete = $(async () => { try { const query = new parse query("task"); const tasktodelete = await query get(props task id); await tasktodelete destroy(); props ontaskschange$(); } catch (error) { console error("error deleting task ", error); } }); return ( \<div class={`task item ${props task completed ? "completed" ""}`}> \<h3>{props task title}\</h3> \<p>{props task description}\</p> \<button onclick$={handletoggle}> {props task completed ? "undo" "complete"} \</button> \<button onclick$={handledelete}>delete\</button> \</div> ); }); menata aplikasi anda buat sebuah src/global css file untuk menambahkan gaya dasar / src/global css / 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; } container p { font size 1rem; } 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 gaya global di file root anda (misalnya, src/root tsx ) import " /global css"; menyelesaikan ui aplikasi daftar tugas qwik anda sekarang memiliki frontend dinamis yang terintegrasi dengan back4app dan gaya kustom aplikasi ini memungkinkan anda untuk menambahkan, menampilkan, memperbarui, dan menghapus tugas sambil memastikan komunikasi yang lancar antara frontend dan backend selanjutnya, anda akan menerapkan aplikasi qwik anda menggunakan platform web deployment dari back4app menyebarkan frontend di back4app web deployment back4app web deployment menyediakan lingkungan terkelola sepenuhnya, tercontainer untuk hosting aplikasi anda dengan penyebaran berbasis docker, anda dapat mengemas aplikasi qwik anda dan menyebarkannya dengan mulus tambahkan adapter server express qwik memungkinkan anda mengonfigurasi adapter penyebaran untuk target tertentu kami akan menambahkan adapter express untuk melayani proyek anda dalam produksi instal adapter npm run qwik add kemudian pilih adapter node js express server dan konfirmasi instalasi ini memperbarui readme anda dan menambahkan skrip penyebaran baru di package json anda perbarui skrip mulai buka package json dan ubah skrip mulai menjadi "start" "node server/entry express" opsional, simpan skrip pengembangan terpisah jika diperlukan ini memastikan proyek anda menggunakan express untuk melayani build produksi mengonfigurasi qwik untuk produksi bangun situs qwik anda yang siap produksi dengan npm run build membuat dockerfile untuk aplikasi anda buat sebuah dockerfile di root proyek untuk mengcontainerisasi aplikasi qwik anda # build stage from node\ lts alpine as builder user node workdir /home/node copy package json run npm ci copy chown=node\ node run npm run build \# final run stage from node\ lts alpine as runner env node env=production user node workdir /home/node copy from=builder chown=node\ node /home/node/package json copy from=builder chown=node\ node /home/node/node modules /node modules copy from=builder chown=node\ node /home/node/dist /dist copy from=builder chown=node\ node /home/node/server /server arg port expose ${port 3000} cmd \["node", "server/entry express"] mengunggah ke github dan mendeploy melalui back4app dorong proyek anda ke github 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 kemudian, deploy menggunakan back4app web deployment masuk ke back4app web deployment https //www back4app com/containers klik "buat aplikasi baru" , berikan nama, dan pilih repositori github otorisasi back4app untuk mengakses repositori anda dan pilih repositori proyek qwik anda pilih penerapan dockerfile dan konfirmasi pengaturan build klik "terapkan" untuk memulai proses build memantau dan mengelola penerapan setelah penerapan, gunakan dasbor back4app untuk melihat log untuk pemecahan masalah memantau kinerja kontainer dan penggunaan sumber daya memicu penerapan ulang saat komit baru didorong mengonfigurasi domain kustom jika diperlukan pengujian dan pemecahan masalah aplikasi anda setelah diterapkan, uji aplikasi qwik anda secara menyeluruh verifikasi konektivitas api buka konsol pengembang browser anda (f12 → jaringan) untuk memeriksa panggilan api selama operasi tugas tambahkan dan ambil tugas gunakan ui untuk menambahkan tugas, lalu segarkan untuk mengonfirmasi keberlanjutan data di browser database back4app uji operasi crud pastikan bahwa menandai tugas sebagai selesai dan penghapusan tercermin dengan benar di backend tangani kasus tepi validasi input formulir dan simulasi kondisi jaringan lambat menggunakan alat pengembang jika masalah muncul, tinjau log back4app atau periksa kembali konfigurasi api anda praktik terbaik untuk menggunakan layanan back4app tingkatkan kinerja dan keamanan aplikasi anda dengan mengoptimalkan panggilan api gunakan permintaan batch untuk beberapa operasi dan kueri hanya bidang yang diperlukan mengamankan data sensitif simpan kredensial seperti id aplikasi dan kunci javascript di variabel lingkungan di qwik, buat sebuah env file vite parse app id=your app id vite parse js key=your js key mengaktifkan auto scaling aktifkan auto scaling di back4app web deployment untuk mengelola lalu lintas tinggi meningkatkan keamanan batasi izin tingkat kelas (clps) untuk mengontrol modifikasi data dan atur acl sesuai kebutuhan memanfaatkan cloud code alihkan logika kompleks ke cloud code untuk meningkatkan kinerja dan mengurangi paparan api kesimpulan anda sekarang telah membangun aplikasi to do list full stack menggunakan qwik untuk frontend dan layanan backend back4app yang kuat tutorial ini membimbing anda melalui pengaturan proyek qwik, mengintegrasikan parse sdk, dan menerapkan situs anda menggunakan alur kerja terkontainer di back4app saat anda terus mengembangkan, pertimbangkan untuk menambahkan fitur seperti otentikasi pengguna yang lebih canggih, pembaruan waktu nyata, dan integrasi pihak ketiga untuk informasi lebih lanjut dan dukungan, lihat dokumentasi back4app https //www back4app com/docs