RESUMO - Programação Para Dispositivos Móveis em Android

Prévia do material em texto

1 
 
1 
Programação Para Dispositivos Móveis em Android 
 
Sintaxe e Componentes do React Native 
Introdução 
• Expansão do mercado de aplicativos móveis devido à popularização dos 
smartphones. 
• Desafios para desenvolvedores diante de sistemas operacionais variados e 
conexão instável. 
• Necessidade de novas bibliotecas e ferramentas para programação mobile. 
• Apresentação do React Native, um framework JavaScript para 
desenvolvimento multiplataforma. 
Multiplataformas 
• Aplicativos que compartilham o mesmo código-fonte e funcionam em Android 
e iOS. 
Módulo 1: Definição do Ambiente de Desenvolvimento 
1. React.js: Biblioteca para desenvolvimento web. 
2. React Native: Voltado para mobile, possibilitando código híbrido. 
3. Ferramentas de Desenvolvimento: 
o Editores de código. 
o Emuladores e dispositivos móveis reais para testes. 
o Expo: Framework que facilita o desenvolvimento e testes, consumindo 
menos recursos. 
Gerenciadores de Pacotes 
1. NPM (Node Package Manager) 
o Gerenciador padrão do Node.js. 
o Componentes: site, CLI, repositório. 
o Utiliza o arquivo package.json para armazenar dependências e 
configurações. 
2. Yarn 
o Criado pelo Facebook e outras empresas para resolver problemas de 
segurança e eficiência no NPM. 
o Utiliza yarn.lock para garantir a exata versão das dependências em todas 
as instalações. 
o Ambos cumprem a mesma função, porém recomenda-se usar apenas um 
por projeto para evitar conflitos. 
 
Aqui está um resumo esquematizado do conteúdo: 
Node.js 
• Ambiente server-side para execução de códigos em JavaScript. 
 
2 
 
2 
Programação Para Dispositivos Móveis em Android 
 
• Permite criar aplicações back-end, como APIs, servidores e microsserviços. 
• Essencial para desenvolvimento com React Native, pois inclui o NPM. 
Instalação do Node.js 
1. Instaladores (Windows/Linux). 
2. NVM (Node Version Manager) – preferível por evitar erros de permissões. 
3. Testar instalação: 
o node -v (verificar versão do Node). 
o npm -v (verificar versão do NPM). 
Instalação do Expo 
1. Executar: npm install -g expo-cli 
2. Criar um projeto: 
o expo init nome_da_aplicacao 
o Escolher o template “blank”. 
3. Iniciar: npm start 
o Testar no navegador ou via Expo Client no smartphone. 
Utilização de emuladores 
• Android Studio: Ferramenta completa para testar aplicativos Android. 
• Opção alternativa: Uso de dispositivo real via USB. 
Instalação de Dependências para React Native CLI 
1. Node.js (já instalado). 
2. React Native CLI via NPX (npx react-native init nome_da_aplicacao). 
3. Java JDK e Android Studio (instalação via gerenciadores como Chocolatey ou 
nativos do Linux). 
Teste do ambiente 
1. Criar um projeto React Native via CLI: npx react-native init 
nome_da_aplicacao 
2. Executar aplicação em dispositivo virtual ou físico: npx react-native run-
android. 
IDE recomendada 
• VS Code, por ter muitos plug-ins específicos para React Native. 
 
 
Aqui está um resumo esquematizado sobre componentes em React Native: 
O que são componentes? 
 
3 
 
3 
Programação Para Dispositivos Móveis em Android 
 
• Pequenos pedaços de software que desempenham funções específicas. 
• Facilitam o desenvolvimento, evitando que tudo precise ser criado do zero. 
• Permitem composição, ou seja, a combinação de pequenos códigos para formar 
um software completo. 
• Aplicáveis ao front-end e back-end. 
JSX (JavaScript XML) 
• Sintaxe utilizada para escrever componentes React Native. 
• Similar ao XML, combina JavaScript e marcações de interface. 
• Elementos JSX podem ser: 
o Self-opening () 
o Self-closing () 
o Com atributos ( ou ) 
Funcionamento do React Native 
• Desenvolvimento híbrido: um código roda em Android e iOS. 
• Usa dois núcleos: 
o Nativo (Java/Kotlin para Android, Swift/Objective-C para iOS). 
o JavaScript (JavaScriptCore). 
• Transpilar: transforma código JavaScript em uma linguagem de alto nível. 
• Minificar: reduz tamanho do código para otimizar desempenho. 
Componentes nativos em React Native 
Esses componentes correspondem a elementos nativos de Android, iOS e HTML: 
React Native Android iOS HTML 
 ViewGroup UIView 
 TextView UITextView 
 ImageView UIImageView 
 EditText UITextField 
 ScrollView UIScrollView 
View 
• Principal componente de interface gráfica. 
• Responsável pela estrutura e organização do layout. 
• Pode ser aninhada com outras views. 
• Funciona de forma equivalente nos diferentes sistemas. 
Aqui está um resumo estruturado sobre os componentes do React Native: 
View 
• Principal componente de interface gráfica. 
 
4 
 
4 
Programação Para Dispositivos Móveis em Android 
 
• Pode conter atributos diversos e reagir a eventos. 
• Útil para organização do layout e aninhamento de outros elementos. 
Text 
• Exibe textos, permitindo aninhamento, estilização e interação via toque. 
• Evento onPress: possibilita alteração do texto ao ser tocado. 
• Recomendado o uso de StyleSheet para melhor organização do código. 
Image 
• Similar à tag HTML , exibe imagens locais ou externas. 
• Herdeiro de View, possui atributos próprios para manipulação de imagens. 
TextInput 
• Permite entrada de texto via teclado. 
• Funcionalidades como autocorreção, autocapitalização e diferentes tipos de teclado. 
• Eventos: 
o focus: quando o campo recebe foco. 
o blur: quando o campo perde foco. 
• Útil para validação e máscaras de entrada, como CPF e telefone. 
ScrollView 
• Contêiner para elementos roláveis na tela. 
• Necessário definir altura limitada para funcionamento correto. 
• Alternativa para grandes listas de conteúdo: FlatList (melhor desempenho). 
Outros componentes 
1. Button – Botões interativos. 
2. Switch – Alternador de estado (ativado/desativado). 
3. FlatList – Lista otimizada para grandes volumes de dados. 
 
O que é depuração? 
• Processo de identificação e correção de erros (bugs) no código-fonte. 
• Feito por observação do estado dos objetos, variáveis e fluxos do programa. 
• Pode ser iniciada de duas formas: 
o Indiretamente: erro gerado na execução do aplicativo. 
o Iniciativa do desenvolvedor: testes estruturados em diferentes cenários. 
Como depurar um software 
• Utilização de uma IDE ou console do navegador. 
• Analisar: 
o Estado de objetos. 
 
5 
 
5 
Programação Para Dispositivos Móveis em Android 
 
o Valores de variáveis. 
o Execução de condicionais e loops. 
Ferramentas de depuração 
1. Console do navegador: 
o Acessado via Inspecionar Elementos no navegador. 
o Útil para análise de logs (console.log) e chamadas de APIs. 
2. Metro (React Native Debugger): 
o Abrir janela do Metro e pressionar “d”. 
o Exibir opção Debug, abrindo ferramenta no navegador. 
o Console acessível via CTRL + SHIFT + J. 
3. React Developer Tools: 
o Ferramenta para inspecionar hierarquia de componentes, estilos e estados. 
o Instalação global via: npm install -g react-devtools. 
o Ativação com react-devtools + opção Show Inspector. 
4. In-App Developer Menu: 
o Acessível via CTRL + M (emulador) ou sacudir dispositivo físico. 
o Oferece ferramentas úteis como: 
▪ Fast Refresh (atualização rápida do código). 
▪ Sampling Profiler & Perf Monitor (monitoramento de desempenho). 
Depuração de código nativo 
• Restrito a códigos nativos (não disponível no Expo). 
• Acesso a logs detalhados via terminal: 
• npx react-native run-android 
• npx react-native log-android 
• adb logcat *:S ReactNative:V ReactNativeJS:V 
 
