Programação Para Dispositivos

Móveis em Android
No desenvolvimento de aplicativos móveis para Android, há várias abordagens e
tecnologias disponíveis. Umas das mais populares é o React Native, que permite criar
aplicativos móveis usando JavaScript e React. Nesta explicação, vamos abordar os
principais conceitos envolvidos.

Componentes
Eles são a base de desenvolvimento com React Native. Um componente pode ser
entendido como um bloco de construção da interface do usuário. Ele pode ser reutilizável e
encapsular funcionalidades específicas, como um botão, um campo de entrada ou até
mesmo uma tela inteira.

Existem dois tipos principais de componentes:

Componentes de Classe -> Utilizam a sintaxe de classes do JavaScript.
Componentes Funcionais -> Usam funções e são mais modernas e eficientes.

Neste exemplo:
1. View é um contêiner similar à <div> do HTML
2. Text é utilizado para exibir textos na tela
JSX
JavaScript XML(JSX) é uma sintaxe que permite escrever código semelhante ao HTML
dentro do JavaScript. Ele facilita a criação da interface gráfica e melhora a legibilidade do
código.

Exemplo de código JSX :

Ao contrário do HTML, no JSX usamos { } para incluir expressões JavaScript:

Componentes Nativos
São aqueles que já fazem parte do próprio sistema operacional Android ou iOS. O React
Native fornece uma ponte entre o JavaScript e esses componentes para que possamos
usá-los.

Alguns exemplos incluem:

Text -> Exibe texto na tela
View -> Agrupa elementos visuais
Button -> Cria botões interativos
Image -> Exibe imagens
ScrollView -> Permite rolagem de conteúdo

Exemplo de botão nativo:

O onPress define o que acontece quando o botão é pressionado.

Desenvolvimento híbrido para Android e iOS
O desenvolvimento para Android com React Native permite criar aplicativos utilizando
componentes reutilizáveis, JSX para facilitar a codificação e componentes nativos para
interagir com funcionalidades do sistema operacional. Essa abordagem torna o
desenvolvimento mais rápido e eficiente.

No desenvolvimento tradicional de aplicativos móveis, normalmente seria necessário

escrever um código separado para cada sistema operacional, por exemplo:

Java/Kotlin para Android

Swift/Objective-C para iOS

Isso tornaria o desenvolvimento mais demorado e caro, pois exigiria duas equipes
diferentes trabalhando separadamente. O React Native resolve esse problema ao permitir
que um único código-fonte em JavaScript seja utilizado para criar aplicativos que funcionam
tanto no Android quanto no iOS.

Núcleo Nativo e Núcleo JavaScript no React Native

O React Native funciona graças à integração entre dois núcleos principais:
1. Núcleo JavaScript: Onde o código do desenvolvedor é escrito usando JavaScript e
React
2. Núcleo Nativo: Responsável por interagir com os componentes nativos do Android
e iOS.
Esses dois núcleos se comunicam através de uma tecnologia chamada Bridge(Ponte),
permitindo que um único código JavaScript controle elementos nativos de cada sistema
operacional.

Núcleo JavaScript
É a parte do React Native onde os desenvolvedores escrevem o código do aplicativo. Ele é
responsável por:
● Criar a interface do usuário(UI) com JSX
● Gerenciar estados e lógica de negócios
● Responder a eventos como toques de usuários e mudanças de tela

O React Native usa o motor JavaScript do próprio dispositivo para rodar esse código. Em
versões mais recentes do React Native, o Hermes é o motor JS padrão para Android,
tornando o desempenho mais eficiente.
Exemplo de código no núcleo JavaScript:

O código acima é executado no núcleo JavaScript e depois convertido para elementos

nativos.
Núcleo Nativo
O núcleo nativo é composto pelos códigos que interagem diretamente com o sistema
operacional do dispositivo. Ele inclui:
● Componentes nativos do Android e iOS(como botões, textos e lista).
● API 's para acessar funcionalidades do dispositivos, como câmera, GPS e Bluetooth.
● Código em Java/Kotlin para Android e Swift/Objective-C para iOS.

Se precisar de funcionalidades específicas de cada sistema operacional, é possível

escrever módulos nativos personalizados e conectá-los ao javaScript.

O código anterior cria um módulo nativo para Android, permitindo exibir um alerta
diretamente no sistema operacional.

Comunicação entre os Núcleos

Os dois núcleos não interagem diretamente. Em vez disso, eles se comunicam através da
Bridge(Ponte) do React Native.

Como funciona essa ponte?

1. O código JavaScript executa uma ação(exemplo: pressionar um botão)
2. A Bridge converte essa ação e a envia para o Núcleo Nativo
3. O Núcleo Nativo processa a ação e responde ao JavaScript

A desvantagem da Bridge é que ela pode causar lentidão ao passar muitas mensagens
entre os núcleos.

Novas versões do React Native estão substituindo a Bridge por tecnologias mais rápidas
como:
TurboModules: Melhora a comunicação entre JS e módulos nativos.
Fabric: Substitui a renderização antiga para otimizar a interface.
Componentes Fundamentais do React Native

