Quickstarters
CRUD Samples
How to Build a Basic CRUD App with Ractive.js: A Step-by-Step Guide
39 mnt
ikhtisar dalam panduan ini, anda akan belajar bagaimana cara membangun aplikasi crud (buat, baca, perbarui, hapus) yang sepenuhnya fungsional menggunakan ractive js tutorial ini mencakup seluruh alur kerja dari pengaturan proyek back4app anda hingga merancang skema basis data anda, dan akhirnya mengintegrasikan frontend ractive js dengan backend anda proyek ini, yang disebut basic crud app ractive , akan berfungsi sebagai solusi manajemen data yang kuat untuk aplikasi web anda anda akan mulai dengan menginisialisasi proyek back4app, mengonfigurasi koleksi dan bidang baik secara manual atau dengan bantuan agen ai back4app selanjutnya, anda akan menggunakan aplikasi admin back4app yang intuitif untuk penanganan data yang sederhana, diikuti dengan mengintegrasikan antarmuka ractive js anda dengan back4app melalui panggilan rest api panduan ini juga menjelaskan cara mengamankan backend anda menggunakan metode kontrol akses yang canggih pada akhir, anda akan memiliki aplikasi crud yang siap produksi yang tidak hanya melakukan operasi penting tetapi juga mendukung otentikasi pengguna dan manajemen data yang aman poin penting kuasi aplikasi crud yang secara mahir mengelola data dengan backend yang andal pahami cara merancang skema data yang dapat diperluas dan menghubungkannya dengan frontend ractive js manfaatkan antarmuka manajemen drag and drop (aplikasi admin back4app) untuk tindakan crud yang mudah pelajari strategi penyebaran termasuk kontainerisasi docker untuk peluncuran aplikasi web yang cepat prasyarat sebelum memulai, pastikan anda memiliki akun back4app yang aktif dengan proyek baru yang dibuat lihat panduan memulai dengan back4app https //www back4app com/docs/get started/new parse app untuk panduan pengaturan pengembangan ractive js siapkan proyek anda menggunakan boilerplate atau konfigurasi pilihan anda, pastikan anda telah menginstal node js (v14 atau lebih baru) pengetahuan dasar tentang javascript, ractive js, dan rest api tinjau dokumentasi ractive js https //ractive js org/ sesuai kebutuhan langkah 1 – inisialisasi proyek memulai proyek back4app baru masuk ke akun back4app anda pilih opsi “aplikasi baru” di dasbor anda beri nama proyek anda basic crud app ractive dan ikuti instruksi di layar untuk membuatnya buat proyek baru setelah pengaturan, proyek anda akan terlihat di dasbor, siap untuk konfigurasi backend lebih lanjut langkah 2 – merancang skema database anda membuat model data anda untuk aplikasi crud ini, anda akan mendefinisikan beberapa koleksi untuk mengelola data anda di bawah ini adalah contoh koleksi dengan bidang dan tipe data yang disarankan, memastikan backend dioptimalkan untuk fungsionalitas crud 1\ koleksi item koleksi ini memuat rincian untuk setiap item bidang tipe tujuan id objectid pengidentifikasi utama yang dihasilkan secara otomatis judul string judul item deskripsi string ringkasan singkat tentang item tersebut dibuat pada tanggal timestamp pembuatan catatan diperbarui pada tanggal timestamp pembaruan terakhir 2\ koleksi pengguna koleksi ini mengelola data pengguna dan otentikasi bidang tipe tujuan id objectid pengidentifikasi utama 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 untuk otentikasi yang aman dibuat pada tanggal stempel waktu untuk pembuatan akun diperbarui pada tanggal timestamp untuk pembaruan akun terakhir anda dapat secara manual membuat koleksi ini melalui dasbor back4app dengan membuat kelas baru dan menambahkan kolom yang diperlukan buat kelas baru tentukan bidang dengan memilih tipe data yang sesuai, memberi nama kolom, dan mengatur nilai default atau yang diperlukan buat kolom memanfaatkan agen ai back4app untuk otomatisasi skema agen ai back4app dapat secara otomatis menghasilkan skema anda berdasarkan permintaan anda alat efisien ini menyederhanakan manajemen proyek dengan cepat membangun koleksi dan bidang anda cara mengoperasikan agen ai akses agen ai dari dasbor proyek anda masukkan permintaan terperinci yang menggambarkan koleksi dan bidang yang anda inginkan tinjau dan terapkan skema yang dihasilkan secara otomatis ke proyek anda contoh permintaan create these 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) pendekatan ini memastikan skema anda konsisten dan disesuaikan dengan kebutuhan aplikasi anda langkah 3 – mengaktifkan aplikasi admin & mengelola operasi crud tentang antarmuka admin aplikasi admin back4app menawarkan solusi tanpa kode untuk menangani data backend anda antarmuka drag and drop nya memungkinkan operasi crud yang mudah seperti menambahkan, memodifikasi, atau menghapus catatan cara mengaktifkan aplikasi admin pergi ke menu “lainnya” di dasbor back4app anda pilih “aplikasi admin” dan klik “aktifkan aplikasi admin ” atur pengguna admin pertama anda, yang juga mengonfigurasi peran (seperti b4aadminuser ) dan koleksi sistem aktifkan aplikasi admin setelah diaktifkan, masuk ke aplikasi admin untuk mengelola koleksi anda dasbor aplikasi admin mengelola data melalui aplikasi admin menambahkan entri gunakan opsi “tambahkan catatan” dalam koleksi (seperti item) untuk memasukkan data baru melihat/mengedit catatan pilih catatan mana pun untuk memeriksa detail atau memperbarui bidang menghapus entri gunakan fungsi hapus untuk menghilangkan catatan yang sudah tidak relevan antarmuka yang ramah pengguna ini menyederhanakan semua fungsi crud langkah 4 – menghubungkan ractive js dengan back4app sekarang setelah backend anda siap, saatnya menghubungkan frontend ractive js anda ke back4app menggunakan panggilan rest api dengan ractive js karena ractive js tidak memiliki sdk parse yang khusus, anda akan menggunakan panggilan rest api untuk melakukan operasi crud contoh mengambil item buat komponen ractive yang mengambil dan menampilkan data dari koleksi item back4app anda items html items list {{#each items}} {{title}} {{description}} edit delete {{/each}} add new item add items js import ractive from "ractive"; const api url = "https //parseapi back4app com/classes/items"; const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; const ractive = new ractive({ target "#items container", template "#items template", data { items \[], newtitle "", newdescription "" } }); // function to load items async function loaditems() { try { const response = await fetch(api url, { headers headers }); const result = await response json(); ractive set("items", result results map(item => ({ id item objectid, title item title, description item description }))); } catch (error) { console error("error fetching items ", error); } } ractive on("additem", async function () { const title = ractive get("newtitle"); const description = ractive get("newdescription"); try { await fetch(api url, { method "post", headers headers, body json stringify({ title, description }) }); ractive set({ newtitle "", newdescription "" }); loaditems(); } catch (error) { console error("error adding item ", error); } }); // additional functions for editing and deleting would follow a similar rest approach loaditems(); anda dapat menggabungkan interaksi api ini ke dalam komponen ractive js anda untuk menangani semua operasi crud langkah 5 – memperkuat keamanan backend mengimplementasikan kontrol akses tingkatkan keamanan dengan menetapkan daftar kontrol akses (acl) pada objek anda misalnya, untuk membuat item menjadi pribadi async function createprivateitem(itemdata, owneruserid) { const data = { title itemdata title, description itemdata description, acl { \[owneruserid] { read true, write true }, " " { read false, write false } } }; try { const response = await fetch(api url, { method "post", headers headers, body json stringify(data) }); const result = await response json(); console log("private item created ", result); } catch (error) { console error("error creating private item ", error); } } mengonfigurasi izin tingkat kelas di dalam dasbor back4app, sesuaikan izin tingkat kelas (clp) untuk setiap koleksi untuk mendefinisikan kebijakan akses default langkah ini memastikan bahwa hanya pengguna yang berwenang yang dapat mengakses data sensitif langkah 6 – mengelola autentikasi pengguna mengonfigurasi akun pengguna back4app menggunakan kelas pengguna parse untuk menangani autentikasi implementasikan pendaftaran pengguna dan login melalui panggilan rest api di aplikasi ractive js anda contoh pendaftaran pengguna async function signupuser(username, email, password) { const response = await fetch("https //parseapi back4app com/users", { method "post", headers headers, body json stringify({ username, email, password }) }); const result = await response json(); if (result objectid) { alert("user registered successfully!"); } else { alert("error during sign up " + result error); } } implementasikan rutinitas serupa untuk login dan penanganan sesi fitur tambahan seperti pemulihan kata sandi dan verifikasi email dapat diatur melalui dasbor back4app langkah 7 – menerapkan frontend ractive js anda fitur penyebaran web back4app memungkinkan anda untuk menghosting aplikasi ractive js anda dengan menghubungkannya ke repositori github anda 7 1 membangun versi produksi anda buka folder proyek anda di terminal laksanakan proses build (ini mungkin merupakan perintah kustom berdasarkan pengaturan anda, misalnya, menggunakan rollup atau webpack) pastikan bahwa folder produksi anda (umumnya dinamai dist atau build ) berisi file statis anda 7 2 mengorganisir dan mengkomit kode anda repositori proyek anda harus memiliki struktur yang jelas, misalnya basic crud app ractive/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── main js \| ├── ractiveconfig js \| └── components/ \| ├── items html \| └── auth html \| package json \| readme md file contoh ractiveconfig js // ractiveconfig js // this file can include global configuration for your ractive app export const api url = "https //parseapi back4app com"; export const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; mengkomit kode anda inisialisasi repositori git git init tambahkan file anda git add komit perubahan git commit m "komit awal untuk frontend ractive js" buat repositori github (misalnya, basic crud app ractive ) dan dorong kode anda git remote add origin https //github com/your username/basic crud app ractive git git push u origin main 7 3 menghubungkan repositori anda ke penyebaran web back4app masuk ke dasbor back4app anda, pilih proyek anda ( basic crud app ractive ), dan pilih opsi penyebaran web hubungkan akun github anda sesuai petunjuk pilih repositori dan cabang (biasanya main ) yang berisi kode ractive js anda 7 4 mengatur parameter penyebaran konfigurasikan hal hal berikut perintah build tentukan perintah build anda (misalnya, npm run build ) direktori output atur ke folder produksi anda (misalnya, build atau dist ) variabel lingkungan sertakan kunci api atau variabel konfigurasi yang diperlukan 7 5 menggunakan kontainer dengan docker (opsional) jika anda ingin menyebarkan melalui docker, sertakan sebuah dockerfile dalam proyek anda \# base build stage using node js from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire app and build it copy run npm run build \# production stage using nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 meluncurkan aplikasi anda klik tombol deploy di back4app pantau proses penyebaran saat back4app menarik dan membangun repositori anda setelah selesai, back4app akan memberikan url untuk aplikasi ractive js yang dihosting 7 7 memverifikasi penyebaran buka url yang diberikan di browser anda uji semua rute, memastikan setiap aset (css, js, gambar) dimuat dengan benar jika terjadi masalah, konsultasikan log penyebaran dan periksa pengaturan build anda langkah 8 – penutup dan arah masa depan kerja bagus! anda telah berhasil membangun aplikasi crud lengkap menggunakan ractive js dan back4app anda telah menyiapkan proyek bernama basic crud app ractive , mendefinisikan koleksi yang tepat untuk item dan pengguna, dan menggunakan aplikasi admin yang intuitif untuk manajemen backend selain itu, anda mengintegrasikan frontend ractive js anda dengan backend dan memperkuat keamanan data anda langkah selanjutnya tingkatkan ui anda tambahkan fitur seperti tampilan detail, fungsi pencarian, atau pembaruan waktu nyata perluas backend anda integrasikan logika backend yang lebih canggih seperti fungsi cloud atau layanan api pihak ketiga perdalam pembelajaran anda jelajahi dokumentasi back4app https //www back4app com/docs untuk konfigurasi dan optimasi yang lebih canggih dengan tutorial ini, anda sekarang memiliki keahlian untuk membuat backend crud yang dapat diskalakan untuk aplikasi ractive js anda menggunakan back4app selamat coding!