Organizando a depuração 
1. Comparar o resultado esperado com o obtido: 
o Identifique se cada funcionalidade do aplicativo está retornando o esperado. 
o Teste cada ação isoladamente antes de verificar o software como um todo. 
2. Analisar os erros obtidos: 
o Diferencie erros do código-fonte e erros externos (exemplo:API indisponível). 
o Utilize logs do console para diagnosticar problemas no JavaScript. 
3. Isolar cenários de execução: 
o Teste fluxos básicos e alternativos separadamente. 
o Verifique se o erro ocorre em todos os cenários ou apenas em casos 
específicos. 
4. Utilizar pontos de interrupção: 
o Identifique o ponto de entrada da aplicação (exemplo: tela de login). 
o Use breakpoints na IDE para interromper a execução e analisar 
comportamentos. 
 
 
6 
 
6 
Programação Para Dispositivos Móveis em Android 
 
Dica 
• Para depuração avançada, explore plug-ins de IDE e a documentação oficial do React 
Native. 
• Aprofunde seu conhecimento testando as ferramentas apresentadas! 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7 
 
7 
Programação Para Dispositivos Móveis em Android 
 
Interface Gráfica Com React Native 
 
1. Estruturação da Interface 
• Antes da codificação, é essencial planejar funcionalidades, navegação e experiência 
do usuário. 
• Garantir a melhor disposição dos elementos gráficos e interação fluida. 
2. Requisitos e Funcionalidades 
• Criar lista de funcionalidades do aplicativo (simples ou elaborada). 
• Exemplo: aplicativo bancário com fluxo de login, consultas e transações. 
• Definir quantidade de telas e componentes reutilizáveis. 
3. Escolha dos Componentes 
• Protótipos navegáveis (não abordado aqui, mas altamente recomendado). 
• Seleção de componentes nativos ou de terceiros: 
o Container principal: View 
o Scroll ajustável: ScrollView 
o SafeAreaView (área segura para iOS) e KeyboardAvoidingView (para evitar 
conflitos com teclado virtual). 
4. Componentes de Interface e Interação 
1. Modal – Exibe conteúdo adicional sem mudar de tela. 
2. Pressable – Elemento interativo semelhante a um botão. 
3. Button, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback – 
Interação com toque. 
4. ActivityIndicator – Exibe loading, essencial para indicar carregamentos de dados 
externos. 
5. Organização Visual 
• Componentizar elementos repetidos para reaproveitamento no código. 
• Utilizar View como contêiner para outros componentes. 
• Evitar aninhamento inadequado (exemplo: imagens dentro de elementos de texto). 
6. Outros Componentes 
• Componentes voltados para navegação entre telas e organização otimizada de 
recursos como listas e cards. 
 
 
 
 
8 
 
8 
Programação Para Dispositivos Móveis em Android 
 
1. Componentes de Lista 
Existem três principais componentes nativos para exibição de listas: 
1. VirtualizedList – Base para os demais componentes, otimizado para grandes conjuntos 
de dados. 
2. SectionList – Exibe dados organizados por seções (categorias). 
3. FlatList – Simples, altamente otimizado e suporta diversas funcionalidades. 
 
2. VirtualizedList 
• Otimização de consumo de memória e renderização eficiente. 
• Mantém uma janela finita de itens visíveis, substituindo os que saem de tela. 
• Renderiza incrementalmente para evitar espaços em branco. 
• Principais propriedades: 
o data – Lista de dados. 
o getItem – Função para acessar os itens. 
o getItemCount – Define número total de itens. 
o renderItem – Define o elemento a ser exibido. 
o keyExtractor – Identifica cada item da lista. 
o initialNumToRender – Número inicial de itens renderizados. 
 
3. SectionList 
• Permite agrupamento de dados em categorias, melhorando organização. 
• Propriedades principais: 
o sections – Define os grupos de dados. 
o renderSectionHeader – Exibe o título da categoria. 
 
4. FlatList 
• Renderiza listas simples com desempenho otimizado. 
• Recursos adicionais: 
o Compatível com Android e iOS. 
o Permite lista horizontal. 
o Suporte a cabeçalhos e rodapés. 
o Capacidade de separação entre itens. 
o Pull-to-refresh e scrolling dinâmico. 
 
5. Recursos Avançados 
• Atualização de dados: Utiliza extraData para monitorar mudanças. 
 
9 
 
9 
Programação Para Dispositivos Móveis em Android 
 
• Carregamento dinâmico: Com onEndReached, permite carregar mais conteúdo ao 
rolar a tela. 
 
1. Conceitos de Navegação 
• Termos comuns vindos do desenvolvimento web: 
o Páginas/Telas (Pages/Screens) 
o Menus e Navbar 
o Links internos e externos 
o Breadcrumb 
• Em aplicativos mobile, usamos o conceito de telas em vez de páginas. 
2. Configuração do Ambiente 
• Instalar dependências para navegação: 
• npm install @react-navigation/native react-native-reanimated 
react-native-gesture-handler react-native-screens react-native-
safe-area-context 
• Para Stack Navigation, instalar: 
• npm install @react-navigation/native-stack 
• Para Tab Navigation, instalar: 
• npm install @react-navigation/bottom-tabs 
3. Stack Navigation 
• Empilhamento de telas (como histórico de navegador). 
• Requer NavigationContainer e createNativeStackNavigator. 
• Definição no código: 
import { NavigationContainer } from '@react-navigation/native'; 
import { createNativeStackNavigator } from '@react-
navigation/native-stack'; 
 
const Stack = createNativeStackNavigator(); 
 
function App() { 
 return ( 
 
 
 
 
 
 
 ); 
} 
 
 
 
 
10 
 
10 
Programação Para Dispositivos Móveis em Android 
 
4. Tab Navigation 
• Navegação com guias/abas na parte inferior (ou superior). 
• Criado com createBottomTabNavigator. 
• Código básico: 
import { createBottomTabNavigator } from '@react-navigation/bottom-
tabs'; 
 
const Tab = createBottomTabNavigator(); 
 
function App() { 
 return ( 
 
 
 
 
 
 
 ); 
} 
5. Configurações Adicionais 
• Stack Navigator permite múltiplas pilhas de navegação. 
• Tab Navigator pode ser customizado com ícones. 
• Combinação de diferentes navegadores para uma experiência mais avançada. 
 
1. Conceito do Drawer Navigation 
• Modelo de navegação que apresenta um menu oculto, acessado ao arrastar a tela da 
esquerda (ou da direita). 
• Exibe opções de navegação quando aberto, permitindo acessar diferentes telas do 
aplicativo. 
2. Configuração do Ambiente 
• Instalar dependência: 
• npm install @react-navigation/drawer 
• Reutilizar estrutura de pastas e telas (Home, About) dos outros modelos de navegação. 
3. Criação do Drawer Navigation 
• Código básico: 
import { createDrawerNavigator } from '@react-navigation/drawer'; 
import { NavigationContainer } from '@react-navigation/native'; 
 
const Drawer = createDrawerNavigator(); 
 
function App() { 
return ( 
 
11 
 
11 
Programação Para Dispositivos Móveis em Android 
 
 
 
 
 
 
 
); 
} 
4. Navegação entre Telas 
• Alternar telas usando navigation.navigate('NomeDaTela'). 
• Histórico de navegação disponível com navigation.goBack(). 
• Abrir/Fechar Drawer: 
• navigation.openDrawer(); // Abre o menu lateral 
• navigation.closeDrawer(); // Fecha o menu 
5. Configuração Adicional 
• Pode ser estilizado e personalizado conforme necessário. 
• O initialRouteName define a tela que aparece ao iniciar o aplicativo. 
• Ícones e estilos podem ser adicionados para melhorar a interface. 
 
