플러터 템플릿
Flutter와 Back4App을 사용하여 이벤트 예약 앱을 만드는 방법

34min
소개
오늘날의 빠르게 변화하는 세상에서 모바일 애플리케이션을 통해 이벤트와 예약을 관리하는 것이 점점 더 중요해졌습니다. 이벤트 예약 앱은 사용자가 다가오는 이벤트를 탐색하고, 티켓을 예약하고, 좌석을 선택하고, 예약을 원활하게 관리할 수 있도록 합니다. 이 튜토리얼에서는 프론트엔드에 Flutter를 사용하고 백엔드 서비스로 Back4App을 사용하는 완전한 이벤트 예약 앱을 만드는 방법을 배울 것입니다.
이 튜토리얼이 끝나면 다음과 같은 기능을 갖춘 앱을 만들게 됩니다:
이벤트의 세부정보와 함께 이벤트 목록을 표시합니다.
사용자가 이벤트 일정과 장소 정보를 볼 수 있도록 합니다.
좌석 선택이 가능한 티켓 예약을 가능하게 합니다.
안전하게 결제를 처리합니다 (결제 게이트웨이와의 통합).
예약 내역 및 선호도를 포함한 사용자 프로필을 관리합니다.
시작해봅시다!
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
Flutter SDK 로컬 머신에 설치합니다. 공식 Flutter 설치 가이드를 따르세요.
Dart 및 Flutter에 대한 기본 지식이 필요합니다. Flutter가 처음이라면 Flutter의 소개 튜토리얼을 진행해 보세요.
Back4App 계정을 만드세요. Back4App에서 무료 계정에 가입하세요.
Back4App Flutter SDK를 프로젝트에 통합합니다. 설정 방법은 Back4App Flutter 가이드를 따라 배울 수 있습니다.
코드 편집기가 필요합니다. Visual Studio Code 또는 Android Studio와 같은.
Node.js 및 npm이 Back4App 클라우드 기능을 실행하기 위해 설치되어야 합니다. 공식 Node.js 웹사이트에서 설치하세요.
1단계 – Back4App 백엔드 설정
이 단계에서는 Back4App 프로젝트를 설정하고, 필요한 클래스(테이블)를 생성하며, 이벤트 데이터, 티켓 정보 및 사용자 프로필을 저장하기 위해 백엔드를 구성합니다.
1.1. 새 Back4App 애플리케이션 만들기
Back4App 계정에 로그인하세요.
클릭하세요 "새 앱 만들기".
앱 이름을 입력하세요 앱 이름 (예: "EventBookingApp") 및 앱 아이콘을 선택하세요.
클릭하세요 "생성".
1.2. 애플리케이션 키 구성하기
앱의 대시보드로 이동하세요.
클릭하세요 "앱 설정" > "보안 및 키".
다음 사항을 기록하세요: 애플리케이션 ID 및 클라이언트 키. Flutter 앱에서 Parse SDK를 초기화하는 데 필요합니다.
1.3. 데이터 모델 정의하기
Back4App에서 다음 클래스를 생성해야 합니다:
이벤트: 이벤트 세부정보를 저장합니다.
장소: 장소 정보를 저장합니다.
티켓: 티켓 가용성 및 예약을 관리합니다.
사용자: 사용자 프로필을 관리합니다 (기본 클래스).
이벤트 클래스 생성하기
왼쪽 사이드바에서 "Database"를 클릭하여 데이터 브라우저를 엽니다.
 "Create a class"를 클릭합니다.
 "Custom", 클래스 이름으로 "Event"을 입력하고 "Create class"를 클릭합니다.
