플러터 템플릿
Flutter와 Back4App으로 AR 언어 몰입 앱 구축하기.

39min
소개
이 튜토리얼에서는 Flutter와 Back4App을 사용하여 증강 현실(AR) 언어 몰입 앱을 구축합니다. 이 앱은 AR 기술을 활용하여 장치의 카메라를 통해 객체를 인식하고, 번역을 오버레이하며, 문화 정보를 제공하고, 사용자 진행 상황을 추적합니다. 이 튜토리얼이 끝나면 사용자가 실제 상황에서 새로운 언어를 배우는 데 도움이 되는 기능적인 앱을 갖게 됩니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
Flutter 설치됨 로컬 머신에. 아직 설정하지 않았다면, Flutter 설치 가이드를 따르세요.
Back4App 계정. 무료 계정에 가입하려면 Back4App를 방문하세요.
Back4App 애플리케이션. Back4App 시작하기 가이드를 따라 새 앱을 만드세요.
Dart 및 Flutter에 대한 기본 지식. 필요하다면 Flutter 문서에 익숙해지세요.
Dart에서 RESTful API 및 비동기 프로그래밍에 대한 기본 이해.
1단계 – Flutter 프로젝트 설정
먼저 AR 언어 몰입 앱을 개발할 새 Flutter 프로젝트를 설정하세요.
1.1. 새 Flutter 프로젝트 만들기
터미널을 열고 다음 명령어를 실행하세요:
Bash
flutter create ar_language_immersion_app
flutter create ar_language_immersion_app
﻿
이 명령어는 ar_language_immersion_app이라는 이름의 새로운 Flutter 프로젝트를 생성합니다.
1.2. IDE에서 프로젝트 열기
프로젝트 디렉토리로 이동하여 선호하는 IDE(예: Visual Studio Code, Android Studio)에서 엽니다:
Bash
cd ar_language_immersion_app
cd ar_language_immersion_app
﻿
2단계 – Back4App 백엔드 구성
사용자 데이터, 번역, 문화 정보 및 사용자 진행 상황 추적을 처리하기 위해 Back4App에서 백엔드를 설정하세요.
2.1. Back4App에서 새 애플리케이션 만들기
Back4App 계정에 로그인합니다.
"Create new App"을 클릭합니다.
앱 이름으로 "AR Language Immersion App"을 입력합니다.
"Create"를 클릭합니다.
2.2. 데이터 모델 설정하기
데이터 모델에 따라 클래스를 정의합니다:
사용자
인식 가능한 객체
번역
문화 정보
사용자 진행 상황
2.2.1. 사용자 클래스 만들기
사용자" 클래스는 사용자 인증을 처리하기 위해 Back4App의 기본 클래스입니다.
Back4App 대시보드에서 Core > Browser로 이동합니다.
이미 _User 클래스가 사용 가능하다는 것을 볼 수 있습니다.
2.2.2. RecognizableObject 클래스 만들기
클릭하여 "클래스 만들기".
"사용자 정의"를 선택하고 "RecognizableObject"로 이름을 지정합니다.
클릭하여 "클래스 만들기".
다음 열을 추가합니다:
이름 (문자열)
카테고리 (문자열)
ImageReference (파일)
2.2.3. Translation 클래스 만들기
"Translation"라는 이름의 또 다른 클래스를 만듭니다.
다음 열을 추가합니다:
objectId (문자열) [기본값]
ObjectID (RecognizableObject에 대한 포인터)
LanguageCode (문자열)
TranslatedText (문자열)
PronunciationGuide (문자열)
AudioFileReference (파일)
2.2.4. CulturalInfo 클래스 만들기
클래스 이름을 "CulturalInfo"로 생성합니다.
다음 열을 추가합니다:
ObjectID (인식 가능한 객체에 대한 포인터)
LanguageCode (문자열)
ShortDescription (문자열)
DetailedInformation (문자열)
RelatedMediaReferences (파일 배열)
2.2.5. UserProgress 클래스를 생성합니다.
사용자 ID (사용자에 대한 포인터)
인식된 객체들 (인식 가능한 객체 ID의 배열)
조회된 번역 (번역 ID의 배열)
접근된 문화 정보 (문화 정보 ID의 배열)
학습 연속성 (숫자)
숙련도 점수 (사전)
2.3. 애플리케이션 키 검색
이동하여 앱 설정 > 보안 및 키.
당신의 애플리케이션 ID와 클라이언트 키를 적어 두세요; Flutter 앱에서 Parse를 초기화하는 데 필요합니다.
3단계 – Parse SDK를 Flutter에 통합하기
Back4App에서 제공하는 Parse SDK를 Flutter 프로젝트에 통합하여 백엔드와 통신합니다.
3.1. 종속성 추가
 pubspec.yaml을 열고 다음 종속성을 추가합니다:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  camera: ^0.10.0
  flutter_spinkit: ^5.1.0
  augmented_reality_plugin: ^0.0.1 # Hypothetical AR plugin
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  camera: ^0.10.0
  flutter_spinkit: ^5.1.0
  augmented_reality_plugin: ^0.0.1 # Hypothetical AR plugin
