Usando o poder de uma stack poderosa, que utiliza de uma única linguagem popular e moderna, o JavaScript.
Produtividade e performance de forma enxuta.
A 11ª edição da Semana OmniStack, ocorrida entre 23/03 e 29/03, trouxe como projeto uma aplicação web e mobile inédita. Um sistema para conectar pessoas dispostas a ajudar a ONGs que precisam dessa ajuda.
Em uma semana foi desenvolvida uma aplicação do zero, dominando o backend, frontend e o mobile com uma única linguagem e uma única biblioteca de interfaces.
Layout da aplicação no Figma.
- Apresentar aplicação
- Configurar ambiente de desenvolvimento
- Node.js & NPM
- Visual Studio Code
- Endenter sobre back-end & front-end
- Regras de Negócio;
- Conexão banco de dados;
- Envio de e-mail;
- Comunicação com webservices;
- Autenticação do usuário;
- Criptografia e segurança;
- Criar projeto com Node.js
npm install -y
npm install express
- Entender sobre React & SPA
- Criar projeto com ReactJS
npx create-react-app frontend
- Entender sobre React Native & Expo (configurei a máquina e utilizei o próprio celular para rodar)
react-native init mobile
-
Adicionando validação
npm i celebrate
{
BODY: 'body',
COOKIES: 'cookies',
HEADERS: 'headers',
PARAMS: 'params',
QUERY: 'query',
SIGNEDCOOKIES: 'signedCookies',
}
-
Adicionando testes
- Por que fazer teste?
- TDD > Teste Driven Development Primeiro faz os testes, depois desenvolve
- Configurando Jest (Api Jest)
- server-side rendering
Next.js
- Tipos de testes
- Integração: Testa por completo uma funcionalidade
- Unitários: Testa de um pedaço da aplicação de forma muito isolada. Não vai ter side effects
- Configurando banco de testes
Cross-env
- Instalando supertest
- Faz requisições http específica para teste e traz junto algumas validações
- Testando rota de autenticação/criação
-
Deploy
- Alternativas
- Qual escolher?
Heroku
Node.js e
React.js Netlify
-
Estudos daqui pra frente
- Padrões de código: ESLint, Prettier
- Autenticação JWT
- Styled Components (CSS-in-JS)
OBS: pode-se utilizar o gerenciador de pacotes npm ou o yarn para rodar os comandos abaixo
Execute npm install
ou yarn install
nas pastas backend, frontend e mobile, para instalar as dependências.
Rode npm start
na pasta backend e acesse localhost:3333.
Rode npm start
na pasta frontend para utilizar a versão web. Acesse via localhost:3000.
Para este projeto rode react-native run-android
ou react-native run-ios
na pasta mobile. Se caso aparecer erros, antes de rodar o 'Welcome to React', tente npm android-clean
ou yarn android-clean
.
Configuração do VSCode layout