Como Construir um Aplicativo de Imersão Linguística em AR com Flutter e Back4App

introdução neste tutorial, você irá construir um aplicativo de imersão linguística em realidade aumentada (ar) usando flutter e back4app o aplicativo utiliza a tecnologia ar para reconhecer objetos através da câmera do dispositivo, sobrepor traduções, fornecer informações culturais e acompanhar o progresso do usuário ao final deste tutorial, você terá um aplicativo funcional que ajuda os usuários a aprender novas línguas em contextos do mundo real pré requisitos para completar este tutorial, você precisará flutter instalado em sua máquina local se você ainda não o configurou, siga o https //flutter dev/docs/get started/install uma conta back4app inscreva se para uma conta gratuita em https //www back4app com/ um aplicativo back4app crie um novo aplicativo seguindo o https //www back4app com/docs/get started conhecimento básico de dart e flutter familiarize se com https //flutter dev/docs se necessário compreensão básica de apis restful e programação assíncrona em dart passo 1 – configurando o projeto flutter primeiro, configure um novo projeto flutter onde você irá desenvolver o aplicativo de imersão linguística em ar 1 1 criar um novo projeto flutter abra seu terminal e execute o seguinte comando flutter create ar language immersion app este comando cria um novo projeto flutter chamado ar language immersion app 1 2 abra o projeto em seu ide navegue até o diretório do projeto e abra o em seu ide preferido (por exemplo, visual studio code, android studio) cd ar language immersion app passo 2 – configurando o backend do back4app configure seu backend no back4app para gerenciar dados de usuários, traduções, informações culturais e rastreamento de progresso do usuário 2 1 criar um novo aplicativo no back4app faça login na sua conta do back4app clique em "criar novo app" digite "aplicativo de imersão em linguagem ar" como o nome do aplicativo clique em "criar" 2 2 configurando o modelo de dados defina as classes de acordo com o modelo de dados usuário objetoreconhecível tradução infocultural progressodousuário 2 2 1 criar a classe de usuário a classe usuário é uma classe padrão no back4app para gerenciar a autenticação de usuários navegue até core > navegador no seu painel do back4app você verá a classe usuário já disponível 2 2 2 crie a classe recognizableobject clique em "criar uma classe" escolha "personalizado" e nomeie como "recognizableobject" clique "criar classe" adicione as seguintes colunas nome (string) categoria (string) imagereference (arquivo) 2 2 3 crie a classe translation crie outra classe chamada "translation" adicione as seguintes colunas objectid (string) \[padrão] objectid (ponteiro para recognizableobject) languagecode (string) translatedtext (string) pronunciationguide (string) audiofilereference (arquivo) 2 2 4 crie a classe culturalinfo crie uma classe chamada "culturalinfo" adicione as seguintes colunas objectid (ponteiro para recognizableobject) languagecode (string) shortdescription (string) detailedinformation (string) relatedmediareferences (array de arquivos) 2 2 5 crie a classe userprogress crie uma classe chamada "userprogress" adicione as seguintes colunas userid (ponteiro para o usuário) recognizedobjects (array de ids de objetos reconhecíveis) translationsviewed (array de ids de tradução) culturalinfoaccessed (array de ids de informação cultural) learningstreaks (número) proficiencyscores (dicionário) 2 3 recuperar chaves da aplicação vá para configurações do app > segurança & chaves anote seu id da aplicação e chave do cliente ; você precisará deles para inicializar o parse em seu aplicativo flutter passo 3 – integrando o sdk do parse no flutter integre o sdk parse fornecido pela back4app em seu projeto flutter para se comunicar com o backend 3 1 adicionar dependências abra pubspec yaml e adicione as seguintes dependências 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 execute o comando flutter pub get nota como não existe um plugin ar oficial chamado augmented reality plugin , você pode precisar usar plugins como arcore flutter plugin para android e arkit plugin para ios ajuste conforme necessário com base nas suas plataformas alvo 3 2 inicializar o parse em seu app em lib/main dart , inicialize o parse durante a inicialização do aplicativo 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()); } substitua 'your application id' e 'your client key' pelas chaves que você obteve do back4app passo 4 – implementando a autenticação de usuário implemente funcionalidades de registro e login de usuário 4 1 criar tela de autenticação crie um novo arquivo 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 atualizar main dart para incluir rotas em lib/main dart , atualize seu materialapp para incluir rotas 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(), }, ); } } passo 5 – implementando reconhecimento de objetos ar configure a funcionalidade ar para reconhecer objetos usando a câmera do dispositivo 5 1 configurar permissões para android e ios, você precisa solicitar permissões de câmera android em android/app/src/main/androidmanifest xml , adicione \<uses permission android\ name="android permission camera" /> ios em ios/runner/info plist , adicione \<key>nscamerausagedescription\</key> \<string>we need to access your camera to recognize objects for language learning \</string> 5 2 implementar visualização ar crie um novo arquivo 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'), ), ); } } nota implementar o reconhecimento completo de objetos em ar é complexo e pode exigir a integração com modelos de aprendizado de máquina como tensorflow lite ou o uso de plataformas como o ml kit do google para este tutorial, simularemos o reconhecimento de objetos 5 3 simular reconhecimento de objetos para fins de demonstração, simularemos o reconhecimento de objetos exibindo objetos predefinidos atualizar 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]), ), ), ); }, ), ), ], ), ); } } passo 6 – exibindo sobreposições de tradução busque traduções do back4app e exiba as como sobreposições 6 1 buscar dados de tradução em ar view screen dart , adicione um método para buscar traduções 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 atualizar ui para mostrar tradução modifique o build método 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), ), ), ), passo 7 – fornecendo informações culturais busque e exiba informações culturais relacionadas ao objeto reconhecido 7 1 buscar informações culturais adicione um método em 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 atualizar ui para mostrar informações culturais modifique o build método 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), ); } }, ), ], ); passo 8 – acompanhando o progresso do usuário atualize o progresso do usuário cada vez que ele visualizar uma tradução ou informações culturais 8 1 atualizar userprogress no back4app adicione um método para atualizar o progresso 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 chame updateuserprogress quando um objeto for reconhecido em setstate onde selectedobject é atualizado ontap () { setstate(() { selectedobject = recognizedobjects\[index]; }); updateuserprogress(selectedobject); }, passo 9 – implementando o modo offline garanta que o aplicativo possa funcionar sem uma conexão com a internet para recursos principais 9 1 cache de dados localmente use um banco de dados local como sqflite ou hive para armazenar traduções e informações culturais adicione a dependência hive em pubspec yaml dependencies hive ^2 0 0 hive flutter ^1 1 0 inicialize o hive em main dart import 'package\ hive flutter/hive flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); await hive initflutter(); // initialize parse } 9 2 modificar métodos de busca de dados para usar cache atualize o método 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'; } } } repita etapas semelhantes para getculturalinfo etapa 10 – testes e implantação teste o aplicativo minuciosamente e prepare o para implantação 10 1 testar em dispositivos físicos como as funcionalidades de ar requerem acesso à câmera, teste o aplicativo em dispositivos reais 10 2 otimizar desempenho use estruturas de dados eficientes minimize re renderizações desnecessárias na interface do usuário otimize imagens e ativos de mídia 10 3 preparar para implantação atualizar ícones de aplicativos e telas de inicialização configurar permissões do aplicativo construir versões de lançamento para android e ios consulte a documentação oficial do flutter sobre https //flutter dev/docs/deployment para mais detalhes conclusão parabéns! você construiu um aplicativo de imersão linguística em ar usando flutter e back4app o aplicativo reconhece objetos, exibe traduções e informações culturais, rastreia o progresso do usuário e funciona offline você pode aprimorar ainda mais o aplicativo integrando reconhecimento de objetos ar real, adicionando mais idiomas e melhorando a ui/ux para mais informações sobre recursos avançados, considere explorar integração de modelos de aprendizado de máquina use tensorflow lite para reconhecimento de objetos no dispositivo aprimorando capacidades de ar utilize plugins como arcore flutter plugin ou arkit plugin para experiências de ar mais ricas implementando texto para fala adicione síntese de fala para guias de pronúncia usando pacotes como flutter tts melhorando a autenticação do usuário implemente logins sociais ou autenticação de dois fatores ao construir este aplicativo, você ganhou experiência em desenvolvimento flutter, integração de backend com back4app e recursos essenciais como cache de dados offline e rastreamento de progresso do usuário continue explorando e aprimorando seu aplicativo para criar uma experiência de aprendizado de idiomas ainda mais envolvente