1. Estilização no React Native 
• Semelhante ao CSS, mas utilizando JavaScript via propriedade style. 
• Três formas de definir estilos: 
o Inline (style={{ color: 'blue' }}). 
o Interna (StyleSheet.create({...})). 
o Externa (arquivo .js separado, importado no código principal). 
2. Funcionamento da Propriedade Style 
• Declaraçãono padrão camelCase (exemplo: marginTop em vez de margin-top). 
• Exemplo de Inline Style: 
• Texto Azul 
• Exemplo de StyleSheet Interno: 
• import { StyleSheet } from 'react-native'; 
• 
• const styles = StyleSheet.create({ 
• textStyle: { 
• color: 'blue', 
• }, 
• }); 
• 
• Texto Azul 
3. Uso de Styled Components 
• Alternativa à propriedade style, permitindo estilização similar ao CSS tradicional. 
 
12 
 
12 
Programação Para Dispositivos Móveis em Android 
 
• Instalação via terminal: 
• npm install styled-components 
• Exemplo de uso: 
import styled from 'styled-components/native'; 
 
const StyledText = styled.Text` 
 color: blue; 
 font-size: 20px; 
`; 
 
Texto Azul 
• Principais vantagens: 
o Permite sobrescrever estilos facilmente. 
o Pode passar estilos como props entre componentes. 
o Suporte a animações (visto mais adiante). 
1. APIs de Animação 
O React Native disponibiliza duas APIs principais para animações: 
1. Animated API – Anima componentes de forma precisa e declarativa. 
2. LayoutAnimation API – Garante animações fluidas durante o ciclo de renderização. 
 
2. Animated API 
• Baseada em relações declarativas entre entradas e saídas. 
• Métodos para iniciar e parar animações. 
• Componentes compatíveis: 
o View, Text, Image, ScrollView, FlatList, SectionList. 
• Criação de componentes animáveis personalizados usando 
Animated.createAnimatedComponent(). 
Exemplo – Efeito Fade In 
• Hooks Utilizados: 
o useRef – Gerencia valores animados. 
o useEffect – Executa a animação ao renderizar o aplicativo. 
• Método Principal: 
o Animated.timing() – Define duração e comportamento da animação. 
Outros Recursos da Animated API 
• Configuração avançada de animações (tempo, funções de atenuação). 
• Composição de animações (sequenciais, paralelas). 
• Interpolação para ajustes dinâmicos. 
• Rastreamento de valores e gestos. 
 Dica: Consulte a documentação oficial para mais detalhes! 
 
13 
 
13 
Programação Para Dispositivos Móveis em Android 
 
 
3. LayoutAnimation API 
• Foca na animação do layout ao longo do ciclo de renderização. 
• Útil para ajustar a exibição dinâmica de elementos como "ver mais". 
• Menos controle que a Animated API, mas simplifica animações nativas. 
Exemplo – Redução de Tamanho de um Elemento 
• Quadrado diminui ao pressionar o botão. 
• Usado para transições fluidas sem necessidade de códigos complexos. 
 
 
Persistência de Dados Com React Native 
 
1. Conceitos de Armazenamento 
• Serialização: Transforma dados em uma estrutura contígua para transmissão ou 
armazenamento (exemplo: JSON ou XML). 
• Persistência: Garante que os dados armazenados possam ser recuperados 
posteriormente, mesmo após o encerramento do aplicativo. 
2. Serialização em React Native 
• Diferente da serialização binária usada em Java/C++, em React Native, os objetos são 
geralmente armazenados como JSON. 
• Transformação de objetos em JSON: 
• const produto = { id: 1, nome: "Celular" }; 
• const jsonProduto = JSON.stringify(produto); // Serialização 
• const objetoProduto = JSON.parse(jsonProduto); // Deserialização 
3. Persistência com AsyncStorage 
• Alternativa ao armazenamento síncrono (como fs do Node.js), evitando travamento 
da interface gráfica. 
• Armazena dados localmente de forma assíncrona. 
• Instalação: 
• npm install @react-native-async-storage/async-storage 
• Exemplo de uso: 
import AsyncStorage from '@react-native-async-storage/async-
storage'; 
 
// Gravar dados 
const salvarProduto = async () => { 
 try { 
 await AsyncStorage.setItem('produto', JSON.stringify({ id: 1, 
nome: "Celular" })); 
 
14 
 
14 
Programação Para Dispositivos Móveis em Android 
 
 } catch (error) { 
 console.error("Erro ao salvar:", error); 
 } 
}; 
 
// Recuperar dados 
const obterProduto = async () => { 
 try { 
 const produto = await AsyncStorage.getItem('produto'); 
 console.log("Produto recuperado:", JSON.parse(produto)); 
 } catch (error) { 
 console.error("Erro ao recuperar:", error); 
 } 
}; 
 
 
 
1. Conceito de Interoperabilidade 
• Compartilhamento de dados e serviços entre diferentes sistemas e plataformas. 
• Redução do retrabalho e melhoria na eficiência de comunicação. 
• Padronização de formatos e protocolos para facilitar integração. 
2. Evolução do Compartilhamento de Dados 
• Inicialmente, plataformas eram herméticas e não compartilhavam informações. 
• Com a popularização das redes de computadores, a necessidade de interoperabilidade 
cresceu. 
• Base de dados relacionais (Oracle, MySQL) permitiram múltiplos acessos por 
diferentes plataformas via SQL. 
3. Web Services e Protocolos 
• SOAP (XML-based) – Usado em comunicação B2B, mais formal. 
• RESTful (JSON-based) – Utiliza métodos HTTP (GET, POST, PUT, DELETE), voltado para 
B2C. 
• Permitem comunicação padronizada entre diferentes aplicações. 
4. Formatos de Dados Interoperáveis 
• XML – Estruturado, usado principalmente em SOAP. 
• JSON – Mais leve e flexível, padrão em RESTful. 
• Ambos são neutros em relação a linguagem, permitindo troca de informações entre 
sistemas heterogêneos. 
5. JSON no React Native 
• React Native facilita serialização e processamento de JSON para armazenamento e 
comunicação. 
• Necessário para integração com Web Services RESTful e armazenamento assíncrono. 
 
15 
 
15 
Programação Para Dispositivos Móveis em Android 
 
 
 
1. O que é AsyncStorage? 
• Persistência assíncrona baseada em chave-valor. 
• Armazena pequenas quantidades de dados localmente no dispositivo. 
• Objetos devem ser serializados em JSON para armazenamento. 
 
 
 
2. Métodos Principais 
Método Parâmetros Callback Funcionalidade 
getItem Chave (error, result) => void Obtém um item da coleção. 
setItem Chave, Valor (error) => void Armazena um item na coleção. 
removeItem Chave (error) => void Remove um item da coleção. 
mergeItem Chave, Valor (error) => void Atualiza um item existente. 
getAllKeys Nenhum (error, keys[]) => void Obtém todas as chaves armazenadas. 
multiGet Chave[] (errors[], result[]) => void Obtém múltiplos itens. 
3. Uso de Async/Await 
• async – Definição de funções assíncronas. 
• await – Espera pela execução do método antes de prosseguir. 
• Alternativamente, pode-se usar .then() para chamadas encadeadas. 
4. Exemplo: Armazenar Configuração de Tema 
import AsyncStorage from '@react-native-async-storage/async-storage'; 
 
async function salvarTema(tema: string) { 
 await AsyncStorage.setItem('tema', JSON.stringify(tema)); 
} 
 
