• 1. Considerações gerais
• 2. Preâmbulo
• 3. Resumo do projeto
• 4. Funcionalidades
• 5. Boilerplate
• 6. Critérios de aceitação mínimos do projeto
• 7. Testes
• 8. Dicas, sugestões e leituras complementares
• 9. Considerações para solicitar seu Feedback de Projeto
• 10. Objetivos de aprendizagem
• 11. Funcionalidades opcionais

• Este projeto será resolvido de forma individual.
• A estimativa de tempo para completar o projeto varia de 2 a 4 Sprints.
• Concentre-se em aprender, não apenas em "completar" o projeto.
• Sugerimos que você não tente saber tudo antes de começar a codificar. Não se preocupe muito com o que você ainda não entende. Você aprenderá ao longo do processo.

Créditos: Foto de ethan em Unsplash

Um analisador de texto é uma aplicação para extrair informações úteis de um texto utilizando diversas técnicas, como o processamento de linguagem natural (PLN),aprendizado de máquina (ML) e análise estatística. Essas aplicações podem fornecer uma variedade de métricas que oferecem informações básicas sobre o comprimento e a estrutura do texto, como contagem de palavras, contagem de caracteres, contagem de sentenças e contagem de parágrafos. Outras métricas incluem análise de sentimentos, que utiliza técnicas de PLN para determinar o tom geral positivo, negativo ou neutro do texto, e análise de legibilidade, que utiliza algoritmos para avaliar a complexidade e legibilidade do texto.

Em geral, as aplicações de análise de texto fornecem informações valiosas e métricas sobre os textos que podem ajudar os usuários a tomar decisões informadas e tirar conclusões significativas. Por meio do uso dessas ferramentas de análise, os usuários podem obter uma compreensão mais profunda dos textos.

Neste projeto, você criará uma aplicação web que permitirá que a usuária analise um texto no navegador, exibindo uma série de indicadores e métricas específicas sobre caracteres, letras, números, etc., que foram inseridos por ela como entrada. Você realizará isso usando HTML, CSS e JavaScript.

A lista de funcionalidades é a seguinte:

1. A aplicação deve permitir que a usuária insira um texto escrevendo-o em uma caixa de texto.

2. A aplicação deve calcular as seguintes métricas e atualizar o resultado em tempo real conforme a usuária escreve o texto:

   • Contagem de palavras: a aplicação deve ser capaz de contar o número de palavras no texto de entrada e mostrar essa contagem para a usuária.
   • Contagem de caracteres: a aplicação deve ser capaz de contar o número de caracteres no texto de entrada, incluindo espaços e sinais de pontuação, e mostrar essa contagem para a usuária.
   • Contagem de caracteres excluindo espaços e sinais de pontuação: a aplicação deve ser capaz de contar o número de caracteres no texto de entrada, excluindo espaços e sinais de pontuação, e mostrar essa contagem para a usuária.
   • Contagem de números: a aplicação deve contar quantos números há no texto de entrada e mostrar essa contagem para a usuária.
   • Soma total dos números: a aplicação deve somar todos os números que estão no texto de entrada e mostrar o resultado para a usuária.
   • Comprimento médio das palavras: a aplicação deve calcular o comprimento médio das palavras no texto de entrada e mostrar esse valor para a usuária.

3. A aplicação deve permitir limpar o conteúdo da caixa de texto ao clicar em um botão.

A lógica do projeto deve ser implementada completamente em JavaScript. Neste projeto, NÃO é permitido usar bibliotecas ou frameworks, apenas JavaScript puro, também conhecido como Vanilla JavaScript.

Para começar este projeto, você precisará fazer um fork e clonar este repositório que contém um boilerplate com testes. Um boilerplate é a estrutura básica de um projeto que serve como um ponto de partida com arquivos e configuração inicial de dependências e testes.

O boilerplate que fornecemos contém a seguinte estrutura:

./
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── package.json
├── src
│   ├── analyzer.js
│   ├── index.html
│   ├── index.js
│   └── style.css
└── test
    ├── .eslintrc
    └── analyzer.spec.js

• README.md: você deve modificá-lo para explicar as informações necessárias para o uso da sua aplicação web, bem como uma introdução à aplicação, sua funcionalidade e decisões de design que você tomou.

