Analizador de texto

Índice

• 1. Consideraciones generales
• 2. Preámbulo
• 3. Resumen del proyecto
• 4. Funcionalidades
• 5. Boilerplate
• 6. Criterios de aceptación mínimos del proyecto
• 7. Pruebas
• 8. Consideraciones para pedir tu Project Feedback
• 9. Objetivos de aprendizaje
• 10. Funcionamiento

---

1. Consideraciones generales

• Este proyecto se trabajó de manera individual.
• El rango de tiempo para completar el proyecto fue de 3 Sprints.
• Enfócate en aprender y no solamente en "completar" el proyecto.

2. Preámbulo

_Credito: Foto de ethan_ _en Unsplash_

Un analizador de texto es una aplicación para extraer información útil de un texto utilizando diversas técnicas, como el procesamiento del lenguaje natural (NLP), el aprendizaje automático (ML) y el análisis estadístico. Estas aplicaciones pueden proporcionar una variedad de métricas que brindan información básica sobre la longitud y la estructura del texto como por ejemplo, el conteo de palabras, el conteo de caracteres, el conteo de oraciones y el conteo de párrafos. Otras métricas incluyen el análisis de sentimientos, que utiliza técnicas de NLP para determinar el tono general positivo, negativo o neutral del texto, y el análisis de legibilidad, que utiliza algoritmos para evaluar la complejidad y la legibilidad del texto.

En general, las aplicaciones de análisis de texto brindan información valiosa y métricas sobre los textos que pueden ayudar a las usuarias a tomar decisiones informadas y sacar conclusiones significativas. Mediante el uso de estas herramientas de análisis, las usuarias pueden obtener una comprensión más profunda de los textos.

3. Resumen del proyecto

En este proyecto se creó una aplicación web que servirá para analizar un texto en el navegador mostrando una serie de indicadores y métricas específicas sobre caracteres, letras, números, etc. El texto se recibe como input por el usuario. Se utilizó HTML, CSS y JavaScript.

4. Funcionalidades

El listado de funcionalidades es el siguiente:

1. La aplicación debe permitir a la usuaria ingresar un texto escribiéndolo en un cuadro de texto.

2. La aplicación debe calcular las siguientes métricas y actualizar el resultado en tiempo real a medida que la usuaria escribe su texto:

   • Recuento de palabras: la aplicación debe poder contar el número de palabras en el texto de entrada y mostrar este recuento a la usuaria
   • Recuento de caracteres: la aplicación debe poder contar el número de caracteres en el texto de entrada, incluidos espacios y signos de puntuación, y mostrar este recuento a la usuaria.
   • Recuento de caracteres excluyendo espacios y signos de puntuación: la aplicación debe poder contar el número de caracteres en el texto de entrada, excluyendo espacios y signos de puntuación, y mostrar este recuento a la usuaria.
   • Recuento de números: la aplicación debe contar cúantos números hay en el texto de entrada y mostrar este recuento a la usuaria.
   • Suma total de números: la aplicación debe sumar todos los números que hay en el texto de entrada y mostrar el resultado a la usuaria.
   • Longitud media de las palabras: la aplicación debe calcular la longitud media de las palabras en el texto de entrada y mostrársela a la usuaria.

3. La aplicación debe permitir limpiar el contenido de la caja de texto haciendo clic en un botón.

5. Boilerplate

La lógica del proyecto debe estar implementada completamente en JavaScript. En este proyecto NO está permitido usar librerías o frameworks, solo JavaScript puro también conocido como Vanilla JavaScript.

Para comenzar este proyecto tendrás que hacer un fork y clonar este repositorio que contiene un boilerplate con tests (pruebas). Un boilerplate es la estructura básica de un proyecto que sirve como un punto de partida con archivos y configuración inicial de dependencias y tests.

El boilerplate que les damos contiene esta estructura:

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

Descripción de scripts / archivos

