ETB - Escola Técnica de Brasília

FIC EAD - DESENVOLVEDOR DE APLICATIVOS

PARA MÍDIAS DIGITAIS

Material Base para o curso Desenvolvedor de

Aplicativos para Mídias Digitais na modali-
dade EAD

Orientador: Prof. Gustavo Vinícius Martins Arvelos

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

2 REACTJS E REACT NATIVE . . . . . . . . . . . . . . . . . . . . . 11

2.1 Aplicação Prática - Airbnb clone . . . . . . . . . . . . . . . . . . . . . 12
 3

1 Node

1.1 O que é o Node?

“Node.js é uma plataforma para construir aplicações web escaláveis de alta per-
formance usando JavaScript”.
Ele foi construído em cima da engine V8 que interpreta JavaScript, criado pela
Google e usado em seu navegador, o Chrome. Isso quer dizer que você utilizará a linguagem
pelo lado do servidor também, e não só pelo browser, como normalmente ocorre.
Além disso, ele usa uma arquitetura voltada a eventos, o que se integra muito
bem com JavaScript (callbacks!). Usando um loop de eventos, o Node interpreta, em uma
única thread, as requisições de forma assíncrona em vez de sequenciais, e não permitindo
bloqueios. Isso o torna incrivelmente rápido, perfeito para lidar com um número muito
alto de requisições.
Apesar da ideia original ser essa, Node não é só um servidor. Sim, você pode
montar servidores http e https, assim como servidores de DNS, TCP, Media Server e etc.
Mas agora também é possível criar aplicações desktop com o Node-WebKit e até mesmo
ambientes de desenvolvimento para front-end.
O loop de eventos do Node recebe várias requisições, como por exemplo, buscar
alguma informação no banco, ler um arquivo no servidor, etc. Depois de executar uma das
ações, em vez de esperar a resposta (como esperar o banco responder), ele passa a processar
a próxima requisição. Quando a resposta de uma delas é retornada, é disparado um evento
e o callback correspondente da requisição, ou seja, a função que deve ser executada como
resultado da resposta, é posta na fila para ser executada assim que possível.
Isso é uma forma de lidar com concorrência. O jeito tradicional de fazer isso seria
criando múltiplas threads (lembrando que o Node usa uma) para lidar com as diversas
requisições. Porém, dentro de cada thread, aquele tempo de espera da resposta não é
aproveitado, deixando essa parte da CPU ociosa, bloqueada para outras ações.
Por causa de todas as suas características , Node.js é ótimo para realizar diversos
tipos de projetos, como:

• APIs

• Jogos multiplayer

• Servidores de streaming de dados

4 Capítulo 1. Node

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:

• Model ou modelo é a ponte entre as camadas Visão (View) e Controle (Control-

ler), consiste na parte lógica da aplicação, que gerencia o comportamento dos dados
através de regras de negócios, lógica e funções. Esta fica apenas esperando a cha-
mada das funções, que permite o acesso para os dados serem coletados, gravados e,
exibidos. É o coração da execução, responsável por tudo que a aplicação vai fazer
a partir dos comandos da camada de controle em um ou mais elementos de dados,
respondendo a perguntas sobre o sua condição e a instruções para mudá-las. O mo-
delo sabe o que o aplicativo quer fazer e é a principal estrutura computacional da
arquitetura, pois é ele quem modela o problema que está se tentando resolver
1.3. Express 5

• 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.

• Controller ou controle é o componente final, faz a mediação da entrada e saída,

comandando a visão e o modelo para serem alterados de forma apropriada conforme
o usuário solicitou através do mouse e teclado. O foco do Controle é a ação do
usuário, onde são manipulados os dados que o usuário insere ou atualiza, chamando
em seguida o Modelo. O Controller envia essas ações para o Model e para a janela
View onde serão realizadas as operações necessárias.

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:

• Gerencia as requisições de diferentes requisições e rotas e URLs

• Combinar com mecanismos de renderização de "view"para gerar respostas inserindo

dados em modelos

• 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

• Adicionar em qualquer ponto da requisição um "middleware"para interceptar pro-

cessar ou pré-processar e tratamentar à mesma

Equanto o Express é bastante minimalista, os desenvolvedores criam pacotes de

middleware para resolver quase todos os problemas no desenvolvimento web. Há bibliote-
cas para trabalhar com cookies, sessões, login de usuários, parâmetros de URL, dados em
requisições POST, cabeçalho de segurança e entre tantos outros. Você pode achar uma
lista de pacote de middleware mantido pela equipe Express em <http://expressjs.com/
en/resources/middleware.html>
6 Capítulo 1. Node

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 Banco de dados

