Modèles Flutter
Créer une application de commerce électronique avec Flutter, Back4App et intégration de Stripe via Cloud Code

49min
Introduction
Développer une application de commerce électronique implique plusieurs composants, y compris les listes de produits, la fonctionnalité de panier d'achat, le traitement sécurisé des paiements, le suivi des commandes et les avis des utilisateurs. Combiner l'outil UI puissant de Flutter avec les services backend évolutifs de Back4App simplifie le processus de développement. De plus, l'intégration de Stripe pour le traitement des paiements via Back4App Cloud Code permet de gérer les transactions de manière sécurisée et professionnelle.
Dans ce tutoriel, vous allez créer une application de commerce électronique avec les fonctionnalités suivantes :
Listes de Produits: Afficher les produits avec des images, des descriptions et des prix.
Panier d'Achat: Ajouter et supprimer des produits du panier.
Comptes Utilisateurs: Gérer les profils et adresses des utilisateurs.
Paiement Sécurisé: Traiter les paiements de manière sécurisée en utilisant Stripe via Back4App Cloud Code.
Suivi des Commandes: Suivre l'état et l'historique des commandes.
Avis et Évaluations: Permettre aux utilisateurs de soumettre des avis et des évaluations.
Prérequis
Pour suivre ce tutoriel, vous aurez besoin de :
Flutter SDK installé sur votre machine. Suivez le guide d'installation de Flutter.
Connaissances de base en Flutter et Dart.
Un IDE ou éditeur de texte comme Visual Studio Code ou Android Studio.
Un compte Back4App. Inscrivez-vous sur Back4App.
Compte Stripe. Inscrivez-vous sur Stripe pour obtenir des clés API.
Node.js et npm installés pour le développement de Cloud Code.
﻿
Étape 1 – Configuration du projet Flutter
1.1. Créer un nouveau projet Flutter
Ouvrez votre terminal et exécutez :
Bash
flutter create ecommerce_app
flutter create ecommerce_app
﻿
Naviguez vers le répertoire du projet :
Bash
cd ecommerce_app
cd ecommerce_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
  cached_network_image: ^3.2.0
  flutter_stripe: ^5.2.0
  uuid: ^3.0.6
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  provider: ^6.0.0
  cached_network_image: ^3.2.0
  flutter_stripe: ^5.2.0
  uuid: ^3.0.6
﻿
Exécutez flutter pub get pour installer les paquets.
Remarque:
parse_server_sdk_flutter pour l'intégration Back4App.
provider pour la gestion d'état.
cached_network_image pour un chargement d'images efficace.
flutter_stripe pour l'intégration Stripe côté client.
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 "EcommerceApp" comme nom de l'application et cliquez sur "Créer".
2.2. Configurer les modèles de données
Nous devons créer plusieurs classes dans Back4App :
Produit
Utilisateur (Classe intégrée)
Commande
Article de commande
Avis
2.2.1. Classe Produit
Naviguez vers la "Base de données" section.
Cliquez sur "Créer une classe".
Sélectionnez "Personnalisé" et entrez "Produit" comme nom de classe.
Ajoutez les colonnes suivantes:
nom: Chaîne
description: Chaîne
prix: Nombre
image: Fichier
catégorie: Chaîne
inventaire: Nombre
2.2.2. Classe Commande
Créez une "Commande" classe avec les colonnes suivantes:
utilisateur: Pointeur<_Utilisateur>
montantTotal: Nombre
statut: Chaîne (Valeurs: "en attente", "payé", "expédié", "livré")
paymentIntentId: Chaîne (Pour suivre le paiement Stripe)
adresseDeLivraison: Chaîne
2.2.3. Classe OrderItem
Créer un "OrderItem" classe avec les colonnes suivantes :
commande: Pointeur
produit: Pointeur
quantité: Nombre
prix: Nombre
2.2.4. Classe d'évaluation
Créer une "Review" classe avec les colonnes suivantes :
produit: Pointeur
utilisateur: Pointeur<_Utilisateur>
évaluation: Nombre
commentaire: Chaîne
2.3. Obtenir les identifiants de l'application
Naviguez vers Paramètres de l'application > Sécurité et clés.
Notez votre ID d'application et Clé client.
  
Étape 3 – Mise en œuvre de la gestion des produits
3.1. Initialiser Parse dans Flutter
Ouvrez lib/main.dart et modifiez-le :
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import 'screens/home_screen.dart';
import 'services/product_service.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<ProductService>(
      create: (_) => ProductService(),
      child: MaterialApp(
        title: 'E-commerce App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomeScreen(),
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import 'screens/home_screen.dart';
import 'services/product_service.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<ProductService>(
      create: (_) => ProductService(),
      child: MaterialApp(
        title: 'E-commerce App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomeScreen(),
      ),
    );
  }
}
﻿
Remplacez 'VOTRE_ID_APPLICATION' et 'VOTRE_CLÉ_CLIENT' par vos identifiants Back4App.
3.2. Création du modèle de produit
Créez un répertoire models sous lib et ajoutez product.dart:
Dart
// lib/models/product.dart
class Product {
  String id;
  String name;
  String description;
  double price;
  String imageUrl;
  String category;
  int inventory;

