How to Build a Backend for Gatsby?

pendahuluan dalam tutorial ini, anda akan belajar cara membangun backend untuk gatsby menggunakan back4app kami akan menunjukkan kepada anda cara mengintegrasikan fitur fitur back4app—seperti manajemen database, cloud code functions, rest api dan kemampuan kueri graphql , otentikasi pengguna, dan kueri waktu nyata (live queries)—untuk membuat backend yang aman, dapat diskalakan, dan kuat yang dapat diakses dari situs gatsby anda anda juga akan melihat bagaimana pengaturan cepat back4app dan lingkungan yang intuitif dapat secara drastis mengurangi waktu dan usaha yang diperlukan untuk menangani tugas backend pada akhirnya, anda akan tahu persis cara membangun backend untuk gatsby yang menyimpan dan mengambil data, menangani otentikasi, mengintegrasikan fungsi cloud, dan banyak lagi ini mempersiapkan anda untuk dengan mudah menggabungkan logika kustom, menambahkan api pihak ketiga, atau memperluas model data anda tanpa harus khawatir tentang pemeliharaan server tradisional apa yang akan anda bangun dan mengapa ini berharga integrasi backend lengkap anda akan membuat struktur backend yang dapat diskalakan untuk situs gatsby anda, menggabungkan parse sdk, yang sempurna untuk kebutuhan data dinamis penghematan waktu back4app menyediakan alat seperti ai agent, kueri waktu nyata, dan pekerjaan cloud yang mempercepat pembuatan backend keterampilan yang dapat diperluas setelah selesai, anda akan dapat menyesuaikan konsep konsep ini untuk fitur gatsby yang lebih canggih, seperti membuat halaman pada waktu build atau menghubungkan ke fungsi tanpa server untuk operasi dinamis prasyarat akun back4app dan proyek back4app baru memulai dengan back4app https //www back4app com/docs/get started/new parse app jika anda belum memiliki akun, anda dapat membuatnya secara gratis ikuti panduan di atas untuk menyiapkan proyek anda lingkungan pengembangan gatsby dasar anda dapat menyiapkannya dengan menginstal gatsby cli https //www gatsbyjs com/docs/tutorial/part 0/#install gatsby cli dan menjalankan node js (versi 14 atau lebih tinggi) terinstal menginstal node js https //nodejs org/en/download/ keterampilan dalam javascript dan konsep gatsby dokumentasi resmi gatsby https //www gatsbyjs com/docs/ baca dokumen atau tutorial pemula jika anda baru mengenal gatsby pastikan anda telah menyiapkan persyaratan ini ini memastikan pengalaman yang lancar saat anda membuat file baru untuk konfigurasi atau menjalankan kueri graphql di lingkungan gatsby anda langkah 1 – menyiapkan proyek back4app buat proyek baru langkah pertama dalam cara membangun backend untuk gatsby di back4app adalah membuat proyek baru jika anda belum melakukannya masuk ke akun back4app anda klik tombol “aplikasi baru” di dasbor anda beri nama aplikasi anda (misalnya, “gatsby backend tutorial”) setelah anda membuat proyek, itu akan muncul di dasbor back4app anda kami akan menggunakan proyek ini sebagai inti dari backend kami sambungkan parse sdk back4app menggunakan parse platform untuk mengelola data anda, menawarkan fitur waktu nyata, menangani otentikasi pengguna, dan banyak lagi untuk gatsby, anda masih bisa npm install parse dan kemudian mengintegrasikannya ke dalam file sumber anda ambil kunci parse anda di dasbor back4app anda, temukan application id dan javascript key , biasanya di bawah “pengaturan aplikasi” atau “keamanan & kunci ” anda juga akan menemukan parse server url (sering kali sesuatu seperti https //parseapi back4app com ) instal parse sdk di situs gatsby anda npm install parse buat parseconfig js di direktori root proyek gatsby anda atau di dalam src/ src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; setiap kali anda mengimpor parse dari parseconfig js di file gatsby anda (misalnya, di gatsby node js , gatsby browser js , atau halaman/komponen), anda akan memiliki instance yang sudah dikonfigurasi untuk melakukan kueri ke backend back4app anda langkah 2 – menyiapkan database membuat model data di back4app, data dikelola sebagai “kelas” (mirip dengan tabel) dengan bidang untuk data anda mari kita buat kelas “todo” untuk demonstrasi kami akan menunjukkan beberapa cara anda dapat menyimpan dan mengambil data di gatsby dengan parse navigasikan ke bagian “database” di dasbor back4app buat kelas baru (misalnya, “todo”) dan tambahkan kolom seperti judul (string) dan iscompleted (boolean) atau anda dapat membiarkan parse secara otomatis membuat kolom saat objek pertama kali disimpan dari kode anda membuat model data dengan agen ai back4app menyediakan agen ai untuk membantu mendefinisikan struktur data anda buka agen ai dari dasbor aplikasi anda atau menu deskripsikan model data anda (misalnya, “tolong buat skema aplikasi todo baru dengan judul dan status penyelesaian ”) biarkan agen ai menghasilkan skema untuk anda membaca dan menulis data menggunakan sdk cuplikan contoh di gatsby bisa terlihat seperti ini (misalnya, di halaman berbasis react atau di gatsby browser js ) import parse from ' /parseconfig'; async function createtodoitem(title, iscompleted) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); todo set('iscompleted', iscompleted); try { const savedtodo = await todo save(); console log('todo saved successfully ', savedtodo); return savedtodo; } catch (error) { console error('error saving todo ', error); } } async function fetchtodos() { const todo = parse object extend('todo'); const query = new parse query(todo); try { const results = await query find(); console log('fetched todo items ', results); return results; } catch (error) { console error('error fetching todos ', error); } } membaca dan menulis data menggunakan rest api sebagai alternatif, anda dapat berinteraksi dengan database melalui rest api curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo membaca dan menulis data menggunakan graphql api back4app juga mendukung graphql api , jadi anda bisa menjalankan kueri atau mutasi seperti mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } ini sangat nyaman jika anda ingin situs gatsby anda menarik data melalui kueri graphql saat waktu build bekerja dengan kueri langsung gatsby adalah generator situs statis, tetapi anda masih dapat mengatur koneksi real time dinamis menggunakan parse kueri langsung ini bisa berguna dalam kode yang dijalankan di browser atau dalam hook serverless anda sendiri aktifkan kueri langsung di dasbor back4app anda (di bawah pengaturan server) tambahkan url server kueri langsung ke parseconfig js parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; berlangganan ke kelas untuk notifikasi real time async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { callback('create', newtodo); }); subscription on('update', (updatedtodo) => { callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { callback('delete', deletedtodo); }); return subscription; } ini akan mendorong pembaruan data real time ke front end proyek gatsby anda langkah 3 – menerapkan keamanan dengan acl dan clp apa itu acl dan clp? acl (daftar kontrol akses) memungkinkan anda mendefinisikan izin pada objek individu, sementara clp (izin tingkat kelas) berlaku untuk seluruh kelas di database back4app anda mengatur izin tingkat kelas pergi ke database di dasbor back4app anda pilih kelas (misalnya, todo ) klik tab class level permissions konfigurasikan apakah kelas dapat dibaca publik, memerlukan autentikasi, atau dibatasi untuk peran tertentu menggunakan acl di kode dalam kode gatsby anda, anda dapat mendefinisikan acl untuk setiap objek baru async function createprivatetodo(title, owneruser) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); todo setacl(acl); try { return await todo save(); } catch (err) { console error('error saving private todo ', err); } } langkah 4 – menulis fungsi cloud code mengapa cloud code? dengan cloud code, anda dapat menambahkan logika sisi server kustom ke backend back4app anda ini sangat baik untuk aturan bisnis, rest api transformasi, pemicu, atau validasi data yang mungkin ingin anda jaga tetap aman dan tidak di sisi klien contoh fungsi cloud // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); menyebarkan kode cloud melalui back4app cli instal dan konfigurasikan cli, lalu jalankan b4a deploy melalui dashboard pergi ke cloud code > functions di dashboard anda, tempelkan kode anda ke main js , dan klik deploy memanggil fungsi anda dari gatsby/parse sdk import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } langkah 5 – mengonfigurasi autentikasi kelas pengguna parse back4app menggunakan kelas parse user untuk autentikasi secara default, ia menangani hashing kata sandi, sesi, dan penyimpanan yang aman daftar dan masuk di gatsby import parse from ' /parseconfig'; // signup async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } // login async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } setelah masuk, anda dapat memanggil parse user current() untuk memeriksa apakah seorang pengguna sudah masuk masuk sosial anda dapat mengintegrasikan google , facebook , apple , dan penyedia lainnya dengan pengaturan tambahan baca lebih lanjut di dokumen masuk sosial https //www back4app com/docs/platform/sign in with apple langkah 6 – menangani penyimpanan file mengunggah file gunakan parse file untuk mengunggah gambar atau file lainnya misalnya, dalam komponen gatsby async function uploadimage(file) { const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } anda kemudian dapat melampirkan file ini ke objek parse, menyimpannya, dan kemudian mengambil url file untuk ditampilkan di situs gatsby anda langkah 7 – verifikasi email dan reset kata sandi mengapa ini penting verifikasi email mengonfirmasi alamat email pengguna, dan alur reset kata sandi meningkatkan pengalaman pengguna keduanya mudah dikonfigurasi di back4app navigasikan ke pengaturan email aplikasi anda di dasbor aktifkan verifikasi email dan atur template email reset kata sandi gunakan metode sdk parse (misalnya, parse user requestpasswordreset(email) ) untuk memicu email reset langkah 8 – penjadwalan tugas dengan pekerjaan cloud ikhtisar pekerjaan cloud gunakan pekerjaan cloud untuk mengotomatiskan tugas berulang, seperti menghapus data yang tidak terpakai atau mengirim ringkasan harian misalnya // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); kemudian jadwalkan di bawah pengaturan aplikasi > pengaturan server > pekerjaan latar belakang langkah 9 – mengintegrasikan webhook webhook memungkinkan aplikasi back4app anda mengirim permintaan http ke layanan eksternal ketika peristiwa tertentu terjadi—seperti pembuatan catatan baru pergi ke dasbor back4app anda > lainnya > webhooks tambahkan webhook baru , dengan menentukan url endpoint untuk layanan eksternal pilih apa yang memicu webhook (misalnya, aftersave pada kelas todo) anda juga dapat mengintegrasikan dengan slack atau gateway pembayaran dengan menambahkan endpoint yang tepat langkah 10 – menjelajahi panel admin back4app aplikasi admin app back4app adalah antarmuka yang berfokus pada model untuk manajemen data anda dapat memberikan akses aman kepada pengguna non teknis untuk melakukan operasi crud pada kelas anda mengaktifkan aplikasi admin pergi ke dasbor aplikasi > lainnya > aplikasi admin dan klik “aktifkan aplikasi admin ” kemudian buat pengguna admin dan pilih subdomain untuk antarmuka admin anda sekarang dapat masuk ke aplikasi admin anda untuk melihat dan memodifikasi data tanpa menulis kode kesimpulan dalam tutorial ini, anda menemukan cara membangun backend untuk gatsby menggunakan back4app anda telah belajar untuk mengonfigurasi database yang aman dengan kelas, bidang kustom, dan hubungan menggunakan parse sdk , bersama dengan rest api dan query graphql untuk transaksi data mengatur acl dan clp untuk keamanan data menulis dan menerapkan cloud code untuk memperluas logika bisnis dan pemicu mengelola otentikasi pengguna dengan pendaftaran, login, reset kata sandi, dan verifikasi email menangani penyimpanan file untuk gambar dan dokumen menjadwalkan tugas otomatis dengan cloud jobs mengintegrasikan layanan eksternal melalui webhooks memanfaatkan admin app untuk administrasi data yang mudah dengan keterampilan ini, situs gatsby anda dapat memanfaatkan fitur dinamis yang kuat sambil tetap memanfaatkan rendering statis gatsby perluas model data anda dan tambahkan logika bisnis yang canggih integrasikan lebih banyak api eksternal untuk platform yang benar benar komprehensif ikuti dokumen resmi back4app untuk penjelasan lebih dalam tentang keamanan, kinerja, dan analitik eksperimen dengan fitur waktu build gatsby —misalnya, “ buat halaman ” dari data dinamis atau siapkan plugin “ gatsby source ” untuk backend back4app anda sekarang anda memiliki fondasi yang kuat untuk membangun aplikasi berbasis data yang tahan masa depan dengan gatsby dan back4app