<View> – Contêiner para Agrupar Elementos

É um dos componentes mais importantes, pois funciona como <div> no HTML, sendo usado
para organizar e estruturar outros componentes.

Principais características:
1. Agrupa outros componentes para organizar o layout
2. Permite aplicar estilos como cor de fundo, espaçamento e bordas
3. Pode ser usado para criar seções ou blocos de interface

<Text> – Exibe Texto na Tela

Usado para exibir qualquer tipo de texto no React Native.

Principais características:
1. Permite exibir textos estáticos e dinâmicos.
2. Suporta personalização de fonte, cor, tamanho e alinhamento.
3. Aceita aninhamento(pode conter outros elementos <Text> dentro dele).
<Image> – Exibe Imagens
O Image é usado para exibir imagens no aplicativo, seja a partir de um arquivo local ou da
internet.

Principais características:
1. Suporta imagens locais e remotas(URL)
2. Permite definir a altura, largura e estilos.
3. Oferece otimizações como cache para carregar imagens rapidamente.

<TextInput> – Campo de Entrada de Texto

O TextInput é um campo onde o usuário pode digitar informações. Ele é usado para
formulários, login, pesquisa, entre outros.

Principais características:
1. Permite inserir texto interativamente
2. Suporta estilos personalizados
3. Pode ser configurado como senha, teclado numérico, validação e muito mais.
<ScrollView> – Rola Conteúdo na Tela
O ScrollView é um contêiner que permite rolagem vertical ou horizontal. Ele é útil quando há
muito conteúdo que não cabe na tela.

Principais características:
1. Permite rolar o conteúdo quando ultrapassa o tamanho da tela.
2. Pode ser usado para criar listas longas.
3. Suporta scroll vertical e horizontal
Esquematizar a depuração de aplicativos

Depuração
A depuração(debugging) é o processo de encontrar e corrigir erros no código de um
aplicativo. No React Native, podemos depurar erros que surgem durante a execução e
também fazer verificações proativas usando ferramentas especializadas.

Quando depurar(Debuggar)?
Vamos apresentar cenários onde é necessária a depuração de código:

Runtime Errors - Erros gerados na execução do aplicativo

Esses erros ocorrem enquanto o aplicativo está rodando, por exemplo:
1. Acesso a uma variável indefinida(undefined is not an object)
2. Tentativa de usar um componente de forma errada
3. Falha ao buscar dados de uma API

Depuração proativa pelo programador

O programador pode debugar o código antes que erros aconteçam, utilizando:
1. Breakpoints
2. Logs
3. Ferramentas de depuração como:
a. React Developer Tools

Exemplo de breakpoint:

Aqui estamos debugando da linha 19 em diante.

Debugando um Software
Durante a depuração, verificamos diferentes aspectos do código, como:

Estado de Objetos
Podemos inspecionar o estado dos objetos e componentes em tempo real. No React Native,
usamos o React Developer Tools para verificar estados e props de componentes.

Podemos verificar o estado contador usando React Developer Tools ou

console.log(contador).

Valores de variáveis e propriedades

Ao depurar, podemos verificar o valor atual das variáveis e propriedades dos componentes.

O console exibirá { nome: "Ana", idade: 30 }, ajudando a verificar se os valores estão

corretos.
Validação de Instruções Condicionais e Laços de Repetição
Ao trabalhar com if, for, map, etc., podemos verificar se as condições estão funcionando
corretamente.

É possível depurar blocos de codinho aninhados como if/else.

Uso de Breakpoints
Os breakpoints permitem pausar a execução do código em um determinado ponto para
inspecionar valores de variáveis, estados e execuções.

Como usar Breakpoints no React Native?

1. Abra o React Native Debugger (ou inspecione pelo Chrome).
2. Vá até a aba "Sources" no DevTools.
3. Clique no número da linha onde deseja pausar a execução.
4. Rode o aplicativo e veja a execução ser pausada.

Quando o código alcançar debugger, a execução parará para inspeção.

React Developer Tools
1. Inspeciona estados e propriedades dos componentes.
2. Pode ser usado junto com React Native Debugger

Após a instalação do pacote NPM, basta rodar react-devtools no terminal.

React Native Debugger

1. Ferramenta avançada de depuração
2. Suporta Redux e logs detalhados.
3. Permite inspecionar elementos da interface

Em resumo, separado por conceito e explicação:

1. Erros de Execução -> Ocorrem enquanto o app está rodando(ex: undefined is not an
object)
2. Depuração proativa -> O programador verifica variáveis, estados e fluxo de
execução antes dos erros ocorrerem.
3. Breakpoints -> Pausam a execução do código para análise detalhada.
4. Console Log -> Imprime valores no terminal para depuração rápida.
5. React Developers Tools -> Inspeciona estados e props dos componentes.
6. React Native Debugger -> Depuração avançada, suporte a Redux e inspecionar
interface.
7. Chrome Devtools -> Adiciona breakpoints e analisa rede e execução de código.
Interface Gráfica Com React Native
Requisitos ou funcionalidades
Antes de esquematizar a interface e a interatividade do nosso aplicativo, devemos ter em
mãos as suas funcionalidades, ou seja, precisamos conhecer tudo o que o aplicativo deverá
fazer e tudo o que poderá ser feito por meio dele.

