How to Build a CRUD Application with Aurelia? A Comprehensive Tutorial

ikhtisar dalam panduan ini, anda akan belajar cara membuat aplikasi crud sederhana (buat, baca, perbarui, hapus) menggunakan framework aurelia tutorial ini menjelaskan cara membangun aplikasi yang mampu menangani operasi data penting dengan mengintegrasikan aurelia dengan back4app sebagai layanan backend anda pertama, anda akan menyiapkan proyek back4app yang berjudul basic crud app aurelia untuk berfungsi sebagai sistem manajemen data yang kuat selanjutnya, anda akan merancang struktur database yang dapat diskalakan dengan secara manual mendefinisikan koleksi dan bidang—atau dengan memanfaatkan agen ai back4app—untuk memastikan operasi data yang dapat diandalkan selanjutnya, anda akan memanfaatkan aplikasi admin back4app, yang menawarkan antarmuka seret dan lepas untuk mengelola data anda dengan mudah akhirnya, anda akan menghubungkan frontend aurelia anda dengan back4app menggunakan panggilan rest/graphql (atau parse sdk jika berlaku), dan mengamankan backend anda dengan kontrol akses yang rinci pada akhir tutorial ini, anda akan memiliki aplikasi web yang siap produksi dengan fungsionalitas crud lengkap, otentikasi pengguna, dan penanganan data yang aman wawasan utama kuasi aplikasi crud dengan layanan backend yang andal dapatkan keterampilan praktis untuk merancang backend yang dapat diskalakan dan menghubungkannya ke frontend aurelia jelajahi antarmuka admin tanpa kode (aplikasi admin back4app) untuk operasi data yang mulus pelajari cara menerapkan aplikasi anda menggunakan teknik modern, termasuk kontainerisasi prasyarat sebelum anda mulai, pastikan anda memiliki hal hal berikut akun back4app dengan proyek aktif kunjungi memulai dengan back4app https //www back4app com/docs/get started/new parse app jika anda memerlukan panduan pengaturan pengembangan aurelia gunakan aurelia cli atau alat serupa; pastikan anda telah menginstal node js (versi 14 atau lebih baru) kemampuan dasar dalam javascript, aurelia, dan rest api konsultasikan dokumentasi aurelia https //aurelia io/docs untuk detail lebih lanjut jika diperlukan langkah 1 – menyiapkan proyek anda membuat proyek back4app baru masuk ke akun back4app anda tekan tombol “aplikasi baru” dari dasbor anda masukkan nama proyek basic crud app aurelia dan selesaikan langkah langkah pengaturan buat proyek baru setelah dibuat, proyek anda akan terlihat di dasbor anda, siap untuk konfigurasi backend dan manajemen data langkah 2 – merancang skema database anda menyusun model data untuk aplikasi crud ini, anda akan mendefinisikan beberapa koleksi di bawah ini adalah contoh koleksi yang diperlukan beserta bidang dan tipe data yang dibutuhkan untuk mendukung operasi crud secara efektif 1\ koleksi item bidang tipe data rincian id objectid kunci utama yang dihasilkan secara otomatis judul string nama atau judul item deskripsi string deskripsi singkat tentang item tersebut dibuat pada tanggal timestamp ketika item dibuat diperbarui pada tanggal timestamp ketika item terakhir dimodifikasi 2\ koleksi pengguna bidang tipe data rincian id objectid kunci utama yang dihasilkan secara otomatis nama pengguna string pengidentifikasi unik untuk pengguna email string alamat email unik untuk validasi akun hash kata sandi string kata sandi terenkripsi untuk otentikasi pengguna dibuat pada tanggal stempel waktu pembuatan akun diperbarui pada tanggal stempel waktu pembaruan akun terakhir anda dapat membuat koleksi ini secara manual di dasbor back4app dengan menambahkan kelas baru untuk masing masing dan mendefinisikan kolom yang diperlukan buat kelas baru dengan mudah mengatur bidang database anda dengan memilih tipe data yang benar, menentukan nama bidang, mengatur nilai default, dan menunjukkan apakah bidang tersebut wajib buat kolom menggunakan agen ai back4app untuk pembuatan skema agen ai back4app menyederhanakan pembuatan skema dengan membiarkan anda menggambarkan model data anda melalui prompt alat ini secara otomatis membuat koleksi dan bidang berdasarkan kebutuhan anda langkah langkah untuk menggunakan agen ai luncurkan agen ai buka dasbor back4app anda dan temukan agen ai di bawah pengaturan proyek deskripsikan skema anda masukkan prompt terperinci yang menjelaskan koleksi dan bidang yang anda butuhkan tinjau dan konfirmasi periksa 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) metode ini mempercepat proses pembuatan skema dan menjamin struktur yang konsisten untuk aplikasi anda langkah 3 – mengaktifkan antarmuka admin & fungsionalitas crud menjelajahi antarmuka admin aplikasi admin back4app adalah solusi tanpa kode yang kuat yang memungkinkan anda mengelola data backend anda melalui antarmuka yang ramah pengguna dengan drag and drop alat ini menyederhanakan pelaksanaan operasi crud mengaktifkan aplikasi admin buka menu “lainnya” di dasbor back4app anda pilih “aplikasi admin” dan kemudian klik “aktifkan aplikasi admin ” atur kredensial admin anda dengan membuat akun admin awal anda, yang juga menetapkan peran default (seperti b4aadminuser ) dan koleksi sistem aktifkan aplikasi admin setelah mengaktifkan, masuk ke aplikasi admin untuk mulai mengelola data anda dasbor aplikasi admin melakukan operasi crud dengan aplikasi admin dalam antarmuka ini anda dapat buat entri gunakan opsi “tambahkan rekaman” dalam koleksi (misalnya, item) untuk menambahkan data baru lihat/ubah entri klik pada rekaman mana pun untuk memeriksa detailnya atau melakukan perubahan hapus entri pilih opsi hapus untuk menghilangkan data yang tidak lagi diperlukan antarmuka ini menyederhanakan operasi data anda, meningkatkan pengalaman pengguna dengan desainnya yang intuitif langkah 4 – menghubungkan aurelia dengan back4app dengan backend anda yang dikonfigurasi dan dikelola melalui aplikasi admin, saatnya untuk menghubungkan frontend aurelia anda ke back4app menggunakan rest atau graphql anda dapat menggunakan api rest atau graphql misalnya, untuk mengambil item melalui rest // example rest request to get items async function fetchitems() { 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(); console log('items fetched ', data results); } catch (error) { console error('fetch error ', error); } } fetchitems(); integrasikan panggilan api ini dalam komponen aurelia anda sesuai kebutuhan langkah 5 – melindungi backend anda mengimplementasikan daftar kontrol akses (acl) tingkatkan keamanan dengan menetapkan acl ke objek data anda misalnya, untuk membuat item pribadi async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl restrict access to the owner only const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error saving secure item ', error); } } mengatur izin tingkat kelas (clp) di dasbor back4app, sesuaikan clp untuk setiap koleksi untuk menerapkan aturan keamanan default, memastikan hanya pengguna yang terautentikasi atau berwenang yang dapat mengakses informasi sensitif langkah 6 – mengelola autentikasi pengguna mengonfigurasi akun pengguna back4app menggunakan kelas pengguna parse untuk menangani autentikasi di aplikasi aurelia anda, anda dapat mengelola pendaftaran dan login pengguna seperti yang diilustrasikan di bawah ini // src/resources/components/auth js import { observable } from 'aurelia framework'; import parse from ' / /parse config'; export class auth { @observable username = ''; @observable password = ''; @observable email = ''; async signup(event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration error ' + error message); } } } pola serupa dapat diterapkan untuk login dan manajemen sesi fungsionalitas tambahan, seperti integrasi login sosial, verifikasi email, dan reset kata sandi, dapat dikonfigurasi melalui dasbor back4app langkah 7 – menyebarkan frontend aurelia anda melalui penyebaran web fitur penyebaran web back4app memungkinkan anda untuk menghosting aplikasi aurelia anda secara efisien dengan menyebarkan kode dari repositori github dalam bagian ini, anda akan menyiapkan build produksi anda, mengkomit kode anda ke github, menghubungkan repositori anda dengan penyebaran web, dan menyebarkan situs anda 7 1 buat build produksi anda buka direktori proyek anda di terminal jalankan perintah build au build env production perintah ini menghasilkan sebuah dist folder yang berisi aset statis yang dioptimalkan konfirmasi build pastikan bahwa dist folder mencakup sebuah index html dan subdirektori yang diperlukan untuk javascript, css, dan gambar 7 2 atur dan unggah kode proyek anda repositori github anda harus menyimpan semua file sumber untuk frontend aurelia anda struktur contoh mungkin seperti ini basic crud app aurelia frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parse config js \| ` resources/ \| | components/ \| | | items list js \| | ` auth js \| package json ` readme md file contoh src/parse config js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } mengirim kode anda ke github inisialisasi git di folder proyek anda (jika belum dilakukan) git init stage file anda git add commit perubahan anda git commit m "commit awal dari sumber frontend aurelia" buat repositori di github (misalnya, basic crud app aurelia frontend ) dorong kode anda ke github git remote add origin https //github com/your username/basic crud app aurelia frontend git git push u origin main 7 3 menghubungkan repositori github anda dengan web deployment akses web deployment masuk ke dasbor back4app anda, navigasikan ke proyek anda (basic crud app aurelia), dan pilih opsi web deployment hubungkan ke github ikuti petunjuk untuk mengintegrasikan akun github anda, memberikan akses back4app ke repositori anda pilih repositori dan cabang anda pilih repositori (misalnya, basic crud app aurelia frontend ) dan cabang (misalnya, main ) yang berisi kode anda 7 4 konfigurasi deployment atur detail konfigurasi berikut perintah build jika folder dist belum dibangun sebelumnya, tentukan perintah (misalnya, au build env production ) untuk dijalankan oleh back4app direktori output atur ini ke dist agar back4app tahu di mana file statis anda berada variabel lingkungan tambahkan variabel lingkungan yang diperlukan (seperti kunci api) dalam pengaturan konfigurasi 7 5 mengkontainerisasi aplikasi aurelia anda (docker) jika anda lebih suka penerapan docker, sertakan sebuah dockerfile di repositori anda yang mirip dengan berikut \# use an official node image as the build environment from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining files and build the app copy run au build env production \# use nginx to serve the production build from nginx\ stable alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] konfigurasikan opsi penerapan docker di web deployment sesuai 7 6 menerapkan aplikasi anda tekan tombol deploy setelah mengonfigurasi penerapan, klik deploy pantau proses build back4app akan mengambil kode anda dari github, menjalankan perintah build jika diperlukan, dan menerapkan aplikasi anda dalam sebuah kontainer ambil url anda setelah penerapan selesai, back4app akan memberikan url di mana aplikasi aurelia anda dihosting 7 7 memverifikasi penerapan anda buka url yang diberikan kunjungi url di browser anda untuk melihat situs langsung anda uji aplikasi pastikan aplikasi anda dimuat dengan benar, rute berfungsi seperti yang diinginkan, dan semua aset (css, javascript, gambar) disajikan perbaiki jika diperlukan gunakan alat pengembang browser untuk mendiagnosis masalah, dan tinjau log penerapan back4app jika diperlukan langkah 8 – penutupan dan arah masa depan selamat! anda telah berhasil membangun aplikasi crud lengkap menggunakan aurelia dan back4app anda telah menyiapkan proyek bernama basic crud app aurelia , mendefinisikan skema database yang komprehensif untuk items dan users, dan mengelola data anda menggunakan aplikasi admin back4app anda juga telah mengintegrasikan frontend aurelia anda dengan backend dan menerapkan langkah langkah keamanan yang kuat langkah selanjutnya tingkatkan ui anda kembangkan aplikasi aurelia anda dengan tampilan detail, fungsi pencarian, dan pembaruan data secara real time tambahkan fitur lanjutan pertimbangkan untuk menggabungkan fungsi cloud, api pihak ketiga, atau izin berbasis peran jelajahi lebih lanjut periksa dokumentasi back4app https //www back4app com/docs dan sumber daya aurelia tambahan untuk panduan yang lebih mendalam tentang optimasi dan kustomisasi selamat coding dan semoga sukses dalam perjalanan pengembangan anda!