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

ikhtisar dalam panduan ini, anda akan belajar bagaimana cara membuat aplikasi crud (buat, baca, perbarui, hapus) yang lengkap menggunakan knockout js tutorial ini menunjukkan cara mengimplementasikan operasi dasar dalam aplikasi web sambil memanfaatkan back4app sebagai layanan backend anda kita akan mulai dengan menyiapkan proyek back4app yang berjudul basic crud app knockout , membangun sistem manajemen data yang andal untuk aplikasi anda setelah itu, anda akan merancang skema basis data yang fleksibel dengan mendefinisikan koleksi dan bidang—baik secara manual atau dengan bantuan dari agen ai back4app—untuk memastikan aplikasi anda dapat menangani semua operasi crud dengan efektif selanjutnya, anda akan menggunakan aplikasi admin back4app, alat drag and drop yang ramah pengguna, untuk mengelola koleksi anda dengan mudah antarmuka ini menyederhanakan proses pelaksanaan operasi crud akhirnya, anda akan mengintegrasikan frontend knockout js anda dengan back4app menggunakan panggilan rest api integrasi ini juga akan mencakup praktik backend yang aman dengan kontrol akses yang tepat pada akhir tutorial ini, anda akan membangun aplikasi web siap produksi yang mendukung fungsionalitas crud dasar, termasuk otentikasi pengguna, dan memiliki manajemen data yang kuat poin penting pahami cara mengembangkan aplikasi crud yang mengelola data secara efisien menggunakan back4app dapatkan pengalaman praktis dalam merancang backend yang dapat diskalakan dan menghubungkannya dengan frontend knockout js pelajari cara menggunakan alat admin tanpa kode (back4app admin app) untuk melakukan operasi buat, baca, perbarui, dan hapus temukan strategi penyebaran, termasuk kontainerisasi docker, untuk meluncurkan aplikasi web anda dengan cepat prasyarat sebelum memulai, pastikan anda memiliki akun back4app dan proyek aktif lihat memulai dengan back4app https //www back4app com/docs/get started/new parse app jika anda memerlukan panduan lingkungan pengembangan yang disiapkan untuk knockout js sertakan pustaka melalui cdn atau instal melalui npm jika anda lebih suka pengaturan modular pengetahuan dasar tentang javascript, knockout js, dan rest api konsultasikan dokumentasi knockout js https //knockoutjs com/documentation/introduction html untuk pengantar langkah 1 – inisialisasi proyek menyiapkan proyek back4app anda akses akun back4app anda pilih opsi “aplikasi baru” dari dasbor anda masukkan nama proyek basic crud app knockout dan selesaikan proses pengaturan buat proyek baru setelah dibuat, proyek anda akan terlihat di dasbor anda, membentuk tulang punggung untuk konfigurasi backend anda langkah 2 – membuat skema database anda merancang struktur data untuk aplikasi crud ini, anda akan membuat beberapa koleksi di bawah ini adalah contoh koleksi dengan bidang dan tipe data yang disarankan untuk memandu desain basis data anda skema ini mendukung operasi crud yang mendasar 1 koleksi item bidang tipe data rincian id objectid kunci unik yang dihasilkan secara otomatis judul string judul item deskripsi string ringkasan singkat tentang item tersebut dibuat pada tanggal timestamp ketika item dibuat diperbarui pada tanggal stempel waktu pembaruan terakhir 2 koleksi pengguna bidang tipe data rincian id objectid pengidentifikasi unik yang dihasilkan secara otomatis nama pengguna string pengidentifikasi unik untuk setiap pengguna email string alamat email unik pengguna hash kata sandi string hash aman dari kata sandi pengguna dibuat pada tanggal stempel waktu pembuatan akun diperbarui pada tanggal stempel waktu untuk pembaruan akun terakhir anda dapat membuat koleksi ini secara manual di dasbor back4app dengan menambahkan kelas baru untuk setiap koleksi dan mendefinisikan bidangnya buat kelas baru tentukan bidang anda dengan memilih jenis data, memberi nama bidang, mengatur nilai default, dan menandai bidang yang diperlukan buat kolom menggunakan agen ai back4app untuk otomatisasi skema agen ai back4app menyederhanakan pembuatan skema langsung dari dasbor anda ini dapat secara otomatis membuat koleksi dan bidang berdasarkan deskripsi anda langkah langkah untuk menggunakan agen ai luncurkan agen ai akses melalui dasbor back4app atau pengaturan proyek anda detail model data anda tempelkan prompt deskriptif yang mencantumkan koleksi dan bidang yang anda butuhkan tinjau dan terapkan agen akan mengusulkan skema tinjau dan konfirmasi saran untuk mengintegrasikannya ke dalam 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) proses ini menghemat waktu dan memastikan skema yang konsisten dan dioptimalkan untuk aplikasi anda langkah 3 – mengaktifkan aplikasi admin dan mengelola operasi crud ikhtisar antarmuka admin aplikasi admin back4app menyediakan solusi tanpa kode untuk mengelola data backend anda antarmuka drag and drop yang intuitif memungkinkan operasi crud yang mudah cara mengaktifkan aplikasi admin pergi ke menu “lainnya” di dasbor back4app anda pilih “aplikasi admin” dan klik pada “aktifkan aplikasi admin ” atur kredensial admin anda dengan membuat pengguna admin pertama, yang juga mengonfigurasi peran seperti b4aadminuser dan koleksi sistem yang penting aktifkan aplikasi admin setelah aktivasi, masuk ke aplikasi admin untuk mulai mengelola data dasbor aplikasi admin menggunakan antarmuka admin untuk crud di dalam aplikasi admin anda dapat menambahkan rekaman klik tombol “tambah rekaman” di sebuah koleksi (misalnya, item) untuk membuat entri baru melihat/mengubah rekaman pilih sebuah rekaman untuk memeriksa detailnya atau memperbarui bidang menghapus rekaman hapus entri yang tidak lagi diperlukan antarmuka yang disederhanakan ini meningkatkan kegunaan dan mempercepat pengelolaan data anda langkah 4 – menghubungkan knockout js dengan back4app dengan backend anda sudah siap, saatnya untuk mengintegrasikan frontend knockout js anda menggunakan panggilan rest api menggunakan rest api untuk operasi crud karena parse sdk biasanya tidak digunakan dengan knockout js, anda akan melakukan panggilan api secara langsung di bawah ini adalah contoh cara menangani tugas crud contoh mengambil item // example rest call to retrieve items function fetchitems() { fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(response => response json()) then(data => { viewmodel items(data results); }) catch(error => console error('error retrieving items ', error)); } fetchitems(); contoh viewmodel knockout js di bawah ini adalah contoh viewmodel untuk mengelola item anda function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var newitem = { title self newtitle(), description self newdescription() }; 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(newitem) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; self deleteitem = function(item) { fetch('https //parseapi back4app com/classes/items/' + item objectid, { method 'delete', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(() => { self items remove(item); }) catch(error => console error('error deleting item ', error)); }; // additional methods for update and read operations can be added similarly } // activate knockout js ko applybindings(new appviewmodel()); model tampilan ini mengintegrasikan panggilan api untuk membuat dan menghapus item sambil mengelola status dengan observables knockout js langkah 5 – mengamankan backend anda daftar kontrol akses (acl) lindungi data anda dengan menetapkan acl ke setiap objek misalnya, untuk membuat item hanya dapat diakses oleh penciptanya function createsecureitem(itemdata, owneruserid) { var newitem = { title itemdata title, description itemdata description, acl { " " { "read" false, "write" false }, \[owneruserid] { "read" true, "write" true } } }; 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(newitem) }) then(response => response json()) then(data => console log('secure item created ', data)) catch(error => console error('error creating item ', error)); } izin tingkat kelas (clp) di dalam dasbor back4app, atur clp untuk setiap koleksi untuk memastikan hanya pengguna yang terautentikasi atau berwenang yang dapat mengakses informasi sensitif langkah 6 – menerapkan autentikasi pengguna mengonfigurasi akun pengguna back4app menggunakan kelas pengguna untuk mengelola autentikasi dalam aplikasi knockout js anda, tangani pendaftaran dan login pengguna menggunakan panggilan rest api contoh pendaftaran pengguna function registeruser(username, password, email) { var user = { username username, password password, email email }; 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(user) }) then(response => response json()) then(data => alert('registration successful!')) catch(error => alert('registration error ' + error message)); } pendekatan serupa dapat diikuti untuk login pengguna dan manajemen sesi fitur tambahan seperti verifikasi email dan pengaturan ulang kata sandi dapat dikonfigurasi melalui back4app langkah 7 – menerapkan frontend knockout js anda menggunakan penyebaran web fitur penyebaran web back4app memungkinkan anda untuk menghosting frontend knockout js anda dengan mudah dengan menghubungkan repositori github anda ikuti langkah langkah ini 7 1 bangun berkas produksi anda buka direktori proyek anda di terminal jalankan proses build anda jika anda menggunakan alat build seperti webpack, jalankan perintah yang sesuai (misalnya, npm run build ) untuk mengompilasi aset anda konfirmasi build pastikan folder build anda berisi index html dan semua aset statis yang diperlukan 7 2 atur dan komit kode anda ke github repository anda harus mencakup semua file sumber untuk frontend knockout js anda struktur contoh mungkin seperti ini basic crud app knockout frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── appviewmodel js │ └── styles css ├── package json └── readme md file contoh src/appviewmodel js function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var itemdata = { title self newtitle(), description self newdescription() }; 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(itemdata) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; // additional crud methods (update, delete) can be defined similarly } // apply knockout bindings ko applybindings(new appviewmodel()); mengkomit dan mendorong kode ke github inisialisasi git (jika belum dilakukan) git init stage file anda git add commit perubahan anda git commit m "commit awal untuk frontend knockout js" buat repositori github (misalnya, basic crud app knockout frontend ) dorong kode anda git remote add origin https //github com/your username/basic crud app knockout frontend git git push u origin main 7 3 menghubungkan repositori github anda dengan web deployment akses fitur web deployment di dasbor back4app anda, pilih proyek anda (basic crud app knockout) dan klik pada web deployment hubungkan ke github ikuti petunjuk untuk mengintegrasikan akun github anda pilih repositori dan cabang anda pilih repositori anda (misalnya, basic crud app knockout frontend ) dan cabang (misalnya, main ) yang berisi kode anda 7 4 pengaturan deployment perintah build jika repositori anda tidak menyertakan folder yang sudah dibangun, tentukan perintah build (misalnya, npm run build ) direktori output atur ini ke folder yang berisi file statis anda (misalnya, build atau public ) variabel lingkungan tambahkan variabel lingkungan yang diperlukan, seperti kunci api 7 5 mengcontainerisasi aplikasi anda dengan docker (opsional) jika anda ingin menggunakan docker, sertakan sebuah dockerfile di repositori anda # use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source code and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 menerapkan aplikasi anda klik tombol deploy setelah mengonfigurasi pengaturan, mulai penerapan pantau proses back4app akan mengambil kode anda, membangunnya (jika perlu), dan menerapkan aplikasi terkontainer anda akses aplikasi anda setelah selesai, back4app akan memberikan url untuk mengakses aplikasi knockout js anda 7 7 menguji penerapan buka url yang diberikan periksa apakah aplikasi anda dimuat dengan benar jalankan uji pastikan semua rute dan aset (css, js, gambar) berfungsi debug jika perlu gunakan alat pengembang untuk memeriksa kesalahan dan merujuk ke log penerapan back4app langkah 8 – kesimpulan dan arah masa depan kerja bagus! anda telah berhasil membangun aplikasi crud dasar menggunakan knockout js dan back4app anda telah menyiapkan proyek bernama basic crud app knockout , membuat koleksi terperinci untuk item dan pengguna, dan mengelola data anda melalui aplikasi admin selain itu, anda mengintegrasikan frontend knockout js anda dengan backend menggunakan panggilan rest api dan menerapkan kontrol akses yang aman langkah selanjutnya perluas frontend anda tingkatkan aplikasi anda dengan fitur seperti tampilan item terperinci, kemampuan pencarian, atau pembaruan langsung tambahkan logika backend lanjutan jelajahi penggunaan cloud functions atau mengintegrasikan layanan pihak ketiga selami lebih dalam konsultasikan dokumentasi back4app https //www back4app com/docs untuk optimasi lebih lanjut dan integrasi lanjutan dengan mengikuti tutorial ini, anda sekarang memiliki pengetahuan untuk membangun aplikasi crud yang kuat dan dapat diskalakan dengan knockout js menggunakan back4app selamat coding!