Шаблоны Flutter
Создание приложения электронной коммерции с использованием Flutter, Back4App и интеграцией Stripe через облачный код

49min
Введение
Разработка приложения для электронной коммерции включает в себя несколько компонентов, включая списки продуктов, функциональность корзины покупок, безопасную обработку платежей, отслеживание заказов и отзывы пользователей. Сочетание мощного инструментария UI Flutter с масштабируемыми бэкенд-сервисами Back4App упрощает процесс разработки. Кроме того, интеграция Stripe для обработки платежей через Back4App Cloud Code позволяет безопасно и профессионально обрабатывать транзакции.
В этом учебном пособии вы создадите приложение для электронной коммерции с следующими функциями:
Списки продуктов: Отображение продуктов с изображениями, описаниями и ценами.
Корзина покупок: Добавление и удаление продуктов из корзины.
Пользовательские аккаунты: Управление профилями пользователей и адресами.
Безопасная оплата: Обработка платежей безопасно с использованием Stripe через Back4App Cloud Code.
Отслеживание заказов: Отслеживание статуса и истории заказов.
Отзывы и рейтинги: Позволить пользователям оставлять отзывы и оценки.
Предварительные требования
Чтобы следовать этому руководству, вам потребуется:
Flutter SDK установлен на вашем компьютере. Следуйте руководству по установке Flutter.
Базовые знания Flutter и Dart.
IDE или текстовый редактор такие как Visual Studio Code или Android Studio.
Аккаунт Back4App. Зарегистрируйтесь на Back4App.
Аккаунт Stripe. Зарегистрируйтесь на Stripe для получения API-ключей.
Node.js и npm установлены для разработки Cloud Code.
﻿
Шаг 1 – Настройка проекта Flutter
1.1. Создание нового проекта Flutter
Откройте терминал и выполните:
Bash
flutter create ecommerce_app
flutter create ecommerce_app
﻿
Перейдите в каталог проекта:
Bash
cd ecommerce_app
cd ecommerce_app
﻿
1.2. Добавить зависимости
Откройте pubspec.yaml и добавьте следующие зависимости:
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
﻿
Запустите flutter pub get для установки пакетов.
Примечание:
parse_server_sdk_flutter для интеграции с Back4App.
provider для управления состоянием.
cached_network_image для эффективной загрузки изображений.
flutter_stripe для интеграции Stripe на стороне клиента.
uuid для генерации уникальных идентификаторов.
  
Шаг 2 – Настройка Back4App
2.1. Создание нового приложения Back4App
Войдите в ваш панель управления Back4App.
Нажмите на "Создать новое приложение".
Введите "EcommerceApp" в качестве имени приложения и нажмите "Создать".
2.2. Настройка моделей данных
Нам нужно создать несколько классов в Back4App:
Продукт
Пользователь (встроенный класс)
Заказ
Элемент заказа
Отзыв
2.2.1. Класс продукта
Перейдите в раздел "Database".
Нажмите на "Create a class".
Выберите "Custom" и введите "Product" в качестве имени класса.
Добавьте следующие столбцы:
имя: Строка
описание: Строка
цена: Число
изображение: Файл
категория: Строка
инвентарь: Число
2.2.2. Класс Заказа
Создайте класс "Order" с следующими столбцами:
пользователь: Pointer<_User>
общаяСумма: Число
статус: Строка (Значения: "ожидание", "оплачено", "отправлено", "доставлено")
paymentIntentId: Строка (Для отслеживания платежа Stripe)
адресДоставки: Строка
2.2.3. Класс Заказного Элемента
Создайте "OrderItem" класс со следующими столбцами:
заказ: Указатель
продукт: Указатель
количество: Число
цена: Число
2.2.4. Класс Отзыва
Создайте "Review" класс со следующими столбцами:
продукт: Указатель
пользователь: Pointer<_User>
рейтинг: Число
комментарий: Строка
2.3. Получение учетных данных приложения
Перейдите к Настройки приложения > Безопасность и ключи.
Запишите ваш Идентификатор приложения и Ключ клиента.
  
Шаг 3 – Реализация управления продуктами
3.1. Инициализация Parse в Flutter
Откройте lib/main.dart и измените его:
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(),
      ),
    );
  }
}
﻿
Замените 'YOUR_APPLICATION_ID' и 'YOUR_CLIENT_KEY' на ваши учетные данные Back4App.
3.2. Создание модели продукта
Создайте каталог models в lib и добавьте 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. Реализация сервиса продукта
Создайте каталог services в lib и добавьте 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. Создание главного экрана
Создайте screens директорию в lib и добавьте 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. Экран деталей продукта
Создайте product_detail_screen.dart в 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'),
          ),
        ],
      ),
    );
  }
}
﻿
  