As funcionalidades podem ser SIMPLES ou ELABORADAS.

Por exemplo, veja abaixo a descrição das funcionalidades de um APP, que por sua vez,
pode nos ajudar a entender o funcionamento.

1. Logar com as credenciais (usuário e senha) previamente fornecidas pela instituição

bancária.
2. Após o login, o usuário deverá visualizar, de imediato, um resumo de seu saldo e os
últimos lançamentos realizados em sua conta.
3. Na primeira tela após o login, deverá ser possível exibir banners publicitários
rotativos para o usuário.
4. As demais ações ou opções disponíveis, após o usuário se logar, são:
● Consulta de extrato detalhado.
● Pagamento de contas.
● Transferência bancária.
● Consulta de fatura e lançamentos de cartão de crédito.
● Consulta de investimento financeiro.

Já no fluxo alternativo, que acontece quando o usuário não se loga, tem de ser possível:
1. Exibir os canais de contato.
2. Exibir banners rotativos de publicidade.
Tendo em mente a lista de funcionalidades, vamos organizar nosso pensamento da
seguinte forma:
Nº Tela Elementos visuais Elementos de
interação

1 Inicial/Login Logomarca da Input de dados;

instituição; banner botão de ação.
publicitário
rotativo; canais de
comunicação.

2 Home (após login) Logomarca da Botão de ação;

instituição; textos; menu de
títulos ( label ); navegação.
banner publicitário
rotativo.

3 Consulta de Logomarca; textos; Botão de ação;

extrato títulos ( label ) menu de
navegação

4 Pagamento de Logomarca; texto; Botão de ação;

contas títulos ( label ) menu de
navegação; input
de dados; acesso
à câmera do
dispositivo móvel.

5 Transferência Logomarca; texto; Botão de ação;

bancária títulos ( label ); menu de
listagem de texto. navegação; input
de dados; seleção
de dados.

6 Consulta de fatura Logomarca; texto; Botão de ação;

de lançamentos de títulos ( label ); menu de
cartão de crédito listagem de texto. navegação; input
de dados; seleção
de dados.

7 Consulta de Logomarca; texto; Botão de ação;

investimento títulos( label ); menu de
financeiro listagem de texto. navegação; input
de dados; seleção
de dados.
Definição dos componentes

Escolha dos componentes

Vamos seguir na confecção de protótipos
Definição do objetivo do protótipo
a. Qual problema o app resolverá?
b. Quem são os usuários-alvo?
c. Qual o fluxo principal de navegação?
Exemplo: Se estamos criando um aplicativo de delivery, precisamos mapear telas como
login, escolha de produtos, carrinho e pagamento.

Pesquisa e Referências
Antes de projetarmos a interface, analisaremos:
a. Aplicativos concorrentes
b. Padrões de design(Google Material Design, Human Interface Guidelines)
c. Experiência do usuário(UX) e boas práticas

Ferramentas para inspiração:

● Dribbble -> Modelos de UI modernos
● Cursor -> Gera interfaces
● Behance -> Protótipos e estudos de caso
● Google Material Design -> Diretrizes para Android.

Criação de Wireframes (Esboço da Interface)

Os wireframes são esboços simples das telas do aplicativo. Eles ajudam a organizar os
elementos da interface antes de trabalhar nos detalhes visuais.

Ferramentas para wireframes:

● Figma -> Mais utilizado para design e prototipagem
● Adobe XD -> Alternativa profissional para criação de interfaces
● Sketch -> Usado por designers de UI/UX no macOS

Exemplo de Wireframe uma tela de login pode ter:

1. Um campo para email.
2. Um campo para senha.
3. Um botão de login.
4. Um link para recuperação de senha.
Design da Interface (UI Design)
Agora, transformamos os wireframes em um design visual completo, aplicando:

● Cores e tipografia -> Escolha uma paleta harmoniosa

● Botões e ícones -> Design intuitivo e acessível
● Espaçamento e alinhamento -> Organização visual limpa

Ferramentas para design de UI:

● Figma → Criar telas interativas e compartilháveis.
● Adobe XD → Suporte para design responsivo e prototipagem.
● Canva → Para designs básicos e não tão técnicos.

Testes e validação do Protótipo

Após criar o protótipo, é importante testá-lo com usuários reais ou membros da equipe para
obter feedback.

● Testes de usabilidade -> Descobrir dificuldades na navegação.

● Feedback dos usuários -> Melhorar a experiência com base nas sugestões
● Correções e ajustes -> Refinar interação e elementos da UI

Ferramentas para testes:

● Maze -> Testes de usabilidade automatizados
● UserTesting -> Permite usuários reais testarem o protótipo
● Google Forms -> Coletar feedback dos usuários

Exportação e Entrega para desenvolvimento

Após validação, o protótipo está pronto para ser compartilhado com os desenvolvedores.

Formas de entrega:
● Compartilhar o link do Figma / Adobe XD / InVision com a equipe.
● Criar um guia de estilo com cores, fontes e componentes.
● Definir as telas responsivas para diferentes tamanhos de tela(celular/tablet)

Ferramentas para documentação do design:

Zeplin -> Exportação de design com medidas para desenvolvedores
Figma(Inspect Mode) -> Permite visualizar código CSS das telas.
Após decidirmos pontos importantes na confecção de protótipos, vamos escolher se iremos
utilizar componentes nativos ou de terceiros:

ScrollView
Insere um scroll próprio para o conteúdo nele inserido. Ele deve ser utilizado quando houver
muito texto a ser exibido na tela. Considerando as limitações de tamanho em um dispositivo
móvel, a utilização desse componente melhora a experiência do usuário, permitindo a
organização das informações mais importantes que queremos exibir em uma única tela.

SafeAreaView
Em termos de experiência do usuário, o SafeAreaView, disponível apenas para a plataforma
iOS, gera uma área segura no aplicativo e garante que o conteúdo por ele contido não seja
afetado pelas características e dimensões do dispositivo e nem por outros elementos da
própria aplicação, como barras de navegação, entre outros exemplos.

KeyboardAvoidingView
Ele resolve problemas comuns existentes entre os componentes visuais e o teclado virtual,
ajustando automaticamente a altura e a posição de acordo com a altura do teclado.

O que é um MODAL?
Um MODAL é uma janela ou caixa de diálogo que aparece sobre a tela principal do
aplicativo, geralmente para exibir informações importantes ou interagir com o usuário sem
sair da tela atual. Ele bloqueia a interação com o restante da interface até que seja fechado.

Eles são recursos essenciais para melhorar a interação do usuário em aplicativos móveis,
permitindo exibir mensagens, coletar informações ou solicitar confirmações sem sair da tela
atual.

Botões interativos

Button
O componente Button é um botão simples e estilizado pelo sistema operacional.

TouchableHighlight
Cria um botão que escurece ao ser pressionado, criando um efeito visual.

TouchableOpacity
Reduz a opacidade do botão ao ser pressionado, dando um efeito de transparência.

TouchableWithouFeedback
É usado para detectar toque sem um efeito visual. Ele é útil para fechar teclados ao tocar
fora de um campo de entrada.
O React Native fornece três componentes principais para renderizar listas de forma
eficiente:
● FlatList -> Para listas simples e performáticas.
● SectionList -> Para listas com seções organizadas por categorias.
● VirtualizedList -> Para listas muito grandes com otimização avançada.

Vamos entender cada um deles.

FlatList(Lista simples e eficiente)

É o componente mais usado para renderizar listas no React Native, pois otimiza a exibição
de itens, carregando apenas os elementos visíveis na tela.

Características:
1. Melhora a performance carregando apenas os itens visíveis.
2. Melhor alternativa para listas longas.
3. Suporta rolagem infinita e atualização dinâmica.

Principais propriedades do FlatList

Propriedade Descrição

data Array com dados da lista

renderItem Função que define como cada item será

exibido

keyExtractor Define a chave única de cada item

onEndReached Chamado quando o usuário chega ao final

da lista(scroll infinito)
SectionList(Lista com seções)
É utilizado quando precisamos agrupar itens por categorias/seções. Exemplo: Lista de
contatos organizados por letra do nome.

Características:
1. Organiza os itens por categorias/seções
2. Adiciona cabeçalhos para cada seção
3. Ideal para listas estruturadas, como catálogos ou lista de contatos

Propriedade Descrição

sections Array contendo as seções e seus dados

renderItem Como cada item será exibido

renderSectionHeader Define o cabeçalho da seção

keyExtractor Define a chave única de cada item

VirtualizedList(Para listas muito grandes)

É usado quando temos milhares de itens e precisamos de mais controle sobre a
renderização, sendo mais eficiente que FlatList em casos extremos.

Características:
● Carrega apenas os itens visíveis na tela
● Útil para listas muito grandes(milhares de itens)
● Mais flexível, mas requer mais configurações

Propriedade Descrição

data Dados da lista

initialNumToRender Define quantos itens serão renderizados

inicialmente

getItem Função que retorna um item pelo índice

getItemCount Função que retorna a quantidade total de

itens
Modelos de navegação

Stack Navigation
É um dos principais modelos de navegação no React Native, fornecido pela biblioteca
React Navigation. Ele organiza as telas do aplicativo em uma pilha(stack), onde cada nova
tela é empilhada sobre a anterior.

Fluxo das telas

1. Cada tela empilhada fica sobre a anterior
2. O usuário pode voltar para a tela anterior automaticamente
3. Ideal para fluxos lineares como: login -> dashboard -> detalhes
4. Usa animações de transição ao mudar de tela(padrão do Android/iOS)

