Compilado de códigos

Prévia do material em texto

📱 PROGRAM PARA DISPOSITIVOS MÓVEIS EM ANDROID
REACT NATIVE - TODOS OS CÓDIGOS COMENTADOS PARA PROVA
Baseado nos simulados e exercícios da Estácio, preparei um compilado completo de todos os
trechos de código que podem cair na prova, com gabarito comentado de cada um! 🚀
📋 ÍNDICE DOS CÓDIGOS
# Tema Tipo de Código
1 React Native Básico Hierarquia de Componentes (View/Text)
2 AsyncStorage Persistência Local
3 SQLite Banco Relacional
4 Realm Banco Orientado a Objetos
5 MongoDB Consultas NoSQL
6 Fetch API Conexão Remota GET
7 Fetch API Conexão Remota POST
8 Axios Conexão Remota
9 OAuth2 Autenticação com Token
10 Jest Testes Unitários
11 Jest com Mock Testes com Simulação
12 Navegação Stack React Navigation
13 Navegação Tab React Navigation
14 Navegação Drawer React Navigation
15 FlatList Listas Otimizadas
🧩 CÓDIGO 1 - HIERARQUIA DE COMPONENTES
(VIEW/TEXT)
📝 Trecho de Código:
❓ Pergunta típica:
Analise o fragmento de código a seguir e assinale a afirmativa que corresponde à saída dele.
✅ Alternativa Correta:
"Será exibido na tela o conteúdo do componente  , ou seja, 'Texto', em fonte de cor preta,
dentro de um retângulo com background de cor vermelha - herdado da   que contém o 
 ."