async function obterTema() { 
 const tema = await AsyncStorage.getItem('tema'); 
 return tema ? JSON.parse(tema) : null; 
} 
 
16 
 
16 
Programação Para Dispositivos Móveis em Android 
 
5. Biblioteca de Persistência para Classe Produto 
• Criar classe GestorDados.ts com métodos: 
o salvarProduto – Serializa e armazena dados via setItem. 
o removerProduto – Exclui um item via removeItem. 
o obterProdutosJSON – Recupera todos os produtos serializados via 
multiGet. 
o obterProdutos – De-serializa os dados e retorna um vetor de objetos. 
 
 
 
 
 
1. O que é um banco de dados relacional? 
• Baseado na álgebra relacional e cálculo relacional. 
• Mantém consistência entre elementos armazenados. 
• Manipula dados como conjuntos matemáticos, aplicando operações como: 
o União, interseção e subtração. 
o Projeção, seleção e junção. 
2. Estrutura dos Dados Relacionais 
• Dados organizados em tabelas (conjuntos de registros). 
• Cada registro representa uma tupla (sequência de valores). 
• Relação entre tabelas por chaves primárias e estrangeiras. 
3. Exemplo de Junção Natural 
Aluno Curso 
Ana Claudia Engenharia 
Luiz Carlos Medicina 
Manoel Oliveira Engenharia 
Curso Coordenador 
Engenharia Rafael Santos 
Medicina Felipe Nascimento 
 
17 
 
17 
Programação Para DispositivosMóveis em Android 
 
Resultado da junção natural 
Aluno Curso Coordenador 
Ana Claudia Engenharia Rafael Santos 
Luiz Carlos Medicina Felipe Nascimento 
Manoel Oliveira Engenharia Rafael Santos 
4. Cálculo Relacional 
• Usa expressões formais para consulta de dados. 
• Introduz conceitos como "Existe" e "Para Todo". 
• Exemplos de consulta em SQL: 
• SELECT coordenador FROM Cursos 
• WHERE EXISTS (SELECT 1 FROM Alunos WHERE Alunos.Curso = 
Cursos.Curso); 
5. Relação com SQL e NoSQL 
• SQL é fundamentado em conceitos matemáticos, garantindo organização e 
desempenho nas consultas. 
• Alternativas como NoSQL são usadas para dados não estruturados ou escalabilidade 
massiva. 
6. Mapeamento Objeto-Relacional 
• Conversão de registros em coleções de objetos para facilitar integração em 
programação orientada a objetos. 
• Essencial para sistemas modernos. 
 
1. Estrutura da SQL 
A linguagem SQL é dividida em três áreas principais: 
• DDL (Data Definition Language) – Define estruturas do banco de dados (CREATE, 
ALTER, DROP). 
• DML (Data Manipulation Language) – Manipula dados (INSERT, UPDATE, DELETE). 
• Consultas (SELECT) – Recupera informações do banco. 
 
2. Comandos DDL 
• Criar tabelas e definir estrutura dos dados: 
CREATE TABLE PRODUTO ( 
 
18 
 
18 
Programação Para Dispositivos Móveis em Android 
 
 CODIGO INTEGER PRIMARY KEY, 
 NOME TEXT, 
 QUANTIDADE INTEGER 
); 
• Alterar (ALTER TABLE) e Excluir (DROP TABLE) tabelas. 
 
3. Comandos DML 
• Inserção de dados: 
• INSERT INTO PRODUTO (CODIGO, NOME, QUANTIDADE) 
• VALUES (1, 'Notebook', 5); 
• Atualização: 
• UPDATE PRODUTO SET QUANTIDADE = 10 WHERE CODIGO = 1; 
• Remoção: 
• DELETE FROM PRODUTO WHERE CODIGO = 1; 
 
4. Consultas com SELECT 
• Projeção (campos) e restrição (condições): 
• SELECT NOME FROM PRODUTO WHERE CODIGO BETWEEN 1 AND 5; 
Principais Operadores SQL 
Operador Utilização 
IN Filtra valores dentro de um conjunto. 
LIKE Busca por padrões (exemplo: nomes que começam com "A"). 
BETWEEN Filtra valores dentro de um intervalo. 
EXISTS Verifica existência de um valor na tabela. 
GROUP BY Agrupa registros baseados em colunas. 
HAVING Aplica restrições sobre os grupos criados. 
ORDER BY Ordena os registros de forma ascendente ou descendente. 
 
5. Consulta SQL Complexa 
Busca os produtos com a quantidade máxima e nomes iniciados com 'A': 
SELECT NOME, CODIGO FROM PRODUTO 
WHERE QUANTIDADE = (SELECT MAX(QUANTIDADE) FROM PRODUTO) 
AND NOME LIKE 'A%'; 
 
 
19 
 
19 
Programação Para Dispositivos Móveis em Android 
 
 
Aqui está um resumo estruturado sobre Banco de Dados SQLite: 
1. O que é o SQLite? 
• Banco de dados relacional, mas sem necessidade de servidor. 
• Minimalista, autossuficiente e de código aberto. 
• Usado amplamente em sistemas móveis e parte da arquitetura Android. 
• Armazena dados localmente, como um arquivo comum. 
2. Características do SQLite 
• Leve (menos de 600KB). 
• Alta capacidade de armazenamento (até 281 TB). 
• Copiável diretamente entre sistemas sem necessidade de configuração. 
• Não possui sistema de usuários, a segurança depende do sistema operacional. 
• Modelo ACID: Garante consistência e integridade dos dados. 
3. Exemplo de Uso no React Native 
import * as SQLite from 'expo-sqlite'; 
 
const db = SQLite.openDatabase("LojaDatabase.db"); 
 
db.transaction(tx => { 
 tx.executeSql( 
 "SELECT * FROM PRODUTO", 
 [], 
 (_, result) => console.log("Total de registros:", 
result.rows.length), 
 (_, error) => console.error("Erro ao consultar:", error) 
 ); 
}); 
• openDatabase("LojaDatabase.db") – Cria/abre um banco de dados. 
• transaction(tx => {...}) – Inicia uma transação. 
• executeSql() – Executa um comando SQL. 
• Callbacks tratam sucesso e erro. 
4. Tabelas de Catálogo no SQLite 
Tabela Campo Descrição 
sqlite_master name, sql Contém os nomes e definições das tabelas. 
sqlite_sequence name, sql Armazena valores de autoincremento. 
sqlite_stat1 tbl, idx, stat Dados sobre otimização de consultas. 
5. Comando para Listar Todas as Tabelas 
 
20 
 
20 
Programação Para Dispositivos Móveis em Android 
 
SELECT name FROM sqlite_master WHERE type='table'; 
 
 
1. Adaptação para SQLite 
• Reaproveitamento do código da versão anterior (persistência baseada em arquivos). 
• Mudança principal na classe GestorDados.ts, alterando a forma de 
armazenamento. 
2. Configuração do Projeto 
• Criar um projeto React Native com suporte a SQLite: 
• npm install expo-sqlite 
• Copiar os arquivos App.js, CommonStyles.js, ProdutoForm.js, ProdutoItem.js, 
ProdutoLista.js. 
• Criar Produto.ts no diretório dados. 
3. Definição da Conexão SQLite 
• Criar DatabaseInstance.js para abrir conexão: 
import * as SQLite from 'expo-sqlite'; 
const db = SQLite.openDatabase("LojaDatabase.db"); 
export default db; 
4. Implementação da Classe GestorDados.ts 
• Define comandos SQL: 
const sqlCreate = "CREATE TABLE IF NOT EXISTS PRODUTO (CODIGO 
INTEGER PRIMARY KEY, NOME TEXT, QUANTIDADE INTEGER);"; 
const sqlSelect = "SELECT * FROM PRODUTO;"; 
const sqlInsert = "INSERT INTO PRODUTO (CODIGO, NOME, QUANTIDADE) 
VALUES (?, ?, ?);"; 
const sqlDelete = "DELETE FROM PRODUTO WHERE CODIGO = ?;"; 
• Método criarBanco() para inicialização automática. 
• Uso de executeSql() dentro de transações (transaction()) para garantir 
segurança e eficiência. 
5. Modificação em ProdutoLista.js 
• Alteração na recuperação de dados: 
• gestorDados.obterTodos(produtos => setProdutos(produtos)); 
• Substituição do operador .then() por callbacks para melhor integração com o 
SQLite. 
6. Mapeamento Objeto-Relacional 
 
