플러터 템플릿
Flutter와 Back4App으로 소셜 네트워킹 앱 만들기

54min
소개
소셜 네트워킹 앱을 만드는 것은 복잡한 작업일 수 있지만, Flutter와 Back4App을 사용하면 개발 프로세스를 간소화할 수 있습니다. 이 튜토리얼은 사용자 인증, 프로필 관리, 뉴스 피드, 친구 연결, 메시징 및 알림을 포함한 기능이 완전한 소셜 네트워킹 앱을 구축하는 방법을 안내합니다.
이 튜토리얼이 끝나면 다음과 같은 기능을 갖춘 작동하는 소셜 네트워킹 앱을 갖게 됩니다:
사용자 인증: 안전한 가입 및 로그인 프로세스.
사용자 프로필: 사용자 정보가 포함된 편집 가능한 프로필.
뉴스 피드: 친구와 사용자의 게시물 표시.
친구 연결: 친구 요청을 보내고 수락할 수 있는 기능.
메시징: 사용자 간의 실시간 채팅.
알림: 친구 요청, 메시지 및 게시물 상호작용에 대한 푸시 알림.
전제 조건
이 튜토리얼을 따라 하려면 다음이 필요합니다:
Flutter SDK가 당신의 컴퓨터에 설치되어 있어야 합니다. 공식 Flutter 설치 가이드를 따라 당신의 운영 체제에 맞게 설치하세요.
Flutter와 Dart에 대한 기본 지식. Flutter가 처음이라면, Flutter 문서를 검토하여 기본 사항을 익히세요.
IDE 또는 텍스트 편집기가 필요합니다. 예를 들어 Visual Studio Code 또는 Android Studio.
 Back4App 계정. Back4App에서 무료 계정을 등록하세요.
Flutter용 Parse Server SDK가 당신의 프로젝트에 추가되어야 합니다. Back4App Flutter SDK 가이드를 따라 설정하는 방법을 배우세요.
1단계 – Flutter 프로젝트 설정하기
1.1. 새 Flutter 프로젝트 만들기
터미널을 열고 다음을 실행하세요:
Bash
flutter create social_app
flutter create social_app
﻿
프로젝트 디렉토리로 이동:
Bash
cd social_app
cd social_app
﻿
1.2. 의존성 추가
열기 pubspec.yaml 그리고 다음 의존성을 추가하세요:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  provider: ^6.0.0
  image_picker: ^0.8.4+6
  cached_network_image: ^3.2.0
  firebase_messaging: ^11.2.8
  uuid: ^3.0.6
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  provider: ^6.0.0
  image_picker: ^0.8.4+6
  cached_network_image: ^3.2.0
  firebase_messaging: ^11.2.8
  uuid: ^3.0.6
﻿
다음 명령어를 실행하세요 flutter pub get 패키지를 설치합니다.
참고: 우리는 다음을 사용하고 있습니다:
parse_server_sdk_flutter Back4App 통합을 위해.
provider 상태 관리를 위해.
image_picker 프로필 및 게시물 이미지를 선택하기 위해.
cached_network_image 효율적인 이미지 로딩을 위해.
firebase_messaging 푸시 알림을 위해.
uuid 고유 ID 생성을 위해.
2단계 – Back4App 설정
2.1. 새로운 Back4App 애플리케이션 만들기
로그인하세요 Back4App 대시보드.
"새 앱 만들기"를 클릭하세요.
애플리케이션 이름을 입력하세요, 예: "SocialApp", 그리고 "생성"을 클릭하세요.
2.2. 데이터 모델 설정하기
Back4App에서 여러 클래스를 만들어야 합니다:
사용자: 사용자 인증을 위한 내장 클래스입니다.
프로필: 사용자 프로필 정보를 저장합니다.
게시물: 사용자 게시물을 저장합니다.
친구 요청: 사용자 간의 친구 요청을 관리합니다.
메시지: 사용자 간의 메시지를 저장합니다.
2.2.1. 프로필 클래스
"데이터베이스" 섹션으로 이동합니다.
"클래스 만들기"를 클릭합니다.
모달에서:
"사용자 정의"를 선택합니다.
클래스 이름으로 "프로필"을 입력합니다.
"클래스 만들기"를 클릭합니다.
다음 열을 추가합니다:
사용자: 유형 Pointer<_User>
사용자 이름: 유형 String
전체 이름: 유형 String
소개: 유형 String
프로필 사진: 유형 File
2.2.2. 게시물 클래스
다음 열이 있는 "Post" 클래스를 만드세요:
user: 유형 Pointer<_User>
content: 유형 String
image: 유형 File
createdAt: 유형 Date
2.2.3. FriendRequest 클래스
다음 열이 있는 "FriendRequest" 클래스를 만드세요:
fromUser: 유형 Pointer<_User>
toUser: 유형 Pointer<_User>
status: 유형 String (값: "pending", "accepted", "rejected")
2.2.4. Message 클래스
다음 열이 있는 "Message" 클래스를 만드세요:
fromUser: 유형 Pointer<_User>
toUser: 유형 Pointer<_User>
content: 유형 String
createdAt: 유형 Date
2.3. 애플리케이션 자격 증명 얻기
다음으로 이동하세요 App Settings > Security & Keys.
당신의 Application ID와 Client Key를 적어두세요.
3단계 – Flutter 앱에서 Parse 초기화하기
열기 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 'services/auth_service.dart';
import 'screens/login_screen.dart';

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

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

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

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<AuthService>(
      create: (_) => AuthService(),
      child: MaterialApp(
        title: 'Social App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: LoginScreen(),
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import 'services/auth_service.dart';
import 'screens/login_screen.dart';

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

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

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

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<AuthService>(
      create: (_) => AuthService(),
      child: MaterialApp(
        title: 'Social App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: LoginScreen(),
      ),
    );
  }
}
﻿
다음으로 교체하세요 'YOUR_APPLICATION_ID' 및 'YOUR_CLIENT_KEY'를 Back4App 자격 증명으로.
우리는 ChangeNotifierProvider를 사용하여 인증 상태를 관리합니다.
4단계 – 사용자 인증 구현하기
4.1. 인증 서비스 만들기
새 디렉토리를 만들고 services를 lib 아래에 추가하고 auth_service.dart라는 이름의 파일을 추가하세요.
Dart
// lib/services/auth_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService with ChangeNotifier {
  ParseUser? user;

  Future<bool> signUp(String username, String password, String email) async {
    user = ParseUser.createUser(username, password, email);

    final response = await user!.signUp();

    if (response.success) {
      notifyListeners();
      return true;
    } else {
      user = null;
      return false;
    }
  }

  Future<bool> login(String username, String password) async {
    user = ParseUser(username, password, null);

    final response = await user!.login();

    if (response.success) {
      notifyListeners();
      return true;
    } else {
      user = null;
      return false;
    }
  }

  Future<void> logout() async {
    if (user != null) {
      await user!.logout();
      user = null;
      notifyListeners();
    }
  }

  bool get isAuthenticated => user != null;
}
// lib/services/auth_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService with ChangeNotifier {
  ParseUser? user;

  Future<bool> signUp(String username, String password, String email) async {
    user = ParseUser.createUser(username, password, email);

    final response = await user!.signUp();

    if (response.success) {
      notifyListeners();
      return true;
    } else {
      user = null;
      return false;
    }
  }

  Future<bool> login(String username, String password) async {
    user = ParseUser(username, password, null);

    final response = await user!.login();

    if (response.success) {
      notifyListeners();
      return true;
    } else {
      user = null;
      return false;
    }
  }

  Future<void> logout() async {
    if (user != null) {
      await user!.logout();
      user = null;
      notifyListeners();
    }
  }

  bool get isAuthenticated => user != null;
}
﻿
4.2. 로그인 및 회원가입 화면 만들기
새 디렉토리를 만들고 screens를 lib 아래에 추가하고 login_screen.dart와 signup_screen.dart를 추가하세요.
4.2.1. 로그인 화면
Dart
// lib/screens/login_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import 'signup_screen.dart';
import 'home_screen.dart';

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

