Flutter Templates
Membangun Aplikasi E-commerce dengan Flutter, Back4App, dan Integrasi Stripe melalui Cloud Code

49min
Pendahuluan
Mengembangkan aplikasi e-commerce melibatkan beberapa komponen, termasuk daftar produk, fungsionalitas keranjang belanja, pemrosesan pembayaran yang aman, pelacakan pesanan, dan ulasan pengguna. Menggabungkan toolkit UI yang kuat dari Flutter dengan layanan backend yang dapat diskalakan dari Back4App menyederhanakan proses pengembangan. Selain itu, mengintegrasikan Stripe untuk pemrosesan pembayaran melalui Back4App Cloud Code memungkinkan penanganan transaksi yang aman dan profesional.
Dalam tutorial ini, Anda akan membangun aplikasi e-commerce dengan fitur-fitur berikut:
Daftar Produk: Tampilkan produk dengan gambar, deskripsi, dan harga.
Keranjang Belanja: Tambahkan dan hapus produk dari keranjang.
Akun Pengguna: Kelola profil dan alamat pengguna.
Checkout Aman: Proses pembayaran dengan aman menggunakan Stripe melalui Back4App Cloud Code.
Pelacakan Pesanan: Lacak status dan riwayat pesanan.
Ulasan dan Penilaian: Izinkan pengguna untuk mengirimkan ulasan dan penilaian.
Prasyarat
Untuk mengikuti tutorial ini, Anda akan membutuhkan:
Flutter SDK terinstal di mesin Anda. Ikuti panduan instalasi Flutter.
Pengetahuan dasar tentang Flutter dan Dart.
Sebuah IDE atau editor teks seperti Visual Studio Code atau Android Studio.
Akun Back4App. Daftar di Back4App.
Akun Stripe. Daftar di Stripe untuk mendapatkan kunci API.
Node.js dan npm terinstal untuk pengembangan Cloud Code.
﻿
Langkah 1 – Menyiapkan Proyek Flutter
1.1. Buat Proyek Flutter Baru
Buka terminal Anda dan jalankan:
Bash
flutter create ecommerce_app
flutter create ecommerce_app
﻿
Navigasikan ke direktori proyek:
Bash
cd ecommerce_app
cd ecommerce_app
﻿
1.2. Tambahkan Dependensi
Buka pubspec.yaml dan tambahkan dependensi berikut:
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
﻿
Jalankan flutter pub get untuk menginstal paket.
Catatan:
parse_server_sdk_flutter untuk integrasi Back4App.
provider untuk manajemen status.
cached_network_image untuk pemuatan gambar yang efisien.
flutter_stripe untuk integrasi Stripe di sisi klien.
uuid untuk menghasilkan pengenal unik.
  
Langkah 2 – Menyiapkan Back4App
2.1. Buat Aplikasi Back4App Baru
Masuk ke dasbor Back4App.
Klik pada "Buat aplikasi baru".
Masukkan "EcommerceApp" sebagai nama aplikasi dan klik "Buat".
2.2. Siapkan Model Data
Kita perlu membuat beberapa kelas di Back4App:
Produk
Pengguna (Kelas bawaan)
Pesanan
ItemPesanan
Ulasan
2.2.1. Kelas Produk
Navigasikan ke "Database" bagian.
Klik pada "Buat kelas".
Pilih "Kustom" dan masukkan "Produk" sebagai nama kelas.
Tambahkan kolom berikut:
nama: String
deskripsi: String
harga: Nomor
gambar: File
kategori: String
inventaris: Nomor
2.2.2. Kelas Pesanan
Buat kelas "Pesanan" dengan kolom berikut:
pengguna: Pointer<_User>
totalJumlah: Nomor
status: String (Nilai: "pending", "dibayar", "dikirim", "dikirim")
paymentIntentId: String (Untuk melacak pembayaran Stripe)
alamatPengiriman: String
2.2.3. Kelas OrderItem
Buat sebuah "OrderItem" kelas dengan kolom-kolom berikut:
pesanan: Pointer
produk: Pointer
kuantitas: Number
harga: Number
2.2.4. Kelas Ulasan
Buat sebuah "Review" kelas dengan kolom-kolom berikut:
produk: Pointer
pengguna: Pointer<_User>
penilaian: Number
komentar: String
2.3. Dapatkan Kredensial Aplikasi
Navigasikan ke Pengaturan Aplikasi > Keamanan & Kunci.
Catat ID Aplikasi dan Kunci Klien.
  
Langkah 3 – Mengimplementasikan Manajemen Produk
3.1. Menginisialisasi Parse di Flutter
Buka lib/main.dart dan modifikasi:
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(),
      ),
    );
  }
}
﻿
Ganti 'YOUR_APPLICATION_ID' dan 'YOUR_CLIENT_KEY' dengan kredensial Back4App Anda.
3.2. Membuat Model Produk
Buat direktori models di bawah lib dan tambahkan 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. Mengimplementasikan Layanan Produk
Buat direktori services di bawah lib dan tambahkan 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. Membuat Layar Utama
Buat direktori layar di bawah lib dan tambahkan 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. Layar Detail Produk
Buat product_detail_screen.dart di bawah 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'),
          ),
        ],
      ),
    );
  }
}
﻿
  
