How to Build a CRUD App with Backbone.js? A Step-by-Step Tutorial

pendahuluan dalam panduan ini, anda akan belajar bagaimana cara membuat aplikasi crud (buat, baca, perbarui, hapus) yang fungsional menggunakan backbone js panduan ini akan membantu anda memahami operasi inti dari aplikasi web dengan menunjukkan cara membangun sistem crud yang secara efektif memanipulasi dan mengelola data anda akan mulai dengan menyiapkan proyek back4app yang berjudul basic crud app backbone untuk berfungsi sebagai backend yang andal untuk aplikasi anda setelah itu, anda akan merancang skema database yang fleksibel dengan mendefinisikan koleksi dan bidang tertentu—baik secara manual atau dengan bantuan dari agen ai back4app proses ini memastikan struktur data anda disesuaikan untuk interaksi crud yang mulus selanjutnya, anda akan menggunakan aplikasi admin back4app yang intuitif, yang memiliki antarmuka drag and drop, untuk dengan mudah menangani koleksi data anda alat ini menyederhanakan operasi crud, membuat manajemen data backend menjadi mudah akhirnya, anda akan menghubungkan frontend backbone js anda ke back4app menggunakan rest api dan panduan ini bergantung pada panggilan api standar untuk berinteraksi dengan backend anda anda juga akan belajar bagaimana mengamankan data anda dengan kontrol akses yang kuat pada akhir tutorial ini, anda akan telah membangun aplikasi web yang siap produksi yang mendukung fungsionalitas crud dan mencakup otentikasi pengguna serta fitur manajemen data yang canggih poin penting kuasi seni membangun aplikasi crud yang menangani data secara efektif menggunakan layanan backend yang dapat diandalkan temukan strategi untuk membuat desain database yang dapat diskalakan dan mengintegrasikannya dengan frontend backbone js pelajari cara menggunakan fitur drag and drop di aplikasi admin back4app untuk menyederhanakan tugas membuat, membaca, memperbarui, dan menghapus kenali metode penyebaran, termasuk kontainerisasi docker, untuk meluncurkan aplikasi anda dengan cepat prasyarat sebelum memulai, pastikan anda memiliki akun back4app dan proyek yang aktif lihat memulai dengan back4app https //www back4app com/docs/get started/new parse app jika anda memerlukan panduan pengaturan pengembangan backbone js anda dapat menyertakan backbone js melalui manajer paket seperti npm atau dengan menghubungkan langsung dari cdn pemahaman dasar tentang javascript, backbone js, dan restful api lihat dokumentasi backbone js https //backbonejs org/#getting started untuk penyegaran jika diperlukan langkah 1 – inisialisasi proyek membuat proyek back4app anda masuk ke akun back4app anda klik pada tombol “aplikasi baru” dari dasbor anda beri nama proyek anda basic crud app backbone dan ikuti petunjuk untuk mengaturnya buat proyek baru setelah proyek anda dibuat, itu akan terlihat di dasbor anda, siap untuk dikonfigurasi sebagai backend untuk aplikasi langkah 2 – membuat skema database mendefinisikan model data anda untuk aplikasi crud ini, anda akan mengatur beberapa koleksi di bawah ini adalah contoh koleksi dengan bidang dan tipe yang perlu anda tetapkan untuk skema anda, memastikan aplikasi anda dapat melakukan semua operasi crud 1\ koleksi item koleksi ini akan menyimpan rincian untuk setiap item bidang tipe data deskripsi id objectid pengidentifikasi unik yang dihasilkan secara otomatis judul string nama atau judul item deskripsi string gambaran singkat tentang item tersebut dibuat pada tanggal timestamp yang menunjukkan kapan item ditambahkan diperbarui pada tanggal stempel waktu untuk pembaruan terbaru 2\ koleksi pengguna koleksi ini menyimpan rincian pengguna dan informasi otentikasi bidang tipe data deskripsi id objectid pengidentifikasi unik yang dihasilkan secara otomatis nama pengguna string pengidentifikasi unik untuk pengguna email string alamat email unik pengguna hash kata sandi string kata sandi yang di hash dengan aman dibuat pada tanggal stempel waktu pembuatan akun diperbarui pada tanggal timestamp modifikasi terakhir dari data pengguna anda dapat membuat koleksi ini secara manual melalui dasbor back4app dengan menambahkan kelas baru untuk setiap koleksi dan mengonfigurasi bidang yang sesuai buat kelas baru cukup pilih tipe data, atur nama field, berikan nilai default jika diperlukan, dan tandai field sebagai wajib buat kolom memanfaatkan agen ai back4app untuk pembuatan skema agen ai back4app adalah utilitas yang berguna di dalam dasbor anda yang membantu mengotomatiskan pembuatan skema database dengan memasukkan prompt deskriptif untuk koleksi dan field yang anda inginkan, agen ai dapat dengan cepat menghasilkan struktur database yang diperlukan, menghemat waktu anda dan memastikan konsistensi cara menggunakan agen ai akses agen ai masuk ke dasbor back4app anda dan temukan agen ai di navigasi atau pengaturan proyek detail model data anda masukkan prompt yang menjelaskan koleksi dan field yang anda butuhkan tinjau dan terapkan evaluasi skema yang disarankan dan terapkan perubahan pada proyek anda contoh prompt create the following collections for 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) memanfaatkan agen ai memastikan bahwa skema anda terstruktur dengan baik untuk kebutuhan aplikasi anda langkah 3 – mengaktifkan aplikasi admin & mengelola operasi crud memperkenalkan aplikasi admin aplikasi admin back4app adalah antarmuka tanpa kode yang memungkinkan anda mengelola data backend anda dengan efisien desain drag and drop yang intuitif membuat pelaksanaan operasi crud seperti menambah, melihat, memodifikasi, dan menghapus catatan menjadi sangat sederhana mengaktifkan aplikasi admin buka menu “lainnya” dari dasbor back4app anda pilih “aplikasi admin” dan kemudian pilih “aktifkan aplikasi admin ” atur kredensial administrator anda dengan membuat akun admin awal langkah ini juga menetapkan peran (seperti b4aadminuser ) dan koleksi sistem aktifkan aplikasi admin setelah aktivasi, masuk ke aplikasi admin untuk mengelola data anda dengan lancar dasbor aplikasi admin mengelola operasi crud menggunakan aplikasi admin di dalam aplikasi admin anda dapat menambahkan entri baru gunakan opsi “tambahkan rekaman” di koleksi mana pun (misalnya, item) untuk membuat entri baru melihat/mengubah rekaman klik pada sebuah rekaman untuk memeriksa atau mengubah detailnya menghapus rekaman gunakan fitur hapus untuk menghapus data yang tidak diinginkan antarmuka ini meningkatkan pengalaman pengguna dengan menyederhanakan semua tugas manajemen data langkah 4 – menghubungkan backbone js dengan back4app sekarang setelah backend anda dikonfigurasi, saatnya untuk mengintegrasikan frontend backbone js anda dengan back4app menggunakan backbone js dengan panggilan rest api karena sdk parse tidak dirancang untuk backbone js, anda akan menggunakan model, koleksi, dan tampilan bawaan backbone bersamaan dengan panggilan rest api untuk berinteraksi dengan back4app mengatur model dan koleksi backbone anda mulailah dengan mendefinisikan model untuk item anda dan koleksi yang sesuai misalnya // models/item js var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items', idattribute 'objectid', defaults { title '', description '' } }); export default item; // collections/itemscollection js import item from ' /models/item'; var itemscollection = backbone collection extend({ model item, url 'https //parseapi back4app com/classes/items', parse function(response) { return response results; } }); export default itemscollection; membangun tampilan backbone untuk interaksi crud buat tampilan untuk merender daftar item dan menangani tindakan pengguna seperti menambah, mengedit, dan menghapus // views/itemsview\ js import backbone from 'backbone'; import from 'underscore'; import itemscollection from ' /collections/itemscollection'; var itemsview = backbone view\ extend({ el '#app', initialize function() { this collection = new itemscollection(); this listento(this collection, 'sync update', this render); this collection fetch({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); }, events { 'click #add item' 'additem', 'click delete item' 'deleteitem', 'click edit item' 'edititem', 'click #save edit' 'saveedit' }, render function() { var template = template(` \<h2>items\</h2> \<div> \<input id="new title" type="text" placeholder="title"> \<input id="new description" type="text" placeholder="description"> \<button id="add item">add item\</button> \</div> \<ul> <% collection each(function(item) { %> \<li data id="<%= item id %>"> \<strong><%= item get('title') %>\</strong> <%= item get('description') %> \<button class="edit item">edit\</button> \<button class="delete item">delete\</button> \</li> <% }); %> \</ul> \<div id="edit section" style="display\ none;"> \<input id="edit title" type="text"> \<input id="edit description" type="text"> \<button id="save edit">save\</button> \</div> `); this $el html(template({ collection this collection })); return this; }, additem function() { var title = this $('#new title') val(); var description = this $('#new description') val(); var newitem = this collection create( { title title, description description }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, wait true, success function() { console log('item added successfully '); }, error function(error) { console error('failed to add item ', error); } } ); }, deleteitem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); item destroy({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item removed '); }, error function(error) { console error('error deleting item ', error); } }); }, edititem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); this $('#edit section') show(); this $('#edit title') val(item get('title')); this $('#edit description') val(item get('description')); this currenteditid = itemid; }, saveedit function() { var newtitle = this $('#edit title') val(); var newdescription = this $('#edit description') val(); var item = this collection get(this currenteditid); item save( { title newtitle, description newdescription }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item updated '); }, error function(error) { console error('update failed ', error); } } ); this $('#edit section') hide(); } }); export default itemsview; tampilan ini mengambil item dari back4app menggunakan rest api dan memungkinkan anda untuk menambah, mengedit, dan menghapus catatan langkah 5 – mengamankan backend anda mengimplementasikan daftar kontrol akses (acl) lindungi data anda dengan mengatur acl pada objek anda misalnya, untuk membatasi akses item hanya kepada penciptanya function createsecureitem(itemdata, owner) { var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items' }); var item = new item(); item set({ title itemdata title, description itemdata description }); // assume a custom api call or configuration that assigns acls based on the owner // here you would include acl headers or a similar mechanism as needed item save(null, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(saveditem) { console log('secure item created ', saveditem); }, error function(err) { console error('error creating secure item ', err); } }); } mengonfigurasi izin tingkat kelas (clp) di dalam dasbor back4app anda, atur clp untuk setiap koleksi untuk memastikan hanya pengguna yang berwenang yang dapat mengakses atau memodifikasi data sensitif langkah 6 – autentikasi pengguna mengatur akun pengguna di backbone js back4app menggunakan sistem manajemen pengguna yang mirip dengan kelas pengguna parse untuk otentikasi dalam aplikasi backbone js anda, anda dapat menangani pendaftaran dan login pengguna menggunakan panggilan ajax ke rest api back4app sebagai contoh, untuk mendaftar pengguna baru function signupuser(username, password, email) { $ ajax({ url 'https //parseapi back4app com/users', method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data json stringify({ username username, password password, email email }), success function(response) { alert('user registered successfully!'); }, error function(error) { alert('error during registration ' + error responsejson error); } }); } metode serupa dapat diterapkan untuk login pengguna dan mengelola sesi langkah 7 – menerapkan frontend backbone js anda fitur web deployment back4app memungkinkan anda untuk menghosting aplikasi backbone js anda dengan mulus dengan menghubungkan repositori github anda 7 1 membuat build produksi buka direktori proyek anda di terminal jalankan proses build anda jika anda menggunakan task runner atau bundler (seperti webpack atau gulp), jalankan perintah (misalnya, npm run build ) untuk menghasilkan aset statis yang dioptimalkan konfirmasi build pastikan bahwa direktori output build anda berisi file html utama dan semua folder aset yang diperlukan 7 2 mengorganisir dan mendorong kode sumber anda repositori github anda harus mencakup semua file sumber untuk aplikasi backbone js anda struktur yang umum mungkin adalah basic crud app backbone/ \| bower components/ \| public/ \| └── index html \| src/ \| ├── models/ \| │ └── item js \| ├── collections/ \| │ └── itemscollection js \| ├── views/ \| │ └── itemsview\ js \| └── app js \| package json \| readme md contoh file konfigurasi src/app js import backbone from 'backbone'; import itemsview from ' /views/itemsview'; $(document) ready(function() { new itemsview(); }); mengunggah ke github inisialisasi git (jika belum dilakukan) git init stage file anda git add commit perubahan anda git commit m "commit awal kode frontend backbone js" buat repositori github (misalnya, basic crud app backbone ) dorong repositori anda git remote add origin https //github com/your username/basic crud app backbone git git push u origin main 7 3 mengintegrasikan repositori anda dengan penyebaran web back4app akses bagian penyebaran web di dasbor back4app anda, pergi ke proyek anda dan klik pada penyebaran web opsi tautkan akun github anda ikuti petunjuk untuk mengizinkan back4app mengakses repositori anda pilih repositori dan cabang anda pilih basic crud app backbone repositori anda dan cabang utama 7 4 konfigurasi penyebaran berikan pengaturan tambahan perintah build jika tidak ada aset yang dibangun sebelumnya, tentukan perintah (misalnya, npm run build ) untuk membangun aplikasi anda direktori output tentukan folder (misalnya, public atau dist ) yang berisi file statis anda variabel lingkungan tambahkan kunci api atau konfigurasi yang diperlukan 7 5 dockerisasi proyek backbone js anda jika anda memilih docker untuk penyebaran, sertakan dockerfile yang mirip dengan \# use an official node image to build the application from node 16 alpine as builder \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire project and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] konfigurasikan back4app untuk menggunakan penyebaran docker jika diinginkan 7 6 meluncurkan aplikasi anda klik tombol deploy setelah konfigurasi anda selesai, tekan deploy pantau proses build back4app akan mengambil kode anda, menjalankan proses build, dan menyebarkan aplikasi tercontainer anda dapatkan url langsung anda setelah penyebaran, sebuah url akan disediakan di mana aplikasi backbone js anda dihosting 7 7 memverifikasi penyebaran anda kunjungi url yang disediakan buka url di browser anda untuk memastikan bahwa aplikasi anda dimuat dengan benar uji fungsionalitas pastikan bahwa navigasi, pengambilan data, dan operasi crud berfungsi seperti yang diharapkan atasi masalah gunakan alat browser dan log back4app untuk menyelesaikan masalah yang ada langkah 8 – kesimpulan dan arah masa depan kerja bagus! anda telah berhasil membangun aplikasi crud menggunakan backbone js dan back4app anda telah menyiapkan proyek bernama basic crud app backbone , mendefinisikan koleksi terperinci untuk item dan pengguna, dan mengelola backend anda menggunakan admin app selain itu, anda mengintegrasikan frontend backbone js anda melalui panggilan rest api dan menerapkan langkah langkah keamanan yang penting langkah selanjutnya tingkatkan frontend kembangkan aplikasi backbone js anda dengan tampilan yang lebih terperinci, kemampuan pencarian, dan pembaruan waktu nyata tambahkan fitur baru pertimbangkan untuk mengintegrasikan logika backend yang lebih canggih, api pihak ketiga, atau kontrol akses yang lebih halus pembelajaran lebih lanjut kunjungi dokumentasi back4app https //www back4app com/docs untuk wawasan lebih lanjut tentang perbaikan kinerja dan integrasi kustom dengan mengikuti tutorial ini, anda sekarang memiliki keahlian untuk membuat backend crud yang kuat dan dapat diskalakan untuk aplikasi backbone js anda menggunakan back4app selamat coding dan menjelajahi fitur baru!