class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    bool success = await authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );

    if (success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _login, child: Text('Login')),
            TextButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => SignupScreen()),
                );
              },
              child: Text('Don\'t have an account? Sign up'),
            )
          ],
        ),
      ),
    );
  }
}
// lib/screens/login_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import 'signup_screen.dart';
import 'home_screen.dart';

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

class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    bool success = await authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );

    if (success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _login, child: Text('Login')),
            TextButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => SignupScreen()),
                );
              },
              child: Text('Don\'t have an account? Sign up'),
            )
          ],
        ),
      ),
    );
  }
}
﻿
4.2.2. 가입 화면
Dart
// lib/screens/signup_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';

class SignupScreen extends StatefulWidget {
  @override
  _SignupScreenState createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();

  void _signUp() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    bool success = await authService.signUp(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
      _emailController.text.trim(),
    );

    if (success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Signup failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App Signup'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _signUp, child: Text('Sign Up')),
          ],
        ),
      ),
    );
  }
}
// lib/screens/signup_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';

class SignupScreen extends StatefulWidget {
  @override
  _SignupScreenState createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();

  void _signUp() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    bool success = await authService.signUp(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
      _emailController.text.trim(),
    );

    if (success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Signup failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App Signup'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _signUp, child: Text('Sign Up')),
          ],
        ),
      ),
    );
  }
}
﻿
5단계 – 사용자 프로필 설정
5.1. 프로필 서비스 만들기
다음 이름의 파일을 추가하세요: profile_service.dart 위치: lib/services/:
Dart
// lib/services/profile_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/profile.dart';

class ProfileService {
  Future<void> createProfile(ParseUser user) async {
    final profile = ParseObject('Profile')
      ..set('user', user)
      ..set('username', user.username);

    await profile.save();
  }

  Future<Profile?> getProfile(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Profile'))
      ..whereEqualTo('user', user);

    final response = await query.query();

    if (response.success && response.results != null) {
      final profileObject = response.results!.first;
      return Profile.fromParseObject(profileObject);
    } else {
      return null;
    }
  }

  Future<void> updateProfile(Profile profile) async {
    final profileObject = ParseObject('Profile')
      ..objectId = profile.id
      ..set('fullName', profile.fullName)
      ..set('bio', profile.bio);

    await profileObject.save();
  }
}
// lib/services/profile_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/profile.dart';

class ProfileService {
  Future<void> createProfile(ParseUser user) async {
    final profile = ParseObject('Profile')
      ..set('user', user)
      ..set('username', user.username);

    await profile.save();
  }

  Future<Profile?> getProfile(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Profile'))
      ..whereEqualTo('user', user);

    final response = await query.query();

    if (response.success && response.results != null) {
      final profileObject = response.results!.first;
      return Profile.fromParseObject(profileObject);
    } else {
      return null;
    }
  }

  Future<void> updateProfile(Profile profile) async {
    final profileObject = ParseObject('Profile')
      ..objectId = profile.id
      ..set('fullName', profile.fullName)
      ..set('bio', profile.bio);

    await profileObject.save();
  }
}
﻿
5.2. 프로필 모델 만들기
다음 이름의 파일을 추가하세요: profile.dart 위치: lib/models/:
Dart
// lib/models/profile.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Profile {
  String id;
  String username;
  String? fullName;
  String? bio;
  ParseFileBase? profilePicture;

  Profile({
    required this.id,
    required this.username,
    this.fullName,
    this.bio,
    this.profilePicture,
  });

  factory Profile.fromParseObject(ParseObject object) {
    return Profile(
      id: object.objectId!,
      username: object.get<String>('username')!,
      fullName: object.get<String>('fullName'),
      bio: object.get<String>('bio'),
      profilePicture: object.get<ParseFileBase>('profilePicture'),
    );
  }
}
// lib/models/profile.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Profile {
  String id;
  String username;
  String? fullName;
  String? bio;
  ParseFileBase? profilePicture;

  Profile({
    required this.id,
    required this.username,
    this.fullName,
    this.bio,
    this.profilePicture,
  });

  factory Profile.fromParseObject(ParseObject object) {
    return Profile(
      id: object.objectId!,
      username: object.get<String>('username')!,
      fullName: object.get<String>('fullName'),
      bio: object.get<String>('bio'),
      profilePicture: object.get<ParseFileBase>('profilePicture'),
    );
  }
}
﻿
5.3. 프로필 화면 만들기
다음 이름의 파일을 추가하세요 profile_screen.dart 아래에 lib/screens/:
Dart
// lib/screens/profile_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/profile_service.dart';
import '../models/profile.dart';