• README.md: debes modificarlo para explicar la información necesaria para el uso de tu aplicación web, así como una introducción a la aplicación, su funcionalidad y decisiones de diseño que tomaron.

• .github/workflows: esta carpeta contine la configuracion para la ejecution de Github Actions. No debes modificar esta carpeta ni su contenido.

• docs/images: contiene las imagenes de este README.

• read-only/: esta carpeta contiene las pruebas de criterios mínimos de aceptación y end-to-end. No debes modificar esta carpeta ni su contenido.

• src/index.html: este es el punto de entrada a tu aplicación. Este archivo debe contener tu HTML.

• src/style.css: este archivo debe contener las reglas de estilo. Queremos que escribas tus propias reglas, por eso NO está permitido el uso de frameworks de CSS (Bootstrap, Materialize, etc).

• src/analyzer.js: acá debes implementar el objeto analyzer, el cual ya está exportado en el boilerplate. Este objeto (analyzer) debe contener seis métodos:

  • analyzer.getWordCount(text): esta función debe retornar el recuento de palabras que se encuentran en el parámetro text de tipo string.
  • analyzer.getCharacterCount(text): esta función debe retornar el recuento de caracteres que se encuentran en el parámetro text de tipo string.
  • analyzer.getCharacterCountExcludingSpaces(text): esta función debe retornar el recuento de caracteres excluyendo espacios y signos de puntuación que se encuentran en el parámetro text de tipo string.
  • analyzer.getNumberCount(text): esta función debe retornar cúantos números se encuentran en el parámetro text de tipo string.
  • analyzer.getNumberSum(text): esta función debe retornar la suma de todos los números que se encuentran en el parámetro text de tipo string.
  • analyzer.getAverageWordLength(text): esta función debe retornar la longitud media de palabras que se encuentran en el parámetro text de tipo string. En este caso usa 2 dígitos decimales.

  Para ejemplo de uso de cada función recomendamos ver el archivo test/analyzer.spec.js.

  Nota: para simplificar las funcionalidades, definiremos las palabras como un grupos de caracteres separados por espacios. Por ejemplo las palabras del texto de entrada ¡Si, Tú puedes hacerlo! son cuatro:

  • ¡Si,
  • Tú
  • puedes
  • hacerlo!

• src/index.js: acá debes escuchar eventos del DOM, invocar los métodos del objeto analyzer según sea necesario y actualizar el resultado en la UI (interfaz de usuaria).

• test/analyzer.spec.js: este archivo contiene las pruebas unitarias para los métodos del objeto analyzer.

---

Deploy

Hacer que los sitios estén publicados (o desplegados) para que usuarias de la web puedan acceder a él es algo común en proyectos de desarrollo de software.

En este proyecto, se utilizó Github Pages para desplegar nuestro sitio web.

6. Criterios de aceptación mínimos del proyecto

A continuación encontrarás los criterios de aceptación mínimos del proyecto relacionados con cada objetivo de aprendizaje.

HTML

• Uso de HTML semántico

  • [X] La aplicación tiene un encabezado conformado por un <header> que es padre de un <h1> con texto Analizador de texto. Para que puedas practicar más, estos elementos no pueden tener atributos id, ni name, ni class.

  • [X] La aplicación usa un <textarea> con un el atributo name en el valor user-input para permitir a la usuaria ingresar un texto. Para que puedas practicar más, este elemento no puede tener atributos id, ni class.

  • [X] La aplicación usa un <ul> con 6 hijos <li>, uno para mostrar cada métrica. Para que puedas practicar más, estos elementos no pueden tener atributos id ni name ni hijos.

  • [X] El <li> para mostrar el recuento de palabras debe tener un atributo data-testid con valor word-count.

  • [X] El <li> para mostrar el recuento de caracteres debe tener un atributo data-testid con valor character-count.

  • [X] El <li> para mostrar el recuento de caracteres excluyendo espacios y signos de puntuación debe tener un atributo data-testid con valor character-no-spaces-count.

  • [X] El <li> para mostrar el recuento de números debe tener un atributo data-testid con valor number-count.

  • [X] El <li> para mostrar la suma total de números debe tener un atributo data-testid con valor number-sum.

  • [X] El <li> para mostrar la longitud media de palabras debe tener un atributo data-testid con valor word-length-average.

  • [X] La aplicación tiene un pie de página conformado por un <footer> que es padre de un <p> que tiene como texto el nombre de la estudiante desarrolladora de la aplicación. Para que puedas practicar más, estos elementos no pueden tener atributos id, ni name, ni class.

  • [X] La aplicación usa un <button> con el atributo id en el valor reset-button para permitir a la usuaria, mediante un clic, limpiar el contenido de la caja de texto.