  Product({
    required this.id,
    required this.name,
    required this.description,
    required this.price,
    required this.imageUrl,
    required this.category,
    required this.inventory,
  });
}
// lib/models/product.dart
class Product {
  String id;
  String name;
  String description;
  double price;
  String imageUrl;
  String category;
  int inventory;

  Product({
    required this.id,
    required this.name,
    required this.description,
    required this.price,
    required this.imageUrl,
    required this.category,
    required this.inventory,
  });
}
﻿
3.3. Mise en œuvre du service produit
Créez un répertoire services sous lib et ajoutez product_service.dart:
Dart
// lib/services/product_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/product.dart';

class ProductService with ChangeNotifier {
  List<Product> products = [];

  Future<void> fetchProducts() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Product'));

    final response = await query.query();

    if (response.success && response.results != null) {
      products = response.results!.map((data) {
        return Product(
          id: data.objectId!,
          name: data.get<String>('name')!,
          description: data.get<String>('description')!,
          price: data.get<num>('price')!.toDouble(),
          imageUrl: data.get<ParseFileBase>('image')!.url!,
          category: data.get<String>('category')!,
          inventory: data.get<num>('inventory')!.toInt(),
        );
      }).toList();

      notifyListeners();
    }
  }
}
// lib/services/product_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/product.dart';

class ProductService with ChangeNotifier {
  List<Product> products = [];

  Future<void> fetchProducts() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Product'));

    final response = await query.query();