class ProfileScreen extends StatefulWidget {
  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  final ProfileService _profileService = ProfileService();
  Profile? profile;
  final TextEditingController _fullNameController = TextEditingController();
  final TextEditingController _bioController = TextEditingController();

  void _loadProfile() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    Profile? fetchedProfile = await _profileService.getProfile(user);

    if (fetchedProfile == null) {
      await _profileService.createProfile(user);
      fetchedProfile = await _profileService.getProfile(user);
    }

    setState(() {
      profile = fetchedProfile;
      _fullNameController.text = profile?.fullName ?? '';
      _bioController.text = profile?.bio ?? '';
    });
  }

  void _saveProfile() async {
    if (profile != null) {
      profile!.fullName = _fullNameController.text.trim();
      profile!.bio = _bioController.text.trim();
      await _profileService.updateProfile(profile!);
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Profile updated')));
    }
  }

  @override
  void initState() {
    super.initState();
    _loadProfile();
  }

  @override
  Widget build(BuildContext context) {
    if (profile == null) {
      return Scaffold(
        appBar: AppBar(title: Text('Profile')),
        body: Center(child: CircularProgressIndicator()),
      );
    }

    return Scaffold(
      appBar: AppBar(title: Text(profile!.username)),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // Add profile picture handling here
            TextField(
              controller: _fullNameController,
              decoration: InputDecoration(labelText: 'Full Name'),
            ),
            TextField(
              controller: _bioController,
              decoration: InputDecoration(labelText: 'Bio'),
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _saveProfile, child: Text('Save')),
          ],
        ),
      ),
    );
  }
}
// lib/screens/profile_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/profile_service.dart';
import '../models/profile.dart';

class ProfileScreen extends StatefulWidget {
  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  final ProfileService _profileService = ProfileService();
  Profile? profile;
  final TextEditingController _fullNameController = TextEditingController();
  final TextEditingController _bioController = TextEditingController();

  void _loadProfile() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    Profile? fetchedProfile = await _profileService.getProfile(user);

    if (fetchedProfile == null) {
      await _profileService.createProfile(user);
      fetchedProfile = await _profileService.getProfile(user);
    }

    setState(() {
      profile = fetchedProfile;
      _fullNameController.text = profile?.fullName ?? '';
      _bioController.text = profile?.bio ?? '';
    });
  }

  void _saveProfile() async {
    if (profile != null) {
      profile!.fullName = _fullNameController.text.trim();
      profile!.bio = _bioController.text.trim();
      await _profileService.updateProfile(profile!);
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Profile updated')));
    }
  }

  @override
  void initState() {
    super.initState();
    _loadProfile();
  }

  @override
  Widget build(BuildContext context) {
    if (profile == null) {
      return Scaffold(
        appBar: AppBar(title: Text('Profile')),
        body: Center(child: CircularProgressIndicator()),
      );
    }

    return Scaffold(
      appBar: AppBar(title: Text(profile!.username)),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // Add profile picture handling here
            TextField(
              controller: _fullNameController,
              decoration: InputDecoration(labelText: 'Full Name'),
            ),
            TextField(
              controller: _bioController,
              decoration: InputDecoration(labelText: 'Bio'),
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _saveProfile, child: Text('Save')),
          ],
        ),
      ),
    );
  }
}
﻿
6단계 – 뉴스 피드 구현
6.1. 게시물 서비스 만들기
다음 이름의 파일을 추가하세요: post_service.dart 아래에 lib/services/:
Dart
// lib/services/post_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/post.dart';

class PostService {
  Future<void> createPost(String content, ParseUser user) async {
    final post = ParseObject('Post')
      ..set('user', user)
      ..set('content', content);

    await post.save();
  }

  Future<List<Post>> getPosts(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Post'))
      ..orderByDescending('createdAt')
      ..includeObject(['user']);

    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results!.map((e) => Post.fromParseObject(e)).toList();
    } else {
      return [];
    }
  }
}
// lib/services/post_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/post.dart';

class PostService {
  Future<void> createPost(String content, ParseUser user) async {
    final post = ParseObject('Post')
      ..set('user', user)
      ..set('content', content);

    await post.save();
  }

  Future<List<Post>> getPosts(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Post'))
      ..orderByDescending('createdAt')
      ..includeObject(['user']);

    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results!.map((e) => Post.fromParseObject(e)).toList();
    } else {
      return [];
    }
  }
}
﻿
6.2. 게시물 모델 만들기
다음 이름의 파일을 추가하세요: post.dart 아래에 lib/models/:
Dart
// lib/models/post.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Post {
  String id;
  String content;
  ParseUser user;
  DateTime createdAt;

  Post({
    required this.id,
    required this.content,
    required this.user,
    required this.createdAt,
  });

  factory Post.fromParseObject(ParseObject object) {
    return Post(
      id: object.objectId!,
      content: object.get<String>('content')!,
      user: object.get<ParseUser>('user')!,
      createdAt: object.createdAt!,
    );
  }
}
// lib/models/post.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Post {
  String id;
  String content;
  ParseUser user;
  DateTime createdAt;

  Post({
    required this.id,
    required this.content,
    required this.user,
    required this.createdAt,
  });

  factory Post.fromParseObject(ParseObject object) {
    return Post(
      id: object.objectId!,
      content: object.get<String>('content')!,
      user: object.get<ParseUser>('user')!,
      createdAt: object.createdAt!,
    );
  }
}
﻿
6.3. 홈 화면 만들기
수정 home_screen.dart 아래의 lib/screens/:
Dart
// lib/screens/home_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/post_service.dart';
import '../models/post.dart';
import 'profile_screen.dart';

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

class _HomeScreenState extends State<HomeScreen> {
  final PostService _postService = PostService();
  List<Post> posts = [];
  final TextEditingController _postController = TextEditingController();

  void _loadPosts() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    List<Post> fetchedPosts = await _postService.getPosts(user);