CSS

• Uso de selectores de CSS

  • [X] La aplicación usa selectores CSS de tipo para darle estilo al <header> y al <footer>.

  • [X] La aplicación usa selectores CSS de class para darle estilo a los <li> descrito anteriormente.

  • [X] La aplicación usa selectores de atributo para darle estilo al <textarea> usando el atributo name.

  • [X] La aplicación usa selectores CSS de ID para darle estilo al <button> con el atributo id en el valor reset-button.

• Modelo de caja (box model): border, margen, padding

  • [X] Las clases css de los <li> hijos del <ul> definen un estilo usando las propiedades del modelo de caja, (background, border, margin, padding).

Web APIs

• Uso de selectores del DOM

  • [X] La aplicación usa el selector del DOM querySelector.

  • [X] La aplicación usa el selector del DOM getElementById.

• Manejo de eventos del DOM (listeners, propagación, delegación)

  • [X] La aplicación registra un Event Listener para escuchar el evento input del <textarea> para actualizar las métricas cuando se haga escriba en el cuadro de texto.

  • [X] La aplicación registra un Event Listener para escuchar el evento click del <button> que limpia el contenido de la caja de texto.

• Manipulación dinámica del DOM

  • [X] La aplicación actualiza el atributo textContent o innerHTML de los <li> que mostrar las métricas del texto.

JavaScript

• Tipos de datos primitivos

  • [X] La aplicación convierte valores tipo string a tipo number.

• Strings (cadenas de caracteres)

  • [X] La aplicación usa métodos para manipular strings como split, trim o replace.

• Variables (declaración, asignación, ámbito)

  • [X] La aplicación declara variables con let y const.

  • [X] La aplicación NO declara variables con var.

• Uso de condicionales (if-else, switch, operador ternario, lógica booleana)

  • [X] La aplicación usa el statement if..else para evaluar condiciones.

• Uso de bucles/ciclos (while, for, for..of)

  • [X] La aplicación usa el statement for para crear un bucle.

• Funciones (params, args, return)

  • [X] El objeto analyzer contiene un método getWordCount para calcular el recuento de palabras de un texto.

  • [X] El objeto analyzer contiene un método getCharacterCount para calcular el recuento de caracteres de un texto.

  • [X] El objeto analyzer contiene un método getCharacterCountExcludingSpaces para calcular el recuento de caracteres excluyendo espacios y signos de puntuación de un texto.

  • [X] El objeto analyzer contiene un método getNumbersCount para contar cúantos números hay en un texto.

  • [X] El objeto analyzer contiene un método getNumbersSum para la suma longitud media de los números en un texto.

  • [X] El objeto analyzer contiene un método getAverageWordLength para calcular la longitud media de las palabras en un texto.

• Pruebas unitarias (unit tests)

  • [X] Se pasan todas las pruebas unitarias.

• Módulos de ECMAScript (ES Modules)

  • [X] La aplicación usan import y export para importar y exportar valores desde un modulo JavaScript.

• Uso de linter (ESLINT)

  • [X] Al ejecutar el linter no se muestran errores de formato y estilo.

• Uso de identificadores descriptivos (Nomenclatura y Semántica)

  • [X] En el código se utilizan identificadores descriptivos para variables y funciones.