• .github/workflows: esta pasta contém a configuração para a execução do Github Actions. Você não deve modificar esta pasta nem seu conteúdo.

• read-only/: esta pasta contém os testes dos critérios mínimos de aceitação e end-to-end. Você não deve modificar esta pasta nem seu conteúdo.

• src/index.html: este é o ponto de entrada da sua aplicação. Este arquivo deve conter o seu HTML.

• src/style.css: este arquivo deve conter as regras de estilo. Queremos que você escreva suas próprias regras, portanto, NÃO é permitido o uso de frameworks de CSS (Bootstrap, Materialize, etc).

• src/analyzer.js: aqui você deve implementar o objeto analyzer, que já está exportado no boilerplate. Este objeto (analyzer) deve conter seis métodos:

  • analyzer.getWordCount(text): esta função deve retornar a contagem de palavras que estão no parâmetro text do tipo string.
  • analyzer.getCharacterCount(text): esta função deve retornar a contagem de caracteres que estão no parâmetro text do tipo string.
  • analyzer.getCharacterCountExcludingSpaces(text): esta função deve retornar a contagem de caracteres excluindo espaços e sinais de pontuação que estão no parâmetro text do tipo string.
  • analyzer.getNumberCount(text): esta função deve retornar quantos números estão no parâmetro text do tipo string.
  • analyzer.getNumberSum(text): esta função deve retornar a soma de todos os números que estão no parâmetro text do tipo string.
  • analyzer.getAverageWordLength(text): esta função deve retornar o comprimento médio das palavras que estão no parâmetro text do tipo string. Use 2 casas decimais.

  Para exemplos de uso de cada função, recomendamos ver o arquivo test/analyzer.spec.js.

  Nota: para simplificar as funcionalidades, definiremos palavras como grupos de caracteres separados por espaços. Por exemplo, as palavras no texto de entrada Sim, você consegue fazer! são quatro:

  • Sim,
  • você
  • consegue
  • fazer!

• src/index.js: aqui você deve ouvir eventos do DOM, invocar os métodos do objeto analyzer conforme necessário e atualizar o resultado na IU (interface de usuária).

• test/analyzer.spec.js: este arquivo contém os testes unitários para os métodos do objeto analyzer.

Fazer com que os sites sejam publicados (ou deployed) para que as usuárias da web possam acessá-los é algo comum em projetos de desenvolvimento de software.

Neste projeto, usaremos o Github Pages para implantar nosso site.

O comando npm run deploy pode ajudá-lo com essa tarefa e você também pode consultar a documentação oficial.

A seguir, você encontrará os critérios de aceitação mínimos do projeto relacionados a cada objetivo de aprendizado.

• Uso de HTML semântico

  • A aplicação possui um cabeçalho composto por um <header> que é pai de um <h1> com o texto Analisador de texto. Para que você possa praticar mais, esses elementos não podem ter atributos id, name ou class.

  • A aplicação utiliza um <textarea> com o atributo name com o valor user-input para permitir à usuária inserir um texto. Para que você possa praticar mais, este elemento não pode ter atributos id ou class.

  • A aplicação utiliza uma <ul> com 6 filhos <li>, um para exibir cada métrica. Para que você possa praticar mais, esses elementos não podem ter atributos id, name ou filhos.

  • O <li> para exibir a contagem de palavras deve ter um atributo data-testid com o valor word-count.

  • O <li> para exibir a contagem de caracteres deve ter um atributo data-testid com o valor character-count.

  • O <li> para exibir a contagem de caracteres excluindo espaços e sinais de pontuação deve ter um atributo data-testid com o valor character-no-spaces-count.

  • O <li> para exibir a contagem de números deve ter um atributo data-testid com o valor number-count.

  • O <li> para exibir a soma total de números deve ter um atributo data-testid com o valor number-sum.

  • O <li> para exibir o comprimento médio das palavras deve ter um atributo data-testid com o valor word-length-average.

  • A aplicação possui um rodapé composto por um <footer> que é pai de um <p> que possui o nome da estudante desenvolvedora da aplicação como texto. Para que você possa praticar mais, esses elementos não podem ter atributos id, name ou class.

  • A aplicação utiliza um <button> com o atributo id com o valor reset-button para permitir à usuária, através de um clique, limpar o conteúdo da caixa de texto.

