Flutter와 Back4App으로 AR 언어 몰입 앱 구축하기.

소개 이 튜토리얼에서는 flutter와 back4app을 사용하여 증강 현실(ar) 언어 몰입 앱을 구축합니다 이 앱은 ar 기술을 활용하여 장치의 카메라를 통해 객체를 인식하고, 번역을 오버레이하며, 문화 정보를 제공하고, 사용자 진행 상황을 추적합니다 이 튜토리얼이 끝나면 사용자가 실제 상황에서 새로운 언어를 배우는 데 도움이 되는 기능적인 앱을 갖게 됩니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 flutter 설치됨 로컬 머신에 아직 설정하지 않았다면, flutter 설치 가이드 https //flutter dev/docs/get started/install 를 따르세요 back4app 계정 무료 계정에 가입하려면 back4app https //www back4app com/ 를 방문하세요 back4app 애플리케이션 back4app 시작하기 가이드 https //www back4app com/docs/get started 를 따라 새 앱을 만드세요 dart 및 flutter에 대한 기본 지식 필요하다면 flutter 문서 https //flutter dev/docs 에 익숙해지세요 dart에서 restful api 및 비동기 프로그래밍에 대한 기본 이해 1단계 – flutter 프로젝트 설정 먼저 ar 언어 몰입 앱을 개발할 새 flutter 프로젝트를 설정하세요 1 1 새 flutter 프로젝트 만들기 터미널을 열고 다음 명령어를 실행하세요 flutter create ar language immersion app 이 명령어는 ar language immersion app 이라는 이름의 새로운 flutter 프로젝트를 생성합니다 1 2 ide에서 프로젝트 열기 프로젝트 디렉토리로 이동하여 선호하는 ide(예 visual studio code, android studio)에서 엽니다 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 을 열고 다음 종속성을 추가합니다 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 다음 명령을 실행합니다 flutter pub get 3 2 앱에서 parse 초기화 앱 시작 시 lib/main dart , parse를 초기화합니다 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 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 을(를) 업데이트하여 경로를 포함하세요 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 , 추가하세요 \<uses permission android\ name="android permission camera" /> ios 다음의 ios/runner/info plist , 추가하세요 \<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 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'), ), ); } } 5 3 객체 인식 시뮬레이션 시연을 위해 미리 정의된 객체를 표시하여 객체 인식을 시뮬레이션합니다 업데이트 ar view screen 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]), ), ), ); }, ), ), ], ), ); } } 6단계 – 번역 오버레이 표시 back4app에서 번역을 가져와 오버레이로 표시합니다 6 1 번역 데이터 가져오기 in ar view screen dart , add a method to fetch translations 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 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 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 메서드를 수정하십시오 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 업데이트 진행 상황을 업데이트하는 메서드를 추가하세요 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 를 업데이트할 때 ontap () { setstate(() { selectedobject = recognizedobjects\[index]; }); updateuserprogress(selectedobject); }, 9단계 – 오프라인 모드 구현 핵심 기능을 위해 인터넷 연결 없이 앱이 작동할 수 있도록 하세요 9 1 데이터를 로컬에 캐시하기 로컬 데이터베이스를 사용하여 sqflite 또는 hive 를 사용하여 번역 및 문화 정보를 저장합니다 hive 의 종속성을 pubspec yaml dependencies hive ^2 0 0 hive flutter ^1 1 0 main dart import 'package\ hive flutter/hive flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); await hive initflutter(); // initialize parse } 9 2 데이터 가져오기 메서드를 수정하여 캐시 사용 gettranslation 메서드를 업데이트합니다 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의 공식 문서에서 빌드 및 릴리스 https //flutter dev/docs/deployment 를 참조하세요 결론 축하합니다! flutter와 back4app을 사용하여 ar 언어 몰입 앱을 구축했습니다 이 앱은 객체를 인식하고, 번역 및 문화 정보를 표시하며, 사용자 진행 상황을 추적하고, 오프라인에서도 작동합니다 실제 ar 객체 인식을 통합하고, 더 많은 언어를 추가하며, ui/ux를 개선하여 앱을 더욱 향상시킬 수 있습니다 고급 기능에 대한 자세한 정보는 다음을 탐색해 보세요 기계 학습 모델 통합 장치 내 객체 인식을 위해 tensorflow lite를 사용하세요 ar 기능 향상 더 풍부한 ar 경험을 위해 arcore flutter plugin 또는 arkit plugin 과 같은 플러그인을 활용하세요 텍스트 음성 변환 구현 flutter tts 와 같은 패키지를 사용하여 발음 가이드를 위한 음성 합성을 추가하세요 사용자 인증 개선 소셜 로그인 또는 이중 인증을 구현하세요 이 앱을 구축함으로써 flutter 개발, back4app과의 백엔드 통합, 오프라인 데이터 캐싱 및 사용자 진행 추적과 같은 필수 기능에 대한 경험을 얻었습니다 계속 탐색하고 앱을 향상시켜 더욱 매력적인 언어 학습 경험을 만들어 보세요