Langkah 4 – Mengimplementasikan Akun Pengguna
4.1. Layanan Autentikasi
Tambahkan auth_service.dart di bawah 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. Layar Autentikasi
Buat login_screen.dart dan signup_screen.dart di bawah lib/screens/.
Layar Masuk:
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'),
            )
          ],
        ),
      ),
    );
  }
}
﻿
Layar Pendaftaran:
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. Perbarui Utama untuk Menyertakan AuthService
Di main.dart, bungkus MaterialApp dengan 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. Pengalihan Berdasarkan Status Autentikasi
Modifikasi main.dart untuk memeriksa status autentikasi:
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();
    }
  },
),
﻿
  
Langkah 5 – Fungsionalitas Keranjang Belanja
5.1. Buat Layanan Keranjang
Tambahkan cart_service.dart di bawah 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. Buat Layar Keranjang
Tambahkan cart_screen.dart di bawah 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'),
          ),
        ],
      ),
    );
  }
}
﻿
  
Langkah 6 – Pembayaran Aman dengan Integrasi Stripe melalui Cloud Code
6.1. Siapkan Akun Stripe
Daftar untuk akun Stripe.
Dapatkan Kunci Publik dan Kunci Rahasia dari Dasbor Stripe di bawah Pengembang > Kunci API.
6.2. Instal SDK Stripe di Cloud Code
Back4App mendukung fungsi Cloud Code yang ditulis dalam JavaScript. Kami akan menulis fungsi Cloud Code untuk menangani pemrosesan pembayaran.
6.2.1. Buat Proyek Cloud Code
Di dasbor aplikasi Back4App Anda, pergi ke Pengaturan Aplikasi > Fungsi Cloud Code.
Klik "Edit kode" untuk membuka editor Cloud Code.
6.2.2. Inisialisasi npm dan Instal Paket Stripe
Di terminal Cloud Code (yang disediakan di editor), jalankan:
Bash
npm init -y
npm install [email protected]
npm init -y
npm install stripe@8.174.0
﻿
Catatan: Cloud Code Back4App menggunakan versi Node.js 14.x, jadi pastikan kompatibilitas.
6.3. Buat Fungsi Cloud untuk Tujuan Pembayaran
Buat atau modifikasi main.js di editor 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);
  }
});
﻿
Ganti 'YOUR_STRIPE_SECRET_KEY' dengan kunci rahasia Stripe Anda yang sebenarnya.
Catatan Keamanan: Jangan pernah mengekspos kunci rahasia Anda di sisi klien. Simpan dengan aman di Cloud Code.
6.4. Terapkan Cloud Code
Klik "Terapkan" di editor Cloud Code untuk menerapkan fungsi Anda.
6.5. Implementasi Pembayaran di Flutter
6.5.1. Inisialisasi Stripe di Flutter
Di main.dart, setelah Parse().initialize, tambahkan:
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';
﻿
Ganti 'YOUR_STRIPE_PUBLISHABLE_KEY' dengan kunci publik Stripe Anda.
6.5.2. Buat Layar Checkout
Tambahkan checkout_screen.dart di bawah 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. Tangani Konfirmasi Pembayaran
Buat order_confirmation_screen.dart di bawah 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. Menyimpan Pesanan ke Back4App
Modifikasi _processPayment metode untuk menyimpan detail pesanan:
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')),
  );
}
﻿
  
Langkah 7 – Pelacakan Pesanan
7.1. Buat Layanan Pesanan
Tambahkan order_service.dart di bawah 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. Buat Model Pesanan
Tambahkan order.dart di bawah 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. Buat Layar Pesanan
Tambahkan orders_screen.dart di bawah 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)}'),
              );
            },
          );
        },
      ),
    );
  }
}
﻿
  
Langkah 8 – Ulasan dan Penilaian
8.1. Buat Layanan Ulasan
Tambahkan review_service.dart di bawah 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. Buat Model Ulasan
Tambahkan review.dart di bawah 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. Perbarui Layar Detail Produk
Di product_detail_screen.dart, tambahkan bagian untuk menampilkan dan mengirim ulasan.
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'),
          ),
        ],
      ),
    ],
  ),
),
﻿
  
Kesimpulan
Dalam tutorial komprehensif ini, Anda telah membangun aplikasi e-commerce menggunakan Flutter dan Back4App, terintegrasi dengan Stripe untuk pemrosesan pembayaran yang aman melalui Cloud Code. Anda menerapkan fitur kunci seperti daftar produk, fungsionalitas keranjang belanja, otentikasi pengguna, pelacakan pesanan, dan ulasan.
Poin Penting
Integrasi Back4App: Menyederhanakan manajemen backend untuk aplikasi Flutter Anda.
Integrasi Stripe melalui Cloud Code: Memproses pembayaran dengan aman tanpa mengekspos kunci sensitif.
Arsitektur Modular: Memisahkan layanan dan model meningkatkan pemeliharaan.
Langkah Selanjutnya
Tingkatkan Keamanan: Terapkan penanganan kesalahan yang tepat dan validasi input.
Peningkatan UI/UX: Perbaiki antarmuka pengguna untuk pengalaman pengguna yang lebih baik.
Manajemen Inventaris: Perbarui inventaris produk setelah pembelian.
Notifikasi Email: Kirim email konfirmasi pesanan kepada pengguna.
Panel Admin: Buat antarmuka admin untuk mengelola produk dan pesanan.
Sumber Daya Tambahan
﻿Dokumentasi Back4App﻿
﻿Panduan Parse Server﻿
﻿Dokumentasi Resmi Flutter﻿
﻿Referensi API Stripe﻿
﻿Paket Flutter Stripe﻿
Selamat Berkoding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Membangun Aplikasi Obrolan Real-Time di Flutter dengan Back4App
BERIKUTNYA
Cara Membangun Aplikasi Penerjemah Suara AI Menggunakan Flutter dan Back4App