Шаг 4 – Реализация учетных записей пользователей
4.1. Сервис аутентификации
Добавьте auth_service.dart в 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. Экраны аутентификации
Создайте login_screen.dart и signup_screen.dart в lib/screens/.
Экран входа:
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'),
            )
          ],
        ),
      ),
    );
  }
}
﻿
Экран регистрации:
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. Обновите Main, чтобы включить AuthService
В main.dart, оберните MaterialApp с помощью 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. Перенаправление на основе состояния аутентификации
Измените main.dart для проверки статуса аутентификации:
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();
    }
  },
),
﻿
  
Шаг 5 – Функциональность Корзины
5.1. Создать Сервис Корзины
Добавить cart_service.dart в 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. Создать экран корзины
Добавить cart_screen.dart в 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'),
          ),
        ],
      ),
    );
  }
}
﻿
  
Шаг 6 – Безопасная оплата с интеграцией Stripe через Cloud Code
6.1. Настройка учетной записи Stripe
Зарегистрируйтесь для получения учетной записи Stripe.
Получите ваш Публикуемый ключ и Секретный ключ в панели управления Stripe в разделе Разработчики > API ключи.
6.2. Установите SDK Stripe в Cloud Code
Back4App поддерживает функции Cloud Code, написанные на JavaScript. Мы напишем функции Cloud Code для обработки платежей.
6.2.1. Создайте проект Cloud Code
В вашей панели управления Back4App перейдите в Настройки приложения > Функции Cloud Code.
Нажмите "Редактировать код" для открытия редактора Cloud Code.
6.2.2. Инициализируйте npm и установите пакет Stripe
В терминале Cloud Code (предоставленном в редакторе) выполните:
Bash
npm init -y
npm install [email protected]
npm init -y
npm install stripe@8.174.0
﻿
Примечание: Cloud Code от Back4App использует Node.js версии 14.x, поэтому убедитесь в совместимости.
6.3. Создайте облачную функцию для платежного намерения
Создайте или измените main.js в редакторе облачного кода:
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);
  }
});
﻿
Замените 'YOUR_STRIPE_SECRET_KEY' на ваш фактический секретный ключ Stripe.
Примечание по безопасности: Никогда не раскрывайте свой секретный ключ на стороне клиента. Храните его в безопасности в облачном коде.
6.4. Разверните облачный код
Нажмите "Развернуть" в редакторе облачного кода, чтобы развернуть ваши функции.
6.5. Реализация платежей в Flutter
6.5.1. Инициализация Stripe в Flutter
В main.dart, после Parse().initialize, добавьте:
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';
﻿
Замените 'ВАШ_ПУБЛИЧНЫЙ_КЛЮЧ_STRIPE' на ваш публичный ключ Stripe.
6.5.2. Создание экрана оформления заказа
Добавьте checkout_screen.dart в 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. Обработка подтверждения платежа
Создайте order_confirmation_screen.dart в 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. Сохранение заказа в Back4App
Измените метод _processPayment для сохранения деталей заказа:
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')),
  );
}
﻿
  
Шаг 7 – Отслеживание заказа
7.1. Создание сервиса заказа
Добавьте order_service.dart в 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 – Отслеживание заказа
7.2. Создать модель заказа
Добавить order.dart в 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. Создать экран заказов
Добавить orders_screen.dart в 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)}'),
              );
            },
          );
        },
      ),
    );
  }
}
﻿
  
Шаг 8 – Отзывы и рейтинги
8.1. Создать сервис отзывов
Добавить review_service.dart в 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. Создать модель отзыва
Добавить review.dart в 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. Обновить экран деталей продукта
В product_detail_screen.dart, добавьте раздел для отображения и отправки отзывов.
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'),
          ),
        ],
      ),
    ],
  ),
),
﻿
  
Заключение
В этом подробном руководстве вы создали приложение электронной коммерции с использованием Flutter и Back4App, интегрированное со Stripe для безопасной обработки платежей через Cloud Code. Вы реализовали ключевые функции, такие как списки продуктов, функциональность корзины покупок, аутентификация пользователей, отслеживание заказов и отзывы.
Ключевые выводы
Интеграция с Back4App: Упрощает управление бэкендом для вашего приложения на Flutter.
Интеграция с Stripe через Cloud Code: Безопасно обрабатывает платежи, не раскрывая конфиденциальные ключи.
Модульная архитектура: Разделение сервисов и моделей улучшает поддерживаемость.
Следующие шаги
Улучшение безопасности: Реализуйте правильную обработку ошибок и валидацию ввода.
Улучшения UI/UX: Усовершенствуйте пользовательский интерфейс для лучшего пользовательского опыта.
Управление запасами: Обновляйте запасы продуктов после покупки.
Email уведомления: Отправляйте пользователям электронные письма с подтверждением заказа.
Админ-панель: Создайте интерфейс администратора для управления продуктами и заказами.
Дополнительные ресурсы
﻿Документация Back4App﻿
﻿Руководство по Parse Server﻿
﻿Официальная документация Flutter﻿
﻿Справочник API Stripe﻿
﻿Пакет Flutter Stripe﻿
Счастливого кодирования!
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Создание приложения для чата в реальном времени на Flutter с Back4App
Как создать приложение для перевода голоса с AI, используя Flutter и Back4App