다음 열을 Event 클래스에 추가합니다:
이름 (문자열)
설명 (문자열)
날짜 (날짜)
이미지 (파일)
장소 (장소에 대한 포인터)
가격 (숫자)
장소 클래스 만들기
새 클래스 이름으로 "Venue"를 만들기 위해 단계를 반복합니다.
다음 열을 추가합니다:
이름 (문자열)
주소 (문자열)
수용 인원 (숫자)
좌석 배치도 (파일)
티켓 클래스 생성
새로운 클래스를 생성합니다: "Ticket".
다음 열을 추가합니다:
이벤트 (이벤트에 대한 포인터)
사용자 (사용자에 대한 포인터)
좌석 번호 (문자열)
가격 (숫자)
예약됨 (부울)
1.4. 사용자 인증 활성화
왼쪽 사이드바에서 "서버 설정" > "일반 설정"을 클릭합니다.
"인증" 아래에서 "클래스 수준 권한 활성화"가 체크되어 있는지 확인합니다.
사용자가 가입하고 로그인할 수 있도록 사용자 클래스 권한을 구성합니다.
1.5. 클라우드 함수 설정 (결제 처리 선택 사항)
결제 통합을 위해 클라우드 함수를 작성해야 할 수 있습니다. 이 단계는 선택한 결제 게이트웨이에 따라 다릅니다 (예: Stripe, PayPal). 클라우드 코드 함수에 대한 Back4App의 문서를 참조하십시오.
2단계 – Flutter 프로젝트 초기화
이 단계에서는 Flutter 프로젝트를 설정하고 Back4App Parse SDK를 통합합니다.
2.1. 새 Flutter 프로젝트 만들기
터미널을 열고 다음을 실행하세요:
Bash
flutter create event_booking_app
flutter create event_booking_app
﻿
프로젝트 디렉토리로 이동하세요:
Bash
cd event_booking_app
cd event_booking_app
﻿
2.2. 의존성 추가
 pubspec.yaml 파일을 열고 다음 의존성을 추가하세요:
YAML
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  parse_server_sdk_flutter: ^4.0.1
  provider: ^6.0.0
  # Add any additional packages you need, e.g., http, image_picker, etc.
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  parse_server_sdk_flutter: ^4.0.1
  provider: ^6.0.0
  # Add any additional packages you need, e.g., http, image_picker, etc.
﻿
다음 명령어를 실행하여 flutter pub get 패키지를 설치하세요.
2.3. Parse SDK 초기화
 lib/main.dart, 필요한 패키지를 가져오고 Parse를 초기화하세요:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APPLICATION_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
    autoSendSessionId: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // Build your app's UI here
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APPLICATION_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
    autoSendSessionId: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // Build your app's UI here
}
﻿
'YOUR_BACK4APP_APPLICATION_ID'와 'YOUR_BACK4APP_CLIENT_KEY'를 Back4App에서 실제 키로 교체하세요.
3단계 – 사용자 인증 구현
사용자는 이벤트를 예약하고 프로필을 관리하기 위해 가입하고 로그인해야 합니다.
3.1. 인증 화면 만들기
lib/ 디렉토리에 두 개의 새로운 Dart 파일을 만드세요.
login_screen.dart
signup_screen.dart
로그인 화면.dart
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController usernameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  void doUserLogin() async {
    final username = usernameController.text.trim();
    final password = passwordController.text.trim();

    final user = ParseUser(username, password, null);
    var response = await user.login();

    if (response.success) {
      // Navigate to Home Screen
      Navigator.pushReplacementNamed(context, '/home');
    } else {
      // Show error message
      _showError(response.error!.message);
    }
  }

  void _showError(String message) {
    // Implement a method to show error messages
  }

  @override
  Widget build(BuildContext context) {
    // Build your login UI here
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController usernameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  void doUserLogin() async {
    final username = usernameController.text.trim();
    final password = passwordController.text.trim();

    final user = ParseUser(username, password, null);
    var response = await user.login();

    if (response.success) {
      // Navigate to Home Screen
      Navigator.pushReplacementNamed(context, '/home');
    } else {
      // Show error message
      _showError(response.error!.message);
    }
  }

  void _showError(String message) {
    // Implement a method to show error messages
  }

  @override
  Widget build(BuildContext context) {
    // Build your login UI here
  }
}
﻿
회원가입 화면.dart
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class SignUpScreen extends StatefulWidget {
  @override
  _SignUpScreenState createState() => _SignUpScreenState();
}

class _SignUpScreenState extends State<SignUpScreen> {
  final TextEditingController usernameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  void doUserRegistration() async {
    final username = usernameController.text.trim();
    final password = passwordController.text.trim();

    final user = ParseUser(username, password, null);
    var response = await user.signUp();

    if (response.success) {
      // Navigate to Home Screen
      Navigator.pushReplacementNamed(context, '/home');
    } else {
      // Show error message
      _showError(response.error!.message);
    }
  }

  void _showError(String message) {
    // Implement a method to show error messages
  }

