Skip to content

Commit

Permalink
Cambios generales
Browse files Browse the repository at this point in the history
  • Loading branch information
@Davichobits
Davichobits committed Oct 11, 2023
1 parent c6fe067 commit 86b9494
Showing 1 changed file with 79 additions and 92 deletions.
171 changes: 79 additions & 92 deletions projects/03-dataverse-chat/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,35 +167,36 @@ La lógica del proyecto debe estar implementada completamente en JavaScript
(ES6), HTML y CSS. En este proyecto NO está permitido usar librerías o
frameworks, solo [vanilla JavaScript](https://medium.com/laboratoria-how-to/vanillajs-vs-jquery-31e623bbd46e).

El _boilerplate_ contiene una estructura de archivos como punto de partida así
como toda la configuración de dependencias:
El _boilerplate_ que viene con el proyecto es una estructura inicial. Ustedes
deben ir agregando más archivos conforme vayan avanzando en su proyecto.
La siguiente es una estructura de archivos que recomendamos:

```text
.
├── src
| ├── components
| ├── data
| | └── data.json (La que hayas generado con la IA)
| | └── dataset.js (La que hayas generado con la IA)
| ├── lib
| | └── dataFunctions.js
| ├── views
| ├── dataFunctions.js
| ├── index.html
| ├── main.js
| ├── views.js
| ├── index.js
| ├── router.js
| └── style.css
├── test
| └── data.js
| └── dataFunctions.spec.js
| └── tests-read-only
| └── ejemplo.spec.js (Los tests de tus funciones y componentes)
├── README.md
└── package.json
```

### `src/components`

Esta carpeta contendrá archivos JavaScript y/o archivos de plantillas HTML
que representan componentes reutilizables de tu aplicación. Estos componentes
Esta carpeta contendrá archivos JavaScript
que representan [componentes](https://lenguajejs.com/vuejs/componentes/que-es-un-componente/)
reutilizables de tu aplicación. Estos componentes
pueden ser elementos de la interfaz de usuario que se utilizan en varias partes
de tu aplicación. Organizar tus componentes de esta manera ayuda a mantener un
código más modular y reutilizable.
Expand All @@ -207,104 +208,61 @@ o los datos que generarías con ayuda de la inteligencia artificial).

### `src/lib`

En esta carpeta almacerás los módulos que te permitan conterte con la inteligencia
artificial.
En esta carpeta, crearás módulos que contengan funcionalidades no relacionadas
al DOM, es decir, funciones puras. Aquí también podrás incluir el archivo
`dataFunctions.js` que contiene las funciones que te permiten filtrar,
ordenar y hacer cálculos agregados. También podrás crear archivos con
las funciones que
interactúen con la API de inteligencia artificial o utilidades destinadas
a almacenar datos en el local storage.

### `src/views`

Esta carpeta generalmente contiene archivos que representan las diferentes
vistas o páginas de tu aplicación. Cada vista puede tener su propio archivo
JavaScript, HTML y CSS. Organizar tus vistas de esta manera facilita la
navegación y la gestión de la lógica de la interfaz de usuario.

### `src/dataFunctions.js`

El corazón de este proyecto es la manipulación de datos a través de arreglos
y objetos.

Este archivo va a contener toda la funcionalidad que corresponda
a obtener, procesar y manipular datos (tus funciones). Por ejemplo:

* `filterData(data, filterBy, value)`: esta función recibe tres parámetros.
El primer parámetro, `data`, nos entrega los datos.
El segundo parámetro, `filterBy`, nos dice con respecto a cuál de los campos de
la data se quiere filtrar.
El tercer parámetro, `value`, indica el valor de campo que queremos filtrar.

* `sortData(data, sortBy, sortOrder)`: esta función `sort` u ordenar
recibe tres parámetros.
El primer parámetro, `data`, nos entrega los datos.
El segundo parámetro, `sortBy`, nos dice con respecto a cuál de los campos de
la data se quiere ordenar.
El tercer parámetro, `sortOrder`, indica si se quiere ordenar de manera
ascendente o descendente.

* `computeStats(data)`: la función `compute` o calcular, nos permitirá hacer
cálculos estadísticos básicos para ser mostrados de acuerdo a la data
proporcionada, esta función debe usar el método reduce.

Estas funciones deben ser [_puras_](https://medium.com/laboratoria-developers/introducci%C3%B3n-a-la-programaci%C3%B3n-funcional-en-javascript-parte-2-funciones-puras-b99e08c2895d)
e independientes del DOM. Estas funciones serán después usadas desde el archivo
`src/main.js`, al cargar la página, y cada vez que la usuaria interactúe
(click, filtrado, ordenado, ...).
JavaScript, que exporta una función que es responsable de generar
los elementos del DOM.

### `src/index.html`

Como en el proyecto anterior, existe un archivo `index.html`. Como ya sabes,
acá va la página que se mostrará a la usuaria. También nos sirve para indicar
qué scripts se usarán y unir todo lo que hemos hecho.

### `src/main.js`
Como en el proyecto anterior, existe un archivo `index.html`. En este archivo
HTML encontrarás un elemento DOM `<div id='root'></div>` donde vas a
renderizar las diferentes vistas de tu aplicación.

Recomendamos usar `src/main.js` para todo tu código que tenga que ver con
mostrar los datos en la pantalla. Con esto nos referimos básicamente a la
interacción con el DOM. Operaciones como creación de nodos, registro de
manejadores de eventos (_event listeners_ o _event handlers_).
### `src/index.js`

Esta no es la única forma de dividir tu código, puedes usar más archivos y
carpetas, siempre y cuando la estructura sea clara para tus compañeras.
El punto de partida para tu SPA sera el archivo `src/index.js`. Acá encontrarás
algunas instrucciones y comentrarios para guiarte en el inicio del desarrollo
de tu aplicación.

En este archivo encontrarás una serie de _imports_ listos para _cargar_
las diferentes fuentes de datos.
### `src/router.js`

Por ejemplo, lost datos con los que vas a trabajar,
los encontrarás en la siguiente línea:

```js
import data from './data/dataset.js';
```
En este archivo vas a manejar el enrutamiento de tu aplicación. Es un archivo
que debes crearlo por tu cuenta.

### `test/data.js`
### `src/style.css`

En esta archivo puedes construir y exportar data "mock" para usar en los tests.
Es mas fácil probar un arreglo de 5 elementos de un arreglo de 24, por eso
vas a crear una muestra de la data que quieres probar. Como mínimo
debes exportar un variable se llama `data`, pero puedes definir y exportar mas
si sea necesario para tus tests.
Es un archivo que debes crearlo por tu cuenta para agregar los estilos que
necesites para tu aplicación.

### `src/view.js`
### `src/test`

Para alcanzar mejor separación de responsabilidades en el código este
archivo debe tener todas las funciones que utilizara para renderizar
los elementos dinámicamente.

Al menos se requeriere una función obligatoria:

* `renderItems(data)`: esta función recibe el arreglo de data para renderizar
los elementos de cada item, y debería volver un elemento DOM o
un string de HTML.
Esta carpeta contiene los tests de tus funciones y componentes. Por ejemplo
los tests de dataFunctions deben estar aquí.

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

### Criterios del proyecto
Además de las funcionalidades que definimos en la sección de
[Funcionalidades](#3-funcionalidades), tu proyecto debe cumplir con los
siguientes requisitos:

#### Definición del producto
### Definición del producto

Documenta brevemente tu trabajo en el archivo `README.md` de tu repositorio,
contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve
el problema (o problemas) que tiene tu usuaria.

#### Historias de usuaria
### Historias de usuaria

Una vez que entiendas las necesidades de tus usuarias, escribe las [Historias
de Usuaria](https://es.wikipedia.org/wiki/Historias_de_usuario) que representen
Expand All @@ -321,9 +279,9 @@ En la medida de lo posible, termina una Historia de Usuaria antes de pasar
a la siguiente (cumpliendo con la Definición de Terminado y los Criterios
de Aceptación).

#### Diseño de la Interfaz de Usuaria
### Diseño de la Interfaz de Usuaria

##### Prototipo de baja fidelidad
#### Prototipo de baja fidelidad

Durante tu trabajo deberás haber hecho e iterado bocetos (_sketches_) de tu
solución usando papel y lápiz. Te recomendamos tomar fotos de todas las
Expand All @@ -332,7 +290,7 @@ iteraciones que hagas, que las subas a tu repositorio y las menciones en tu

Recuerda pedir feedback de tu prototipo a tus compañeras y/o coaches.

##### Prototipo de alta fidelidad
#### Prototipo de alta fidelidad

Lo siguiente es diseñar tu Interfaz de Usuaria (UI por sus siglas en inglés -
_User Interface_). Para eso debes aprender a utilizar alguna herramienta de
Expand All @@ -347,22 +305,22 @@ diseño debe seguir los fundamentos de _visual design_.

Recuerda pedir feedback de tu prototipo a tus compañeras y/o coaches.

#### Testeos de usabilidad
### Testeos de usabilidad

Durante el reto deberás hacer _tests_ de usabilidad con distintos usuarias,
y con base en los resultados, deberás iterar tus diseños. Cuéntanos
qué problemas de usabilidad detectaste a través de los _tests_ y cómo los
mejoraste en tu propuesta final.

#### Implementación de la Interfaz de Usuaria (HTML/CSS/JS)
### Implementación de la Interfaz de Usuaria (HTML/CSS/JS)

Luego de diseñar tu interfaz de usuaria deberás trabajar en su implementación.
**No** es necesario que construyas la interfaz exactamente como la diseñaste.
Tu tiempo de hacking es escaso, así que deberás priorizar.

Revisa [las funcionalidades](#3-funcionalidades) que el proyecto pide del interfaz.

#### Pruebas unitarias
### Pruebas unitarias

El _boilerplate_ de este proyecto no incluye Pruebas Unitarias (_tests_), así es
que tendrás que escribirlas tú para las funciones encargadas de _procesar_,
Expand Down Expand Up @@ -393,6 +351,37 @@ Súmate al canal de Slack
[#project-dataverse-chat](https://claseslaboratoria.slack.com/archives/C03MV35EP5M)
para conversar y pedir ayuda del proyecto.

Te sugerimos algunas tareas para dar inicio al proyecto. No es necesario
abordarlas de manera secuencial, y puedes llevarlas a cabo en paralelo
mientras avanzas con la planificación de las Historias de Usuario:

1. Diseño de Wireframes y Prototipo de Baja Fidelidad:
Comienza por diseñar wireframes o prototipos de baja fidelidad para capturar
los requisitos funcionales de tu proyecto. Es recomendable comenzar con un
enfoque "mobile first" para garantizar la usabilidad en dispositivos móviles,
y luego extender la atención a pantallas más grandes, como las de escritorio.

2. Comprende los Conceptos de SPA (Single Page Application) y Enrutamiento:
Antes de comenzar a codificar, asegúrate de comprender los conceptos de una
Aplicación de Página Única (SPA) y el enrutamiento de páginas. Esto te
permitirá crear una experiencia de usuario fluida y dinámica. Investiga
las mejores prácticas y las herramientas disponibles para implementar un
SPA en tu proyecto.

3. Preparación de la Estructura del Proyecto:
Organiza tu proyecto creando la estructura de directorios necesaria y
configurando un sistema de enrutamiento básico para cambiar dinámicamente
entre dos vistas. Asegúrate de que tu proyecto tenga una arquitectura
limpia y escalable.

4. Integración de Dataverse:
Si tienes la intención de utilizar código de Dataverse en tu proyecto,
asegúrate de importar los archivos relevantes, como `dataset.js`,
`dataFunctions.js`, `main.js`, y `view.js`, junto con sus respectivas
pruebas. Ten en cuenta que `main.js` y `view.js` requerirán una
refactorización para adaptarse a las vistas y componentes específicos
de tu proyecto.

Cuando ya estés lista para codear, te sugerimos empezar de esta manera:

1. Una de las integrantes del equipo debe realizar un :fork_and_knife:
Expand Down Expand Up @@ -445,8 +434,6 @@ Cuando ya estés lista para codear, te sugerimos empezar de esta manera:

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

* [ ] Cumple con todos los criterios mínimos de aceptación al ejecutar `npm run test:oas`
* [ ] Cumple con todas las pruebas _end to end_ al ejecutar `npm run test:e2e`
* [ ] Cumple con todas las pruebas unitarias al ejecutar `npm run test` y
que tienen una cobertura del 70% de _statements_ (_sentencias_),
_functions_ (_funciones_), _lines_ (_líneas_), y _branches_
Expand All @@ -468,7 +455,7 @@ Antes de agendar tu Project Feedback con un coach, asegúrate que tu proyecto:
- [ ] Permite conversar con el personaje o entidad de la data a través
de un chat.
- [ ] Permite chatear de forma grupal con todas las entidades de la data.
- [ ] Es _responsive_
- [ ] Es _responsive_ y fue realizado usando la metodología mobile first.

Recuerda que debes hacer una autoevaluación de _objetivos de aprendizaje_ y
_life skills_ desde tu dashboard de estudiante.
Expand Down

0 comments on commit 86b9494

Please sign in to comment.