    if (response.success && response.results != null) {
      products = response.results!.map((data) {
        return Product(
          id: data.objectId!,
          name: data.get<String>('name')!,
          description: data.get<String>('description')!,
          price: data.get<num>('price')!.toDouble(),
          imageUrl: data.get<ParseFileBase>('image')!.url!,
          category: data.get<String>('category')!,
          inventory: data.get<num>('inventory')!.toInt(),
        );
      }).toList();

      notifyListeners();
    }
  }
}
﻿
3.4. Création de l'écran d'accueil
Créer un répertoire d'écrans sous lib et ajouter home_screen.dart:
Dart
// lib/screens/home_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/product_service.dart';
import 'product_detail_screen.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late ProductService _productService;

  @override
  void initState() {
    super.initState();
    _productService = Provider.of<ProductService>(context, listen: false);
    _productService.fetchProducts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('E-commerce App'),
        actions: [
          IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () {
              // Navigate to cart screen (to be implemented)
            },
          ),
        ],
      ),
      body: Consumer<ProductService>(
        builder: (context, productService, child) {
          if (productService.products.isEmpty) {
            return Center(child: CircularProgressIndicator());
          }

          return GridView.builder(
            padding: EdgeInsets.all(8.0),
            itemCount: productService.products.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 0.75,
            ),
            itemBuilder: (context, index) {
              final product = productService.products[index];
              return GestureDetector(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (_) => ProductDetailScreen(product: product),
                    ),
                  );
                },
                child: Card(
                  child: Column(
                    children: [
                      Expanded(
                        child: Image.network(
                          product.imageUrl,
                          fit: BoxFit.cover,
                        ),
                      ),
                      Text(product.name),
                      Text('\$${product.price.toStringAsFixed(2)}'),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}
// lib/screens/home_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/product_service.dart';
import 'product_detail_screen.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late ProductService _productService;

  @override
  void initState() {
    super.initState();
    _productService = Provider.of<ProductService>(context, listen: false);
    _productService.fetchProducts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('E-commerce App'),
        actions: [
          IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () {
              // Navigate to cart screen (to be implemented)
            },
          ),
        ],
      ),
      body: Consumer<ProductService>(
        builder: (context, productService, child) {
          if (productService.products.isEmpty) {
            return Center(child: CircularProgressIndicator());
          }

          return GridView.builder(
            padding: EdgeInsets.all(8.0),
            itemCount: productService.products.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 0.75,
            ),
            itemBuilder: (context, index) {
              final product = productService.products[index];
              return GestureDetector(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (_) => ProductDetailScreen(product: product),
                    ),
                  );
                },
                child: Card(
                  child: Column(
                    children: [
                      Expanded(
                        child: Image.network(
                          product.imageUrl,
                          fit: BoxFit.cover,
                        ),
                      ),
                      Text(product.name),
                      Text('\$${product.price.toStringAsFixed(2)}'),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}
﻿
3.5. Écran de détails du produit
Créer product_detail_screen.dart sous lib/screens/:
Dart
// lib/screens/product_detail_screen.dart
import 'package:flutter/material.dart';
import '../models/product.dart';
import '../services/cart_service.dart';
import 'package:provider/provider.dart';

class ProductDetailScreen extends StatelessWidget {
  final Product product;

  ProductDetailScreen({required this.product});

  @override
  Widget build(BuildContext context) {
    final cartService = Provider.of<CartService>(context);

    return Scaffold(
      appBar: AppBar(title: Text(product.name)),
      body: Column(
        children: [
          Expanded(child: Image.network(product.imageUrl)),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(product.description),
          ),
          Text('\$${product.price.toStringAsFixed(2)}'),
          ElevatedButton(
            onPressed: () {
              cartService.addToCart(product);
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Added to cart')),
              );
            },
            child: Text('Add to Cart'),
          ),
        ],
      ),
    );
  }
}
// lib/screens/product_detail_screen.dart
import 'package:flutter/material.dart';
import '../models/product.dart';
import '../services/cart_service.dart';
import 'package:provider/provider.dart';

class ProductDetailScreen extends StatelessWidget {
  final Product product;

  ProductDetailScreen({required this.product});

  @override
  Widget build(BuildContext context) {
    final cartService = Provider.of<CartService>(context);

    return Scaffold(
      appBar: AppBar(title: Text(product.name)),
      body: Column(
        children: [
          Expanded(child: Image.network(product.imageUrl)),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(product.description),
          ),
          Text('\$${product.price.toStringAsFixed(2)}'),
          ElevatedButton(
            onPressed: () {
              cartService.addToCart(product);
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Added to cart')),
              );
            },
            child: Text('Add to Cart'),
          ),
        ],
      ),
    );
  }
}
﻿
  
Étape 4 – Mise en œuvre des comptes utilisateurs
4.1. Service d'authentification
Ajouter auth_service.dart sous lib/services/:
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. Écrans d'authentification
Créer login_screen.dart et signup_screen.dart sous lib/screens/.
É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 'home_screen.dart';
import 'signup_screen.dart';

class LoginScreen extends StatelessWidget {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login(BuildContext context) 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: (_) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('E-commerce App Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username or Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _login(context),
              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 'home_screen.dart';
import 'signup_screen.dart';

class LoginScreen extends StatelessWidget {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login(BuildContext context) 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: (_) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('E-commerce App Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username or Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _login(context),
              child: Text('Login'),
            ),
            TextButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => SignupScreen()),
                );
              },
              child: Text('Don\'t have an account? Sign up'),
            )
          ],
        ),
      ),
    );
  }
}
﻿
É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 StatelessWidget {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _signUp(BuildContext context) 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: (_) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Signup failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('E-commerce 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(context),
              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 StatelessWidget {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _signUp(BuildContext context) 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: (_) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Signup failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('E-commerce 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(context),
              child: Text('Sign Up'),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
4.3. Mettre à jour Main pour inclure AuthService
Dans main.dart, enveloppez le MaterialApp avec MultiProvider:
Dart
// In main.dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<ProductService>(
          create: (_) => ProductService(),
        ),
        ChangeNotifierProvider<AuthService>(
          create: (_) => AuthService(),
        ),
        ChangeNotifierProvider<CartService>(
          create: (_) => CartService(),
        ),
      ],
      child: MaterialApp(
        // ...
      ),
    );
  }
}
// In main.dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<ProductService>(
          create: (_) => ProductService(),
        ),
        ChangeNotifierProvider<AuthService>(
          create: (_) => AuthService(),
        ),
        ChangeNotifierProvider<CartService>(
          create: (_) => CartService(),
        ),
      ],
      child: MaterialApp(
        // ...
      ),
    );
  }
}
﻿
4.4. Redirection Basée sur l'État d'Authentification
Modifiez main.dart pour vérifier l'état d'authentification :
Dart
// main.dart
// Inside the build method
home: Consumer<AuthService>(
  builder: (context, authService, child) {
    if (authService.isAuthenticated) {
      return HomeScreen();
    } else {
      return LoginScreen();
    }
  },
),
// main.dart
// Inside the build method
home: Consumer<AuthService>(
  builder: (context, authService, child) {
    if (authService.isAuthenticated) {
      return HomeScreen();
    } else {
      return LoginScreen();
    }
  },
),
﻿
  
Étape 5 – Fonctionnalité du Panier
5.1. Créer le Service de Panier
Ajouter cart_service.dart sous lib/services/:
Dart
// lib/services/cart_service.dart
import 'package:flutter/material.dart';
import '../models/product.dart';

class CartItem {
  final Product product;
  int quantity;

  CartItem({required this.product, this.quantity = 1});
}

class CartService with ChangeNotifier {
  Map<String, CartItem> _items = {};

  void addToCart(Product product) {
    if (_items.containsKey(product.id)) {
      _items[product.id]!.quantity++;
    } else {
      _items[product.id] = CartItem(product: product);
    }
    notifyListeners();
  }

  void removeFromCart(String productId) {
    _items.remove(productId);
    notifyListeners();
  }

  void clearCart() {
    _items.clear();
    notifyListeners();
  }

  Map<String, CartItem> get items => _items;