﻿
다음 명령을 실행합니다:
Bash
flutter pub get
flutter pub get
﻿
참고: augmented_reality_plugin이라는 공식 AR 플러그인이 없으므로, Android의 경우 arcore_flutter_plugin과 iOS의 경우 arkit_plugin과 같은 플러그인을 사용해야 할 수 있습니다. 대상 플랫폼에 따라 조정하세요.
3.2. 앱에서 Parse 초기화
앱 시작 시 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 String applicationId = 'YOUR_APPLICATION_ID';
  const String clientKey = 'YOUR_CLIENT_KEY';
  const String parseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    applicationId,
    parseServerUrl,
    clientKey: clientKey,
    autoSendSessionId: true,
    debug: true,
  );

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

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

  const String applicationId = 'YOUR_APPLICATION_ID';
  const String clientKey = 'YOUR_CLIENT_KEY';
  const String parseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    applicationId,
    parseServerUrl,
    clientKey: clientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}
﻿
'YOUR_APPLICATION_ID'를 'YOUR_APPLICATION_ID' 및 'YOUR_CLIENT_KEY'를 Back4App에서 얻은 키로 교체하세요.
4단계 – 사용자 인증 구현
사용자 등록 및 로그인 기능을 구현합니다.
4.1. 인증 화면 만들기
새 파일을 생성합니다 lib/screens/auth_screen.dart.
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  bool isLogin = true;
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

  Future<void> _submit() async {
    if (isLogin) {
      final user = ParseUser(
        _usernameController.text.trim(),
        _passwordController.text.trim(),
        null,
      );
      var response = await user.login();

      if (response.success) {
        // Navigate to main app
        Navigator.of(context).pushReplacementNamed('/home');
      } else {
        // Show error
        _showError(response.error.message);
      }
    } else {
      final user = ParseUser(
        _usernameController.text.trim(),
        _passwordController.text.trim(),
        _usernameController.text.trim() + '@example.com', // Placeholder email
      );
      var response = await user.signUp();

      if (response.success) {
        // Navigate to main app
        Navigator.of(context).pushReplacementNamed('/home');
      } else {
        // Show error
        _showError(response.error.message);
      }
    }
  }

  void _showError(String message) {
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: Text('An error occurred!'),
        content: Text(message),
        actions: [
          TextButton(
            child: Text('Okay'),
            onPressed: () => Navigator.of(ctx).pop(),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(isLogin ? 'Login' : 'Sign Up'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                controller: _usernameController,
                decoration: InputDecoration(labelText: 'Username'),
              ),
              TextField(
                controller: _passwordController,
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                child: Text(isLogin ? 'Login' : 'Sign Up'),
                onPressed: _submit,
              ),
              TextButton(
                child: Text(isLogin
                    ? 'Don\'t have an account? Sign Up'
                    : 'Already have an account? Login'),
                onPressed: () {
                  setState(() {
                    isLogin = !isLogin;
                  });
                },
              ),
            ],
          ),
        ));
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  bool isLogin = true;
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

  Future<void> _submit() async {
    if (isLogin) {
      final user = ParseUser(
        _usernameController.text.trim(),
        _passwordController.text.trim(),
        null,
      );
      var response = await user.login();

      if (response.success) {
        // Navigate to main app
        Navigator.of(context).pushReplacementNamed('/home');
      } else {
        // Show error
        _showError(response.error.message);
      }
    } else {
      final user = ParseUser(
        _usernameController.text.trim(),
        _passwordController.text.trim(),
        _usernameController.text.trim() + '@example.com', // Placeholder email
      );
      var response = await user.signUp();

      if (response.success) {
        // Navigate to main app
        Navigator.of(context).pushReplacementNamed('/home');
      } else {
        // Show error
        _showError(response.error.message);
      }
    }
  }

  void _showError(String message) {
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: Text('An error occurred!'),
        content: Text(message),
        actions: [
          TextButton(
            child: Text('Okay'),
            onPressed: () => Navigator.of(ctx).pop(),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(isLogin ? 'Login' : 'Sign Up'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                controller: _usernameController,
                decoration: InputDecoration(labelText: 'Username'),
              ),
              TextField(
                controller: _passwordController,
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                child: Text(isLogin ? 'Login' : 'Sign Up'),
                onPressed: _submit,
              ),
              TextButton(
                child: Text(isLogin
                    ? 'Don\'t have an account? Sign Up'
                    : 'Already have an account? Login'),
                onPressed: () {
                  setState(() {
                    isLogin = !isLogin;
                  });
                },
              ),
            ],
          ),
        ));
  }
}
﻿
4.2. 업데이트 main.dart에 경로 포함하기
에서 lib/main.dart, 당신의 MaterialApp을(를) 업데이트하여 경로를 포함하세요:
Dart
import 'screens/auth_screen.dart';
import 'screens/home_screen.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AR Language Immersion',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthScreen(),
      routes: {
        '/home': (ctx) => HomeScreen(),
      },
    );
  }
}
import 'screens/auth_screen.dart';
import 'screens/home_screen.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AR Language Immersion',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthScreen(),
      routes: {
        '/home': (ctx) => HomeScreen(),
      },
    );
  }
}
﻿
5단계 – AR 객체 인식 구현
장치의 카메라를 사용하여 객체를 인식하는 AR 기능을 설정합니다.
5.1. 권한 설정
Android와 iOS 모두에서 카메라 권한을 요청해야 합니다.
안드로이드
다음의 android/app/src/main/AndroidManifest.xml, 추가하세요:
XML
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.CAMERA" />
﻿
iOS
다음의 ios/Runner/Info.plist, 추가하세요:
XML
<key>NSCameraUsageDescription</key>
<string>We need to access your camera to recognize objects for language learning.</string>
<key>NSCameraUsageDescription</key>
<string>We need to access your camera to recognize objects for language learning.</string>
﻿
5.2. AR 뷰 구현하기
새 파일을 생성하세요 lib/screens/ar_view_screen.dart.
Dart
import 'package:flutter/material.dart';
// Import your AR plugin here

