Cara Membangun Aplikasi CRUD dengan ReactJS?

pendahuluan dalam tutorial ini, anda akan membangun aplikasi crud (buat, baca, perbarui, dan hapus) yang komprehensif menggunakan reactjs panduan ini dirancang untuk melakukan operasi dasar dari sebuah aplikasi perangkat lunak dengan menunjukkan cara membangun aplikasi crud yang secara efektif mengelola dan memperbarui data anda akan mulai dengan membuat dan mengonfigurasi proyek back4app bernama basic crud app reactjs , yang berfungsi sebagai sistem backend yang kuat untuk aplikasi web anda selanjutnya, anda akan merancang skema basis data yang dapat diskalakan dengan mendefinisikan koleksi dan bidang yang terperinci—baik secara manual atau dengan bantuan agen ai back4app kemudian, anda akan memanfaatkan aplikasi admin back4app—alat manajemen yang ramah pengguna dengan antarmuka seret dan lepas—untuk dengan mudah mengelola data koleksi anda antarmuka admin ini meningkatkan pengalaman pengguna dan menyederhanakan antarmuka pengguna, memungkinkan pengguna untuk dengan cepat melakukan operasi crud akhirnya, anda akan menerapkan frontend reactjs anda dan mengintegrasikannya dengan back4app menggunakan rest/graphql (atau sdk parse, jika tersedia), sambil mengamankan backend anda dengan kontrol akses yang canggih pada akhir panduan ini, anda akan membangun aplikasi web yang siap produksi yang tidak hanya mendukung operasi crud dasar tetapi juga mencakup otentikasi pengguna dan kemampuan pembaruan data yang kuat poin penting pelajari cara membangun aplikasi crud yang secara efisien mengelola data menggunakan sistem manajemen basis data yang andal dapatkan wawasan praktis tentang merancang backend yang dapat diskalakan dan mengintegrasikannya dengan frontend reactjs untuk meningkatkan pengalaman pengguna temukan cara menggunakan alat manajemen drag and drop (aplikasi admin back4app) untuk menyederhanakan operasi buat, baca, perbarui, dan hapus pahami teknik penyebaran, termasuk kontainerisasi docker, untuk meluncurkan aplikasi web anda dengan cepat prasyarat sebelum anda mulai, pastikan anda memiliki hal hal berikut akun back4app dan proyek baru yang sudah disiapkan jika anda memerlukan bantuan, lihat memulai dengan back4app https //www back4app com/docs/get started/new parse app lingkungan pengembangan reactjs gunakan create react app https //create react app dev/docs/getting started/ atau alat serupa pastikan node js (versi 14 atau lebih) terinstal pemahaman dasar tentang javascript, reactjs, dan rest api tinjau dokumentasi reactjs https //reactjs org/docs/getting started html jika perlu langkah 1 – pengaturan proyek membuat proyek back4app baru masuk ke akun back4app anda klik tombol “aplikasi baru” di dasbor anda masukkan nama proyek basic crud app reactjs dan ikuti petunjuk untuk membuat proyek anda buat proyek baru setelah dibuat, proyek baru anda akan muncul di dasbor back4app anda, memberikan dasar yang kuat untuk konfigurasi backend dan manajemen proyek anda langkah 2 – desain skema database merancang model data anda untuk aplikasi crud dasar, anda akan membuat beberapa koleksi di bawah ini adalah beberapa contoh koleksi yang anda perlukan, yang menguraikan bidang dan tipe data yang diperlukan untuk membantu anda mengatur skema basis data anda dengan efektif koleksi ini dirancang untuk melakukan operasi crud dasar yang memungkinkan pengguna untuk membuat, membaca, memperbarui, dan menghapus data 1\ koleksi item koleksi ini menyimpan informasi tentang setiap item bidang tipe data deskripsi id objectid kunci utama yang dihasilkan secara otomatis judul string judul item tersebut deskripsi string deskripsi singkat tentang item tersebut dibuat pada tanggal timestamp ketika item dibuat diperbarui pada tanggal timestamp ketika item terakhir diperbarui 2\ koleksi pengguna koleksi ini menyimpan informasi pengguna dan detail otentikasi bidang tipe data deskripsi id objectid kunci utama yang dihasilkan secara otomatis nama pengguna string nama pengguna yang unik untuk pengguna email string alamat email yang unik hash kata sandi string kata sandi yang di hash untuk otentikasi dibuat pada tanggal stempel waktu ketika akun pengguna dibuat diperbarui pada tanggal timestamp ketika akun pengguna diperbarui anda dapat mengatur koleksi ini secara manual di dasbor back4app dengan membuat kelas baru untuk setiap koleksi dan menambahkan kolom untuk mendefinisikan bidang buat kelas baru anda dapat dengan mudah membuat kolom untuk basis data anda dengan memilih jenis data, memberi nama kolom, menetapkan nilai default, dan menentukan apakah itu diperlukan buat kolom menggunakan agen ai back4app untuk generasi skema agen ai back4app adalah alat yang kuat yang tersedia langsung dari dasbor back4app anda ini memungkinkan anda untuk secara otomatis menghasilkan skema basis data anda berdasarkan prompt yang menggambarkan koleksi dan bidang yang anda inginkan fungsi ini merupakan penghemat waktu yang signifikan untuk manajemen proyek dan membantu memastikan bahwa sistem manajemen basis data anda diatur untuk melakukan operasi dasar yang diperlukan oleh aplikasi web anda cara menggunakan ai agent buka ai agent masuk ke dasbor back4app anda dan temukan ai agent di menu atau dalam pengaturan proyek anda deskripsikan model data anda di antarmuka ai agent, tempelkan prompt rinci yang menjelaskan koleksi dan bidang yang anda butuhkan tinjau dan terapkan setelah dikirim, ai agent akan menghasilkan koleksi dan definisi bidang tinjau saran ini dan terapkan pada proyek anda contoh prompt create the following collections in my back4app application 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) menggunakan ai agent dengan cara ini menghemat waktu dan memastikan bahwa skema anda konsisten dan dioptimalkan untuk kebutuhan aplikasi anda langkah 3 – mengaktifkan aplikasi admin & operasi crud ikhtisar aplikasi admin aplikasi admin back4app adalah antarmuka tanpa kode yang kuat yang memungkinkan anda mengelola data backend anda alat manajemen ini menyediakan antarmuka pengguna seret dan lepas yang memungkinkan pengguna untuk dengan mudah melakukan operasi crud seperti membuat, membaca, memperbarui, dan menghapus catatan mengaktifkan aplikasi admin navigasikan ke menu “lainnya” di dasbor back4app anda klik pada “aplikasi admin” dan kemudian pada “aktifkan aplikasi admin ” konfigurasikan kredensial admin anda dengan membuat pengguna admin pertama anda proses ini juga mengatur peran (misalnya, b4aadminuser ) dan koleksi sistem aktifkan aplikasi admin setelah mengaktifkan, masuk ke aplikasi admin untuk mengelola data anda dasbor aplikasi admin menggunakan aplikasi admin untuk operasi crud di dalam aplikasi admin anda dapat membuat rekaman klik tombol “tambah rekaman” di dalam koleksi (misalnya, item) untuk membuat entri baru membaca/memperbarui rekaman pilih rekaman mana pun untuk melihat detailnya atau mengedit bidang, memastikan pembaruan data yang lancar menghapus rekaman gunakan opsi hapus untuk menghapus rekaman yang tidak lagi diperlukan alat manajemen yang mudah digunakan ini meningkatkan pengalaman pengguna secara keseluruhan dengan menyediakan antarmuka seret dan lepas yang sederhana untuk fungsi crud langkah 4 – mengintegrasikan reactjs dengan back4app sekarang setelah backend anda disiapkan dan dikelola melalui aplikasi admin, saatnya untuk menghubungkan frontend reactjs anda ke back4app opsi a menggunakan parse sdk instal parse sdk npm install parse inisialisasi parse di aplikasi react anda buat file (misalnya, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // ganti dengan kredensial back4app anda yang sebenarnya parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; gunakan parse dalam komponen react sebagai contoh, buat komponen untuk mengambil dan menampilkan item // src/components/itemslist js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; const itemslist = () => { const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>item\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; opsi b menggunakan rest atau graphql jika lingkungan anda tidak mendukung parse sdk, anda dapat melakukan operasi crud menggunakan rest atau graphql sebagai contoh, untuk mengambil item menggunakan rest // example rest call to fetch items const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); integrasikan panggilan api ini ke dalam komponen react anda sesuai kebutuhan langkah 5 – mengamankan backend anda daftar kontrol akses (acl) amankan data anda dengan menetapkan acl ke objek misalnya, untuk membuat item pribadi async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl only the owner can read and write const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } izin tingkat kelas (clp) di dasbor back4app, konfigurasikan clp untuk setiap koleksi untuk menetapkan aturan akses default ini memastikan bahwa hanya pengguna yang terautentikasi atau berwenang yang dapat mengakses data sensitif langkah 6 – autentikasi pengguna menyiapkan akun pengguna back4app memanfaatkan kelas pengguna parse untuk otentikasi dalam aplikasi react anda, tangani pendaftaran dan login pengguna sebagai berikut // src/components/auth js import react, { usestate } from 'react'; import parse from ' /parseconfig'; export const signup = () => { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('user signed up successfully!'); } catch (error) { alert('error signing up ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={e => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={e => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={e => setemail(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; pendekatan serupa dapat digunakan untuk login dan manajemen sesi fitur tambahan seperti login sosial, verifikasi email, dan pengaturan ulang kata sandi dapat dikonfigurasi di dasbor back4app langkah 7 – menerapkan frontend reactjs anda dengan penerapan web fitur penerapan web back4app memungkinkan anda untuk menghosting frontend reactjs anda dengan mulus dengan menerapkan kode anda dari repositori github dalam bagian ini, anda akan belajar bagaimana menyiapkan build produksi anda, mengkomit kode sumber anda ke github, mengintegrasikan repositori anda dengan penerapan web, dan menerapkan situs anda 7 1 siapkan build produksi anda buka folder proyek anda di terminal jalankan perintah build npm run build perintah ini membuat folder build yang berisi semua file statis yang dioptimalkan (termasuk index html , javascript, css, dan gambar) verifikasi build pastikan bahwa folder build berisi file index html bersama dengan subdirektori aset yang diperlukan 7 2 atur dan unggah kode sumber anda repository anda harus mencakup seluruh kode sumber untuk frontend reactjs anda struktur file yang khas mungkin terlihat seperti ini basic crud app reactjs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md contoh file kode sumber src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; function app() { const \[items, setitems] = usestate(\[]); const \[newitemtitle, setnewitemtitle] = usestate(""); const \[newitemdescription, setnewitemdescription] = usestate(""); const \[editingitemid, seteditingitemid] = usestate(null); const \[editingtitle, seteditingtitle] = usestate(""); const \[editingdescription, seteditingdescription] = usestate(""); const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; useeffect(() => { fetchitems(); }, \[]); const handleadditem = async () => { const items = parse object extend("items"); const item = new items(); item set("title", newitemtitle); item set("description", newitemdescription); try { await item save(); setnewitemtitle(""); setnewitemdescription(""); fetchitems(); } catch (error) { console error("error saving item ", error); } }; const handledeleteitem = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); fetchitems(); } catch (error) { console error("error deleting item ", error); } }; const starteditingitem = (item) => { seteditingitemid(item id); seteditingtitle(item get("title")); seteditingdescription(item get("description")); }; const handleupdateitem = async () => { try { const items = parse object extend("items"); const item = new items(); item id = editingitemid; item set("title", editingtitle); item set("description", editingdescription); await item save(); seteditingitemid(null); seteditingtitle(""); seteditingdescription(""); fetchitems(); } catch (error) { console error("error updating item ", error); } }; return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add item\</h2> \<input type="text" placeholder="title" value={newitemtitle} onchange={(e) => setnewitemtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={newitemdescription} onchange={(e) => setnewitemdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleadditem}>add item\</button> \</div> \<h2>item list\</h2> \<ul> {items map((item) => ( \<li key={item id} style={{ marginbottom '1rem' }}> {editingitemid === item id ? ( \<div> \<input type="text" value={editingtitle} onchange={(e) => seteditingtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" value={editingdescription} onchange={(e) => seteditingdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleupdateitem}>save\</button> \<button onclick={() => seteditingitemid(null)} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => starteditingitem(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => handledeleteitem(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } export default app; \#### commit your code to github 1\ initialize a git repository in your project folder (if you haven’t already) ```bash git init tambahkan file sumber anda git add komit perubahan anda git commit m "komit awal dari kode sumber frontend reactjs" buat repositori github misalnya, buat repositori bernama basic crud app reactjs frontend di github dorong kode anda ke github git remote add origin https //github com/your username/basic crud app reactjs frontend git git push u origin main 7 3 integrasikan repositori github anda dengan web deployment akses web deployment masuk ke dasbor back4app anda, navigasikan ke proyek anda (basic crud app reactjs), dan klik pada fitur web deployment hubungkan ke github jika anda belum melakukannya, integrasikan akun github anda dengan mengikuti petunjuk di layar koneksi ini memungkinkan back4app untuk mengakses repositori anda pilih repositori dan cabang anda pilih repositori yang anda buat (misalnya, basic crud app reactjs frontend ) dan pilih cabang (misalnya, main ) yang berisi kode reactjs anda 7 4 konfigurasi penyebaran anda berikan detail konfigurasi tambahan perintah build jika repositori anda tidak menyertakan folder build , tentukan perintah build (misalnya, npm run build ) back4app akan menjalankan perintah ini selama penyebaran direktori output atur direktori output ke build sehingga back4app tahu folder mana yang berisi file situs statis anda variabel lingkungan jika aplikasi anda bergantung pada variabel lingkungan (misalnya, kunci api), tambahkan mereka dalam pengaturan konfigurasi 7 5 dockerize proyek aplikasi reactjs anda jika anda lebih suka menggunakan docker untuk penyebaran, anda dapat mengcontainer aplikasi reactjs anda sertakan dockerfile di repositori anda dengan konten yang mirip dengan berikut \# use an official node runtime as a parent image from node 16 alpine as build \# set the working directory workdir /app \# copy package json and package lock json copy package json / \# install dependencies run npm install \# copy the rest of the application copy \# build the react app run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] sertakan dockerfile ini di repositori anda kemudian, dalam konfigurasi penyebaran web anda, pilih opsi penyebaran docker untuk membangun dan menyebarkan aplikasi terkontainer anda 7 6 sebarkan aplikasi anda klik tombol sebarkan setelah anda mengonfigurasi pengaturan penyebaran, klik tombol sebarkan pantau proses pembangunan back4app akan menarik kode anda dari github, menjalankan perintah build (jika dikonfigurasi), dan menyebarkan aplikasi anda dalam sebuah kontainer dapatkan url anda setelah penyebaran selesai, back4app akan memberikan url di mana aplikasi reactjs anda dihosting 7 7 verifikasi penyebaran anda kunjungi url yang diberikan buka url di browser web anda untuk melihat situs yang telah disebarkan uji aplikasi verifikasi bahwa aplikasi anda dimuat dengan benar, semua rute berfungsi seperti yang diharapkan, dan semua aset (css, javascript, gambar) disajikan dengan baik atasi masalah jika diperlukan gunakan alat pengembang di browser anda untuk memeriksa kesalahan jika masalah muncul, tinjau log penyebaran di back4app dan verifikasi integrasi github serta pengaturan build anda langkah 8 – kesimpulan dan langkah selanjutnya selamat! anda telah membangun aplikasi crud dasar yang lengkap menggunakan reactjs dan back4app anda telah mengonfigurasi proyek bernama basic crud app reactjs , merancang koleksi database yang terperinci untuk item dan pengguna, dan mengelola data anda melalui admin app yang kuat anda juga mengintegrasikan frontend reactjs anda dengan backend anda dan mengamankan data anda dengan kontrol akses yang kuat langkah selanjutnya tingkatkan frontend anda perluas aplikasi reactjs anda dengan fitur seperti tampilan item yang terperinci, fungsionalitas pencarian, dan notifikasi waktu nyata integrasikan fitur tambahan pertimbangkan untuk menambahkan logika backend yang lebih canggih (misalnya, cloud functions), integrasi api pihak ketiga, atau kontrol akses berbasis peran jelajahi sumber daya lainnya tinjau dokumentasi back4app https //www back4app com/docs dan tutorial tambahan untuk pendalaman lebih dalam tentang optimisasi kinerja dan integrasi kustom dengan mengikuti tutorial ini, anda sekarang memiliki keterampilan untuk membuat backend crud yang kuat dan dapat diskalakan untuk aplikasi reactjs anda menggunakan back4app selamat coding!