• 1. Preâmbulo
• 2. Resumo do projeto
• 3. Considerações gerais
• 4. Funcionalidades
• 5. Considerações técnicas
• 6. Critérios de aceitação mínimos do projeto
• 7. Edição Hacker
• 8. Objetivos de aprendizagem
• 9. Dicas, guias e leituras complementares
• 10. Considerações para pedir seu Feedback do Projeto

Segundo a Forbes, 90% dos dados existentes hoje foram criados nos últimos dois anos. A cada dia, geramos 2,5 milhões de terabytes de dados, um número sem precedentes.

No entanto, os dados por si só têm pouca utilidade. Para que essas grandes quantidades de dados se transformem em informação fácil de ler para as usuárias, precisamos entender e processar esses dados. Uma maneira simples de fazer isso é criando interfaces e visualizações.

Na imagem a seguir, você poderá ver como, com os dados mostrados à esquerda, é possível construir uma interface amigável e compreensível para as usuárias, à direita.

Neste projeto, você construirá um site para visualizar um conjunto de dados que você irá gerar através do prompting. Este site será adaptado para atender às necessidades que você descobrir que suas usuárias têm.

Além disso, neste projeto, você utilizará ferramentas de inteligência artificial como ChatGPT, ExplainDev, entre outras, para gerar um conjunto de dados em um arquivo javascript.

O propósito de gerar os dados dessa maneira é oferecer a oportunidade de se envolver com o uso de ferramentas impulsionadas pela inteligência artificial, assim como com técnicas de prompting.

Como entrega final, você terá um site que permitirá visualizar os dados, filtrá-los, ordená-los e calcular estatísticas. Por estatísticas, referimo-nos a diferentes cálculos que você pode fazer com os dados para mostrar informações ainda mais relevantes às usuárias (média, valor máximo ou mínimo, etc).

• Este projeto deve ser realizado em duplas.
• O tempo estimado para concluir o projeto é de 4 a 5 Sprints.
• O tempo estimado que você deve dedicar à geração de dados é de no máximo dois dias. Além disso, no final do projeto, você deve apresenta um screenshot do prompt utilizado.
• Se perceber que vai demorar mais tempo, deverá usar os dados de exemplo que encontrará neste caminho: ./src/data/dataset.js.
• O projeto será entregue ao enviar seu código para o GitHub (commit/push) e a interface será implantada usando o GitHub Pages.

Como entrega final, você terá um site que permitirá visualizar os dados, filtrá-los, ordená-los e calcular estatísticas.

Aqui estão definidas com mais detalhes as funcionalidades mínimas que devem ser implementadas:

• A aplicação deve permitir que a usuária veja os itens dos dados em uma visualização, que pode ser tipo cartões ou qualquer outra forma que você decida como a mais apropriada (mas a partir daqui chamamos os itens de "cartões"). Cada um dos cartões deve estar contido em um elemento <li> e estes, por sua vez, contidos em um elemento <ul>.

• O elemento <ul> deve ser um filho de um elemento com o atributo id com o valor "root". Este é um passo importante para que sua aplicação tenha a estrutura necessária.

• Os cartões devem destacar os valores das propriedades dos dados que interessariam à usuária ver. Por exemplo: nome, data, imagem, etc. Se você filtrar ou ordenar por uma propriedade, o cartão deve mostrar o valor dessa propriedade para a usuária.

• A interface deve estruturar semanticamente os dados usando o padrão microdados. É obrigatório usar pelo menos os atributos itemscope, itemtype e o atributo itemprop.

  Por exemplo, os seguintes dados correspondentes a Ada Lovelace:

    {
      "id": "ada-lovelace",
      "name": "Ada Lovelace",
      "shortDescription": "Pioneira da computação, foi a primeira programadora.",
      "description": "Uma visionária do século XIX...",
      "imageUrl": "URL_DA_IMAGEM_GERADA",
      "facts": {
        "yearOfBirth": 1843,
        "placeOfBirth": "Londres, Inglaterra",
        "mainField": "Ciência da Computação",
      }
    }

  podem ser estruturados semanticamente em HTML como:

  <dl itemscope itemtype="MulheresNaTecnologia">
    <img src="URL_DA_IMAGEM_GERADA" alt="Ada Lovelace" />
    <dt>Nome:</dt><dd itemprop="name">Ada Lovelace</dd>
    <dt>Descrição:</dt><dd itemprop="description">Pioneira da computação, foi a primeira programadora.</dd>
    <dt>Ano de nascimento:</dt><dd itemprop="yearOfBirth">1843</dd>
    <dt>Local de nascimento:</dt><dd itemprop="placeOfBirth">Londres, Inglaterra</dd>
    <dt>Área principal:</dt><dd itemprop="mainField">Ciência da Computação</dd>
  </dl>

