How to Build a Gatsby Frontend and Connect It to a Backend?

dalam tutorial ini, anda akan membangun aplikasi daftar tugas menggunakan gatsby dan menghubungkannya ke backend yang kuat yang disediakan oleh back4app panduan ini ideal bagi mereka yang ingin mengintegrasikan operasi crud (buat, baca, perbarui, hapus) yang penting ke dalam situs statis yang cepat pada akhir tutorial, anda akan memiliki aplikasi yang sepenuhnya fungsional yang menunjukkan bagaimana memanfaatkan layanan backend back4app sambil menggunakan gatsby untuk frontend yang sangat cepat membangun aplikasi full stack bisa menjadi tantangan, dengan kompleksitas seperti pengaturan backend, manajemen database, otentikasi, dan penyebaran untuk memperlancar proses ini, kami menggunakan back4app—sebuah solusi backend as a service (baas) yang dapat diskalakan —sehingga anda dapat berkonsentrasi pada pembangunan situs gatsby anda sementara ia menangani hosting, database, dan api back4app menawarkan rangkaian layanan backend yang komprehensif, termasuk database siap pakai, otentikasi, cloud code untuk logika sisi server, dan integrasi sdk yang mulus dukungannya untuk penyebaran terkontainer membuatnya menjadi pilihan yang sangat baik untuk aplikasi full stack modern dengan alat ini, anda dapat dengan cepat mengembangkan dan menerapkan aplikasi tanpa mengelola infrastruktur server poin penting dengan mengikuti tutorial ini, anda akan belajar untuk menginisialisasi proyek gatsby modern mengintegrasikan layanan backend untuk mengelola data aplikasi anda menerapkan operasi crud inti untuk pengalaman pengguna yang interaktif menerapkan aplikasi to do list fungsional sepenuhnya menggunakan alur kerja terkontainer di back4app prasyarat pastikan anda memiliki hal hal berikut sebelum anda mulai node js dan npm instal versi lts terbaru dari node js dari nodejs org https //nodejs org/ dan verifikasi dengan menjalankan node v dan npm v di terminal anda pengetahuan dasar tentang gatsby familiaritas dengan react, graphql, dan lapisan data gatsby diharapkan jika anda baru mengenal gatsby, pertimbangkan untuk meninjau dasar dasarnya terlebih dahulu akun back4app daftar di back4app https //www back4app com/ untuk mengatur dan mengelola layanan backend anda dengan prasyarat ini, anda siap untuk mengatur proyek anda dan mulai membangun pengaturan proyek mulailah dengan mengatur lingkungan pengembangan lokal anda dan menginisialisasi proyek gatsby anda verifikasi bahwa node js (versi lts) telah terinstal jika perlu, unduh dari nodejs org https //nodejs org/ periksa instalasi anda node v npm v buat proyek gatsby baru menggunakan gatsby cli jalankan perintah berikut (ganti todo app dengan nama proyek yang anda inginkan) npx gatsby new todo app masuk ke direktori proyek anda cd todo app mulai server pengembangan untuk memverifikasi pengaturan npx gatsby develop situs gatsby anda sekarang harus berjalan secara lokal buka url yang disediakan di browser anda untuk mengonfirmasi selanjutnya, anda akan mengatur backend anda di back4app untuk mengelola penyimpanan data dan interaksi api membuat backend todo back4app menyediakan layanan backend yang sepenuhnya dikelola yang didukung oleh parse , menawarkan database nosql, otentikasi, cloud code, dan api yang dihasilkan secara otomatis langsung dari kotak bagian ini akan memandu anda melalui pembuatan model data task untuk menyimpan item yang harus dilakukan anda dan menghubungkannya dengan frontend gatsby anda mengatur aplikasi backend anda masuk ke dasbor back4app https //www back4app com/ dan klik "buat aplikasi baru " beri nama aplikasi anda (misalnya, todogatsbyapp ) dan pilih nodejs/parse sebagai jenis backend setelah aplikasi dibuat, navigasikan ke "database" > "browser" klik "buat kelas" dan pilih "kustom" beri nama kelas task dan atur izin tingkat kelas untuk mengizinkan baca dan tulis publik (anda dapat memperbaiki pengaturan ini nanti) di kelas task , tambahkan bidang berikut judul (string) – judul dari tugas deskripsi (string) – detail tentang tugas selesai (boolean) – menunjukkan apakah tugas telah selesai tanggaljatuhtempo (tanggal) – tenggat waktu untuk tugas klik "simpan" untuk menyelesaikan skema anda mengintegrasikan back4app dengan gatsby integrasikan back4app ke dalam proyek gatsby anda menggunakan parse javascript sdk instal sdk melalui npm npm install parse konfigurasikan sdk dengan menginisialisasinya menggunakan application id dan javascript key ambil kredensial ini dari dasbor back4app anda di bawah app settings > security & keys dalam proyek anda, buat file (misalnya, src/utils/parse config js ) dan tambahkan konfigurasi berikut // src/utils/parse config 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; anda sekarang dapat mengimpor konfigurasi ini ke dalam halaman dan komponen gatsby anda untuk berinteraksi dengan backend anda mengembangkan frontend dengan gatsby sekarang backend anda terhubung, bangun antarmuka pengguna untuk aplikasi daftar tugas anda menggunakan gatsby anda akan membuat halaman dan komponen untuk menambah, menampilkan, memperbarui, dan menghapus tugas sambil memanfaatkan react dan graphql mengorganisir komponen anda aplikasi anda akan mencakup komponen kunci berikut taskform js – mengelola penambahan tugas baru tasklist js – menampilkan semua tugas dan menyediakan kontrol untuk menandai tugas sebagai selesai atau menghapusnya taskitem js – mewakili tugas individu dengan tindakan untuk mengubah status penyelesaian atau menghapusnya buat sebuah folder komponen di dalam src dan tambahkan file file ini mkdir src/components touch src/components/taskform js src/components/tasklist js src/components/taskitem js mengelola status dengan react hooks gunakan react hooks ( usestate dan useeffect ) untuk manajemen status dan efek samping di halaman utama anda (misalnya, src/pages/index js ), atur status sebagai berikut // src/pages/index js import react, { usestate, useeffect } from "react"; import parse from " /utils/parse config"; import taskform from " /components/taskform"; import tasklist from " /components/tasklist"; const indexpage = () => { const \[tasks, settasks] = usestate(\[]); 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); } }; useeffect(() => { fetchtasks(); }, \[]); return ( \<div classname="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); }; export default indexpage; membangun komponen form tugas di taskform js , buatlah form terkontrol untuk menambahkan tugas kelola nilai input menggunakan usestate dan kirim data ke back4app // src/components/taskform js import react, { usestate } from "react"; import parse from " /utils/parse config"; const taskform = ({ fetchtasks }) => { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = 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(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<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> ); }; export default taskform; menampilkan daftar tugas di tasklist js , render daftar tugas dengan memetakan array tugas dan menggunakan komponen taskitem // src/components/tasklist js import react from "react"; import taskitem from " /taskitem"; const tasklist = ({ tasks, fetchtasks }) => { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map(task => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); }; export default tasklist; membuat komponen item tugas di taskitem js , buat komponen yang memungkinkan anda menandai tugas sebagai selesai atau menghapusnya // src/components/taskitem js import react from "react"; import parse from " /utils/parse config"; const taskitem = ({ task, fetchtasks }) => { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); }; export default taskitem; menata aplikasi anda buat sebuah styles css file di dalam src folder dengan penataan dasar / src/styles 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; box sizing border box; 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; } container p { font size 1rem; } task item { display flex; flex direction column; align items center; justify content 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 css ini ke dalam tata letak atau halaman gatsby anda (misalnya, di gatsby browser js ) // gatsby browser js import " /src/styles css"; menyelesaikan ui aplikasi daftar tugas gatsby anda sekarang memiliki frontend dinamis yang terintegrasi dengan back4app dan gaya kustom aplikasi ini memungkinkan anda untuk menambah, menampilkan, memperbarui, dan menghapus tugas sambil memastikan komunikasi frontend backend yang efisien selanjutnya, anda akan menerapkan situs gatsby anda menggunakan platform web deployment back4app menerapkan frontend di web deployment back4app back4app web deployment menawarkan lingkungan terkelola sepenuhnya yang terkontainerisasi untuk hosting aplikasi anda dengan penyebaran berbasis docker, anda dapat mengemas situs gatsby anda dan menyebarkannya dengan mudah mengonfigurasi gatsby untuk produksi gatsby secara default menghasilkan situs statis bangun situs siap produksi anda dengan npx gatsby build membuat dockerfile untuk situs anda sebelum membuat a dockerfile , pertama buat file dockerignore di direktori root proyek anda dan tambahkan baris kode ini git node modules eslint prettier git vscode readme md dockerfile docker compose yml public cache selanjutnya, buat file docker compose yml untuk menggunakan perintah docker compose target file ini haruslah tahap deploy di dockerfile anda file docker compose yml anda harus berisi perintah di bawah ini version '3' services app image todo app gatsby build context dockerfile dockerfile target deploy ports \ "8000 80" sekarang, anda membuat a dockerfile di root proyek untuk mengkontainerisasi situs gatsby anda from node 20 as build workdir /usr/src/app copy run npm install run npm run build from nginx 1 18 alpine as deploy workdir /usr/share/nginx/html run rm rf / copy from=build /usr/src/app/public entrypoint \[ "nginx", " g", "daemon off;" ] menguji kontainer secara lokal sebelum penyebaran, bangun dan uji kontainer docker anda docker build t todo gatsby frontend jalankan kontainer docker run p 8000 80 todo gatsby frontend kunjungi http //localhost 8000 di browser anda untuk memverifikasi bahwa situs anda disajikan dengan benar mengunggah ke github dan mendeploy melalui 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, lakukan penyebaran menggunakan back4app web deployment masuk ke back4app web deployment https //www back4app com/containers klik "buat aplikasi baru" , berikan nama, dan pilih github repository otorisasi back4app untuk mengakses repositori anda dan pilih repo todo gatsby pilih dockerfile deployment dan konfirmasi pengaturan build klik "deploy" untuk memulai proses build memantau dan mengelola penyebaran setelah penyebaran, gunakan dasbor back4app untuk melihat log untuk pemecahan masalah memantau kinerja kontainer dan penggunaan sumber daya memicu penyebaran ulang pada komit baru mengonfigurasi domain kustom jika diperlukan pengujian dan debugging aplikasi anda setelah diterapkan, uji situs gatsby anda secara menyeluruh verifikasi konektivitas api buka konsol pengembang browser anda (f12 → jaringan) untuk memeriksa panggilan api selama operasi tugas tambahkan dan ambil tugas gunakan ui untuk menambahkan tugas, lalu segarkan untuk mengonfirmasi keberlanjutan data di browser database back4app uji operasi crud pastikan bahwa menandai tugas sebagai selesai dan penghapusan tercermin dengan benar di backend tangani kasus tepi validasi input formulir dan simulasi kondisi jaringan lambat menggunakan alat pengembang jika masalah muncul, tinjau log back4app atau periksa konfigurasi api anda praktik terbaik untuk menggunakan layanan back4app tingkatkan kinerja dan keamanan aplikasi anda dengan mengoptimalkan panggilan api gunakan permintaan batch untuk beberapa operasi dan kueri hanya bidang yang diperlukan mengamankan data sensitif simpan kredensial seperti id aplikasi dan kunci javascript dalam variabel lingkungan dengan gatsby, buat sebuah env file gatsby parse app id=your app id gatsby parse js key=your js key mengaktifkan auto scaling aktifkan auto scaling di back4app web deployment untuk mengelola lalu lintas tinggi meningkatkan keamanan batasi izin tingkat kelas (clp) untuk mengontrol modifikasi data dan atur acl sesuai kebutuhan memanfaatkan cloud code alihkan logika kompleks ke cloud code untuk kinerja yang lebih baik dan pengurangan paparan api kesimpulan anda sekarang telah membangun aplikasi to do list full stack menggunakan gatsby untuk frontend dan layanan backend back4app yang kuat tutorial ini membimbing anda melalui pengaturan proyek gatsby, mengintegrasikan parse sdk, dan menerapkan situs anda menggunakan alur kerja terkontainer di back4app saat anda terus mengembangkan, pertimbangkan untuk menambahkan fitur seperti otentikasi pengguna yang lebih canggih, pembaruan waktu nyata, dan integrasi pihak ketiga untuk informasi lebih lanjut dan dukungan, lihat dokumentasi back4app https //www back4app com/docs