Programação Mobile Coding
Prof. Victor Sotero
Aula 01 – Introdução a Programação Mobile
[Link]
• O [Link] não é um framework (só pra deixar claro);
• Ele é um ambiente de execução de código Javascript do lado
do servidor – historicamente essa linguagem foi criada para
ser embutida no html (front-end);
• Através do [Link] é possível tornar o Javascript uma
linguagem dinâmica (antes de formatar o conteúdo para o
usuário);
Prof. Victor Sotero
[Link]
• Possui arquitetura orientada a eventos – realiza operações
I/O assíncronas;
• O padrão orientado a eventos permite uma otimização em
relação a vazão das requisições web – request e response
Prof. Victor Sotero
Composição do [Link]
• Utiliza o motor Javascript V8 da
Google;
• Possui um evento loop e uma API
de I/O de baixo nível (libuv);
• Sua execução é single-thread,
diferente de outras linguagens
como PHP e Java. Isso permite
que o uso de memória e CPU seja
menor; [Link]
Prof. Victor Sotero
Composição do [Link]
• Possui um gerenciador de pacotes NPM via comand line – isso
facilita o compartilhamento de códigos e bibliotecas [Link];
• Gerenciador de versões - node NVM;
• Utilitário repl;
• O [Link] não é um ambiente visual ou possui ferramenta
integrada de ambiente.
Prof. Victor Sotero
Características do [Link]
• Tecnologia assíncrona que trabalha em apenas uma thread
de execução – por ser assíncrona, não bloqueia o processo
do mesmo;
• Em resumo: quando chega uma requisição (acessar o banco
de dados, por exemplo) a máquina virtual Javascript verifica
o que tem de ser feito e delega a atividade. Após isso ela
volta a atender novas requisições de forma paralela.
Prof. Victor Sotero
Empresas que usam o [Link]
• Twitter
• Spotify
• eBay
• Reddit
• LinkedIn
Prof. Victor Sotero
[Link] não é uma linguagem de programação
• Embora utilize o Javascript, o [Link] não é considerado
uma linguagem de programação;
• O Node também não é um framework (está mais para
plataforma de aplicação como Nginx);
• A máquina virtual V8 é a mesma que a Google utiliza no
Chrome para executar Javascript.
Prof. Victor Sotero
Potencial do
[Link]
Configurando o Ambiente
• O download pode ser feito gratuitamente através do link
[Link]
• No link aparecerá duas opções de download (escolha a opção estável
LTS);
• A instalação não requer nenhuma força jedi(next-next-finish);
• Para verificar se a instalação aconteceu de forma correta, abra o cmd e
digite node –v ou node --version
Prof. Victor Sotero
Testando o [Link]
• Crie uma pasta em qualquer diretório e dentro dela crie um
arquivo chamado [Link] .
• Insira nesse arquivo o trecho de código:
[Link](“Olá, estou testando essa parada!”)
• Salve o arquivo, abra o cmd e acesse o diretório onde o
arquivo foi criado. Após isso digite o comando node [Link].
• Obs.: caso seu SO tenha variável de ambiente não é preciso
acessar o diretório pelo cmd.
Prof. Victor Sotero
O que é NPM?
• Ecossistema de pacotes do [Link];
• Código aberto;
• Comunidade gigantesca;
• Você pode pesquisar no site da NPM o pacote que precisa e
instalar utilizando um comando simples;
• É possível gerenciar as versões dos pacotes assim como criar
scripts para automatizar serviços (de atualização por
exemplo).
Prof. Victor Sotero
Instalação de pacotes NPM via CLI
• Ao instalar o [Link], o NPM também será instalado de
forma automática;
• Sintaxe do comando: npm install <pacote-nome> ;
• É possível instalar vários pacotes ao mesmo tempo: npm
install <pacote-1> <pacote-2> <pacote-3> .
Prof. Victor Sotero
[Link]
• O arquivo [Link] funciona como manifesto do projeto.
Nesse caso, ele contém um repositório das configurações das
ferramentas utilizadas no projeto;
• Em resumo, quando executamos o npm e instalamos algum
módulo, automaticamente o [Link] recebe
informações sobre as versões e nomes dos pacotes
instalados.
Prof. Victor Sotero
Você sabe o que é um
framework?
Conceito - Framework
• Conjunto de bibliotecas que contém funcionalidades que
permitem a criação de aplicações para fornecer as mais
diversas soluções;
• Permite reutilização de código;
• É formado por classes pertencentes a uma linguagem de
programação e que fornecem recursos prontos.
Prof. Victor Sotero
Principais Linguagens para o Desenvolvimento
Mobile
• Swift – criada pela Apple. Linguagem rápida e fácil de
aprender;
• Kotlin – Alternativa ao Java (podem trabalhar com
interoperabilidade);
• Java – dispensa apresentações :D;
• Flutter – SDK de código aberto que foi desenvolvido pela
Google. Utiliza a linguagem DART
• JavaScript – possui frameworks para o desenvolvimento
mobile (React Native).
Prof. Victor Sotero
Prof. Victor Sotero
Características
• Biblioteca em Javascript;
• Foi desenvolvida pelo Facebook;
• Permite a criação de aplicativos multiplataforma (IOS e
Android);
• Não há a necessidade de aprender mais do que uma
linguagem de programação.
Prof. Victor Sotero
Por que escolher React Native?
• Desenvolvimento rápido em consideração a outras
linguagens;
• Reutilização de código – é possível reutilizar o código em
diferentes plataformas;
• Comunidade ativa – existe uma grande quantidade de
recursos e bibliotecas;
• Performance – embora não seja tão rápido quanto um
desenvolvimento nativo, o RN possui um desempenho muito
bom (geralmente não é perceptível para o usuário).
Prof. Victor Sotero
Funcionamento do React Native
• É composto por componentes;
• Ao invés de criar a interface do usuário usando ferramentas
de criação visual, você cria seu aplicativo dividindo-o em
pequenos componentes reutilizáveis;
• O React Native se encarrega de traduzir cada componente
em elementos nativos do IOS ou Android.
Prof. Victor Sotero
O que é preciso para começar a programar?
• [Link]
• npm ou Yarn
• Emuladores(Android Studio/Expo) ou dispositivo móvel
• Editor de código
Prof. Victor Sotero
Expo-cli local
• O expo-cli faz parte do pacote no [Link] e corresponde a uma
ferramenta que possibilita o fácil acesso a API’s nativas dos
dispositivos.
• Para verificar se é possível utilizar o Expo, digite o comando:
• npx expo --version no terminal
• Utilize o comando npx create-expo-app --template para criar um
novo projeto dentro do diretório.
Prof. Victor Sotero
Expo go
• Precisamos instalar o aplicativo Expo
Go no celular para poder carregar o
código que o metro bundler envia
para exibir em sua tela;
• Procure o aplicativo na loja de apps
do seu aparelho.
• Obs.: é possível utilizar o Android
Studio para emular o Android, mas
isso consome muito recurso da
máquina.
Prof. Victor Sotero
Executando sua Primeira Aplicação
• Acesse o diretório do seu projeto através do terminal do VS Code
- cd nome_pasta;
• Digite o comando npx expo start para iniciar o serviço;
• Abra o app Expo GO no seu smartphone e escaneie o QR Code
disponibilizado no terminal;
• Após isso, caso seja solicitado, clique em Open with Expo Go app
Prof. Victor Sotero
Conclusão
• Seguindo esses passo seu app deve abrir com sucesso no seu
dispositivo;
• Com o ambiente de desenvolvimento configurado, seu
projeto React Native já está pronto para seguir adiante.
Prof. Victor Sotero
• Na próxima aula vamos começar a conhecer os componentes
do React Native.
Prof. Victor Sotero