📝 Gabarito Comentado:
Herança de estilos no React Native:
# Tema Tipo de Código
16 SectionList Listas com Seções
17 Animated API Animações
18 LayoutAnimation Animações de Layout
19 CryptoJS Criptografia AES
20 Expo Crypto Hash SHA
return (
 
 Texto
 
);
javascript
O componente   define um estilo com  backgroundColor: 'red'
O componente   não herda automaticamente as cores de fundo do pai
O   terá seu estilo padrão (fonte preta) e estará dentro da área vermelha da View
A View é um container que envolve o Text, então o fundo vermelho fica atrás do texto
Pontos importantes:
Diferente do CSS, React Native não propaga todos os estilos para filhos
backgroundColor  do pai não afeta a cor do texto do filho
A hierarquia visual respeita o aninhamento dos componentes
💾 CÓDIGO 2 - ASYNCSTORAGE (PERSISTÊNCIA)
📝 Trecho de Código:
❓ Pergunta típica:
Analise as afirmativas acerca da programação assíncrona no React Native.
✅ Afirmativas Corretas:
I - O retorno de uma função assíncrona deve ser um objeto da classe Promise ✅
II - Uma função assíncrona deve ser definida com o uso da palavra await ❌
const salvarProduto = async (key: string, value: any) => {
 try {
 const jsonValue = JSON.stringify(value);
 await AsyncStorage.setItem(key, jsonValue);
 } catch (e) {}
}
const obterProduto = async (key: string) => {
 try {
 const jsonValue = await AsyncStorage.getItem(key);
 return jsonValue != null ? JSON.parse(jsonValue) : null;
 } catch (e) {}
}
javascript
III - Utilizando o operador then, o retorno da função assíncrona é repassado para o fluxo seguinte
✅
📝 Gabarito Comentado:
Explicação do código:
async  define a função como assíncrona (retorna Promise)
await  pausa a execução até a Promise ser resolvida (usado dentro da função)
JSON.stringify  serializa objeto para string (armazenamento)
JSON.parse  desserializa string para objeto (recuperação)
Por que a II está errada:
Funções assíncronas são definidas com  async , não com  await
await  é usado dentro de funções async para esperar Promises
Exemplo correto:  async function buscar() { await ... }
🗄 CÓDIGO 3 - SQLITE (BANCO RELACIONAL)
📝 Trecho de Código:
❓ Pergunta típica:
Qual será o resultado da execução desse trecho de código?
✅ Alternativa Correta:
openDatabase({name: "Escola.db"}).then((db) => 
 db.transaction((tx) => 
 tx.executeSql(
 "INSERT INTO ALUNOS (MATRICULA, NOME) VALUES (?, ?)",
 [120076, "Luiz Paulo"]
 )
 )
);
javascript
"Uma conexão será obtida de forma assíncrona, sendo utilizada, a seguir, para iniciar uma
transação e, a partir dela, inserir um registro no banco de dados."
📝 Gabarito Comentado:
Fluxo de execução:
1. openDatabase  - abre conexão de forma assíncrona (retorna Promise)
2. .then()  - aguarda a conexão ser estabelecida
3. transaction  - inicia uma transação no banco
4. executeSql  - executa comando SQL com parâmetros
5. (?, ?)  - placeholders para parâmetros (previne SQL injection)
6. [120076, "Luiz Paulo"]  - valores que substituem os placeholders
Características importantes:
Operações de banco são assíncronas para não travar a UI
Transações garantem atomicidade (tudo ou nada)
Parâmetros evitam concatenação manual de strings (segurança)
🧩 CÓDIGO 4 - REALM (BANCO ORIENTADO A OBJETOS)
📝 Trecho de Código:
❓ Pergunta típica:
Qual será o resultado da execução desse trecho de código?
✅ Alternativa Correta:
"Um aluno é recuperado a partir da chave, tendo seu nome e sala alterados."
db.write(() => {
 let obj = db.objectForPrimaryKey("Aluno", 2012981);
 obj.nome = "Ana Maria";
 obj.sala = "102E";
});
javascript
📝 Gabarito Comentado:
Explicação passo a passo:
1. db.write()  - inicia uma transação de escrita (bloco atômico)
2. objectForPrimaryKey  - busca objeto pela chave primária (2012981)
3. obj.nome = ...  - altera atributo do objeto
4. obj.sala = ...  - altera outro atributo
5. Ao final do bloco  write , as alterações são automaticamente persistidas
Características do Realm:
Não precisa de SQL - trabalha diretamente com objetos
Alterações dentro de  write()  são automáticas
objectForPrimaryKey  é o método de busca por chave
Realm segue modelo orientado a objetos, não relacional
🗄 CÓDIGO 5 - MONGODB (CONSULTAS NOSQL)
📝 Trecho de Código:
❓ Pergunta típica:
Qual seria o resultado da execução desse trecho de código?
✅ Alternativa Correta:
"Recuperação dos documentos referentes às vendas, em que, no pagamento, foi utilizado dinheiro,
e a movimentação ocorreu no dia corrente." (adaptado conforme contexto)
📝 Gabarito Comentado:
Operador  $all  no MongoDB:
db.inventario.find({
 cores: { $all: ['vermelho', 'azul'] }
});
javascript
Retorna documentos onde o campo array contém todos os valores especificados
Diferente de  $in  (que retorna se contém qualquer um dos valores)
Exemplo prático:
Outros operadores importantes:
$gt  - greater than (maior que)
$lt  - less than (menor que)
$in  - está no array
$regex  - expressão regular
📡 CÓDIGO 6 - FETCH API (GET)
📝 Trecho de Código:
❓ Pergunta típica:
Considerando o código acima, qual o fluxo de execução?
📝 Gabarito Comentado:
Fluxo de execução:
1. fetch  - faz requisição GET para a URL
// Documentos que tenham 'vermelho' E 'azul' no array 'cores'
{ cores: ['vermelho', 'azul', 'verde'] } // ✅ retorna
{ cores: ['azul', 'branco'] } // ❌ não retorna (falta vermelho)
{ cores: ['vermelho'] } // ❌ não retorna (falta azul)
fetch('https://api.exemplo.com/users')
 .then((response) => response.json())
 .then((json) => setData(json))
 .catch((error) => console.error(error))
 .finally(() => setLoading(false));
