Construyendo una aplicación de redes sociales con Flutter y Back4App

introducción crear una aplicación de redes sociales puede ser una tarea compleja, pero con flutter y back4app, puedes agilizar el proceso de desarrollo este tutorial te guiará a través de la construcción de una aplicación de redes sociales completa que incluye autenticación de usuarios, gestión de perfiles, feeds de noticias, conexiones de amigos, mensajería y notificaciones al final de este tutorial, tendrás una aplicación de redes sociales funcional con las siguientes características autenticación de usuarios procesos de registro e inicio de sesión seguros perfiles de usuarios perfiles editables con información del usuario feeds de noticias mostrar publicaciones de amigos y del usuario conexiones de amigos capacidad para enviar y aceptar solicitudes de amistad mensajería chat en tiempo real entre usuarios notificaciones notificaciones push para solicitudes de amistad, mensajes e interacciones en publicaciones requisitos previos para seguir este tutorial, necesitarás flutter sdk instalado en tu máquina sigue la guía oficial de instalación de flutter https //flutter dev/docs/get started/install para tu sistema operativo conocimientos básicos de flutter y dart si eres nuevo en flutter, revisa la documentación de flutter https //flutter dev/docs para familiarizarte con los conceptos básicos un ide o editor de texto como visual studio code o android studio una cuenta de back4app regístrate para obtener una cuenta gratuita en back4app https //www back4app com/ parse server sdk para flutter agregado a tu proyecto aprende cómo configurarlo siguiendo la guía del sdk de flutter de back4app https //www back4app com/docs/flutter/parse flutter sdk paso 1 – configuración del proyecto flutter 1 1 crear un nuevo proyecto flutter abre tu terminal y ejecuta flutter create social app navega al directorio del proyecto cd social app 1 2 agregar dependencias abre pubspec yaml y agrega las siguientes dependencias 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 ejecuta flutter pub get para instalar los paquetes nota estamos usando parse server sdk flutter para la integración con back4app provider para la gestión del estado image picker para seleccionar imágenes de perfil y publicaciones cached network image para una carga eficiente de imágenes firebase messaging para notificaciones push uuid para generar ids únicos paso 2 – configuración de back4app 2 1 crear una nueva aplicación de back4app inicia sesión en tu panel de back4app https //dashboard back4app com/ haz clic en "crear nueva aplicación" ingresa un nombre para tu aplicación, por ejemplo, "socialapp" , y haz clic en "crear" 2 2 configurar los modelos de datos necesitaremos crear varias clases en back4app usuario clase incorporada para la autenticación de usuarios perfil almacena información del perfil del usuario publicación almacena publicaciones de usuarios solicituddeamistad gestiona solicitudes de amistad entre usuarios mensaje almacena mensajes entre usuarios 2 2 1 clase de perfil navegar a la "base de datos" sección haga clic en "crear una clase" en el modal seleccione "personalizado" ingrese "perfil" como el nombre de la clase haga clic en "crear clase" agregue las siguientes columnas usuario escriba pointer< user> nombredeusuario escriba string nombrecompleto escriba string biografía escriba string fotodeperfil escriba file 2 2 2 clase de publicación crea un "post" clase con las siguientes columnas usuario tipo pointer< user> contenido tipo string imagen tipo file creadoen tipo date 2 2 3 clase friendrequest crea un "friendrequest" clase con las siguientes columnas deusuario tipo pointer< user> ausuario tipo pointer< user> estado tipo string (valores "pendiente", "aceptado", "rechazado") 2 2 4 clase message crea un "message" clase con las siguientes columnas deusuario tipo pointer< user> ausuario tipo pointer< user> contenido tipo string creadoen tipo date 2 3 obtener credenciales de la aplicación navega a configuración de la aplicación > seguridad y claves anota tu id de aplicación y clave de cliente paso 3 – inicializando parse en tu aplicación flutter abre lib/main dart y modifícalo de la siguiente manera 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(), ), ); } } reemplaza 'your application id' y 'your client key' con tus credenciales de back4app estamos usando changenotifierprovider para gestionar el estado de autenticación paso 4 – implementando la autenticación de usuarios 4 1 crear el servicio de autenticación crea un nuevo directorio llamado services bajo lib y añade un archivo llamado 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 crear las pantallas de inicio de sesión y registro crea un directorio llamado screens bajo lib y añade login screen dart y signup screen dart 4 2 1 pantalla de inicio de sesión // 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 pantalla de registro // 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')), ], ), ), ); } } paso 5 – configuración de perfiles de usuario 5 1 crear servicio de perfil agrega un archivo llamado profile service dart bajo 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 crear modelo de perfil agrega un archivo llamado profile dart bajo 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 crear pantalla de perfil agrega un archivo llamado profile screen dart bajo 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')), ], ), ), ); } } paso 6 – implementando fuentes de noticias 6 1 crear servicio de publicación agrega un archivo llamado post service dart en 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 crear modelo de publicación agrega un archivo llamado post dart en 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 crear pantalla de inicio modificar home screen dart bajo 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), ), ); }, ), ), ], ), ); } } paso 7 – agregando conexiones de amigos en este paso, implementaremos conexiones de amigos entre usuarios los usuarios pueden enviar solicitudes de amistad, aceptarlas o rechazarlas, y ver su lista de amigos modificaremos los modelos de datos, crearemos servicios y actualizaremos la interfaz de usuario para soportar esta funcionalidad 7 1 actualizar el modelo de datos ya hemos creado la friendrequest clase en back4app con las siguientes columnas fromuser puntero a user touser puntero a user status cadena (valores "pendiente", "aceptado", "rechazado") además, necesitamos rastrear la lista de amigos de un usuario podemos hacer esto agregando una friends relación en la user clase 7 1 1 agregar relación de amigos a la clase de usuario en back4app, ve a la user clase haz clic en el "+" botón para agregar una nueva columna nombra la columna "friends" y establece el tipo en relation < user> 7 2 crear servicio de solicitud de amistad crea un archivo llamado friend service dart en 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 actualizar la interfaz de usuario 7 3 1 agregar pantalla de búsqueda de usuarios crea un archivo llamado search users screen dart en 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 agregar pantalla de solicitudes de amistad crea un archivo llamado friend requests screen dart bajo 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 actualizar navegación de la pantalla de inicio en home screen dart , agrega navegación a las pantallas de búsqueda de usuarios y solicitudes de amistad // 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 actualizar el feed de noticias para mostrar las publicaciones de amigos modifica el getposts método en post service dart para obtener publicaciones del usuario y sus amigos // 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 \[]; } } paso 8 – implementación de mensajería en este paso, agregaremos mensajería en tiempo real entre los usuarios utilizando consultas en vivo 8 1 habilitar consultas en vivo en back4app en el panel de control de tu aplicación back4app, ve a configuración de la aplicación > configuración del servidor bajo url del servidor , anota tu url del servidor (por ejemplo, https //your app name back4app io ) las consultas en vivo están habilitadas por defecto en back4app 8 2 configurar consultas en vivo en flutter el parse server sdk flutter paquete incluye soporte para consultas en vivo 8 3 crear servicio de mensajería crea un archivo llamado message service dart bajo 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 crear modelo de mensaje agrega un archivo llamado message dart bajo 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 crear pantalla de chat agrega un archivo llamado chat screen dart bajo 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 actualizar ui para iniciar chat puedes iniciar el chat desde la lista de amigos o la pantalla de búsqueda de usuarios en la lista de amigos, al mostrar amigos, añade un botón para iniciar un chat // inside the listtile for a friend trailing iconbutton( icon icon(icons chat), onpressed () { navigator push( context, materialpageroute(builder ( ) => chatscreen(otheruser friend)), ); }, ), paso 9 – añadiendo notificaciones push implementar notificaciones push implica configurar firebase cloud messaging (fcm) e integrarlo con back4app 9 1 configurar firebase cloud messaging 9 1 1 configurar el proyecto de firebase ve a firebase console https //console firebase google com/ y crea un nuevo proyecto agrega una aplicación de android y/o ios a tu proyecto para android, necesitas el nombre del paquete (applicationid) para ios, necesitas el identificador del paquete 9 1 2 descargar archivos de configuración para android descarga google services json y colócalo en android/app/ para ios descarga googleservice info plist y agrégalo a tu proyecto de xcode bajo runner 9 2 agregar firebase messaging paquete asegúrate de haber agregado firebase messaging a tu pubspec yaml dependencies firebase messaging ^11 2 8 ejecuta flutter pub get para instalar 9 3 inicializar firebase en flutter modificar 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 configurar firebase messaging crear un archivo llamado push notification service dart bajo 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 actualizar main dart para inicializar las notificaciones push en main dart , después de inicializar parse, inicializar el 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 enviar notificaciones push desde back4app puedes enviar notificaciones push usando cloud code o directamente desde tu servidor 9 6 1 enviando notificación en solicitud de amistad cuando un usuario envía una solicitud de amistad, puedes enviar una notificación push al destinatario en friend service dart , modifica el sendfriendrequest método 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; } nota asegúrate de haber asociado la instalación con el usuario 9 7 asociar instalación con usuario cuando un usuario inicie sesión, asocia su instalación con su cuenta de usuario en auth service dart , después de un inicio de sesión exitoso 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; } } nota las notificaciones push requieren una configuración adicional tanto en el lado del cliente como en el del servidor necesitas manejar diferentes escenarios, como notificaciones en segundo plano y permisos de usuario, que están más allá del alcance de este tutorial conclusión ¡felicidades! has construido la base de una aplicación de redes sociales utilizando flutter y back4app esta aplicación incluye autenticación de usuarios, gestión de perfiles y una función de feed de noticias si bien la implementación de conexiones completas de amigos, mensajería y notificaciones está más allá del alcance de este tutorial, ahora tienes la estructura necesaria para seguir expandiendo tu aplicación próximos pasos conexiones de amigos implementar funcionalidades de solicitudes de amistad mensajería agregar funciones de chat en tiempo real utilizando live queries notificaciones integrar notificaciones push para el compromiso del usuario mejoras de ui mejorar la interfaz de usuario y la experiencia del usuario seguridad asegurar la seguridad y privacidad de los datos estableciendo acls apropiados en back4app recursos adicionales documentación de back4app https //www back4app com/docs guía de parse sdk para flutter https //docs parseplatform org/flutter/guide/ documentación oficial de flutter https //flutter dev/docs documentación del paquete provider https //pub dev/packages/provider ¡feliz codificación!