Building a Basic CRUD Application with Mithril.js: A Detailed Tutorial

ikhtisar panduan ini akan memandu anda melalui pembuatan aplikasi crud (buat, baca, perbarui, dan hapus) menggunakan mithril js sepanjang tutorial ini, anda akan belajar bagaimana mengonfigurasi proyek back4app yang berjudul basic crud app mithriljs untuk berfungsi sebagai backend yang kuat untuk aplikasi web anda kami akan merancang skema data yang efisien, mengelolanya melalui panel admin back4app, dan mengintegrasikan frontend mithril js anda menggunakan panggilan rest api apa yang akan anda pelajari cara mengatur sistem crud yang dapat diandalkan untuk menangani data menggunakan backend yang kuat strategi untuk membangun desain database yang dapat diskalakan dan menghubungkannya ke aplikasi mithril js memanfaatkan antarmuka admin intuitif drag and drop back4app untuk melakukan tindakan crud metode penyebaran, termasuk kontainerisasi docker, untuk membuat aplikasi anda segera online persyaratan sebelum anda mulai, harap konfirmasi bahwa anda telah akun back4app dan proyek yang aktif untuk bantuan, lihat memulai dengan back4app https //www back4app com/docs/get started/new parse app lingkungan pengembangan mithril js anda dapat menyertakan mithril melalui npm atau cdn pastikan anda telah menginstal node js (v14+) pengetahuan dasar tentang javascript, mithril js, dan restful api untuk panduan tambahan, lihat dokumentasi mithril js https //mithril js org/ langkah 1 – menginisialisasi proyek anda menyiapkan proyek back4app baru masuk ke akun back4app anda klik tombol aplikasi baru dari dasbor anda berikan nama proyek basic crud app mithriljs dan ikuti langkah langkah yang diarahkan buat proyek baru setelah disiapkan, proyek anda akan terdaftar di dasbor anda, berfungsi sebagai pusat backend untuk aplikasi anda langkah 2 – membuat skema database anda membangun model data untuk aplikasi crud ini, anda akan merancang beberapa koleksi kunci di bawah ini adalah garis besar untuk membuat koleksi dengan bidang masing masing untuk menangani operasi crud secara efektif 1\ koleksi item koleksi ini menyimpan rincian untuk setiap item bidang tipe tujuan id objectid pengidentifikasi unik yang dihasilkan secara otomatis judul string nama atau judul item deskripsi string ringkasan singkat tentang item tersebut dibuat pada tanggal stempel waktu pembuatan diperbarui pada tanggal timestamp untuk pembaruan terbaru 2\ koleksi pengguna koleksi ini mengelola profil pengguna dan detail otentikasi bidang tipe tujuan id objectid pengidentifikasi unik yang dihasilkan secara otomatis nama pengguna string nama unik pengguna email string alamat email unik pengguna hash kata sandi string kata sandi yang di hash untuk otentikasi yang aman dibuat pada tanggal timestamp ketika pengguna terdaftar diperbarui pada tanggal stempel waktu untuk setiap modifikasi anda dapat menambahkan koleksi dan kolom ini secara manual melalui dasbor back4app dengan membuat kelas baru dan mendefinisikan setiap kolom sesuai buat kelas baru untuk menambahkan bidang, cukup pilih tipe data yang sesuai, berikan nama, atur default, dan tandai jika diperlukan buat kolom memanfaatkan ai agent back4app untuk automasi skema ai agent terintegrasi di back4app menyederhanakan pembuatan skema dengan menghasilkan koleksi anda secara otomatis berdasarkan prompt yang diberikan cara menggunakan ai agent akses ai agent dari dasbor proyek anda jelaskan skema yang anda inginkan dengan merinci koleksi dan bidang tinjau skema yang dihasilkan dan terapkan perubahan 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) alat ini membantu memastikan bahwa desain basis data anda konsisten dan optimal untuk menangani operasi crud langkah 3 – mengaktifkan antarmuka admin & fungsionalitas crud ikhtisar antarmuka admin antarmuka admin back4app adalah solusi tanpa kode yang dirancang untuk membantu anda mengelola data backend anda dengan mudah desain drag and drop nya membuat melakukan operasi crud menjadi sangat mudah cara mengaktifkan antarmuka admin pergi ke lebih banyak di dasbor back4app anda klik pada aplikasi admin lalu pilih aktifkan aplikasi admin atur kredensial administrator anda untuk membuat pengguna admin pertama anda proses ini juga mengonfigurasi peran (seperti b4aadminuser ) dan koleksi sistem aktifkan aplikasi admin setelah aktivasi, masuk ke antarmuka admin untuk mengelola koleksi anda dasbor aplikasi admin melakukan operasi crud melalui antarmuka admin tambahkan rekor baru gunakan opsi “tambahkan rekor” di koleksi mana pun (misalnya, item) untuk membuat entri lihat/ubah rekor klik pada sebuah rekor untuk memeriksa detail atau mengedit bidangnya hapus rekor gunakan fungsi hapus untuk menghapus entri yang sudah tidak relevan antarmuka intuitif ini meningkatkan pengalaman pengguna dengan menyederhanakan tindakan crud rutin langkah 4 – menghubungkan mithril js dengan back4app dengan backend anda siap dan dikelola melalui antarmuka admin, saatnya menghubungkan frontend mithril js anda ke back4app menggunakan panggilan rest api menggunakan panggilan rest api dengan mithril js kami akan mengandalkan panggilan rest api untuk berinteraksi dengan backend back4app anda contoh mengambil dan menampilkan item buat komponen mithril yang mengambil item dari koleksi item // src/components/itemslist js const itemslist = { items \[], loaditems async function() { 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(); itemslist items = data results; } catch (error) { console error('error retrieving items ', error); } }, oninit function() { itemslist loaditems(); }, view function() { return m('div', \[ m('h2', 'items'), m('ul', itemslist items map(item => m('li', { key item objectid }, `${item title} — ${item description}` ) ) ) ]); } }; export default itemslist; komponen ini menggunakan metode siklus hidup mithril oninit untuk memuat data saat komponen diinisialisasi contoh menambahkan item baru anda dapat mengintegrasikan formulir untuk mengirim permintaan post untuk menambahkan item baru // src/components/additem js const additem = { title '', description '', submititem async function() { try { const response = await 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({ title additem title, description additem description }) }); const data = await response json(); console log('item added ', data); // optionally, refresh the list or redirect the user } catch (error) { console error('error adding item ', error); } }, view function() { return m('div', \[ m('h2', 'add item'), m('input\[type=text]', { placeholder 'title', oninput m withattr('value', value => additem title = value), value additem title }), m('input\[type=text]', { placeholder 'description', oninput m withattr('value', value => additem description = value), value additem description }), m('button', { onclick additem submititem }, 'add item') ]); } }; export default additem; anda juga dapat menerapkan operasi pembaruan dan penghapusan dengan menggunakan metode http yang sesuai (put/patch untuk pembaruan dan delete untuk penghapusan) langkah 5 – meningkatkan keamanan backend menerapkan kontrol akses amankan data anda dengan menerapkan daftar kontrol akses (acl) pada setiap objek misalnya, untuk membuat item yang hanya dapat dimodifikasi oleh pemiliknya async function createsecureitem(itemdata, ownerid) { try { const response = await 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({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const data = await response json(); console log('secure item created ', data); } catch (error) { console error('error creating secure item ', error); } } mengatur izin tingkat kelas (clp) di dalam dasbor back4app anda, sesuaikan clp untuk setiap koleksi untuk mendefinisikan kebijakan keamanan default ini memastikan bahwa hanya pengguna yang berwenang yang memiliki akses ke informasi sensitif langkah 6 – pengaturan autentikasi pengguna mengonfigurasi akun pengguna back4app menggunakan kelas pengguna parse untuk mengelola autentikasi dengan mithril js, anda dapat mengelola pendaftaran dan login melalui panggilan rest api di bawah ini adalah contoh untuk pendaftaran pengguna // src/components/auth js const auth = { username '', email '', password '', signup async function() { try { const response = await 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({ username auth username, email auth email, password auth password }) }); const data = await response json(); alert('user registered successfully!'); } catch (error) { alert('registration error ' + error message); } }, view function() { return m('form', { onsubmit function(e) { e preventdefault(); auth signup(); } }, \[ m('input\[type=text]', { placeholder 'username', oninput m withattr('value', value => auth username = value), value auth username }), m('input\[type=email]', { placeholder 'email', oninput m withattr('value', value => auth email = value), value auth email }), m('input\[type=password]', { placeholder 'password', oninput m withattr('value', value => auth password = value), value auth password }), m('button', { type 'submit' }, 'sign up') ]); } }; export default auth; anda dapat mengadopsi metode serupa untuk masuk dan mengelola sesi langkah 7 – men deploy frontend mithril js anda fitur web deployment back4app memungkinkan anda untuk menghosting aplikasi mithril js anda dengan mulus dengan menghubungkan repositori github anda 7 1 membangun versi produksi buka direktori proyek anda di terminal jalankan perintah build npm run build ini akan menghasilkan sebuah build folder yang berisi file statis yang dioptimalkan 7 2 mengorganisir dan mengkomit kode anda repositori anda harus memiliki struktur yang mirip dengan basic crud app mithriljs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── components/ │ │ ├── itemslist js │ │ ├── additem js │ │ └── auth js │ └── app js ├── package json └── readme md contoh src/index js import m from "mithril"; import itemslist from " /components/itemslist"; import additem from " /components/additem"; import auth from " /components/auth"; // define a simple routing system m route(document body, "/", { "/" { view function() { return m("div", \[ m(itemslist), m(additem), m(auth) ]); } } }); mengkomit dan mendorong ke github inisialisasi git (jika belum) git init tambahkan file anda git add komit perubahan git commit m "initial commit of mithril js frontend" buat repositori di github (misalnya, basic crud app mithriljs frontend ) dan dorong kode anda git remote add origin https //github com/your username/basic crud app mithriljs frontend git git push u origin main 7 3 menghubungkan github dengan web deployment masuk ke dasbor back4app anda, navigasikan ke proyek anda ( basic crud app mithriljs ), dan pilih web deployment hubungkan akun github anda mengikuti petunjuk di layar pilih repositori dan cabang anda (misalnya, main ) yang berisi kode sumber mithril js anda 7 4 menyiapkan konfigurasi deployment konfigurasi perintah build tentukan npm run build jika folder build tidak ada direktori output atur ini ke build untuk menunjuk ke aset statis anda variabel lingkungan tambahkan kunci api atau pengaturan yang diperlukan 7 5 dockerizing aplikasi anda (opsional) jika anda lebih suka kontainerisasi, sertakan sebuah dockerfile \# use an official node image for building from node 16 alpine as builder workdir /app copy package json / run npm install copy run npm run build \# serve using nginx from nginx\ stable alpine copy from=builder /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 menerapkan aplikasi anda tekan tombol deploy di bagian penyebaran web back4app anda pantau proses build saat back4app menarik, membangun, dan menerapkan aplikasi anda setelah selesai, anda akan menerima url untuk aplikasi mithril js anda yang aktif 7 7 memverifikasi penyebaran buka url yang diberikan di browser anda konfirmasi bahwa aplikasi anda dimuat, navigasi berfungsi, dan aset disajikan dengan benar gunakan alat pengembang browser untuk pemecahan masalah jika perlu langkah 8 – menyelesaikan dan arah masa depan kerja bagus! anda telah berhasil membangun aplikasi crud dasar dengan mithril js yang terintegrasi dengan back4app anda telah menyiapkan proyek yang disebut basic crud app mithriljs , mendefinisikan skema database anda untuk items dan users, dan mengelola backend anda melalui antarmuka admin selanjutnya, anda menghubungkan frontend mithril js anda menggunakan panggilan rest api dan menerapkan langkah langkah keamanan untuk melindungi data anda apa selanjutnya? tingkatkan frontend tambahkan fitur seperti tampilan detail, kemampuan pencarian, atau pembaruan langsung perluas fungsi backend jelajahi fungsi cloud, integrasi api tambahan, atau izin berbasis peran pelajari lebih lanjut selami lebih dalam ke dokumentasi back4app https //www back4app com/docs dan panduan mithril js untuk peningkatan lanjutan selamat coding dan semoga sukses dengan proyek anda!