javascript
javascript
2. Primeiro  .then()  - aguarda resposta e converte para JSON
3. Segundo  .then()  - recebe os dados e atualiza o state
4. .catch()  - executa se qualquer erro ocorrer
5. .finally()  - executa sempre, independente de sucesso/erro
Características:
Fetch é nativo (não precisa instalar)
Retorna Promise (assíncrono)
response.json()  também é assíncrono
Tratamento de erros é fundamental para UX
📡 CÓDIGO 7 - FETCH API (POST)
📝 Trecho de Código:
❓ Pergunta típica:
Quais elementos estão presentes nesta requisição?
✅ Alternativa Correta:
"Um componente React Native para realizar a conexão, os dados do produto, o endereço do
recurso externo e a definição do método HTTP."
📝 Gabarito Comentado:
fetch('https://api.exemplo.com/users', {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json',
 },
 body: JSON.stringify({
 nome: 'João',
 email: 'joao@email.com'
 })
});
javascript
Elementos obrigatórios em requisiçõesPOST:
URL - endereço do recurso
method: 'POST' - método HTTP
headers - metadados (tipo de conteúdo)
body - dados enviados (convertidos para string)
Diferenças do GET:
GET não tem body (dados vão na URL)
GET é padrão se method não for especificado
POST envia dados no corpo da requisição
📦 CÓDIGO 8 - AXIOS (CONEXÃO REMOTA)
📝 Trecho de Código:
❓ Pergunta típica:
Como acessar a resposta de uma requisição Axios?
✅ Alternativa Correta:
response.data
📝 Gabarito Comentado:
Estrutura da resposta Axios:
import axios from 'axios';
const api = axios.create({
 baseURL: 'https://api.exemplo.com',
 timeout: 1000,
});
api.get('/users')
 .then(response => console.log(response.data))
 .catch(error => console.log(error));
javascript
Diferenças do Fetch:
Fetch: precisa de  response.json()  para converter
Axios:  response.data  já vem convertido automaticamente
Axios: tratamento de erros mais robusto
Axios: permite criar instâncias com configuração padrão
🔐 CÓDIGO 9 - OAUTH2 (AUTENTICAÇÃO COM TOKEN)
📝 Trecho de Código:
❓ Pergunta típica:
Considerando uma requisição para um recurso que exige autenticação, qual o retorno se o token não
for enviado?
✅ Alternativa Correta:
{
 data: {}, // Dados retornados (já convertidos!)
 status: 200, // Código HTTP
 statusText: 'OK',
 headers: {},
 config: {},
 request: {}
}
const token = 'seu-token-aqui';
axios.post('https://api.exemplo.com/users', dados, {
 headers: {
 'Authorization': `Bearer ${token}`
 }
});
javascript
javascript
"Caso a requisição seja tratada em um bloco 'catch', será possível obter o erro HTTP
correspondente (normalmente 401 - Unauthorized)."
📝 Gabarito Comentado:
Códigos HTTP importantes:
401 Unauthorized - token ausente ou inválido
403 Forbidden - autenticado mas sem permissão
200 OK - sucesso
404 Not Found - recurso não encontrado
Bearer Token:
Formato:  Authorization: Bearer 
Padrão utilizado em OAuth2
Token deve ser incluído em todas as requisições autenticadas
🧪 CÓDIGO 10 - JEST (TESTES UNITÁRIOS)
📝 Trecho de Código:
❓ Pergunta típica:
Qual será o resultado da execução dos testes, via npm test?
✅ Alternativa Correta:
"O teste será executado com sucesso, pois o resultado da soma será maior que o valor de teste
utilizado."
function somar(a, b) {
 return a + b;
}
test('Teste com a Soma', () => {
 const result = somar(10, 5);
 expect(result).toBeGreaterThan(1);
});
javascript
📝 Gabarito Comentado:
Cálculo:  10 + 5 = 15
Comparação:  15 > 1  ✅ verdadeiro
Operadores do Jest:
🎭 CÓDIGO 11 - JEST COM MOCK
📝 Trecho de Código:
❓ Pergunta típica:
expect(valor).toBe(15); // igualdade estrita
expect(valor).toEqual(15); // igualdade de objetos
expect(valor).toBeGreaterThan(1); // maior que
expect(valor).toBeLessThan(20); // menor que
expect(valor).toHaveProperty('x'); // tem propriedade
expect(() => funcao()).toThrow(); // lança exceção
import axios from 'axios';
jest.mock('axios');
test('Retornando os usuarios...', () => {
 const usuario = new Usuario('bob', 'Bob Sauro');
 const resp = {data: [usuario]};
 
 axios.get.mockImplementation((url) => {
 return Promise.resolve(resp);
 });
 
 return Usuario.all().then(data => 
 expect(data).toEqual([usuario])
 );
});
javascript
javascript
Qual instrumento de programação poderia ser utilizado para viabilizar testes de conexão com
servidor antes da implementação?
✅ Alternativa Correta:
"Componente mock"
📝 Gabarito Comentado:
O que são mocks?
Objetos simulados que substituem comportamentos reais
Permitem testar sem dependências externas (servidores, APIs)
Controlam as respostas para cenários específicos
Neste código:
jest.mock('axios')  - substitui axios por versão mock
mockImplementation  - define comportamento personalizado
Promise.resolve  - simula resposta assíncrona de sucesso
🧭 CÓDIGO 12 - NAVEGAÇÃO STACK
📝 Trecho de Código:
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function App() {
 return (
 
 
 
 
 
 
javascript
❓ Pergunta típica:
Sobre os modelos de navegação e sua utilização em conjunto, aponte a alternativa verdadeira.
✅ Alternativa Correta:
"É possível utilizar um ou mais modelos de navegação em conjunto em um aplicativo mobile. Para
isso, os containers de cada modelo de navegação deverão ser inseridos, no atributo 'component',
na definição dos itens (screens) de outro modelo."
📝 Gabarito Comentado:
Stack Navigator:
Empilha telas (navegação com botão "voltar")
Stack.Navigator  - container da pilha
Stack.Screen  - cada tela da pilha
name  - identificador da rota
component  - componente da tela
🧭 CÓDIGO 13 - NAVEGAÇÃO TAB
📝 Trecho de Código:
 );
}
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function App() {
 return (
 
 
 
 
javascript
❓ Pergunta típica:
Qual a diferença entre Tab Navigator e Stack Navigator?
📝 Gabarito Comentado:
Tab Navigator:
Abas na parte inferior (ou superior) da tela
Todas as telas ficam visíveis através das abas
Não há empilhamento (navegação direta)
Ideal para seções principais do app
Stack vs Tab:
🧭 CÓDIGO 14 - NAVEGAÇÃO DRAWER
📝 Trecho de Código:
 
 
 );
}
Característica Stack Tab
Navegação Empilhamento Abas
Voltar Automático (botão) Troca de aba
Histórico Sim Não
Uso típico Fluxos lineares Seções principais
import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
javascript
❓ Pergunta típica:
Qual a função do componente Store na arquitetura Flux?
📝 Gabarito Comentado:
Drawer Navigator:
Menu lateral oculto (acessado por arrasto ou ícone ☰)
Ideal para apps com muitas opções de navegação
Economiza espaço na tela principal
Combinação de navegadores:
📋 CÓDIGO 15 - FLATLIST (LISTAS OTIMIZADAS)
📝 Trecho de Código:
function App() {
 return (
 
 
 
 
 
 
 );
}
// Drawer contém Tab Navigator
 
 }
 keyExtractor={item => item.codigo.toString()}