Principais métodos de navegação

Método Descrição

navigation.navigate(“Tela”) Vai para uma nova tela na pilha

navigation.push(“Tela”) Abre uma nova instância da tela, mesmo se

já estiver aberta

navigation.goBack() Retorna para a tela anterior

navigation.popToTop() Volta para a primeira tela da pilha

Drawer Navigation
Também conhecido como navegação lateral, é um modelo de navegação no React Native
que usa um menu deslizante na lateral da tela. Esse menu permite que o usuário navegue
entre diferentes telas do aplicativo de forma prática.

Onde é usado?
1. Em aplicativos grandes, como WhatsApp e Gmail, onde há várias seções.
2. Aparece ao deslizar do lado esquerdo ou ao tocar no ícone de menu(hamburger ☰)
3. Ideal para navegação global entre páginas principais do app
Algumas propriedades do Drawer.Navigator
Propriedade Descrição

initialRouteName Define qual tela será aberta primeiro

screenOptions Configurações globais do menu

drawerStyle Estiliza o menu lateral

drawerLabelStyle Modifica o estilo do texto do menu

drawerIcon Adiciona ícones aos itens do menu

Em resumo, Drawer Navigation é muito útil para apps grandes, onde o usuário precisa
navegar entre diferentes seções do app sem precisar apertar botões de “voltar”. Ele melhora
a usabilidade, permitindo que as opções fiquem sempre acessíveis de forma rápida.

Estilização em Aplicativos React Native

A estilização no React Native é inspirada no CSS do React para Web, porém possui
algumas diferenças. O React Native usa o JavaScript para definir estilos, permitindo maior
flexibilidade e controle.

Como funciona o CSS no React Native?

1. No React Native, não usamos arquivos .css tradicionais.
2. Os estilos são definidos usando JavaScript Objects dentro do próprio componente.
3. Propriedade CSS são semelhantes, mas escritas em camelCase(ex: background-
color vira backgroundColor)
4. Existe um sistema interno chamado StyleSheet para otimizar a renderização dos
estilos.

Como funciona a propriedade style?

Em React Native, podemos aplicar estilos diretamente nos componentes usando a
propriedade style, por exemplo:
Styled Components
É uma biblioteca que permite escrever estilos diretamente dentro dos componentes, usando
uma sintaxe parecida com CSS tradicional.

Vantagens do Styled Components

1. Sintaxe mais parecida com CSS tradicional
2. Permite uso de props para estilização dinâmica
3. Melhor organização do código

LayoutAnimation API
É um recurso voltado para animação do layout do aplicativo ao longo do seu ciclo de
renderização(inicialização e atualização). É bastante útil nas situações em que um
conteúdo inicialmente escondido, ao ser exibido, afeta o dimensionamento de seus
elementos anteriores ou posteriores.

Animated API
Se baseia em relações declarativas entre entradas e saídas, fazendo uso de
transformações configuráveis por meio de métodos, como iniciar e parar, por meio dos
quais podemos controlar a sua execução. Podemos animar os seguintes componentes
React :
● View
● Text
● Image
● ScrollView
● FlatList
● SectionList
Persistência de dados com React Native
Vamos entender dois conceitos muito importantes, que são a serialização e a
persistência.

Serialização
Definição: É um modo de expressar os dados de forma contígua, podendo ser uma
sequência de bytes ou algum padrão de texto conhecido, como XML ou JSON.
Conceito: Permitir a transmissão em rede ou a armazenagem em disco dos dados
serializados.

A serialização é o processo de transformar um objeto ou estrutura de dados em uma

sequência de bytes ou uma string que pode ser facilmente armazenada ou transmitida. Este
processo torna os dados compatíveis com outros sistemas, dispositivos ou formatos,
permitindo que possam ser salvos ou enviados de uma aplicação para outra.

Persistência
Definição: Uma estrutura dotada de persistência ou persistente é aquela capaz de guardar
seu estado corrente, normalmente em meio não volátil, como as unidades de disco.
Objetivo: Recuperar posteriormente o seu estado corrente.

A persistência é importante pois, muitas vezes, precisamos salvar o estado de um

aplicativo, preferências de usuários ou dados temporários. A persistência permite que esses
dados sejam recuperados quando o usuário reabrir o aplicativo ou retornar a uma tela. Ela
também permite que o usuário não precise digitar ou inserir informações repetidamente,
aumentando a eficiência do aplicativo.

Web Services
Na comunicação B2B(Business to Business), temos o uso de XML, que apresenta maior
formalismo, através dos Web Services do tipo SOAP(Simple Object Access Protocol),
enquanto o uso de REST(Representational State Transfer), que apoia as operações de
consulta e cadastro nos métodos do HTTP, define um segundo tipo de Web Service, com
nome RESTful, o qual adota uma grande variedade de formatos para os dados, sendo
definido JSON como o padrão(voltado para o B2C).

