Aula 6
Hackeando futuros
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
Objetivos da aula de hoje
- Discutir sobre os desafios da aula passada
- Continuar o papo sobre SPA
- Primeira noção de pipelines
- APIs, Camada OSI, REST
- Primeiro contato com Nuvem
- Primeiro contato com Web3
- Continuar discussão sobre solução de problemas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
90% do que consideramos impossível, na verdade é possível. Os outros 10% só virão com o tempo e o avanço da tecnologia
Kojima
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10264631/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
Desafios da aula passada
- Tentar adicionar algum elemento novo no site
- Continuar brincando com git
- Pesquisar sobre nuvem
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
O que vimos até agora
- Carreiras em TI
- Suas vocações
- Um pouco de versionamento
- Um pouco de repositório
- Um pouco sobre SPA
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
Nosso primeiro site
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10225846/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10225847/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10225848/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
Geradores de sites estáticos
- Objetivo deles é criar um template pré-pronto para facilitar a vida do desenvolvedor
- Conceitos de Low Code e No Code
- Fáceis de se hospedar em quase qualquer plataforma
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
Gatsby
- Instalar o Node - https://nodejs.org/en/
- Instalar o Gatsby com:
npm install -g gatsby-cli
-
Instalar o surge com:
n
pm install --global surge
-
npm init gatsby
- Responda todas as perguntas que o aplicativo fizer: (nome do site, pasta, etc..)
-
após isso entre na pasta do site com: cd nomedapasta
-
rode npm run develop
-
Visualize seu site pela URL que a linha de comando mostrar (geralmente localhost:8000)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
Gatsby
Para publicar o site no Surge
- Rodar o comando gatsby build
- Rodar o comando surge
- Criar sua conta colocando seu email e nome de usuário
- passar a pasta do seu projeto (não esquecer de passar a /public no final
- Agora é só acessar o site gerado
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
Hospedando sites
- Vercel
- Netlify
- Fly.io
- Surge
- Cloudfare CDN
- Surge
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
Pipelines
- Automatizar processos repetitivos
- Reduzir falhas humanas
- Criar regras específicas para um deploy
- Chamamos o processo geralmente de CI/CD
- Existem diversas ferramentas para criação desses processos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
Cloud
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10234005/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10234007/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10234008/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
API
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10263989/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
API
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10264022/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
REST
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10264026/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
Camada OSI
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10264626/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
Desafio para a próxima aula
- Adicionar algum outro elemento no site
- Pesquisar mais sobre produtos dentro de uma plataforma de nuvem (não tenha medo, suba uma máquina, explore, só não esqueça de desligar depois)
Qualquer dúvida me mande um email (kalebalves@tuta.io) ou mensagem no whatsapp
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1090504/images/10205105/pasted-from-clipboard.png)
Dicas e materiais extras
Aula 6
By Kaleb Alves
Aula 6
- 168