Modèles Flutter
Créer une application de réseau social avec Flutter et Back4App

54min
Introduction
Créer une application de réseau social peut être une tâche complexe, mais avec Flutter et Back4App, vous pouvez simplifier le processus de développement. Ce tutoriel vous guidera à travers la création d'une application de réseau social complète qui inclut l'authentification des utilisateurs, la gestion des profils, les fils d'actualités, les connexions d'amis, la messagerie et les notifications.
À la fin de ce tutoriel, vous aurez une application de réseau social fonctionnelle avec les fonctionnalités suivantes :
Authentification des utilisateurs: Processus d'inscription et de connexion sécurisés.
Profils d'utilisateurs: Profils modifiables avec des informations sur l'utilisateur.
Fils d'actualités: Afficher les publications des amis et de l'utilisateur.
Connexions d'amis: Possibilité d'envoyer et d'accepter des demandes d'amis.
Messagerie: Chat en temps réel entre les utilisateurs.
Notifications: Notifications push pour les demandes d'amis, les messages et les interactions sur les publications.
Prérequis
Pour suivre ce tutoriel, vous aurez besoin de :
Flutter SDK installé sur votre machine. Suivez le guide d'installation officiel de Flutter pour votre système d'exploitation.
Connaissances de base en Flutter et Dart. Si vous êtes nouveau dans Flutter, consultez la documentation Flutter pour vous familiariser avec les bases.
Un IDE ou éditeur de texte tel que Visual Studio Code ou Android Studio.
Un compte Back4App. Inscrivez-vous pour un compte gratuit sur Back4App.
Parse Server SDK pour Flutter ajouté à votre projet. Apprenez à le configurer en suivant le Guide Back4App Flutter SDK.
Étape 1 – Configuration du projet Flutter
1.1. Créer un nouveau projet Flutter
Ouvrez votre terminal et exécutez :
Bash
flutter create social_app
flutter create social_app
﻿
Accédez au répertoire du projet :
Bash
cd social_app
cd social_app
﻿
1.2. Ajouter des dépendances
Ouvrez pubspec.yaml et ajoutez les dépendances suivantes :
YAML
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
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
﻿
Exécutez flutter pub get pour installer les paquets.
Remarque: Nous utilisons :
parse_server_sdk_flutter pour l'intégration Back4App.
provider pour la gestion d'état.
image_picker pour sélectionner des images de profil et de publication.
cached_network_image pour un chargement d'images efficace.
firebase_messaging pour les notifications push.
uuid pour générer des identifiants uniques.
Étape 2 – Configuration de Back4App
2.1. Créer une nouvelle application Back4App
Connectez-vous à votre tableau de bord Back4App.
Cliquez sur "Créer une nouvelle application".
Entrez un nom pour votre application, par exemple, "SocialApp", et cliquez sur "Créer".
2.2. Configurer les modèles de données
Nous devrons créer plusieurs classes dans Back4App:
Utilisateur: Classe intégrée pour l'authentification des utilisateurs.
Profil: Stocke les informations de profil de l'utilisateur.
Publication: Stocke les publications des utilisateurs.
Demande d'ami: Gère les demandes d'amis entre les utilisateurs.
Message: Stocke les messages entre les utilisateurs.
2.2.1. Classe de Profil
Naviguez vers la "Base de données" section.
Cliquez sur "Créer une classe".
Dans la modal:
Sélectionnez "Personnalisé".
Entrez "Profil" comme nom de classe.
Cliquez sur "Créer une classe".
Ajoutez les colonnes suivantes:
utilisateur: Type Pointer<_User>
nom d'utilisateur: Type String
nomComplet: Type String
bio: Type String
photoDeProfil: Type Fichier
2.2.2. Classe de Post
Créer un "Post" classe avec les colonnes suivantes :
utilisateur: Type Pointer<_User>
contenu: Type String
image: Type File
crééÀ: Type Date
2.2.3. Classe FriendRequest
Créer un "FriendRequest" classe avec les colonnes suivantes :
deUtilisateur: Type Pointer<_User>
àUtilisateur: Type Pointer<_User>
statut: Type String (Valeurs : "en attente", "accepté", "rejeté")
2.2.4. Classe Message
Créer un "Message" classe avec les colonnes suivantes :
deUtilisateur: Type Pointer<_User>
àUtilisateur: Type Pointer<_User>
contenu: Type String
crééÀ: Type Date
2.3. Obtenir les identifiants de l'application
Naviguer vers Paramètres de l'application > Sécurité et clés.
Notez votre ID d'application et Clé client.
Étape 3 – Initialisation de Parse dans votre application Flutter
Ouvrez lib/main.dart et modifiez-le comme suit :
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 '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(),
      ),
    );
  }
}
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(),
      ),
    );
  }
}
﻿
Remplacez 'YOUR_APPLICATION_ID' et 'YOUR_CLIENT_KEY' par vos identifiants Back4App.
Nous utilisons ChangeNotifierProvider pour gérer l'état d'authentification.
Étape 4 – Mise en œuvre de l'authentification des utilisateurs
4.1. Créer le service d'authentification
Créez un nouveau répertoire appelé services sous lib et ajoutez un fichier nommé auth_service.dart:
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;
}
// 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. Créer les écrans de connexion et d'inscription
Créez un répertoire appelé screens sous lib et ajoutez login_screen.dart et signup_screen.dart.
4.2.1. Écran de connexion
Dart
// 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'),
            )
          ],
        ),
      ),
    );
  }
}
// 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. Écran d’inscription
Dart
// 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')),
          ],
        ),
      ),
    );
  }
}
// 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')),
          ],
        ),
      ),
    );
  }
}
﻿
Étape 5 – Configuration des profils utilisateurs
5.1. Créer le service de profil
Ajoutez un fichier nommé profile_service.dart sous lib/services/:
Dart
// 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();
  }
}
// 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. Créer le modèle de profil
Ajoutez un fichier nommé profile.dart sous lib/models/:
Dart
// 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'),
    );
  }
}
// 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. Créer l'écran de profil
Ajoutez un fichier nommé profile_screen.dart sous lib/screens/:
Dart
// 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')),
          ],
        ),
      ),
    );
  }
}
// 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')),
          ],
        ),
      ),
    );
  }
}
﻿
Étape 6 – Mise en œuvre des flux d'actualités
6.1. Créer le service de publication
Ajoutez un fichier nommé post_service.dart sous lib/services/:
Dart
// 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 [];
    }
  }
}
// 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. Créer le modèle de publication
Ajoutez un fichier nommé post.dart sous lib/models/:
Dart
// 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!,
    );
  }
}
// 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. Créer l'écran d'accueil
Modifier home_screen.dart sous lib/screens/:
Dart
// 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),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
// 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),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
﻿
Étape 7 – Ajout de connexions d'amis
Dans cette étape, nous allons mettre en œuvre des connexions d'amis entre les utilisateurs. Les utilisateurs peuvent envoyer des demandes d'amis, les accepter ou les rejeter, et consulter leur liste d'amis. Nous allons modifier les modèles de données, créer des services et mettre à jour l'interface utilisateur pour prendre en charge cette fonctionnalité.
7.1. Mettre à jour le modèle de données
Nous avons déjà créé la FriendRequest classe dans Back4App avec les colonnes suivantes :
fromUser: Pointeur vers _User
toUser: Pointeur vers _User
status: Chaîne (Valeurs : "en attente", "accepté", "rejeté")
De plus, nous devons suivre la liste d'amis d'un utilisateur. Nous pouvons le faire en ajoutant une relation dans la classe _User.
7.1.1. Ajouter une relation d'amis à la classe Utilisateur
Dans Back4App, allez à la classe Utilisateur.
Cliquez sur le "+" bouton pour ajouter une nouvelle colonne.
Nommez la colonne "amis" et définissez le type sur Relation <_User>.
7.2. Créer un service de demande d'amis
Créez un fichier nommé friend_service.dart sous lib/services/:
Dart
// 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 [];
    }
  }
}
// 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. Mettre à jour l'interface utilisateur
7.3.1. Ajouter l'écran de recherche d'utilisateurs
Créez un fichier nommé search_users_screen.dart sous lib/screens/:
Dart
// 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'),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
// 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. Ajouter l'écran des demandes d'amis
Créez un fichier nommé friend_requests_screen.dart sous lib/screens/:
Dart
// 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),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
// 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. Mettre à jour la navigation de l'écran d'accueil
Dans home_screen.dart, ajoutez la navigation vers les écrans de recherche d'utilisateurs et de demandes d'amis :
Dart
// 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()),
    );
  },
),
// 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. Mettre à jour le fil d'actualités pour afficher les publications des amis
Modifier le getPosts méthode dans post_service.dart pour récupérer les publications de l'utilisateur et de ses amis.
Dart
// 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 [];
  }
}
// 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 [];
  }
}
﻿
Étape 8 – Mise en œuvre de la messagerie
Dans cette étape, nous allons ajouter un messaging en temps réel entre les utilisateurs en utilisant les Live Queries.
8.1. Activer les Live Queries dans Back4App
Dans le tableau de bord de votre application Back4App, allez à App Settings > Server Settings.
Sous Server URL, notez votre URL de serveur (par exemple, https://YOUR_APP_NAME.back4app.io).
Les Live Queries sont activées par défaut sur Back4App.
8.2. Configurer les Live Queries dans Flutter
Le parse_server_sdk_flutter package inclut le support des Live Queries.
8.3. Créer un service de messagerie
Créez un fichier nommé message_service.dart sous lib/services/:
Dart
// 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();
  }
}
// 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. Créer un modèle de message
Ajoutez un fichier nommé message.dart sous lib/models/:
Dart
// 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')!;
}
// 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. Créer l'écran de chat
Ajoutez un fichier nommé chat_screen.dart sous lib/screens/:
Dart
// 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,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
// 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. Mettre à jour l'interface utilisateur pour initier le chat
Vous pouvez initier le chat depuis la liste d'amis ou l'écran de recherche d'utilisateurs.
Dans la liste d'amis, lors de l'affichage des amis, ajoutez un bouton pour commencer un chat :
Dart
// Inside the ListTile for a friend
trailing: IconButton(
  icon: Icon(Icons.chat),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => ChatScreen(otherUser: friend)),
    );
  },
),
// Inside the ListTile for a friend
trailing: IconButton(
  icon: Icon(Icons.chat),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => ChatScreen(otherUser: friend)),
    );
  },
),
﻿
Étape 9 – Ajout de notifications push
La mise en œuvre des notifications push implique la configuration de Firebase Cloud Messaging (FCM) et son intégration avec Back4App.
9.1. Configurer Firebase Cloud Messaging
9.1.1. Configurer le projet Firebase
Allez sur Firebase Console et créez un nouveau projet.
Ajoutez une application Android et/ou iOS à votre projet.
Pour Android, vous avez besoin du nom du package (applicationId).
Pour iOS, vous avez besoin de l'identifiant de bundle.
9.1.2. Télécharger les fichiers de configuration
Pour Android : Téléchargez google-services.json et placez-le dans android/app/.
Pour iOS : Téléchargez GoogleService-Info.plist et ajoutez-le à votre projet Xcode sous Runner.
9.2. Ajouter le package firebase_messaging
Assurez-vous d'avoir ajouté firebase_messaging à votre pubspec.yaml:
YAML
dependencies:
  firebase_messaging: ^11.2.8
