From 470049f3605a67012bde5629f13541e898845bd4 Mon Sep 17 00:00:00 2001 From: ivy Date: Mon, 27 May 2024 12:56:18 -0500 Subject: [PATCH] chore(init): Adds project files from curriculum --- .babelrc | 3 + .editorconfig | 8 + .eslintignore | 1 + .eslintrc | 18 + .github/workflows/playwright.yml | 27 + .gitignore | 8 + README.md | 1057 ++++++++++++++++++++++ docs/01-milestone.md | 83 ++ docs/02-milestone.md | 104 +++ docs/03-milestone.md | 150 +++ docs/04-milestone.md | 81 ++ explaindev.json | 4 + package.json | 52 ++ playwright.config.js | 47 + src/data/dataset.js | 378 ++++++++ src/dataFunctions.js | 9 + src/index.html | 11 + src/main.js | 6 + src/style.css | 0 src/view.js | 6 + test/.eslintrc | 5 + test/data.js | 5 + test/dataFunctions.spec.js | 18 + tests-read-only/.eslintrc | 6 + tests-read-only/e2e/app.spec.js | 155 ++++ tests-read-only/oa/oa-css.spec.js | 202 +++++ tests-read-only/oa/oa-html.spec.js | 123 +++ tests-read-only/oa/oa-javascript.spec.js | 149 +++ tests-read-only/oa/oa-prompting.spec.js | 130 +++ tests-read-only/oa/oa-web-api.spec.js | 164 ++++ thumb.png | Bin 0 -> 494871 bytes 31 files changed, 3010 insertions(+) create mode 100644 .babelrc create mode 100644 .editorconfig create mode 100644 .eslintignore create mode 100644 .eslintrc create mode 100644 .github/workflows/playwright.yml create mode 100644 .gitignore create mode 100644 README.md create mode 100644 docs/01-milestone.md create mode 100644 docs/02-milestone.md create mode 100644 docs/03-milestone.md create mode 100644 docs/04-milestone.md create mode 100644 explaindev.json create mode 100644 package.json create mode 100644 playwright.config.js create mode 100644 src/data/dataset.js create mode 100644 src/dataFunctions.js create mode 100644 src/index.html create mode 100644 src/main.js create mode 100644 src/style.css create mode 100644 src/view.js create mode 100644 test/.eslintrc create mode 100644 test/data.js create mode 100644 test/dataFunctions.spec.js create mode 100644 tests-read-only/.eslintrc create mode 100644 tests-read-only/e2e/app.spec.js create mode 100644 tests-read-only/oa/oa-css.spec.js create mode 100644 tests-read-only/oa/oa-html.spec.js create mode 100644 tests-read-only/oa/oa-javascript.spec.js create mode 100644 tests-read-only/oa/oa-prompting.spec.js create mode 100644 tests-read-only/oa/oa-web-api.spec.js create mode 100644 thumb.png diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000..34bc6d2c --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "plugins": ["@babel/plugin-transform-modules-commonjs"] +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..1923d410 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,8 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..43df0212 --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +src/data diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 00000000..3d062a23 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,18 @@ +{ + "env": { + "browser": true + }, + "parserOptions": { + "ecmaVersion": 2018, + "sourceType": "module" + }, + "extends": "eslint:recommended", + "rules": { + "no-console": "warn", + "import/extensions": 0, + "no-var": "error", + "prefer-const": "error", + "eqeqeq": "error", + "indent": ["error", 2] + } +} diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 00000000..5156520e --- /dev/null +++ b/.github/workflows/playwright.yml @@ -0,0 +1,27 @@ +name: Playwright Tests +on: + push: + branches: [ main ] + pull_request: + branches: [ main ] +jobs: + test: + timeout-minutes: 60 + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 18 + - name: Install dependencies + run: npm ci + - name: Install Playwright Browsers + run: npx playwright install --with-deps + - name: Run Playwright tests + run: npx playwright test + - uses: actions/upload-artifact@v3 + if: always() + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..3d7966e7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,8 @@ +.DS_Store +*.swp +coverage/ +node_modules/ +/test-results/ +/playwright-report/ +/playwright/.cache/ +.vscode/ diff --git a/README.md b/README.md new file mode 100644 index 00000000..fe985489 --- /dev/null +++ b/README.md @@ -0,0 +1,1057 @@ +# Dataverse + +## Índice + +* [1. Preámbulo](#1-preámbulo) +* [2. Resumen del proyecto](#2-resumen-del-proyecto) +* [3. Consideraciones generales](#3-consideraciones-generales) +* [4. Funcionalidades](#4-funcionalidades) +* [5. Consideraciones técnicas](#5-consideraciones-técnicas) +* [6. Hitos](#6-hitos) +* [7. Criterios de aceptación mínimos del proyecto](#7-criterios-de-aceptación-mínimos-del-proyecto) +* [8. Hacker edition](#8-hacker-edition) +* [9. Objetivos de aprendizaje](#9-objetivos-de-aprendizaje) +* [10. Pistas, tips y lecturas complementarias](#10-pistas-tips-y-lecturas-complementarias) +* [11. Consideraciones para pedir tu Project Feedback](#11-consideraciones-para-pedir-tu-project-feedback) + +*** + +## 1. Preámbulo + +Según [Forbes](https://www.forbes.com/sites/bernardmarr/2018/05/21/how-much-data-do-we-create-every-day-the-mind-blowing-stats-everyone-should-read), +el 90% de la data que existe hoy ha sido creada durante los últimos dos años. +Cada día generamos 2.5 millones de terabytes de datos, una cifra sin +precedentes. + +No obstante, los datos por sí mismos son de poca utilidad. Para que esas +grandes cantidades de datos se conviertan en **información** fácil de leer para +las usuarias, necesitamos entender y procesar estos datos. Una manera simple de +hacerlo es creando _interfaces_ y _visualizaciones_. + +En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte +izquierda se puede construir una interfaz amigable y entendible por las +usuarias, al lado derecho. + +![pokemon-data-to-ui](https://user-images.githubusercontent.com/12631491/218505816-c6d11758-9de4-428f-affb-2a56ea4d68c4.png) + +## 2. Resumen del proyecto + +En este proyecto **construirás una _página web_ para visualizar un +_conjunto (set) de datos_** que vas a generar con [prompting](https://www.itmadrid.com/que-es-un-prompt-en-inteligencia-artificial-ia/). +Esta página web se adecuará a lo que descubras que tu usuaria +necesita. + +Además, en este proyecto utilizarás herramientas de +[inteligencia artificial](https://es.wikipedia.org/wiki/Inteligencia_artificial) +como [ChatGPT](https://openai.com/chatgpt), [ExplainDev](https://explain.dev/), +entre otras para generar un set de datos en un archivo javascript. + +El propósito de generar los datos en esta manera es brindarte la oportunidad de +adentrarte en el empleo de herramientas impulsadas por la inteligencia +artificial, así como en [técnicas de prompting](https://learnprompting.org/es/docs/intro). + +Como entregable final tendrás una página web que permita **visualizar la data, +filtrarla, ordenarla y calcular alguna estadística**. Con estadística +nos referimos a distintos cálculos que puedes hacer con los datos para mostrar +información aún más relevante a las usuarias (promedio, el valor máximo +o mínimo, etc). + +## 3. Consideraciones generales + +* Este proyecto se debe resolver en duplas. +* El rango de tiempo estimado para completar el proyecto es de 4 a 5 Sprints. +* El tiempo estimado que deberías dedicar a la [generación de los datos](#generar-los-datos) + es de máximo un sprint. Además, al final del proyecto deberás presentar + un [screenshot del prompt utilizado](#prompt-utilizado). +* Si ves que te va a tomar más tiempo, + deberás utilizar los datos de ejemplo que los vas a encontrar en + esta ruta: `./src/data/dataset.js`. +* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la + interfaz será desplegada usando [GitHub Pages](https://pages.github.com/). + +## 4. Funcionalidades + +Como entregable final tendrás una página web que permita **visualizar la data, +filtrarla, ordenarla y calcular alguna estadística**. + +Aquí definimos en más detalle las funcionalidades mínimas que debe +tener: + +* La aplicación debe permitir a la usuaria ver los items de la data en una visualización, + que puede ser [tipo tarjetas](http://www.uxables.com/diseno-ux-ui/que-es-y-como-disenar-una-card/) + o cualquier otra forma que tú decidas como la adecuada (pero desde aquí + referimos a los items como "tarjetas"). **Cada una de las tarjetas debe estar + contenida en un elemento `
  • ` y estos a su vez contenido en + un elemento `