/SAP010-notes-amanda-araujo

Primary LanguageHTML

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 e Semântica)

  • Diferença entre expressões (expressions) e declarações (statements)

Controle de Versões (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

Centrado no usuário

  • Desenhar e desenvolver um produto ou serviço colocando as usuárias no centro

Design de produto

  • Criar protótipos para obter feedback e iterar

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

Firebase

Angular

React

Vue

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 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 (git tag).

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, Angular o Vue) e Firebase para armazenar suas notas.

Para este projeto, você terá que lidar com views. Isso significa que cada seção terá sua própria URL, que indica qual view ou component será exibido em tela. Para isso precisaremos investigar sobre a API para manipulação rotas (na biblioteca ou framework de sua escolha) e o conceito de Single Page Aplication.

7. Hacker Edition

Se você terminou as funcionalidades base do projeto, pode passar para esta parte.

  • 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

Súmate al canal de Slack #project-lab-notes para conversar y pedir ayuda del proyecto.

Frameworks / bibliotecas

Ferramentas

PWA

Outros recursos