How to Build a Redwood.js Frontend and Connect It to a Backend?

dalam tutorial ini, anda akan membangun aplikasi daftar tugas menggunakan redwood js dan menghubungkannya ke backend yang dikelola di back4app panduan praktis ini membawa anda melalui setiap langkah—dari menyiapkan proyek redwood js anda hingga mengintegrasikan parse untuk komunikasi backend—sehingga anda dapat fokus pada pembuatan antarmuka pengguna yang dinamis dan responsif redwood js dirancang untuk menyederhanakan pengembangan full stack dengan menggabungkan frontend berbasis react modern dengan arsitektur backend yang kuat dalam tutorial ini, anda akan menggunakan back4app untuk mengelola layanan backend anda, memungkinkan anda melakukan operasi crud yang penting tanpa repot mengelola infrastruktur server poin penting pada akhir panduan ini, anda akan dapat menginisialisasi proyek redwood js modern dengan alat standar industri menghubungkan frontend redwood js anda ke backend back4app menggunakan parse javascript sdk menerapkan operasi crud untuk mengelola daftar tugas mengkontainerisasi aplikasi redwood js anda dan menyebarkannya melalui back4app web deployment prasyarat sebelum anda mulai, pastikan anda memiliki hal hal berikut node js dan npm/yarn terinstal di mesin anda verifikasi instalasi dengan node v dan npm v atau yarn v pengetahuan dasar tentang redwood js , termasuk struktur proyek, routing, dan komponen memahami konsep react sangat bermanfaat akun back4app untuk menyiapkan dan mengelola layanan backend anda daftar di back4app https //www back4app com/ jika diperlukan dengan prasyarat ini terpenuhi, anda siap untuk menyiapkan proyek redwood js anda dan menghubungkannya ke backend yang dapat diskalakan pengaturan proyek mulailah dengan membuat aplikasi redwood js baru buka terminal anda dan jalankan perintah berikut, mengganti todo app dengan nama proyek yang anda inginkan yarn create redwood app todo app navigasikan ke direktori proyek anda cd todo app instal semua dependensi yarn install jalankan server pengembangan untuk memverifikasi bahwa proyek anda telah disiapkan dengan benar yarn rw dev kunjungi url yang ditampilkan di terminal anda untuk mengonfirmasi bahwa aplikasi redwood js anda sedang berjalan menyiapkan backend todo di back4app back4app menyediakan backend parse yang dikelola yang menyederhanakan penanganan data untuk aplikasi anda di bagian ini, anda akan membuat model data untuk menyimpan tugas untuk daftar to do anda membuat aplikasi backend anda masuk ke dasbor back4app https //www back4app com/ dan klik "buat aplikasi baru " beri nama aplikasi anda (misalnya, todoredwoodapp ) dan pilih nodejs/parse sebagai jenis backend di bagian "database" > "browser" klik "buat kelas" dan pilih "kustom " nama kelas tugas dan atur izin tingkat kelasnya untuk mengizinkan baca dan tulis publik (sesuaikan pengaturan ini nanti sesuai kebutuhan) tambahkan bidang berikut ke kelas tugas judul (string) – judul tugas deskripsi (string) – detail tentang tugas selesai (boolean) – apakah tugas sudah selesai tanggaljatuhtempo (tanggal) – tenggat waktu untuk tugas klik "simpan" untuk menyelesaikan skema mengintegrasikan back4app dengan redwood js untuk menghubungkan aplikasi redwood js anda ke back4app, instal parse javascript sdk yarn add parse selanjutnya, konfigurasikan parse dengan membuat file baru di web/src direktori namai parseclient js dan tambahkan kode berikut ganti 'your application id' dan 'your javascript key' dengan kredensial anda dari dasbor back4app (di bawah pengaturan aplikasi > keamanan & kunci ) // web/src/parseclient js import parse from 'parse/dist/parse min js' 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 serverurl = parse server url export default parse konfigurasi ini memungkinkan anda untuk memanggil metode parse dari komponen redwood js mana pun membangun frontend dengan redwood js dengan backend anda terhubung, saatnya untuk membangun antarmuka daftar tugas di redwood js, halaman ditempatkan di bawah web/src/pages direktori membuat halaman todo buat folder baru bernama todopage di web/src/pages dan tambahkan file bernama todopage jsx mkdir p web/src/pages/todopage touch web/src/pages/todopage/todopage jsx buka web/src/pages/todopage/todopage jsx dan tambahkan kode berikut // web/src/pages/todopage/todopage jsx import { usestate, useeffect } from 'react' import parse from 'src/parseclient' const todopage = () => { const \[tasks, settasks] = usestate(\[]) const \[title, settitle] = usestate('') const \[description, setdescription] = usestate('') useeffect(() => { fetchtasks() }, \[]) const fetchtasks = async () => { try { const task = parse object extend('task') const query = new parse query(task) const results = await query find() settasks(results map((task) => ({ id task id, task tojson() }))) } catch (error) { console error('error fetching tasks ', error) } } const addtask = async (e) => { e preventdefault() try { const task = parse object extend('task') const task = new task() task set('title', title) task set('description', description) task set('completed', false) await task save() settitle('') setdescription('') fetchtasks() } catch (error) { console error('error adding task ', error) } } const toggletask = async (id, currentstatus) => { try { const task = parse object extend('task') const query = new parse query(task) const task = await query get(id) task set('completed', !currentstatus) await task save() fetchtasks() } catch (error) { console error('error toggling task ', error) } } const deletetask = async (id) => { try { const task = parse object extend('task') const query = new parse query(task) const task = await query get(id) await task destroy() fetchtasks() } catch (error) { console error('error deleting task ', error) } } return ( \<div classname="container"> \<h1>to do list\</h1> \<form onsubmit={addtask} classname="form"> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} 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> \<button onclick={() => toggletask(task id, task completed)}> {task completed ? 'undo' 'complete'} \</button> \<button onclick={() => deletetask(task id)}>delete\</button> \</div> )) )} \</div> \</div> ) } export default todopage mengonfigurasi rute untuk membuat halaman todo anda dapat diakses, buka file routes jsx yang terletak di web/src/routes jsx dan tambahkan rute baru // web/src/routes jsx import todopage from 'src/pages/todopage/todopage' const routes = () => { return ( \<router> \<route path="/" page={todopage} name="todo" /> \<route notfound page={notfoundpage} /> \</router> ); }; export default routes; menambahkan gaya global untuk menambahkan gaya global, tambahkan gaya css di bawah ini ke file css bernama index css di folder web/src / web/src/index 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; } } aplikasi redwood js anda sekarang memiliki antarmuka daftar to do yang fungsional yang berinteraksi dengan backend back4app mengcontainerisasi dan mendeploy aplikasi redwood js anda di back4app penyebaran web back4app menawarkan lingkungan tercontainerisasi yang menyederhanakan penyebaran aplikasi di bagian ini, anda akan mengemas aplikasi redwood js anda ke dalam kontainer docker dan mendeploynya mempersiapkan aplikasi anda untuk produksi pertama, bangun aplikasi redwood js anda untuk produksi yarn rw build web membuat dockerfile untuk mengatur docker untuk proyek redwood js anda, anda perlu menjalankan perintah pengaturan docker di terminal anda yarn rw setup docker perintah pengaturan melakukan beberapa tugas ini membuat empat file dockerfile, dockerignore, docker compose dev yml, dan docker compose prod yml ini menambahkan paket @redwoodjs/api server ke sisi api dan paket @redwoodjs/web server ke sisi web ini memperbarui pengaturan browser open di redwood toml jika pengaturan ini tetap benar, itu akan menyebabkan server pengembangan rusak saat menjalankan docker compose dev yml perintah ini menyediakan dockerfile yang membangun aplikasi redwood js anda dan menyiapkan gambar produksi menggunakan runtime node js minimal anda dapat memulai file kompos dev dengan docker compose f /docker compose dev yml up buka http //localhost 8390 di browser anda untuk memverifikasi bahwa aplikasi redwood js anda berjalan dengan benar mengdeploy melalui back4app web deployment 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 back4app web deployment https //www back4app com/containers dan ikuti langkah langkah berikut klik "buat aplikasi baru" dan masukkan detail proyek anda pilih repositori github dan berikan otorisasi kepada back4app pilih repositori todo redwood pilih dockerfile deployment dan verifikasi pengaturan build klik "deploy" untuk memulai proses deployment setelah deployment, gunakan dashboard back4app untuk memantau log, mengelola build, dan mengatur domain kustom jika perlu pengujian dan debugging aplikasi anda setelah dideploy, pastikan aplikasi anda berfungsi seperti yang diharapkan konektivitas api gunakan alat pengembang browser untuk memverifikasi bahwa permintaan api untuk menambahkan, mengubah, dan menghapus tugas berhasil persistensi data tambahkan tugas melalui ui dan segarkan untuk mengonfirmasi bahwa tugas tetap ada di database back4app operasi crud uji pengubahan dan penghapusan tugas sambil memeriksa adanya kesalahan di konsol atau log api kasus tepi validasi bahwa validasi input mencegah pengiriman kosong praktik terbaik dan tips optimisasi untuk aplikasi yang aman dan efisien, pertimbangkan hal hal berikut optimalkan permintaan api gunakan pemrosesan batch dan ambil hanya bidang yang diperlukan variabel lingkungan amankan kredensial sensitif (id aplikasi dan kunci javascript) menggunakan variabel lingkungan kontrol akses terapkan acl dinamis sehingga hanya pengguna yang berwenang yang dapat memodifikasi data kode cloud alihkan logika kompleks ke kode cloud back4app untuk meningkatkan kinerja dan keamanan kesimpulan anda sekarang telah membangun aplikasi to do list full stack menggunakan redwood js yang terintegrasi dengan backend back4app tutorial ini mencakup segala hal mulai dari inisialisasi proyek dan integrasi backend hingga penyebaran terkontainer saat anda terus mengembangkan, pertimbangkan untuk menambahkan fitur seperti manajemen pengguna yang lebih canggih, pembaruan waktu nyata, dan integrasi pihak ketiga untuk informasi lebih lanjut, jelajahi dokumentasi back4app https //www back4app com/docs dan sumber daya redwood js