NLW Setup [Ignite]

Bruno Pereira | bruno.pereira@ifpa.edu.br

Acesse meu perfil no GitHub e encontre o repositório público nlw-setup.

eubrunodiego - Overview

Sobre o evento

Este projeto foi desenvolvido durante a Next Level Week (NLW) Setup, evento de programação da Rocketseat, de 16 a 20 de janeiro de 2023.

Rocketseat

Sobre a aplicação desenvolvida

Habit

Trata-se de uma aplicação (web e mobile) para monitoramento de hábitos diários como: praticar exercícios, comer de forma saudável, beber 2 litros água, etc.

Veja o protótipo no Figma:

Figma

Roteiros

Aula 1 - Iniciando o projeto de ponta-a-ponta

• Back-end
  • Fundamentos do Node.js
  • Criação do projeto [server]
  • Setup do TypeScript
  • Criando a primeira rota
  • Configurando o Prisma
  • Configurando o Cors
• Front-end
  • Fundamentos do React
  • Criação do projeto [web]
  • Componentes e propriedades
  • Configurando o Tailwind CSS
• Mobile
  • O que é React Native
  • O que é o Expo e Expo Go
  • Ambiente de desenvolvimento
  • Conhecendo a estrutura de pastas e arquivos
  • Executando a aplicação
  • Configurando a Splash Screen
  • Instalando fontes personalizadas
  • Criação do component Loading
  • Customizando a Status Bar

Aula 2 - Avançando o Back-end e o Front-end

• Back-end
  • Estrutura do banco de dados
    • Diagramação do banco de dados
    • Criação de tabelas no banco de dados
    • Criação de seed do banco de dados
  • Isolando arquivos do back-end
  • Rotas do back-end
    • Criação de novo hábito
    • Detalhamento dos hábitos do dia
    • Toggle do hábito no dia
    • Resumo dos dias
• Front-end
  • Estrutura da homepage
    • Componente Header
    • Tabela de hábitos diários
    • Geração de range de dias
    • Preenchimento de dias no fim
    • Adicionando Scroll horizontal
• Mobile
  • Conhecendo o Nativewind
  • Instalação do Nativewind
  • tailwind.config no React Native
  • Tipagem do className para usar o tailwind
  • Instalar o Tailwind CSS IntelliSense
  • Criando a screen de Home
    • Criando o component de Header
      • Incluindo logo SVG como componente
      • Tipagem do SVG com componente
      • Utilizando ícones do vector-icons
    • Criando o component para HabitDay
      • Instalando o dayjs para manipular datas
      • Definindo o padrão de datas pt-br
      • Reaproveitando o generate-range-between-dates.ts
    • Criando os dias para o componente HabitDay
    • Criando o cabeçalho dos dias da semana

Aula 3 - Finalizando o layout Web e Mobile

• Back-end
  • Rota para completar hábito
  • Rota para o resumo dos dias
• Front-end
  • Acessibilidade com Radix-ui
  • Modal Dialog para criar Novo Hábito
  • Popover do detalhamento do dia
  • Personalizar ProgressBar
• Mobile
  • Criando estrutura básica das telas [screens]
    • Cadastro de Novo Hábito
    • Detalhes do Hábito
  • Implementando a Navegação
    • Criando rotas da aplicação app.routes.tsx
    • Navegar para a tela de cadastro
    • Tipagem das rotas de navegação
  • Criando screen New.tsx para Criar Hábito
    • Habilitando rolagem com ScrollView
    • Criando component BackButton
    • Implementando ação do botão de voltar
    • Criando o input de um novo hábito
    • Criando component CheckBox
    • Criando o botão de confirmação
  • Criando screen Habit.tsx para hábitos do dia
    • Navegando para a tela do hábito
    • Habilitando rolagem com ScrollView
    • Reaproveitando o component BackButton
    • Usando data como parâmetro da rota
    • Estilizar e exibir o dia da semana
    • Estilizar e exibir a data DD/MM
    • Criando component ProgressBar
    • Implementando ação do CheckBox

Aula 4 - Conectando a API

• Front-end
  • Criando CheckBox
  • Obtendo dados do formulário
  • Sincronizando hábitos completos
• Conexão Front-end com Back-end
  • Configurando cliente HTTP
  • Buscando resumo da API
  • Utilizando dados da API no Popover
  • Implementação da criação de Novo Hábito
• Mobile
  • Iniciando o server
    • Instalando o Axios
    • Configurando o acesso ao server
  • Home
    • Listando o summary
    • Utilizando o Loading component
    • Manipulando propriedades no HabitDay component
    • Calculando percentual de progresso no dia
    • Utilizando o clsx para manipular classes de estilos condicionais
  • New
    • Obtendo dados do formulário
    • get e post de novos hábitos para a api