class ARViewScreen extends StatefulWidget {
  @override
  _ARViewScreenState createState() => _ARViewScreenState();
}

class _ARViewScreenState extends State<ARViewScreen> {
  @override
  Widget build(BuildContext context) {
    // Placeholder for AR View
    return Scaffold(
      appBar: AppBar(
        title: Text('AR Language Immersion'),
      ),
      body: Center(
        child: Text('AR View Coming Soon'),
      ),
    );
  }
}
import 'package:flutter/material.dart';
// Import your AR plugin here

class ARViewScreen extends StatefulWidget {
  @override
  _ARViewScreenState createState() => _ARViewScreenState();
}

class _ARViewScreenState extends State<ARViewScreen> {
  @override
  Widget build(BuildContext context) {
    // Placeholder for AR View
    return Scaffold(
      appBar: AppBar(
        title: Text('AR Language Immersion'),
      ),
      body: Center(
        child: Text('AR View Coming Soon'),
      ),
    );
  }
}
﻿
참고: 전체 AR 객체 인식 구현은 복잡하며 TensorFlow Lite와 같은 기계 학습 모델과 통합하거나 Google의 ML Kit와 같은 플랫폼을 사용할 필요가 있을 수 있습니다. 이 튜토리얼에서는 객체 인식을 시뮬레이션합니다.
5.3. 객체 인식 시뮬레이션
시연을 위해 미리 정의된 객체를 표시하여 객체 인식을 시뮬레이션합니다.
업데이트 ar_view_screen.dart:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ARViewScreen extends StatefulWidget {
  @override
  _ARViewScreenState createState() => _ARViewScreenState();
}