• Uso de seletores CSS

  • A aplicação utiliza seletores CSS de tipo para estilizar o <header> e o <footer>.

  • A aplicação utiliza seletores CSS de classe para estilizar os <li> mencionados anteriormente.

  • A aplicação utiliza seletores de atributo para estilizar o <textarea> utilizando o atributo name.

  • A aplicação utiliza seletores CSS de ID para estilizar o <button> com o atributo id com o valor reset-button.

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

  • As classes CSS dos <li> filhos da <ul> definem um estilo usando as propriedades do modelo de caixa, (background, border, margin, padding).

• Uso de seletores do DOM

  • A aplicação utiliza o seletor do DOM querySelector.

  • A aplicação utiliza o seletor do DOM getElementById.

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

  • A aplicação registra um Event Listener para ouvir o evento input do <textarea> e atualizar as métricas quando o texto for digitado na caixa de texto.

  • A aplicação registra um Event Listener para ouvir o evento click do <button> que limpa o conteúdo da caixa de texto.

• Manipulação dinâmica do DOM

  • A aplicação atualiza o atributo textContent ou innerHTML dos <li> que exibem as métricas do texto.

• Tipos de dados primitivos

  • A aplicação converte valores do tipo string para o tipo number.

• Strings (cadeias de caracteres)

  • A aplicação utiliza métodos para manipular strings como split, trim ou replace.

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

  • A aplicação declara variáveis com let e const.

  • A aplicação NÃO declara variáveis com var.

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

  • A aplicação utiliza a estrutura if..else para avaliar condições.

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

  • A aplicação utiliza a estrutura for para criar um loop.

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

  • O objeto analyzer contém um método getWordCount para calcular a contagem de palavras de um texto.

  • O objeto analyzer contém um método getCharacterCount para calcular a contagem de caracteres de um texto.

  • O objeto analyzer contém um método getCharacterCountExcludingSpaces para calcular a contagem de caracteres excluindo espaços e pontuações de um texto.

  • O objeto analyzer contém um método getNumbersCount para contar quantos números existem em um texto.

  • O objeto analyzer contém um método getNumbersSum para calcular a soma dos números em um texto.

  • O objeto analyzer contém um método getAverageWordLength para calcular o comprimento médio das palavras em um texto.

• Testes unitários (unit tests)

  • Todos os testes unitários passam.

• Módulos do ECMAScript (ES Modules)

  • A aplicação utiliza import e export para importar e exportar valores de um módulo JavaScript.

• Uso de linter (ESLINT)

  • Ao executar o linter, não são exibidos erros de formato e estilo.

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

  • O código utiliza identificadores descritivos para variáveis e funções.

• GitHub: Criação de conta e repositórios, configuração de chaves SSH

  • A estudante criou uma conta no Github.

  • A estudante configurou sua conta do Github com uma chave SSH.

• Git: Controle de versões com git (clone, add, commit, push)

  • A estudante criou um fork para o projeto.

  • A estudante clonou seu repositório usando uma chave SSH.

  • A estudante criou commits e os salvou no Github.

• GitHub: Implantação com GitHub Pages

  • A aplicação está implantada no GitHub Pages.

• Projetar e desenvolver um produto ou serviço centrado nas usuárias

• Projetar em diferentes níveis de fidelidade

  • A estudante criou protótipos de baixa fidelidade para a UI (interface gráfica).

• Seguir os princípios básicos do design visual

  • Foram consideradas as regras básicas de design visual para projetar a UI (interface gráfica).

Este projeto conta com 3 conjuntos de testes que ajudarão a verificar se os critérios mínimos de aceitação são cumpridos.

Um teste unitário é uma técnica de teste de software na qual se verifica que cada componente individual de um programa ou sistema funcione corretamente isoladamente. Em outras palavras, cada unidade de código é testada separadamente para garantir que atenda aos requisitos e especificações.

Os testes unitários deste projeto executarão os métodos getWordCount, getCharacterCount, getCharacterCountExcludingSpaces, getNumbersCount, getNumbersSum e getAverageWordLength com diferentes argumentos e verificarão se os valores retornados são os esperados.

Você pode executar esses testes com o comando npm run test como mostrado na imagem a seguir:

O boilerplate inclui tarefas que executam eslint e htmlhint para verificar o HTML e JavaScript em relação a diretrizes de estilo. Ambas as tarefas são executadas automaticamente antes de executar os testes unitários ao usar o comando npm run test. No caso do JavaScript, estamos usando um arquivo de configuração do eslint chamado .eslintrc, que contém informações mínimas sobre o parser a ser usado (qual versão do JavaScript/ECMAScript), o ambiente (navegador neste caso) e as regras recomendadas (eslint:recommended). Em relação às próprias regras/diretrizes de estilo, vamos seguir as recomendações padrão tanto do eslint quanto do htmlhint.

Esses testes analisarão seus arquivos index.html, index.js, analyzer.js e style.css para verificar se você cumpre os critérios mínimos de aceitação. Cada critério está relacionado a um objetivo de aprendizado.

Você pode executar todos esses testes com o comando npm run test:oas como mostrado na imagem a seguir:

Você também pode executar os testes de cada grupo de objetivos de aprendizado 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

Um teste end-to-end (E2E) é uma técnica de teste de software na qual se verifica o funcionamento de todo o sistema, do início ao fim. Em outras palavras, é testado o fluxo completo do software, simulando a interação da usuária com a aplicação, para garantir que todas as partes do sistema funcionem corretamente em conjunto.

Você pode executar esses testes com o comando npm run test:e2e como mostrado na imagem a seguir:

Este repositório usa o GitHub Actions para executar automaticamente os testes unitários, testes de critérios mínimos de aceitação e testes end-to-end toda vez que você fizer um push no ramo main do seu repositório.

Você pode verificar o resultado desta GitHub Action na aba Actions do seu repositório no GitHub, como mostrado na seguinte imagem:

Antes de começar, instale o seguinte:

1. Node.js
2. git Se você estiver no Linux, é provável que já esteja instalado 👀. Para aprender mais sobre o git, visite este link
3. Um editor de código, recomendamos o Visual Studio Code

Depois, no GitHub:

1. Crie uma conta. Saiba mais sobre o GitHub neste link
2. Faça um fork deste projeto
3. Configure sua chave SSH no GitHub. Você pode conferir este vídeo, este artigo ou esse

Depois, em um shell, execute o seguinte. Se você estiver no Windows, pode usar o Git Bash:

1. Clone o fork para o seu PC
2. Navegue até o diretório do projeto clonado no seu shell
3. Instale as dependências do projeto com npm install
4. Instale o playwright com npx playwright install chromium --with-deps
5. Para iniciar o servidor web, execute npm start e vá para http://localhost:3000 no seu navegador.
6. Agora é só codar! 🚀

Junte-se ao canal do Slack #project-text-analyzer-pt

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

• Atende a todos os critérios mínimos de aceitação ao executar npm run test:oas
• Atende a todos os testes unitários ao executar npm run test
• Atende a todos os testes end to end ao executar npm run test:e2e
• Está livre de erros do eslint ao executar npm run test
• Está hospedado no GitHub.
• Está implantado no GitHub Pages.
• Possui um README com a definição do produto.

Lembre-se de que você deve fazer uma autoavaliação dos objetivos de aprendizado e habilidades para a vida em seu painel do aluno.

Se você não concluiu tudo o que foi mencionado acima, consideramos que você não está pronta para sua sessão de Feedback de Projeto.

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 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

• Tipos de dados primitivos

  Links

  • Valores Primitivos - MDN

• Strings (cadeias de caracteres)

  Links

  • Strings
  • String — Cadeia de caracteres - MDN

• 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)

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

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

• 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

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

• Design em diferentes níveis de fidelidade

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

Se você terminou com todas as funcionalidades requeridas, tente implementar as seguintes funcionalidades opcionais para aprofundar nos objetivos de aprendizado do projeto:

• Faça com que a contagem de palavras e caracteres seja 0 para uma entrada de texto vazia.
• Faça com que a contagem de palavras e caracteres seja 0 para uma entrada de texto contendo apenas espaços.
• Faça com que a contagem de palavras e caracteres seja 0 para uma entrada de texto contendo apenas caracteres de pontuação.

Você pode habilitar os testes unitários e end-to-end para esses casos nos arquivos test/analyzer.spec.js e read-only/test/e2e/app.spec.js. Você também precisará ajustar os testes existentes para as funcionalidades requeridas.