Software">
JavaScript, ReactJS e ReactNative
JavaScript, ReactJS e ReactNative
JavaScript, ReactJS e ReactNative
Brasília, DF
2020
Sumário
1 NODE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1 O que é o Node? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2 MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3 Express . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3.1 Rotas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.4 Banco de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.4.1 PostgreSQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.4.2 MongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.5 Aplicação Prática - API Básica . . . . . . . . . . . . . . . . . . . . . . 8
1 Node
• APIs
• Jogos multiplayer
Porém, existem situações onde definitivamente não é recomendado usá-lo. Por usar
somente uma thread, ele não serve para lidar com algoritmos complexos que consumam
muita CPU, como edição de imagens, por exemplo. Isso essencialmente impediria as outras
ações de serem executadas até o processamento estar completo!
As APIs são um tipo de “ponte” que conectam aplicações, podendo ser utiliza-
das para os mais variados tipos de negócio. A maioria das APIs são invisíveis ao usuário
comum, que enxerga apenas a interface dos softwares e aplicativos. No entanto, os profis-
sionais de programação conhecem por dentro essa tecnologia que é resultado da evolução
de diversos sistemas e ferramentas.
As APIs proporcionam a integração entre sistemas que possuem linguagem total-
mente distintas de maneira ágil e segura. Em outras formas de integração de sistemas,
o profissional que realiza o trabalho precisa, muitas vezes, instalar recursos compatíveis
com o sistema no qual se busca efetuar a integração.
As possibilidades disponibilizadas pelo uso das APIs proporcionam para os desen-
volvedores de softwares e aplicativos a possibilidade de conectar tecnologias heterogêneas,
como diferentes bancos de dados, por exemplo. Além disso, é possível fazer com que fun-
cionalidades e ferramentas específicas de determinados aplicativos sejam utilizadas em
outros, sem que isso cause qualquer dificuldade.
1.2 MVC
MVC é o acrônimo de Model-View-Controller (em português: Arquitetura Modelo-
Visão-Controle - MVC) é um padrão de projeto de software, ou padrão de arquitetura
de software formulado na década de 1970, focado no reuso de código e a separação de
conceitos em três camadas interconectadas, onde a apresentação dos dados e interação
dos usuários (front-end) são separados dos métodos que interagem com o banco de dados
(back-end).
O MVC é basicamente dividido em 3 camadas:
• View ou visão pode ser qualquer saída de representação dos dados, como uma tabela
ou um diagrama. É onde os dados solicitados do Model são exibidos. É possível ter
várias visões do mesmo dado, como um gráfico de barras para gerenciamento e uma
visão tabular para contadores. A Visão também provoca interações com o usuário,
que interage com o Controle (Controller). O exemplo básico disso é um botão gerado
por uma Visão, no qual um usuário clica e aciona uma ação no Controle. É a camada
de interface com o usuário. É utilizada para receber a entrada de dados e apresentar
visualmente o resultado.
1.3 Express
Express é basicamente a framework web mais popular, além de ser a biblioteca
subjacente para uma série de outros frameworks populares de Nodes. Fornece mecanismos
para:
• Definir as configurações comuns da aplicação web, como a porta a ser usada para
conexão e a localização dos modelos que são usados para renderizar a resposta
1.3.1 Rotas
Em um site tradicional baseado em dados, um aplicativo da Web aguarda pedi-
dos HTTP do navegador da Web (ou outro cliente). Quando um pedido é recebido, o
aplicativo descreve quais ações são necessárias com base no padrão de URL e possivel-
mente informações associadas contidas em dados POST ou GET. Dependendo do que é
necessário, pode ler ou escrever informações de um banco de dados ou executar outras
tarefas necessárias para satisfazer a solicitação. O aplicativo retornará uma resposta ao
navegador da Web, criando, de forma dinâmica, uma página HTML para o navegador,
exibindo inserindo os dados recuperados em espaços reservados em um modelo HTML.
Express fornece métodos para especificar qual função é chamada quando chega
requisição HTTP (GET, POST, SET, etc.) e de rotas e métodos para especificar o meca-
nismo de modelo ("view") usado, onde o modelo arquivos estão localizados e qual modelo
usar para renderizar uma resposta. Você pode usar o middleware Express para adicionar
suporte para cookies, sessões e usuários, obtendo parâmetros POST / GET, etc.
As duas primeiras linhas require() importam o modulo Express e cria uma aplica-
ção Express. Este objeto que é tradicionalmente nomeado app, tem métodos de roteamento
de requisições HTTP, configurações de middleware, renderização de views HTML, regis-
tro de engines de templates e modificação das configurações do aplicativo que controlam
como o aplicativo se comporta.
A parte do meio do código mostra uma definição de rota. O método app.get()
especifica uma função de retorno de chamada que será invocada sempre que exista uma
solicitação HTTP GET com um caminho (’/’) relativo à raiz do site. A função de re-
torno de chamada requer uma solicitação e um objeto de resposta como argumentos, e
simplesmente chama send() na resposta para retornar a string "Olá Mundo!"
O bloco final inicia o servidor na porta ’3000’ e imprime um comentário de log no
console. Com o Node e o Express já instalados e com o servidor em execução, você pode
acessar o localhost:3000 em seu navegador para ver o exemplo de resposta retornado.
A função de retorno de chamada requer uma solicitação e um objeto de resposta
1.4. Banco de dados 7
como argumento. Neste caso, o método simplesmente chama send() na resposta para
retornar a string "Olá Mundo!"Há uma série de outros métodos de resposta para encerrar
o ciclo de solicitação / resposta, por exemplo, você poderia chamar res.json() para enviar
uma resposta JSON ou res.sendFile() para enviar um arquivo.
O Express também fornece métodos para definir manipuladores de rotas para todos
as outras requisições HTTP, que são usados principalmente exatamente da mesma ma-
neira: post(), put(), delete(), options(), trace(), copy(), lock(), mkcol(), move(), purge(),
propfind(), proppatch(), unlock(), report(), mkactivity(), checkout(), merge(), m-search(),
notify(), subscribe(), unsubscribe(), patch(), search(), e connect().
1.4.1 PostgreSQL
PostgreSQL é um sistema gerenciador de banco de dados objeto relacional (SGBD),
desenvolvido como projeto de código aberto. O desenvolvimento do PostgreSQL é feito por
um grupo de desenvolvedores, em sua maioria voluntários, espalhados por todo o mundo
e que se comunicam via Internet. Trata-se, de um projeto direcionado pela comunidade
de desenvolvedores e de usuários, a qual qualquer pessoa pode se juntar, bastando se
inscrever em listas de discussão e participar delas.
Voluntários interessados em contribuir com o projeto também podem consultar as
sugestões de tarefas de desenvolvimento de novas funções e de correções de erros que são
publicadas ou apresentar suas próprias sugestões. O código desenvolvido é submetido à
equipe do projeto que pode aceitá-lo e incluí-lo nas novas versões ou recusá-lo. Voluntários
também podem colaborar gerando documentação ou realizando traduções. O software
possui um grande prestígio na comunidade Linux, tendo recebido diversas vezes o prêmio
8 Capítulo 1. Node
1.4.2 MongoDB
MongoDB é um software de banco de dados orientado a documentos livre, de código
aberto e multiplataforma, escrito na linguagem C++. Classificado como um programa de
banco de dados NoSQL, o MongoDB usa documentos semelhantes a JSON com esquemas.
É desenvolvido pela MongoDB Inc. e publicado sob uma combinação da GNU Affero
General Public License e Licença Apache.
Suas características permitem com que as aplicações modelem informações de
modo muito mais natural, pois os dados podem ser aninhados em hierarquias complexas
e continuar a ser indexáveis e fáceis de buscar. Banco de Dados Orientados a Documentos
tem como característica conter todas as informações importantes em um único docu-
mento, ser livre de esquemas, possuir identificadores únicos universais (UUID), possibili-
tar a consulta de documentos através de métodos avançados de agrupamento e filtragem
(MapReduce) e também permitir redundância e inconsistência.
Esses bancos de dados também são chamados de Bancos NoSQL (Not Only SQL).
Esse termo NoSQL é devido à ausência do SQL, mas esse tipo de Banco de Dados não se
resume apenas a isso. De forma resumida esse tipo de Banco de Dados não traz consigo
as ideias do modelo relacional e nem a linguagem SQL. Uma diferença fundamental entre
os dois modelos surge quando precisamos criar relacionamentos nos bancos de dados rela-
cionais, diferente dos bancos orientados a documentos que não fornecem relacionamentos
entre documentos, o que mantém seu design sem esquemas. Dessa forma, ao invés de
armazenar dados relacionados em uma área de armazenamento separado, os bancos de
dados de documentos integram esses dados ao próprio documento.
Ainda assim é possível armazenar dados relacionados de forma separada, isso pode
ser feito usando uma coleção separada, porém, é preciso tomar cuidado com isso visto que
os ganhos de desempenhos podem ser perdidos.
• <https://medium.com/thdesenvolvedores/node-js-o-que-%C3%A9-por-que-usar-e-primeiros-p
• <https://vertigo.com.br/o-que-e-api-entenda-de-uma-maneira-simples/>
• <https://pt.wikipedia.org/wiki/MVC>
• <https://www.todoespacoonline.com/w/2014/04/variaveis-em-javascript/>
<https://developer.mozilla.org/pt-BR/docs/Learn/Server-side/Express_Nodejs/Introdu%
C3%A7%C3%A3o>
• <https://www.devmedia.com.br/introducao-ao-mongodb/30792>
11
• <https://blog.rocketseat.com.br/adonis-auth-jwt-api-rest/>
• <https://medium.com/reactbrasil/voc%C3%AA-ou-o-seu-time-n%C3%A3o-v%C3%
A3o-aprender-reactjs-em-7-dias-ou-em-um-hello-world-869c197aa4ca>
• <https://medium.com/reactbrasil/5-motivos-para-aprender-react-2bb755c96304>
• <https://www.devmedia.com.br/react-native-tutorial/32860>