• A aplicação deve calcular e exibir uma estatística dos dados. Pode ser uma propriedade calculada de cada item, como uma propriedade adicional (por exemplo, o índice de massa corporal de cada Pokémon) ou estatísticas dos dados completos (por exemplo, total de pessoas nascidas nos anos 80).

• A aplicação deve permitir à usuária filtrar os dados. Você usará um elemento <select> com um atributo de dados data-testid="select-filter", e um atributo name com o nome da propriedade pela qual irá filtrar (por exemplo, se for filtrar por "tipo", o <select> terá name="tipo"). Os <option> deste <select> deverão ter no atributo value o valor do filtro (por exemplo, se for filtrar por tipo "fogo", seria <option value="fogo">Fogo</option>).

• A aplicação deve permitir à usuária ordenar os dados.

  • Terá pelo menos um controle <select> para ordenar.
  • Se usar apenas um controle <select>, deve ter um atributo de dados data-testid="select-sort" e um atributo name com o nome da propriedade pela qual irá ordenar (por exemplo, se for ordenar por "num" seria name="num"). Este <select> terá dois <option> com value asc e desc, para ordenar de forma ascendente e descendente respectivamente (por exemplo, <option value="asc">A - Z</option>).
  • Uma alternativa é oferecer à usuária uma ordenação mais complexa. Pode implementar a ordenação por várias propriedades. Neste caso, seria com um <select> com um atributo de dados data-testid="select-sort", e que contenha filhos <option> com um value com o nome da propriedade pela qual irá ordenar. (Por exemplo, <option value="nome">Nome</option>). Além disso, você precisará de outro controle (<radio>,<select>, etc.) para indicar se a ordenação é ascendente ou descendente. Esse controle secundário terá um atributo name="sort-order", e terá valores asc e desc.

• As funcionalidades de ordenação devem operar sobre os dados filtrados. Por exemplo, se filtrar os Pokémons do tipo fogo e depois os ordenar por nome de forma ascendente, a aplicação deve manter o filtro aplicado e ordenar os Pokémons do tipo fogo.

• A aplicação deve permitir à usuária reiniciar a aplicação, limpando filtros e ordenamentos, com um <button> com um atributo de dados data-testid="button-clear".

• As operações de filtrar, ordenar, limpar, etc. não devem recarregar a página, mas sim adicionar conteúdo de maneira dinâmica via JavaScript.

• A aplicação será responsiva, ou seja, deve ser visualizada sem problemas em diferentes tamanhos de tela: celulares, tablets e desktops.

Os seguintes wireframes são exemplos de uma interface que pode atender a essa funcionalidade. Como poderá ver, esses designs seguem a metodologia Mobile First, a mesma que recomendamos utilizar em todos os seus projetos:

Design Mobile:

• Wireframe mobile 1
• Wireframe mobile 2

Design Desktop:

• Wireframe desktop 1
• Wireframe desktop 2