A criação de um Web Service pode ser feita em qualquer linguagem, mas toda a
comunicação é efetuada com XML ou JSON, que é amplamente utilizado no mercado, que
permitem representar qualquer tipo de informação em modo texto, com neutralidade da
linguagem, por esse motivo são classificados como formatos interoperáveis.
SOAP(Simple Object Access Protocol)
É um protocolo mais rigoroso para a troca de informações estruturadas em uma rede. Ele
define um conjunto de regras sobre como os dados devem ser enviados e recebidos e é
baseado em XML

Suas características são:

● Utiliza XML para a troca de mensagens
● Tem uma estrutura padronizada e robusta(tags de marcação)
● Pode ser usado em protocolos diferentes, como HTTP, SMTP, FTP, SFTP, etc.
● Rígido quanto à estrutura e regras
● É mais seguro(suporta WS-Security) e pode ser usado em transações complexas.

Exemplo de SOAP

REST(Representational State Transfer)

É um estilo arquitetural mais flexível e simples de Web Services, muito usado na construção
de API 's modernas. Ele não é um protocolo em si, mas sim um conjunto de princípios sobre
como os sistemas devem interagir. REST utiliza os métodos HTTP(GET, POST, PUT,
DELETE) para operar sobre recursos representados por URLs.

Suas características são:

● Usa HTTP como protocolo de comunicação
● Os dados são tipicamente transmitidos em JSON ou XML, sendo JSON o mais
comum.
● Leve e fácil de integrar
● Escalável, permitindo que diferentes tipos de dados sejam manipulados com
simplicidade
● Stateless: Cada requisição é independente e não depende de outras requisições
anteriores.
Exemplo de Requisição RESTful (GET em JSON):

GET https://api.weather.com/v1/city/NewYork

A resposta poderia ser algo como:

AsyncStorage
Ele permite guardar e recuperar pares do tipo chave-valor, ou seja, um identificador e um
dado associado, da mesma forma que uma chave primária identificando um registro em
uma tabela. Para utilizar objetos como valores, eles devem estar serializados no formato
JSON, com a utilização dos métodos descritos anteriormente.

Método Parâmetro Callback Funcionalidade

getItem Chave (error, result) => void Obtém um item da

coleção a partir da
chave fornecida

setItem Chave Valor (error) => void Armazena um novo

item da coleção a
partir da chave

removeItem Chave (error) => void Remove um item a

partir da chave
fornecida

mergeItem Chave Valor (error) => void Atualiza um item da

coleção localizado
pela chave

getAllKeys (Nenhum) (error, keys[ ]) => Obtém todas as

void chaves que estão na
coleção

multiGet Chave [ ] (erros [ ], result [ ]) Obtém múltiplos

=> void itens
Para utilizar os métodos do Async Storage, é necessário adotar elementos da sintaxe
voltados para a sincronização em ambiente assíncrono, como:
● async : Na definição de funções chamadoras.
● await : Na espera pela execução do método.

Realm
É um banco de dados orientado a objetos(OODBMS - Object-Oriented Database
Management System) projetado para aplicativos móveis. Ele oferece uma alternativa mais
rápida e eficiente ao SQLite e AsyncStorage, sendo amplamente utilizado em aplicações
React Native, Android e iOS.

O Realm é:
● Leve e rápido, com melhor desempenho do que SQLite em muitas situações
● Fácil de usar, pois permite armazenar e recuperar dados usando objetos
diretamente
● Multiplataforma, suportando Android, iOS, React Native, Node.js e .NET
● Armazena os dados de forma nativa, sem necessidade de conversão para SQL

OODBMS(Object-Oriented Database Management System)

Esse banco armazena os dados em objetos diretamente, tornando-os mais naturais para
linguagem de programação orientada a objetos como JavaScript, TypeScript e Swift.

Diferença entre Banco Relacional e OODBMS

Característica Banco Relacional(SQL) OODBMS

Modelo de dados Baseado em tabelas e Baseado em objetos

colunas

Linguagem de Consulta SQL Diretamente na linguagem

do código

Relações entre dados Usa chaves estrangeira Usa referência diretas entre
objetos

Conversão de dados Precisa transformar objetos Armazena os dados como

em tabela(ORMs) objetos nativos
Métodos da classe Realm podem ser observados no quadro seguinte:

Método Utilização

open Abre uma conexão com o banco, de

forma equivalente ao construtor da
classe.

close Fecha a conexão com o banco de

dados.

write Define um bloco de escrita no banco.

create Adiciona o objeto a uma coleção do

banco.

delete Remove o objeto de uma coleção do

banco.

objects Retorna a coleção de objetos a partir de

seu nome no banco.

objectForPrimayKey Retorna o objeto de uma coleção do

banco a partir do valor de sua chave
primária.

beginTransaction Inicia uma transação no banco de

dados.

commitTransaction Confirma a transação, efetivando as

modificações efetuadas.

cancelTransaction Cancela a transação, desfazendo todas

