Desenvolvimento para Dispositivos Móveis
FUNDAMENTOS, AMBIENTE E CONTROLE DE VERSÃO
AFINAL O QUE É?
É a construção de software destinado principalmente a equipamentos portáteis, como smartphones e tablets.
CARACTERÍSTICAS / RESTRIÇÕES
Um smartphone moderno combina várias funções que anteriormente exigiam equipamentos independentes.
Isso ilustra uma característica fundamental do desenvolvimento mobile onde o hardware do aparelho pode fazer parte da funcionalidade do software.
TIPO DE APLICAÇÕES MÓVEIS
APLICAÇÕES NATIVAS
Uma aplicação nativa é desenvolvida especificamente para determinada plataforma utilizando suas ferramentas e APIs.
Vantagens
O desenvolvedor trabalha diretamente com as tecnologias da plataforma, tendo excelente integração com recursos específicos do dispositivo.
Desvantagem
Para produzir duas aplicações totalmente nativas podemos terminar mantendo duas bases tecnológicas diferentes.
ECOSSISTEMA ANDROID
Android não significa apenas "o sistema operacional do celular". Existe um ecossistema envolvendo sistema operacional, SDKs, ferramentas, linguagens, bibliotecas, fabricantes e distribuição de aplicativos.
No desenvolvimento Android moderno, a linguagem recomendada pelo Google é Kotlin. O Google mantém uma abordagem denominada Kotlin-first, embora Java continue sendo suportado.
O Android Studio é o ambiente oficial de desenvolvimento Android e integra editor, SDK, ferramentas de compilação, depuração e gerenciamento de dispositivos virtuais.
ECOSSISTEMA IOS
O iOS é o sistema operacional utilizado nos iPhones.
Swift é a linguagem promovida pela Apple para desenvolvimento em suas plataformas, enquanto SwiftUI é seu framework declarativo moderno para construção de interfaces.
O ambiente oficial é o Xcode, que oferece recursos para desenvolvimento, compilação, testes, depuração e simuladores das plataformas Apple.
O desenvolvimento local com Xcode e o simulador oficial do iOS depende de um Mac com uma versão compatível do macOS.
ANDROID vs IOS
APLICAÇÕES WEB MÓVEIS
Uma aplicação web móvel é essencialmente uma aplicação web projetada para funcionar adequadamente em navegadores de dispositivos móveis.
Não existe necessariamente uma instalação tradicional pela loja.
Uso de tecnologias como HTML, CSS, Javascript e Navegador com responsividade.
APLICAÇÕES WEBVIEW
É uma aplicação híbrida tradicional que usa HTML, CSS e Javascript mas executa esse conteúdo dentro de um container nativo que contém uma WebView.
O Apache Cordova é um exemplo clássico.
A documentação do próprio Cordova descreve sua aplicação como baseada normalmente em uma WebView integrada à plataforma e disponibiliza APIs/plugins para acessar recursos nativos.
PROGRESSIVE WEB APPS
Uma Progressive Web App continua sendo baseada em tecnologias web, mas incorpora capacidades que aproximam sua experiência da encontrada em aplicações instaladas.
Uma PWA pode, conforme plataforma, navegador e implementação:
APLICAÇÕES MULTIPLATAFORMA
O objetivo das soluções multiplataforma é compartilhar uma parcela significativa da base de código entre diferentes plataformas.
Flutter oficialmente se apresenta como uma solução multiplataforma que permite construir aplicações compiladas para diferentes plataformas a partir de uma base compartilhada.
React Native também é utilizado para construção de aplicativos para diferentes plataformas utilizando JavaScript/TypeScript e React, com integração com componentes e APIs nativas.
O QUE VAMOS UTILIZAR?
React Native possui algumas vantagens didáticas.
Permite ensinar desenvolvimento mobile de forma relativamente acessível, sem limitar a disciplina a um único sistema operacional.
O React Native permite desenvolver aplicações para Android e iOS utilizando React e JavaScript/TypeScript, trabalhando com componentes que resultam em interfaces nativas.
Permite construção de um aplicativo completo.
REACT NATIVE
import { Text, View } from 'react-native';
export default function App() {
return (
<View>
<Text> Minha primeira aplicação mobile </Text>
</View>
);
}
REACT NATIVE
React Native não é React.
React é uma biblioteca JavaScript para construção de interfaces de usuário, criada originalmente pelo Facebook e hoje mantida pela Meta e pela comunidade.
A ideia central do React é construir a interface usando componentes reutilizáveis para Web.
Por exemplo, em vez de criar uma página inteira de uma vez, você divide a interface em partes como cabeçalho, menu...
Portanto, React Native utiliza React, mas acrescenta os recursos necessários para construir interfaces móveis.
Expo
Expo é um conjunto de ferramentas e serviços construído ao redor do ecossistema React Native.
Sem Expo, um projeto React Native pode exigir contato mais cedo com configurações nativas de Android e iOS.
O Expo disponibiliza APIs e ferramentas relacionadas a câmera, localização, mídia, arquivos, notificações e outros recursos.
Expo Go é um aplicativo que permite executar rapidamente determinados projetos Expo em um smartphone.
ARQUITETURA CLIENTE-SERVIDOR
Um aplicativo instalado no celular não precisa conter todo o sistema.
APLICATIVO CLIENTE
O aplicativo cliente é o software com o qual o usuário interage.
Pode ser responsável por:
API
API — Application Programming Interface é uma interface que estabelece formas pelas quais softwares podem interagir.
API não é o mesmo que backend.
A API é a interface de comunicação enquanto o backend é o conjunto de componentes executados no lado servidor.
BACKEND
O backend processa regras que não devem depender exclusivamente do celular do usuário.
Um backend poderia ser implementado utilizando:
Node.js
Node.js é um ambiente de execução JavaScript gratuito, multiplataforma e de código aberto que permite executar JavaScript fora do navegador, inclusive para servidores, ferramentas de linha de comando e aplicações.
npm
npm é o gerenciador de pacotes padrão do ecossistema Node.js.
Ele permite instalar e gerenciar dependências utilizadas por aplicações JavaScript.
O npm registra as dependências do projeto.
Uma dependência é simplesmente um software do qual nosso projeto depende.
BANCO DE DADOS
O banco mantém informações persistentes do sistema.
Nem todos os dados são adequados para armazenamento diretamente em tabelas relacionais. Fotografias, vídeos, documentos, áudios geralmente são armazenados em um serviço de armazenamento de objetos/arquivos.
No banco armazenamos apenas a referência ao arquivo.
ECOSSISTEMA DE DESENVOLVIMENTO
CONTROLE DE VERSÃO
Controle de versão é um mecanismo utilizado para registrar e organizar alterações realizadas em arquivos ao longo do desenvolvimento.
Imagine:
Git
Git é um sistema de controle de versão distribuído.
Ele permite registrar o histórico de alterações do projeto.
Cada commit representa um estado registrado do projeto.
Git e GitHub
Git
É o sistema de controle de versão.
GitHub
É uma plataforma que hospeda repositórios Git e adiciona funcionalidades para colaboração, revisão, issues, pull requests e outros recursos.
Podemos utilizar Git sem GitHub
INSTALAÇÃO
Acesse o site oficial do Git git-scm.com
Clique em Download for Windows.
Execute o instalador baixado.
Durante a instalação, para uso em aula e com VS Code, você pode manter praticamente todas as opções padrão.
Criei uma material complementar para auxiliar na instalação
INSTALAÇÃO
Quando instalamos o Git no Windows, podemos utilizar diferentes interfaces.
Git Bash
O Git Bash fornece um terminal no qual executamos comandos Git.
Git GUI
O Git GUI fornece uma interface gráfica para algumas operações
Visual Studio Code
O Visual Studio Code também possui integração com Git.
Ele utiliza o Git que está instalado no computador.
Verificando instalação
Após instalar o Git, devemos verificar se ele está funcionando.
Digite:
git –version
Exemplo de resultado:
git version 2.x.x.windows.x
Configuração inicial
Configurar nome
No Git Bash ou terminal do VS Code:
git config --global user.name "Seu Nome"
Configurar e-mail
git config --global user.email email@exemplo.com
Confira
git config --global --list
Quando digitamos –global dizemos ao Git para utilizar essa configuração para todos os projetos desse usuário nesse computador para máquinas compartilhadas faça essa configuração sem o global apenas na pasta do projeto
Criando projeto
Crie uma pasta para seu projeto pelo Git Bash.
Para saber onde está pwd
mkdir meu-projeto
cd meu-projeto
Ou pelo explorador de arquivo.
Em seguida crie um arquivo .readme com informações sobre o peojeto
Inicialize o Git
O comando:
git init
inicializa um repositório Git.
Pode ser feito no terminal, Git Bash, GuI ou Vs Code
Verificar status
git status
Estado dos arquivos�
Untracked
Arquivo ainda não acompanhado.
Staged
Arquivo preparado para o próximo commit.
Committed
Arquivo registrado no histórico do Git.
Adição�
Para adicionar um arquivo específico:
git add README.md
Para adicionar todos os arquivos alterados:
git add .
O ponto representa o diretório atual.
Staging area
Essa etapa é importante porque Git não precisa colocar todas as alterações em um mesmo commit.
Imagine que modificamos:
Podemos decidir que apenas login.js entrará no próximo commit.
Portanto, a área de staging funciona como uma área de preparação.
Commit
Um commit representa um registro do estado do projeto naquele momento.
Cada commit possui informações como:
Evite mensagens pouco informativas, prefira mensagens que indiquem o que foi realizado.
git commit -m "Cria estrutura inicial do projeto“
git log
GitHub
Acesse o GitHub e crie um novo repositório e escolha se será publico ou privado.
git remote add origin URL_DO_REPOSITORIO
git branch -M main
Branch como uma linha de desenvolvimento.
Envio de commits
Enviaremos os commits locais para o GitHub.
git push
Fluxo resumido
Arquivo .gitignore
Nem todos os arquivos de um projeto devem ser enviados para o GitHub.
Para isso existe:
.gitignore
Ele informa ao Git quais arquivos ou diretórios devem ser ignorados.
Em projetos Node.js, React Native e Expo, um exemplo importante é o node_modules
Essa pasta contém dependências instaladas e pode ocupar bastante espaço.
Normalmente ela não deve ser enviada para o GitHub.
Atualizações
Você usa git fetch quando quer buscar as atualizações do repositório remoto sem aplicá-las imediatamente ao seu trabalho local.
O git pull é usado quando o projeto já está no computador e existe uma versão remota no GitHub.
Clone
O git clone é utilizado quando o projeto ainda não existe no computador, mas já existe no GitHub.
git clone https://github.com/usuario/meu-projeto.git
Dentro da pasta local.
Branches
Uma branch é uma linha de desenvolvimento independente dentro de um repositório Git.
Branches permitem desenvolver funcionalidades sem alterar imediatamente a versão principal do projeto.
Cada funcionalidade pode evoluir separadamente.
Depois, quando estiver pronta, ela pode ser integrada à main.
Essa integração é feita com git merge
Branches
Podemos criar uma branch com:
git branch nome-da-branch
Para trocar de branch, podemos utilizar:
git switch nome-da-branch
Merge
Depois que a funcionalidade está pronta, precisamos integrar os commits à branch principal.
A regra fundamental do merge é: O merge é realizado na branch que receberá as alterações.
Depois envie a Branch principal atualizada para o servidor remoto.
A Branch depois de integrada pode ser descartada
git branch -d nome-da-Branch
Se quiser desistir do merge: git merge --abort
Pull Requests e Code Review
Em equipes profissionais, normalmente não queremos que cada desenvolvedor simplesmente faça merge na main.
Entra então o Pull Request, ou PR.
Um Pull Request é uma solicitação para integrar alterações de uma branch em outra.
Pull Request é uma funcionalidade de plataformas de hospedagem e colaboração, como GitHub.
Para saber mais
Documentação oficial do Git
Livro de referência sobre Git - gratuito
https://git-scm.com/book/pt-br/v2
Documentação oficial do GitHUb
Documentação oficial do uso do Git e GitHub no Visual Studio Code
https://code.visualstudio.com/docs/sourcecontrol/overview
Udemy – Git e GitHub pra iniciantes - gratuito
https://www.udemy.com/course/git-e-github-para-iniciantes/
Udemy - Git e GitHub do básico ao avançado (c/ gist e GitHub Pages) - pago