Atividade Online Pontuada 02 - Programação Dispositivos Móveis - Criação de App React Native

Painel Meus cursos 20222 Programação para Dispositivos Móveis Atividades Pontuadas e Prova Atividade Online Pontuada 02 20222 Programação para Dispositivos Móveis Atividade Online Pontuada 02 A fazer Fazer um envio Aberto terça 6 set 2022 0000 Vencimento segunda 19 set 2022 2359 ATIVIDADE ONLINE PONTUADA Prezadoa alunoa Essa é uma atividade online pontuada do tipo tarefa e vale 20 pontos O prazo limite para envio é de 06092022 à 19092022 Observações Enviar um pdftxtdocdocx com o link do Onedrive google drive ou alguma outra nuvem com o que foi pedido Atenção O nome do arquivo não pode ter espaço acentos nem caracteres ç hífen Exemplos de nomes corretos de arquivo Sauloaop2pdf Sauloribeiroaop2ppt HugoSilvaCompraPassagemaereadocx Na sua nuvem deve ter Zip do projeto do snack arquivo texto com o link do seu projeto no snack Um arquivo word ou pdf com as Justificativas de cor e design de cada tela Criar uma conta no snack Vamos usar o ambiente onlinehttpsexpoiotools httpsexpoiotoolssnack httpssnackexpoio já cria um projeto para vc tutorial Como utilizar o Expo Snack com React Native Trabalho de Implementação com React Native com funções e não com classes 1 Criar 1 App com no mínimo 10 telas 10 funcionalidades 4 telas obrigatórias login Cadastro de usuários obrigatoriedade de alguns campos validar campos Dashboard exibir qdte de registros de usuários dados por categoria sugestões Configuração do idioma português inglês espanhol Usar react context 6 telas complementares novas funcionalidades de acordo com seu contexto Justificar cada tela em função das diretrizes referentes a teoria da cor e os princípios de design tópico 4 2 Funcionalidade Opcional backend API Restful com get e post ler e salvar no BD local ou cloud OU salvar local em um arquivo json ou txt Pode usar um arquivo local json ou pode ser usado mockapi httpsmockapiio OU pode usar um BD online ou local 3 Orientações de Implementação Para facilitar a criação das telas podese usar o BuilderX Copiar do Builder X somente o código referente aos componentes button TextInput Text etc e não usar a navegação gerada por ele Primeira parte Projetar as interfaces Primeiro Definir as telas suas respectivas funcionalidades fazer uma descrição para cada campo ou componente Segundo definir um padrão de cor ou paleta de cor Terceiro fazer um protótipo de cada interface e validar com seu grupo Quarto construir a no BuilderX Usar somente o código dos componentes e estilos Não usar código de navegação gerado por ele Quinto criar um documento wordpdf com a foto de cada tela com suas respectivas justificativas de cor e design bem como o detalhamento das funcionalidades de cada campocomponente Orientações Protótipo no Figma httpswwwfigmacom ou Sketch httpswwwsketchcomget Construir a interface a partir do protótipo com BuilderX e gerar o código salvar foto da interface e o código Justificar cada tela em função das diretrizes referentes a teoria da cor e os princípios de design Dicas A sample app to show how Sketch to React Native works in BuilderX httpsgithubcomGeekyAntsdoappbuilderxsketchimport httpsbuilderxiosketchtoreactnative Segunda Parte Implementação e testes Navegação Navegação deve ter Stack Navigator e Drawer Navigator Customizado Tratar erros para evitar falhas Passagem de parâmetros usar Contexto useContext createContext Comunicação direta e ou Indireta usar desestruturação Componentização Criar os componentes que devem ser utilizados no componente que implementa cada tela Um diretório para cada componente indexjs e stylesjs Filtros usar para tratar efeitos colateraisexceções Outras diretivas Seguir o padrão de tela do projeto expoio tem uma arquitetura de componentes para navegação etc snack da Expoio httpssnackexpoio Gerar a aplicação com Expoio httpssnackexpoio Codificar funcionalidades conforme planejado Formulários com FORMlK para formulários pode ser usado o FORMlK httpsformikorgdocsguidesreactnative httpsformikorgdocstutorial httpsformikorgdocsoverview httpscodesandboxioszkrk5yldz httpscodesandboxioseq7qo httpsformikorgdocsexamplesbasic httpscodesandboxiosgithubformikformiktreemasterexamplesbasicfromembed Outras sugestões de Formulários Para formulários também pode ser usado o React Hook Form são mais performáticos e mais simples de usar do que o Formik httpsreacthookformcom Para estilização podese usar o Styled Components também um modo mais fácil de estilizar componentes do que o Stylesheet tradicional httpsstyledcomponentscom Dashboard sugestão httpswwwnpmjscompackagereactnativedashboard httpsbloglogrocketcomthetop8reactnativechartlibrariesfor2021 Vídeo fazer um vídeo de até 5 minutos mostrando todas as funcionalidades Consumo de APIs httpsdevelopergithubcomv3 httpsgithubcompublicapispublicapis httpsmockapiio Obs 1 a presença no código de itens fora do conteúdo estudado ou sugerido levará a não avaliação do trabalho Na dúvida valide com o professor antes de fazer algo 4 Implementação e testes Seguir o padrão de tela do projeto expoio tem uma arquitetura de componentes para navegação etc snack da Expoio httpssnackexpoio Gerar a aplicação com Expoio httpssnackexpoio Codificar funcionalidades 5 Consumo de APIs Para ajudar a ter dados httpsdevelopergithubcomv3 httpsgithubcompublicapispublicapis 5 Como usar React Context em Várias telas Como usar React Context em Várias telas Pessoal seguem as dicas 1 No arquivo Appjs não esquecer de exportar o AppContext Por exemplo export const AppContext ReactcreateContext lang en Logo é preciso exportar o contexto para poder usálo em outra tela 2 Na tela Idiomajs uma outra tela por exemplo importar o AppContext do arquivo Appjs Logo o que fazer Na outra tela importar o contexto Por exemplo import AppContext from App export default function TelaIdiomanavigation const lang setLang ReactuseContextAppContext 5 Mockapi httpsmockapiio Exemplos do mockapi e outras formas de usar dados httpssnackexpodevsaulloexemplogetmock httpssnackexpodevsaullomockapiexemlo httpssnackexpodevsaulloexemplogetmock httpssnackexpodevsaulloexemplogetmock2 httpssnackexpodevsaulloexemplogetmock3 httpssnackexpodevsaulloaxioshooksreactnative Tutorial mockapi httpsmediumcomcodeprestigemockandoapisrestfacilmentecomomockapi48f03a78aaca Outros exemplos com BD httpswwwfreecodecamporgportuguesenewscomousaroaxioscomoreactoguiadefinitivo2021 httpsdevtomeeshkanhowtomockapicallsinreactnative455p httpsmediumcomenappdhowtomakeapicallsinreactnativeappseab083186611 httpswwwmongodbcomdeveloperhowtobuildofflinefirstreactnativemobileappwithexpoandrealm Ao enviar seu arquivo lembrese Evite nome de arquivo muito extenso Devem ser curtos de preferência Jamais use acentos e caracteres especiais como ç e etc É terminantemente proibido o uso de plágio Para citação direta ou indireta observe as normas cultas de citação e faça a devida referência incluindo as referências bibliográficas ao final do texto Status de envio Status de envio Nenhuma tentativa Status da avaliação Não há notas Tempo restante 12 dias 14 horas Última modificação Comentários sobre o envio Comentários 0 Adicionar envio Você ainda não fez um envio Atividade Online Pontuada 01 Seguir para Manual Como acessar a Aula Universidade Vila Velha ceaduvvbr UVV All rights reserved Redefinir o tour de usuário nessa página Resumo de retenção de dados