  @override
  Widget build(BuildContext context) {
    // Build your sign-up UI here
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class SignUpScreen extends StatefulWidget {
  @override
  _SignUpScreenState createState() => _SignUpScreenState();
}

class _SignUpScreenState extends State<SignUpScreen> {
  final TextEditingController usernameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  void doUserRegistration() async {
    final username = usernameController.text.trim();
    final password = passwordController.text.trim();

    final user = ParseUser(username, password, null);
    var response = await user.signUp();

    if (response.success) {
      // Navigate to Home Screen
      Navigator.pushReplacementNamed(context, '/home');
    } else {
      // Show error message
      _showError(response.error!.message);
    }
  }

  void _showError(String message) {
    // Implement a method to show error messages
  }

  @override
  Widget build(BuildContext context) {
    // Build your sign-up UI here
  }
}
﻿
3.2. main.dart를 경로로 업데이트
Dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Event Booking App',
      initialRoute: '/login',
      routes: {
        '/login': (context) => LoginScreen(),
        '/signup': (context) => SignUpScreen(),
        '/home': (context) => HomeScreen(),
        // Add other routes as needed
      },
    );
  }
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Event Booking App',
      initialRoute: '/login',
      routes: {
        '/login': (context) => LoginScreen(),
        '/signup': (context) => SignUpScreen(),
        '/home': (context) => HomeScreen(),
        // Add other routes as needed
      },
    );
  }
}
﻿
3.3. 홈 화면 구현
인증된 사용자가 리디렉션되는 home_screen.dart 파일을 생성합니다.
Dart
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Build your home screen UI here
  }
}
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Build your home screen UI here
  }
}
﻿
4단계 – 이벤트 표시
Back4App에서 이벤트를 가져와 목록에 표시합니다.
4.1. 이벤트 모델 생성
Dart 클래스 event.dart를 lib/models/에 생성합니다.
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Event extends ParseObject implements ParseCloneable {
  Event() : super(_keyTableName);
  Event.clone() : this();

  static const String _keyTableName = 'Event';
  static const String keyName = 'name';
  static const String keyDescription = 'description';
  static const String keyDate = 'date';
  static const String keyImage = 'image';
  static const String keyVenue = 'venue';
  static const String keyPrice = 'price';

  @override
  clone(Map<String, dynamic> map) => Event.clone()..fromJson(map);

  String? get name => get<String>(keyName);
  String? get description => get<String>(keyDescription);
  DateTime? get date => get<DateTime>(keyDate);
  ParseFileBase? get image => get<ParseFileBase>(keyImage);
  ParseObject? get venue => get<ParseObject>(keyVenue);
  double? get price => get<double>(keyPrice);
}
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Event extends ParseObject implements ParseCloneable {
  Event() : super(_keyTableName);
  Event.clone() : this();

  static const String _keyTableName = 'Event';
  static const String keyName = 'name';
  static const String keyDescription = 'description';
  static const String keyDate = 'date';
  static const String keyImage = 'image';
  static const String keyVenue = 'venue';
  static const String keyPrice = 'price';

  @override
  clone(Map<String, dynamic> map) => Event.clone()..fromJson(map);

  String? get name => get<String>(keyName);
  String? get description => get<String>(keyDescription);
  DateTime? get date => get<DateTime>(keyDate);
  ParseFileBase? get image => get<ParseFileBase>(keyImage);
  ParseObject? get venue => get<ParseObject>(keyVenue);
  double? get price => get<double>(keyPrice);
}
﻿
4.2. 홈 화면에서 이벤트 가져오기
홈 화면에서 home_screen.dart, 이벤트를 가져와서 표시합니다.
Dart
import 'package:flutter/material.dart';
import 'models/event.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

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