Control de Versiones (Git y GitHub)

• GitHub: Creación de cuenta y repos, configuración de llaves SSH

  • [X] La estudiante creó una cuenta en Github.

  • [X] La estudiante configuró su cuenta de Github con una llave SSH.

• Git: Control de versiones con git (clone, add, commit, push)

  • [X] La estudiante creó un fork para su proyecto.

  • [X] La estudiante clonó su repositorio usando una llave SSH.

  • [X] La estudiante creó commits y los guardó en Github.

• GitHub: Despliegue con GitHub Pages

  • [X] La aplicación está desplegada en Github Pages.

Centrado en la usuaria

• Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

• Diseñar en distintos niveles de fidelidad

  • [X] La estudiante creó prototipos de baja fidelidad para la UI (interfaz gŕafica).

• Seguir los principios básicos de diseño visual

  • [X] Se tuvieron en cuenta las reglas básica del diseño visual para diseñar la UI (interfáz gráfica)

7. Pruebas

Este proyecto cuenta con 3 conjuntos de pruebas.

Pruebas unitarias

Una prueba unitaria es una técnica de prueba de software en la que se comprueba que cada componente individual de un programa o sistema funciona correctamente de manera aislada. En otras palabras, se prueba cada unidad de código por separado para asegurarse de que cumpla con los requisitos y especificaciones.

Las pruebas unitarias de este proyecto ejecutarán los métodos getWordCount, getCharacterCount, getCharacterCountExcludingSpaces, getNumbersCount, getNumbersSum y getAverageWordLength con diferentes argumentos y se confirmará que los valores retornados sean los esperados.

Puedes ejecutar estas pruebas con el comando npm run test como se muestra en la siguiente imagen:

El boilerplate incluye tareas que ejecutan eslint y htmlhint para verificar el HTML y JavaScript con respecto a una guías de estilos. Ambas tareas se ejecutan automáticamente antes de ejecutar las pruebas unitarias cuando usamos el comando npm run test. En el caso de JavaScript estamos usando un archivo de configuración de eslint que se llama .eslintrc que contiene un mínimo de información sobre el parser que usar (qué version de JavaScript/ECMAScript), el entorno (browser en este caso) y las reglas recomendadas (eslint:recommended). En cuanto a reglas/guías de estilo en sí, usaremos las recomendaciones por defecto de tanto eslint como htmlhint.

Pruebas de criterios mínimos de aceptación

Estas pruebas analizarán los archivos index.html, index.js, analyzer.js y style.css para verificar que cumples con los criterios minimos de aceptacion. Cada criterio esta relacionado con un objetivo de aprendizaje.

Puedes ejecutar todas estas pruebas con el comando npm run test:oas como se muestra en la siguiente imagen:

Puedes ejecutar las pruebas de cada grupo de objetivos de aprendizaje de manera individual con los siguientes comandos:

• npm run test:oas-html
• npm run test:oas-css
• npm run test:oas-web-api
• npm run test:oas-js

Pruebas end-to-end

Una prueba end-to-end (E2E) es una técnica de prueba de software en la que se verifica el funcionamiento de todo el sistema desde el inicio hasta el final. En otras palabras, se prueba el flujo completo del software, simulando la interacción de la usuaria con la aplicación, para asegurarse de que todas las partes del sistema funcionan correctamente en conjunto.

Puedes ejecutar estas pruebas con el comando npm run test:e2e como se muestra en la siguiente imagen:

Github actions

Este repositorio usa una GitHub Action para ejecutar automáticamente las pruebas unitarias, pruebas de criterios mínimos de aceptación y y pruebas end-to-end cada vez que se hagas un push en la rama main de tu repositorio.

Puedes consultar el resultado de esta Github Action en la pestaña Actions de tu repositorio en Github como se muestra en la siguiente imagen:

8. Consideraciones para pedir tu Project Feedback

