How to Create a CRUD Application with Remix?

ikhtisar dalam panduan ini, anda akan belajar bagaimana membangun aplikasi crud (buat, baca, perbarui, hapus) menggunakan remix js kami akan menggunakan back4app sebagai layanan backend kami untuk menangani penyimpanan data dengan mulus panduan ini mencakup pengaturan proyek back4app, merancang skema data dinamis, dan menghubungkan operasi crud dalam aplikasi remix js anda pertama, anda akan mengatur proyek back4app, yang akan kami sebut basic crud app remix , menyediakan penyimpanan data non relasional yang dapat diskalakan anda kemudian akan membuat model data dengan secara manual menetapkan koleksi dan bidang melalui dasbor back4app, atau bahkan menggunakan ai agent terintegrasi untuk pengaturan otomatis selanjutnya, anda akan menjelajahi aplikasi admin back4app—antarmuka yang ramah pengguna yang memungkinkan anda dengan mudah mengelola data anda menggunakan operasi seret dan lepas akhirnya, anda akan menghubungkan aplikasi remix js anda ke back4app melalui panggilan rest api, memastikan bahwa fungsionalitas crud anda, bersama dengan otentikasi pengguna, kuat dan aman pada akhir tutorial ini, anda akan memiliki aplikasi remix js yang siap produksi yang mampu melakukan operasi crud dasar bersama dengan manajemen pengguna yang aman apa yang akan anda pelajari cara membangun aplikasi crud dengan remix js dan backend yang andal praktik terbaik untuk menyusun backend anda dan mengintegrasikannya dengan frontend remix js cara menggunakan aplikasi admin back4app untuk menyederhanakan tugas manajemen data teknik untuk menerapkan aplikasi remix js anda, termasuk kontainerisasi dengan docker prasyarat sebelum anda mulai, pastikan anda memiliki akun back4app dengan proyek baru yang siap butuh bantuan? kunjungi memulai dengan back4app https //www back4app com/docs/get started/new parse app lingkungan pengembangan remix js yang berfungsi anda dapat menggunakan editor kode modern seperti vs code node js (versi 14 atau lebih baru) harus diinstal pengetahuan dasar tentang javascript, react, dan restful api untuk penyegaran, lihat dokumentasi remix https //remix run/docs langkah 1 – menyiapkan proyek anda meluncurkan proyek back4app baru masuk ke akun back4app anda tekan tombol “aplikasi baru” dari dasbor anda beri nama proyek anda basic crud app remix dan ikuti langkah langkah untuk menyelesaikan proses pembuatan buat proyek baru setelah proyek anda siap, itu akan muncul di dasbor anda, memberikan fondasi untuk backend anda langkah 2 – membuat model data anda membangun struktur data untuk aplikasi crud ini, anda akan mendefinisikan beberapa koleksi di back4app di bawah ini adalah contoh koleksi utama dan bidang yang akan mendukung fungsionalitas crud anda 1\ koleksi item koleksi ini akan menyimpan rincian tentang setiap item bidang tipe data deskripsi id objectid pengidentifikasi unik yang dihasilkan secara otomatis judul string nama atau judul item tersebut deskripsi string ringkasan singkat yang menggambarkan item tersebut dibuatpada tanggal stempel waktu untuk saat item ditambahkan diperbaruipada tanggal stempel waktu untuk modifikasi terakhir 2\ koleksi pengguna koleksi ini mengelola kredensial pengguna dan informasi otentikasi bidang tipe data deskripsi id objectid pengidentifikasi unik yang dihasilkan secara otomatis nama pengguna string nama pengguna yang unik untuk pengguna email string alamat email unik pengguna hashkatasandi string kata sandi yang di hash untuk otentikasi yang aman dibuatpada tanggal stempel waktu untuk saat akun dibuat diperbaruipada tanggal stempel waktu untuk saat akun diperbarui anda dapat membuat koleksi ini dan menambahkan bidang langsung dari dasbor back4app buat kelas baru untuk menambahkan field baru, cukup pilih tipe data, masukkan nama field, dan atur nilai default atau opsi wajib sesuai kebutuhan buat kolom menggunakan agen ai back4app untuk generasi skema agen ai yang terintegrasi ke dalam back4app dapat secara otomatis menghasilkan skema anda berdasarkan deskripsi anda, menyederhanakan pengaturan awal cara menggunakan agen ai akses agen ai masuk ke dasbor back4app anda dan temukan agen ai di pengaturan proyek anda deskripsikan model data anda berikan penjelasan rinci tentang koleksi dan bidang yang anda butuhkan tinjau dan konfirmasi agen ai akan menyajikan skema yang diusulkan verifikasi detailnya dan konfirmasikan pengaturannya contoh prompt create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) metode yang dibantu ai ini mempercepat proses dan memastikan skema anda disesuaikan dengan kebutuhan aplikasi anda langkah 3 – mengaktifkan aplikasi admin & menangani operasi crud ikhtisar aplikasi admin aplikasi admin back4app menyediakan antarmuka tanpa kode yang menyederhanakan manajemen data backend fitur seret dan lepasnya membuat operasi crud—seperti menambah, mengedit, dan menghapus catatan—lebih intuitif mengaktifkan aplikasi admin buka menu “lainnya” di dasbor back4app anda pilih “aplikasi admin” dan klik pada “aktifkan aplikasi admin ” siapkan akun admin anda dengan memasukkan kredensial anda ini juga akan mengonfigurasi peran (misalnya, b4aadminuser ) dan kelas sistem aktifkan aplikasi admin setelah diaktifkan, masuk ke aplikasi admin untuk mengelola data anda dengan mudah dasbor aplikasi admin melakukan tugas crud melalui aplikasi admin di dalam aplikasi admin, anda dapat menyisipkan catatan baru gunakan tombol “tambah catatan” dalam koleksi (seperti item) untuk membuat entri baru memeriksa dan mengubah catatan klik pada catatan mana pun untuk melihat detailnya dan melakukan pengeditan menghapus catatan hapus catatan yang tidak lagi diperlukan antarmuka intuitif ini sangat meningkatkan pengalaman manajemen data anda langkah 4 – menghubungkan aplikasi remix js anda dengan back4app sekarang setelah backend anda disiapkan, saatnya untuk mengintegrasikan aplikasi remix js anda dengan back4app menggunakan panggilan rest api di remix js karena parse sdk biasanya tidak digunakan dengan remix js, anda akan melakukan operasi crud melalui permintaan rest api 1\ menyiapkan proyek remix js anda jika anda belum melakukannya, buat proyek remix baru npx create remix\@latest ikuti petunjuk untuk memilih target penyebaran anda 2\ membuat permintaan api dari remix buat file rute api di bawah app/routes direktori untuk menangani operasi crud misalnya, anda mungkin memiliki file bernama items server js yang mencakup fungsi untuk mengambil, membuat, memperbarui, dan menghapus item contoh mengambil item // app/routes/items server js import { json } from "@remix run/node"; export async function loader() { const response = await fetch("https //parseapi back4app com/classes/items", { method "get", headers { "x parse application id" "your application id", "x parse rest api key" "your rest api key", }, }); const data = await response json(); return json(data); } demikian pula, anda dapat membuat rute post, put, dan delete untuk menangani pembuatan, pembaruan, dan penghapusan item 3\ menghubungkan komponen ui dalam komponen remix anda, anda dapat menggunakan hook seperti useloaderdata untuk mengambil data dan fetch api atau fungsi aksi untuk mengirim data kembali ke back4app sebagai contoh, dalam komponen react anda // app/routes/items jsx import { useloaderdata, form } from "@remix run/react"; export default function items() { const data = useloaderdata(); return ( \<div> \<h1>items list\</h1> {data results map((item) => ( \<div key={item objectid}> \<h2>{item title}\</h2> \<p>{item description}\</p> \</div> ))} \<form method="post"> \<input type="text" name="title" placeholder="item title" required /> \<textarea name="description" placeholder="item description" required /> \<button type="submit">add item\</button> \</form> \</div> ); } integrasikan panggilan api serupa untuk operasi pembaruan dan penghapusan dalam aksi remix anda langkah 5 – mengamankan backend anda mengimplementasikan daftar kontrol akses (acl) perkuat keamanan data dengan menetapkan acl untuk objek anda misalnya, untuk membuat item yang hanya dapat diakses oleh penciptanya // example api call to create a private item using acls async function createprivateitem(title, description, usersessiontoken) { 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", "x parse session token" usersessiontoken, }, body json stringify({ title, description, acl { " " { "read" false, "write" false }, "user object id" { "read" true, "write" true } }, }), }); return response json(); } izin tingkat kelas (clp) sesuaikan clp di dasbor back4app anda untuk menerapkan kebijakan keamanan default, memastikan bahwa hanya pengguna yang terautentikasi yang dapat mengakses koleksi tertentu langkah 6 – menambahkan autentikasi pengguna mengonfigurasi manajemen pengguna back4app memanfaatkan kelas pengguna bawaan parse untuk mengelola otentikasi dalam aplikasi remix anda, tangani pendaftaran dan login pengguna menggunakan panggilan api contoh endpoint pendaftaran pengguna // app/routes/signup server js import { json, redirect } from "@remix run/node"; export async function action({ request }) { const formdata = await request formdata(); const username = formdata get("username"); const password = formdata get("password"); const email = formdata get("email"); 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({ username, password, email }), }); if (!response ok) { throw new error("signup failed"); } return redirect("/login"); } terapkan endpoint serupa untuk login, manajemen sesi, dan pengaturan ulang kata sandi langkah 7 – menerapkan aplikasi remix js anda back4app mendukung penerapan yang mulus anda dapat menerapkan aplikasi remix js anda menggunakan berbagai strategi, termasuk docker 7 1 membangun aplikasi remix js anda kompilasi dan bundel gunakan manajer paket dan skrip build anda (misalnya, melalui npm run build ) untuk mengompilasi aplikasi anda verifikasi output pastikan output build anda berisi semua file yang diperlukan 7 2 contoh struktur proyek proyek remix js yang khas mungkin terlihat seperti basic crud app remix/ \| app/ \| | routes/ \| | | items jsx \| | | items server js \| | | signup server js \| | components/ \| | itemform jsx \| public/ \| package json \| remix config js \| readme md 7 1 membangun aplikasi remix js anda 7 3 menggunakan docker untuk aplikasi anda jika anda memilih kontainerisasi, tambahkan sebuah dockerfile di root proyek anda \# use an official node js runtime as a base from node 16 alpine \# set the working directory in the container workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the application code copy \# build the remix app run npm run build \# expose the port the app runs on expose 3000 \# start the application cmd \["npm", "start"] 7 4 mengdeploy melalui back4app web deployment hubungkan repositori anda host kode sumber remix js anda di github konfigurasi deployment di dasbor back4app anda, pilih fitur web deployment , tautkan repositori anda (misalnya, basic crud app remix ), dan pilih cabang yang benar atur perintah build dan output tentukan perintah build anda (seperti npm run build ) dan direktori output deploy aplikasi anda klik deploy dan pantau log hingga aplikasi anda aktif langkah 8 – menyelesaikan dan arah masa depan kerja bagus! anda sekarang telah membangun aplikasi crud menggunakan remix js yang terintegrasi dengan back4app dalam panduan ini, anda mengatur proyek yang disebut basic crud app remix , mendefinisikan koleksi untuk item dan pengguna, dan mengelola data melalui aplikasi admin back4app anda kemudian menghubungkan aplikasi remix js anda ke back4app melalui panggilan rest api, dan menerapkan autentikasi pengguna yang aman serta langkah langkah perlindungan data langkah selanjutnya tingkatkan aplikasi anda pertimbangkan untuk menambahkan lebih banyak fitur seperti fungsionalitas pencarian, tampilan item yang lebih detail, atau pembaruan waktu nyata perluas kemampuan backend lihat fungsi cloud, integrasi api eksternal, atau kontrol akses yang lebih canggih terus belajar kunjungi dokumentasi back4app https //www back4app com/docs dan jelajahi tutorial remix js tambahan untuk lebih mengoptimalkan aplikasi anda selamat coding dan semoga sukses dalam perjalanan remix js anda!