21 
 
21 
Programação Para Dispositivos Móveis em Android 
 
• Evita manipulação direta de registros. 
• Converte tabelas e registros em entidades (Produto). 
7. Execução do Aplicativo 
• Rodar o Expo: 
• npm start 
• Usar modo Tunnel para execução no celular via QR Code. 
 
1. O que é um OODBMS? 
• Sistema de banco de dados orientado a objetos (Object-Oriented Database 
Management System). 
• Representação mais eficaz de estruturas complexas comparado aos bancos 
relacionais. 
• Usa conceitos da orientação a objetos, como herança e polimorfismo. 
2. Diferenças entre OODBMS e Relacional 
• OODBMS: Modela entidades próximas ao mundo real, utilizando classes e ponteiros 
em vez de tabelas. 
• Banco Relacional: Estruturado em tabelas e depende de junções para 
relacionamentos. 
Exemplo de OODBMS vs Relacional 
Modelo Orientado a Objetos Modelo Relacional 
Classe Pessoa → Classe Profissional 
(herança) 
Tabela Pessoa + Tabela Profissional 
(relacionamento 1:1) 
Usa ponteiros para acesso rápido Usa joins para ligar dados 
3. Vantagens do OODBMS 
• Execução rápida (acesso por ponteiros). 
• Facilidade na modelagem de dados complexos. 
• Boa escalabilidade para armazenamento massivo (exemplo: 900TB no SLAC). 
4. Desvantagens do OODBMS 
• Não possui um modelo universal de dados. 
• Sem linguagem de consulta padronizada (como SQL). 
• Não suporta consultas aninhadas. 
• Não tem bases matemáticas robustas como álgebra relacional. 
 
 
22 
 
22 
Programação Para Dispositivos Móveis em Android 
 
1. Origem e Desenvolvimento 
• Surgiu em 1985, resultado de pesquisas da Bell Labs, Texas Instruments, Hewlett-
Packard e outras empresas. 
• Primeiros produtos incluem GemStone, Versant, Matisse e Objectivity/DB. 
2. Padrões ODMG (Object Database Management Group) 
• Criado em 1991 por Rick Cattell (Sun Microsystems). 
• Objetivo: Definir padrões para bancos orientados a objetos. 
• Padrões definidos: 
o ODL (Object Definition Language) – Estrutura de objetos. 
o OIF (Object Interchange Format) – Intercâmbio de dados. 
o OQL (Object Query Language) – Consulta de objetos (similar ao SQL). 
3. Evolução e Declínio do ODMG 
• Versão 3.0 lançada em 2000 para padronização do mercado. 
• Conectores para diversas linguagens: C++, Smalltalk, Java. 
• Em 2001, o padrão Java ODMG foi incorporadoà JDO (Java Data Objects). 
• ODMG foi descontinuado em 2001, encerrando a busca por um padrão universal. 
4. Bancos de Dados OODBMS Modernos 
• Várias opções surgiram ao longo do tempo (DB-Engines classifica os mais utilizados). 
• Realm como alternativa em React Native, por sua facilidade de uso. 
• Embora classificado como NoSQL, o Realm mantém características do modelo 
orientado a objetos. 
 
 
1. O que é Realm? 
• Alternativa ao SQLite, voltada para armazenamento orientado a objetos. 
• Fácil de usar, sem necessidade de mapeamento objeto-relacional. 
• Compatível com diversas linguagens: Swift, Java, Kotlin, C#, JavaScript. 
 
2. Características do Realm 
• Leve, independente e funcional. 
• Baixo consumo de memória e uso reduzido de espaço em disco. 
• Ótimo para apps offline e plataformas móveis. 
 
 
23 
 
23 
Programação Para Dispositivos Móveis em Android 
 
3. Configuração no React Native 
• Instalação: 
npm install realm 
• Definição de Banco (DatabaseInstance.js): 
import Realm from "realm"; 
 
const ProdutoSchema = { 
 name: "Produto", 
 primaryKey: "codigo", 
 properties: { 
 codigo: "int", 
 nome: "string", 
 quantidade: "int", 
 }, 
}; 
 
const db = new Realm({ path: "LojaDatabase.realm", schema: 
[ProdutoSchema] }); 
 
export default db; 
 
4. Operações em Realm 
Consulta de dados 
const produtos = db.objects("Produto").filtered("codigo > 100"); 
produtos.forEach(produto => console.log(produto.codigo, 
produto.nome)); 
Inserção 
db.write(() => { 
 db.create("Produto", { codigo: 1, nome: "Celular", quantidade: 5 }); 
}); 
Exclusão 
db.write(() => { 
 let produto = db.objectForPrimaryKey("Produto", 1); 
 db.delete(produto); 
}); 
 
5. Métodos Principais do Realm 
Método Utilização 
open() Abre conexão com o banco. 
close() Fecha a conexão. 
write() Define um bloco de escrita. 
 
24 
 
24 
Programação Para Dispositivos Móveis em Android 
 
Método Utilização 
create() Adiciona um objeto ao banco. 
delete() Remove um objeto do banco. 
objects() Retorna coleção de objetos. 
objectForPrimaryKey() Obtém objeto pela chave primária. 
beginTransaction() Inicia uma transação manual. 
commitTransaction() Confirma a transação. 
cancelTransaction() Cancela operações pendentes. 
 
 
 
 
6. Relacionamento entre Classes 
const PessoaSchema = { 
 name: "Pessoa", 
 primaryKey: "nome", 
 properties: { 
 nome: "string", 
 fotografia: "string?", 
 carros: { type: "list", objectType: "Carro" }, 
 }, 
}; 
• Atributo carros define uma coleção de objetos da classe Carro. 
 
7. Controle Transacional 
db.beginTransaction(); 
try { 
 db.create("Pessoa", { nome: "João", carros: [] }); 
 db.commitTransaction(); 
} catch (error) { 
 db.cancelTransaction(); 
 console.error("Erro na transação:", error); 
} 
 
 
 
25 
 
25 
Programação Para Dispositivos Móveis em Android 
 
1. Configuração do Projeto 
• Criar um novo projeto e instalar Realm: 
• npm install realm 
• Copiar arquivos do primeiro exemplo (CadastroLocal): 
o App.js 
o CommonStyles.js 
o ProdutoForm.js 
o ProdutoItem.js 
o ProdutoLista.js 
o Produto.ts (diretório dados) 
 
 
2. Definição da Conexão com o Banco (DatabaseInstance.js) 
• Criar um objeto Realm com configuração: 
import Realm from "realm"; 
 
const ProdutoSchema = { 
 name: "Produto", 
 primaryKey: "codigo", 
 properties: { 
 codigo: "int", 
 nome: "string", 
 quantidade: "int", 
 }, 
}; 
 
const db = new Realm({ path: "LojaDatabase.realm", schema: 
[ProdutoSchema] }); 
 
export default db; 
 
3. Implementação da Classe GestorDados.ts 
• Responsável pela gerência das operações (consulta, adição e remoção). 
• Método adicionar: 
db.write(() => { 
 db.create("Produto", { codigo: 1, nome: "Celular", quantidade: 5 
}); 
}); 
Método remover: 
db.write(() => { 
 let produto = db.objects("Produto").filtered("codigo == 1")[0]; 
 db.delete(produto); 
}); 
 