  double get totalAmount {
    double total = 0.0;
    _items.forEach((key, cartItem) {
      total += cartItem.product.price * cartItem.quantity;
    });
    return total;
  }
}
// lib/services/cart_service.dart
import 'package:flutter/material.dart';
import '../models/product.dart';

class CartItem {
  final Product product;
  int quantity;

  CartItem({required this.product, this.quantity = 1});
}

class CartService with ChangeNotifier {
  Map<String, CartItem> _items = {};

  void addToCart(Product product) {
    if (_items.containsKey(product.id)) {
      _items[product.id]!.quantity++;
    } else {
      _items[product.id] = CartItem(product: product);
    }
    notifyListeners();
  }

  void removeFromCart(String productId) {
    _items.remove(productId);
    notifyListeners();
  }

  void clearCart() {
    _items.clear();
    notifyListeners();
  }

  Map<String, CartItem> get items => _items;

  double get totalAmount {
    double total = 0.0;
    _items.forEach((key, cartItem) {
      total += cartItem.product.price * cartItem.quantity;
    });
    return total;
  }
}
﻿
5.2. Créer l'écran du panier
Ajouter cart_screen.dart sous lib/screens/:
Dart
// lib/screens/cart_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/cart_service.dart';
import 'checkout_screen.dart';

class CartScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final cartService = Provider.of<CartService>(context);
    final cartItems = cartService.items.values.toList();

    return Scaffold(
      appBar: AppBar(title: Text('Your Cart')),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: cartService.items.length,
              itemBuilder: (context, index) {
                final cartItem = cartItems[index];
                return ListTile(
                  leading: Image.network(cartItem.product.imageUrl),
                  title: Text(cartItem.product.name),
                  subtitle: Text('Quantity: ${cartItem.quantity}'),
                  trailing: Text('\$${(cartItem.product.price * cartItem.quantity).toStringAsFixed(2)}'),
                );
              },
            ),
          ),
          Text('Total: \$${cartService.totalAmount.toStringAsFixed(2)}'),
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => CheckoutScreen()),
              );
            },
            child: Text('Proceed to Checkout'),
          ),
        ],
      ),
    );
  }
}
// lib/screens/cart_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/cart_service.dart';
import 'checkout_screen.dart';

class CartScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final cartService = Provider.of<CartService>(context);
    final cartItems = cartService.items.values.toList();

    return Scaffold(
      appBar: AppBar(title: Text('Your Cart')),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: cartService.items.length,
              itemBuilder: (context, index) {
                final cartItem = cartItems[index];
                return ListTile(
                  leading: Image.network(cartItem.product.imageUrl),
                  title: Text(cartItem.product.name),
                  subtitle: Text('Quantity: ${cartItem.quantity}'),
                  trailing: Text('\$${(cartItem.product.price * cartItem.quantity).toStringAsFixed(2)}'),
                );
              },
            ),
          ),
          Text('Total: \$${cartService.totalAmount.toStringAsFixed(2)}'),
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => CheckoutScreen()),
              );
            },
            child: Text('Proceed to Checkout'),
          ),
        ],
      ),
    );
  }
}
﻿
  
