Membangun Aplikasi Jaringan Sosial dengan Flutter dan Back4App

pendahuluan membuat aplikasi jejaring sosial bisa menjadi tugas yang kompleks, tetapi dengan flutter dan back4app, anda dapat memperlancar proses pengembangan tutorial ini akan memandu anda melalui pembuatan aplikasi jejaring sosial yang lengkap dengan fitur fitur seperti otentikasi pengguna, manajemen profil, umpan berita, koneksi teman, pesan, dan notifikasi pada akhir tutorial ini, anda akan memiliki aplikasi jejaring sosial yang fungsional dengan fitur fitur berikut otentikasi pengguna proses pendaftaran dan login yang aman profil pengguna profil yang dapat diedit dengan informasi pengguna umpan berita menampilkan pos dari teman dan pengguna koneksi teman kemampuan untuk mengirim dan menerima permintaan pertemanan pesan obrolan waktu nyata antara pengguna notifikasi notifikasi push untuk permintaan pertemanan, pesan, dan interaksi pos prasyarat untuk mengikuti tutorial ini, anda akan membutuhkan flutter sdk terinstal di mesin anda ikuti panduan instalasi flutter resmi https //flutter dev/docs/get started/install untuk sistem operasi anda pengetahuan dasar tentang flutter dan dart jika anda baru mengenal flutter, tinjau dokumentasi flutter https //flutter dev/docs untuk membiasakan diri dengan dasar dasarnya sebuah ide atau editor teks seperti visual studio code atau android studio sebuah akun back4app daftar untuk akun gratis di back4app https //www back4app com/ parse server sdk untuk flutter ditambahkan ke proyek anda pelajari cara mengaturnya dengan mengikuti panduan sdk flutter back4app https //www back4app com/docs/flutter/parse flutter sdk langkah 1 – menyiapkan proyek flutter 1 1 buat proyek flutter baru buka terminal anda dan jalankan flutter create social app navigasi ke direktori proyek cd social app 1 2 tambahkan dependensi buka pubspec yaml dan tambahkan dependensi berikut dependencies flutter sdk flutter parse server sdk flutter ^4 0 1 provider ^6 0 0 image picker ^0 8 4+6 cached network image ^3 2 0 firebase messaging ^11 2 8 uuid ^3 0 6 jalankan flutter pub get untuk menginstal paket catatan kami menggunakan parse server sdk flutter untuk integrasi back4app provider untuk manajemen status image picker untuk memilih gambar profil dan pos cached network image untuk pemuatan gambar yang efisien firebase messaging untuk notifikasi push uuid untuk menghasilkan id unik langkah 2 – menyiapkan back4app 2 1 buat aplikasi back4app baru masuk ke dasbor back4app https //dashboard back4app com/ klik pada "buat aplikasi baru" masukkan nama untuk aplikasi anda, misalnya, "socialapp" , dan klik "buat" 2 2 siapkan model data kita perlu membuat beberapa kelas di back4app pengguna kelas bawaan untuk otentikasi pengguna profil menyimpan informasi profil pengguna pos menyimpan pos pengguna permintaanteman mengelola permintaan teman antara pengguna pesan menyimpan pesan antara pengguna 2 2 1 kelas profil navigasi ke "database" bagian klik pada "buat kelas" di modal pilih "kustom" masukkan "profil" sebagai nama kelas klik "buat kelas" tambahkan kolom berikut user ketik pointer< user> username ketik string fullname ketik string bio ketik string profilepicture ketik file 2 2 2 kelas post buat sebuah "post" kelas dengan kolom kolom berikut user tipe pointer< user> content tipe string image tipe file createdat tipe date 2 2 3 kelas friendrequest buat sebuah "friendrequest" kelas dengan kolom kolom berikut fromuser tipe pointer< user> touser tipe pointer< user> status tipe string (nilai "pending", "accepted", "rejected") 2 2 4 kelas message buat sebuah "message" kelas dengan kolom kolom berikut fromuser tipe pointer< user> touser tipe pointer< user> content tipe string createdat tipe date 2 3 dapatkan kredensial aplikasi navigasikan ke pengaturan aplikasi > keamanan & kunci catat id aplikasi dan kunci klien anda langkah 3 – menginisialisasi parse di aplikasi flutter anda buka lib/main dart dan ubah seperti berikut import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ provider/provider dart'; import 'services/auth service dart'; import 'screens/login screen dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return changenotifierprovider\<authservice>( create ( ) => authservice(), child materialapp( title 'social app', theme themedata( primaryswatch colors blue, ), home loginscreen(), ), ); } } ganti 'your application id' dan 'your client key' dengan kredensial back4app anda kami menggunakan changenotifierprovider untuk mengelola status otentikasi langkah 4 – mengimplementasikan otentikasi pengguna 4 1 buat layanan autentikasi buat direktori baru bernama services di bawah lib dan tambahkan file bernama auth service dart // lib/services/auth service dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; class authservice with changenotifier { parseuser? user; future\<bool> signup(string username, string password, string email) async { user = parseuser createuser(username, password, email); final response = await user! signup(); if (response success) { notifylisteners(); return true; } else { user = null; return false; } } future\<bool> login(string username, string password) async { user = parseuser(username, password, null); final response = await user! login(); if (response success) { notifylisteners(); return true; } else { user = null; return false; } } future\<void> logout() async { if (user != null) { await user! logout(); user = null; notifylisteners(); } } bool get isauthenticated => user != null; } 4 2 buat layar login dan pendaftaran buat direktori bernama screens di bawah lib dan tambahkan login screen dart dan signup screen dart 4 2 1 layar masuk // lib/screens/login screen dart import 'package\ flutter/material dart'; import 'package\ provider/provider dart'; import ' /services/auth service dart'; import 'signup screen dart'; import 'home screen dart'; class loginscreen extends statefulwidget { @override loginscreenstate createstate() => loginscreenstate(); } class loginscreenstate extends state\<loginscreen> { final texteditingcontroller usernamecontroller = texteditingcontroller(); final texteditingcontroller passwordcontroller = texteditingcontroller(); void login() async { final authservice = provider of\<authservice>(context, listen false); bool success = await authservice login( usernamecontroller text trim(), passwordcontroller text trim(), ); if (success) { navigator pushreplacement( context, materialpageroute(builder (context) => homescreen()), ); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('login failed'))); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('social app login'), ), body padding( padding const edgeinsets all(16), child column( children \[ textfield( controller usernamecontroller, decoration inputdecoration(labeltext 'username'), ), textfield( controller passwordcontroller, decoration inputdecoration(labeltext 'password'), obscuretext true, ), sizedbox(height 20), elevatedbutton(onpressed login, child text('login')), textbutton( onpressed () { navigator push( context, materialpageroute(builder ( ) => signupscreen()), ); }, child text('don\\'t have an account? sign up'), ) ], ), ), ); } } 4 2 2 layar pendaftaran // lib/screens/signup screen dart import 'package\ flutter/material dart'; import 'package\ provider/provider dart'; import ' /services/auth service dart'; import 'home screen dart'; class signupscreen extends statefulwidget { @override signupscreenstate createstate() => signupscreenstate(); } class signupscreenstate extends state\<signupscreen> { final texteditingcontroller usernamecontroller = texteditingcontroller(); final texteditingcontroller passwordcontroller = texteditingcontroller(); final texteditingcontroller emailcontroller = texteditingcontroller(); void signup() async { final authservice = provider of\<authservice>(context, listen false); bool success = await authservice signup( usernamecontroller text trim(), passwordcontroller text trim(), emailcontroller text trim(), ); if (success) { navigator pushreplacement( context, materialpageroute(builder (context) => homescreen()), ); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('signup failed'))); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('social app signup'), ), body padding( padding const edgeinsets all(16), child column( children \[ textfield( controller usernamecontroller, decoration inputdecoration(labeltext 'username'), ), textfield( controller emailcontroller, decoration inputdecoration(labeltext 'email'), ), textfield( controller passwordcontroller, decoration inputdecoration(labeltext 'password'), obscuretext true, ), sizedbox(height 20), elevatedbutton(onpressed signup, child text('sign up')), ], ), ), ); } } langkah 5 – menyiapkan profil pengguna 5 1 buat layanan profil tambahkan file bernama profile service dart di bawah lib/services/ // lib/services/profile service dart import 'package\ parse server sdk flutter/parse server sdk dart'; import ' /models/profile dart'; class profileservice { future\<void> createprofile(parseuser user) async { final profile = parseobject('profile') set('user', user) set('username', user username); await profile save(); } future\<profile?> getprofile(parseuser user) async { final query = querybuilder\<parseobject>(parseobject('profile')) whereequalto('user', user); final response = await query query(); if (response success && response results != null) { final profileobject = response results! first; return profile fromparseobject(profileobject); } else { return null; } } future\<void> updateprofile(profile profile) async { final profileobject = parseobject('profile') objectid = profile id set('fullname', profile fullname) set('bio', profile bio); await profileobject save(); } } 5 2 buat model profil tambahkan file bernama profile dart di bawah lib/models/ // lib/models/profile dart import 'package\ parse server sdk flutter/parse server sdk dart'; class profile { string id; string username; string? fullname; string? bio; parsefilebase? profilepicture; profile({ required this id, required this username, this fullname, this bio, this profilepicture, }); factory profile fromparseobject(parseobject object) { return profile( id object objectid!, username object get\<string>('username')!, fullname object get\<string>('fullname'), bio object get\<string>('bio'), profilepicture object get\<parsefilebase>('profilepicture'), ); } } 5 3 buat layar profil tambahkan file bernama profile screen dart di bawah lib/screens/ // lib/screens/profile screen dart import 'package\ flutter/material dart'; import 'package\ provider/provider dart'; import ' /services/auth service dart'; import ' /services/profile service dart'; import ' /models/profile dart'; class profilescreen extends statefulwidget { @override profilescreenstate createstate() => profilescreenstate(); } class profilescreenstate extends state\<profilescreen> { final profileservice profileservice = profileservice(); profile? profile; final texteditingcontroller fullnamecontroller = texteditingcontroller(); final texteditingcontroller biocontroller = texteditingcontroller(); void loadprofile() async { final authservice = provider of\<authservice>(context, listen false); final user = authservice user!; profile? fetchedprofile = await profileservice getprofile(user); if (fetchedprofile == null) { await profileservice createprofile(user); fetchedprofile = await profileservice getprofile(user); } setstate(() { profile = fetchedprofile; fullnamecontroller text = profile? fullname ?? ''; biocontroller text = profile? bio ?? ''; }); } void saveprofile() async { if (profile != null) { profile! fullname = fullnamecontroller text trim(); profile! bio = biocontroller text trim(); await profileservice updateprofile(profile!); scaffoldmessenger of(context) showsnackbar(snackbar(content text('profile updated'))); } } @override void initstate() { super initstate(); loadprofile(); } @override widget build(buildcontext context) { if (profile == null) { return scaffold( appbar appbar(title text('profile')), body center(child circularprogressindicator()), ); } return scaffold( appbar appbar(title text(profile! username)), body padding( padding const edgeinsets all(16), child column( children \[ // add profile picture handling here textfield( controller fullnamecontroller, decoration inputdecoration(labeltext 'full name'), ), textfield( controller biocontroller, decoration inputdecoration(labeltext 'bio'), ), sizedbox(height 20), elevatedbutton(onpressed saveprofile, child text('save')), ], ), ), ); } } langkah 6 – mengimplementasikan berita 6 1 buat layanan post tambahkan file bernama post service dart di bawah lib/services/ // lib/services/post service dart import 'package\ parse server sdk flutter/parse server sdk dart'; import ' /models/post dart'; class postservice { future\<void> createpost(string content, parseuser user) async { final post = parseobject('post') set('user', user) set('content', content); await post save(); } future\<list\<post>> getposts(parseuser user) async { final query = querybuilder\<parseobject>(parseobject('post')) orderbydescending('createdat') includeobject(\['user']); final response = await query query(); if (response success && response results != null) { return response results! map((e) => post fromparseobject(e)) tolist(); } else { return \[]; } } } 6 2 buat model post tambahkan file bernama post dart di bawah lib/models/ // lib/models/post dart import 'package\ parse server sdk flutter/parse server sdk dart'; class post { string id; string content; parseuser user; datetime createdat; post({ required this id, required this content, required this user, required this createdat, }); factory post fromparseobject(parseobject object) { return post( id object objectid!, content object get\<string>('content')!, user object get\<parseuser>('user')!, createdat object createdat!, ); } } 6 3 buat layar utama modifikasi home screen dart di bawah lib/screens/ // lib/screens/home screen dart import 'package\ flutter/material dart'; import 'package\ provider/provider dart'; import ' /services/auth service dart'; import ' /services/post service dart'; import ' /models/post dart'; import 'profile screen dart'; class homescreen extends statefulwidget { @override homescreenstate createstate() => homescreenstate(); } class homescreenstate extends state\<homescreen> { final postservice postservice = postservice(); list\<post> posts = \[]; final texteditingcontroller postcontroller = texteditingcontroller(); void loadposts() async { final authservice = provider of\<authservice>(context, listen false); final user = authservice user!; list\<post> fetchedposts = await postservice getposts(user); setstate(() { posts = fetchedposts; }); } void createpost() async { final authservice = provider of\<authservice>(context, listen false); final user = authservice user!; await postservice createpost( postcontroller text trim(), user); postcontroller clear(); loadposts(); } @override void initstate() { super initstate(); loadposts(); } @override widget build(buildcontext context) { final authservice = provider of\<authservice>(context); return scaffold( appbar appbar( title text('social app'), actions \[ iconbutton( icon icon(icons person), onpressed () { navigator push( context, materialpageroute(builder ( ) => profilescreen()), ); }, ), iconbutton( icon icon(icons logout), onpressed () async { await authservice logout(); navigator pushreplacementnamed(context, '/'); }, ), ], ), body column( children \[ textfield( controller postcontroller, decoration inputdecoration( hinttext 'what\\'s on your mind?', contentpadding edgeinsets all(16), ), ), elevatedbutton(onpressed createpost, child text('post')), expanded( child listview\ builder( itemcount posts length, itembuilder (context, index) { final post = posts\[index]; return listtile( title text(post user username ?? 'unknown'), subtitle text(post content), trailing text( post createdat tolocal() tostring(), style textstyle(fontsize 12), ), ); }, ), ), ], ), ); } } langkah 7 – menambahkan koneksi teman dalam langkah ini, kami akan mengimplementasikan koneksi teman antara pengguna pengguna dapat mengirim permintaan pertemanan, menerima atau menolak permintaan tersebut, dan melihat daftar teman mereka kami akan memodifikasi model data, membuat layanan, dan memperbarui antarmuka pengguna untuk mendukung fungsionalitas ini 7 1 perbarui model data kami telah membuat kelas friendrequest di back4app dengan kolom kolom berikut fromuser pointer ke user touser pointer ke user status string (nilai "pending", "accepted", "rejected") selain itu, kita perlu melacak daftar teman pengguna kita dapat melakukan ini dengan menambahkan sebuah friends hubungan di dalam user kelas 7 1 1 tambahkan hubungan teman ke kelas pengguna di back4app, pergi ke user kelas klik pada tombol "+" untuk menambahkan kolom baru beri nama kolom "friends" dan atur tipe menjadi relation < user> 7 2 buat layanan permintaan teman buat file bernama friend service dart di bawah lib/services/ // lib/services/friend service dart import 'package\ parse server sdk flutter/parse server sdk dart'; class friendservice { future\<bool> sendfriendrequest(parseuser fromuser, parseuser touser) async { final friendrequest = parseobject('friendrequest') set('fromuser', fromuser) set('touser', touser) set('status', 'pending'); final response = await friendrequest save(); return response success; } future\<list\<parseobject>> getpendingrequests(parseuser user) async { final query = querybuilder\<parseobject>(parseobject('friendrequest')) whereequalto('touser', user) whereequalto('status', 'pending') includeobject(\['fromuser']); final response = await query query(); if (response success && response results != null) { return response results!; } else { return \[]; } } future\<bool> acceptfriendrequest(parseobject friendrequest) async { friendrequest set('status', 'accepted'); final response = await friendrequest save(); if (response success) { // add each user to the other's friends relation final fromuser = friendrequest get\<parseuser>('fromuser')!; final touser = friendrequest get\<parseuser>('touser')!; fromuser setadd('friends', \[touser]); touser setadd('friends', \[fromuser]); await fromuser save(); await touser save(); return true; } return false; } future\<bool> rejectfriendrequest(parseobject friendrequest) async { friendrequest set('status', 'rejected'); final response = await friendrequest save(); return response success; } future\<list\<parseuser>> getfriends(parseuser user) async { final relation = user getrelation\<parseuser>('friends'); final query = relation query(); final response = await query query(); if (response success && response results != null) { return response results! cast\<parseuser>(); } else { return \[]; } } } 7 3 perbarui ui 7 3 1 tambahkan layar pencarian pengguna buat file bernama search users screen dart di bawah lib/screens/ // lib/screens/search users screen dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ provider/provider dart'; import ' /services/auth service dart'; import ' /services/friend service dart'; class searchusersscreen extends statefulwidget { @override searchusersscreenstate createstate() => searchusersscreenstate(); } class searchusersscreenstate extends state\<searchusersscreen> { final texteditingcontroller searchcontroller = texteditingcontroller(); list\<parseuser> users = \[]; final friendservice friendservice = friendservice(); void searchusers() async { final query = querybuilder\<parseuser>(parseuser forquery()) wherecontains('username', searchcontroller text trim()) wherenotequalto('objectid', provider of\<authservice>(context, listen false) user! objectid); final response = await query query(); if (response success && response results != null) { setstate(() { users = response results! cast\<parseuser>(); }); } else { setstate(() { users = \[]; }); } } void sendfriendrequest(parseuser touser) async { final fromuser = provider of\<authservice>(context, listen false) user!; bool success = await friendservice sendfriendrequest(fromuser, touser); if (success) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('friend request sent'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('failed to send friend request'))); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('search users'), ), body column( children \[ padding( padding const edgeinsets all(16 0), child textfield( controller searchcontroller, decoration inputdecoration( hinttext 'search by username', suffixicon iconbutton( icon icon(icons search), onpressed searchusers, ), ), ), ), expanded( child listview\ builder( itemcount users length, itembuilder (context, index) { final user = users\[index]; return listtile( title text(user username ?? 'unknown'), trailing elevatedbutton( onpressed () => sendfriendrequest(user), child text('add friend'), ), ); }, ), ), ], ), ); } } 7 3 2 tambah layar permintaan teman buat file bernama friend requests screen dart di bawah lib/screens/ // lib/screens/friend requests screen dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ provider/provider dart'; import ' /services/auth service dart'; import ' /services/friend service dart'; class friendrequestsscreen extends statefulwidget { @override friendrequestsscreenstate createstate() => friendrequestsscreenstate(); } class friendrequestsscreenstate extends state\<friendrequestsscreen> { final friendservice friendservice = friendservice(); list\<parseobject> friendrequests = \[]; void loadfriendrequests() async { final user = provider of\<authservice>(context, listen false) user!; final requests = await friendservice getpendingrequests(user); setstate(() { friendrequests = requests; }); } void acceptrequest(parseobject request) async { bool success = await friendservice acceptfriendrequest(request); if (success) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('friend request accepted'))); loadfriendrequests(); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('failed to accept friend request'))); } } void rejectrequest(parseobject request) async { bool success = await friendservice rejectfriendrequest(request); if (success) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('friend request rejected'))); loadfriendrequests(); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('failed to reject friend request'))); } } @override void initstate() { super initstate(); loadfriendrequests(); } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('friend requests'), ), body listview\ builder( itemcount friendrequests length, itembuilder (context, index) { final request = friendrequests\[index]; final fromuser = request get\<parseuser>('fromuser')!; return listtile( title text(fromuser username ?? 'unknown'), subtitle text('sent you a friend request'), trailing row( mainaxissize mainaxissize min, children \[ iconbutton( icon icon(icons check, color colors green), onpressed () => acceptrequest(request), ), iconbutton( icon icon(icons close, color colors red), onpressed () => rejectrequest(request), ), ], ), ); }, ), ); } } 7 3 3 perbarui navigasi layar utama di home screen dart , tambahkan navigasi ke layar pencarian pengguna dan permintaan teman // inside appbar actions iconbutton( icon icon(icons person add), onpressed () { navigator push( context, materialpageroute(builder ( ) => searchusersscreen()), ); }, ), iconbutton( icon icon(icons notifications), onpressed () { navigator push( context, materialpageroute(builder ( ) => friendrequestsscreen()), ); }, ), 7 4 memperbarui berita untuk menampilkan postingan teman modifikasi getposts metode di post service dart untuk mengambil postingan dari pengguna dan teman teman mereka // lib/services/post service dart future\<list\<post>> getposts(parseuser user) async { // get friends final relation = user getrelation\<parseuser>('friends'); final friendsquery = relation query(); final friendsresponse = await friendsquery query(); list\<string> userids = \[user objectid!]; if (friendsresponse success && friendsresponse results != null) { final friends = friendsresponse results! cast\<parseuser>(); userids addall(friends map((friend) => friend objectid!)); } // fetch posts from user and friends final query = querybuilder\<parseobject>(parseobject('post')) wherecontainedin('user', userids map((id) => parseuser(null, null, null) objectid = id) tolist()) orderbydescending('createdat') includeobject(\['user']); final response = await query query(); if (response success && response results != null) { return response results! map((e) => post fromparseobject(e)) tolist(); } else { return \[]; } } langkah 8 – mengimplementasikan pesan dalam langkah ini, kita akan menambahkan pesan waktu nyata antara pengguna menggunakan live queries 8 1 aktifkan live queries di back4app di dasbor aplikasi back4app anda, pergi ke app settings > server settings di bawah server url , catat url server anda (misalnya, https //your app name back4app io ) live queries diaktifkan secara default di back4app 8 2 siapkan live queries di flutter paket parse server sdk flutter mencakup dukungan live query 8 3 buat layanan pesan buat file bernama message service dart di bawah lib/services/ // lib/services/message service dart import 'package\ parse server sdk flutter/parse server sdk dart'; import ' /models/message dart'; class messageservice { parselivelist\<message>? livemessagelist; future\<void> sendmessage(parseuser fromuser, parseuser touser, string content) async { final message = parseobject('message') set('fromuser', fromuser) set('touser', touser) set('content', content); await message save(); } future\<void> subscribetomessages(parseuser user, parseuser otheruser, function(list\<message>) onmessagesupdated) async { final querybuilder = querybuilder\<parseobject>(parseobject('message')) whereequalto('fromuser', user) whereequalto('touser', otheruser) orderbyascending('createdat') includeobject(\['fromuser', 'touser']); livemessagelist = parselivelist\<message>(querybuilder, listenonallsubitems true); livemessagelist! stream listen((event) { onmessagesupdated(livemessagelist! items); }); } future\<void> dispose() async { await livemessagelist? dispose(); } } 8 4 buat model pesan tambahkan file bernama message dart di bawah lib/models/ // lib/models/message dart import 'package\ parse server sdk flutter/parse server sdk dart'; class message extends parseobject implements parsecloneable { message() super('message'); message clone() this(); @override clone(map\<string, dynamic> map) => message clone() fromjson(map); parseuser get fromuser => get\<parseuser>('fromuser')!; parseuser get touser => get\<parseuser>('touser')!; string get content => get\<string>('content')!; } 8 5 buat layar obrolan tambahkan file bernama chat screen dart di bawah lib/screens/ // lib/screens/chat screen dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ provider/provider dart'; import ' /models/message dart'; import ' /services/auth service dart'; import ' /services/message service dart'; class chatscreen extends statefulwidget { final parseuser otheruser; chatscreen({required this otheruser}); @override chatscreenstate createstate() => chatscreenstate(); } class chatscreenstate extends state\<chatscreen> { final messageservice messageservice = messageservice(); list\<message> messages = \[]; final texteditingcontroller messagecontroller = texteditingcontroller(); void sendmessage() { final authservice = provider of\<authservice>(context, listen false); final fromuser = authservice user!; final touser = widget otheruser; messageservice sendmessage(fromuser, touser, messagecontroller text trim()); messagecontroller clear(); } void onmessagesupdated(list\<message> updatedmessages) { setstate(() { messages = updatedmessages; }); } @override void initstate() { super initstate(); final authservice = provider of\<authservice>(context, listen false); final user = authservice user!; messageservice subscribetomessages(user, widget otheruser, onmessagesupdated); } @override void dispose() { messageservice dispose(); super dispose(); } @override widget build(buildcontext context) { final authservice = provider of\<authservice>(context, listen false); final user = authservice user!; return scaffold( appbar appbar(title text(widget otheruser username ?? 'chat')), body column( children \[ expanded( child listview( children messages map((message) { bool isme = message fromuser objectid == user objectid; return listtile( title align( alignment isme ? alignment centerright alignment centerleft, child container( padding edgeinsets all(10), color isme ? colors blueaccent colors grey\[300], child text( message content, style textstyle(color isme ? colors white colors black), ), ), ), ); }) tolist(), ), ), divider(height 1), container( padding edgeinsets symmetric(horizontal 8 0), color theme of(context) cardcolor, child row( children \[ flexible( child textfield( controller messagecontroller, decoration inputdecoration collapsed(hinttext 'send a message'), ), ), iconbutton( icon icon(icons send), onpressed sendmessage, ), ], ), ) ], ), ); } } 8 6 perbarui ui untuk memulai obrolan anda dapat memulai obrolan dari daftar teman atau layar pencarian pengguna di daftar teman, saat menampilkan teman, tambahkan tombol untuk memulai obrolan // inside the listtile for a friend trailing iconbutton( icon icon(icons chat), onpressed () { navigator push( context, materialpageroute(builder ( ) => chatscreen(otheruser friend)), ); }, ), langkah 9 – menambahkan notifikasi push mengimplementasikan notifikasi push melibatkan pengaturan firebase cloud messaging (fcm) dan mengintegrasikannya dengan back4app 9 1 konfigurasi firebase cloud messaging 9 1 1 siapkan proyek firebase pergi ke firebase console https //console firebase google com/ dan buat proyek baru tambahkan aplikasi android dan/atau ios ke proyek anda untuk android, anda memerlukan nama paket (applicationid) untuk ios, anda memerlukan bundle identifier 9 1 2 unduh berkas konfigurasi untuk android unduh google services json dan tempatkan di android/app/ untuk ios unduh googleservice info plist dan tambahkan ke proyek xcode anda di bawah runner 9 2 tambahkan firebase messaging paket pastikan anda telah menambahkan firebase messaging ke pubspec yaml dependencies firebase messaging ^11 2 8 jalankan flutter pub get untuk menginstal 9 3 inisialisasi firebase di flutter modifikasi main dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ firebase core/firebase core dart'; // other imports void main() async { widgetsflutterbinding ensureinitialized(); await firebase initializeapp(); // initialize parse as before runapp(myapp()); } 9 4 konfigurasi firebase messaging buat file bernama push notification service dart di bawah lib/services/ // lib/services/push notification service dart import 'package\ firebase messaging/firebase messaging dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; class pushnotificationservice { final firebasemessaging fcm = firebasemessaging instance; future\<void> init() async { // request permissions (ios) await fcm requestpermission(); // get the token string? token = await fcm gettoken(); if (token != null) { // save the token to parse installation final installation = await parseinstallation currentinstallation(); installation set('devicetoken', token); await installation save(); } // handle foreground messages firebasemessaging onmessage listen((remotemessage message) { print('received a message in the foreground!'); // handle the message }); } } 9 5 perbarui main dart untuk menginisialisasi notifikasi push di main dart , setelah menginisialisasi parse, inisialisasi pushnotificationservice void main() async { widgetsflutterbinding ensureinitialized(); await firebase initializeapp(); // initialize parse as before // initialize push notifications pushnotificationservice pushnotificationservice = pushnotificationservice(); await pushnotificationservice init(); runapp(myapp()); } 9 6 mengirim notifikasi push dari back4app anda dapat mengirim notifikasi push menggunakan cloud code atau langsung dari server anda 9 6 1 mengirim notifikasi pada permintaan teman ketika seorang pengguna mengirim permintaan teman, anda dapat mengirim notifikasi push kepada penerima di friend service dart , modifikasi sendfriendrequest metode future\<bool> sendfriendrequest(parseuser fromuser, parseuser touser) async { // existing code to create friend request // send push notification final pushquery = querybuilder\<parseinstallation>(parseinstallation forquery()) whereequalto('user', touser); await parsepush() send( pushpayload( query pushquery, notification parsenotification( title 'new friend request', alert '${fromuser username} sent you a friend request', ), ), ); return response success; } catatan pastikan anda telah mengaitkan instalasi dengan pengguna 9 7 kaitkan instalasi dengan pengguna ketika seorang pengguna masuk, kaitkan instalasi mereka dengan akun pengguna mereka di auth service dart , setelah login berhasil future\<bool> login(string username, string password) async { user = parseuser(username, password, null); final response = await user! login(); if (response success) { // associate installation with user final installation = await parseinstallation currentinstallation(); installation set('user', user); await installation save(); notifylisteners(); return true; } else { user = null; return false; } } catatan pemberitahuan push memerlukan pengaturan tambahan di sisi klien dan server anda perlu menangani berbagai skenario, seperti pemberitahuan latar belakang dan izin pengguna, yang berada di luar cakupan tutorial ini kesimpulan selamat! anda telah membangun fondasi aplikasi jejaring sosial menggunakan flutter dan back4app aplikasi ini mencakup otentikasi pengguna, manajemen profil, dan fitur umpan berita meskipun implementasi koneksi teman penuh, pengiriman pesan, dan pemberitahuan berada di luar cakupan tutorial ini, anda sekarang memiliki struktur yang diperlukan untuk terus mengembangkan aplikasi anda langkah selanjutnya koneksi teman implementasikan fungsionalitas permintaan teman pengiriman pesan tambahkan fitur obrolan waktu nyata menggunakan live queries pemberitahuan integrasikan pemberitahuan push untuk keterlibatan pengguna peningkatan ui tingkatkan antarmuka pengguna dan pengalaman pengguna keamanan pastikan keamanan data dan privasi dengan mengatur acl yang sesuai di back4app sumber daya tambahan dokumentasi back4app https //www back4app com/docs panduan parse sdk untuk flutter https //docs parseplatform org/flutter/guide/ dokumentasi resmi flutter https //flutter dev/docs dokumentasi paket provider https //pub dev/packages/provider selamat berkoding!