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

ikhtisar dalam panduan ini, anda akan belajar mengembangkan aplikasi crud (buat, baca, perbarui, dan hapus) menggunakan meteor kami akan mengintegrasikan aplikasi meteor anda dengan back4app sebagai layanan backend, memastikan bahwa manajemen data anda kuat dan dapat diskalakan sepanjang tutorial, anda akan menyiapkan proyek bernama basic crud app meteor , mendefinisikan skema database anda, dan mengonfigurasi koleksi anda—semua sambil memanfaatkan fitur fitur kuat dari back4app anda juga akan melihat bagaimana menggunakan aplikasi admin back4app untuk manajemen data yang efisien dan bagaimana mengamankan backend anda dengan langkah langkah kontrol akses yang canggih pada akhir, anda akan memiliki aplikasi meteor yang siap produksi yang mendukung operasi crud bersama dengan otentikasi pengguna poin utama kembangkan fungsionalitas crud yang menangani operasi data dengan efisien menggunakan back4app rancang dan terapkan backend yang dapat diskalakan dipasangkan dengan frontend meteor manfaatkan aplikasi admin back4app yang menggunakan drag and drop untuk menyederhanakan operasi data pelajari strategi penyebaran, termasuk kontainerisasi docker, untuk aplikasi meteor anda prasyarat sebelum memulai, pastikan anda memiliki akun back4app dengan proyek baru untuk instruksi pengaturan, lihat memulai dengan back4app https //www back4app com/docs/get started/new parse app lingkungan pengembangan meteor instal meteor dari situs resmi meteor https //www meteor com/install dan pastikan node js (v14 atau lebih baru) tersedia pengetahuan dasar tentang javascript, meteor, dan rest api konsultasikan dokumentasi meteor https //docs meteor com/ untuk wawasan lebih lanjut jika diperlukan langkah 1 – inisialisasi proyek menyiapkan proyek back4app anda masuk ke akun back4app anda klik opsi “aplikasi baru” di dasbor anda masukkan nama proyek basic crud app meteor dan ikuti petunjuk untuk membuat proyek anda buat proyek baru setelah pembuatan, proyek anda akan terdaftar di dasbor back4app anda, meletakkan dasar yang kuat untuk pengaturan backend anda langkah 2 – merancang skema database membuat model data anda untuk aplikasi crud dasar, anda akan memerlukan beberapa koleksi di bawah ini adalah contoh yang merinci koleksi dan bidang yang diperlukan untuk mengelola operasi data secara efektif 1\ koleksi item koleksi ini menyimpan rincian untuk setiap item bidang tipe rincian 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 menandai pembuatan item diperbarui pada tanggal timestamp untuk pembaruan terbaru 2\ koleksi pengguna koleksi ini mengelola informasi pengguna dan detail otentikasi bidang tipe rincian id objectid pengidentifikasi unik yang dihasilkan secara otomatis nama pengguna string pengidentifikasi unik untuk pengguna email string alamat email yang unik hash kata sandi string kata sandi yang di hash dengan aman dibuat pada tanggal stempel waktu pembuatan akun diperbarui pada tanggal stempel waktu pembaruan akun terbaru tambahkan koleksi ini secara manual di dasbor back4app dengan membuat kelas baru untuk masing masing dan mendefinisikan bidang yang sesuai buat kelas baru buat setiap field dengan memilih jenisnya, menentukan nama, menambahkan nilai default jika perlu, dan menunjukkan apakah itu wajib buat kolom memanfaatkan agen ai back4app untuk pembuatan skema agen ai back4app menyederhanakan pembuatan skema langsung dari dasbor anda dengan memberikan prompt deskriptif yang menjelaskan koleksi dan field yang anda inginkan, agen ai dapat secara otomatis membuat skema database anda cara menggunakan agen ai akses agen ai navigasikan ke bagian agen ai di dasbor back4app anda deskripsikan skema anda masukkan prompt rinci yang menentukan koleksi dan field yang anda butuhkan tinjau dan terapkan evaluasi skema yang disarankan dan terapkan perubahan pada proyek anda 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) metode ini memastikan skema anda konsisten dan dioptimalkan untuk kebutuhan aplikasi langkah 3 – mengaktifkan aplikasi admin & melakukan operasi crud ikhtisar antarmuka admin aplikasi admin back4app adalah alat intuitif tanpa kode yang memberdayakan anda untuk mengelola data backend dengan mudah melalui operasi drag and drop ini menyederhanakan pembuatan, pembacaan, pembaruan, dan penghapusan catatan mengaktifkan aplikasi admin pergi ke menu “more” di dasbor back4app anda pilih “admin app” dan klik “enable admin app ” atur kredensial admin buat pengguna admin awal, yang juga mengonfigurasi peran default seperti b4aadminuser bersama dengan koleksi sistem aktifkan aplikasi admin setelah diaktifkan, masuk ke aplikasi admin untuk mulai mengelola data anda dasbor aplikasi admin memanfaatkan aplikasi admin untuk tugas crud di dalam aplikasi admin, anda dapat menambahkan rekaman klik “add record” di koleksi mana pun (seperti items) untuk membuat entri baru melihat/mengubah rekaman pilih sebuah rekaman untuk memeriksa atau mengubah detailnya menghapus rekaman hapus rekaman yang tidak lagi diperlukan antarmuka ini sangat meningkatkan pengalaman pengguna dengan membuat operasi data menjadi sederhana langkah 4 – mengintegrasikan meteor dengan back4app sekarang setelah backend anda dikonfigurasi dan dikelola melalui aplikasi admin, saatnya untuk menghubungkan aplikasi meteor anda ke back4app menggunakan rest api di meteor anda dapat mengintegrasikan dengan back4app dengan melakukan panggilan rest api contoh mengambil data melalui rest berikut adalah contoh potongan kode untuk mengambil item dari back4app dalam metode meteor // /imports/api/items js import { meteor } from 'meteor/meteor'; import { http } from 'meteor/http'; meteor methods({ 'items fetch'() { try { const response = http get('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response data results; } catch (error) { throw new meteor error('fetch failed', 'unable to fetch items '); } } }); integrasikan panggilan rest serupa dalam komponen atau metode meteor anda untuk membuat, memperbarui, dan menghapus catatan langkah 5 – mengamankan backend anda menerapkan daftar kontrol akses (acl) lindungi data anda dengan menetapkan acl ke objek anda misalnya, untuk membuat item yang hanya terlihat oleh pemiliknya async function createsecureitem(itemdata, owneruser) { const itempayload = { title itemdata title, description itemdata description, acl { \[owneruser id] { read true, write true }, ' ' { read false, write false } } }; try { const response = await fetch('https //parseapi back4app com/classes/items', { 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(itempayload) }); const data = await response json(); return data; } catch (error) { console error('error creating secure item ', error); } } mengonfigurasi izin tingkat kelas (clp) di dalam dasbor back4app anda, atur clp untuk setiap koleksi untuk mengontrol aturan akses default langkah ini memastikan bahwa hanya pengguna yang berwenang yang dapat mengakses data sensitif langkah 6 – mengelola autentikasi pengguna menyiapkan akun pengguna meteor back4app memanfaatkan kelas pengguna parse untuk autentikasi, tetapi di meteor anda dapat menangani pendaftaran dan login pengguna menggunakan panggilan rest standar contoh pendaftaran pengguna melalui rest // /imports/api/auth js import { http } from 'meteor/http'; export const signupuser = async (username, password, email) => { try { const response = await http post('https //parseapi back4app com/users', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data { username, password, email } }); return response data; } catch (error) { throw new meteor error('signup failed', error message); } }; terapkan metode serupa untuk login pengguna dan manajemen sesi fitur tambahan seperti verifikasi email dan pengaturan ulang kata sandi dapat dikelola melalui dasbor back4app langkah 7 – menerapkan frontend meteor anda fitur penerapan web back4app memfasilitasi hosting aplikasi meteor anda dengan menghubungkannya ke repositori github ikuti langkah langkah ini untuk menerapkan aplikasi meteor anda 7 1 hasilkan build produksi anda buka terminal di direktori proyek anda bangun aplikasi meteor anda meteor build /output directory perintah ini membuat direktori build yang berisi aset statis yang dioptimalkan konfirmasi build pastikan bahwa output build mencakup sebuah index html dan direktori aset yang diperlukan 7 2 atur dan unggah kode anda repositori github anda harus memiliki kode sumber lengkap dari aplikasi meteor anda struktur yang umum mungkin adalah basic crud app meteor/ ├── meteor/ ├── client/ │ └── main html ├── server/ │ └── main js ├── imports/ │ ├── api/ │ │ ├── items js │ │ └── auth js │ └── startup/ │ └── index js ├── package json └── readme md file contoh /imports/api/items js // /imports/api/items js import { meteor } from 'meteor/meteor'; import { http } from 'meteor/http'; meteor methods({ 'items fetch'() { try { const response = http get('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response data results; } catch (error) { throw new meteor error('fetch failed', 'unable to retrieve items '); } } }); kirim kode anda ke github inisialisasi git di folder proyek anda (jika belum dilakukan) git init tambahkan semua file sumber git add kirim perubahan anda git commit m "kirim awal aplikasi crud meteor" buat repositori github (misalnya, basic crud app meteor ) dorong kode anda git remote add origin https //github com/your username/basic crud app meteor git git push u origin main 7 3 menghubungkan github dengan penyebaran web back4app akses penyebaran web masuk ke back4app, navigasikan ke proyek basic crud app meteor anda, dan klik pada opsi penyebaran web tautkan akun github anda ikuti instruksi di layar untuk mengintegrasikan akun github anda pilih repositori dan cabang pilih repositori anda (misalnya, basic crud app meteor unhandled content type main ) 7 4 konfigurasi penyebaran konfigurasikan pengaturan berikut perintah build jika repositori anda tidak memiliki folder yang sudah dibangun, tentukan perintah build (misalnya, meteor build /output directory ) direktori output tunjukkan direktori (seperti folder output) yang menyimpan aset statis anda variabel lingkungan tambahkan kunci api atau konfigurasi yang diperlukan 7 5 menggunakan docker untuk aplikasi meteor anda (opsional) jika docker adalah preferensi penyebaran anda, sertakan dockerfile seperti di bawah ini \# use the official node image as a base 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 app source code copy \# build the meteor app run meteor build /output directory \# serve with nginx from nginx\ stable alpine copy from=build /app/output/bundle/programs/web browser /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] pilih opsi penyebaran docker di back4app jika anda memilih untuk menggunakan kontainer 7 6 menyelesaikan penyebaran anda terapkan aplikasi klik tombol terapkan setelah semua konfigurasi selesai pantau build back4app akan mengambil kode anda, menjalankan perintah build, dan menerapkan aplikasi anda akses url anda setelah diterapkan, back4app akan menyediakan url di mana aplikasi meteor anda aktif 7 7 memverifikasi penyebaran kunjungi url buka url yang diberikan di browser anda uji fungsionalitas periksa bahwa semua rute, gaya, dan skrip berfungsi dengan benar debug sesuai kebutuhan gunakan alat pengembang browser dan log back4app untuk menyelesaikan masalah langkah 8 – pemikiran akhir dan peningkatan di masa depan selamat! anda telah berhasil membangun aplikasi crud lengkap menggunakan meteor dan mengintegrasikannya dengan back4app anda telah menyiapkan proyek bernama basic crud app meteor , merancang skema basis data yang kuat untuk item dan pengguna, dan mengelola data melalui aplikasi admin selain itu, anda mengintegrasikan frontend meteor anda dengan back4app menggunakan rest api dan menerapkan langkah langkah keamanan untuk perlindungan data langkah selanjutnya perluas frontend anda tambahkan fitur seperti tampilan rinci, fungsi pencarian, dan pembaruan waktu nyata terapkan logika backend lanjutan pertimbangkan untuk menggunakan metode meteor untuk operasi yang lebih kompleks atau mengintegrasikan api pihak ketiga tambahan konsultasikan sumber daya lain jelajahi dokumentasi back4app https //www back4app com/docs dan panduan meteor https //docs meteor com/ untuk wawasan yang lebih dalam tentang kinerja dan kustomisasi selamat coding dan nikmati membangun dengan meteor dan back4app!