Building a CRUD Application with Qwik: A Comprehensive Tutorial

ikhtisar dalam panduan ini, anda akan belajar untuk membuat aplikasi crud (buat, baca, perbarui, hapus) yang sepenuhnya fungsional menggunakan qwik kami akan menunjukkan operasi penting untuk mengelola data sambil menghubungkan aplikasi anda ke back4app pertama, anda akan mengatur proyek back4app yang diberi judul basic crud app qwik untuk berfungsi sebagai backend untuk manajemen data selanjutnya, anda akan mengonfigurasi database yang dapat diskalakan dengan mendefinisikan koleksi dan bidang—baik secara manual atau dengan bantuan agen ai back4app ini memastikan bahwa model data anda dioptimalkan untuk menangani tugas crud dengan efisien anda kemudian akan memanfaatkan aplikasi admin back4app, antarmuka yang ramah pengguna dengan fitur seret dan lepas, untuk mengelola koleksi anda dengan lancar alat ini menyederhanakan operasi data dengan menawarkan cara intuitif untuk membuat, memperbarui, dan menghapus catatan akhirnya, anda akan mengintegrasikan frontend qwik anda dengan back4app menggunakan rest atau graphql api, serta menerapkan kontrol keamanan yang kuat pada akhir tutorial ini, aplikasi siap produksi anda tidak hanya akan menangani operasi crud tetapi juga mendukung otentikasi pengguna dan akses data yang aman wawasan penting kuasai seni mengembangkan aplikasi crud yang secara efektif menangani data menggunakan backend yang andal temukan metode untuk merancang backend yang dapat disesuaikan dan menggabungkannya dengan frontend qwik untuk meningkatkan interaktivitas pengguna jelajahi keuntungan dari antarmuka admin drag and drop (aplikasi admin back4app) untuk menyederhanakan fungsi crud pelajari tentang strategi penyebaran, termasuk kontainerisasi docker, untuk meluncurkan aplikasi web anda dengan cepat prasyarat sebelum memulai, harap pastikan anda memiliki akun back4app dengan pengaturan proyek baru kunjungi memulai dengan back4app https //www back4app com/docs/get started/new parse app untuk bantuan lingkungan pengembangan qwik siapkan proyek anda menggunakan dokumentasi qwik https //qwik builder io/docs/getting started/ pastikan anda telah menginstal node js (versi 14 atau lebih baru) pemahaman dasar tentang javascript, qwik, dan rest api konsultasikan dokumentasi qwik https //qwik builder io/docs/ jika anda perlu penyegaran langkah 1 – inisialisasi proyek mendirikan proyek back4app baru masuk ke akun back4app anda klik pada “aplikasi baru” di dasbor anda masukkan nama proyek basic crud app qwik dan ikuti instruksi untuk membuat proyek anda buat proyek baru proyek baru anda akan muncul di dasbor anda, membentuk fondasi backend untuk aplikasi anda langkah 2 – merancang skema database anda membuat model data anda untuk aplikasi crud ini, anda akan mendefinisikan beberapa koleksi di bawah ini adalah contoh yang menguraikan bidang dan tipe yang diperlukan untuk membantu anda membuat skema database yang efektif untuk menangani operasi crud 1\ koleksi barang koleksi ini menyimpan rincian untuk setiap barang bidang tipe data deskripsi id objectid kunci utama yang dihasilkan secara otomatis judul string nama barang deskripsi string rincian singkat tentang item tersebut dibuat pada tanggal timestamp ketika item dibuat diperbarui pada tanggal stempel waktu pembaruan terakhir 2\ koleksi pengguna koleksi ini menyimpan rincian pengguna dan informasi otentikasi bidang tipe data deskripsi id objectid kunci utama yang dihasilkan secara otomatis nama pengguna string pengidentifikasi unik untuk pengguna email string alamat email unik pengguna hash kata sandi string kata sandi terenkripsi untuk masuk dibuat pada tanggal stempel waktu pembuatan akun diperbarui pada tanggal stempel waktu pembaruan terakhir untuk akun pengguna anda dapat menambahkan koleksi ini secara manual melalui dasbor back4app dengan membuat kelas baru dan mengonfigurasi setiap kolom sesuai kebutuhan buat kelas baru dengan mudah menambahkan bidang dengan memilih jenis, memberikan nama, dan mengonfigurasi nilai default serta batasan buat kolom memanfaatkan agen ai back4app untuk pembuatan skema agen ai back4app dapat secara otomatis menghasilkan skema anda berdasarkan prompt deskriptif fitur ini mempercepat pengaturan proyek dan memastikan konsistensi cara mengoperasikan agen ai akses agen ai temukan di dasbor back4app anda atau di dalam pengaturan proyek anda rincikan model data anda berikan prompt yang menggambarkan koleksi dan bidang yang anda butuhkan tinjau dan terapkan evaluasi saran skema yang dihasilkan dan terapkan pada 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 menjamin skema yang terstruktur dengan baik yang disesuaikan untuk aplikasi anda langkah 3 – mengaktifkan aplikasi admin & mengelola operasi crud pengantar aplikasi admin aplikasi admin back4app menyediakan antarmuka tanpa kode untuk mengelola data backend fungsionalitas seret dan lepas yang intuitif memungkinkan anda dengan mudah melakukan operasi crud cara mengaktifkan aplikasi admin akses menu “lainnya” dari dasbor back4app pilih “aplikasi admin” dan kemudian klik “aktifkan aplikasi admin ” atur kredensial admin anda dengan membuat pengguna admin, yang secara otomatis akan menetapkan peran dan koleksi sistem aktifkan aplikasi admin setelah aktivasi, masuk ke aplikasi admin untuk mengelola data anda dengan mudah dasbor aplikasi admin melakukan tindakan crud melalui aplikasi admin tambahkan rekaman gunakan tombol “tambahkan rekaman” di dalam koleksi mana pun (misalnya, item) untuk membuat entri baru lihat/edit rekaman klik pada rekaman mana pun untuk memeriksa detailnya atau melakukan pembaruan hapus rekaman manfaatkan fungsi hapus untuk menghilangkan entri yang sudah tidak relevan alat ini menyederhanakan operasi data, memastikan pengalaman pengguna yang lancar langkah 4 – menghubungkan qwik dengan back4app sekarang setelah backend anda dikonfigurasi, saatnya untuk mengintegrasikan frontend qwik anda dengan back4app opsi menggunakan rest atau graphql api kami akan menggunakan panggilan rest api untuk berinteraksi dengan back4app contoh mengambil item melalui rest di qwik buat komponen qwik (misalnya, src/components/itemslist tsx ) yang mengambil dan menampilkan item // src/components/itemslist tsx import { component$, usetask$ } from '@builder io/qwik'; export const itemslist = component$(() => { const items = \[]; usetask$(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 push( data results); } catch (error) { console error('error retrieving items ', error); } }); return ( \<div> \<h2>items\</h2> \<ul> {items map((item any) => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> ); }); export default itemslist; komponen ini menggunakan api fetch untuk memanggil endpoint rest back4app, mengambil daftar item untuk operasi crud lainnya (buat, perbarui, hapus), integrasikan panggilan rest serupa ke dalam komponen qwik anda langkah 5 – mengamankan backend anda mengimplementasikan daftar kontrol akses (acl) tingkatkan keamanan data anda dengan mengatur acl pada objek anda misalnya, untuk membatasi akses ke item tertentu async function createprivateitem(itemdata { title string; description string }, ownerid string) { try { 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 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); } catch (error) { console error('error creating private item ', error); } } mengonfigurasi izin tingkat kelas (clp) di dalam dasbor back4app, sesuaikan clp untuk setiap koleksi untuk menegakkan kebijakan akses default, memastikan hanya pengguna yang berwenang yang dapat berinteraksi dengan data sensitif langkah 6 – autentikasi pengguna membangun akun pengguna back4app memanfaatkan kelas pengguna parse untuk mengelola autentikasi di aplikasi qwik anda, terapkan pendaftaran dan login pengguna seperti yang ditunjukkan di bawah ini contoh komponen pendaftaran di qwik // src/components/auth tsx import { component$, usestore } from '@builder io/qwik'; export const signup = component$(() => { const store = usestore({ username '', password '', email '' }); const handlesignup = async (e event) => { e 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 store username, password store password, email store email }) }); const data = await response json(); alert('user successfully registered!'); } catch (error any) { alert('registration error ' + error message); } }; return ( \<form onsubmit$={handlesignup}> \<input type="text" placeholder="username" value={store username} oninput$={(e) => (store username = (e target as htmlinputelement) value)} /> \<input type="password" placeholder="password" value={store password} oninput$={(e) => (store password = (e target as htmlinputelement) value)} /> \<input type="email" placeholder="email" value={store email} oninput$={(e) => (store email = (e target as htmlinputelement) value)} /> \<button type="submit">register\</button> \</form> ); }); pendekatan serupa dapat diterapkan untuk login dan manajemen sesi opsi tambahan seperti otentikasi sosial, verifikasi email, dan pemulihan kata sandi dapat dikonfigurasi melalui back4app langkah 7 – menerapkan frontend qwik anda melalui penyebaran web layanan penyebaran web back4app memungkinkan hosting frontend qwik anda dengan mulus dengan menghubungkan repositori github anda ikuti langkah langkah ini untuk menerapkan situs anda 7 1 buat build produksi anda buka folder proyek anda di terminal jalankan perintah build npm run build ini menghasilkan folder build yang berisi aset statis yang dioptimalkan konfirmasi build pastikan folder build memiliki file index html bersama dengan direktori aset terkait 7 2 atur dan komit kode anda ke github repositori anda harus mencakup sumber lengkap untuk frontend qwik anda struktur yang umum mungkin adalah basic crud app qwik frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── root tsx \| ├── entry tsx \| └── components/ \| ├── itemslist tsx \| └── auth tsx \| package json \| readme md contoh src/root tsx // src/root tsx import { component$ } from '@builder io/qwik'; import itemslist from ' /components/itemslist'; export default component$(() => { return ( \<div style={{ padding '2rem' }}> \<h1>crud application\</h1> \<itemslist /> \</div> ); }); mengkomit kode anda inisialisasi git (jika belum dilakukan) git init stage file anda git add komit perubahan anda git commit m "komit awal kode frontend qwik" buat repositori github misalnya, beri nama basic crud app qwik frontend dorong kode anda ke github git remote add origin https //github com/your username/basic crud app qwik frontend git git push u origin main 7 3 menghubungkan repositori anda ke web deployment akses web deployment masuk ke dasbor back4app anda, pilih proyek anda (basic crud app qwik), dan navigasikan ke bagian web deployment tautkan ke github ikuti petunjuk di layar untuk menghubungkan akun github anda pilih repositori dan cabang pilih repositori anda (misalnya, basic crud app qwik frontend ) dan cabang yang relevan (misalnya, main ) 7 4 konfigurasi deployment tentukan pengaturan tambahan perintah build jika folder build yang sudah dibangun tidak disertakan, atur perintah (misalnya, npm run build ) direktori output tentukan direktori output sebagai build variabel lingkungan masukkan variabel yang diperlukan seperti kunci api 7 5 mengcontainerisasi aplikasi qwik anda dengan docker (opsional) jika anda memilih docker, sertakan dockerfile yang mirip dengan \# use node for building the app from node 16 alpine as build workdir /app copy package json / run npm install copy run npm run build \# serve the built app with nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] kemudian, pilih opsi docker di pengaturan web deployment anda 7 6 menerapkan aplikasi anda klik tombol deploy setelah konfigurasi selesai, tekan deploy tonton proses build back4app akan menarik kode anda, membangunnya, dan menerapkan kontainer terima url anda setelah penerapan, url akan disediakan di mana aplikasi anda dihosting 7 7 memverifikasi penerapan anda kunjungi url buka tautan yang disediakan di browser anda uji fungsionalitas periksa bahwa semua rute dan aset dimuat dengan benar debug jika diperlukan gunakan alat pengembang browser dan log back4app untuk memecahkan masalah langkah 8 – menyelesaikan dan peningkatan di masa depan kerja bagus! anda telah berhasil membangun aplikasi crud yang sepenuhnya menggunakan qwik dan back4app anda telah mendirikan proyek basic crud app qwik , membuat skema database yang rinci untuk item dan pengguna, dan mengelola data dengan aplikasi admin selain itu, anda menghubungkan frontend qwik anda ke backend dan menerapkan langkah langkah keamanan yang kuat langkah selanjutnya perluas frontend anda tingkatkan aplikasi qwik anda dengan fitur seperti tampilan item yang rinci, fungsionalitas pencarian, atau pembaruan waktu nyata tambahkan fungsionalitas lebih pertimbangkan untuk mengintegrasikan logika backend yang lebih canggih, api pihak ketiga, atau kontrol akses berbasis peran jelajahi sumber daya tambahan rujuk ke dokumentasi back4app https //www back4app com/docs dan tutorial qwik lebih lanjut untuk pengetahuan mendalam tentang perbaikan kinerja dan integrasi kustom dengan mengikuti tutorial ini, anda sekarang memiliki pengetahuan untuk membuat