Étape 6 – Paiement sécurisé avec intégration Stripe via Cloud Code
6.1. Configurer le compte Stripe
Inscrivez-vous pour un compte Stripe.
Obtenez votre Clé publique et Clé secrète depuis le tableau de bord Stripe sous Développeurs > Clés API.
6.2. Installer le SDK Stripe dans Cloud Code
Back4App prend en charge les fonctions Cloud Code écrites en JavaScript. Nous allons écrire des fonctions Cloud Code pour gérer le traitement des paiements.
6.2.1. Créer un projet Cloud Code
Dans le tableau de bord de votre application Back4App, allez à Paramètres de l'application > Fonctions Cloud Code.
Cliquez sur "Modifier le code" pour ouvrir l'éditeur de Cloud Code.
6.2.2. Initialiser npm et installer le package Stripe
Dans le terminal Cloud Code (fourni dans l'éditeur), exécutez :
Bash
npm init -y
npm install [email protected]
npm init -y
npm install stripe@8.174.0
﻿
Remarque: Le Cloud Code de Back4App utilise la version 14.x de Node.js, donc assurez-vous de la compatibilité.
6.3. Créer une fonction Cloud pour l'intention de paiement
Créez ou modifiez main.js dans l'éditeur de Cloud Code :
JS
// main.js
const Stripe = require('stripe');
const stripe = Stripe('YOUR_STRIPE_SECRET_KEY');

Parse.Cloud.define('createPaymentIntent', async (request) => {
  const { amount, currency } = request.params;

  try {
    const paymentIntent = await stripe.paymentIntents.create({
      amount: amount,
      currency: currency,
    });

    return { clientSecret: paymentIntent.client_secret };
  } catch (error) {
    throw new Parse.Error(500, error.message);
  }
});
// main.js
const Stripe = require('stripe');
const stripe = Stripe('YOUR_STRIPE_SECRET_KEY');

Parse.Cloud.define('createPaymentIntent', async (request) => {
  const { amount, currency } = request.params;

  try {
    const paymentIntent = await stripe.paymentIntents.create({
      amount: amount,
      currency: currency,
    });

    return { clientSecret: paymentIntent.client_secret };
  } catch (error) {
    throw new Parse.Error(500, error.message);
  }
});
﻿
Remplacez 'VOTRE_CLE_SECRETE_STRIPE' par votre véritable clé secrète Stripe.
Remarque de sécurité: Ne jamais exposer votre clé secrète côté client. Gardez-la sécurisée dans le Cloud Code.
6.4. Déployer le Cloud Code
Cliquez sur "Déployer" dans l'éditeur de Cloud Code pour déployer vos fonctions.
6.5. Implémenter le paiement dans Flutter
6.5.1. Initialiser Stripe dans Flutter
Dans main.dart, après Parse().initialize, ajoutez :
Dart
import 'package:flutter_stripe/flutter_stripe.dart';

// Inside main() async
Stripe.publishableKey = 'YOUR_STRIPE_PUBLISHABLE_KEY';
import 'package:flutter_stripe/flutter_stripe.dart';

// Inside main() async
Stripe.publishableKey = 'YOUR_STRIPE_PUBLISHABLE_KEY';
﻿
Remplacez 'VOTRE_CLE_PUBLIABLE_STRIPE' par votre clé publiable Stripe.
6.5.2. Créer l'écran de paiement
Ajoutez checkout_screen.dart sous lib/screens/:
Dart
// lib/screens/checkout_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/cart_service.dart';
import 'package:flutter_stripe/flutter_stripe.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'order_confirmation_screen.dart';

class CheckoutScreen extends StatelessWidget {
  Future<void> _processPayment(BuildContext context) async {
    final cartService = Provider.of<CartService>(context, listen: false);
    final totalAmount = (cartService.totalAmount * 100).toInt(); // Amount in cents

    // Call Cloud Function to create Payment Intent
    final response = await ParseCloudFunction('createPaymentIntent').execute(
      parameters: {
        'amount': totalAmount,
        'currency': 'usd',
      },
    );

    if (response.success) {
      final clientSecret = response.result['clientSecret'];

      // Initialize payment sheet
      await Stripe.instance.initPaymentSheet(
        paymentSheetParameters: SetupPaymentSheetParameters(
          paymentIntentClientSecret: clientSecret,
          merchantDisplayName: 'Your E-commerce App',
        ),
      );

      // Display payment sheet
      await Stripe.instance.presentPaymentSheet();

      // Payment successful
      // Save order to Back4App (to be implemented)
      cartService.clearCart();
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (_) => OrderConfirmationScreen()),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Payment failed: ${response.error!.message}')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    final cartService = Provider.of<CartService>(context);

    return Scaffold(
      appBar: AppBar(title: Text('Checkout')),
      body: Column(
        children: [
          Text('Total: \$${cartService.totalAmount.toStringAsFixed(2)}'),
          ElevatedButton(
            onPressed: () => _processPayment(context),
            child: Text('Pay Now'),
          ),
        ],
      ),
    );
  }
}
// lib/screens/checkout_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/cart_service.dart';
import 'package:flutter_stripe/flutter_stripe.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'order_confirmation_screen.dart';

class CheckoutScreen extends StatelessWidget {
  Future<void> _processPayment(BuildContext context) async {
    final cartService = Provider.of<CartService>(context, listen: false);
    final totalAmount = (cartService.totalAmount * 100).toInt(); // Amount in cents

    // Call Cloud Function to create Payment Intent
    final response = await ParseCloudFunction('createPaymentIntent').execute(
      parameters: {
        'amount': totalAmount,
        'currency': 'usd',
      },
    );

    if (response.success) {
      final clientSecret = response.result['clientSecret'];

      // Initialize payment sheet
      await Stripe.instance.initPaymentSheet(
        paymentSheetParameters: SetupPaymentSheetParameters(
          paymentIntentClientSecret: clientSecret,
          merchantDisplayName: 'Your E-commerce App',
        ),
      );

      // Display payment sheet
      await Stripe.instance.presentPaymentSheet();

      // Payment successful
      // Save order to Back4App (to be implemented)
      cartService.clearCart();
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (_) => OrderConfirmationScreen()),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Payment failed: ${response.error!.message}')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    final cartService = Provider.of<CartService>(context);

    return Scaffold(
      appBar: AppBar(title: Text('Checkout')),
      body: Column(
        children: [
          Text('Total: \$${cartService.totalAmount.toStringAsFixed(2)}'),
          ElevatedButton(
            onPressed: () => _processPayment(context),
            child: Text('Pay Now'),
          ),
        ],
      ),
    );
  }
}
﻿
6.5.3. Gérer la confirmation de paiement
Créer order_confirmation_screen.dart sous lib/screens/:
Dart
// lib/screens/order_confirmation_screen.dart
import 'package:flutter/material.dart';

class OrderConfirmationScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Order Confirmed'),
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Text('Thank you for your purchase!'),
      ),
    );
  }
}
// lib/screens/order_confirmation_screen.dart
import 'package:flutter/material.dart';

class OrderConfirmationScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Order Confirmed'),
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Text('Thank you for your purchase!'),
      ),
    );
  }
}
﻿
6.6. Enregistrement de la commande dans Back4App
Modifier la _processPayment méthode pour enregistrer les détails de la commande :
Dart
// After successful payment
final authService = Provider.of<AuthService>(context, listen: false);
final user = authService.user!;

// Create Order object
final order = ParseObject('Order')
  ..set('user', user)
  ..set('totalAmount', cartService.totalAmount)
  ..set('status', 'paid')
  ..set('paymentIntentId', clientSecret);

// Save Order
final orderResponse = await order.save();

if (orderResponse.success) {
  final orderObject = orderResponse.result;

  // Save OrderItems
  for (var cartItem in cartService.items.values) {
    final orderItem = ParseObject('OrderItem')
      ..set('order', orderObject)
      ..set('product', ParseObject('Product')..objectId = cartItem.product.id)
      ..set('quantity', cartItem.quantity)
      ..set('price', cartItem.product.price);

    await orderItem.save();
  }

  // Clear cart and navigate
  cartService.clearCart();
  Navigator.pushReplacement(
    context,
    MaterialPageRoute(builder: (_) => OrderConfirmationScreen()),
  );
} else {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('Failed to save order')),
  );
}
// After successful payment
final authService = Provider.of<AuthService>(context, listen: false);
final user = authService.user!;

// Create Order object
final order = ParseObject('Order')
  ..set('user', user)
  ..set('totalAmount', cartService.totalAmount)
  ..set('status', 'paid')
  ..set('paymentIntentId', clientSecret);

// Save Order
final orderResponse = await order.save();

if (orderResponse.success) {
  final orderObject = orderResponse.result;

  // Save OrderItems
  for (var cartItem in cartService.items.values) {
    final orderItem = ParseObject('OrderItem')
      ..set('order', orderObject)
      ..set('product', ParseObject('Product')..objectId = cartItem.product.id)
      ..set('quantity', cartItem.quantity)
      ..set('price', cartItem.product.price);

    await orderItem.save();
  }

  // Clear cart and navigate
  cartService.clearCart();
  Navigator.pushReplacement(
    context,
    MaterialPageRoute(builder: (_) => OrderConfirmationScreen()),
  );
} else {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('Failed to save order')),
  );
}
﻿
  
Étape 7 – Suivi de commande
7.1. Créer un service de commande
Ajouter order_service.dart sous lib/services/:
Dart
// lib/services/order_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/order.dart';

class OrderService with ChangeNotifier {
  List<Order> orders = [];

  Future<void> fetchOrders(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Order'))
      ..whereEqualTo('user', user)
      ..orderByDescending('createdAt');

    final response = await query.query();

    if (response.success && response.results != null) {
      orders = response.results!.map((data) {
        return Order.fromParseObject(data);
      }).toList();

      notifyListeners();
    }
  }
}
// lib/services/order_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/order.dart';

class OrderService with ChangeNotifier {
  List<Order> orders = [];

  Future<void> fetchOrders(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Order'))
      ..whereEqualTo('user', user)
      ..orderByDescending('createdAt');

    final response = await query.query();

    if (response.success && response.results != null) {
      orders = response.results!.map((data) {
        return Order.fromParseObject(data);
      }).toList();

      notifyListeners();
    }
  }
}
﻿
7.2. Créer le modèle de commande
Ajouter order.dart sous lib/models/:
Dart
// lib/models/order.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Order {
  String id;
  double totalAmount;
  String status;
  DateTime createdAt;

  Order({
    required this.id,
    required this.totalAmount,
    required this.status,
    required this.createdAt,
  });

  factory Order.fromParseObject(ParseObject object) {
    return Order(
      id: object.objectId!,
      totalAmount: object.get<num>('totalAmount')!.toDouble(),
      status: object.get<String>('status')!,
      createdAt: object.createdAt!,
    );
  }
}
// lib/models/order.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Order {
  String id;
  double totalAmount;
  String status;
  DateTime createdAt;

  Order({
    required this.id,
    required this.totalAmount,
    required this.status,
    required this.createdAt,
  });

  factory Order.fromParseObject(ParseObject object) {
    return Order(
      id: object.objectId!,
      totalAmount: object.get<num>('totalAmount')!.toDouble(),
      status: object.get<String>('status')!,
      createdAt: object.createdAt!,
    );
  }
}
﻿
7.3. Créer l'écran des commandes
Ajouter orders_screen.dart sous lib/screens/:
Dart
// lib/screens/orders_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/order_service.dart';
import '../services/auth_service.dart';
import '../models/order.dart';