class _HomeScreenState extends State<HomeScreen> {
  Future<List<Event>> getEvents() async {
    QueryBuilder<Event> queryEvents = QueryBuilder<Event>(Event())
      ..orderByDescending('date');
    final ParseResponse apiResponse = await queryEvents.query();

    if (apiResponse.success && apiResponse.results != null) {
      return apiResponse.results as List<Event>;
    } else {
      return [];
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Events'),
      ),
      body: FutureBuilder<List<Event>>(
        future: getEvents(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            List<Event> events = snapshot.data!;
            return ListView.builder(
              itemCount: events.length,
              itemBuilder: (context, index) {
                Event event = events[index];
                return ListTile(
                  title: Text(event.name ?? 'No Title'),
                  subtitle: Text(event.date?.toLocal().toString() ?? ''),
                  onTap: () {
                    // Navigate to Event Details
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => EventDetailsScreen(event: event),
                      ),
                    );
                  },
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('Error loading events'));
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'models/event.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

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

class _HomeScreenState extends State<HomeScreen> {
  Future<List<Event>> getEvents() async {
    QueryBuilder<Event> queryEvents = QueryBuilder<Event>(Event())
      ..orderByDescending('date');
    final ParseResponse apiResponse = await queryEvents.query();

    if (apiResponse.success && apiResponse.results != null) {
      return apiResponse.results as List<Event>;
    } else {
      return [];
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Events'),
      ),
      body: FutureBuilder<List<Event>>(
        future: getEvents(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            List<Event> events = snapshot.data!;
            return ListView.builder(
              itemCount: events.length,
              itemBuilder: (context, index) {
                Event event = events[index];
                return ListTile(
                  title: Text(event.name ?? 'No Title'),
                  subtitle: Text(event.date?.toLocal().toString() ?? ''),
                  onTap: () {
                    // Navigate to Event Details
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => EventDetailsScreen(event: event),
                      ),
                    );
                  },
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('Error loading events'));
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}
﻿
4.3. 이벤트 세부정보 화면 만들기
생성 event_details_screen.dart.
Dart
import 'package:flutter/material.dart';
import 'models/event.dart';

class EventDetailsScreen extends StatelessWidget {
  final Event event;

  EventDetailsScreen({required this.event});

  void _bookTicket(BuildContext context) {
    // Implement ticket booking logic
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => SeatSelectionScreen(event: event),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // Build UI to display event details
    return Scaffold(
      appBar: AppBar(
        title: Text(event.name ?? 'Event Details'),
      ),
      body: Column(
        children: [
          // Display event image, description, date, venue, etc.
          Text(event.description ?? ''),
          ElevatedButton(
            onPressed: () => _bookTicket(context),
            child: Text('Book Ticket'),
          ),
        ],
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'models/event.dart';

class EventDetailsScreen extends StatelessWidget {
  final Event event;

  EventDetailsScreen({required this.event});

  void _bookTicket(BuildContext context) {
    // Implement ticket booking logic
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => SeatSelectionScreen(event: event),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // Build UI to display event details
    return Scaffold(
      appBar: AppBar(
        title: Text(event.name ?? 'Event Details'),
      ),
      body: Column(
        children: [
          // Display event image, description, date, venue, etc.
          Text(event.description ?? ''),
          ElevatedButton(
            onPressed: () => _bookTicket(context),
            child: Text('Book Ticket'),
          ),
        ],
      ),
    );
  }
}
﻿
5단계 – 좌석 선택 구현
사용자가 예약하기 전에 좌석을 선택할 수 있도록 허용합니다.
5.1. 좌석 선택 화면 만들기
다음과 같이 seat_selection_screen.dart 파일을 만듭니다.
Dart
import 'package:flutter/material.dart';
import 'models/event.dart';

class SeatSelectionScreen extends StatelessWidget {
  final Event event;

  SeatSelectionScreen({required this.event});

  // Mock data for seats
  final List<String> seats = List.generate(100, (index) => 'Seat ${index + 1}');

  @override
  Widget build(BuildContext context) {
    // Build UI for seat selection
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Seats'),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 5,
        ),
        itemCount: seats.length,
        itemBuilder: (context, index) {
          String seat = seats[index];
          return GestureDetector(
            onTap: () {
              // Handle seat selection
              // Navigate to Payment Screen
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => PaymentScreen(event: event, seat: seat),
                ),
              );
            },
            child: Card(
              child: Center(child: Text(seat)),
            ),
          );
        },
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'models/event.dart';

class SeatSelectionScreen extends StatelessWidget {
  final Event event;

  SeatSelectionScreen({required this.event});

  // Mock data for seats
  final List<String> seats = List.generate(100, (index) => 'Seat ${index + 1}');

  @override
  Widget build(BuildContext context) {
    // Build UI for seat selection
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Seats'),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 5,
        ),
        itemCount: seats.length,
        itemBuilder: (context, index) {
          String seat = seats[index];
          return GestureDetector(
            onTap: () {
              // Handle seat selection
              // Navigate to Payment Screen
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => PaymentScreen(event: event, seat: seat),
                ),
              );
            },
            child: Card(
              child: Center(child: Text(seat)),
            ),
          );
        },
      ),
    );
  }
}
﻿
6단계 – 결제 처리
결제 게이트웨이를 통합하여 티켓 결제를 안전하게 처리합니다.
6.1. 결제 게이트웨이 선택
이 튜토리얼에서는 Stripe를 사용할 것이라고 가정합니다.
6.2. Stripe 계정 설정 및 API 키 받기
 Stripe 계정에 가입합니다.
당신의 발행 가능 키와 비밀 키를 받습니다.
6.3. Stripe 의존성 추가
다음과 같이 stripe_payment 패키지를 pubspec.yaml:
YAML
dependencies:
  stripe_payment: ^1.0.9
dependencies:
  stripe_payment: ^1.0.9
﻿
실행 flutter pub get.
6.4. 결제 화면 구현하기
생성 payment_screen.dart.
Dart
import 'package:flutter/material.dart';
import 'package:stripe_payment/stripe_payment.dart';
import 'models/event.dart';

class PaymentScreen extends StatefulWidget {
  final Event event;
  final String seat;

  PaymentScreen({required this.event, required this.seat});

  @override
  _PaymentScreenState createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  void initState() {
    super.initState();
    StripePayment.setOptions(
      StripeOptions(
        publishableKey: 'YOUR_STRIPE_PUBLISHABLE_KEY',
        // Optionally set other options
      ),
    );
  }

  void _startPayment() async {
    // Implement payment logic
    // Create Payment Method
    PaymentMethod paymentMethod = await StripePayment.paymentRequestWithCardForm(
      CardFormPaymentRequest(),
    );

    // Process the payment using a cloud function or your server
    // For simplicity, we'll assume payment is successful

    _saveTicket();
  }

  void _saveTicket() async {
    // Save ticket information to Back4App
    final ticket = ParseObject('Ticket')
      ..set('event', widget.event)
      ..set('user', await ParseUser.currentUser())
      ..set('seatNumber', widget.seat)
      ..set('price', widget.event.price)
      ..set('isBooked', true);

    await ticket.save();

    // Navigate to confirmation screen or display success message
  }

  @override
  Widget build(BuildContext context) {
    // Build payment UI
    return Scaffold(
      appBar: AppBar(
        title: Text('Payment'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _startPayment,
          child: Text('Pay \$${widget.event.price}'),
        ),
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:stripe_payment/stripe_payment.dart';
import 'models/event.dart';

class PaymentScreen extends StatefulWidget {
  final Event event;
  final String seat;

  PaymentScreen({required this.event, required this.seat});

  @override
  _PaymentScreenState createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  void initState() {
    super.initState();
    StripePayment.setOptions(
      StripeOptions(
        publishableKey: 'YOUR_STRIPE_PUBLISHABLE_KEY',
        // Optionally set other options
      ),
    );
  }

  void _startPayment() async {
    // Implement payment logic
    // Create Payment Method
    PaymentMethod paymentMethod = await StripePayment.paymentRequestWithCardForm(
      CardFormPaymentRequest(),
    );

    // Process the payment using a cloud function or your server
    // For simplicity, we'll assume payment is successful

    _saveTicket();
  }

  void _saveTicket() async {
    // Save ticket information to Back4App
    final ticket = ParseObject('Ticket')
      ..set('event', widget.event)
      ..set('user', await ParseUser.currentUser())
      ..set('seatNumber', widget.seat)
      ..set('price', widget.event.price)
      ..set('isBooked', true);

    await ticket.save();

    // Navigate to confirmation screen or display success message
  }

  @override
  Widget build(BuildContext context) {
    // Build payment UI
    return Scaffold(
      appBar: AppBar(
        title: Text('Payment'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _startPayment,
          child: Text('Pay \$${widget.event.price}'),
        ),
      ),
    );
  }
}
﻿
노트: 결제 처리는 민감한 데이터의 안전한 처리가 필요합니다. 프로덕션 앱에서는 자체 서버 또는 클라우드 함수를 사용하여 안전하게 결제를 처리해야 합니다.
7단계 – 사용자 프로필 관리
사용자가 자신의 예약 및 선호도를 보고 관리할 수 있도록 허용합니다.
7.1. 프로필 화면 만들기
생성 profile_screen.dart.
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ProfileScreen extends StatelessWidget {
  Future<List<ParseObject>> getUserTickets() async {
    final user = await ParseUser.currentUser();
    QueryBuilder<ParseObject> queryTickets = QueryBuilder<ParseObject>(ParseObject('Ticket'))
      ..whereEqualTo('user', user)
      ..includeObject(['event']);

    final ParseResponse apiResponse = await queryTickets.query();

    if (apiResponse.success && apiResponse.results != null) {
      return apiResponse.results as List<ParseObject>;
    } else {
      return [];
    }
  }

  @override
  Widget build(BuildContext context) {
    // Build profile UI
    return Scaffold(
      appBar: AppBar(
        title: Text('My Profile'),
      ),
      body: FutureBuilder<List<ParseObject>>(
        future: getUserTickets(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            List<ParseObject> tickets = snapshot.data!;
            return ListView.builder(
              itemCount: tickets.length,
              itemBuilder: (context, index) {
                ParseObject ticket = tickets[index];
                ParseObject event = ticket.get('event');
                return ListTile(
                  title: Text(event.get<String>('name') ?? 'No Event Name'),
                  subtitle: Text('Seat: ${ticket.get<String>('seatNumber')}'),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('Error loading tickets'));
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ProfileScreen extends StatelessWidget {
  Future<List<ParseObject>> getUserTickets() async {
    final user = await ParseUser.currentUser();
    QueryBuilder<ParseObject> queryTickets = QueryBuilder<ParseObject>(ParseObject('Ticket'))
      ..whereEqualTo('user', user)
      ..includeObject(['event']);

    final ParseResponse apiResponse = await queryTickets.query();

    if (apiResponse.success && apiResponse.results != null) {
      return apiResponse.results as List<ParseObject>;
    } else {
      return [];
    }
  }

  @override
  Widget build(BuildContext context) {
    // Build profile UI
    return Scaffold(
      appBar: AppBar(
        title: Text('My Profile'),
      ),
      body: FutureBuilder<List<ParseObject>>(
        future: getUserTickets(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            List<ParseObject> tickets = snapshot.data!;
            return ListView.builder(
              itemCount: tickets.length,
              itemBuilder: (context, index) {
                ParseObject ticket = tickets[index];
                ParseObject event = ticket.get('event');
                return ListTile(
                  title: Text(event.get<String>('name') ?? 'No Event Name'),
                  subtitle: Text('Seat: ${ticket.get<String>('seatNumber')}'),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('Error loading tickets'));
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}
﻿
7.2. 프로필 화면에 내비게이션 추가
당신의 home_screen.dart 또는 메인 내비게이션 드로어에 프로필 화면에 대한 링크를 추가하세요.
Dart
IconButton(
  icon: Icon(Icons.person),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => ProfileScreen()),
    );
  },
),
IconButton(
  icon: Icon(Icons.person),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => ProfileScreen()),
    );
  },
),
﻿
8단계 – 앱 테스트
다음 명령어로 앱을 실행하세요:
Bash
flutter run
flutter run
﻿
다음 기능을 테스트하세요:
회원가입 및 로그인.
이벤트 목록 보기.
이벤트 세부정보 보기.
좌석 선택 후 결제 진행.
결제 처리 (가능한 경우 테스트 모드).
프로필에서 예약 보기.
결론
축하합니다! Flutter와 Back4App을 사용하여 완전한 이벤트 예약 앱을 구축했습니다. 이 앱은 사용자가 이벤트를 탐색하고, 좌석 선택과 함께 티켓을 예약하고, 결제를 처리하며, 프로필과 예약을 관리할 수 있도록 합니다.
여기에서 앱을 향상시킬 수 있습니다:
이벤트 알림을 위한 푸시 알림 추가.
이벤트 검색 및 필터링 구현.
더 나은 디자인과 애니메이션으로 UI/UX 향상.
서버 측 검증으로 결제 처리 보안 강화.
Flutter와 Back4App 기능에 대한 자세한 정보는 다음을 확인하세요:
﻿Flutter 문서﻿
﻿Back4App 문서﻿
﻿Parse Server 클라우드 코드 가이드﻿
Flutter와 Back4App을 통합함으로써 확장 가능하고 기능이 풍부한 모바일 애플리케이션을 효율적으로 구축할 수 있는 강력한 조합을 활용하게 됩니다.
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Flutter와 Back4App으로 AR 언어 몰입 앱 구축하기.
플러터와 Back4App을 사용하여 실시간 채팅 애플리케이션 구축하기