    setState(() {
      posts = fetchedPosts;
    });
  }

  void _createPost() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    await _postService.createPost(_postController.text.trim(), user);
    _postController.clear();
    _loadPosts();
  }

  @override
  void initState() {
    super.initState();
    _loadPosts();
  }

  @override
  Widget build(BuildContext context) {
    final authService = Provider.of<AuthService>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App'),
        actions: [
          IconButton(
            icon: Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => ProfileScreen()),
              );
            },
          ),
          IconButton(
            icon: Icon(Icons.logout),
            onPressed: () async {
              await authService.logout();
              Navigator.pushReplacementNamed(context, '/');
            },
          ),
        ],
      ),
      body: Column(
        children: [
          TextField(
            controller: _postController,
            decoration: InputDecoration(
              hintText: 'What\'s on your mind?',
              contentPadding: EdgeInsets.all(16),
            ),
          ),
          ElevatedButton(onPressed: _createPost, child: Text('Post')),
          Expanded(
            child: ListView.builder(
              itemCount: posts.length,
              itemBuilder: (context, index) {
                final post = posts[index];
                return ListTile(
                  title: Text(post.user.username ?? 'Unknown'),
                  subtitle: Text(post.content),
                  trailing: Text(
                    post.createdAt.toLocal().toString(),
                    style: TextStyle(fontSize: 12),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
// lib/screens/home_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/post_service.dart';
import '../models/post.dart';
import 'profile_screen.dart';

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

class _HomeScreenState extends State<HomeScreen> {
  final PostService _postService = PostService();
  List<Post> posts = [];
  final TextEditingController _postController = TextEditingController();

  void _loadPosts() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    List<Post> fetchedPosts = await _postService.getPosts(user);

    setState(() {
      posts = fetchedPosts;
    });
  }

  void _createPost() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    await _postService.createPost(_postController.text.trim(), user);
    _postController.clear();
    _loadPosts();
  }

  @override
  void initState() {
    super.initState();
    _loadPosts();
  }

  @override
  Widget build(BuildContext context) {
    final authService = Provider.of<AuthService>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App'),
        actions: [
          IconButton(
            icon: Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => ProfileScreen()),
              );
            },
          ),
          IconButton(
            icon: Icon(Icons.logout),
            onPressed: () async {
              await authService.logout();
              Navigator.pushReplacementNamed(context, '/');
            },
          ),
        ],
      ),
      body: Column(
        children: [
          TextField(
            controller: _postController,
            decoration: InputDecoration(
              hintText: 'What\'s on your mind?',
              contentPadding: EdgeInsets.all(16),
            ),
          ),
          ElevatedButton(onPressed: _createPost, child: Text('Post')),
          Expanded(
            child: ListView.builder(
              itemCount: posts.length,
              itemBuilder: (context, index) {
                final post = posts[index];
                return ListTile(
                  title: Text(post.user.username ?? 'Unknown'),
                  subtitle: Text(post.content),
                  trailing: Text(
                    post.createdAt.toLocal().toString(),
                    style: TextStyle(fontSize: 12),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
﻿
7단계 – 친구 연결 추가
이 단계에서는 사용자 간의 친구 연결을 구현할 것입니다. 사용자는 친구 요청을 보내고, 이를 수락하거나 거부하며, 친구 목록을 볼 수 있습니다. 우리는 데이터 모델을 수정하고, 서비스를 생성하며, 이 기능을 지원하기 위해 UI를 업데이트할 것입니다.
7.1. 데이터 모델 업데이트
우리는 이미 다음 열이 있는 FriendRequest 클래스를 Back4App에서 생성했습니다:
fromUser: _User
toUser: _User
status: 문자열 (값: "pending", "accepted", "rejected")
추가적으로, 사용자의 친구 목록을 추적해야 합니다. 이를 위해 friends 관계를 _User 클래스에 추가할 수 있습니다.
7.1.1. 사용자 클래스에 친구 관계 추가하기
Back4App에서 User 클래스로 이동합니다.
새 열을 추가하려면 "+" 버튼을 클릭합니다.
열의 이름을 "friends"로 지정하고 유형을 Relation <_User>로 설정합니다.
7.2. 친구 요청 서비스 만들기
다음 위치에 friend_service.dart라는 파일을 생성합니다: lib/services/:
Dart
// lib/services/friend_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class FriendService {
  Future<bool> sendFriendRequest(ParseUser fromUser, ParseUser toUser) async {
    final friendRequest = ParseObject('FriendRequest')
      ..set('fromUser', fromUser)
      ..set('toUser', toUser)
      ..set('status', 'pending');

    final response = await friendRequest.save();
    return response.success;
  }

  Future<List<ParseObject>> getPendingRequests(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('FriendRequest'))
      ..whereEqualTo('toUser', user)
      ..whereEqualTo('status', 'pending')
      ..includeObject(['fromUser']);

    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results!;
    } else {
      return [];
    }
  }

  Future<bool> acceptFriendRequest(ParseObject friendRequest) async {
    friendRequest.set('status', 'accepted');
    final response = await friendRequest.save();

    if (response.success) {
      // Add each user to the other's friends relation
      final fromUser = friendRequest.get<ParseUser>('fromUser')!;
      final toUser = friendRequest.get<ParseUser>('toUser')!;

      fromUser.setAdd('friends', [toUser]);
      toUser.setAdd('friends', [fromUser]);

      await fromUser.save();
      await toUser.save();

      return true;
    }
    return false;
  }

  Future<bool> rejectFriendRequest(ParseObject friendRequest) async {
    friendRequest.set('status', 'rejected');
    final response = await friendRequest.save();
    return response.success;
  }

  Future<List<ParseUser>> getFriends(ParseUser user) async {
    final relation = user.getRelation<ParseUser>('friends');
    final query = relation.query();

    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results!.cast<ParseUser>();
    } else {
      return [];
    }
  }
}
// lib/services/friend_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class FriendService {
  Future<bool> sendFriendRequest(ParseUser fromUser, ParseUser toUser) async {
    final friendRequest = ParseObject('FriendRequest')
      ..set('fromUser', fromUser)
      ..set('toUser', toUser)
      ..set('status', 'pending');

    final response = await friendRequest.save();
    return response.success;
  }

  Future<List<ParseObject>> getPendingRequests(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('FriendRequest'))
      ..whereEqualTo('toUser', user)
      ..whereEqualTo('status', 'pending')
      ..includeObject(['fromUser']);

    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results!;
    } else {
      return [];
    }
  }

  Future<bool> acceptFriendRequest(ParseObject friendRequest) async {
    friendRequest.set('status', 'accepted');
    final response = await friendRequest.save();

    if (response.success) {
      // Add each user to the other's friends relation
      final fromUser = friendRequest.get<ParseUser>('fromUser')!;
      final toUser = friendRequest.get<ParseUser>('toUser')!;

      fromUser.setAdd('friends', [toUser]);
      toUser.setAdd('friends', [fromUser]);

      await fromUser.save();
      await toUser.save();

      return true;
    }
    return false;
  }

  Future<bool> rejectFriendRequest(ParseObject friendRequest) async {
    friendRequest.set('status', 'rejected');
    final response = await friendRequest.save();
    return response.success;
  }

  Future<List<ParseUser>> getFriends(ParseUser user) async {
    final relation = user.getRelation<ParseUser>('friends');
    final query = relation.query();

    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results!.cast<ParseUser>();
    } else {
      return [];
    }
  }
}
﻿
7.3. UI 업데이트
7.3.1. 사용자 검색 화면 추가
파일 이름을 생성하십시오 search_users_screen.dart 아래에 lib/screens/:
Dart
// lib/screens/search_users_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/friend_service.dart';

class SearchUsersScreen extends StatefulWidget {
  @override
  _SearchUsersScreenState createState() => _SearchUsersScreenState();
}

class _SearchUsersScreenState extends State<SearchUsersScreen> {
  final TextEditingController _searchController = TextEditingController();
  List<ParseUser> users = [];
  final FriendService _friendService = FriendService();

  void _searchUsers() async {
    final query = QueryBuilder<ParseUser>(ParseUser.forQuery())
      ..whereContains('username', _searchController.text.trim())
      ..whereNotEqualTo('objectId', Provider.of<AuthService>(context, listen: false).user!.objectId);

    final response = await query.query();
    if (response.success && response.results != null) {
      setState(() {
        users = response.results!.cast<ParseUser>();
      });
    } else {
      setState(() {
        users = [];
      });
    }
  }

  void _sendFriendRequest(ParseUser toUser) async {
    final fromUser = Provider.of<AuthService>(context, listen: false).user!;
    bool success = await _friendService.sendFriendRequest(fromUser, toUser);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request sent')));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to send friend request')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search Users'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              controller: _searchController,
              decoration: InputDecoration(
                hintText: 'Search by username',
                suffixIcon: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: _searchUsers,
                ),
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) {
                final user = users[index];
                return ListTile(
                  title: Text(user.username ?? 'Unknown'),
                  trailing: ElevatedButton(
                    onPressed: () => _sendFriendRequest(user),
                    child: Text('Add Friend'),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
// lib/screens/search_users_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/friend_service.dart';

class SearchUsersScreen extends StatefulWidget {
  @override
  _SearchUsersScreenState createState() => _SearchUsersScreenState();
}

class _SearchUsersScreenState extends State<SearchUsersScreen> {
  final TextEditingController _searchController = TextEditingController();
  List<ParseUser> users = [];
  final FriendService _friendService = FriendService();

  void _searchUsers() async {
    final query = QueryBuilder<ParseUser>(ParseUser.forQuery())
      ..whereContains('username', _searchController.text.trim())
      ..whereNotEqualTo('objectId', Provider.of<AuthService>(context, listen: false).user!.objectId);

    final response = await query.query();
    if (response.success && response.results != null) {
      setState(() {
        users = response.results!.cast<ParseUser>();
      });
    } else {
      setState(() {
        users = [];
      });
    }
  }

  void _sendFriendRequest(ParseUser toUser) async {
    final fromUser = Provider.of<AuthService>(context, listen: false).user!;
    bool success = await _friendService.sendFriendRequest(fromUser, toUser);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request sent')));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to send friend request')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search Users'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              controller: _searchController,
              decoration: InputDecoration(
                hintText: 'Search by username',
                suffixIcon: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: _searchUsers,
                ),
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) {
                final user = users[index];
                return ListTile(
                  title: Text(user.username ?? 'Unknown'),
                  trailing: ElevatedButton(
                    onPressed: () => _sendFriendRequest(user),
                    child: Text('Add Friend'),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
﻿
7.3.2. 친구 요청 화면 추가
다음 위치에 friend_requests_screen.dart라는 파일을 생성합니다: lib/screens/:
Dart
// lib/screens/friend_requests_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/friend_service.dart';

class FriendRequestsScreen extends StatefulWidget {
  @override
  _FriendRequestsScreenState createState() => _FriendRequestsScreenState();
}

class _FriendRequestsScreenState extends State<FriendRequestsScreen> {
  final FriendService _friendService = FriendService();
  List<ParseObject> friendRequests = [];

  void _loadFriendRequests() async {
    final user = Provider.of<AuthService>(context, listen: false).user!;
    final requests = await _friendService.getPendingRequests(user);
    setState(() {
      friendRequests = requests;
    });
  }

  void _acceptRequest(ParseObject request) async {
    bool success = await _friendService.acceptFriendRequest(request);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request accepted')));
      _loadFriendRequests();
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to accept friend request')));
    }
  }

  void _rejectRequest(ParseObject request) async {
    bool success = await _friendService.rejectFriendRequest(request);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request rejected')));
      _loadFriendRequests();
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to reject friend request')));
    }
  }

  @override
  void initState() {
    super.initState();
    _loadFriendRequests();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Friend Requests'),
      ),
      body: ListView.builder(
        itemCount: friendRequests.length,
        itemBuilder: (context, index) {
          final request = friendRequests[index];
          final fromUser = request.get<ParseUser>('fromUser')!;
          return ListTile(
            title: Text(fromUser.username ?? 'Unknown'),
            subtitle: Text('Sent you a friend request'),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                IconButton(
                  icon: Icon(Icons.check, color: Colors.green),
                  onPressed: () => _acceptRequest(request),
                ),
                IconButton(
                  icon: Icon(Icons.close, color: Colors.red),
                  onPressed: () => _rejectRequest(request),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
// lib/screens/friend_requests_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/friend_service.dart';

class FriendRequestsScreen extends StatefulWidget {
  @override
  _FriendRequestsScreenState createState() => _FriendRequestsScreenState();
}

class _FriendRequestsScreenState extends State<FriendRequestsScreen> {
  final FriendService _friendService = FriendService();
  List<ParseObject> friendRequests = [];

  void _loadFriendRequests() async {
    final user = Provider.of<AuthService>(context, listen: false).user!;
    final requests = await _friendService.getPendingRequests(user);
    setState(() {
      friendRequests = requests;
    });
  }

  void _acceptRequest(ParseObject request) async {
    bool success = await _friendService.acceptFriendRequest(request);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request accepted')));
      _loadFriendRequests();
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to accept friend request')));
    }
  }

  void _rejectRequest(ParseObject request) async {
    bool success = await _friendService.rejectFriendRequest(request);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request rejected')));
      _loadFriendRequests();
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to reject friend request')));
    }
  }

  @override
  void initState() {
    super.initState();
    _loadFriendRequests();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Friend Requests'),
      ),
      body: ListView.builder(
        itemCount: friendRequests.length,
        itemBuilder: (context, index) {
          final request = friendRequests[index];
          final fromUser = request.get<ParseUser>('fromUser')!;
          return ListTile(
            title: Text(fromUser.username ?? 'Unknown'),
            subtitle: Text('Sent you a friend request'),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                IconButton(
                  icon: Icon(Icons.check, color: Colors.green),
                  onPressed: () => _acceptRequest(request),
                ),
                IconButton(
                  icon: Icon(Icons.close, color: Colors.red),
                  onPressed: () => _rejectRequest(request),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
﻿
7.3.3. 홈 화면 내비게이션 업데이트
다음 위치에 home_screen.dart, 사용자 검색 및 친구 요청 화면으로의 내비게이션을 추가합니다:
Dart
// Inside AppBar actions
IconButton(
  icon: Icon(Icons.person_add),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => SearchUsersScreen()),
    );
  },
),
IconButton(
  icon: Icon(Icons.notifications),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => FriendRequestsScreen()),
    );
  },
),
// Inside AppBar actions
IconButton(
  icon: Icon(Icons.person_add),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => SearchUsersScreen()),
    );
  },
),
IconButton(
  icon: Icon(Icons.notifications),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => FriendRequestsScreen()),
    );
  },
),
﻿
7.4. 친구의 게시물을 표시하도록 뉴스 피드 업데이트
 getPosts 메서드를 post_service.dart에서 수정하여 사용자와 그들의 친구로부터 게시물을 가져옵니다.
Dart
// lib/services/post_service.dart
Future<List<Post>> getPosts(ParseUser user) async {
  // Get friends
  final relation = user.getRelation<ParseUser>('friends');
  final friendsQuery = relation.query();

  final friendsResponse = await friendsQuery.query();

  List<String> userIds = [user.objectId!];
  if (friendsResponse.success && friendsResponse.results != null) {
    final friends = friendsResponse.results!.cast<ParseUser>();
    userIds.addAll(friends.map((friend) => friend.objectId!));
  }

  // Fetch posts from user and friends
  final query = QueryBuilder<ParseObject>(ParseObject('Post'))
    ..whereContainedIn('user', userIds.map((id) => ParseUser(null, null, null)..objectId = id).toList())
    ..orderByDescending('createdAt')
    ..includeObject(['user']);

  final response = await query.query();

  if (response.success && response.results != null) {
    return response.results!.map((e) => Post.fromParseObject(e)).toList();
  } else {
    return [];
  }
}
// lib/services/post_service.dart
Future<List<Post>> getPosts(ParseUser user) async {
  // Get friends
  final relation = user.getRelation<ParseUser>('friends');
  final friendsQuery = relation.query();

  final friendsResponse = await friendsQuery.query();

  List<String> userIds = [user.objectId!];
  if (friendsResponse.success && friendsResponse.results != null) {
    final friends = friendsResponse.results!.cast<ParseUser>();
    userIds.addAll(friends.map((friend) => friend.objectId!));
  }

  // Fetch posts from user and friends
  final query = QueryBuilder<ParseObject>(ParseObject('Post'))
    ..whereContainedIn('user', userIds.map((id) => ParseUser(null, null, null)..objectId = id).toList())
    ..orderByDescending('createdAt')
    ..includeObject(['user']);

  final response = await query.query();

  if (response.success && response.results != null) {
    return response.results!.map((e) => Post.fromParseObject(e)).toList();
  } else {
    return [];
  }
}
﻿
8단계 – 메시징 구현
이 단계에서는 실시간 메시징을 추가하여 사용자 간의 소통을 가능하게 합니다.
8.1. Back4App에서 실시간 쿼리 활성화하기
Back4App 앱 대시보드에서 앱 설정 > 서버 설정으로 이동합니다.
서버 URL 아래에서 서버 URL, 서버 URL을 기록해 두세요 (예: https://YOUR_APP_NAME.back4app.io).
Back4App에서는 기본적으로 실시간 쿼리가 활성화되어 있습니다.
8.2. Flutter에서 실시간 쿼리 설정하기
이 parse_server_sdk_flutter 패키지는 실시간 쿼리 지원을 포함합니다.
8.3. 메시징 서비스 만들기
lib/services/ 아래에 message_service.dart라는 이름의 파일을 만듭니다.
Dart
// lib/services/message_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/message.dart';

class MessageService {
  ParseLiveList<Message>? liveMessageList;

  Future<void> sendMessage(ParseUser fromUser, ParseUser toUser, String content) async {
    final message = ParseObject('Message')
      ..set('fromUser', fromUser)
      ..set('toUser', toUser)
      ..set('content', content);

    await message.save();
  }

  Future<void> subscribeToMessages(ParseUser user, ParseUser otherUser, Function(List<Message>) onMessagesUpdated) async {
    final queryBuilder = QueryBuilder<ParseObject>(ParseObject('Message'))
      ..whereEqualTo('fromUser', user)
      ..whereEqualTo('toUser', otherUser)
      ..orderByAscending('createdAt')
      ..includeObject(['fromUser', 'toUser']);

    liveMessageList = ParseLiveList<Message>(queryBuilder, listenOnAllSubItems: true);

    liveMessageList!.stream.listen((event) {
      onMessagesUpdated(liveMessageList!.items);
    });
  }

  Future<void> dispose() async {
    await liveMessageList?.dispose();
  }
}
// lib/services/message_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/message.dart';

class MessageService {
  ParseLiveList<Message>? liveMessageList;

  Future<void> sendMessage(ParseUser fromUser, ParseUser toUser, String content) async {
    final message = ParseObject('Message')
      ..set('fromUser', fromUser)
      ..set('toUser', toUser)
      ..set('content', content);

    await message.save();
  }

  Future<void> subscribeToMessages(ParseUser user, ParseUser otherUser, Function(List<Message>) onMessagesUpdated) async {
    final queryBuilder = QueryBuilder<ParseObject>(ParseObject('Message'))
      ..whereEqualTo('fromUser', user)
      ..whereEqualTo('toUser', otherUser)
      ..orderByAscending('createdAt')
      ..includeObject(['fromUser', 'toUser']);

    liveMessageList = ParseLiveList<Message>(queryBuilder, listenOnAllSubItems: true);

    liveMessageList!.stream.listen((event) {
      onMessagesUpdated(liveMessageList!.items);
    });
  }

  Future<void> dispose() async {
    await liveMessageList?.dispose();
  }
}
﻿
8.4. 메시지 모델 만들기
lib/models/ 아래에 message.dart라는 이름의 파일을 추가합니다.
Dart
// lib/models/message.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Message extends ParseObject implements ParseCloneable {
  Message() : super('Message');

  Message.clone() : this();

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

  ParseUser get fromUser => get<ParseUser>('fromUser')!;
  ParseUser get toUser => get<ParseUser>('toUser')!;
  String get content => get<String>('content')!;
}
// lib/models/message.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Message extends ParseObject implements ParseCloneable {
  Message() : super('Message');

  Message.clone() : this();

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

  ParseUser get fromUser => get<ParseUser>('fromUser')!;
  ParseUser get toUser => get<ParseUser>('toUser')!;
  String get content => get<String>('content')!;
}
﻿
8.5. 채팅 화면 만들기
다음 이름의 파일을 추가하세요 chat_screen.dart 아래에 lib/screens/:
Dart
// lib/screens/chat_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../models/message.dart';
import '../services/auth_service.dart';
import '../services/message_service.dart';

class ChatScreen extends StatefulWidget {
  final ParseUser otherUser;

  ChatScreen({required this.otherUser});

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

class _ChatScreenState extends State<ChatScreen> {
  final MessageService _messageService = MessageService();
  List<Message> messages = [];
  final TextEditingController _messageController = TextEditingController();

  void _sendMessage() {
    final authService = Provider.of<AuthService>(context, listen: false);
    final fromUser = authService.user!;
    final toUser = widget.otherUser;

    _messageService.sendMessage(fromUser, toUser, _messageController.text.trim());
    _messageController.clear();
  }

  void _onMessagesUpdated(List<Message> updatedMessages) {
    setState(() {
      messages = updatedMessages;
    });
  }

  @override
  void initState() {
    super.initState();
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    _messageService.subscribeToMessages(user, widget.otherUser, _onMessagesUpdated);
  }

  @override
  void dispose() {
    _messageService.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;

    return Scaffold(
      appBar: AppBar(title: Text(widget.otherUser.username ?? 'Chat')),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: messages.map((message) {
                bool isMe = message.fromUser.objectId == user.objectId;
                return ListTile(
                  title: Align(
                    alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
                    child: Container(
                      padding: EdgeInsets.all(10),
                      color: isMe ? Colors.blueAccent : Colors.grey[300],
                      child: Text(
                        message.content,
                        style: TextStyle(color: isMe ? Colors.white : Colors.black),
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
          Divider(height: 1),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 8.0),
            color: Theme.of(context).cardColor,
            child: Row(
              children: [
                Flexible(
                  child: TextField(
                    controller: _messageController,
                    decoration: InputDecoration.collapsed(hintText: 'Send a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: _sendMessage,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
// lib/screens/chat_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../models/message.dart';
import '../services/auth_service.dart';
import '../services/message_service.dart';

class ChatScreen extends StatefulWidget {
  final ParseUser otherUser;

  ChatScreen({required this.otherUser});

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

class _ChatScreenState extends State<ChatScreen> {
  final MessageService _messageService = MessageService();
  List<Message> messages = [];
  final TextEditingController _messageController = TextEditingController();

  void _sendMessage() {
    final authService = Provider.of<AuthService>(context, listen: false);
    final fromUser = authService.user!;
    final toUser = widget.otherUser;

    _messageService.sendMessage(fromUser, toUser, _messageController.text.trim());
    _messageController.clear();
  }

  void _onMessagesUpdated(List<Message> updatedMessages) {
    setState(() {
      messages = updatedMessages;
    });
  }

  @override
  void initState() {
    super.initState();
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    _messageService.subscribeToMessages(user, widget.otherUser, _onMessagesUpdated);
  }

  @override
  void dispose() {
    _messageService.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;

    return Scaffold(
      appBar: AppBar(title: Text(widget.otherUser.username ?? 'Chat')),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: messages.map((message) {
                bool isMe = message.fromUser.objectId == user.objectId;
                return ListTile(
                  title: Align(
                    alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
                    child: Container(
                      padding: EdgeInsets.all(10),
                      color: isMe ? Colors.blueAccent : Colors.grey[300],
                      child: Text(
                        message.content,
                        style: TextStyle(color: isMe ? Colors.white : Colors.black),
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
          Divider(height: 1),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 8.0),
            color: Theme.of(context).cardColor,
            child: Row(
              children: [
                Flexible(
                  child: TextField(
                    controller: _messageController,
                    decoration: InputDecoration.collapsed(hintText: 'Send a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: _sendMessage,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
﻿
8.6. UI 업데이트하여 채팅 시작하기
친구 목록이나 사용자 검색 화면에서 채팅을 시작할 수 있습니다.
친구 목록에서 친구를 표시할 때, 채팅을 시작하는 버튼을 추가하세요:
Dart
// Inside the ListTile for a friend
trailing: IconButton(
  icon: Icon(Icons.chat),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => ChatScreen(otherUser: friend)),
    );
  },
),
// Inside the ListTile for a friend
trailing: IconButton(
  icon: Icon(Icons.chat),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => ChatScreen(otherUser: friend)),
    );
  },
),
﻿
9단계 – 푸시 알림 추가하기
푸시 알림을 구현하려면 Firebase Cloud Messaging (FCM)을 설정하고 Back4App과 통합해야 합니다.
9.1. Firebase Cloud Messaging 구성하기
9.1.1. Firebase 프로젝트 설정하기
이동하여 Firebase 콘솔에서 새 프로젝트를 만듭니다.
Android 및/또는 iOS 앱을 프로젝트에 추가합니다.
Android의 경우 패키지 이름 (applicationId)이 필요합니다.
iOS의 경우 번들 식별자가 필요합니다.
9.1.2. 구성 파일 다운로드
Android의 경우: google-services.json을 다운로드하고 android/app/에 배치합니다.
iOS의 경우: GoogleService-Info.plist을 다운로드하고 Xcode 프로젝트의 Runner에 추가합니다.
9.2. firebase_messaging 패키지 추가하기
다음이 추가되었는지 확인하십시오. firebase_messaging가 pubspec.yaml:
YAML
dependencies:
  firebase_messaging: ^11.2.8
dependencies:
  firebase_messaging: ^11.2.8
﻿
실행하십시오. flutter pub get을 설치합니다.
9.3. Flutter에서 Firebase 초기화하기
수정하기 main.dart:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:firebase_core/firebase_core.dart';
// Other imports

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Initialize Parse as before

  runApp(MyApp());
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:firebase_core/firebase_core.dart';
// Other imports

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Initialize Parse as before

  runApp(MyApp());
}
﻿
9.4. Firebase 메시징 구성하기
다음 위치에 push_notification_service.dart라는 파일을 생성하기 lib/services/:
Dart
// lib/services/push_notification_service.dart
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class PushNotificationService {
  final FirebaseMessaging _fcm = FirebaseMessaging.instance;

  Future<void> init() async {
    // Request permissions (iOS)
    await _fcm.requestPermission();

    // Get the token
    String? token = await _fcm.getToken();

    if (token != null) {
      // Save the token to Parse Installation
      final installation = await ParseInstallation.currentInstallation();
      installation.set('deviceToken', token);
      await installation.save();
    }

    // Handle foreground messages
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Received a message in the foreground!');
      // Handle the message
    });
  }
}
// lib/services/push_notification_service.dart
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class PushNotificationService {
  final FirebaseMessaging _fcm = FirebaseMessaging.instance;

  Future<void> init() async {
    // Request permissions (iOS)
    await _fcm.requestPermission();

    // Get the token
    String? token = await _fcm.getToken();

    if (token != null) {
      // Save the token to Parse Installation
      final installation = await ParseInstallation.currentInstallation();
      installation.set('deviceToken', token);
      await installation.save();
    }

    // Handle foreground messages
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Received a message in the foreground!');
      // Handle the message
    });
  }
}
﻿
9.5. main.dart를 업데이트하여 푸시 알림 초기화하기
에서 main.dart, Parse를 초기화한 후 PushNotificationService를 초기화합니다:
Dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Initialize Parse as before

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

  runApp(MyApp());
}
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Initialize Parse as before

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

  runApp(MyApp());
}
﻿
9.6. Back4App에서 푸시 알림 보내기
클라우드 코드 또는 서버에서 직접 푸시 알림을 보낼 수 있습니다.
9.6.1. 친구 요청 시 알림 보내기
사용자가 친구 요청을 보낼 때, 수신자에게 푸시 알림을 보낼 수 있습니다.
 friend_service.dart, sendFriendRequest 메서드를 수정하십시오:
Dart
Future<bool> sendFriendRequest(ParseUser fromUser, ParseUser toUser) async {
  // Existing code to create friend request

  // Send push notification
  final pushQuery = QueryBuilder<ParseInstallation>(ParseInstallation.forQuery())
    ..whereEqualTo('user', toUser);

  await ParsePush().send(
    PushPayload(
      query: pushQuery,
      notification: ParseNotification(
        title: 'New Friend Request',
        alert: '${fromUser.username} sent you a friend request',
      ),
    ),
  );

  return response.success;
}
Future<bool> sendFriendRequest(ParseUser fromUser, ParseUser toUser) async {
  // Existing code to create friend request

  // Send push notification
  final pushQuery = QueryBuilder<ParseInstallation>(ParseInstallation.forQuery())
    ..whereEqualTo('user', toUser);

  await ParsePush().send(
    PushPayload(
      query: pushQuery,
      notification: ParseNotification(
        title: 'New Friend Request',
        alert: '${fromUser.username} sent you a friend request',
      ),
    ),
  );

  return response.success;
}
﻿
참고: 설치가 사용자와 연결되어 있는지 확인하십시오.
9.7. 사용자와 설치 연결하기
사용자가 로그인할 때, 그들의 설치를 사용자 계정과 연결하십시오.
 auth_service.dart, 로그인 성공 후:
Dart
Future<bool> login(String username, String password) async {
  user = ParseUser(username, password, null);

  final response = await user!.login();

  if (response.success) {
    // Associate installation with user
    final installation = await ParseInstallation.currentInstallation();
    installation.set('user', user);
    await installation.save();

    notifyListeners();
    return true;
  } else {
    user = null;
    return false;
  }
}
Future<bool> login(String username, String password) async {
  user = ParseUser(username, password, null);

  final response = await user!.login();

  if (response.success) {
    // Associate installation with user
    final installation = await ParseInstallation.currentInstallation();
    installation.set('user', user);
    await installation.save();

    notifyListeners();
    return true;
  } else {
    user = null;
    return false;
  }
}
﻿
참고: 푸시 알림은 클라이언트와 서버 측 모두에서 추가 설정이 필요합니다. 백그라운드 알림 및 사용자 권한과 같은 다양한 시나리오를 처리해야 하며, 이는 이 튜토리얼의 범위를 넘어섭니다.
﻿
결론
축하합니다! Flutter와 Back4App을 사용하여 소셜 네트워킹 앱의 기초를 구축했습니다. 이 앱에는 사용자 인증, 프로필 관리 및 뉴스 피드 기능이 포함되어 있습니다. 전체 친구 연결, 메시징 및 알림 구현은 이 튜토리얼의 범위를 넘어가지만, 이제 앱을 계속 확장할 수 있는 필요한 구조를 갖추게 되었습니다.
다음 단계
친구 연결: 친구 요청 기능을 구현합니다.
메시징: 실시간 채팅 기능을 Live Queries를 사용하여 추가합니다.
알림: 사용자 참여를 위한 푸시 알림을 통합합니다.
UI 개선: 사용자 인터페이스와 사용자 경험을 개선합니다.
보안: Back4App에서 적절한 ACL을 설정하여 데이터 보안과 개인 정보를 보장합니다.
추가 자료
﻿Back4App 문서﻿
﻿Flutter용 Parse SDK 가이드﻿
﻿Flutter 공식 문서﻿
﻿Provider 패키지 문서﻿
행복한 코딩!
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Flutter와 Back4App을 사용하여 AI 음성 번역기 앱을 만드는 방법
ReactJS와 Back4App으로 블로깅 플랫폼 SPA 만들기