as alterações.
NoSQL x Not Only SQL
NoSQL é um tipo de banco de dados projetado para lidar com grandes volumes de dados,
alta escalabilidade e flexibilidade no armazenamento. Ele surgiu como alternativa aos
bancos relacionais tradicionais(SQL), que enfrentavam dificuldades para lidar com as
demandas da era do Big Data e da Web 2.0.

O conceito NoSQL evoluiu para Not Only SQL pois acabou incorporando maior hibridez nos
modelos de armazenamento. Houve então uma mudança de interpretação da sigla original,
que passou a significar Not Only SQL, ou seja, bancos de dados que não utilizam apenas
SQL.

Not Only SQL combina características de bancos relacionais e NoSQL, como PostgreSQL e
MongoDB. A ideia é que, embora bancos NoSQL não dependam de SQL, alguns podem
suportar consultas SQL ou até coexistir com bancos relacionais.

Banco de dados MongoDB

Mongo DB é um banco de dados NoSQL baseado em documentos, o que significa que ele
não usa tabelas e colunas como um banco de relacional. Em vez disso, ele armazena os
dados em documentos JSON/BSON flexíveis, que permitem maior agilidade e
escalabilidade.

MongoDB Banco Relacional

Banco de Dados Banco de Dados

Coleção (Collection) → Conjunto de Tabela → Conjunto de registros

documentos

Documento (Document) → Registro Linha (Row) → Registro na tabela

em JSON

Campo (Field) → Atributo do Coluna (Column) → Atributo da linha

documento

O diferencial do MongoDB, assim como os bancos NoSQL em si, é que cada documento de
uma coleção pode ter campos diferentes, ao contrário de uma tabela relacional onde todas
as linhas seguem o mesmo esquema.
Temos diversos operadores disponíveis na sintaxe de consulta do MongoDB, como
podemos observar no quadro seguinte

Operador Utilização

$gt Retorna quando o campo apresenta

valor maior que o especificado.

$lt Retorna quando o campo apresenta

valor menor que o especificado.

$in Verifica se combina com qualquer dos

valores do vetor.

$nin Verifica se não ocorre combinação com

qualquer dos valores do vetor.

$and Combinação lógica de condições com

uso de and.

$or Combinação lógica de condições com

uso de or.

$exists Retorna os documentos que

apresentam determinado campo.

$all Verifica se todos os valores do vetor

estão presentes.

$size Verifica se o campo, do tipo vetor, tem o

tamanho especificado.

$$regex Seleciona os documentos a partir de

uma expressão regular.

Vamos falar um pouco sobre os métodos HTTP para gerenciar as operações de consulta e
manipulação de dados:

Método HTTP Utilização

GET Consultas, com o retorno de entidades

e coleções no formato JSON.

POST Inserção de entidade, a partir dos dados

no formato JSON.

PUT Edição da entidade, com base na chave

e nos dados em formato JSON.

DELETE Remoção da entidade, com base na

chave primária.
Conexão Remota Com React Native
Componentes para conexão

Fetch API
Fetch API é uma biblioteca disponível nativamente em React Native para o consumo de
recursos externos.

Axios
O Axios é uma biblioteca JavaScript usada para fazer requisições HTTP. Ele funciona tanto
no navegador quanto no Node.js e é muito utilizado para consumir APIs REST.

Persistindo Dados com Autenticação e Controle de Acesso

com OAuth2
A persistência de dados garante que informações, como usuários e permissões, sejam
armazenadas em um banco de dados para acesso futuro. A autenticação verifica a
identidade de um usuário antes de permitir o acesso ao sistema.

O OAuth2 é um padrão de autorização amplamente utilizado para controle de acesso

seguro, permitindo que aplicativos acessem recursos protegidos sem expor credenciais do
usuário.

OAuth2(Open Authorization 2.0)

É um protocolo de autorização que permite que aplicativos acessem recursos em nome de
um usuário, sem precisar armazenar a senha do usuário. Ele é amplamente usado por
plataformas como Google, Facebook, GitHub e muitas outras.
Definição dos papéis no OAuth2
1. Resource Owner(Proprietário do Recurso)
a. O usuário que possui os dados protegidos(exemplo: um usuário do Facebook
que quer permitir que um aplicativo acesse suas fotos)
2. Client(Cliente)
a. O aplicativo que deseja acessar os recursos do usuário(exemplo: um app
que quer publicar tweets em nome do usuário).
3. Resource Server(Servidor de Recurso)
a. O servidor que hospeda os recursos protegidos(exemplo: a API do Google
Drive que armazena arquivos).
4. Authorization Server(Servidor de Autorização)
a. O sistema que autentica o usuário e emite tokens de acesso(exemplo: os
servidores do Google que gera tokens de autorização).
Fluxo básico:
1. O usuário faz login no Servidor de Autorização.
2. O Cliente recebe um Token de Acesso.
3. O Cliente usa esse token para acessar o Servidor de Recursos.

Controle de Acesso com OAuth2

