How to Build a Basic CRUD App with Marionette.js: A Step-by-Step Guide

pendahuluan dalam panduan ini, anda akan belajar bagaimana cara membuat aplikasi crud (buat, baca, perbarui, hapus) yang lengkap menggunakan marionette js tutorial ini menunjukkan kepada anda cara mengatur aplikasi yang mengelola operasi data dengan efisien kita akan mulai dengan mengatur proyek back4app yang disebut basic crud app marionettejs , yang berfungsi sebagai backend yang kuat untuk aplikasi anda setelah mengonfigurasi proyek anda, anda akan merancang skema basis data yang fleksibel dengan mendefinisikan koleksi dan bidang—baik secara manual atau dengan bantuan dari back4app ai agent pendekatan ini memastikan bahwa backend anda terorganisir dengan baik dan mampu menangani operasi crud dengan andal selanjutnya, anda akan menggunakan aplikasi admin back4app—antarmuka seret dan lepas—untuk mengelola koleksi anda dengan mudah, memungkinkan anda untuk melakukan operasi buat, baca, perbarui, dan hapus dengan mudah akhirnya, anda akan mengintegrasikan frontend marionette js anda dengan back4app menggunakan rest/graphql (atau parse sdk, jika berlaku), sambil memastikan backend anda tetap aman dengan kontrol akses yang canggih pada akhir tutorial ini, anda akan memiliki aplikasi web yang siap produksi yang mendukung operasi crud bersama dengan otentikasi pengguna dan manajemen data yang aman poin penting membangun aplikasi crud yang secara efektif mengelola data menggunakan backend yang kuat mendapatkan wawasan tentang cara membuat backend yang dapat diskalakan dan menghubungkannya ke frontend marionette js belajar menggunakan antarmuka manajemen tanpa kode (aplikasi admin back4app) untuk menyederhanakan operasi data memahami teknik penyebaran, termasuk kontainerisasi docker, untuk meluncurkan aplikasi anda dengan cepat prasyarat sebelum anda mulai, harap pastikan anda memiliki hal hal berikut akun back4app dengan proyek baru yang sudah disiapkan untuk panduan, lihat memulai dengan back4app https //www back4app com/docs/get started/new parse app lingkungan pengembangan marionette js anda dapat menggunakan boilerplate atau starter kit untuk marionette js pastikan node js (versi 14 atau lebih tinggi) terinstal pemahaman dasar tentang javascript, marionette js, dan rest api rujuk ke dokumentasi marionette js https //marionettejs com/docs/master/ untuk detail lebih lanjut langkah 1 – pengaturan proyek membuat proyek back4app baru masuk ke akun back4app anda klik tombol “aplikasi baru” di dasbor anda beri nama proyek anda basic crud app marionettejs dan lengkapi petunjuknya buat proyek baru setelah membuat proyek, itu akan muncul di dasbor anda, memberikan dasar untuk konfigurasi dan manajemen backend langkah 2 – merancang skema database anda menyusun model data anda untuk aplikasi crud ini, anda akan mendefinisikan beberapa koleksi berikut adalah contoh koleksi yang mungkin anda buat, termasuk bidang dan tipe data yang akan mendukung database anda 1\ koleksi item koleksi ini menyimpan rincian untuk setiap item bidang tipe data deskripsi id objectid pengidentifikasi unik yang dihasilkan secara otomatis judul string nama barang deskripsi string ringkasan singkat tentang item tersebut dibuat pada tanggal stempel waktu untuk saat item dibuat diperbarui pada tanggal stempel waktu untuk pembaruan terakhir 2\ koleksi pengguna koleksi ini menyimpan kredensial pengguna dan detail profil bidang tipe data deskripsi id objectid pengidentifikasi unik yang dihasilkan secara otomatis nama pengguna string pengidentifikasi unik untuk pengguna email string alamat email yang unik hash kata sandi string kata sandi terenkripsi untuk otentikasi pengguna dibuat pada tanggal stempel waktu untuk pembuatan akun diperbarui pada tanggal timestamp untuk pembaruan akun terakhir anda dapat menambahkan koleksi ini secara manual di dasbor back4app dengan membuat kelas baru untuk masing masing dan mendefinisikan bidangnya buat kelas baru anda dapat membuat field dengan memilih tipe data, memberikan nama, mengatur nilai default, dan menandainya sebagai wajib jika diperlukan buat kolom memanfaatkan agen ai back4app untuk pembuatan skema agen ai back4app menyederhanakan pembuatan skema dengan menghasilkan koleksi dan field dari prompt deskriptif cara menggunakan agen ai luncurkan agen ai akses melalui menu dasbor back4app anda atau pengaturan proyek deskripsikan model data anda tempelkan prompt rinci yang menjelaskan koleksi dan field yang anda butuhkan tinjau dan konfirmasi periksa skema yang disarankan dan terapkan pada proyek anda contoh prompt create these 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 menghemat waktu dan memastikan konsistensi dalam skema basis data anda langkah 3 – mengaktifkan aplikasi admin & melakukan operasi crud ikhtisar aplikasi admin aplikasi admin back4app menawarkan antarmuka tanpa kode, seret dan lepas untuk mengelola data backend anda ini menyederhanakan operasi crud seperti membuat, membaca, memperbarui, dan menghapus catatan mengaktifkan aplikasi admin buka menu “lainnya” di dasbor back4app anda pilih “aplikasi admin” lalu klik “aktifkan aplikasi admin ” atur kredensial admin anda dengan membuat pengguna admin, yang juga mengonfigurasi peran default seperti b4aadminuser aktifkan aplikasi admin setelah aktivasi, masuk ke aplikasi admin untuk mengelola koleksi anda dasbor aplikasi admin menggunakan aplikasi admin untuk tugas crud buat rekaman gunakan tombol “tambah rekaman” untuk memasukkan entri baru ke dalam koleksi baca/perbarui rekaman klik pada sebuah rekaman untuk melihat atau mengubah detailnya hapus rekaman hapus rekaman yang sudah tidak relevan menggunakan opsi hapus antarmuka intuitif ini meningkatkan interaksi pengguna dengan menyederhanakan manajemen data langkah 4 – menghubungkan marionette js dengan back4app dengan backend anda yang dikonfigurasi dan dikelola melalui admin app, langkah selanjutnya adalah mengintegrasikan frontend marionette js anda dengan back4app opsi a menggunakan parse sdk (jika berlaku) instal parse sdk npm install parse inisialisasi parse di aplikasi marionette js anda buat file konfigurasi (misalnya, app/parseconfig js ) // app/parseconfig js import parse from 'parse'; // masukkan kredensial back4app anda di sini parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; integrasikan parse dalam tampilan marionette misalnya, buat tampilan untuk mengambil dan merender item // app/views/itemsview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<h2>item\</h2> \<ul> <% items foreach(function(item) { %> \<li><%= item get("title") %> — <%= item get("description") %>\</li> <% }); %> \</ul> `), initialize() { this items = \[]; this fetchitems(); }, async fetchitems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; this render(); } catch (error) { console error("error fetching items ", error); } }, serializedata() { return { items this items }; } }); opsi b menggunakan rest atau graphql jika parse sdk bukan pilihan, anda dapat berinteraksi dengan back4app menggunakan panggilan rest atau graphql misalnya, untuk mengambil item melalui rest // example rest call to retrieve 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('retrieved items ', data results); } catch (error) { console error('error retrieving items ', error); } } fetchitems(); gabungkan panggilan api ini ke dalam tampilan atau pengontrol marionette js anda sesuai kebutuhan langkah 5 – mengamankan backend anda mengonfigurasi daftar kontrol akses (acl) amankan data anda dengan mengatur acl pada objek misalnya, untuk membuat item yang hanya dapat diakses oleh pemiliknya async function createprivateitem(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 solely to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('created private item ', saveditem); } catch (error) { console error('error saving private item ', error); } } mengatur izin tingkat kelas (clp) di dasbor back4app, konfigurasikan clp untuk setiap koleksi untuk menerapkan aturan akses default, memastikan hanya pengguna yang berwenang yang dapat mengakses data sensitif langkah 6 – autentikasi pengguna membuat akun pengguna back4app memanfaatkan kelas pengguna parse untuk mengelola autentikasi dalam aplikasi marionette js anda, tangani pendaftaran dan login pengguna seperti yang ditunjukkan di bawah ini // app/views/authview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<form id="signup form"> \<input type="text" id="username" placeholder="username" required /> \<input type="password" id="password" placeholder="password" required /> \<input type="email" id="email" placeholder="email" required /> \<button type="submit">sign up\</button> \</form> `), events { 'submit #signup form' 'handlesignup' }, async handlesignup(e) { e preventdefault(); const username = this $('#username') val(); const password = this $('#password') val(); const email = this $('#email') val(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('sign up error ' + error message); } } }); pola serupa dapat diikuti untuk login dan penanganan sesi fitur tambahan seperti login sosial atau pengaturan ulang kata sandi dapat dikonfigurasi melalui dasbor back4app langkah 7 – menyebarkan frontend marionette js anda dengan web deployment fitur web deployment back4app memungkinkan anda untuk menghosting frontend marionette js anda dengan mulus dengan menghubungkan repositori github anda 7 1 – membangun versi produksi anda arahkan ke direktori proyek anda di terminal jalankan perintah build npm run build ini menghasilkan folder build yang berisi file statis yang dioptimalkan (html, js, css, gambar) konfirmasi build pastikan folder build menyertakan file index html bersama dengan aset yang diperlukan 7 2 – mengorganisir dan mengunggah kode sumber anda repositori anda harus berisi semua kode sumber untuk frontend marionette js anda contoh struktur file adalah basic crud app marionettejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── app/ │ ├── app js │ ├── parseconfig js │ └── views/ │ ├── itemsview\ js │ └── authview\ js ├── package json └── readme md contoh file konfigurasi app/parseconfig js // app/parseconfig 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; contoh file aplikasi app/app js import marionette from 'backbone marionette'; import itemsview from ' /views/itemsview'; // initialize the marionette application const app = new marionette application({ region '#app' }); app on('start', function() { const itemsview = new itemsview(); app showview(itemsview); }); app start(); mengkomit ke github inisialisasi repositori git (jika belum dilakukan) git init stage file anda git add komit perubahan anda git commit m "komit awal untuk frontend marionette js" buat repositori di github (misalnya, basic crud app marionettejs frontend ) dorong kode anda git remote add origin https //github com/your username/basic crud app marionettejs frontend git git push u origin main 7 3 – mengintegrasikan repositori anda dengan web deployment akses web deployment di dasbor back4app anda, pilih proyek anda (basic crud app marionettejs) dan klik pada web deployment hubungkan ke github ikuti petunjuk untuk menghubungkan akun github anda agar back4app dapat mengakses repositori anda pilih repositori dan cabang pilih repositori (misalnya, basic crud app marionettejs frontend ) dan cabang (misalnya, main ) yang berisi kode anda 7 4 – mengonfigurasi deployment anda tentukan pengaturan tambahan perintah build jika folder build yang sudah dibangun tidak ada, atur perintah build (misalnya, npm run build ) back4app akan menjalankan ini selama penyebaran direktori output tunjukkan build sebagai folder yang berisi file statis anda variabel lingkungan berikan variabel lingkungan yang diperlukan (seperti kunci api) dalam pengaturan penyebaran 7 5 – menggunakan docker untuk aplikasi marionette js anda jika anda lebih suka docker untuk penyebaran, kontainer aplikasi anda dengan menyertakan dockerfile di repositori anda \# use an official node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files and install dependencies copy package json / run npm install \# copy the app source code copy \# build the application run npm run build \# use nginx to serve the build files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] konfigurasikan penyebaran web untuk menggunakan opsi docker jika diinginkan 7 6 – menerapkan aplikasi anda klik tombol deploy selesaikan pengaturan penerapan anda dan klik deploy pantau proses build back4app akan menarik kode github anda, menjalankan perintah build, dan menerapkan kontainer anda dapatkan url anda setelah diterapkan, back4app akan menyediakan url di mana aplikasi marionette js anda dihosting 7 7 – memverifikasi penerapan anda kunjungi url yang diberikan buka url penerapan di browser anda uji aplikasi pastikan aplikasi dimuat dengan benar dan semua fungsionalitas (rute, aset) berfungsi perbaiki jika diperlukan gunakan alat pengembang browser dan periksa log penerapan di back4app jika ada masalah langkah 8 – kesimpulan dan langkah selanjutnya kerja bagus! anda telah berhasil membangun aplikasi crud menggunakan marionette js dan back4app anda telah menyiapkan proyek bernama basic crud app marionettejs , membuat koleksi database yang terperinci untuk item dan pengguna, dan mengelola data anda melalui aplikasi admin anda juga menghubungkan frontend marionette js anda ke backend dan menerapkan langkah langkah keamanan yang kuat peningkatan di masa depan perbaiki frontend anda tambahkan fitur seperti tampilan terperinci, kemampuan pencarian, dan pembaruan waktu nyata perluas fungsionalitas backend pertimbangkan untuk mengintegrasikan cloud functions, api pihak ketiga, atau kontrol akses berbasis peran yang lebih canggih pembelajaran lebih lanjut jelajahi sumber daya tambahan di dokumentasi back4app https //www back4app com/docs untuk optimasi dan integrasi yang lebih canggih dengan mengikuti tutorial ini, anda sekarang memiliki pengetahuan untuk membangun aplikasi crud yang kuat dan dapat diskalakan menggunakan marionette js dan back4app selamat coding!