Antes de agendar tu Project Feedback con un coach, asegúrate que tu proyecto:

• [X] Cumple con todos los criterios mínimos de aceptación al ejecutar npm run test:oas
• [X] Cumple con todas las pruebas unitarias al ejecutar npm run test
• [X] Cumple con todas las pruebas end to end al ejecutar npm run test:e2e
• [X] Esta libre de errores de eslint al ejecutar npm run test
• [X] Está subido a GitHub.
• [X] Esta desplegado en GitHub Pages.
• [X] Tiene un README con la definición del producto.

9. Objetivos de aprendizaje

HTML

• [x] Uso de HTML semántico

  Links

  * [HTML semántico](https://curriculum.laboratoria.la/es/topics/html/html5/semantic-html) * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)

CSS

• [X] Uso de selectores de CSS

  Links

  * [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/css/intro-css) * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors)

• [X] Modelo de caja (box model): borde, margen, padding

  Links

  * [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/css/boxmodel-and-display) * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/)

Web APIs

• [X] Uso de selectores del DOM

  Links

  * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/dom/1-dom-methods-selection) * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)

• [X] Manejo de eventos del DOM (listeners, propagación, delegación)

  Links

  * [Introducción a eventos - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events) * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener) * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/removeEventListener) * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event)

• [X] Manipulación dinámica del DOM

  Links

  * [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild) * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement) * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode) * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML) * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent)

JavaScript

• [X] Tipos de datos primitivos

  Links

  * [Valores primitivos - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Data_structures#valores_primitivos)

• [X] Strings (cadenas de caracteres)

  Links

  * [Strings](https://curriculum.laboratoria.la/es/topics/javascript/strings) * [String — Cadena de caracteres - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String)

• [X] Variables (declaración, asignación, ámbito)

  Links

  * [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/basics/values-variables-and-types) * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/basics/variables)

• [X] Uso de condicionales (if-else, switch, operador ternario, lógica booleana)

  Links

  * [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/flow-control/conditionals-and-loops) * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals)

• [X] Uso de bucles/ciclos (while, for, for..of)

  Links

  * [Bucles (Loops)](https://curriculum.laboratoria.la/es/topics/javascript/flow-control/loops) * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration)

• [X] Funciones (params, args, return)

  Links

  * [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/flow-control/functions) * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/functions/classic) * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/functions/arrow) * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions)

• [X] Pruebas unitarias (unit tests)

  Links

  * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started)

• [X] Módulos de ECMAScript (ES Modules)

  Links

  * [import - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import) * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export)

• [X] Uso de linter (ESLINT)

• [X] Uso de identificadores descriptivos (Nomenclatura y Semántica)

Control de Versiones (Git y GitHub)

• [X] Git: Instalación y configuración

• [X] Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)

• [X] GitHub: Creación de cuenta y repos, configuración de llaves SSH

• [X] GitHub: Despliegue con GitHub Pages

  Links

  * [Sitio oficial de GitHub Pages](https://pages.github.com/)

Centrado en el usuario

• [X] Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

• [X] Diseñar en distintos niveles de fidelidad

• [X] Seguir los principios básicos de diseño visual

10. Funcionamiento

• Conteo de palabras: utiliza split para separar las palabras en cada espacio vacío. Además emplea un if para verificar que la variable existe y un bucle for para ir sumando las parabras.
• Conteo de caracteres: utiliza .length para encontrar el total de caracteres
• Conteo de caracteres sin espacios: utiliza un regex para eliminar los caracteres especiales
• Promedio de longitud de palabra: utiliza el total de caracteres y los divide entre el conteo de palabras obtenido anteriormente.
• Contar numeros: identifica los números que no están dentro de una palabra e identifica los enteros o los decimales por medio del . Ademas usa "o vacio" para asegurarse que si no hay numeros tenga un array.
• Sumar los números: usa el mismo regex anterior con un bucle for of, porque se debe acumular los numeros en una matriz para poder irlos sumando.