dependencies:
  firebase_messaging: ^11.2.8
﻿
Exécutez flutter pub get pour installer.
9.3. Initialiser Firebase dans Flutter
Modifier main.dart:
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());
}
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. Configurer Firebase Messaging
Créer un fichier nommé push_notification_service.dart sous lib/services/:
Dart
// 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
    });
  }
}
// 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. Mettre à jour main.dart pour initialiser les notifications push
Dans main.dart, après avoir initialisé Parse, initialisez le PushNotificationService:
Dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Initialize Parse as before

  // Initialize Push Notifications
  PushNotificationService _pushNotificationService = PushNotificationService();
  await _pushNotificationService.init();

  runApp(MyApp());
}
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. Envoi de notifications push depuis Back4App
Vous pouvez envoyer des notifications push en utilisant Cloud Code ou directement depuis votre serveur.
9.6.1. Envoi de notification lors d'une demande d'ami
Lorsqu'un utilisateur envoie une demande d'ami, vous pouvez envoyer une notification push au destinataire.
Dans friend_service.dart, modifiez la sendFriendRequest méthode :
Dart
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;
}
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;
}
﻿
Note: Assurez-vous d'avoir associé l'installation avec l'utilisateur.
9.7. Associer l'installation avec l'utilisateur
Lorsqu'un utilisateur se connecte, associez son installation avec son compte utilisateur.
Dans auth_service.dart, après une connexion réussie :
Dart
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;
  }
}
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;
  }
}
﻿
Remarque: Les notifications push nécessitent une configuration supplémentaire à la fois du côté client et serveur. Vous devez gérer différents scénarios, tels que les notifications en arrière-plan et les autorisations des utilisateurs, qui dépassent le cadre de ce tutoriel.
﻿
Conclusion
Félicitations ! Vous avez construit les bases d'une application de réseau social en utilisant Flutter et Back4App. Cette application comprend l'authentification des utilisateurs, la gestion des profils et une fonctionnalité de fil d'actualités. Bien que la mise en œuvre de connexions d'amis complètes, de messagerie et de notifications dépasse le cadre de ce tutoriel, vous avez maintenant la structure nécessaire pour continuer à développer votre application.
Prochaines étapes
Connexions d'amis: Implémentez des fonctionnalités de demande d'amis.
Messagerie: Ajoutez des fonctionnalités de chat en temps réel en utilisant les requêtes en direct.
Notifications: Intégrez des notifications push pour l'engagement des utilisateurs.
Améliorations de l'UI: Améliorez l'interface utilisateur et l'expérience utilisateur.
Sécurité: Assurez la sécurité des données et la confidentialité en définissant des ACL appropriées dans Back4App.
Ressources supplémentaires
﻿Documentation de Back4App﻿
﻿Guide du SDK Parse pour Flutter﻿
﻿Documentation officielle de Flutter﻿
﻿Documentation du package Provider﻿
Bon codage !
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment créer une application de traduction vocale IA en utilisant Flutter et Back4App
Construire une plateforme de blog SPA avec ReactJS et Back4App