26 
 
26 
Programação Para Dispositivos Móveis em Android 
 
Método obterTodos: 
function obterTodos(): Produto[] { 
 let realmProdutos = db.objects("Produto"); 
 return realmProdutos.map(produto => 
JSON.parse(JSON.stringify(produto))); 
} 
 
4. Conversão de Objetos 
• Realm retorna objetos como Realm.Object, necessitando conversão via JSON antes 
de armazená-los em um vetor. 
 
5. Execução do Aplicativo 
• Rodar Expo: 
• npm start 
• Persistência agora baseada em Realm, mantendo a mesma interface do primeiro 
exemplo. 
1. Evolução do termo NoSQL 
• Inicialmente referia-se a bancos não relacionais, sem suporte à SQL. 
• Mudança de conceito → Significa Not Only SQL, ou seja, bancos que combinam 
diferentes modelos de dados. 
• Com o Big Data, surgiu a necessidade de alta escalabilidade e processamento 
distribuído, levando à adoção do NoSQL. 
2. Características dos Bancos NoSQL 
• Maior flexibilidade nos modelos de armazenamento. 
• Menos preocupação com consistência, priorizando disponibilidade e velocidade. 
• Não seguem esquemas fixos, permitindo ajustes dinâmicos. 
3. Modelos de Bancos NoSQL 
Chave-Valor 
• Armazenamento simples, onde uma chave referencia um valor. 
• Exemplo: Oracle Berkeley DB (com suporte a transações e versionamento). 
Colunar 
• Extensão do modelo chave-valor, armazenando dados em colunas organizadas por 
famílias. 
• Exemplo: HBase, baseado no Google Big Table, com suporte a Hadoop e MapReduce. 
 
27 
 
27 
Programação Para Dispositivos Móveis em Android 
 
Documental 
• Usa chave associada a um documento (JSON, XML, YAML, etc.). 
• Exemplo: MongoDB (armazenamento em JSON). 
Grafos 
• Representação baseada em vértices e arestas, ideal para relacionamentos complexos. 
• Exemplo: Neo4J, suporte a transações e consultas flexíveis. 
4. Comparação entre NoSQL e Relacional 
Banco Relacional Banco NoSQL 
Esquema fixo Estrutura flexível 
Relações por chaves estrangeiras Relações dinâmicas 
Consistência forte (ACID) Disponibilidade e escalabilidade 
SQL para consultas Métodos variados (JSON, MapReduce, etc.) 
 
1. O que é MongoDB? 
• Banco NoSQL baseado em documentos (modelo JSON). 
• Permite hierarquias de dados, facilitando modelagem complexa. 
• Suporte a consultas avançadas (por campo, faixa de valores, expressões regulares, 
etc.). 
• Ideal para Big Data, devido à alta escalabilidade. 
 
2. Instalação e Configuração 
• Baixar e instalar MongoDB Community Edition: 
o Link: MongoDB Download 
• MongoDB é instalado como: 
o Serviço do sistema (pode ser iniciado manualmente). 
o MongoDB Compass (gerenciador gráfico). 
 
3. Criação de Banco e Coleção 
• Criar um banco "loja" e uma coleção "produtos" no Compass. 
• Não selecionar "Capped Collection" (impede remoção de registros). 
 
https://www.mongodb.com/try/download/community
 
28 
 
28 
Programação Para Dispositivos Móveis em Android 
 
4. Inserção de Documentos JSON 
• Exemplo de documento MongoDB: 
{ 
 "_id": 1, 
 "nome": "Celular", 
 "quantidade": 500, 
 "cores": ["preto", "azul"] 
} 
 
5. Principais Operadores de Consulta 
Operador Utilização 
$gt Valores maiores que o especificado. 
$lt Valores menores que o especificado. 
$in Verifica presença em lista de valores. 
$or Combina condições com OR lógico. 
$exists Retorna documentos que contêm determinado campo. 
$regex Busca utilizando expressão regular. 
 
6. Inserção em Bloco no Shell MongoDB 
db.inventario.insertMany([ 
 { _id: 1, nome: "Caneta", quantidade: 150, cores: ["vermelho", 
"azul"] }, 
 { _id: 2, nome: "Pilot", quantidade: 200, cores: ["vermelho", 
"azul"] } 
]); 
 
7. Consultas 
• Buscar produtos com quantidade acima de 500: 
• db.produtos.find({ quantidade: { $gt: 500 } }); 
• Buscar produtos que contêm "vermelho" e "azul": 
• db.inventario.find({ cores: { $all: ["vermelho", "azul"] } }); 
 
8. Integração com Aplicativos 
• MongoDB exige um servidor web para acesso remoto via dispositivos móveis. 
• Sugestão:Utilizar Node.js com Express para criar uma API REST. 
 
29 
 
29 
Programação Para Dispositivos Móveis em Android 
 
 
1. Introdução 
• MongoDB exige interface de acesso via rede, necessitando um servidor Web. 
• Usaremos Node.js + Express para criar um servidor minimalista. 
 
2. Configuração do Projeto 
• Instalar Express e MongoDB: 
• npm install express mongodb 
• Criar GestorDB.js no diretório dados. 
 
3. Implementação de GestorDB.js 
• Conexão ao MongoDB: 
const { MongoClient } = require("mongodb"); 
const uri = "mongodb://localhost:27017"; 
const client = new MongoClient(uri); 
 
client.connect().then(() => { 
 global.conn = client.db("loja"); // Seleciona o banco de dados 
"loja" 
}); 
• Funções de CRUD: 
async function findAll() { 
 return await global.conn.collection("produtos").find().toArray(); 
} 
 
async function insert(produto) { 
 return await 
global.conn.collection("produtos").insertOne(produto); 
} 
 
async function deleteOne(codigo) { 
 return await global.conn.collection("produtos").deleteOne({ _id: 
codigo }); 
} 
 
4. Criação do Servidor Web (index.js - diretório routes) 
• Definição das rotas REST: 
const express = require("express"); 
const router = express.Router(); 
 
 
30 
 
30 
Programação Para Dispositivos Móveis em Android 
 
// Rota para listar todos os produtos (GET) 
router.get("/", async (req, res) => { 
 try { 
 const docs = await findAll(); 
 res.json(docs.map(doc => ({ id: doc._id, nome: doc.nome, 
quantidade: doc.quantidade }))); 
 } catch (error) { 
 res.status(500).json({ error: error.message }); 
 } 
}); 
 
// Rota para inserir um novo produto (POST) 
router.post("/new", async (req, res) => { 
 try { 
 await insert(req.body); 
 res.status(201).json({ message: "Produto inserido com sucesso" 
}); 
 } catch (error) { 
 res.status(500).json({ error: error.message }); 
 } 
}); 
 
// Rota para remover um produto (DELETE) 
router.delete("/remove/:codigo", async (req, res) => { 
 try { 
 await deleteOne(parseInt(req.params.codigo)); 
 res.json({ message: "Produto removido com sucesso" }); 
 } catch (error) { 
 res.status(500).json({ error: error.message }); 
 } 
}); 
 
module.exports = router; 
 
5. Métodos HTTP REST 
Método HTTP Uso 
GET Busca entidades em formato JSON. 
POST Insere nova entidade a partir de JSON. 
PUT Edita uma entidade existente. 
DELETE Remove entidade por chave primária. 
 
6. Iniciando o Servidor 
• Criar server.js e iniciar com: 
const express = require("express"); 
const app = express(); 
const port = 3000; 
 
 
31 
 
31 
Programação Para Dispositivos Móveis em Android 
 
app.use(express.json()); 
app.use("/", require("./routes/index")); 
 
