Quickstarters

Cara Membangun Backend untuk React Native?

38min

Pendahuluan

Dalam tutorial ini, Anda akan belajar cara membangun backend untuk React Native menggunakan Back4App.

Kami akan fokus pada kompatibilitas lintas platform dan menggambarkan bagaimana Anda dapat mengintegrasikan fitur-fitur penting Back4App untuk manajemen data, otentikasi pengguna, dan data waktu nyata.

Dengan memanfaatkan REST dan GraphQL API, Anda dapat mengembangkan proyek React Native Anda untuk berjalan di kedua platform iOS dan Android, memastikan pengalaman yang mulus di seluruh komponen asli dan aplikasi seluler.

Menerapkan login pengguna yang aman, menjadwalkan tugas, dan menggunakan aplikasi waktu nyata akan membuat perjalanan pengembang full stack Anda lebih mudah.

Anda juga akan melihat bagaimana lingkungan Back4App dapat mengurangi waktu yang diperlukan untuk mengatur layanan termasuk hosting, database, dan lapisan keamanan.

Pada akhir tutorial ini, Anda akan memiliki struktur backend yang kuat yang mendukung aplikasi React Native Anda dan membuka jalan untuk membangun solusi seluler dalam skala besar.

Setelah menyelesaikan panduan ini, Anda akan siap untuk memperluas aplikasi Anda dengan fitur-fitur canggih, mengintegrasikan layanan pihak ketiga, atau mengubah proyek Anda menjadi platform siap produksi.

Mari kita menyelami pengembangan aplikasi mobile modern dengan Back4App dan React Native!

Prasyarat

Untuk menyelesaikan tutorial ini, Anda akan membutuhkan:

  • Akun Back4app dan proyek Back4App baru Memulai dengan Back4app. Jika Anda tidak memiliki akun, daftar secara gratis. Kemudian, ikuti panduan untuk menyiapkan proyek Anda.
  • Lingkungan pengembangan React Native dasar Anda dapat menggunakan React Native CLI Quickstart atau Expo CLI. Pastikan Anda telah menginstal Node.js.
  • Node.js (versi 14 atau lebih tinggi) terinstal Anda memerlukan Node.js untuk menginstal paket npm dan menjalankan server pengembangan lokal. Menginstal Node.js
  • Keterampilan dalam JavaScript dan konsep dasar React Native Dokumen Resmi React Native. Jika Anda baru dalam pengembangan React Native, tinjau dokumen atau tutorial pemula terlebih dahulu.

Pastikan Anda memiliki prasyarat ini sebelum Anda mulai. Memiliki proyek Back4App Anda dibuat dan lingkungan React Native lokal Anda dikonfigurasi akan memastikan proses yang lancar.

Langkah 1 – Membuat Proyek Baru di Back4App dan menghubungkan

Buat Proyek Baru

Langkah pertama dalam membangun backend mobile untuk aplikasi React Native Anda adalah membuat proyek baru di Back4App. Ikuti langkah-langkah ini:

  1. Masuk ke akun Back4App Anda.
  2. Klik tombol “Aplikasi Baru” di dasbor Back4App Anda.
  3. Beri nama aplikasi Anda (misalnya, “ReactNative-Backend-Tutorial”).
Document image


Setelah proyek dibuat, itu akan muncul di dasbor Back4App Anda. Anda akan menggunakan proyek baru ini untuk mengelola data dan mengonfigurasi keamanan untuk aplikasi React Native Anda.

Mendapatkan Kunci Aplikasi Anda