class _ARViewScreenState extends State<ARViewScreen> {
  List<String> recognizedObjects = ['Apple', 'Book', 'Chair'];
  String selectedObject;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AR Language Immersion'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: Text(
                selectedObject != null
                    ? 'Recognized Object: $selectedObject'
                    : 'Point your camera at an object',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
          Container(
            height: 150,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: recognizedObjects.length,
              itemBuilder: (ctx, index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      selectedObject = recognizedObjects[index];
                    });
                  },
                  child: Card(
                    child: Container(
                      width: 100,
                      alignment: Alignment.center,
                      child: Text(recognizedObjects[index]),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ARViewScreen extends StatefulWidget {
  @override
  _ARViewScreenState createState() => _ARViewScreenState();
}

class _ARViewScreenState extends State<ARViewScreen> {
  List<String> recognizedObjects = ['Apple', 'Book', 'Chair'];
  String selectedObject;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AR Language Immersion'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: Text(
                selectedObject != null
                    ? 'Recognized Object: $selectedObject'
                    : 'Point your camera at an object',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
          Container(
            height: 150,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: recognizedObjects.length,
              itemBuilder: (ctx, index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      selectedObject = recognizedObjects[index];
                    });
                  },
                  child: Card(
                    child: Container(
                      width: 100,
                      alignment: Alignment.center,
                      child: Text(recognizedObjects[index]),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
﻿
6단계 – 번역 오버레이 표시
Back4App에서 번역을 가져와 오버레이로 표시합니다.
6.1. 번역 데이터 가져오기
In ar_view_screen.dart, add a method to fetch translations:
Dart
Future<String> getTranslation(String objectName) async {
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('Translation'))
        ..whereEqualTo('ObjectName', objectName)
        ..whereEqualTo('LanguageCode', 'es'); // Example target language

  var response = await query.query();

  if (response.success && response.results != null) {
    final translation = response.results.first;
    return translation.get<String>('TranslatedText');
  } else {
    return 'Translation not found';
  }
}
Future<String> getTranslation(String objectName) async {
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('Translation'))
        ..whereEqualTo('ObjectName', objectName)
        ..whereEqualTo('LanguageCode', 'es'); // Example target language

  var response = await query.query();

  if (response.success && response.results != null) {
    final translation = response.results.first;
    return translation.get<String>('TranslatedText');
  } else {
    return 'Translation not found';
  }
}
﻿
6.2. Update UI to Show Translation
Modify the build method:
Dart
...
Expanded(
  child: Center(
    child: selectedObject != null
        ? FutureBuilder<String>(
            future: getTranslation(selectedObject),
            builder: (ctx, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error fetching translation');
              } else {
                return Text(
                  snapshot.data,
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                );
              }
            },
          )
        : Text(
            'Point your camera at an object',
            style: TextStyle(fontSize: 20),
          ),
  ),
),
...
...
Expanded(
  child: Center(
    child: selectedObject != null
        ? FutureBuilder<String>(
            future: getTranslation(selectedObject),
            builder: (ctx, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error fetching translation');
              } else {
                return Text(
                  snapshot.data,
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                );
              }
            },
          )
        : Text(
            'Point your camera at an object',
            style: TextStyle(fontSize: 20),
          ),
  ),
),
...
﻿
Step 7 – Providing Cultural Information
Fetch and display cultural information related to the recognized object.
7.1. Fetch Cultural Information
메서드를 추가하십시오 ar_view_screen.dart:
Dart
Future<String> getCulturalInfo(String objectName) async {
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('CulturalInfo'))
        ..whereEqualTo('ObjectName', objectName)
        ..whereEqualTo('LanguageCode', 'es'); // Example target language

  var response = await query.query();

  if (response.success && response.results != null) {
    final info = response.results.first;
    return info.get<String>('ShortDescription');
  } else {
    return 'No cultural info available';
  }
}
Future<String> getCulturalInfo(String objectName) async {
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('CulturalInfo'))
        ..whereEqualTo('ObjectName', objectName)
        ..whereEqualTo('LanguageCode', 'es'); // Example target language

  var response = await query.query();

  if (response.success && response.results != null) {
    final info = response.results.first;
    return info.get<String>('ShortDescription');
  } else {
    return 'No cultural info available';
  }
}
﻿
7.2. UI를 업데이트하여 문화 정보 표시하기
다음의 build 메서드를 수정하십시오:
Dart
...
return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text(
      snapshot.data,
      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    ),
    SizedBox(height: 10),
    FutureBuilder<String>(
      future: getCulturalInfo(selectedObject),
      builder: (ctx, infoSnapshot) {
        if (infoSnapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (infoSnapshot.hasError) {
          return Text('Error fetching cultural info');
        } else {
          return Text(
            infoSnapshot.data,
            style: TextStyle(fontSize: 16),
          );
        }
      },
    ),
  ],
);
...
...
return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text(
      snapshot.data,
      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    ),
    SizedBox(height: 10),
    FutureBuilder<String>(
      future: getCulturalInfo(selectedObject),
      builder: (ctx, infoSnapshot) {
        if (infoSnapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (infoSnapshot.hasError) {
          return Text('Error fetching cultural info');
        } else {
          return Text(
            infoSnapshot.data,
            style: TextStyle(fontSize: 16),
          );
        }
      },
    ),
  ],
);
...
﻿
8단계 – 사용자 진행 상황 추적
사용자가 번역 또는 문화 정보를 볼 때마다 사용자의 진행 상황을 업데이트하십시오.
8.1. Back4App에서 UserProgress 업데이트
진행 상황을 업데이트하는 메서드를 추가하세요:
Dart
Future<void> updateUserProgress(String objectName) async {
  final currentUser = await ParseUser.currentUser() as ParseUser;

  // Fetch UserProgress
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('UserProgress'))
        ..whereEqualTo('UserID', currentUser.objectId);

  var response = await query.query();

  ParseObject userProgress;

  if (response.success && response.results != null) {
    userProgress = response.results.first;
  } else {
    // Create new UserProgress
    userProgress = ParseObject('UserProgress')
      ..set('UserID', currentUser);
  }

  // Update RecognizedObjects
  List<dynamic> recognizedObjects =
      userProgress.get<List<dynamic>>('RecognizedObjects') ?? [];
  if (!recognizedObjects.contains(objectName)) {
    recognizedObjects.add(objectName);
    userProgress.set('RecognizedObjects', recognizedObjects);
    await userProgress.save();
  }
}
Future<void> updateUserProgress(String objectName) async {
  final currentUser = await ParseUser.currentUser() as ParseUser;

  // Fetch UserProgress
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('UserProgress'))
        ..whereEqualTo('UserID', currentUser.objectId);

  var response = await query.query();

  ParseObject userProgress;

  if (response.success && response.results != null) {
    userProgress = response.results.first;
  } else {
    // Create new UserProgress
    userProgress = ParseObject('UserProgress')
      ..set('UserID', currentUser);
  }

  // Update RecognizedObjects
  List<dynamic> recognizedObjects =
      userProgress.get<List<dynamic>>('RecognizedObjects') ?? [];
  if (!recognizedObjects.contains(objectName)) {
    recognizedObjects.add(objectName);
    userProgress.set('RecognizedObjects', recognizedObjects);
    await userProgress.save();
  }
}
﻿
8.2. 객체가 인식될 때 updateUserProgress 호출하기
에서 setState가 selectedObject를 업데이트할 때:
Dart
onTap: () {
  setState(() {
    selectedObject = recognizedObjects[index];
  });
  updateUserProgress(selectedObject);
},
onTap: () {
  setState(() {
    selectedObject = recognizedObjects[index];
  });
  updateUserProgress(selectedObject);
},
﻿
9단계 – 오프라인 모드 구현
핵심 기능을 위해 인터넷 연결 없이 앱이 작동할 수 있도록 하세요.
9.1. 데이터를 로컬에 캐시하기
로컬 데이터베이스를 사용하여 sqflite 또는 hive를 사용하여 번역 및 문화 정보를 저장합니다.
 hive 의 종속성을 pubspec.yaml:
