Cara Membangun Backend untuk React Native?

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 akhirnya, 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 yang siap produksi mari kita menyelami pengembangan aplikasi mobile modern dengan back4app dan react native! prasyarat untuk menyelesaikan tutorial ini, anda akan memerlukan akun back4app dan proyek back4app baru memulai dengan back4app https //www back4app com/docs/get started/new parse app 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 https //reactnative dev/docs/environment setup atau expo cli https //docs expo dev/get started/installation/ 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 https //nodejs org/en/download/ keterampilan dalam javascript dan konsep dasar react native dokumen resmi react native https //reactnative dev/ 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 yang dibuat dan lingkungan react native lokal anda yang 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 masuk ke akun back4app anda klik tombol “aplikasi baru” di dasbor back4app anda beri nama aplikasi anda (misalnya, “reactnative backend tutorial”) 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 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 ) catat kunci api rest anda anda akan menyertakannya dalam fetch atau axios di react native anda untuk mengautentikasi setiap permintaan langkah ini memastikan aplikasi mobile anda dapat berkomunikasi dengan aman dengan back4app langkah 2 – menyiapkan database 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 navigasikan ke bagian “database” di dasbor back4app anda buat kelas baru (misalnya, “todo”) dan tambahkan kolom yang relevan seperti title (string) dan iscompleted (boolean) 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 ai agent jika anda mau, anda dapat menggunakan ai agent back4app buka ai agent dari dasbor aplikasi anda deskripsikan model data anda dalam bahasa yang sederhana (misalnya, “buat kelas todo dengan bidang title dan iscompleted ”) biarkan ai agent membuat skema untuk anda 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) 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 get (ambil todos) curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo dalam aplikasi react native anda, anda dapat melakukan hal yang sama dengan fetch async function gettodos() { try { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, }); const data = await response json(); console log('fetched todos ', data results); return data results; } catch (error) { console error('error fetching todos ', error); } } 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 mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } anda dapat mengeksekusi kueri graphql menggunakan pustaka seperti apollo client atau bahkan panggilan fetch yang sederhana async function createtodographql() { const query = ` mutation { createtodo(input { fields { title "study react native" iscompleted false } }) { todo { objectid title } } } `; try { const response = await fetch('https //parseapi back4app com/graphql', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, body json stringify({ query }), }); const result = await response json(); console log('graphql response ', result); } catch (error) { console error('error creating todo with graphql ', error); } } 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 dalam 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 https //www back4app com/docs/security/parse security 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 // main js parse cloud define('generategreeting', async (request) => { const { name } = request params; if (!name) { throw 'name parameter is missing!'; } return `hello, ${name}! welcome to our react native app `; }); penerapan back4app cli instal cli, konfigurasikan kunci akun anda, dan jalankan b4a deploy dasbor anda juga dapat pergi ke cloud code > functions , tempelkan kode anda di main js , dan klik terapkan memanggil fungsi anda (melalui rest) gunakan rest api langsung dari aplikasi react native anda async function callcloudfunction(name) { try { const response = await fetch('https //parseapi back4app com/functions/generategreeting', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, body json stringify({ name }), }); const data = await response json(); console log('greeting ', data result); } catch (err) { console error('error calling cloud function ', err); } } 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) curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{ "username" "alice", "password" "secretpassword", "email" "alice\@example com" }' \\ https //parseapi back4app com/users masuk (rest) curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secretpassword' \\ https //parseapi back4app com/login 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 https //www back4app com/docs/platform/sign in with apple 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) curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type image/png" \\ \ data binary '@path to your file png' \\ https //parseapi back4app com/files/image png 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 buka pengaturan aplikasi anda aktifkan verifikasi email di bawah pengaturan email sesuaikan template untuk reset kata sandi dan pesan verifikasi kode/implementasi seorang pengguna yang lupa kata sandinya dapat memicu permintaan reset curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"email" "alice\@example com"}' \\ https //parseapi back4app com/requestpasswordreset 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 // 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); } }); 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 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 pergi ke more > webhooks di dasbor back4app anda tambahkan webhook baru yang mengarah ke endpoint eksternal yang diinginkan atur pemicu untuk mendefinisikan kapan perubahan data aplikasi react native anda harus memicu 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 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 aktifkan aplikasi admin di dasbor aplikasi > lainnya > aplikasi admin buat pengguna admin (username/kata sandi) pilih subdomain untuk akses database cepat tanpa kode 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 https //www back4app com/docs/ untuk menyempurnakan keterampilan anda dan menciptakan pengalaman seluler yang kuat di platform ios dan android langkah selanjutnya perkuat aplikasi react native anda dengan keamanan tingkat lanjut 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 gerbang pembayaran atau login sosial tingkatkan kinerja melalui caching atau mengoptimalkan fungsi cloud selami lebih dalam ke dokumentasi resmi back4app https //www back4app com/docs/ untuk membuka fitur tambahan