Tidak seperti aplikasi React berbasis web, pengembangan React Native sering kali memerlukan permintaan HTTP langsung untuk pengambilan dan manipulasi data. Karena kami fokus pada REST APIs (atau GraphQL APIs) alih-alih Parse SDK, Anda tetap memerlukan kunci Back4App Anda untuk mengirim permintaan yang terautentikasi.

  1. Ambil Kunci Parse Anda: Di dasbor Back4App, buka Pengaturan Aplikasi atau Keamanan & Kunci aplikasi Anda untuk menemukan ID Aplikasi, Kunci API REST, dan Endpoint GraphQL (biasanya https://parseapi.back4app.com/graphql).
  2. Catat Kunci API REST Anda: Anda akan menyertakannya dalam fetch atau axios di React Native Anda untuk mengautentikasi setiap permintaan.
Document image


Langkah ini memastikan aplikasi seluler Anda dapat berkomunikasi dengan aman dengan Back4App.

Langkah 2 – Menyiapkan Basis Data

Back4App menyediakan berbagai opsi backend untuk aplikasi React Native, termasuk kemampuan manajemen data yang kuat. Anda dapat membuat kelas, menambahkan kolom, dan mendefinisikan hubungan melalui dasbor. Apakah Anda sedang membangun aplikasi waktu nyata atau aplikasi CRUD yang lebih sederhana, dasbor Back4App membantu Anda menyimpan dan mengatur data dengan mudah.

Membuat Model Data

  1. Navigasikan ke bagian “Database” di dasbor Back4App Anda.
  2. Buat kelas baru (misalnya, “Todo”) dan tambahkan kolom yang relevan seperti title (String) dan isCompleted (Boolean).
Buat Kelas Baru
Buat Kelas Baru


Back4App mendukung berbagai tipe data: String, Number, Boolean, Object, Date, File, Pointer, Array, Relation, GeoPoint, dan Polygon. Anda juga dapat membiarkan Parse secara otomatis membuat kolom saat Anda mengirim data baru.

Membuat Model Data dengan Agen AI

Jika Anda mau, Anda dapat menggunakan Agen AI Back4App:

  1. Buka AI Agent dari Dasbor Aplikasi Anda.
  2. Deskripsikan model data Anda dalam bahasa yang sederhana (misalnya, “Buat kelas Todo dengan bidang title dan isCompleted.”).
  3. Biarkan AI Agent membuat skema untuk Anda.
Document image


Ini dapat menghemat waktu selama tahap awal proyek React Native Anda.

Membaca dan Menulis Data menggunakan REST API

Untuk pengembangan React Native yang khas, Anda dapat menggunakan fetch API bawaan atau pustaka pihak ketiga seperti axios untuk menangani REST API. Di bawah ini adalah contoh menggunakan cURL, yang dapat Anda sesuaikan untuk fetch:

POST (Buat Todo):

Bash


GET (Ambil Todos):

Bash


Dalam aplikasi React Native Anda, Anda dapat melakukan hal yang sama dengan fetch:

JS


Membaca dan Menulis Data menggunakan API GraphQL

Jika Anda lebih suka GraphQL, Back4App menyediakan endpoint GraphQL. Di bawah ini adalah contoh mutasi untuk membuat catatan baru:

GraphQL


Anda dapat mengeksekusi kueri GraphQL menggunakan pustaka seperti apollo-client atau bahkan panggilan fetch yang sederhana:

JS


Bekerja dengan Live Queries (opsional)

Untuk data waktu nyata, Back4App memiliki Live Queries, meskipun biasanya memerlukan Parse SDK. Karena kita fokus pada panggilan REST dalam tutorial ini, Anda dapat mengaktifkan Live Queries di Pengaturan Server aplikasi Anda jika Anda berencana untuk menggunakannya nanti. Data waktu nyata dapat membantu Anda menjaga pengguna tetap terupdate secara instan di aplikasi React Native. Untuk pendekatan yang lebih sederhana, Anda mungkin melakukan polling ke server dengan interval Anda sendiri atau mengandalkan alat pihak ketiga.

Langkah 3 – Menerapkan Keamanan dengan ACL dan CLP

Gambaran singkat

Back4App mengamankan backend Anda dengan ACL (Daftar Kontrol Akses) dan CLP (Izin Tingkat Kelas). Ini memungkinkan Anda melindungi data di tingkat objek dan kelas. Mereka sangat penting untuk menerapkan izin pengguna yang aman dalam pengembangan aplikasi seluler tingkat produksi.

Langkah demi langkah

  • Izin Tingkat Kelas (CLP): Pergi ke bagian Database aplikasi Anda, buka kelas mana pun, dan beralih ke “Keamanan & Izin.” Sesuaikan izin baca/tulis untuk berbagai peran pengguna atau akses publik.
  • ACL: Anda dapat menerapkan kontrol akses per-objek dengan menyertakan _ACL bidang dalam permintaan REST Anda. Misalnya:

Untuk detail lebih lanjut, lihat Pedoman Keamanan Aplikasi.

Langkah 4 – Menulis Fungsi Cloud Code

Mengapa Cloud Code

Cloud Code memungkinkan Anda menjalankan skrip sisi server di Back4App untuk tugas seperti validasi, pemicu, dan memproses panggilan API eksternal. Ini membantu Anda mengontrol logika yang harus tetap tersembunyi dari klien, memberikan keamanan yang lebih baik untuk proyek React Native Anda.

Contoh Fungsi

Di bawah ini adalah contoh yang akan Anda tulis di main.js di sisi server. Anda dapat memanggilnya dari aplikasi React Native Anda melalui REST:

JS


Penerapan

  1. Back4app CLI: Instal CLI, konfigurasikan kunci akun Anda, dan jalankan b4a deploy.
  2. Dasbor: Anda juga dapat pergi ke Cloud Code > Functions, tempelkan kode Anda di main.js, dan klik Terapkan.
Document image


Memanggil Fungsi Anda (melalui REST)

Gunakan REST API langsung dari aplikasi React Native Anda:

JS


Fleksibilitas ini membuat Anda menjadi pengembang full stack yang lebih efisien, karena Anda dapat mengintegrasikan logika bisnis tanpa mengekspos detail sensitif di klien.

Langkah 5 – Mengonfigurasi Autentikasi

Aktifkan atau Siapkan Autentikasi Pengguna

Back4App menggunakan kelas Parse User untuk mengelola autentikasi pengguna. Bahkan jika Anda tidak menggunakan Parse SDK di React Native, Anda dapat mendaftar, masuk, atau keluar menggunakan permintaan HTTP langsung.

Daftar Pengguna (REST):

Bash


Masuk (REST):

Bash


Permintaan ini mengembalikan token sesi yang dapat Anda simpan di aplikasi React Native Anda untuk mengelola sesi pengguna. Ini memastikan bahwa setiap permintaan yang Anda buat dapat diotorisasi, membangun pengalaman mobile yang tetap aman.

Masuk Sosial

Back4App mendukung login sosial (Google, Facebook, Apple) melalui alur khusus. Anda perlu mengikuti Dokumentasi Login Sosial untuk mengonfigurasi aplikasi OAuth, dan kemudian mengirim token yang sesuai ke Back4App.

Langkah 6 – Menangani Penyimpanan File

Mengatur Penyimpanan File

Back4App dapat menyimpan file untuk aplikasi React Native Anda. Anda dapat melampirkannya ke objek atau mengunggahnya langsung. Karena kami menggunakan REST, berikut adalah contoh mengunggah file (dalam format Base64):

Bash


Responsnya mengembalikan URL yang dapat Anda simpan di database Anda. Dari aplikasi React Native Anda, Anda dapat melakukan ini dengan fetch dengan mengirim file sebagai blob atau data formulir.

Pertimbangan Keamanan

Untuk mencegah unggahan yang tidak sah, konfigurasikan fileUpload opsi di Pengaturan Server Parse. Misalnya, Anda dapat mengizinkan unggahan hanya dari pengguna yang terautentikasi. Ini memastikan layanan termasuk penyimpanan file tetap terlindungi.

Langkah 7 – Verifikasi Email dan Reset Kata Sandi

Ikhtisar

Mengonfirmasi kepemilikan email adalah kunci untuk menerapkan alur pengguna yang aman. Back4App menawarkan alat bawaan untuk verifikasi email dan reset kata sandi.

Konfigurasi Dasbor Back4App

  1. Buka Pengaturan Aplikasi Anda.
  2. Aktifkan verifikasi email di bawah Pengaturan Email.
  3. Sesuaikan template untuk pesan reset kata sandi dan verifikasi.

Kode/Implementasi

Seorang pengguna yang lupa kata sandinya dapat memicu permintaan reset:

Bash


Back4App mengirimkan email reset kata sandi kepada pengguna. Kenyamanan ini menghindarkan Anda dari pengaturan server email terpisah di aplikasi React Native Anda.

Langkah 8 – Penjadwalan Tugas dengan Cloud Jobs

Apa yang Dilakukan Cloud Jobs

Cloud Jobs membantu Anda mengotomatiskan tugas berulang seperti pembersihan data atau mengirim laporan harian. Di bawah ini adalah contoh pekerjaan di main.js:

JS


Terapkan kode ini, lalu pergi ke Server Settings > Background Jobs untuk menjadwalkannya. Ini menjaga data Anda tetap segar di platform iOS dan Android Anda tanpa intervensi manual.

Menjadwalkan Cloud Job
Menjadwalkan Cloud Job


Langkah 9 – Mengintegrasikan Webhooks

Definisi

Webhooks memungkinkan backend Anda untuk memberi tahu layanan eksternal setiap kali suatu peristiwa terjadi. Misalnya, Anda dapat memberi tahu Slack atau gateway pembayaran saat membuat Todo baru.

Konfigurasi

  1. Pergi ke More > WebHooks di dasbor Back4App Anda.
  2. Tambahkan Webhook baru yang mengarah ke endpoint eksternal yang diinginkan.
  3. Atur pemicu untuk mendefinisikan kapan perubahan data aplikasi React Native Anda harus memicu webhook.
Menambahkan Webhook
Menambahkan Webhook


Anda juga dapat mengkodekan webhook di dalam pemicu Cloud Code, memungkinkan Anda untuk mengirim permintaan HTTP atau mengintegrasikan dengan API pihak ketiga. Ini memperluas kemampuan backend Anda ke berbagai layanan eksternal.

Sebelum Menyimpan WebHook
Sebelum Menyimpan WebHook


Langkah 10 – Menjelajahi Panel Admin Back4App

Di Mana Menemukannya

Panel Admin Back4App adalah antarmuka yang ramah pengguna untuk individu non-teknis untuk mengelola data. Ini sangat berguna bagi pemilik produk, perwakilan klien, atau staf dukungan yang memerlukan akses langsung ke model data Anda.

Fitur

  1. Aktifkan Aplikasi Admin di Dasbor Aplikasi > Lainnya > Aplikasi Admin.
  2. Buat Pengguna Admin (username/kata sandi).
  3. Pilih Subdomain untuk akses database cepat tanpa kode.
Aktifkan Aplikasi Admin
Aktifkan Aplikasi Admin


Setelah masuk, pengguna atau tim Anda dapat melihat, mengedit, atau menghapus catatan tanpa menulis kode. Pendekatan ini mendukung manajemen data dan kolaborasi yang lebih cepat.

Kesimpulan

Dalam panduan ini, Anda belajar cara membangun backend untuk aplikasi React Native menggunakan Back4App. Ini termasuk:

  • Membuat backend yang aman dan menerapkan kompatibilitas lintas platform untuk aplikasi React Native Anda.
  • Mengatur manajemen data dengan REST dan GraphQL API.
  • Mengonfigurasi ACL dan CLP untuk melindungi data sensitif.
  • Menulis Cloud Code untuk logika sisi server.
  • Menangani otentikasi pengguna dan verifikasi email.
  • Mengelola penyimpanan file dengan unggahan langsung.
  • Menjadwalkan tugas latar belakang dengan Cloud Jobs.
  • Menggunakan Webhooks untuk mengintegrasikan layanan eksternal.
  • Menjelajahi Panel Admin Back4App untuk administrasi database yang mudah.

Dengan alat dan fitur ini, proyek React Native Anda dapat berkembang menjadi solusi full stack yang andal dan skalabel. Anda sekarang dilengkapi untuk menangani data waktu nyata, keamanan pengguna, dan aspek penting lainnya dari aplikasi seluler. Teruslah menjelajahi Dokumentasi Back4App untuk menyempurnakan keterampilan Anda dan menciptakan pengalaman seluler yang kuat di platform iOS dan Android.

Langkah Selanjutnya

  • Perkuat aplikasi React Native Anda dengan keamanan yang lebih canggih dan kontrol akses berbasis peran.
  • Eksperimen dengan pembaruan waktu nyata menggunakan Live Queries untuk aplikasi waktu nyata (jika diperlukan).
  • Integrasikan API eksternal dan layanan termasuk gateway pembayaran atau login sosial.
  • Tingkatkan kinerja melalui caching atau mengoptimalkan fungsi cloud.
  • Selami lebih dalam ke dokumentasi resmi Back4App untuk membuka fitur tambahan.