Durante o evento Next Level Week #3, foi desenvolvido a projeto Happy, que é uma plataforma de visita a orfanatos, conectando pacientes com volutanriado para realizar visitas online, tendo um mapa para vários serviços que acolhem Crianças e Adolescentes com seus horários disponíveis para que os pacientes possam receber visitas de maneira adequada. Trazendo uma representação e homenagem para o dia das crianças, que é comemorado no dia 12 de outubro no Brasil.
| Dia | Descriçao | tecnologias |
|---|---|---|
| 12/10 | Acelerando sua evolução |   |
| 13/10 | Olhando as oportunidades |   |
| 14/10 | A escolha da stack |   |
| 15/10 | Até 2 anos em 2 meses |   |
| 16/10 | A milha extra |   |
O NodeJS tem que ser versão 12 ou superior, para consultar digite: node -v
Tópicos abordados nesta aula:
- Apresentação do projeto
- Conceitos de back-end, front-end e API
- O que é React e por que utilizar?
- Por que vamos usar Typescript?
- Criando projeto com ReacJS
- Componentes, JSX e propriedades
- Trabalhando com rotas
- Criando a landing page
- Criando Mapa Page
Nesta edição do NLW, não utilizamos a metodologia Mobile First pois não temos prioridade da aplicação ser responsiva. Mas teremos uma aplicação personalizada para cada cidade por geolocalização.
O foco dessa NLW não é ter muita features, mas abordar mais a questão de boas práticas, código mais escalável, validação ou outros tópicos não abordados em outros NLW (como validação).
Foi explicado com uma ferramenta de Flowchart chamada Whimsical:
A cada requisição carregava todo o HTML, CSS e JS do servidor. Não havia muita distinção entre Back e Front-End.
Na API Restul foi adicionado uma camada a mais que constrói o HTML quando recebe dados enviados pelo Back-End em resposta requisições enviadas (orfanatos). Essa solução apresenta um melhor SOC (Separation of Concerns), pois no modelo um há uma sobrecarga do servidor passando-lhe tarefas de renderização de HTML. Na API RESTful, como retorna uma lista em JSON o desacoplamento e a reutilização de código para construir aplicações mobile.
REST trata-se de uma abstração da arquitetura da Web. Resumidamente, o REST consiste em princípios/regras/constraints que, quando seguidas, permitem a criação de um projeto com interfaces bem definidas. Desta forma, permitindo, por exemplo, que aplicações se comuniquem.
O HTTP é o principal protocolo de comunicação para sistemas Web, existente há mais de 20 anos, e em todo esse tempo sofreu algumas atualizações. Nos anos 2000, um dos principais autores do protocolo HTTP, Roy Fielding, sugeriu, dentre outras coisas, o uso de novos métodos HTTP. Estes métodos visavam resolver problemas relacionados a semântica quando requisições HTTP eram feitas.
Estas sugestões permitiram o uso do HTTP de uma forma muito mais próxima da nossa realidade, dando sentido às requisições HTTP. Para melhor compreensão, veja os exemplos abaixo (requisições em formatos fictícios):
- GET: http://www.meusite.com/usuarios
- DELETE: http://www.meusite.com/usuarios/jackson
- POST: http://www.meusite.com/usuarios –data {nome: joaquim}
Existe uma certa confusão quanto aos termos REST e RESTful. Entretanto, ambos representam os mesmo princípios. A diferença é apenas gramatical. Em outras palavras, sistemas que utilizam os princípios REST são chamados de RESTful.
- REST: conjunto de princípios de arquitetura
- RESTful: capacidade de determinado sistema aplicar os princípios de REST.
Realiza tipagem no Javascript, habilita o intellisense, quando definimos uma interface.
Ajuda a detectar erros enos guia informando que campos precisamos informar.
Tem coisas do React que não são entendidas nativamente pelos browsers, ao utilizar o create-react-app inclue no seu projeto:
- BabelJS é um transpiler de JavaScript que transpila novos recursos em padrões antigos. Com isso, os recursos podem ser executados em navegadores antigos e novos, sem complicações. Babeljs vem com uma ampla gama de recursos na forma de plug-ins, predefinições, polyfills, etc. Resumindo, Babeljs é um conjunto de ferramentas que possui todas as ferramentas necessárias disponíveis com ele e que ajuda os desenvolvedores a usar todos os recursos atuais disponíveis no ECMA Script e ainda não se preocupam como será suportado nos navegadores.
- Webpack é um empacotador de módulo que empacota todos os módulos com dependências - js, estilos, imagens, etc. em ativos estáticos .js, .css, .jpg, .png, etc. Webpack vem com predefinições que ajudam na compilação na forma necessária. Por exemplo, a predefinição de reação que ajuda a obter a saída final na forma de reação, a predefinição es2015 ou env que ajuda a compilar o código em ES5 ou 6 ou 7, etc.
Execute um dos seguintes comandos:
yarn create react-app web --template typescript
OU
npx create-react-app web --template typescript
Abra a aplicação no VS Code Do template criado pelo React apague os seguintes arquivos do diretório pois não seria utilizado no curso:
- README.md: Arquivo de informações de descrição do projeto no formato Markdown (md) utilizado pelo Git.
- Scr>App.css: Arquivo de estilo de página local (vai ser criado estilo global)
- Scr>index.css: Arquivo de estilo de página local (vai ser criado estilo global)
- Scr>App.test.tsx: Arquivo de Testes.
- Scr>Logo.svg: Image de logo do React.
- Scr>serviceWorker.ts: Usado quando a aplicação é um PWA (Progressive Web App)
- Scr>setupTests.ts: Arquivo de Testes.
- Deixe somente o arquivo index.html na pasta públic com o seguinte código:
O App.tsx e o index.tsx ficam com os seguintes conteúdos.
Repare que nos arquivos tsx precisamos sempre importar a biblioteca React. No arquivo index.tsx temos o ReactDOM que se encarrega de renderizar os elementos em HTML. A árvore de elementos em HTML de uma página que vemos ao chamar a ferramento Inspector de um navegador pode ser chamada de DOM. Ao executar a aplicação com:
npm start
O método render do ReactDOM recebe como parâmetros tags HTML ou componentes REACT. Todo componente tem a estrutura de uma função que retorna HTML ou JSX. O JSX é uma maneira de incluir HTML dentro do Javazcript.
Dentro de um elemento no HTML, em document.getElementById(“root”), foi colocado na div com id=root no arquivo index.html. Podemos fazer concatenação ou agregação de componentes, abaixo o componente App utiliza outro componente Title.
Quando passamos atributos ao componente ele se torna propriedades. Mas precisamos criar uma interface para que o Typescript consiga realizar a identificação do tipo. Os coomopnetes possibilitam a reutilização de código e várias páginas.
Crie uma pasta pages dentro de src e inclua duas páginas, Landing.tsx e OrphanagesMap.tsx, que iremos utilizar na navegação
Agora para navegar entre páginas temos que instalar:
yarn add react-router-dom OU npm install react-router-dom
Incluímos um arquivo routes.tsx para configurar as rotas e na hora de importar emite um aviso para instalar outro pacote,
Colocamos o parâmetro –D para indicar que é uma dependência de desenvolvimento e não vai ser utilizada na produção
yarn add @types/react-router-dom –D OU npm install @types/react-router-dom -DDepois de instalarmos esse pacote aparece o Inteligesense quando digitamos:
O código da função Routes ficará assim:
Repare na primeira rota que navega para raiz tem uma propriedade exact. Isso é para diferenciar das outras rotas que também contém a barra para frente, então a página inicial apareceria em todas as outras páginas. A tag Switch é uma tag opcional garante que apenas uma rota seja chamada de cada vez.
Se alterarmos agora a página inicial App.tsx e a página Landing.tsx as rotas já estarão funcionando.
Porém de formos em Network da ferramenta Inspector do browser podemos ver que a cada navegação está havendo o Refresh e carregamento da página inteira (css, scripts) e não queremos isso.
Para resolver isso temos que importar de react-router-dom o componente Link e substitui-lo pelas anchor tags do HTML.
E invés de href fica to:
Ao salvar e testar não está recarregando mais nada ao mudar de página. Esse é o conceito de SPA (Single Page Application). Não tem que ficar recarregando recursos compartilhados da mesma aplicação.
As imagens da aplicação serão exportadas diretamente em formato SVG do modelo Figma fornecido.
Depois de exportar a imagens, salve em uma pasta imagens dentro da pasta src.
Para associar fontes ao projeto só precisa ir no site do Google Fonts
Depois de selecionar as fontes abaixo, clicamos em Embedd e copiamos o link e colamos em public/index.html:
nunito Semi-bold 600
nunito Bold 700
nunito Extra-bold 800
Depois de incluirmos as fontes, crie um arquivo de estilo global.css dentro da pasta style com o seguinte conteúdo:
Estamos aplicando a fonte Nunito em vários elementos da tela, com fallback para uma fonte sem serifa. Depois fazemos a importação desse estilo no arquico App.tsx.
import './styles/global.css';Alterando nossa página Landing.tsx com o conteúdo:
Aqui, para incluirmos ícones na aplicação instalamos a biblioteca react-icons com o comando:
npm install react-iconsDentro de react-icons encontra-se vários pacotes de icons como o Material Design(md), Font Awesome(fa), etc. Utilizamos o FeatherIcons (fi), para colocarmos a seta se navegação entre páginas.
Crie um folha de estilo chamada landing.css dentro de style/pages para a Landing page
E termos a página inicial pronta:
Na página OrphanageMap.tsx temos o seguinte conteúdo:
Há algumas formas de incluir gratuitamente mapas em seu aplicativo React:
- Google Maps
- React-leaflet
- Mapbox
Para utilizar o react-leaflet precisamos instalar:
npm install leaflet react-leaflet
E fazemos a chamada para o mapa em nossa página OrphanageMap.tsx:
import { Map, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
<Map
center={[-23.525384, -46.669296]}
zoom={15}
style={{ width: '100%', height: '100%' }}>
<TileLayer url={`https://a.tile.openstreetmap.org/{z}/{x}/{y}.png`}/>
</Map>É necessário importar também o TileLayer, que é um servidor onde recupera as imagens do mapa, e o estilo do mapa em leaflet.css. O atributo center é a posição do mapas que pode ser obtido pelas coordenadas fornecidas pelo Google Maps, clicando com o botão direito do mouse no lugar ou na área no mapa e selecionando “O que há aqui?”.
Ao atualizarmos a página já teremos a visualização do mapa. Porém, como a interface visual do Leaflet é bastante carregada você pode optar por utilizar o MapBox que oferece um variedade maior de estilos.
Mapbox é um provedor americano de mapas on-line personalizados para sites e aplicativos como Foursquare, Lonely Planet, Facebook, Financial Times, The Weather Channel e Snapchat. Desde 2010, ele expandiu rapidamente o nicho de mapas personalizados, em resposta à escolha limitada oferecida por fornecedores de mapas como o Google Maps.
Para utilizar o MapBox você precisa criar uma conta no site Mapbox
Entre na página de account e copie o acesstoken
Como o token é uma informação de acesso privado, que não queremos compartilhar em repositórios públicos como o GitHub, precisamos criar um arquivo .env
Neste arquivo criamos varáveis ambiente, que customizamos de acordo com o ambiente de desenvolvimento (Desenvolvimento ou produção). Toda variável ambiente no React precisa começar com REACT_APP. E no gitignore, incluímos o arquivo .env para ser ignorado e não expor nossas informações.
Para carregar as variáveis de ambiente precisamos parar a aplicação e reinicia-la. Para utilizar o MapBox utilizamos ainda os componentes do react-leaflet mas trocamos as informações do TileLayer.
<Map
center={[-23.525384, -46.669296]}
zoom={15}
style={{ width: '100%', height: '100%' }}>
<TileLayer
url={`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`}
/>
</Map>Repare que, como agora vamos utilizar a variável de ambiente, o valor de url deve estar dentro de chaves. Os seguintes estilos de caixa de mapas estão disponíveis para todas as contas usando um token de acesso válido:
- streets-v11
- outdoors-v11
- light-v10
- dark-v10
- satellite-v9
- satellite-roads-v11
