How to Develop a CRUD Application with Deno? A Comprehensive Guide

ikhtisar panduan ini menunjukkan cara membuat aplikasi crud (buat, baca, perbarui, hapus) sederhana menggunakan deno kami akan memanfaatkan back4app sebagai platform manajemen backend kami, mengkonfigurasinya untuk beroperasi sebagai solusi database yang andal dan kami akan menggunakan pendekatan api untuk berinteraksi dengan layanan backend kami dalam tutorial ini, anda akan membuat proyek back4app yang disebut basic crud app deno merancang dan mengkonfigurasi skema database anda dengan koleksi dan bidang yang disesuaikan untuk operasi crud menggunakan aplikasi admin back4app untuk mengelola koleksi anda melalui antarmuka yang intuitif, seret dan lepas menghubungkan frontend deno anda dengan back4app menggunakan panggilan rest/graphql mengamankan backend anda dengan langkah langkah kontrol akses yang kuat pada akhir panduan ini, anda akan memiliki aplikasi web siap produksi yang mendukung operasi data penting dan otentikasi pengguna wawasan penting menguasai fungsionalitas crud untuk menangani data dengan efisien belajar bagaimana merancang backend yang dapat diskalakan yang terintegrasi dengan frontend berbasis deno menggunakan aplikasi admin back4app untuk manajemen data yang mulus menemukan strategi penyebaran, termasuk kontainerisasi dengan docker prasyarat sebelum memulai, harap pastikan anda memiliki akun back4app dan proyek yang telah diinisialisasi lihat memulai dengan back4app https //www back4app com/docs/get started/new parse app jika diperlukan pengaturan pengembangan deno pastikan deno terinstal dan diperbarui (versi 1 10+ disarankan) pemahaman tentang javascript/typescript, deno, dan konsep rest api konsultasikan manual deno https //deno land/manual untuk bacaan lebih lanjut langkah 1 – menginisialisasi proyek anda meluncurkan proyek back4app baru masuk ke akun back4app anda klik tombol “aplikasi baru” di dasbor anda beri nama proyek anda basic crud app deno dan ikuti instruksi di layar buat proyek baru setelah proyek dibuat, itu akan terlihat di dasbor anda, meletakkan dasar untuk konfigurasi backend anda langkah 2 – membuat skema database menyusun model data anda untuk aplikasi crud ini, anda akan mendefinisikan beberapa koleksi di bawah ini adalah contoh koleksi dengan bidang yang disarankan untuk memfasilitasi operasi dasar 1\ koleksi item koleksi ini menyimpan rincian untuk setiap item bidang tipe tujuan id objectid kunci utama yang dihasilkan secara otomatis judul string nama item deskripsi string ringkasan singkat tentang item tersebut dibuat pada tanggal stempel waktu untuk saat item ditambahkan diperbarui pada tanggal stempel waktu untuk pembaruan terbaru 2\ koleksi pengguna koleksi ini menyimpan profil pengguna dan data otentikasi bidang tipe tujuan 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 yang di hash dengan aman dibuat pada tanggal stempel waktu pembuatan akun diperbarui pada tanggal timestamp terakhir diperbarui anda dapat membuat koleksi ini secara manual di dasbor back4app dengan membuat kelas baru untuk masing masing dan menambahkan kolom untuk mendefinisikan setiap bidang buat kelas baru anda juga dapat menambahkan bidang dengan memilih jenisnya, menamainya, mengatur default, dan menandainya sebagai wajib buat kolom menggunakan agen ai back4app untuk pembuatan skema agen ai back4app menyederhanakan pembuatan skema dengan memungkinkan anda memasukkan prompt deskriptif, yang kemudian secara otomatis membuat koleksi dan bidang yang diperlukan langkah langkah untuk menggunakan agen ai akses agen ai buka dasbor back4app anda dan temukan opsi agen ai masukkan deskripsi model data anda berikan prompt terperinci yang mencantumkan koleksi dan bidang anda tinjau dan terapkan periksa saran skema yang dihasilkan dan terapkan dalam proyek anda contoh prompt create the following collections in my back4app application 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) pendekatan ini memastikan konsistensi dan efisiensi dalam menyiapkan skema backend anda langkah 3 – mengaktifkan antarmuka admin dan fungsi crud ikhtisar antarmuka admin aplikasi admin back4app menawarkan antarmuka tanpa kode untuk menangani data backend anda desain drag and drop yang intuitif memudahkan pengelolaan operasi crud mengaktifkan aplikasi admin pergi ke menu “more” di dasbor back4app anda pilih “admin app” dan klik pada “enable admin app ” atur kredensial admin anda dengan membuat pengguna admin awal, yang juga mengonfigurasi peran (misalnya, b4aadminuser ) dan koleksi sistem aktifkan aplikasi admin setelah diaktifkan, masuk ke aplikasi admin untuk mengelola koleksi anda dengan mudah dasbor aplikasi admin mengelola operasi crud melalui aplikasi admin di aplikasi admin, anda dapat menambahkan rekaman klik “add record” di koleksi mana pun (misalnya, items) untuk membuat entri baru melihat/mengedit rekaman pilih rekaman untuk memeriksa atau mengubah detail menghapus rekaman hapus entri yang tidak lagi diperlukan alat sederhana ini menyederhanakan proses melakukan operasi data dasar langkah 4 – menghubungkan deno dengan back4app dengan backend anda dikonfigurasi, saatnya untuk menghubungkan frontend deno anda menggunakan rest atau graphql api opsi menggunakan panggilan api rest/graphql kami akan mengandalkan panggilan api untuk berinteraksi dengan back4app contoh mengambil data melalui rest di deno buat modul (misalnya, fetchitems ts ) dengan kode berikut const application id = "your application id"; const rest api key = "your rest api key"; const server url = "https //parseapi back4app com/classes/items"; export async function fetchitems() { try { const response = await fetch(server url, { headers { "x parse application id" application id, "x parse rest api key" rest api key, }, }); const data = await response json(); console log("retrieved items ", data results); } catch (error) { console error("error retrieving items ", error); } } fetchitems(); integrasikan panggilan api tersebut ke dalam aplikasi deno anda sesuai kebutuhan langkah 5 – memperkuat keamanan backend anda mengimplementasikan daftar kontrol akses (acl) lindungi data anda dengan menetapkan acl untuk setiap objek misalnya, untuk memastikan item bersifat pribadi async function createprivateitem(itemdata { title string; description string }, ownertoken string) { const server url = "https //parseapi back4app com/classes/items"; const response = await fetch(server url, { method "post", headers { "content type" "application/json", "x parse application id" "your application id", "x parse rest api key" "your rest api key", "x parse session token" ownertoken, }, body json stringify({ title itemdata title, description itemdata description, acl { " " { read false, write false }, \[ownertoken] { read true, write true } } }), }); const result = await response json(); console log("private item created ", result); } mengonfigurasi izin tingkat kelas (clp) di dalam dasbor back4app, sesuaikan clp untuk setiap koleksi untuk mendefinisikan kebijakan akses default, memastikan bahwa hanya pengguna yang terautentikasi atau berwenang yang dapat mengakses atau memodifikasi data sensitif langkah 6 – mengelola autentikasi pengguna membuat akun pengguna back4app menggunakan kelas pengguna parse untuk autentikasi dalam aplikasi deno anda, kelola pendaftaran dan login pengguna melalui panggilan rest api contoh pendaftaran pengguna di deno async function registeruser(username string, password string, email string) { const server url = "https //parseapi back4app com/users"; try { const response = await fetch(server url, { 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, password, email }) }); const data = await response json(); console log("user registered ", data); } catch (error) { console error("registration error ", error); } } registeruser("newuser", "securepassword", "user\@example com"); pendekatan ini juga dapat diterapkan untuk login dan manajemen sesi langkah 7 – men deploy frontend deno anda dengan web deployment fitur web deployment back4app memungkinkan anda untuk meng host frontend berbasis deno anda dengan men deploy kode langsung dari repositori github 7 1 – membangun versi produksi anda buka direktori proyek anda di terminal jalankan perintah build sebagai contoh, jika menggunakan bundler seperti esbuild deno run allow read allow write build script ts konfirmasi output build pastikan direktori output (misalnya, dist ) berisi file statis yang diperlukan seperti index html , javascript yang dibundel, css, dan gambar 7 2 – mengorganisir dan mengkomit kode anda repositori anda harus mencakup semua file sumber untuk frontend deno anda struktur contoh mungkin seperti ini basic crud app deno/ ├── deps ts ├── controllers/ ├── public/ │ └── index html ├── routes/ ├── src/ │ ├── app ts │ └── fetchitems ts ├── dockerfile ├── build script ts └── readme md file contoh deps ts export { serve } from "https //deno land/std\@0 140 0/http/server ts"; file contoh src/app ts import { serve } from " /deps ts"; import { fetchitems } from " /fetchitems ts"; serve(async (req) => { const { pathname } = new url(req url); if (pathname === "/api/items") { const items = await fetchitems(); return new response(json stringify(items), { headers { "content type" "application/json" }, }); } return new response(await deno readtextfile(" /public/index html"), { headers { "content type" "text/html" }, }); }); mengirim kode anda ke github inisialisasi git git init stage semua file git add commit perubahan anda git commit m "commit awal untuk frontend deno crud" dorong ke github buat repositori (misalnya, basic crud app deno ) dan dorong git remote add origin https //github com/your username/basic crud app deno git git push u origin main 7 3 – menghubungkan github dengan penyebaran web back4app masuk ke back4app dan navigasikan ke proyek anda klik pada fitur penyebaran web hubungkan akun github anda mengikuti petunjuk pilih repositori dan cabang anda (misalnya, main ) yang menyimpan kode deno anda 7 4 – mengonfigurasi pengaturan penyebaran tentukan perintah bangun jika tidak ada folder dist yang sudah dibangun, atur perintah (misalnya, deno run allow read allow write build script ts ) direktori keluaran tentukan folder keluaran, seperti dist variabel lingkungan tambahkan variabel lingkungan yang diperlukan (misalnya, kunci api) 7 5 – menggunakan docker untuk aplikasi deno anda untuk menerapkan dengan docker, sertakan sebuah dockerfile dalam proyek anda \# use the official deno image from denoland/deno\ alpine 1 25 0 \# set the working directory workdir /app \# cache dependencies copy deps ts run deno cache deps ts \# copy the application code copy \# expose port 8000 expose 8000 \# run the application cmd \["run", " allow net", " allow read", "src/app ts"] pilih opsi penerapan docker di back4app jika anda lebih suka kontainerisasi 7 6 – meluncurkan aplikasi anda inisiasi penyebaran klik tombol deploy di dasbor back4app anda pantau proses back4app akan mengambil kode anda, menjalankan langkah langkah build, dan menyebarkan aplikasi anda akses situs anda setelah penyebaran, url akan disediakan di mana aplikasi deno anda dapat diakses 7 7 – mengonfirmasi keberhasilan penyebaran kunjungi url yang disediakan buka url di browser anda uji aplikasi anda pastikan semua rute, aset statis, dan titik akhir api berfungsi dengan benar pecahkan masalah jika ada masalah, konsultasikan log penyebaran dan verifikasi konfigurasi anda langkah 8 – menyelesaikan dan arah masa depan selamat! anda telah berhasil membangun aplikasi crud dasar menggunakan deno dengan back4app sebagai backend anda anda telah menyiapkan proyek basic crud app deno , menyusun database anda, mengelola data melalui admin app, menghubungkan frontend deno anda melalui panggilan api, dan mengamankan data anda dengan acl dan clp peningkatan masa depan perluas frontend tambahkan fitur seperti tampilan rinci, filter pencarian, atau pembaruan waktu nyata logika backend lanjutan integrasikan cloud functions atau integrasi api tambahan perdalam keamanan jelajahi akses berbasis peran dan langkah langkah autentikasi lebih lanjut untuk detail lebih lanjut, periksa dokumentasi back4app https //www back4app com/docs dan jelajahi sumber daya tambahan selamat coding dan nikmati membangun aplikasi crud deno yang dapat diskalakan!