app.listen(port, () => { 
 console.log(`Servidor rodando em http://localhost:${port}`); 
}); 
• Rodar servidor Express: 
• node server.js 
• Acessar API REST via: 
o http://localhost:3000/ → Listar produtos. 
o http://localhost:3000/new (POST) → Inserir produto. 
o http://localhost:3000/remove/:codigo (DELETE) → Excluir produto. 
 
 
 
 
1. Configuração do Ambiente 
• O MongoDB exige um servidor para ser acessado via rede. 
• O Android não permite localhost como origem devido à segurança do Linux. 
• Recomendação: Utilizar ngrok para gerar URLs acessíveis via HTTPS. 
 
2. Configuração do Tunelamento (ngrok) 
• Instalação do ngrok: Baixar no site oficial. 
• Execução do tunelamento: 
• ngrok http 3000 
• Gera dois endereços, um HTTP e outro HTTPS, que variam a cada execução. 
 
3. Criação do Projeto Cliente 
• Criar novo projeto React Native e instalar dependências: 
• npx react-native init CadastroMongo 
• Copiar arquivos do projeto CadastroRealm: 
o App.js 
o CommonStyles.js 
o ProdutoForm.js 
o ProdutoItem.js 
o ProdutoLista.js 
o Produto.ts (diretório dados). 
 
 
32 
 
32 
Programação Para Dispositivos Móveis em Android 
 
4. Conexão com Servidor (ApiService.ts) 
• Instalar Axios: 
npm install axios 
Criar conexão com baseURL do ngrok: 
import axios from "axios"; 
 
const api = axios.create({ 
 baseURL: "https://seu-endereco-ngrok.io", 
}); 
 
export default api; 
 
5. Implementação do Gestor de Dados (GestorDados.ts) 
Remover Produto 
async function remover(codigo: number) { 
 await api.delete(`/remove/${codigo}`); 
} 
Adicionar Produto 
async function adicionar(produto: Produto) { 
 await api.post("/new", produto); 
} 
Obter Todos os Produtos 
async function obterTodos(): Promise { 
 const response = await api.get("/"); 
 return response.data; 
} 
 
6. Execução do Projeto 
• Iniciar MongoDB, Express e ngrok. 
• Rodar React Native: 
• npx react-native run-android 
• O aplicativo funciona como os exemplos anteriores, mas agora com persistência 
remota no MongoDB! 
 
 
 
 
 
 
 
 
33 
 
33 
Programação Para Dispositivos Móveis em Android 
 
 
 
 
 
 Conexão Remota com React Native – Resumo 
 Objetivo Geral 
Estudar os componentes, ferramentas e técnicas para desenvolvimento de apps mobile 
em React Native com foco em conexão remota, persistência de dados e 
funcionamento offline. 
 
 1. Componentes para Conexão em Rede 
 Tipos de Recursos Acessados 
• Login/autenticação 
• APIs de terceiros 
• Persistência de dados em servidores 
 Ferramentas principais 
• Fetch API (nativa): suporta métodos HTTP (GET, POST etc.). 
• Axios (biblioteca externa): facilita o consumo de APIs, com tratamento de erros 
e instâncias personalizadas. 
 Exemplos práticos 
• Requisições GET/POST com Fetch e Axios 
• Criação de instância Axios para reutilização 
• Tratamento de resposta e erros com .then e .catch 
 
 2. Persistência Remota com Controle de Acesso (REST) 
 Conceito de REST 
• Arquitetura baseada em cliente-servidor 
• Comunicação via verbos HTTP (GET, POST, PUT etc.) 
• Dados geralmente em formato JSON 
 Exemplos práticos 
• Envio de dados via Axios (POST) 
 
34 
 
34 
Programação Para Dispositivos Móveis em Android 
 
• Atualização de dados com PUT 
• Requisições autenticadas com Bearer Token 
• Testes com APIs públicas como gorest.co.in 
 Controle de Acesso com OAuth2 
• Papéis: Dono do recurso, Cliente, Servidor de Recurso, Servidor de Autorização 
• Fluxos: 
o Código de Autorização 
o Fluxo Implícito 
o Credenciais do Proprietário do Recurso 
o Credenciais do Cliente 
• Ferramentas: 
o Firebase Authentication 
o Auth0 
o Keycloak 
o react-native-app-auth 
 
 3. Modelo Offline First 
 Objetivo 
Permitir o funcionamento do app com ou sem internet. 
 Fluxo 
1. Verifica conexão com a internet 
2. Usa banco local (embarcado) quando offline 
3. Sincroniza dados com servidor quando online 
 Banco de dados embarcado 
• Realm, AsyncStorage, SQLite, PouchDB, WatermelonDB 
• Exemplo de uso com Realm (modelo Produto) 
 Sincronização e Controle 
• Bibliotecas: 
o react-native-offline 
o redux-offline 
 
35 
 
35 
Programação Para Dispositivos Móveis em Android 
 
• Interface otimista: responde rápido ao usuário e sincroniza depois 
 
 4. Considerações Finais 
• React Native suporta conexão remota com APIs e bancos de dados 
• Modelos como OAuth2 e Offline First aumentam a segurança e a experiência 
do usuário 
• Ferramentas externas são indispensáveis para apps profissionais 
 
 Dicas para estudo 
• Pratique as requisições com APIs públicas 
• Simule cenários offline/online no app 
• Experimente persistência com Realm ou SQLite 
• Estude o fluxo de autenticação OAuth2 com Firebase ou Auth0 
 
 
 
 Tópicos Avançados em React Native – Resumo Completo 
 Objetivo Geral 
Capacitar o aluno a construir aplicativos seguros, organizados e profissionais com 
React Native, empregando: 
• Arquiteturas modernas (MVC, Flux e Redux) 
• Criptografia 
• Testes 
• Publicação de apps 
 
1️⃣ Arquitetura MVC com React Native 
 Padrõesde Projeto (GoF) 
• Criacionais: Singleton, Factory Method 
• Estruturais: Facade, Composite, Proxy 
• Comportamentais: Observer, Strategy, Iterator, Template Method 
 
36 
 
36 
Programação Para Dispositivos Móveis em Android 
 
 MVC na prática 
• Model: regras de dados + acesso ao banco (com DAOs) 
• View: interface com o usuário (React components) 
• Controller: regras de negócio e lógica de controle 
 GenericDAO + SQLite 
• Classe genérica com métodos CRUD usando SQL 
• DAO implementa o padrão Template Method 
• Exemplo com entidade Aluno 
 
2️⃣ Arquitetura Flux com React Native 
 Fluxo unidirecional de dados 
• View → Action → Dispatcher → Store → View 
 Componentes 
• Action: cria mensagens para o Dispatcher 
• Dispatcher: central de encaminhamento 
• Store: lógica de negócio + dados 
• View: escuta Store via eventos 
 Exemplo com cadastro de alunos 
• Reaproveita Model do MVC 
• Listener atualizado com evento personalizado 'ALUNOS_CHANGE' 
 
3️⃣ Arquitetura Redux com React Native 
 Destaques 
• Sem dispatcher e eventos personalizados 
• Uso de: 
o Reducer: função pura que altera o estado 
o Store: centraliza estado 
o Actions: funções que retornam { type, payload } 
 Benefícios 
• Código previsível 
 
37 
 
37 
Programação Para Dispositivos Móveis em Android 
 
• Facilidade para testes 
• Escalabilidade 
 Exemplo prático 
• Redux com RealmDB 
• Armazena e consulta alunos via DAO 
• AlunoTela.js atualiza via store.dispatch e store.subscribe 
 
4️⃣ Criptografia com React Native 
 Tipos de criptografia 
• Simétrica (AES, RC4): mesma chave para codificar/decodificar 
• Assimétrica (RSA): chave pública + chave privada 
• Hash (MD5, SHA1): irreversível (ex: senhas) 
 Bibliotecas utilizadas 