A lógica do projeto deve ser implementada completamente em JavaScript (ES6), HTML e CSS. Neste projeto, NÃO é permitido usar bibliotecas ou frameworks, apenas JavaScript puro, exceto bibliotecas para criação de gráficos (charts); veja a seção opcional](#7-hacker-edition) acima.

O boilerplate contém uma estrutura de arquivos como ponto de partida, bem como todas as configurações de dependências:

.
├── README.md
├── package.json
├── src
|  ├── data 
|  |  └── dataset.js (O que você gerou com a IA)
|  ├── dataFunctions.js
|  ├── view.js
|  ├── index.html
|  ├── main.js
|  └── style.css
└── test
   └── data.js
   └── dataFunctions.spec.js
   └── tests-read-only

Como no projeto anterior, existe um arquivo index.html. Como já sabe, este é o arquivo que será exibido para a usuária. Também é útil para indicar quais scripts serão usados e para reunir tudo o que foi feito.

Recomendamos usar src/main.js para todo o seu código relacionado à exibição dos dados na tela. Basicamente, nos referimos à interação com o DOM. Operações como criação de nós, registro de manipuladores de eventos (event listeners ou event handlers).

Neste arquivo, você encontrará uma série de imports prontos para carregar as diferentes fontes de dados.

Por exemplo, os dados com os quais você irá trabalhar, serão encontrados na seguinte linha:

import data from './data/dataset.js';

O cerne deste projeto é a manipulação de dados por meio de arrays e objetos.

Este arquivo conterá toda a funcionalidade relacionada a obter, processar e manipular dados (suas funções). Por exemplo:

• filterData(data, filterBy, value): esta função recebe três parâmetros. O primeiro parâmetro, data, fornece os dados. O segundo parâmetro, filterBy, indica qual campo dos dados se deseja filtrar. O terceiro parâmetro, value, indica o valor do campo que se deseja filtrar.

• sortData(data, sortBy, sortOrder): esta função de classificação recebe três parâmetros. O primeiro parâmetro, data, fornece os dados. O segundo parâmetro, sortBy, indica qual campo dos dados se deseja ordenar. O terceiro parâmetro, sortOrder, indica se a ordenação deve ser ascendente ou descendente.

• computeStats(data): a função de cálculo nos permitirá realizar cálculos estatísticos básicos para serem exibidos de acordo com os dados fornecidos; esta função deve usar o método reduce.

Essas funções devem ser puras e independentes do DOM. Essas funções serão posteriormente utilizadas no arquivo src/main.js, ao carregar a página, e sempre que a usuária interagir (cliques, filtragens, ordenações, ...).

Nesta pasta, estão os dados com os quais você trabalhará (os dados de exemplo ou os dados que você gerará com a ajuda da inteligência artificial).

Neste arquivo, você fará testes unitários das funções implementadas no arquivo dataFunctions.js. (filterBy, sortBy, etc.)

Neste arquivo, você pode construir e exportar dados "mock" para usar nos testes. É mais fácil testar um array de 5 elementos do que um array de 24, por isso você criará uma amostra dos dados que deseja testar. No mínimo, você deve exportar uma variável chamada data, mas pode definir e exportar mais se for necessário para seus testes.

Para obter uma melhor separação de responsabilidades no código, este arquivo deve conter todas as funções que serão usadas para renderizar os elementos dinamicamente.

Pelo menos uma função é obrigatória:

• renderItems(data): esta função recebe a matriz de dados para renderizar os elementos de cada item e deve retornar um elemento DOM ou uma string de HTML.

Lembre-se que todas as funções encontradas neste arquivo devem ser exportadas para serem usadas em outros arquivos.

Recomendamos esta estrutura que é clara e organizada para o projeto, pois facilita o entendimento da navegação e escalabilidade do código. Além disso também segue o princípio de design de Separação de responsabilidades no código, onde cada arquivo e pasta tem uma responsabilidade específica. A responsabilidade das funções em view.js serve para criar partes do DOM com os dados.

Esta não é a única maneira de dividir seu código, você pode usar mais arquivos e pastas, desde que a estrutura seja clara para seus colegas.

Com cada objetivo de aprendizagem, avaliamos se o código atende a alguns critérios. Isso não exclui que você possa usar outras opções, por exemplo, no caso dos seletores, sugerimos o uso de querySelector, mas isso não impede o uso de querySelectorAll ou getElementById também.

Você pode executar os testes de cada grupo de objetivos de aprendizagem individualmente com os seguintes comandos:

npm run test:oas-html
npm run test:oas-css
npm run test:oas-web-api
npm run test:oas-js
npm run test:oas-prompting
npm run test:oas // Esto es para correr todos los tests de OAs

Nota: para que os testes funcionem corretamente, você precisa ter instalado o Node.js (LTS) com versão 14.0.0 ou superior. Para verificar a versão do node, execute node -v no terminal. Se o comando não não retorna nenhuma versão, você precisa instalá-la, para isso você pode baixá-la de seu site oficial.

• Uso de HTML semântico

  • Possui um <header> com um <h1>
  • Possui um <footer>
  • Possui um <main> com um <h2>
  • Todos os elementos de controle (inputs, selects, radio, etc) possuem <label>
  • Usa <ul> para renderizar os dados
  • Os filhos de <li> usam os atributos de microdados itemscope e itemprop

Nota: Tenha em mente que para ter tags <ul> e <li> em seu projeto, É necessário que você já tenha dados criados, pois é a partir dos dados que você irá criar as listas.

• Uso de seletores CSS

  • Uso de seletor de classe para os itens <li>
  • Uso de flexbox em sentido row e column
  • Uso de flexbox para o elemento que contém os itens
  • Uso de flexbox para o elemento que contém os inputs UI

• Uso de seletores do DOM

  • O aplicativo usa querySelector para buscar os elementos do DOM

• Manuseio de eventos do DOM (ouvintes, propagação, delegação)

  • addEventListener com um callback que possui o parâmetro de event, permitindo o uso do objeto event com event.target ou event.currentTarget
  • O aplicativo registra Event Listeners para escutar click, change, keyup, dependendo do evento que deseja-se ouvir

• Manipulação dinâmica do DOM

  • O aplicativo atualiza o atributo innerHTML.
  • O aplicativo usa createElement e appendChild, ou strings de modelo para criar elementos

• Variáveis (declaração, atribuição, escopo)

  • O aplicativo declara variáveis com let e const de maneira adequada

• Uso de condicionais (if-else, switch, operador ternário, lógica booleana)

  • O aplicativo usa o statement if..else para avaliar condições

• Uso de loops (while, for, for..of)

  • O aplicativo usa o statement for ou o método forEach para iteração

• Funções (parâmetros, argumentos, retorno)

  No arquivo dataFunctions.js, define as seguintes funções:

  • uma função sortBy que possui 3 parâmetros (data, sortBy, sortOrder) e retorna a matriz ordenada
  • uma função filterBy que possui 3 parâmetros (data, filterBy, value) e retorna a matriz filtrada
  • uma função computeStats que possui pelo menos um parâmetro (data) e retorna um valor computado

  Mais sobre estes pontos na seção dataFunctions.js

• Arrays (arrays)

  • Uso de Arrays
  • Uso de Array.prototype.sort() - MDN ou Array.prototype.toSorted - MDN
  • Uso de Array.prototype.forEach() - MDN
  • Uso de Array.prototype.map() - MDN
  • Uso de Array.prototype.filter() - MDN
  • Uso de Array.prototype.reduce() - MDN

• Objetos

  • Uso de notação de ponto para acessar propriedades
  • Uso de notação de colchetes para acessar propriedades

• Módulos ECMAScript (ES Modules)

  • O aplicativo usa import e export para importar e exportar valores de um módulo JavaScript

Documente brevemente o seu trabalho no arquivo README.md do seu repositório, contando como foi o seu processo de design e como você acredita que o produto resolve o problema (ou problemas) que sua usuária enfrenta.

Depois de entender as necessidades das suas usuárias, escreva as Histórias de Usuário que representam tudo o que a usuária precisa fazer/ver. As Histórias de Usuário devem ser o resultado do seu processo de pesquisa ou research das suas usuárias.

Certifique-se de incluir a Definição de Pronto (definition of done) e os Critérios de Aceitação para cada uma.

Use suas histórias de usuário para planejar seus sprints, dividindo cada história em tarefas.

Na medida do possível, conclua uma História de Usuário antes de passar para a próxima (atendendo à Definição de Concluído e aos Critérios de Aceitação).

O tema será de sua escolha, por exemplo, podem ser personagens importantes na história, personagens inventados, países, filmes... etc.

No próximo projeto, com a ajuda da inteligência artificial, você deve fazer com que a usuária possa conversar com os dados gerados. Por exemplo, se os dados estiverem mostrando um país, a usuária poderia perguntar em que ano foi fundado ou qual é a sua capital, etc. Leve isso em consideração ao gerar seu conjunto de dados.

Estes dados serão salvos em um arquivo JavaScript. Este arquivo deve exportar uma matriz com 24 objetos. E a estrutura de cada objeto deve ser a seguinte:

• id: Identificador único (não pode haver dois elementos com o mesmo id). Deve ser uma string de até 32 caracteres, em minúsculas, composta apenas por letras, números, sublinhados (_) ou hífens (-). Por exemplo: "ada-lovelace".
• name: O nome do personagem, país, filme, etc.
• shortDescription: Breve descrição do elemento. Esta descrição deve ter no máximo 20 palavras.
• description: Descrição estendida do elemento. Esta descrição deve ter entre 80 e 100 palavras. Ao mostrar este dado na tela, você pode truncá-lo para que não ocupe muito espaço.
• imageUrl: URL da imagem. Esta imagem será gerada por meio de alguma ferramenta baseada em inteligência artificial. Depois de gerar a imagem e salvá-la no seu repositório, você deverá adicionar a URL neste campo.
• facts: Um objeto com pelo menos 3 "fatos" ou "informações" sobre este elemento, no formato "nome": "valor", por exemplo:

  "facts": {
    "yearOfBirth": 1843,
    "placeOfBirth": "London, England",
    "mainField": "Computer Science",
  }

Os nomes das propriedades devem estar no formato camelCase. Por exemplo, nenhum dos seguintes nomes seria válido:

"facts": {
  "year_of_birth": 1843,
  "Place of Birth": "London, England",
  "MainField": "Computer Science",
}

Os valores das propriedades só podem ser do tipo number, boolean ou uma string com no máximo 64 caracteres (essa não tem restrições quanto ao tipo de caracteres que podem conter).

E, por último, tenha em mente duas coisas:

1. Todos os elementos do conjunto de dados devem compartilhar as mesmas propriedades em facts, ou seja, se um elemento tem uma propriedade anoDeNascimento, o restante dos elementos do array também devem ter essa propriedade.
2. Não é necessário que os nomes das propriedades estejam em inglês, "localDeNascimento" é um nome igualmente válido.

• extraInfo: E por último, um campo opcional livre, similar a facts. Se precisar, aqui você pode inserir qualquer outro tipo de informação no formato "nome": "valor", mas sem restrições sobre o tipo de dado do valor. Por exemplo:

  "extraInfo": {
    "imagePrompt": "Um texto muito, muito longo...",
    "writings": [
      "Vol. 1",
      "Vol. 2",
      "Vol. 3",
      "Vol. 4"
    ]
  }

Um exemplo de data, de acordo com os requisitos anteriores, poderia ser:

export default [
  {
    "id": "ada-lovelace",
    "name": "Ada Lovelace",
    "shortDescription": "Pioneira da informática, foi a primeira programadora.",
    "description": "Uma visionária do século XIX...",
    "imageUrl": "URL_DA_IMAGEM_GERADA",
    "facts": {
      "yearOfBirth": 1843,
      "placeOfBirth": "London, England",
      "mainField": "Computer Science",
    }
  },
  //... 23 objetos más
]

A data gerada deve ser substituída pelo conteúdo deste arquivo: ./src/data/dataset.js.

O tempo estimado que você deveria dedicar à geração desses dados é de no máximo dois dias. Se após esse tempo você não tiver um conjunto de dados gerados, deverá usar os dados de exemplo localizados em: ./src/data/dataset.js.

As URLs das imagens dentro do arquivo JavaScript devem vincular-se às imagens para cada elemento da matriz. Essas imagens podem ser geradas por inteligência artificial ou imagens que você pode encontrar na web. Para a geração de imagens, recomendamos usar o gerador de imagens do Bing. Assim que tiver a imagem, faça o download dela ou obtenha a URL, para adicioná-la ao conjunto de dados.

Depois de ter o arquivo JavaScript completo, lembre-se de executar os testes com npm run test para verificar se o arquivo está cumprindo o que foi solicitado.

Uma vez que você delimitou seu campo de interesse e gerou o arquivo JavaScript com a ajuda da inteligência artificial, dedique tempo para compreender profundamente sua usuária e suas necessidades específicas. A partir desse entendimento, você poderá projetar a interface que facilite uma interação mais eficaz e uma compreensão mais completa dos dados apresentados.

Nota: embora você perceba que não está utilizando todas as informações geradas em sua interface, é necessário gerá-la completamente. No próximo projeto você usará o conjunto de dados completo, especialmente ao permitir que o usuário possa interagir através de chat com os dados gerados.

Dentro do readme que você criará, deve incluir uma captura de tela do seu prompt utilizado para gerar os dados. Se você usou vários prompts, pode anexar todas as capturas que precisar.

Usando os wireframes ou esboços (sketches) da sua solução de interface como base, o próximo passo é projetar sua Interface de Usuário (UI - User Interface). Para isso, você deve aprender a utilizar alguma ferramenta de design visual. Nós recomendamos o Figma, que é uma ferramenta que funciona no navegador e, além disso, você pode criar uma conta gratuitamente. No entanto, você é livre para usar outros editores gráficos como Illustrator, Photoshop, etc.

O design deve representar o ideal da sua solução. Digamos que é o que você desejaria implementar se tivesse tempo ilimitado para trabalhar. Além disso, seu design deve seguir os fundamentos de visual design.

Lembre-se de solicitar feedback do seu protótipo às suas colegas e/ou coaches.

Durante o desafio, você deverá realizar testes de usabilidade com diferentes usuárias, e com base nos resultados, deverá iterar seus designs. Conte-nos quais problemas de usabilidade você identificou nos testes e como os melhorou em sua proposta final.

Depois de projetar sua interface de usuário, você deverá trabalhar em sua implementação. Não é necessário construir a interface exatamente como você a projetou. Seu tempo de hacking é limitado, então você terá que priorizar.

Revise as funcionalidades que o projeto requer da interface.

O boilerplate deste projeto não inclui Testes Unitários, então você terá que escrevê-los para as funções responsáveis por processar, filtrar e ordenar os dados, bem como calcular estatísticas. Este projeto utiliza o framework Jest para executar os testes unitários, então recomendamos que consulte sua documentação.

Seus testes unitários devem cobrir 70% das declarações (statements), funções (functions), linhas (lines), e ramificações (branches) do arquivo src/dataFunctions.js que contém suas funções e está detalhado na seção de Considerações técnicas.

As seções chamadas Edição Hacker são opcionais. Se você concluiu tudo o que foi solicitado anteriormente e ainda tem tempo, tente completá-las. Isso permitirá que aprofundar e/ou praticar mais sobre os objetivos de aprendizado do projeto.

Recursos/características adicionais sugeridos:

• Visualizar a estatística calculada por meio de um gráfico. Para isso, recomendamos explorar bibliotecas de gráficos como Chart.js ou Google Charts.
• Cobertura de 100%

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

• Uso de HTML semântico

  Links

  • HTML semântico
  • Semantics in HTML - MDN

• Uso de seletores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

• Modelo de caixa (box model): borda, margem, preenchimento

  Links

  • Modelo de Caixa e Display
  • The box model - MDN
  • Introduction to the CSS box model - MDN
  • CSS display - MDN
  • display - CSS Tricks

• Uso de flexbox em CSS

  Links

  • A Complete Guide to Flexbox - CSS Tricks
  • Flexbox Froggy
  • Flexbox - MDN

• Uso de seletores de DOM

  Links

  • Modificando o DOM
  • Introdução ao DOM - MDN
  • Locating DOM elements using selectors - MDN

• Manipulação de eventos de DOM (listeners, propagação, delegação)

  Links

  • Introdução a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • Objeto Event

• Manipulação dinâmica de DOM

  Links

  • Introdução ao DOM
  • Node.appendChild() - MDN
  • Document.createElement() - MDN
  • Document.createTextNode()
  • Element.innerHTML - MDN
  • Node.textContent - MDN

• Diferenciar entre tipos de dados primitivos e não primitivos

• Arrays (arranjos)

  Links

  • Arranjos
  • Array - MDN
  • Array.prototype.sort() - MDN
  • Array.prototype.forEach() - MDN
  • Array.prototype.map() - MDN
  • Array.prototype.filter() - MDN
  • Array.prototype.reduce() - MDN

• Objetos (key, value)

  Links

  • Objetos em JavaScript

• Variáveis (declaração, atribuição, escopo)

  Links

  • Valores, tipos de dados e operadores
  • Variáveis

• Uso de condicionais (if-else, switch, operador ternário, lógica booleana)

  Links

  • Estruturas condicionais e repetitivas
  • Tomando decisões no seu código — condicionais - MDN

• Uso de laços (while, for, for..of)

  Links

  • Laços (Loops)
  • Laços e iterações - MDN

• Funções (params, args, return)

  Links

  • Funções (controle de fluxo)
  • Funções clássicas
  • Arrow Functions
  • Funções — blocos reutilizáveis de código - MDN

• Testes unitários (unit tests)

  Links

  • Introdução ao Jest - Documentação oficial

• Módulos de ECMAScript (ES modules)

  Links

  • import - MDN
  • export - MDN

• Uso de linter (ESLINT)

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

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

• 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

  • Site oficial do GitHub Pages

• GitHub: Colaboração pelo Github (branches | forks | pull requests | code review | tags)

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

• Criar protótipos para obter feedback e iterar

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

• Planejar e executar testes de usabilidade

• Dando Instruções

  Links

  • Dando Instruções | Learn Prompting: Your Guide to Communicating with AI

• Few shot prompting

  Links

  • Few shot prompting | Learn Prompting: Your Guide to Communicating with AI

Junte-se ao canal Slack #project-dataverse-pt para conversar e pedir ajuda no projeto.

Antes de começar a escrever código, você deve definir o que o produto deverá fazer com base no conhecimento que você pode obter da sua usuária. Estas perguntas podem te ajudar:

• Quem são as principais usuárias do produto?
• Quais são os objetivos dessas usuárias em relação ao produto?
• Quais são os dados mais relevantes que elas desejam ver na interface e por quê?
• Quando elas usam ou usariam o produto?
• Toda a sua pesquisa anterior deve resultar em todas as Histórias de Usuária do seu projeto.
• Não faça protótipos de alta fidelidade de todas as suas Histórias. Comece somente pelos que são necessários para o seu Sprint 1 (primeira semana de trabalho). Mais dicas no guia de organização para o projeto.

Quando estiver pronta para codificar, sugerimos que comece assim:

1. Um dos membros da equipe deve fazer um 🍴 fork do repositório da sua turma, seus coaches compartilharão um link para um repositório e darão acesso de leitura nesse repositório. O outro membro da equipe deve fazer um fork do repositório da colega e configurar um remote para o mesmo.
2. ⬇️ Clone seu fork para o seu computador (cópia local).
3. 📦 Instale as dependências do projeto com o comando npm install. Isso presume que você instalou o Node.js (que inclui npm).
4. Se tudo correr bem, você deverá conseguir executar os 🚥 testes unitários (unit tests) com o comando npm test.
5. Para ver a interface do seu programa no navegador, use o comando npm start para iniciar o servidor web e acesse http://localhost:5000 no seu navegador.
6. Vamos começar a codificar! 🚀

• Tópicos no currículo da Laboratória testes, arrays, objetos, funções, DOM no JavaScript do navegador.
• Procurando elementos com querySelector*
• Objeto de evento
• Array no MDN
• Array.sort no MDN
• Array.toSorted no MDN
• Array.map no MDN
• Array.filter no MDN
• Array.reduce no MDN
• Array.forEach no MDN
• Object.keys no MDN
• Object.entries no MDN
• Atributos de dados
• expressions-vs-statements
• expressão vs declaração
• Dados atômicos vs dados estruturados
• Módulos: Export
• Módulos: Import
• Diferença entre array e objetos
• Como percorrer um objeto?
• map, filter, sort e reduce também são métodos para objetos
• Diferença entre expression e statements
• Diferença entre createElement e innerHTML
• O que é o Escopo?

• Git
• GitHub
• GitHub Pages
• Para perguntas sobre Git recomendamos ver este playlist
• Node.js
• Jest

• Histórias de Usuário. Atente-se que Cris não diferencia Definição de Concluído de Critérios de Aceitação e nós sim faremos. Mais detalhes no guia.
• Como dividir as H.U.

Antes de agendar seu Feedback do Projeto com um coach, assegure-se de que seu projeto:

• Cumpre todos os critérios mínimos de aceitação ao executar npm run test:oas
• Cumpre todos os testes end to end ao executar npm run test:e2e
• Cumpre todos os testes unitários ao executar npm run test e que têm uma cobertura de 70% de statements (sentenças), functions (funções), lines (linhas), e branches
• Está livre de erros de eslint ao executar npm run pretest
• Está enviado no GitHub e publicado no GitHub Pages
• Captura de tela do prompt utilizado para gerar os dados.
• Tem um README.md com o seguinte:
  • Definição do produto clara e informativa
  • Histórias de usuário
  • Um Design da Interface de Usuário (protótipo de alta fidelidade)
  • A lista de problemas que você detectou por meio de testes de usabilidade no README.md
• Tem uma UI que cumpre as funcionalidades:
  • Mostra lista com dados e/ou indicadores
  • Permite ordenar dados por um ou mais campos (ascendente e descendente)
  • Permite filtrar dados com base em uma condição
  • Permite limpar os filtros com um botão
  • É responsiva

Lembre-se de fazer uma autoavaliação de objetivos de aprendizado e life skills a partir do seu painel do estudante.

Se você não completou todos os itens acima, não consideramos que está pronta para sua sessão de Feedback do Projeto.