O OAuth2 permite diferentes métodos de autorização, conhecidos como grants. Os mais
comuns são:

Authorization Code(Código de autorização)

É mais seguro, usado em aplicativos Web e móveis onde o cliente recebe um código
temporário que depois troca por um token de acesso, evitando expor tokens diretamente no
navegador.
Fluxo básico:
1. O usuário é redirecionado para o Servidor de Autorização.
2. O usuário faz login e concede permissão.
3. O Cliente recebe um código de autorização.
4. O Cliente troca esse código por um Token de Acesso.

Client Credentials(Credenciais do cliente)

Usado quando não há um usuário específico, apenas comunicação entre servidores. O
cliente(exemplo: um micro serviço) solicita acesso ao Servidor de Recursos diretamente.
Fluxo básico:
1. O cliente se autentica diretamente no servidor de autorização
2. O cliente recebe um token de acesso
Padrão AppAuth RFC6749
A RFC 6749 é o documento oficial que define o OAuth2. O AppAuth é uma biblioteca de
código aberto que implementa OAuth2 e OpenID Connect de forma segura para iOS,
Android e Web.
Vantagens do AppAuth:
1. Suporte para PKCE(Proof Key for Code Exchange), um mecanismo que melhora a
segurança de dispositivos móveis.
2. Facilita a autenticação em aplicativos móveis sem expor tokens na URL
3. Compatível com provedores como Google, Okta, Auth0.

Fluxo usando App Auth em React Native

1. O usuário é redirecionado para a página de login
2. Após o login, um código de autorização é retornado
3. O aplicativo troca esse código por um Token de Acesso
4. O token de acesso é usado para acessar a API protegida

Modelo Offline First

O modelo Offline First é uma abordagem de desenvolvimento onde um aplicativo é
projetado para funcionar mesmo sem conexão com a internet. Quando a conexão estiver
disponível, ele sincroniza os dados automaticamente.

Vantagens:
1. Melhora a experiência do usuário (UX), pois o app sempre funciona.
2. Evita perda de dados quando a internet cai.
3. Permite uso em locais com conexão instável(aviões, áreas rurais, etc.)

Como funciona?
1. Armazenamento Local
a. Os dados são salvos no dispositivo primeiro(banco de dados local, cache,
IndexedDB, SQLite, etc.)
2. Sincronização Inteligente
a. Quando a internet volta, o app sincroniza automaticamente as alterações
com o servidor.
3. Gerenciamento de Conflitos
a. Se houver alterações locais e remotas no mesmo dado, o app decide qual
versão manter(última alteração, merge, etc.)
Tecnologias Usadas

Banco de dados locais

1. IndexedDB(Web)
2. SQLite(Mobile)
3. Room Database(Android)
4. Core Data(iOS)

Sincronização de dados
1. PouchDB + CouchDB(Web e Mobile)
2. Firebase Firestore(sincronização automática)
3. Apollo Client + GraphQL(para cache offline)

Armazenamento em cache
1. Service Workers(Web)
2. Workbox(Web PWA)
3. AsyncStorage(React Native)

Arquitetura MVC com React Native

Os padrões de desenvolvimento(design patterns) são soluções reutilizáveis para problemas
recorrentes no desenvolvimento de software. Eles oferecem um catálogo de boas práticas
para facilitar a criação de sistemas mais organizados, eficientes e fáceis de manter.

Estrutura de um padrão de desenvolvimento

Cada padrão deve conter:
Nome - Identificação do padrão.
Problema - Situação que o padrão resolve.
Solução - Como o problema é solucionado.
Consequências - Impactos da adoção do padrão.

A explicação do padrão geralmente inclui diagramas UML para representar visualmente

sua estrutura e funcionamento.

Principais conjuntos de padrões

O conjunto mais conhecido foi definido pelos autores Erich Gamma, Richard Helm, Ralph
Johnson e John Vlissides, chamados de Gang of Four(GoF). Eles classificaram 23
padrões em três grupos principais:
1. Criacionais - Tratam da criação de objetos.
2. Estruturais - Definem formas de organizar classes e objetos.
3. Comportamentais - Gerenciam a comunicação entre objetos.
Padrões de Projeto

Singleton
Garante que uma classe tenha apenas uma única instância, útil para controladores de
acesso e gerenciadores de conexões com banco de dados. Para implementá-lo, é
necessário:
● Criar uma instância privada da classe.
● Criar um método estático público para retornar a essa instância.
● Definir um construtor privado para impedir múltiplas instâncias.

DAO(Data Access Object)

Centraliza operações de acesso ao banco de dados, evitando a repetição de comandos
SQL no código. Isso facilita a manutenção e melhora o reuso da persistência de dados nos
sistemas.

Facade
Simplifica o uso de subsistemas complexos, funcionando como uma interface única para
agrupar chamadas de componentes, como DAO’s. Esse padrão pode ser combinado com:
1. Flyweight - Para criar pools de objetos e otimizar o uso de memória
2. Proxy - Para acesso remoto eficiente a esses objetos.