• react-native-crypto-js 
• react-native-base64 
• react-native-encrypted-storage 
 Classes criadas 
• StoredKey: armazena chave e vetor de inicialização 
• Utils: manipula WordArray ↔ Uint8Array 
• KeyGenerator: cria/restaura chave 
• Cipher: criptografa e decriptografa textos 
 Cadastro com campo criptografado 
• Modificação da AlunoDAO para criptografar o campo nome 
• Transparência para outras camadas 
 
 Outros Recursos 
• Testes com Jest (mencionados como boa prática) 
• Publicação em lojas (Google Play / App Store – contexto citado) 
 
 Conclusão 
 
38 
 
38 
Programação Para Dispositivos Móveis em Android 
 
Com esses conhecimentos, você será capaz de: 
• Criar apps modulares, escaláveis e seguros 
• Aplicar boas práticas de arquitetura 
• Proteger dados sensíveis do usuário 
• Integrar fluxos unidirecionais e gerência de estado 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39 
 
39 
Programação Para Dispositivos Móveis em Android 
 
 
Abaixo, as 50 questões mais recorrentes em provas AV/AVS dos últimos 3 anos, 
organizadas por temas para facilitar o estudo. Cada questão está acompanhada da 
resposta correta. 
 
1. Ambiente de Desenvolvimento e Ferramentas 
1. Como instalar o Expo CLI localmente via NPM? 
Resposta: npm install expo-cli 
2. Como instalar um pacote globalmente com NPM? 
Resposta: npm install -g 
3. Qual comando inicia um projeto Expo? 
Resposta: expo init 
4. O que é o Expo Client? 
Resposta: Um aplicativo que permite rodar projetos Expo diretamente no 
dispositivo. 
5. Para que serve o arquivo app.json em projetos Expo? 
Resposta: Configurações do projeto, como nome, ícone, splash, etc. 
6. O que é o arquivo package.json? 
Resposta: Lista dependências e scripts do projeto Node.js/React Native. 
7. Como atualizar dependências de um projeto? 
Resposta: npm update ou yarn upgrade 
8. Qual comando é utilizado para empacotar um app Android nativo para 
distribuição? 
Resposta: gradlew 
9. Sobre ambientes de desenvolvimento para dispositivos móveis, qual 
afirmação é verdadeira? 
Resposta: É possível existir um ambiente de desenvolvimento heterogêneo, sem 
restrições quanto ao uso de gerenciadores de pacotes, IDEs ou formas de 
desenvolver/testar aplicativos. 
 
2. Estrutura e Componentes do React Native 
10. JSX é: 
Resposta: Uma extensão para arquivos JavaScript, convertida em JavaScript 
durante o build. 
11. O que é um componente funcional em React Native? 
Resposta: Função que retorna JSX. 
 
40 
 
40 
Programação Para Dispositivos Móveis em Android 
 
12. Como importar um componente em React Native? 
Resposta: import NomeComponente from './Caminho' 
13. O que é o componente View em React Native? 
Resposta: Container genérico para layout. 
14. Como definir estilos em React Native? 
Resposta: Usando o objeto StyleSheet. 
15. O que é o Flexbox em React Native? 
Resposta: Sistema de layout para alinhar e distribuir espaço entre componentes. 
16. Como centralizar um componente com Flexbox? 
Resposta: Usando justifyContent: 'center' e alignItems: 'center'. 
17. Como exibir imagens em React Native? 
Resposta: Usando o componente . 
18. Para que serve o componente ? 
Resposta: Permite rolar o conteúdo vertical ou horizontalmente. 
19. Como manipular eventos de toque em React Native? 
Resposta: Usando o componente TouchableOpacity ou TouchableHighlight. 
20. O que é o método onPress? 
Resposta: Evento disparado ao pressionar um componente touchable. 
 
3. Estado, Props e Hooks 
21. Qual a diferença entre props e state em componentes React Native? 
Resposta: Props são imutáveis e passadas pelo componente pai; state é mutável 
e gerenciado pelo próprio componente. 
22. Qual a principal função do método setState? 
Resposta: Atualizar o estado do componente. 
23. Para que serve o useEffect em React Native? 
Resposta: Executa efeitos colaterais em componentes funcionais. 
24. O que é um hook em React Native? 
Resposta: Função especial para gerenciar estado e ciclo de vida em 
componentes funcionais. 
25. Como funciona o ciclo de vida de um componente React Native? 
Resposta: Montagem, atualização e desmontagem. 
 
4. Listas e Renderização de Dados 
26. Para que serve o FlatList? 
Resposta: Renderizar listas de dados de forma eficiente. 
 
41 
 
41 
Programação Para Dispositivos Móveis em Android 
 
27. Qual a função do atributo keyExtractor em FlatList? 
Resposta: Define como extrair a chave única de cada item. 
28. Como exibir uma lista agrupada em React Native? 
Resposta: Usando o componente SectionList. 
29. Em uma SectionList, qual propriedade define o agrupamento dos dados? 
Resposta: sections 
30. Qual a principal diferença entre FlatList e VirtualizedList? 
Resposta: O VirtualizedList oferece um suporte melhor a dados imutáveis. 
31. Qual propriedade permite carregar mais dados sob demanda em listas do 
React Native? 
Resposta: onEndReached 
32. Qual a função do método renderItem em listas do React Native? 
Resposta: Define como cada item da lista será renderizado. 
 
5. Navegação 
33. O que é o React Navigation? 
Resposta: Biblioteca para navegação entre telas em React Native. 
34. Como criar navegação em pilha (stack) em React Native? 
Resposta: Usando o Stack Navigator do React Navigation. 
35. Como navegar para outra tela usando React Navigation? 
Resposta: navigation.navigate('NomeDaTela') 
36. O que é o método push em navegação stack? 
Resposta: Adiciona uma nova tela ao topo da pilha. 
37. Como remover uma tela da pilha de navegação? 
Resposta: navigation.goBack() 
38. O que é o método pop em navegação stack? 
Resposta: Remove a tela atual da pilha. 
39. O Stack Navigator permite a navegação pelas telas do aplicativo por meio 
de qual método? 
Resposta: navigate ou botão de voltar inserido por default. 
 
6. Armazenamento e Comunicação 
40. O que é o AsyncStorage? 
Resposta: API para armazenamento local simples em React Native. 
41. Como acessar APIs REST em React Native? 
Resposta: Usando fetch ou axios. 
 
42 
 
42 
Programação Para Dispositivos Móveis em Android42. Como tratar erros em requisições fetch? 
Resposta: Usando try/catch ou .catch(). 
43. Como lidar com permissões em apps Android? 
Resposta: Usando a API Permissions do Expo ou do React Native. 
 
7. Arquitetura, Padrões e Testes 
44. O que caracteriza um aplicativo Offline First? 
Resposta: Funciona de forma semelhante independentemente de possuir ou não 
conexão com a internet. 
45. Por que a identificação correta do usuário é importante em apps Offline 
First? 
Resposta: Os dados são armazenados localmente e sincronizados remotamente; 
não identificar o usuário pode gerar inconsistência. 
46. Sobre o padrão de projeto em Stores na arquitetura Flux, qual é o mais 
indicado? 
Resposta: Singleton 
47. O que faz um componente mock em testes? 
Resposta: Simula comportamentos de componentes reais para testar 
funcionalidades isoladas. 
48. Muitas vezes, precisamos testar a conexão com um banco de dados ou 
servidor na rede antes que ele seja implementado. Qual instrumento de 
programação poderia ser utilizado? 
Resposta: Componente mock 
 
8. JavaScript Essencial para React Native 
49. O que é o método map em JavaScript? 
Resposta: Itera sobre arrays e retorna um novo array. 
50. O que é o método filter em JavaScript? 
Resposta: Filtra elementos de um array conforme uma condição.