/>
const DADOS = [
 {
 titulo: 'Eletrônicos',
 data: ['TV', 'Caixa de Som']
javascript
❓ Pergunta típica:
Considerando as propriedades do SectionList, assinale a alternativa que define a estrutura dos dados
e o agrupamento dositens em seções.
✅ Alternativa Correta:
sections
📝 Gabarito Comentado:
Propriedade  sections :
Recebe array de objetos com formato específico
Cada objeto deve ter:
title  (ou campo definido) - cabeçalho da seção
data  - array de itens da seção
Outras propriedades:
renderSectionHeader  - renderiza cabeçalho da seção
renderItem  - renderiza cada item
keyExtractor  - extrai chave dos itens
✨ CÓDIGO 17 - ANIMATED API
 },
 {
 titulo: 'Vestuário',
 data: ['Camisas', 'Calças']
 }
];
 {item}}
 renderSectionHeader={({section}) => 
 {section.titulo}
 }
/>
📝 Trecho de Código:
❓ Pergunta típica:
Falando da LayoutAnimation API, é correto afirmar que:
✅ Alternativa Correta:
"Essa API é voltada para a animação do layout do aplicativo, permitindo, por exemplo, que efeitos
sejam exibidos quando o aplicativo está sendo carregado/renderizado."
📝 Gabarito Comentado:
Animated API vs LayoutAnimation API:
import { Animated } from 'react-native';
const fadeAnim = useRef(new Animated.Value(0)).current;
useEffect(() => {
 Animated.timing(fadeAnim, {
 toValue: 1,
 duration: 1000,
 }).start();
}, []);
return (
 
 Fade In
 
);
Característica Animated API LayoutAnimation API
Controle Granular (timing, spring) Automático
Complexidade Alta (configura manual) Baixa (simples)
Uso típico Movimentos específicos Mudanças de layout
Componentes View, Text, Image animados Qualquer componente
javascript
Neste código:
Animated.Value(0)  - valor inicial (0 = invisível)
toValue: 1  - valor final (1 = totalmente visível)
duration: 1000  - 1 segundo de animação
opacity: fadeAnim  - propriedade animada
✨ CÓDIGO 18 - LAYOUTANIMATION
📝 Trecho de Código:
❓ Pergunta típica:
Sobre a LayoutAnimation API, é correto afirmar que:
📝 Gabarito Comentado:
LayoutAnimation API:
Anima automaticamente mudanças de layout
Não precisa especificar valores inicial/final
Suporta:  spring ,  linear ,  easeInEaseOut
Configuração adicional no Android:
Quando usar:
import { LayoutAnimation } from 'react-native';
const onPress = () => {
 LayoutAnimation.spring();
 setState({ w: state.w - 5, h: state.h - 5 });
};
UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental(true);
javascript
javascript
Expansão/recolhimento de elementos
Mudanças de tamanho
Inserção/remoção de itens
🔐 CÓDIGO 19 - CRYPTOJS (AES)
📝 Trecho de Código:
❓ Pergunta típica:
Como podemos utilizar o algoritmo AES no desenvolvimento com React Native usando CryptoJS?
✅ Alternativa Correta:
"Devemos invocar o método encrypt, fornecendo o valor original, chave AES e IV, ou o método
decrypt, com o valor criptografado, chave e IV, sempre por meio do módulo AES."
📝 Gabarito Comentado:
Elementos importantes:
IV (Initialization Vector) - vetor de inicialização aleatório
Key - chave secreta (mesma para encrypt/decrypt)
WordArray.random() - gera bytes aleatórios
Tipos de criptografia:
Simétrica (AES) - mesma chave para cifrar/decifrar
import CryptoJS from 'react-native-crypto-js';
const iv = CryptoJS.lib.WordArray.random(16);
const key = CryptoJS.lib.WordArray.random(16);
const textoCripto = CryptoJS.AES.encrypt(texto, key, {iv: iv});
const base64 = textoCripto.toString();
const bytes = CryptoJS.AES.decrypt(base64, key, {iv: iv});
const textoOriginal = bytes.toString(CryptoJS.enc.Utf8);
javascript
Assimétrica (RSA) - chaves pública/privada
Hash (MD5, SHA) - irreversível (não decifra)
🔐 CÓDIGO 20 - EXPO CRYPTO (HASH)
📝 Trecho de Código:
❓ Pergunta típica:
No ambiente do Expo, qual seria o comando necessário para a geração de um hash de forma
assíncrona?
✅ Alternativa Correta:
digestStringAsync
📝 Gabarito Comentado:
Parâmetros do  digestStringAsync :
1. Algoritmo - SHA512, SHA256, MD5, etc.
2. Texto original - string a ser hasheada
3. Opções - encoding (BASE64, HEX, UTF8)
Características do Hash:
Irreversível - não é possível recuperar o original
Usado para senhas (comparar hashes, não senhas)
Mesmo texto sempre produz o mesmo hash
Pequenas mudanças no texto mudam completamente o hash
import * as Crypto from 'expo-crypto';
const senhaHash = await Crypto.digestStringAsync(
 Crypto.CryptoDigestAlgorithm.SHA512,
 'minhaSenha123',
 { encoding: Crypto.CryptoEncoding.BASE64 }
);
javascript
📊 QUADRO RESUMO DOS PRINCIPAIS CONCEITOS
Tema Palavras-chave O que cai na prova
AsyncStorage setItem ,  getItem ,  JSON.stringify Serialização, assincronismo
SQLite transaction ,  executeSql ,  ? Parâmetros, callbacks
Realm
write() ,  create , 
objectForPrimaryKey
Transações, objetos
MongoDB $gt ,  $lt ,  $in ,  $all Operadores de consulta
Fetch fetch() ,  .then() ,  .json() Promises, encadeamento
Axios response.data , instâncias Resposta automática
Jest expect() ,  .toBe() , mocks Operadores de teste
Navegação Stack.Navigator ,  Tab.Navigator Aninhamento de navegadores
FlatList data ,  renderItem ,  keyExtractor Chave única
Criptografia AES (simétrica), IV, hash Tipos de criptografia