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

ikhtisar dalam panduan ini, anda akan belajar untuk membuat aplikasi crud (buat, baca, perbarui, dan hapus) menggunakan riot js kami akan melalui pengaturan proyek back4app—diberi nama basic crud app riotjs —untuk berfungsi sebagai backend anda, dan kemudian mengintegrasikannya dengan frontend riot js tutorial ini mencakup segala hal mulai dari merancang skema basis data anda dan mengelola data dengan aplikasi admin back4app hingga mengintegrasikan frontend anda menggunakan sdk (jika berlaku) atau panggilan api rest/graphql pada akhir tutorial, anda akan memiliki aplikasi web yang sepenuhnya operasional dan siap produksi dengan fitur otentikasi pengguna dan penanganan data yang aman manfaat utama kuasi operasi crud menggunakan sistem backend yang dapat diskalakan dapatkan wawasan tentang mengintegrasikan frontend riot js dengan back4app manfaatkan aplikasi admin back4app yang intuitif untuk pengelolaan data yang mudah pelajari strategi penyebaran, termasuk kontainerisasi docker prasyarat sebelum anda mulai, pastikan anda memiliki akun back4app dengan proyek baru lihat panduan memulai dengan back4app https //www back4app com/docs/get started/new parse app untuk panduan pengaturan pengembangan untuk riot js anda dapat menggunakan riot cli atau menyertakan riot melalui tag skrip pastikan node js (v14 atau lebih baru) terinstal pengetahuan dasar tentang javascript, riot js, dan rest api jika perlu, konsultasikan dokumentasi riot js https //riot js org/ untuk wawasan tambahan langkah 1 – inisialisasi proyek membuat proyek back4app masuk ke akun back4app anda klik “aplikasi baru” di dasbor anda beri nama proyek anda basic crud app riotjs dan ikuti instruksi pengaturan buat proyek baru proyek anda sekarang akan muncul di dasbor back4app anda, berfungsi sebagai tulang punggung untuk data aplikasi anda langkah 2 – merancang skema database anda membuat model data anda untuk aplikasi crud kami, anda akan mendefinisikan beberapa koleksi di bawah ini adalah contoh koleksi dan bidang untuk membantu anda menyusun database anda untuk operasi crud yang efisien 1\ koleksi item koleksi ini menyimpan rincian tentang setiap item bidang tipe deskripsi id objectid pengidentifikasi unik yang dihasilkan secara otomatis judul string judul item deskripsi string deskripsi singkat item dibuat pada tanggal timestamp ketika item ditambahkan diperbarui pada tanggal timestamp ketika item diubah 2\ koleksi pengguna koleksi ini berisi rincian pengguna dan informasi otentikasi bidang tipe deskripsi id objectid pengidentifikasi unik yang dihasilkan secara otomatis nama pengguna string nama pengguna yang unik email string alamat email yang unik hash kata sandi string kata sandi terenkripsi dibuat pada tanggal stempel waktu pembuatan akun diperbarui pada tanggal timestamp pembaruan akun terakhir anda dapat mengonfigurasi koleksi ini secara manual di dasbor back4app dengan membuat kelas baru dan mendefinisikan kolom buat kelas baru anda dapat menambahkan bidang dengan memilih jenis data, menetapkan nama, mengatur default, dan menandai apakah bidang tersebut wajib buat kolom memanfaatkan agen ai back4app untuk pembuatan skema agen ai back4app, yang dapat diakses dari dasbor anda, dapat secara otomatis menghasilkan skema anda dengan memproses prompt terperinci yang menggambarkan koleksi dan bidang yang anda butuhkan menggunakan agen ai buka agen ai temukan di pengaturan proyek atau menu anda masukkan model data anda tempelkan prompt yang menjelaskan koleksi dan bidangnya tinjau dan konfirmasi validasi skema yang dihasilkan dan terapkan ke 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) alat ini mempercepat proses dan memastikan pengaturan skema yang konsisten langkah 3 – mengaktifkan aplikasi admin & tindakan crud ikhtisar aplikasi admin aplikasi admin back4app menawarkan antarmuka tanpa kode, seret dan lepas untuk manajemen backend yang mudah, memungkinkan anda melakukan operasi crud dengan cepat mengaktifkan aplikasi admin buka menu “lainnya” di dasbor back4app anda pilih “aplikasi admin” dan klik “aktifkan aplikasi admin ” siapkan akun admin anda dengan membuat pengguna admin awal, yang juga menetapkan peran default aktifkan aplikasi admin setelah diaktifkan, masuk ke aplikasi admin untuk mengelola data backend anda dasbor aplikasi admin melakukan operasi crud melalui aplikasi admin dalam antarmuka ini, anda dapat menambahkan rekaman gunakan tombol “tambahkan rekaman” dalam koleksi (misalnya, item) untuk membuat entri baru mengedit rekaman klik pada rekaman mana pun untuk melihat dan mengubah detailnya menghapus rekaman hapus rekaman yang tidak lagi diperlukan alat ini menyederhanakan alur kerja anda dengan menawarkan antarmuka yang sederhana untuk mengelola data langkah 4 – menghubungkan riot js dengan back4app sekarang setelah backend anda disiapkan, saatnya untuk menghubungkan frontend riot js anda ke back4app opsi a menggunakan parse sdk instal parse sdk npm install parse inisialisasi parse di proyek riot js anda buat file (misalnya, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; gunakan parse dalam tag riot buat tag riot (misalnya, items riot ) untuk mengambil dan menampilkan item items { item get("title") } — { item get("description") } opsi b menggunakan rest atau graphql api jika parse sdk tidak cocok, lakukan operasi crud melalui panggilan api misalnya, untuk mengambil item menggunakan rest // rest api example 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('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } } fetchitems(); integrasikan panggilan api ini dalam tag riot js anda sesuai kebutuhan langkah 5 – melindungi backend anda mengonfigurasi daftar kontrol akses (acl) amankan data anda dengan mengatur acl pada objek anda misalnya, untuk membuat item pribadi 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); // define acl only the owner has read/write access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } menyesuaikan izin tingkat kelas (clp) di dalam dasbor back4app anda, konfigurasikan clp untuk setiap koleksi untuk memastikan bahwa hanya pengguna yang terautentikasi atau berwenang yang dapat mengakses data sensitif langkah 6 – autentikasi pengguna mengonfigurasi akun pengguna aplikasi riot js dapat menangani pendaftaran dan login pengguna menggunakan kelas parse user bawaan dari back4app berikut adalah contoh tag riot untuk pendaftaran pengguna sign up strategi serupa dapat diterapkan untuk login dan manajemen sesi fitur tambahan seperti login sosial, verifikasi email, atau pemulihan kata sandi dapat diatur di dasbor back4app anda langkah 7 – menerapkan frontend riot js anda fitur web deployment back4app memungkinkan anda untuk menghosting aplikasi riot js anda dengan menghubungkan repositori github anda ikuti langkah langkah ini untuk menerapkan build produksi anda 7 1 bangun berkas produksi anda buka direktori proyek anda di terminal jalankan perintah build anda npm run build ini akan membuat folder build dengan berkas statis yang dioptimalkan (html, js, css, gambar) konfirmasi build verifikasi bahwa folder build mencakup sebuah index html dan direktori aset yang diperlukan 7 2 atur dan dorong kode anda ke github repository anda harus berisi sumber frontend riot js yang lengkap struktur yang khas bisa berupa basic crud app riotjs frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── app riot \| ├── parseconfig js \| └── tags/ \| ├── items riot \| └── auth riot \| package json \| readme md contoh src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your actual back4app keys here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; contoh src/app riot riot js crud app kirim dan dorong kode anda inisialisasi repositori git (jika belum dilakukan) git init tambahkan file anda git add kirim perubahan anda git commit m "kirim awal untuk frontend riot js" buat repositori github (misalnya, basic crud app riotjs frontend ) dan dorong kode anda git remote add origin https //github com/your username/basic crud app riotjs frontend git git push u origin main 7 3 integrasikan repo github anda dengan deployment web back4app buka deployment web masuk ke dasbor back4app anda, pilih proyek anda ( basic crud app riotjs ), dan klik pada deployment web hubungkan ke github ikuti petunjuk untuk menghubungkan akun dan repositori github anda pilih repo dan cabang anda pilih repositori anda (misalnya, basic crud app riotjs frontend ) dan cabang yang sesuai (seperti main ) 7 4 konfigurasi penyebaran perintah build jika repositori anda tidak memiliki folder build yang sudah dibangun, tentukan perintah build (misalnya, npm run build ) back4app akan mengeksekusinya direktori output atur ini ke build untuk menunjukkan di mana file statis anda berada variabel lingkungan sertakan variabel yang diperlukan (seperti kunci api) dalam konfigurasi anda 7 5 dockerisasi aplikasi riot js anda (opsional) jika anda lebih suka penyebaran terkontainer, tambahkan sebuah dockerfile ke proyek anda \# use an official node image to build the app from node 16 alpine as build \# set 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 \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] pilih opsi docker di pengaturan penyebaran web anda jika anda memilih jalur ini 7 6 luncurkan aplikasi anda terapkan klik tombol terapkan setelah mengonfigurasi pengaturan anda pantau proses back4app akan mengambil kode anda, menjalankan perintah build, dan menerapkan aplikasi anda dalam sebuah kontainer dapatkan url anda setelah diterapkan, back4app menyediakan url di mana aplikasi riot js anda dihosting 7 7 validasi penerapan anda kunjungi url buka url yang diberikan di browser anda uji aplikasi pastikan semua rute dan aset (css, javascript, gambar) berfungsi dengan baik atasi masalah gunakan alat pengembang browser dan log back4app jika ada masalah yang muncul langkah 8 – menyelesaikan dan arah masa depan selamat! anda telah membangun aplikasi crud yang sepenuhnya fungsional menggunakan riot js dan back4app anda telah menyiapkan proyek yang disebut basic crud app riotjs , merancang skema database yang kuat untuk items dan users, dan mengelola data anda dengan admin app anda telah mengintegrasikan frontend riot js anda dan menerapkan langkah langkah keamanan seperti acl langkah selanjutnya tingkatkan frontend tambahkan fitur seperti tampilan rinci, kemampuan pencarian, dan pembaruan waktu nyata perluas fungsionalitas jelajahi operasi backend lanjutan seperti cloud functions atau integrasikan api pihak ketiga perdalam pembelajaran anda kunjungi dokumentasi back4app https //www back4app com/docs dan sumber daya lainnya untuk mengoptimalkan dan memperluas aplikasi anda dengan langkah langkah ini, anda sekarang memiliki keahlian untuk membangun aplikasi crud yang dapat diskalakan menggunakan riot js dan back4app selamat coding!