class OrdersScreen extends StatefulWidget {
  @override
  _OrdersScreenState createState() => _OrdersScreenState();
}

class _OrdersScreenState extends State<OrdersScreen> {
  late OrderService _orderService;

  @override
  void initState() {
    super.initState();
    _orderService = Provider.of<OrderService>(context, listen: false);
    final authService = Provider.of<AuthService>(context, listen: false);
    _orderService.fetchOrders(authService.user!);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Your Orders')),
      body: Consumer<OrderService>(
        builder: (context, orderService, child) {
          if (orderService.orders.isEmpty) {
            return Center(child: Text('No orders found.'));
          }

          return ListView.builder(
            itemCount: orderService.orders.length,
            itemBuilder: (context, index) {
              final order = orderService.orders[index];
              return ListTile(
                title: Text('Order #${order.id}'),
                subtitle: Text('Status: ${order.status}'),
                trailing: Text('\$${order.totalAmount.toStringAsFixed(2)}'),
              );
            },
          );
        },
      ),
    );
  }
}
// lib/screens/orders_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/order_service.dart';
import '../services/auth_service.dart';
import '../models/order.dart';

class OrdersScreen extends StatefulWidget {
  @override
  _OrdersScreenState createState() => _OrdersScreenState();
}

class _OrdersScreenState extends State<OrdersScreen> {
  late OrderService _orderService;

  @override
  void initState() {
    super.initState();
    _orderService = Provider.of<OrderService>(context, listen: false);
    final authService = Provider.of<AuthService>(context, listen: false);
    _orderService.fetchOrders(authService.user!);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Your Orders')),
      body: Consumer<OrderService>(
        builder: (context, orderService, child) {
          if (orderService.orders.isEmpty) {
            return Center(child: Text('No orders found.'));
          }

          return ListView.builder(
            itemCount: orderService.orders.length,
            itemBuilder: (context, index) {
              final order = orderService.orders[index];
              return ListTile(
                title: Text('Order #${order.id}'),
                subtitle: Text('Status: ${order.status}'),
                trailing: Text('\$${order.totalAmount.toStringAsFixed(2)}'),
              );
            },
          );
        },
      ),
    );
  }
}
﻿
  
Étape 8 – Avis et évaluations
8.1. Créer le service d'avis
Ajouter review_service.dart sous lib/services/:
Dart
// lib/services/review_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/review.dart';

class ReviewService with ChangeNotifier {
  List<Review> reviews = [];

  Future<void> fetchReviews(String productId) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Review'))
      ..whereEqualTo('product', ParseObject('Product')..objectId = productId)
      ..includeObject(['user']);

    final response = await query.query();

    if (response.success && response.results != null) {
      reviews = response.results!.map((data) {
        return Review.fromParseObject(data);
      }).toList();

      notifyListeners();
    }
  }

  Future<void> submitReview(String productId, ParseUser user, int rating, String comment) async {
    final review = ParseObject('Review')
      ..set('product', ParseObject('Product')..objectId = productId)
      ..set('user', user)
      ..set('rating', rating)
      ..set('comment', comment);

    await review.save();
    await fetchReviews(productId);
  }
}
// lib/services/review_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/review.dart';

class ReviewService with ChangeNotifier {
  List<Review> reviews = [];

  Future<void> fetchReviews(String productId) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Review'))
      ..whereEqualTo('product', ParseObject('Product')..objectId = productId)
      ..includeObject(['user']);

    final response = await query.query();

