Analisador de Texto

Índice

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

1. Considerações gerais

O projeto foi elaborado de forma individual, porém os momentos de "dúvidas rápidas" com as coaches técnicas, OHs, e auxílio das demais colegas foi imprescindível para finalizar o projeto.

2. Preâmbulo

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étricasgit 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.

3. Resumo do projeto

O projeto é uma aplicação web que permite 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. O projeto foi realizado usando HTML, CSS e JavaScript.

4. Funcionalidades

A lista de funcionalidades é a seguinte:

A aplicação permite que a usuária insira um texto escrevendo-o em uma caixa de texto.
A aplicação calcula as seguintes métricas e atualiza o resultado em tempo real conforme a usuária escreve o texto:
- Contagem de palavras: a aplicação conta o número de palavras no texto de entrada e mostra essa contagem para a usuária.
- Contagem de caracteres: a aplicação conta o número de caracteres no texto de entrada, incluindo espaços e sinais de pontuação, e mostra essa contagem para a usuária.
- Contagem de caracteres excluindo espaços e sinais de pontuação: a aplicação conta o número de caracteres no texto de entrada, excluindo espaços e sinais de pontuação, e mostra essa contagem para a usuária.
- Contagem de números: a aplicação conta quantos números há no texto de entrada e mostra essa contagem para a usuária.
- Soma total dos números: a aplicação soma todos os números que estão no texto de entrada e mostra o resultado para a usuária.
- Comprimento médio das palavras: a aplicação deve calcula o comprimento médio das palavras no texto de entrada e mostra esse valor para a usuária.
A aplicação permite limpar o conteúdo da caixa de texto ao clicar em um botão.

5. Boilerplate

A lógica do projeto foi implementada completamente em Vanilla JavaScript.

Para iniciar o projeto foi necessário fazer um fork e um clone do repositório da Laboratória que continha um boilerplate com testes.

O boilerplate fornecido seguia 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

Descrição de scripts / arquivos

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.

Deploy

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.

6. Critérios de Aceitação Mínimos do Projeto

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

HTML

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.

CSS

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

Web APIs

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

JavaScript

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.

Controle de Versões (Git e GitHub)

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.

Foco na Usuária

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

Design do Produto

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

7. Testes

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.

Testes Unitários

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.

Testes de Critérios Mínimos de Aceitação

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

Testes End-to-End

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:

GitHub Actions

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:

8. Dicas, sugestões e leituras complementares

Prepare o seu PC para trabalhar

Antes de começar, instale o seguinte:

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

Depois, no GitHub:

Crie uma conta. Saiba mais sobre o GitHub neste link
Faça um fork deste projeto
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:

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

Recursos e tópicos relacionados

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

9. Considerações para solicitar seu Feedback de Projeto

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.

10. Objetivos de aprendizagem

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

Uso de HTML semântico
Links
- HTML semântico
- Semantics in HTML - MDN