Cara Membangun Backend untuk Flutter?

pendahuluan dalam tutorial ini, anda akan belajar cara membangun backend untuk flutter menggunakan back4app, sebuah backend sebagai layanan (baas) yang open source dan dapat diandalkan kami akan membahas integrasi fitur fitur penting back4app—seperti manajemen database, cloud functions, restful apis, graphql apis, dan otentikasi pengguna—ke dalam proyek flutter anda anda juga akan menemukan cara menangani pembaruan waktu nyata menggunakan live queries dengan menggunakan server backend back4app yang kuat, anda dapat melewati banyak konfigurasi manual dan fokus pada pembuatan aplikasi flutter yang dinamis panduan ini akan menunjukkan kepada pengembang flutter bagaimana cara mengatur struktur backend yang aman, dapat diskalakan, dan kuat yang berkomunikasi dengan mudah dengan sisi klien anda kami juga akan menyoroti keuntungan membiarkan back4app menangani beban berat—seperti hosting, otentikasi pengguna, dan logika server—sehingga anda dapat memanfaatkan fitur fitur seperti penskalaan otomatis, keamanan tingkat lanjut, dan pemeliharaan yang disederhanakan jika anda memiliki proyek flutter dan ingin menghemat banyak waktu untuk pengaturan backend, ini adalah tempat yang tepat untuk memulai pada akhir tutorial ini, anda akan memahami jenis backend yang dapat anda buat dengan back4app dan siap untuk memperluas layanan backend anda untuk aplikasi yang siap produksi atau mengintegrasikan fungsionalitas yang lebih kompleks, seperti api eksternal dan otentikasi pengguna yang lebih canggih mari kita mulai! prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan 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 flutter dasar pastikan anda telah menginstal dan mengatur flutter sdk https //docs flutter dev/get started/install juga, pastikan anda memiliki ide (seperti android studio atau vs code) yang dikonfigurasi untuk flutter lingkungan dart (bahasa pemrograman) biasanya ini diinstal bersamaan dengan flutter pastikan anda dapat mengimpor paket dart tanpa kesalahan keterampilan dasar tentang flutter dokumentasi resmi flutter https //docs flutter dev jika anda baru mengenal flutter, tinjau dokumen resmi atau tutorial pemula sebelum memulai pastikan anda memiliki semua prasyarat ini menyiapkan proyek back4app anda dan mengonfigurasi lingkungan flutter lokal anda akan membantu anda mengikuti dengan lebih mudah langkah 1 – membuat proyek baru di back4app dan menghubungkan buat proyek baru langkah pertama dalam membangun backend flutter anda di back4app adalah membuat proyek baru jika anda belum membuat satu, ikuti langkah langkah ini masuk ke akun back4app anda klik tombol “aplikasi baru” di dasbor back4app anda beri nama aplikasi anda (misalnya, “flutter backend tutorial”) setelah proyek dibuat, anda akan melihatnya terdaftar di dasbor back4app anda proyek ini akan menjadi dasar untuk semua konfigurasi backend yang akan kita bahas instal dan inisialisasi parse sdk di aplikasi flutter anda back4app bergantung pada platform parse untuk mengelola data anda, pembaruan waktu nyata, otentikasi pengguna, dan lainnya untuk menghubungkan proyek flutter anda ke back4app, ikuti langkah langkah ini tambahkan parse flutter sdk ke aplikasi anda dependencies parse server sdk flutter ^4 0 0 impor paket parse di main dart (atau di mana pun anda menginisialisasi aplikasi anda) import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ flutter/material dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyparseserverurl = 'https //parseapi back4app com'; const keyclientkey = 'your client key'; // initialize parse with debug set to true await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, ); runapp(const myapp()); } class myapp extends statelesswidget { const myapp({key? key}) super(key key); @override widget build(buildcontext context) { return materialapp( title 'flutter + back4app example', theme themedata(primaryswatch colors blue), home const scaffold( body center( child text('hello from flutter + back4app!'), ), ), ); } } di dasbor back4app anda, pergi ke keamanan & kunci aplikasi anda untuk menemukan id aplikasi , kunci klien , dan url server parse gantilah placeholder di atas dengan kredensial anda sendiri dengan inisialisasi ini, setiap permintaan dari aplikasi flutter anda akan diarahkan dengan aman ke instance back4app anda ingatlah bahwa kunci master tidak boleh digunakan di sisi klien aplikasi flutter anda jika anda memerlukan kunci master, simpanlah di server atau di lingkungan yang aman langkah 2 – menyiapkan database membuat model data setelah aplikasi flutter anda terhubung ke back4app, anda dapat mulai merancang skema database anda anda dapat melakukan ini secara manual dari dasbor back4app navigasikan ke bagian “database” di dasbor anda buat kelas baru (misalnya, “todo”), dan tambahkan kolom yang relevan (misalnya, judul, iscompleted) back4app juga menyediakan agen ai untuk membantu dengan pembuatan skema otomatis buka ai agent dari dasbor aplikasi anda atau menu deskripsikan model data anda dalam bahasa sederhana (misalnya, “buat aplikasi todo baru dengan skema kelas lengkap ”) biarkan ai agent membuat skema untuk anda ini menyederhanakan pengaturan arsitektur data jika anda ingin bidang dibuat secara otomatis, anda cukup mulai menyimpan objek dari aplikasi anda—parse mendukung pembuatan skema secara langsung membuat model data menggunakan ai agent jika anda memilih untuk menggunakan back4app ai agent, cukup berikan deskripsi singkat, dan itu akan membangun atau menyarankan skema untuk anda ini adalah cara yang sangat baik untuk mempercepat fase pemodelan data awal proyek flutter anda membaca dan menulis data menggunakan flutter parse sdk di bawah ini adalah contoh sederhana yang menunjukkan cara membuat dan mengambil objek menggunakan parse flutter sdk import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> createtodoitem(string title, bool iscompleted) async { final todo = parseobject('todo') set('title', title) set('iscompleted', iscompleted); final response = await todo save(); if (response success && response result != null) { print('todo saved successfully ${response result}'); } else { print('error saving todo ${response error? message}'); } } future\<list\<parseobject>?> fetchtodos() async { final querybuilder\<parseobject> querytodo = querybuilder\<parseobject>(parseobject('todo')); final response = await querytodo query(); if (response success && response results != null) { print('fetched todo items ${response results}'); return response results as list\<parseobject>; } else { print('error fetching todos ${response error? message}'); return null; } } dengan ini, anda dapat berinteraksi langsung dengan database back4app anda dari aplikasi flutter anda cukup panggil createtodoitem('feed the cat', false) atau fetchtodos() untuk menulis dan membaca data membaca dan menulis data menggunakan rest api jika anda perlu mengintegrasikan dengan layanan lain atau lebih suka pendekatan yang lebih tradisional, anda masih dapat menggunakan rest api back4app 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 menawarkan endpoint graphql mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } ini memberi anda fleksibilitas untuk membangun pendekatan apa pun yang paling cocok untuk aplikasi flutter anda bekerja dengan live queries back4app menyediakan live queries sehingga anda dapat menerima pembaruan data secara real time aktifkan live queries di dasbor back4app (pengaturan server) dan kemudian gunakan klien parse livequery flutter import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ parse server sdk flutter/live query dart'; future\<void> subscribetotodos() async { final livequery = livequery(); final query = querybuilder\<parseobject>(parseobject('todo')); subscription subscription = await livequery client subscribe(query); subscription on(livequeryevent create, (value) { print('new todo created $value'); }); subscription on(livequeryevent update, (value) { print('todo updated $value'); }); subscription on(livequeryevent delete, (value) { print('todo deleted $value'); }); } dengan langganan ini, anda dapat mendengarkan perubahan data saat terjadi ini sangat bagus untuk membangun aplikasi kolaboratif di mana banyak pengguna melihat pembaruan data secara langsung setelah hot reload dipicu, langganan anda akan tetap ada kecuali aplikasi dimulai ulang langkah 3 – menerapkan keamanan dengan acl dan clp apa itu acl dan clp? back4app menggunakan acl (daftar kontrol akses) dan clp (izin tingkat kelas) untuk membatasi siapa yang dapat membaca atau menulis data baik di tingkat objek maupun kelas lapisan ini memastikan data anda terlindungi dari akses yang tidak sah mengatur izin tingkat kelas di dasbor back4app anda, pergi ke database dan pilih kelas (misalnya, “todo”) navigasikan ke class level permissions tetapkan default (misalnya, hanya pengguna yang terautentikasi yang dapat membuat objek baru) mengonfigurasi acl di kode anda juga dapat menerapkan acl di tingkat objek dari kode flutter import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> createprivatetodo(parseuser owneruser, string title) async { final todo = parseobject('todo') set('title', title); final acl = parseacl(owner owneruser); acl setpublicreadaccess(allowed false); acl setpublicwriteaccess(allowed false); todo setacl(acl); final response = await todo save(); if (response success) { print('private todo saved '); } else { print('error ${response error? message}'); } } dengan menggabungkan clp dan acl, anda dapat memastikan bahwa hanya orang atau peran yang tepat yang dapat mengakses atau memodifikasi data tertentu langkah 4 – menulis fungsi cloud code mengapa cloud code? cloud code memungkinkan anda menjalankan logika sisi server tanpa harus mengatur server backend secara manual ini sangat cocok untuk memvalidasi data, mengintegrasikan dengan layanan eksternal, atau menegakkan aturan tertentu di backend sebagai layanan (baas) contoh fungsi berikut adalah contoh cloud function yang menghitung panjang teks // main js in your cloud code parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); anda dapat menerapkan kode ini melalui back4app cli atau di dasbor aplikasi anda di bawah cloud code penerapan menggunakan back4app cli b4a configure accountkey b4a deploy menggunakan dasbor di dasbor aplikasi anda, pergi ke cloud code > functions tempelkan kode javascript klik deploy memanggil cloud code dari flutter import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> gettextlength(string text) async { final function = parsecloudfunction('calculatetextlength'); final params = \<string, dynamic>{'text' text}; final parseresponse result = await function execute(parameters params); if (result success && result result != null) { print('text length ${result result\['length']}'); } else { print('error calling cloud code ${result error? message}'); } } pendekatan aman ini memastikan logika sensitif tetap di server, sementara aplikasi flutter anda hanya melakukan permintaan langkah 5 – mengonfigurasi autentikasi aktifkan autentikasi pengguna back4app menggunakan kelas parse user untuk menangani pendaftaran dan login pengguna secara default, parse mengurus hashing kata sandi, token sesi, dan penyimpanan yang aman import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> signupuser(string username, string password, string email) async { final user = parseuser(username, password, email); final response = await user signup(); if (response success) { print('user signed up successfully!'); } else { print('sign up error ${response error? message}'); } } future\<void> loginuser(string username, string password) async { final user = parseuser(username, password, null); final response = await user login(); if (response success) { print('user logged in ${response result}'); } else { print('login error ${response error? message}'); } } login sosial back4app mendukung integrasi dengan google, apple, facebook, dan lainnya setiap penyedia memiliki pendekatan spesifik dan mungkin memerlukan pustaka tambahan (misalnya, untuk login facebook atau google) anda kemudian dapat memanggil await parseuser loginwith('facebook', \<string, dynamic>{ 'id' 'user facebook id', 'access token' 'facebook access token', 'expiration date' 'date' }); sesuaikan parameter sesuai dengan dokumentasi penyedia langkah 6 – menangani penyimpanan file mengatur penyimpanan file anda dapat menyimpan gambar, dokumen, atau file media lainnya menggunakan parsefile back4app mengamankan file file ini dan menyediakan url untuk pengambilan import 'dart\ io'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ image picker/image picker dart'; future\<void> uploadimage() async { final picker = imagepicker(); final xfile? pickedfile = await picker pickimage(source imagesource gallery); if (pickedfile == null) { print('no file selected '); return; } final parsefile = parsefile(file(pickedfile path)); final response = await parsefile save(); if (response success) { print('file saved ${parsefile url}'); } else { print('error uploading file ${response error? message}'); } } pertimbangan keamanan anda dapat menentukan siapa yang memiliki akses ke file (publik, pengguna terautentikasi, atau terbatas) dengan menggabungkan keamanan tingkat file dengan acl ini memastikan data file anda tetap aman langkah 7 – verifikasi email dan reset kata sandi mengapa mereka penting verifikasi email mengonfirmasi bahwa pengguna memiliki alamat email yang diberikan, sementara alur reset kata sandi meningkatkan pengalaman pengguna dan keamanan konfigurasi dasbor pergi ke pengaturan email aplikasi anda di dasbor back4app aktifkan verifikasi email dan reset kata sandi konfigurasikan template email atau domain kustom anda jika diperlukan pengaturan ini memungkinkan aplikasi flutter anda secara otomatis menangani pemeriksaan kepemilikan pengguna dan pemulihan kata sandi implementasi di flutter final user = parseuser('testuser', 'password123', 'test\@example com'); final signupresponse = await user signup(); if (signupresponse success) { // the user will receive a verification email } // for password reset final resetresponse = await parseuser requestpasswordreset('test\@example com'); if (resetresponse success) { print('reset email sent successfully!'); } langkah 8 – menjadwalkan tugas dengan cloud jobs cloud jobs anda mungkin ingin menjadwalkan tugas berulang (seperti membersihkan data lama atau mengirim email berkala) cloud jobs memungkinkan anda melakukan hal itu // 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); const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; }); terapkan kode ini, lalu pergi ke pengaturan aplikasi > pengaturan server > pekerjaan latar belakang di dasbor back4app anda untuk menjadwalkannya langkah 9 – mengintegrasikan webhook apa itu webhook? webhook memungkinkan aplikasi back4app anda mengirim permintaan http ke layanan eksternal ketika peristiwa tertentu terjadi (seperti menyimpan objek baru) ini ideal untuk mengintegrasikan dengan alat pihak ketiga pergi ke lainnya > webhooks di dasbor back4app anda dan tambahkan webhook atur endpoint dan pemicu anda (misalnya, “rekaman baru di todo”) anda juga dapat mengonfigurasi webhook secara manual di cloud code dengan membuat permintaan http dalam pemicu beforesave atau aftersave langkah 10 – menjelajahi panel admin back4app di mana menemukannya aplikasi back4app admin adalah antarmuka yang ramah pengguna yang memungkinkan anggota tim non teknis untuk mengelola data (operasi crud, tugas data, dll ) tanpa perlu membuka dasbor parse pergi ke dasbor aplikasi > lainnya > aplikasi admin klik aktifkan aplikasi admin anda akan membuat pengguna admin, memilih subdomain, dan masuk dengan kredensial yang baru dibuat aplikasi admin membantu dengan tinjauan dan modifikasi data yang cepat kesimpulan dalam tutorial ini, anda belajar cara membangun backend untuk flutter menggunakan back4app dan parse flutter sdk anda membuat kelas, menyimpan data, mengonfigurasi kueri waktu nyata, menerapkan keamanan dengan acl dan clp, menulis cloud functions, menjadwalkan tugas, mengintegrasikan webhook, dan menjelajahi panel admin back4app pendekatan ini mempercepat pengembangan dengan memungkinkan anda fokus pada sisi klien flutter anda daripada konfigurasi server yang kompleks string akhir yang anda miliki sekarang adalah backend yang berfungsi dan aman yang memanfaatkan api restful, otentikasi pengguna, dan manipulasi data yang mudah anda dapat mengintegrasikan fitur yang lebih canggih kapan saja—seperti cloud functions tambahan, panggilan api eksternal, atau peran kustom langkah selanjutnya siap untuk produksi terapkan caching canggih, analitik, atau kontrol akses berbasis peran perluas aplikasi anda integrasikan layanan pihak ketiga atau bangun lebih banyak cloud functions untuk logika bisnis yang lebih spesifik konsultasikan dokumentasi back4app jelajahi keamanan canggih, penyetelan kinerja, analisis log, dan lainnya pelajari lebih lanjut lihat tutorial untuk aplikasi obrolan langsung, layanan berbasis lokasi, atau struktur data yang lebih kompleks gabungkan mereka dengan proyek flutter anda untuk kasus penggunaan dunia nyata dengan terus menyempurnakan pengaturan ini, anda akan mengubah aplikasi flutter anda menjadi solusi yang kuat dan dapat diskalakan yang dibangun di atas layanan backend yang kokoh selamat coding!