Skip to content

Latest commit

 

History

History
405 lines (264 loc) · 14.8 KB

README.old.md

File metadata and controls

405 lines (264 loc) · 14.8 KB

Lab Notes

Índice

1. Prefácio

React, Angular e Vue são alguns dos frameworks e bibliotecas de JavaScript mais usados na área de desenvolvimento ao redor do mundo e existe uma razão para isso. No contexto do navegador, manter a interface sincronizada com o estado é difícil. Ao eleger um framework ou biblioteca para nossa interface, nos apoiamos em uma série de convenções e implementações testadas e documentadas para resolver um problema comum a toda interface web. Isto nos permite concentrar melhor (dedicar mais tempo) nas características específicas de nossa aplicação.

Quando escolhemos uma destas tecnologias não só importamos um pedaço de código para reusar (o qual já é um grande valor por si só), mas também adotamos uma arquitetura, uma série de princípios de design, um paradigma, algumas abstrações, um vocabulário, uma comunidade, etc...

Como desenvolvedora Front-End, estes kits de desenvolvimento podem resultar em uma grande ajuda para implementar rapidamente features dos projetos em que você for trabalhar.

2. Resumo do projeto

Neste projeto construiremos uma aplicação para tomar notas, que nos permita criar, editar, eliminar e consulta-las em qualquer momento.

Não existe dia em que não tomemos notas, sempre necessitamos guardar alguma localização, número de telefone, notas de alguma reunião ou salvar nossas URLs favoritas para consultar mais tarde. Muitas vezes para esta atividade utilizamos cadernos ou agendas que acabam sendo esquecidas, ou anotamos de manera dispersa de tal manera que perdemos de vista a prioridade e o propósito da nota, no que resulta em uma nota perdida.

Shows CRUD functionalities

O objetivo principal é aprender a construir uma interface web usando o framework escolhido (React). Esses framework front-end ataca o seguinte problema: como manter a interface e estado sincronizados. Portanto, esta experiência espera familiarizá-la com o conceito de estado da tela, e como cada mudança no estado vai refletir na interface (por exemplo, cada vez que adicionamos uma nota, a interface deve atualizar a lista notas).

3. Objetivos de Aprendizaje

Reflita e depois enumere os objetivos que quer alcançar e aplique no seu projeto. Pense nisso para decidir sua estratégia de trabalho.

HTML

CSS

JavaScript

  • Uso de linter (ESLINT)

  • Uso de identificadores descritivos (Nomenclatura | Semântica)

  • Diferenciar entre expresiones (expressions) y sentencias (statements)

Git e GitHub

  • Git: Instalação e configuração

  • Git: Controle de versão com git (init, clone, add, commit, status, push, pull, remote)

  • Git: Integração de mudanças entre ramos (branch, checkout, fetch, merge, reset, rebase, tag)

  • GitHub: Criação de contas e repositórios, configuração de chave SSH

  • GitHub: Implantação com GitHub Pages

    Links

user-centricity

  • Desenhar a aplicação pensando e entendendo a usuária

product-design

  • Criar protótipos para obter feedback e iterar

  • Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)

research

  • Planejar e executar testes de usabilidade

Firebase

react

  • jsx

  • components

  • events

  • lists-and-keys

  • conditional-rendering

  • lifting-up-state

  • hooks

  • css-modules

  • routing

4. Considerações gerais

  • Este projeto deve ser feito de forma individual.

  • A duração estimada do projeto é de 4 sprints, com a duração de uma semana cada uma.

  • Trabalhe integralmente uma história de usuário antes de passar para a próxima.

  • O aplicativo deve ser um Single Page App. Os pedidos serão enviados por meio de um tablet, mas não queremos um aplicativo nativo, mas sim um aplicativo Web que seja responsivo e possa funcionar offline.

  • Necessitamos pensar bem no aspecto UX de quem vai tomar as notas, o tamanho e aspecto dos botões, a visibilidade do estado atual da nota, etc.

  • Implementar testes unitários dos componentes.

5. Critérios mínimos de aceitação do projeto

Definição do produto

O Product Owner nos apresentou este backlog que é o resultado do seu trabalho colaborativo

Histórias de usuário

[História de usuário 1] Usuário deve poder criar conta, iniciar e encerrar a sessão

Eu como usuária quero poder criar uma conta e entrar no sistema usando login pelo Google para acessar minhas anotações.

[História de usuário 2] Usuário deve poder tomar nota

Eu como usuária quero tomar nota para não depender de minha memória e ter acesso as anotações em todo momento, das coisas importantes que antes escrevia no papel.

[História de usuário 3] Usuário deve poder ver as notas

Eu como usuária quero ler todas as notas para lembrar do que escrevi antes.

[História de usuário 4] Usuário deve poder editar as notas

Eu como usuária quero editar as notas para modificar o que escrevi antes.

[História de usuário 5] Usuário deve pode apagar notas

Eu como usuária quero apagar uma nota para não a ver novamente.

Critérios de aceitação

O que deve acontecer para satisfazer as necessidades do usuário?

  • Anotar um título em minha nota
  • Adicionar o conteúdo da nota.
  • Ver todas as minhas notas.
  • Modificar as notas e ver a última modificação feita.
  • Eliminar notas.
  • Funciona bem em um Tablet
Definição de pronto
  • Você deve ter recebido code review de pelo menos uma parceira.
  • Fez testes unitários e, além disso, testou seu produto manualmente.
  • Você fez testes de usabilidade e incorporou o feedback do usuário.
  • Você deu deploy de seu aplicativo e marcou sua versão (tag git).

6. Considerações técnicas

O projeto deve conter os seguintes arquivos base de configuração, ainda que não serão os únicos arquivos que terão que criar.

  • README.md é onde se encontra a descrição do projeto e os elementos relevantes de seu projeto.
  • .editorconfig com a configuração para o editor de texto.
  • .gitignore para ignorar o node_modules e outras pastas que não devem ser incluídas no controle de versão (git).
  • .eslintrc este arquivo contém regras para formatar o código (configuração para o linter). Além de ser uma boa prática ter configurado um linter.

Este projeto será uma Web App con um framework de JavaScript (React) e Firebase para armazenar suas notas.

7. Hacker Edition

As seções chamadas Hacker Edition são opcionais. Se você terminou tudo e ainda sobrou tempo, faça essa parte. Assim você poderá aprofundar e exercitar mais sobre os objetivos de aprendizagem do projeto.

  • Se a usuária começa a escrever uma nota e por alguma razão a aba do navegador se fecha, a nota deve mostrar como estava, quando abrir novamente
  • Subir imagens.
  • Ver o número de vezes que a nota foi editada.
  • Consumir API/s (Google Maps, Spotify, Pinterest, etc.)
  • Progressive Web App (PWA).
  • Criar categorias e classificar por tipo de nota.
  • Guardar a color da nota.
  • Criar uma nota publica.

8. Guias, dicas e leituras complementares

Frameworks / bibliotecas

Ferramentas

Rotas

PWA

Deploy

  • Veja a documentação de deploy do Create React App. Você pode utilizar qualquer um dos serviços listados na documentação, sendo recomendado o Firebase, Vercel, Netlify, Github Pages ou Heroku.