Building a CRUD App with Inferno.js: A Comprehensive Walkthrough

ikhtisar panduan ini akan menunjukkan kepada anda cara membangun aplikasi crud (buat, baca, perbarui, hapus) yang lengkap menggunakan inferno js anda akan belajar bagaimana menangani operasi data dasar dengan mengembangkan sistem crud yang secara efisien memanipulasi dan memperbarui informasi fondasi backend kami didukung oleh back4app, di mana anda akan membuat proyek bernama basic crud app infernojs untuk mengelola data anda dengan lancar anda akan terlebih dahulu menyiapkan proyek back4app anda dan merancang skema database yang dapat diskalakan dengan mendefinisikan kelas dan bidang—baik secara manual atau dengan asisten ai back4app proses ini memastikan struktur data anda cukup kuat untuk semua tugas crud setelah itu, anda akan memanfaatkan antarmuka admin back4app, alat drag and drop tanpa kode yang membuat manajemen data menjadi sederhana akhirnya, anda akan menghubungkan frontend inferno js anda dengan back4app menggunakan sdk (jika sesuai dengan pengaturan anda) atau melalui panggilan api, sambil menerapkan kontrol akses yang ketat untuk keamanan pada akhir tutorial ini, anda akan memiliki aplikasi web tingkat produksi yang menampilkan otentikasi pengguna, penanganan data dinamis, dan antarmuka yang responsif inti wawasan kuasi fungsionalitas crud dengan backend yang kuat di back4app pahami cara merancang skema database yang dapat diskalakan dan mengintegrasikannya dengan frontend inferno js anda jelajahi alat manajemen visual untuk menjalankan operasi buat, baca, perbarui, dan hapus dengan mudah pelajari strategi penyebaran, termasuk kontainerisasi dengan docker persyaratan akun back4app dan proyek yang baru dibuat jika anda memerlukan panduan, lihat memulai dengan back4app https //www back4app com/docs/get started/new parse app pengaturan pengembangan inferno js gunakan starter atau boilerplate inferno favorit anda pastikan node js (versi 14 atau lebih baru) terinstal pemahaman dasar tentang javascript, inferno js, dan prinsip rest api untuk detail tambahan, konsultasikan dokumentasi inferno https //infernojs org/docs/introduction sebelum memulai, harap pastikan anda memiliki langkah 1 – menginisialisasi proyek anda meluncurkan proyek back4app baru masuk ke akun back4app anda pilih opsi “aplikasi baru” dari dasbor anda beri nama proyek anda basic crud app infernojs dan ikuti langkah langkah di layar untuk menyelesaikan pembuatan buat proyek baru setelah pembuatan, proyek anda muncul di dasbor anda, menyediakan platform backend yang solid untuk aplikasi anda langkah 2 – merancang skema database menentukan model data anda untuk aplikasi crud ini, anda akan menetapkan beberapa kelas di bawah ini adalah contoh dua kelas penting dengan bidangnya, disiapkan untuk mendukung operasi crud 1\ kelas item bidang tipe rincian id objectid kunci utama yang dihasilkan secara otomatis judul string judul item deskripsi string penjelasan singkat tentang item tersebut dibuat pada tanggal stempel waktu yang menandai kapan item dibuat diperbarui pada tanggal timestamp untuk pembaruan terbaru 2\ kelas pengguna bidang tipe rincian id objectid kunci utama yang dihasilkan secara otomatis nama pengguna string pengidentifikasi unik untuk pengguna email string alamat email unik pengguna hash kata sandi string kata sandi terenkripsi untuk otentikasi yang aman dibuat pada tanggal stempel waktu untuk pembuatan akun diperbarui pada tanggal stempel waktu untuk pembaruan akun terakhir buat kelas kelas ini secara manual di dasbor back4app dengan memilih “kelas baru” dan menambahkan kolom yang diperlukan buat kelas baru anda dapat mendefinisikan setiap bidang dengan memilih jenis data, memberikan nama, dan mengatur default atau persyaratan buat kolom memanfaatkan asisten ai back4app untuk pengaturan skema asisten ai back4app menyederhanakan pembuatan skema dengan menghasilkan kelas secara otomatis berdasarkan deskripsi anda cara menggunakan asisten ai akses asisten ai masuk ke dasbor back4app anda dan temukan asisten ai di pengaturan detail model data anda masukkan deskripsi komprehensif tentang kelas dan bidang yang anda butuhkan tinjau dan terapkan asisten akan mengusulkan definisi kelas konfirmasi dan terapkan pengaturan ini contoh prompt create the following classes in my back4app app 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto set) \ updated at date (auto update) 2\) class users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto set) \ updated at date (auto update) menggunakan asisten ai memperlancar pengaturan anda, memastikan konsistensi dan efisiensi langkah 3 – mengaktifkan antarmuka admin & fungsi crud memperkenalkan antarmuka admin antarmuka admin back4app adalah alat tanpa kode yang kuat yang menawarkan pengalaman seret dan lepas untuk mengelola backend anda ini memungkinkan anda untuk dengan mudah melakukan operasi crud mengaktifkan antarmuka admin pergi ke bagian “more” di dasbor back4app anda klik “admin app” dan kemudian tekan “enable admin app ” siapkan akun admin anda dengan membuat pengguna admin awal anda proses ini secara otomatis mengonfigurasi peran dan kelas sistem yang penting aktifkan aplikasi admin setelah mengaktifkan, masuk ke antarmuka admin untuk mengelola data anda dasbor aplikasi admin melakukan crud melalui antarmuka admin di dalam antarmuka admin, anda dapat buat entri gunakan opsi “tambahkan rekaman” dalam kelas (seperti item) untuk memasukkan data baru baca/ubah entri klik pada rekaman mana pun untuk melihat atau memperbarui detailnya hapus entri manfaatkan fitur hapus untuk menghapus rekaman yang tidak diinginkan antarmuka ini sangat meningkatkan kegunaan dengan menyederhanakan semua tugas crud langkah 4 – menghubungkan inferno js dengan back4app dengan backend anda yang dikonfigurasi melalui antarmuka admin, saatnya untuk mengintegrasikan frontend inferno js anda opsi a menggunakan parse sdk instal parse sdk npm install parse inisialisasi parse di aplikasi inferno anda buat file konfigurasi (misalnya, src/parseconfig js ) // src/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; terapkan parse dalam komponen inferno misalnya, buat komponen untuk mengambil dan mencantumkan item // src/components/itemslist js import { component } from 'inferno'; import parse from ' /parseconfig'; class itemslist extends component { constructor(props) { super(props); this state = { items \[] }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("error loading items ", err); } } render() { return ( \<div> \<h2>item\</h2> \<ul> {this state items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); } } export default itemslist; opsi b menggunakan rest atau graphql apis jika parse sdk tidak ideal untuk skenario anda, anda dapat melakukan tindakan crud melalui rest atau graphql misalnya, untuk mengambil item dengan rest // rest api call to retrieve items const fetchitems = async () => { 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('items retrieved ', data results); } catch (err) { console error('error fetching items ', err); } }; fetchitems(); sisipkan panggilan api ini ke dalam komponen inferno anda sesuai kebutuhan langkah 5 – memperkuat backend anda mengimplementasikan daftar kontrol akses (acl) pastikan keamanan data dengan menetapkan acl misalnya, untuk menghasilkan item pribadi async function createprivateitem(itemdata, owner) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl so only the owner has access const acl = new parse acl(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (err) { console error('error creating item ', err); } } mengonfigurasi izin tingkat kelas (clp) di dalam dasbor back4app anda, sesuaikan clp untuk setiap kelas untuk menegakkan kebijakan akses default, memastikan hanya pengguna yang berwenang yang dapat berinteraksi dengan data sensitif langkah 6 – mengelola autentikasi pengguna mendirikan akun pengguna back4app menggunakan kelas pengguna (melalui parse) untuk menangani autentikasi dalam aplikasi inferno js anda, terapkan fungsi pendaftaran dan login seperti yang diilustrasikan di bawah ini // src/components/auth js import { component } from 'inferno'; import parse from ' /parseconfig'; export class signup extends component { constructor(props) { super(props); this state = { username '', password '', email '' }; } handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', this state username); user set('password', this state password); user set('email', this state email); try { await user signup(); alert('registration successful!'); } catch (err) { alert('sign up error ' + err message); } }; render() { return ( \<form onsubmit={this handlesignup}> \<input type="text" placeholder="username" value={this state username} oninput={e => this setstate({ username e target value })} /> \<input type="password" placeholder="password" value={this state password} oninput={e => this setstate({ password e target value })} /> \<input type="email" placeholder="email" value={this state email} oninput={e => this setstate({ email e target value })} /> \<button type="submit">sign up\</button> \</form> ); } } strategi serupa berlaku untuk login dan manajemen sesi fitur tambahan seperti otentikasi sosial, verifikasi email, dan pemulihan kata sandi dapat diatur di dasbor back4app langkah 7 – menerapkan frontend inferno js anda opsi web deployment back4app memungkinkan anda untuk menghosting frontend inferno js anda dengan mudah dengan menghubungkan repositori github anda 7 1 membangun untuk produksi buka direktori proyek anda di terminal jalankan perintah build produksi npm run build perintah ini mengompilasi aplikasi anda menjadi sebuah build folder yang berisi aset statis yang dioptimalkan konfirmasi build verifikasi bahwa build folder mencakup sebuah index html file dan folder aset lainnya 7 2 mengorganisir dan mengunggah kode anda repositori anda harus mencakup sumber lengkap dari frontend inferno js anda contoh struktur direktori basic crud app infernojs frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parseconfig js \| ` components/ \| | itemslist js \| ` auth js \| package json ` readme md file contoh src/parseconfig js // src/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; src/app js // src/app js import { component } from 'inferno'; import parse from ' /parseconfig'; class app extends component { constructor(props) { super(props); this state = { items \[], newtitle "", newdescription "", editid null, edittitle "", editdescription "" }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("error loading items ", err); } } handleadd = async () => { const items = parse object extend("items"); const item = new items(); item set("title", this state newtitle); item set("description", this state newdescription); try { await item save(); this setstate({ newtitle "", newdescription "" }); this loaditems(); } catch (err) { console error("error adding item ", err); } } handledelete = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (err) { console error("error deleting item ", err); } } startedit = (item) => { this setstate({ editid item id, edittitle item get("title"), editdescription item get("description") }); } handleupdate = async () => { try { const items = parse object extend("items"); const item = new items(); item id = this state editid; item set("title", this state edittitle); item set("description", this state editdescription); await item save(); this setstate({ editid null, edittitle "", editdescription "" }); this loaditems(); } catch (err) { console error("error updating item ", err); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this state newtitle} oninput={e => this setstate({ newtitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={this state newdescription} oninput={e => this setstate({ newdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleadd}>add item\</button> \</div> \<h2>items list\</h2> \<ul> {this state items map(item => ( \<li key={item id} style={{ marginbottom '1rem' }}> {this state editid === item id ? ( \<div> \<input type="text" value={this state edittitle} oninput={e => this setstate({ edittitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" value={this state editdescription} oninput={e => this setstate({ editdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleupdate}>save\</button> \<button onclick={() => this setstate({ editid null })} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => this handledelete(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } } export default app; mengunggah kode anda ke github inisialisasi git di folder proyek anda git init stage file anda git add commit perubahan anda git commit m "commit awal untuk frontend inferno js" buat repositori github namai itu basic crud app infernojs frontend dorong proyek anda git remote add origin https //github com/your username/basic crud app infernojs frontend git git push u origin main 7 3 menghubungkan github dengan penyebaran web back4app pergi ke penyebaran web masuk ke back4app, pilih proyek anda ( basic crud app infernojs ), dan klik pada fitur penyebaran web integrasi dengan github ikuti petunjuk untuk menghubungkan akun github anda, memungkinkan back4app mengakses repositori anda pilih repositori dan cabang anda pilih repositori (misalnya, basic crud app infernojs frontend ) dan cabang (biasanya main ) yang berisi kode anda 7 4 pengaturan penyebaran masukkan konfigurasi tambahan perintah build jika repositori anda tidak memiliki folder build , tentukan perintah seperti npm run build back4app akan menjalankan ini selama penyebaran folder output atur output ke build sehingga back4app tahu di mana file statis anda berada variabel lingkungan tambahkan variabel yang diperlukan (seperti kunci api) dalam pengaturan konfigurasi 7 5 dockerisasi aplikasi anda jika anda memilih untuk melakukan kontainerisasi, sertakan dockerfile di repositori anda seperti \# use an official node image for the build stage 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 remaining files and build the app 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 penyebaran docker di back4app jika anda memilih metode ini 7 6 meluncurkan aplikasi anda klik deploy setelah semua pengaturan dikonfigurasi, tekan tombol deploy tonton proses build back4app akan mengambil kode anda, membangun proyek anda, dan menyebarkannya dalam sebuah kontainer akses aplikasi anda setelah penyebaran, back4app menyediakan url di mana aplikasi inferno js anda aktif 7 7 mengonfirmasi penyebaran kunjungi url yang diberikan buka url di browser anda uji fungsionalitas pastikan aplikasi dimuat, semua rute berfungsi dengan benar, dan aset (css, js, gambar) ditampilkan seperti yang diharapkan pemecahan masalah gunakan alat pengembang untuk memeriksa kesalahan jika masalah muncul, periksa log back4app dan verifikasi pengaturan github langkah 8 – menyelesaikan dan arah masa depan selamat! anda telah membuat aplikasi crud lengkap dengan inferno js dan back4app anda telah menyiapkan proyek basic crud app infernojs , merancang kelas data anda, dan menggunakan antarmuka admin yang intuitif untuk manajemen data frontend anda sekarang terhubung dan diamankan dengan kontrol akses yang kuat langkah selanjutnya tingkatkan ui kembangkan aplikasi inferno js anda dengan tampilan detail, kemampuan pencarian, dan notifikasi langsung tambahkan fitur lebih banyak pertimbangkan untuk menerapkan fungsi backend tambahan (seperti cloud code), mengintegrasikan api pihak ketiga, atau memperkenalkan akses berbasis peran jelajahi lebih lanjut selami dokumentasi back4app https //www back4app com/docs dan tutorial tambahan untuk penyetelan kinerja dan integrasi kustom selamat coding dan semoga sukses dengan proyek proyek anda di masa depan!