Bagaimana Membuat Frontend Remix dan Menghubungkannya ke Backend?

dalam tutorial ini, anda akan membangun aplikasi daftar tugas menggunakan remix dan menghubungkannya ke layanan backend yang dikelola di back4app panduan langkah demi langkah ini dirancang untuk membantu anda menguasai operasi crud yang penting dan merancang antarmuka pengguna yang dinamis menggunakan remix membangun aplikasi full stack melibatkan pengaturan frontend dan backend dengan menggunakan back4app, anda dapat memanfaatkan backend as a service (baas) yang dapat diskalakan, sehingga anda dapat fokus pada menciptakan pengalaman pengguna yang menarik tanpa terjebak dalam konfigurasi server back4app menyediakan database siap pakai, otentikasi, fungsi cloud, dan sdk untuk integrasi yang mulus dengan kemampuan ini, anda dapat dengan cepat membuat prototipe, membangun, dan menerapkan aplikasi remix anda poin penting dengan mengikuti tutorial ini, anda akan menginisialisasi proyek remix modern menggunakan alat standar industri menghubungkan frontend remix anda ke backend back4app menggunakan parse sdk menerapkan operasi crud untuk mengelola daftar tugas mengcontainerisasi aplikasi remix anda dan menerapkannya melalui back4app web deployment prasyarat sebelum anda mulai, pastikan anda memiliki hal hal berikut node js dan npm terinstal di sistem anda verifikasi dengan menjalankan node v dan npm v di terminal anda pengetahuan dasar tentang remix , termasuk routing, loaders, dan actions memahami konsep react sangat membantu karena remix dibangun di atas react akun back4app untuk mengonfigurasi dan mengelola layanan backend anda daftar di back4app https //www back4app com/ jika anda belum melakukannya dengan alat alat ini di tangan, anda siap untuk membuat aplikasi remix anda dan mengintegrasikannya dengan backend yang kuat pengaturan proyek pertama, siapkan lingkungan pengembangan lokal anda dan inisialisasi proyek remix anda ini akan memastikan anda memiliki fondasi yang bersih dan efisien untuk aplikasi anda mulailah dengan menginstal proyek remix menggunakan perintah berikut ganti todo app dengan nama proyek yang anda inginkan npx create remix\@latest todo app navigasikan ke direktori proyek baru anda cd todo app jalankan server pengembangan untuk memverifikasi bahwa semuanya berfungsi npm run dev buka url yang diberikan di terminal anda untuk mengonfirmasi bahwa aplikasi remix anda berjalan dengan sukses mengatur backend todo di back4app back4app menawarkan backend yang kuat dan dikelola yang didukung oleh parse anda akan membuat model data untuk tugas anda, yang akan menjadi tulang punggung untuk aplikasi daftar tugas anda membuat aplikasi backend anda masuk ke dasbor back4app https //www back4app com/ dan klik "buat aplikasi baru " beri nama aplikasi anda (misalnya, todoremixapp ) dan pilih nodejs/parse sebagai jenis backend di bagian "database" > "browser" , klik "buat kelas" dan pilih "kustom " nama kelas task dan atur izin tingkat kelasnya untuk mengizinkan baca dan tulis publik (anda dapat memperbaiki pengaturan ini nanti) tambahkan bidang berikut ke kelas task judul (string) – nama tugas deskripsi (string) – detail tentang tugas selesai (boolean) – menunjukkan apakah tugas telah selesai tanggaljatuhtempo (tanggal) – tenggat waktu untuk tugas klik "simpan" untuk menyelesaikan skema mengintegrasikan back4app dengan remix anda akan menggunakan parse javascript sdk untuk menghubungkan aplikasi remix anda dengan back4app instal sdk dengan menjalankan npm install parse selanjutnya, konfigurasikan parse di dalam aplikasi remix anda buka file app/root tsx dan tambahkan kode inisialisasi berikut di bagian atas ganti 'your application id' dan 'your javascript key' dengan kredensial anda dari dasbor back4app (di bawah app settings > security & keys ) // app/root tsx import parse from "parse"; import react from "react"; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); (parse as any) serverurl = parse server url; untuk memastikan bahwa parse sepenuhnya diinisialisasi saat fungsi loader anda dijalankan, terutama di sisi server tambahkan kode ini ke layout fungsi di root tsx file // app/root tsx export function layout({ children } { children react reactnode }) { react useeffect(() => { if (typeof window !== 'undefined') { parse initialize(parse app id, parse js key); (parse as any) serverurl = "https //parseapi back4app com/"; } }, \[]); // rest of the layout function } pengaturan ini memungkinkan rute dan aksi remix anda untuk berinteraksi dengan backend back4app anda dengan mulus membangun frontend dengan remix dengan backend anda yang sudah dikonfigurasi, anda sekarang akan membangun antarmuka daftar tugas menggunakan remix ini melibatkan pembuatan rute, loader, dan aksi untuk menangani pengambilan data dan mutasi menyusun rute anda dalam remix, setiap rute sesuai dengan sebuah file di bawah app/routes direktori buka app/routes/ index tsx dan tambahkan kode berikut untuk mendefinisikan struktur halaman dan operasi data // app/routes/ index tsx import { json, redirect } from "@remix run/node"; import { useloaderdata, form } from "@remix run/react"; import as parse from "parse"; export const loader = async () => { if (typeof window === "undefined") { try { const response = await fetch( "https //parseapi back4app com/classes/task", { headers { "x parse application id" "your application id", "x parse javascript key" "your javascript key", }, } ); const data = await response json(); return json({ tasks data results map((task) => ({ id task objectid, task })), }); } catch (error) { console error("error fetching tasks ", error); return json({ tasks \[] }); } } else { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); const tasks = results map((task) => ({ id task id, task tojson() })); return json({ tasks }); } catch (error) { console error("error fetching tasks ", error); return json({ tasks \[] }); } } }; export const action = async ({ request }) => { const formdata = await request formdata(); const actiontype = formdata get("actiontype"); // parse server details const parseserverurl = "https //parseapi back4app com"; const headers = { "x parse application id" "your application id", "x parse javascript key" "your javascript key", "content type" "application/json", }; try { if (actiontype === "add") { const title = formdata get("title"); const description = formdata get("description"); // create task using rest api const response = await fetch(`${parseserverurl}/classes/task`, { method "post", headers, body json stringify({ title, description, completed false, }), }); if (!response ok) { throw new error(`failed to add task ${response status}`); } } else if (actiontype === "toggle") { const id = formdata get("id"); // first get the current task to check its completed status const getresponse = await fetch(`${parseserverurl}/classes/task/${id}`, { headers, }); if (!getresponse ok) { throw new error(`failed to get task ${getresponse status}`); } const task = await getresponse json(); const updateresponse = await fetch( `${parseserverurl}/classes/task/${id}`, { method "put", headers, body json stringify({ completed !task completed, }), } ); if (!updateresponse ok) { throw new error(`failed to update task ${updateresponse status}`); } } else if (actiontype === "delete") { const id = formdata get("id"); const deleteresponse = await fetch( `${parseserverurl}/classes/task/${id}`, { method "delete", headers, } ); if (!deleteresponse ok) { throw new error(`failed to delete task ${deleteresponse status}`); } } return redirect("/"); } catch (error) { console error("error processing action ", error); return json({ error error message }, { status 400 }); } }; export default function todoroute() { const { tasks } = useloaderdata(); return ( \<div classname="container"> \<h1>to do list\</h1> \<form method="post" classname="form"> \<input type="hidden" name="actiontype" value="add" /> \<input type="text" name="title" placeholder="task title" required /> \<input type="text" name="description" placeholder="description" required /> \<button type="submit">add task\</button> \</form> \<div classname="tasks"> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map(task => ( \<div key={task id} classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<form method="post"> \<input type="hidden" name="actiontype" value="toggle" /> \<input type="hidden" name="id" value={task id} /> \<button type="submit">{task completed ? "undo" "complete"}\</button> \</form> \<form method="post"> \<input type="hidden" name="actiontype" value="delete" /> \<input type="hidden" name="id" value={task id} /> \<button type="submit">delete\</button> \</form> \</div> )) )} \</div> \</div> ); } rute ini menggunakan loader dan aksi remix untuk mengambil tugas dari back4app dan menangani interaksi pengguna seperti menambahkan, mengubah, dan menghapus tugas menata aplikasi remix anda buat file css di app/global css untuk mendefinisikan tampilan dan nuansa dasar aplikasi anda / app/global css / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } tasks p { font size 1rem; } task item { display flex; flex direction column; align items center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } impor file css di app/root tsx dengan menambahkan // app/root tsx import " /global css"; aplikasi remix anda sekarang memiliki antarmuka daftar tugas yang fungsional yang berinteraksi dengan backend back4app mengemas dan menerapkan aplikasi remix anda di back4app penerapan web back4app menawarkan lingkungan terkontainer untuk aplikasi anda anda akan mengemas aplikasi remix anda ke dalam kontainer docker dan menerapkannya mengonfigurasi remix untuk produksi sebelum mengemas, bangun aplikasi remix anda menjadi paket yang siap produksi npm run build membuat dockerfile buat sebuah dockerfile di root proyek anda dengan konten berikut \# stage 1 build the remix app from node 18 alpine as builder workdir /app copy package json package lock json / run npm install copy run npm run build \# stage 2 serve the app using a lightweight node server from node 18 alpine workdir /app copy from=builder /app/build /build copy from=builder /app/package json / run npm install production expose 3000 cmd \["npm", "run", "start"] dockerfile ini membangun proyek remix anda dan mempersiapkannya untuk produksi menggunakan runtime node js yang minimal membangun dan menguji kontainer docker anda bangun gambar docker anda secara lokal docker build t todo remix frontend jalankan kontainer untuk menguji penyebaran docker run p 8080 3000 todo remix frontend kunjungi http //localhost 8080 di browser anda untuk memverifikasi bahwa aplikasi remix anda berjalan dengan benar penerapan melalui penerapan web back4app dorong proyek anda ke github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main kemudian, masuk ke penerapan web back4app https //www back4app com/containers dan ikuti langkah langkah ini klik "buat aplikasi baru" dan beri nama proyek anda pilih repositori github dan otorisasi back4app pilih repositori todo remix anda pilih penerapan dockerfile dan konfirmasi pengaturan build klik "terapkan" untuk memulai build anda setelah penerapan, pantau kontainer anda melalui dasbor back4app anda dapat melihat log, mengelola build, dan mengonfigurasi domain kustom pengujian dan debugging aplikasi anda setelah diterapkan, pastikan aplikasi anda berfungsi seperti yang diharapkan berikut cara memverifikasi integrasi frontend backend konektivitas api buka konsol pengembang browser anda (f12) dan periksa permintaan jaringan saat menambahkan, mengubah, atau menghapus tugas persistensi data tambahkan tugas melalui ui dan segarkan halaman untuk memastikan mereka tersimpan verifikasi perubahan di browser database back4app di bawah kelas tugas operasi crud uji mengubah status penyelesaian dan menghapus tugas jika ada masalah, periksa konsol dan log api penanganan kasus tepi cobalah mengirimkan input kosong untuk memastikan validasi anda efektif praktik terbaik dan tips optimisasi ikuti rekomendasi ini untuk meningkatkan keamanan, kinerja, dan skalabilitas optimalkan panggilan api gunakan permintaan batch dan pilih hanya bidang yang diperlukan dalam kueri variabel lingkungan simpan kunci sensitif (id aplikasi dan kunci javascript) dalam file env dan rujuk mereka dengan aman kontrol akses terapkan acl dinamis untuk membatasi modifikasi data hanya untuk pengguna yang terautentikasi kode cloud alihkan logika kompleks ke kode cloud back4app untuk meningkatkan kinerja dan keamanan kesimpulan anda telah berhasil membangun aplikasi daftar tugas full stack dengan remix dan menghubungkannya ke backend back4app tutorial ini membimbing anda melalui inisialisasi proyek remix, mengintegrasikan layanan manajemen untuk interaksi backend, dan mengcontainerisasi aplikasi anda untuk penyebaran sekarang aplikasi anda sudah aktif, pertimbangkan untuk memperluas fiturnya dengan manajemen pengguna yang lebih canggih, pembaruan waktu nyata, atau integrasi pihak ketiga untuk panduan lebih lanjut, jelajahi dokumentasi back4app https //www back4app com/docs dan sumber daya remix