    if (response.success && response.results != null) {
      reviews = response.results!.map((data) {
        return Review.fromParseObject(data);
      }).toList();

      notifyListeners();
    }
  }

  Future<void> submitReview(String productId, ParseUser user, int rating, String comment) async {
    final review = ParseObject('Review')
      ..set('product', ParseObject('Product')..objectId = productId)
      ..set('user', user)
      ..set('rating', rating)
      ..set('comment', comment);

    await review.save();
    await fetchReviews(productId);
  }
}
﻿
8.2. Créer le modèle d'évaluation
Ajouter review.dart sous lib/models/:
Dart
// lib/models/review.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Review {
  String id;
  int rating;
  String comment;
  ParseUser user;

  Review({
    required this.id,
    required this.rating,
    required this.comment,
    required this.user,
  });

  factory Review.fromParseObject(ParseObject object) {
    return Review(
      id: object.objectId!,
      rating: object.get<num>('rating')!.toInt(),
      comment: object.get<String>('comment')!,
      user: object.get<ParseUser>('user')!,
    );
  }
}
// lib/models/review.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Review {
  String id;
  int rating;
  String comment;
  ParseUser user;

  Review({
    required this.id,
    required this.rating,
    required this.comment,
    required this.user,
  });

  factory Review.fromParseObject(ParseObject object) {
    return Review(
      id: object.objectId!,
      rating: object.get<num>('rating')!.toInt(),
      comment: object.get<String>('comment')!,
      user: object.get<ParseUser>('user')!,
    );
  }
}
﻿
8.3. Mettre à jour l'écran de détails du produit
Dans product_detail_screen.dart, ajoutez une section pour afficher et soumettre des avis.
Dart
// At the end of the Column in ProductDetailScreen
Expanded(
  child: Column(
    children: [
      // Display reviews
      Expanded(
        child: Consumer<ReviewService>(
          builder: (context, reviewService, child) {
            if (reviewService.reviews.isEmpty) {
              return Center(child: Text('No reviews yet.'));
            }

            return ListView.builder(
              itemCount: reviewService.reviews.length,
              itemBuilder: (context, index) {
                final review = reviewService.reviews[index];
                return ListTile(
                  title: Text(review.user.username ?? 'Anonymous'),
                  subtitle: Text(review.comment),
                  trailing: Text('${review.rating}/5'),
                );
              },
            );
          },
        ),
      ),
      // Submit review
      TextField(
        controller: _reviewController,
        decoration: InputDecoration(hintText: 'Write a review'),
      ),
      Row(
        children: [
          Text('Rating:'),
          DropdownButton<int>(
            value: _rating,
            onChanged: (value) {
              setState(() {
                _rating = value!;
              });
            },
            items: List.generate(5, (index) => index + 1)
                .map((e) => DropdownMenuItem(value: e, child: Text('$e')))
                .toList(),
          ),
          ElevatedButton(
            onPressed: () {
              final authService = Provider.of<AuthService>(context, listen: false);
              _reviewService.submitReview(
                product.id,
                authService.user!,
                _rating,
                _reviewController.text.trim(),
              );
              _reviewController.clear();
            },
            child: Text('Submit'),
          ),
        ],
      ),
    ],
  ),
),
// At the end of the Column in ProductDetailScreen
Expanded(
  child: Column(
    children: [
      // Display reviews
      Expanded(
        child: Consumer<ReviewService>(
          builder: (context, reviewService, child) {
            if (reviewService.reviews.isEmpty) {
              return Center(child: Text('No reviews yet.'));
            }

            return ListView.builder(
              itemCount: reviewService.reviews.length,
              itemBuilder: (context, index) {
                final review = reviewService.reviews[index];
                return ListTile(
                  title: Text(review.user.username ?? 'Anonymous'),
                  subtitle: Text(review.comment),
                  trailing: Text('${review.rating}/5'),
                );
              },
            );
          },
        ),
      ),
      // Submit review
      TextField(
        controller: _reviewController,
        decoration: InputDecoration(hintText: 'Write a review'),
      ),
      Row(
        children: [
          Text('Rating:'),
          DropdownButton<int>(
            value: _rating,
            onChanged: (value) {
              setState(() {
                _rating = value!;
              });
            },
            items: List.generate(5, (index) => index + 1)
                .map((e) => DropdownMenuItem(value: e, child: Text('$e')))
                .toList(),
          ),
          ElevatedButton(
            onPressed: () {
              final authService = Provider.of<AuthService>(context, listen: false);
              _reviewService.submitReview(
                product.id,
                authService.user!,
                _rating,
                _reviewController.text.trim(),
              );
              _reviewController.clear();
            },
            child: Text('Submit'),
          ),
        ],
      ),
    ],
  ),
),
﻿
  
Conclusion
Dans ce tutoriel complet, vous avez construit une application de commerce électronique en utilisant Flutter et Back4App, intégrée avec Stripe pour un traitement sécurisé des paiements via Cloud Code. Vous avez mis en œuvre des fonctionnalités clés telles que les listes de produits, la fonctionnalité de panier d'achat, l'authentification des utilisateurs, le suivi des commandes et les avis.
Points Clés
Intégration Back4App: Simplifie la gestion du backend pour votre application Flutter.
Intégration Stripe via Cloud Code: Traite les paiements de manière sécurisée sans exposer de clés sensibles.
Architecture Modulaire: La séparation des services et des modèles améliore la maintenabilité.
Prochaines Étapes
Améliorer la sécurité: Mettre en œuvre une gestion appropriée des erreurs et une validation des entrées.
Améliorations UI/UX: Affiner l'interface utilisateur pour une meilleure expérience utilisateur.
Gestion des stocks: Mettre à jour l'inventaire des produits lors de l'achat.
Notifications par e-mail: Envoyer des e-mails de confirmation de commande aux utilisateurs.
Panneau d'administration: Créer une interface d'administration pour gérer les produits et les commandes.
Ressources supplémentaires
﻿Documentation Back4App﻿
﻿Guide de Parse Server﻿
﻿Documentation officielle de Flutter﻿
﻿Référence API Stripe﻿
﻿Package Flutter Stripe﻿
Bonne programmation !
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Créer une application de chat en temps réel dans Flutter avec Back4App
Comment créer une application de traduction vocale IA en utilisant Flutter et Back4App