YAML
dependencies:
  hive: ^2.0.0
  hive_flutter: ^1.1.0
dependencies:
  hive: ^2.0.0
  hive_flutter: ^1.1.0
﻿
 main.dart:
Dart
import 'package:hive_flutter/hive_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Hive.initFlutter();

  // Initialize Parse...
}
import 'package:hive_flutter/hive_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Hive.initFlutter();

  // Initialize Parse...
}
﻿
9.2. 데이터 가져오기 메서드를 수정하여 캐시 사용
 getTranslation 메서드를 업데이트합니다:
Dart
Future<String> getTranslation(String objectName) async {
  var box = await Hive.openBox('translations');
  String cacheKey = '$objectName-es'; // Example target language

  if (box.containsKey(cacheKey)) {
    return box.get(cacheKey);
  } else {
    // Fetch from Back4App
    QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Translation'))
          ..whereEqualTo('ObjectName', objectName)
          ..whereEqualTo('LanguageCode', 'es');

    var response = await query.query();

    if (response.success && response.results != null) {
      final translation = response.results.first;
      String translatedText = translation.get<String>('TranslatedText');
      await box.put(cacheKey, translatedText);
      return translatedText;
    } else {
      return 'Translation not found';
    }
  }
}
Future<String> getTranslation(String objectName) async {
  var box = await Hive.openBox('translations');
  String cacheKey = '$objectName-es'; // Example target language

  if (box.containsKey(cacheKey)) {
    return box.get(cacheKey);
  } else {
    // Fetch from Back4App
    QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Translation'))
          ..whereEqualTo('ObjectName', objectName)
          ..whereEqualTo('LanguageCode', 'es');

    var response = await query.query();

    if (response.success && response.results != null) {
      final translation = response.results.first;
      String translatedText = translation.get<String>('TranslatedText');
      await box.put(cacheKey, translatedText);
      return translatedText;
    } else {
      return 'Translation not found';
    }
  }
}
﻿
유사한 단계를 반복하십시오 getCulturalInfo.
10단계 – 테스트 및 배포
앱을 철저히 테스트하고 배포를 준비하십시오.
10.1. 실제 장치에서 테스트
AR 기능은 카메라 접근이 필요하므로 실제 장치에서 앱을 테스트하십시오.
10.2. 성능 최적화
효율적인 데이터 구조를 사용하십시오.
UI에서 불필요한 재렌더링을 최소화하십시오.
이미지 및 미디어 자산을 최적화하십시오.
10.3. 배포 준비
앱 아이콘과 스플래시 화면을 업데이트하세요.
앱 권한을 구성하세요.
Android 및 iOS용 릴리스 버전을 빌드하세요.
자세한 내용은 Flutter의 공식 문서에서 빌드 및 릴리스를 참조하세요.
결론
축하합니다! Flutter와 Back4App을 사용하여 AR 언어 몰입 앱을 구축했습니다. 이 앱은 객체를 인식하고, 번역 및 문화 정보를 표시하며, 사용자 진행 상황을 추적하고, 오프라인에서도 작동합니다. 실제 AR 객체 인식을 통합하고, 더 많은 언어를 추가하며, UI/UX를 개선하여 앱을 더욱 향상시킬 수 있습니다.
고급 기능에 대한 자세한 정보는 다음을 탐색해 보세요:
기계 학습 모델 통합: 장치 내 객체 인식을 위해 TensorFlow Lite를 사용하세요.
AR 기능 향상: 더 풍부한 AR 경험을 위해 arcore_flutter_plugin 또는 arkit_plugin과 같은 플러그인을 활용하세요.
텍스트 음성 변환 구현: flutter_tts와 같은 패키지를 사용하여 발음 가이드를 위한 음성 합성을 추가하세요.
사용자 인증 개선: 소셜 로그인 또는 이중 인증을 구현하세요.
이 앱을 구축함으로써 Flutter 개발, Back4App과의 백엔드 통합, 오프라인 데이터 캐싱 및 사용자 진행 추적과 같은 필수 기능에 대한 경험을 얻었습니다. 계속 탐색하고 앱을 향상시켜 더욱 매력적인 언어 학습 경험을 만들어 보세요.
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Flutter와 Back4App을 사용하여 AI 이메일 응답기 앱을 만드는 방법
Flutter와 Back4App을 사용하여 이벤트 예약 앱을 만드는 방법