How to Build a Basic CRUD App with Marko? A Step-by-Step Guide

ikhtisar panduan ini membawa anda melalui proses pembuatan aplikasi crud (buat, baca, perbarui, hapus) yang lengkap menggunakan marko dan back4app dalam tutorial ini, anda akan menyiapkan proyek—diberi nama basic crud app marko —di back4app, merancang skema basis data yang kuat, dan mengintegrasikan frontend marko anda dengan api back4app tutorial ini juga menjelaskan cara mengamankan backend anda dan menerapkan aplikasi anda untuk penggunaan produksi apa yang akan anda pelajari cara membangun aplikasi crud yang secara efisien mengelola data menggunakan backend yang andal tips untuk merancang skema yang dapat diskalakan dan menghubungkannya ke frontend berbasis marko memanfaatkan antarmuka admin back4app yang ramah pengguna untuk mengelola data dengan mudah strategi penerapan, termasuk kontainerisasi dengan docker, untuk meluncurkan aplikasi web anda prasyarat sebelum memulai, pastikan anda memiliki akun back4app dan proyek baru ikuti instruksi di memulai dengan back4app https //www back4app com/docs/get started/new parse app jika diperlukan lingkungan pengembangan marko yang sudah disiapkan gunakan marko cli atau metode pengaturan pilihan anda pastikan node js (v14 atau lebih baru) terinstal pengetahuan dasar tentang javascript, marko, dan rest api kunjungi dokumentasi marko https //markojs com/docs/ untuk detail lebih lanjut langkah 1 – menyiapkan proyek anda memulai proyek back4app baru masuk ke akun back4app anda pilih “aplikasi baru” di dasbor anda masukkan nama proyek basic crud app marko dan ikuti petunjuk di layar buat proyek baru proyek baru anda sekarang akan muncul di dasbor back4app anda, meletakkan dasar untuk backend anda langkah 2 – membuat skema database anda membangun model data anda untuk aplikasi crud ini, anda akan membuat beberapa koleksi di bawah ini adalah contoh koleksi dengan bidang yang disarankan untuk membantu anda merancang skema database yang praktis 1\ koleksi produk koleksi ini akan menyimpan rincian tentang setiap produk bidang tipe rincian id objectid pengidentifikasi utama yang dihasilkan secara otomatis nama string nama produk rincian string deskripsi singkat tentang produk dibuat pada tanggal stempel waktu menandai pembuatan produk diperbarui pada tanggal stempel waktu pembaruan terakhir 2\ koleksi pengguna koleksi ini menyimpan data pengguna dan otentikasi bidang tipe rincian id objectid pengidentifikasi unik yang dihasilkan secara otomatis nama pengguna string nama unik untuk pengguna email string alamat email yang unik kata sandi string versi hash dari kata sandi pengguna dibuat pada tanggal timestamp pembuatan catatan diperbarui pada tanggal timestamp terakhir diubah anda dapat mendefinisikan koleksi ini secara manual di dasbor back4app dengan membuat kelas baru untuk setiap koleksi dan kemudian menambahkan kolom yang sesuai buat kelas baru anda dapat dengan cepat menambahkan bidang dengan memilih jenis, memberi nama kolom anda, mengatur nilai default, dan menandainya sebagai wajib jika perlu buat kolom memanfaatkan agen ai back4app untuk pembuatan skema agen ai back4app menyederhanakan desain skema dengan menghasilkan definisi koleksi dan bidang berdasarkan permintaan anda fitur ini menghemat waktu dan memastikan konsistensi dalam pengaturan basis data anda cara menggunakan agen ai akses agen ai navigasikan ke dasbor back4app anda dan temukan agen ai di pengaturan proyek anda deskripsikan skema anda berikan permintaan terperinci yang menjelaskan koleksi dan bidang yang anda butuhkan tinjau dan terapkan setelah dihasilkan, tinjau skema yang disarankan dan terapkan perubahan contoh permintaan create the following collections for my back4app project 1\) collection products \ fields \ id objectid (auto generated) \ name string \ details 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 string \ created at date (auto generated) \ updated at date (auto updated) pendekatan ini memperlancar proses pembuatan skema anda langkah 3 – mengaktifkan antarmuka admin & fungsionalitas crud memperkenalkan antarmuka admin aplikasi admin back4app adalah antarmuka tanpa kode yang membuat manajemen data menjadi mudah fitur seret dan lepasnya memungkinkan anda dengan mudah menambahkan, memodifikasi, melihat, atau menghapus catatan mengaktifkan antarmuka admin pergi ke bagian “lainnya” di dasbor back4app anda pilih “aplikasi admin” dan kemudian klik pada “aktifkan aplikasi admin ” atur kredensial admin buat akun admin pertama anda yang juga akan menetapkan peran sistem seperti b4aadminuser aktifkan aplikasi admin setelah diaktifkan, masuk ke aplikasi admin untuk mengelola backend anda dasbor aplikasi admin mengelola operasi crud melalui antarmuka admin di dalam aplikasi admin anda dapat tambahkan entri baru gunakan opsi “tambahkan rekaman” dalam koleksi (misalnya, produk) lihat/ubah rekaman klik pada entri mana pun untuk meninjau atau memperbarui detailnya hapus entri manfaatkan fungsi hapus untuk menghapus rekaman yang sudah tidak relevan antarmuka yang disederhanakan ini meningkatkan pengalaman pengguna dengan menyederhanakan tugas manajemen data langkah 4 – menghubungkan marko dengan back4app sekarang setelah backend anda dikonfigurasi, saatnya untuk mengintegrasikan frontend marko anda dengan back4app menggunakan api opsi a menggunakan api anda akan menggunakan panggilan rest api untuk menjalankan operasi crud di aplikasi marko anda contoh mengambil data melalui rest // in a marko component script file (e g , fetchproducts marko) import { onmount } from 'marko/src/runtime/client'; onmount(async () => { try { const response = await fetch('https //parseapi back4app com/classes/products', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('products ', data results); } catch (error) { console error('failed to fetch products ', error); } }); potongan kode ini menunjukkan cara menarik data produk dari back4app menggunakan panggilan rest api langkah 5 – melindungi backend anda mengonfigurasi kontrol akses tingkatkan keamanan dengan menerapkan daftar kontrol akses (acl) pada catatan anda misalnya, untuk membuat entri produk pribadi async function createsecureproduct(productdata, owner) { const product = { name productdata name, details productdata details }; // setup acl only the owner has read/write privileges product acl = { " " { read false, write false }, \[owner id] { read true, write true } }; try { const response = await fetch('https //parseapi back4app com/classes/products', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify(product) }); const result = await response json(); console log('secure product created ', result); } catch (error) { console error('error creating product ', error); } } mengatur izin default gunakan dasbor back4app untuk mengonfigurasi izin tingkat kelas (clp) untuk setiap koleksi, memastikan bahwa hanya pengguna yang berwenang yang dapat mengakses data sensitif langkah 6 – pengaturan autentikasi pengguna membuat akun pengguna back4app menggunakan kelas pengguna untuk autentikasi dalam aplikasi marko anda, terapkan pendaftaran dan login pengguna seperti ini // in a marko component script (e g , auth marko) import { onmount } from 'marko/src/runtime/client'; async function registeruser(username, email, password) { const userdata = { username, email, password }; try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify(userdata) }); const result = await response json(); console log('user registered ', result); } catch (error) { console error('registration error ', error); } } potongan kode ini menunjukkan alur pendaftaran pengguna yang sederhana menggunakan panggilan rest langkah 7 – menerapkan frontend marko anda fitur penerapan web back4app memungkinkan anda untuk menghosting proyek marko anda langsung dari repositori github 7 1 – membangun versi produksi anda buka direktori proyek anda di terminal jalankan perintah build npm run build ini menghasilkan sebuah build direktori dengan file statis yang dioptimalkan konfirmasi build periksa bahwa build folder mencakup sebuah index html dan semua direktori aset 7 2 – mengorganisir dan mengunggah kode anda repositori anda harus menyimpan seluruh sumber proyek marko anda tata letak direktori yang khas mungkin terlihat seperti basic crud app marko frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── components/ │ │ ├── fetchproducts marko │ │ └── auth marko │ ├── app marko │ └── api js ├── package json └── readme md contoh src/api js // src/api js export const api headers = { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }; export async function fetchproducts() { const response = await fetch('https //parseapi back4app com/classes/products', { headers api headers }); const data = await response json(); return data results; } komitmen ke github inisialisasi git (jika diperlukan) git init stage file anda git add komit perubahan anda git commit m "komit awal untuk frontend marko crud" buat dan dorong ke repositori github anda misalnya, gunakan repositori bernama basic crud app marko frontend 7 3 – menghubungkan github dengan web deployment akses web deployment masuk ke back4app, pergi ke proyek anda (basic crud app marko), dan buka bagian web deployment hubungkan akun github anda ikuti petunjuk untuk menghubungkan akun github anda pilih repositori dan cabang pilih repositori (misalnya, basic crud app marko frontend ) dan cabang (misalnya, main ) untuk dikerahkan 7 4 – mengonfigurasi deployment setel parameter tambahan perintah build jika tidak ada folder build yang sudah dibangun, setel perintah build (misalnya, npm run build ) direktori output tentukan build sebagai folder output variabel lingkungan masukkan variabel yang diperlukan (seperti kunci api) 7 5 – mengcontainerisasi dengan docker jika anda lebih suka docker, sertakan dockerfile dalam repositori proyek anda \# use a node image for building the app from node 16 alpine as build \# set working directory workdir /app \# install dependencies copy package json / run npm install \# copy all files and build the app copy run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] dalam pengaturan penyebaran anda, pilih opsi penyebaran docker 7 6 – menerapkan aplikasi anda tekan tombol deploy back4app akan menarik repositori anda, menjalankan build, dan menerapkan aplikasi anda pantau proses perhatikan log penerapan untuk masalah build atau runtime akses situs anda setelah diterapkan, back4app menyediakan url untuk aplikasi marko yang dihosting 7 7 – mengonfirmasi penerapan anda buka url yang diberikan periksa bahwa aplikasi anda dimuat dengan benar jalankan aplikasi verifikasi bahwa semua halaman dimuat dan fungsi crud beroperasi seperti yang diharapkan perbaiki jika diperlukan gunakan alat pengembang browser dan log back4app untuk mengatasi masalah apa pun langkah 8 – pemikiran akhir dan peningkatan masa depan kerja bagus! anda sekarang telah membangun aplikasi crud yang lengkap dengan marko dan back4app anda telah menyiapkan proyek bernama basic crud app marko , membuat koleksi terperinci untuk produk dan pengguna, mengelola data melalui antarmuka admin yang intuitif, mengintegrasikan frontend marko anda menggunakan rest api, dan mengamankan backend anda dengan kontrol yang kuat langkah selanjutnya tingkatkan ui anda pertimbangkan untuk menambahkan fitur canggih seperti halaman detail produk, fungsionalitas pencarian, dan notifikasi langsung perluas kemampuan backend pertimbangkan untuk mengintegrasikan fungsi tanpa server atau api pihak ketiga untuk fungsionalitas tambahan perdalam pengetahuan anda rujuk ke dokumentasi back4app https //www back4app com/docs dan tutorial tambahan untuk wawasan lebih lanjut tentang pengoptimalan kinerja dan integrasi kustom selamat berkoding dengan marko dan back4app!