Aplicativos Express podem usar qualquer mecanismo de banco de dados suportado
pelo Node (o Expresso em si não define nenhum comportamento / requisitos adicionais
específicos para gerenciamento de banco de dados). Existem muitas opções, incluindo
PostgreSQL, MySQL, Redis, SQLite, MongoDB, etc. Para usá-los, você deve primeiro
instalar o driver do banco de dados usando NPM.
Outra abordagem popular é acessar seu banco de dados indiretamente, através de
um Object Relational Mapper ("ORM"). Nesta abordagem, você define seus dados como
"objetos"ou "modelos"e o ORM mapeia estes para o formato de banco de dados subjacente.
Esta abordagem tem o benefício de que, como desenvolvedor, você pode continuar a pensar
em termos de objetos JavaScript, em vez de semântica de banco de dados, e que existe
um local óbvio para realizar a validação e verificação de dados recebidos.

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

Linux Journal Editor’s Choice de melhor sistema de gerenciamento de banco de dados

(SGBD).

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.

1.5 Aplicação Prática - API Básica

Conforme já estudamos, um API é uma das partes mais importante na criação de
um sistema, dessa maneira, vou deixar um exemplo prático para a criação de uma API
básica. Estou a total disposição para auxilio com qualquer dúvida em relação a matéria
ou ao exemplo prático.
<https://woliveiras.com.br/posts/construindo-uma-api-com-node-js-parte-1-criando-e-listando-dados/
>
1.5. Aplicação Prática - API Básica 9

Referencias utilizadas nesse capitulo;

• <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

2 ReactJS e React Native

ReactJS é uma biblioteca JavaScript para criação de interfaces para o usuário,

desenvolvida e mantida pelo Facebook, sua primeira release saiu em 2013. Está presente
em empresas grandes como Facebook, Instagram, AirBnB, NFL, Yahoo e muito mais. O
mercado para essa biblioteca só cresce. Sem sombras de dúvida uma das características
que esta fazendo a comunidade adotar o React para o desenvolvimento de suas aplicações
cada vez mais é a facilidade de aprendizagem.
Um componente no React tem como finalidade separar as preocupações, acoplando
cada vez mais as funcionalidades, e retornar um elemento React. É necessário entender
o que é e como funciona um componente para compreender melhor o funcionamento do
React e aproveitar de todos seus benefícios. Os componentes irão representar a parte da
interface do usuário. Existem dois tipos de componentes, são eles: Stateless e Stateful.
São componentes que não tem estados e podem receber propriedades.As proprie-
dades podem ser passadas durante sua declaração, pelo componente pai ou através do uso
da arquitetura flux. Ele também pode passar propriedades para seus componentes filhos.
É bem semelhante ao Stateless. Sua principal diferença é que ele possui um objeto
de estado, apenas o componente onde o estado está presente que tem acesso e controle
em cima dele.
Recomendo fortemente a leitura do seguinte material, vai dar uma visão muito
interessante sobre o que é e quais são as vantagens do uso do ReactJS;
<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>
O React Native, é um Framework para a criação aplicações mobile nativas, no
qual a principal linguagem de desenvolvimento é o JavaScript. O nome React Native pode
trazer a ideia de que o código escrito no framework é convertido para a linguagem nativa
do dispositivo, no caso do Android para a linguagem Java, por exemplo. Contudo, o que
ocorre na verdade, na maior parte das plataformas, é um processo em que o JavaScript é
executado em uma VM (máquina virtual) capaz de fazer e receber chamadas do hardware
e dos módulos nativos do dispositivo. Assim como o ReactJS o React Native também
utiliza os conceitos de componentes.
Baseado no React, o React Native possibilita a criação de aplicações móvel mul-
tiplataforma (Android e iOS) utilizando apenas Javascript. Porém, diferente de outros
frameworks com esta mesma finalidade (Cordova, por exemplo), todo o código desenvol-
vido com o React Native é convertido para linguagem nativa do sistema operacional, o
12 Capítulo 2. ReactJS e React Native

que torna o app muito mais fluido.

O React Native possui diversas características marcantes e fundamentais. Acessa
a interface e os recursos nativos do Android e iOS utilizando JavaScript. O código pro-
duzido é semelhante ao React para Web. Com o React Native conseguimos desenvolver
aplicações para Android e iOS utilizando um código único. Por ser multiplataforma, po-
demos desenvolver aplicações com React Native utilizando qualquer sistema operacional
(Windows, macOS ou Linux).
Recomendo Fortemente a leitura do seguinte artigo, vai auxiliar muito em um
entendimento maior sobre todo o que é o React Native:
<https://www.devmedia.com.br/react-native-tutorial/32860>

2.1 Aplicação Prática - Airbnb clone

Por fim pessoal, nossa parte teorica sobre ReactJS e React Native não é tão grande,
isso decorre pelo fato de que a melhor forma de entender é indo para a prática. Portanto
abaixo um artigo, de um site da minha confiança, com uma aplicação prática muito
interessante envolvendo toda a arquitura de backend, ReactJS e React Native. Estou aqui
para auxiliar vocês em todas a dúvidas ou problemas que possam ter tanto na aplicação
quanto em quaisquer partes do curso! Recomendo fortemente que façam a parte prática e
venham tirar as dúvidas comigo essa aplicação vai dar uma visão geral sobre um projeto
prático.
<https://blog.rocketseat.com.br/adonis-auth-jwt-api-rest/>

• <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>