Aula 5 - O próximo nível

• Front-end
  • Listando hábitos possíveis do dia
  • Desabilitando em datas passadas
  • Sincronizando hábitos completos
  • Adicionando transitions e focus
  • Como levar o projeto para o próximo nível?
    • Ideia 1 - Autenticação (Firebase, Auth0)
    • Ideia 2 - Notificações Push / Service Workers
    • Ideia 3 - Perfil público com gráfico de resumo
• Mobile
  • Habit
    • Buscar os hábitos do dia selecionado na API
    • Exibir a lista de hábitos do dia
    • Criar o component HabitsEmpty
    • Exibir o progresso do hábito
    • Verificar se data selecionada é passada e mostrar mensagem: não pode editar
  • Enviar para a API o estado do hábito
    • Utilizar o useFocusEffect para atualizar a Home ao voltar
  • Animação
    • Conhecendo o React Native Reanimated
    • Instalando e configurando o Reanimated
    • Animar a ProgressBar
    • Animar a CheckBok
  • Testar tudo

Tecnologias utilizadas no desenvolvimento

Agrupamos as tecnologias em server (back-end), web e mobile (front-end).

Server

Node.js

Iniciando a aplicação

npm run dev

Prisma

ORM para Node.js e TypeScript

Prisma | Next-generation ORM for Node.js & TypeScript

Instalação como dependência de desenvolvimento

npm i -D prisma

Executando o código prisma e gerando versões às quais se devem atribuir nomes

npx prisma migrate dev

Executando o front-end do prisma

npx prisma studio

Web

Tailwindcss

Biblioteca de classes para manipulação de estilos

Installation - Tailwind CSS

Instalação e inicialização do tailwindss

npm install -D tailwindcss
npx tailwindcss init

Configuração do tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Phosphor Icons

Biblioteca de ícones para aplicativos

GitHub - phosphor-icons/homepage: The homepage of Phosphor Icons, a flexible icon family for everyone

Instalação do Phosphor icons

npm install --save phosphor-react

Radix-ui

Biblioteca não-estilizada para acessibilidade de componentes visuais do React

Primitives - Radix UI

Instalação do modal Dialog

npm install @radix-ui/react-dialog

Importação do Dialog no arquivo .tsx

import * as Dialog from '@radix-ui/react-dialog';

Instalação do Popover

npm install @radix-ui/react-popover

Importação do Popover no arquivo .tsx

import * as Popover from '@radix-ui/react-popover';

Instalação do Checkbox

npm install @radix-ui/react-checkbox

Importação do Checkbox no arquivo .tsx

import * as Checkbox from '@radix-ui/react-checkbox';

Clsx

Biblioteca para criar condicionais dentro dos estilos

Instalação

npm i clsx

Axios

npm i axios    

Mobile

React Native com Expo

Iniciando a aplicação

npx expo start

Nativewind

Biblioteca para usar os recursos do Tailwind CSS no React Native

https://www.nativewind.dev/quick-starts/expo

Instalação no Terminal do MacOS

npm i nativewind

Após a instalação do "Nativewind”, instale o Tailwind CSS para desenvolvimento

npm i tailwindcss --save-dev

e altere o arquivo de configuração tailwind.config.js como mostrado abaixo.

// tailwind.config.js

module.exports = {
- content: [],
+ content: [
"./App.{js,jsx,ts,tsx}",
"./<custom directory>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

SVG

Biblioteca para renderizar arquivos .svg no React Native.

https://github.com/software-mansion/react-native-svg

Instalação

npx expo install react-native-svg

SVG Transformer

Biblioteca para usar arquivos .svg como componentes no React Native

https://github.com/kristerkari/react-native-svg-transformer

Instalação

npm i react-native-svg-transformer --save-dev

Configuração criando na raíz do diretório do projeto o arquivo metro.config.js com o seguinte conteúdo:

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"],
  };

  return config;
})();

Vector Icons

Biblioteca de ícones para o React Native.

react-native-vector-icons directory

Dentre as diversas opções, o Rodrigo usa a "Feather”, importando-a assim:

import { Feather } from '@expo/vector-icons’;

Dayjs

Biblioteca para manipular datas.

https://github.com/iamkun/dayjs

Instalação

npm install dayjs

Para configurar a região de data local, crie um diretório "lib” dentro de "src” e crie um documento dayjs.ts contendo:

import dayjs from 'dayjs';
import 'dayjs/locale/pt-br';

dayjs.locale('pt-br');

React Navigation

Biblioteca para navegação entre telas com React Native

Instalação

npm install @react-navigation/native

Instalação de dependências para telas com notch

npx expo install react-native-screens react-native-safe-area-context

Instalando o Stack navigator

npm install @react-navigation/native-stack