--- id: 5a8b073d06fa14fcfde687aa title: Rastreador de ejercicios challengeType: 4 forumTopicId: 301505 dashedName: exercise-tracker --- # --description-- Construye una aplicación full stack de JavaScript que sea funcionalmente similar a esta: . Trabajar en este proyecto implicará escribir tu código utilizando uno de los siguientes métodos: - Clona [este repositorio de GitHub](https://github.com/freeCodeCamp/boilerplate-project-exercisetracker/) y completa tu proyecto localmente. - Usa [nuestro proyecto de inicio en Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-exercisetracker) para completar tu proyecto. - Utiliza un constructor de sitios de tu elección para completar el proyecto. Asegúrate de incorporar todos los archivos de nuestro repositorio de GitHub. Cuando hayas terminado, asegúrate de que un demo funcional de tu proyecto esté alojado en algún lugar público. Luego, envía la URL en el campo `Solution Link`. Opcionalmente, también envía un enlace al código fuente de tu proyecto en el campo `GitHub Link`. # --instructions-- Tus respuestas deben tener las siguientes estructuras. Ejercicio: ```js { username: "fcc_test", description: "test", duration: 60, date: "Mon Jan 01 1990", _id: "5fb5853f734231456ccb3b05" } ``` Usuario: ```js { username: "fcc_test", _id: "5fb5853f734231456ccb3b05" } ``` Log: ```js { username: "fcc_test", count: 1, _id: "5fb5853f734231456ccb3b05", log: [{ description: "test", duration: 60, date: "Mon Jan 01 1990", }] } ``` **Pista:** Para la propiedad `date`, el método `toDateString` de la API `Date` puede ser usado para conseguir el resultado esperado. # --hints-- Debes proporcionar tu propio proyecto, no la URL de ejemplo. ```js (getUserInput) => { const url = getUserInput('url'); assert( !/.*\/exercise-tracker\.freecodecamp\.rocks/.test(getUserInput('url')) ); }; ``` Puedes hacer una petición `POST` a `/api/users` con los datos de formulario que tenga la propiedad `username` para crear un nuevo usuario. ```js async (getUserInput) => { const url = getUserInput('url'); const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `username=fcc_test_${Date.now()}`.substr(0, 29) }); assert.isTrue(res.ok); if(!res.ok) { throw new Error(`${res.status} ${res.statusText}`) }; }; ``` La respuesta devuelta de `POST /api/users` con datos de formulario `username` será un objeto con propiedades `username` y `_id`. ```js async (getUserInput) => { const url = getUserInput('url'); const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `username=fcc_test_${Date.now()}`.substr(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); assert.exists(_id); assert.exists(username); } else { throw new Error(`${res.status} ${res.statusText}`); } }; ``` Puedes hacer una petición `GET` a `/api/users` para obtener una lista con todos los usuarios. ```js async(getUserInput) => { const url = getUserInput('url'); const res = await fetch(url + '/api/users'); assert.isTrue(res.ok); if(!res.ok) { throw new Error(`${res.status} ${res.statusText}`) }; }; ``` La petición `GET` a `/api/users` devuelve un arreglo. ```js async(getUserInput) => { const url = getUserInput('url'); const res = await fetch(url + '/api/users'); if(res.ok){ const users = await res.json(); assert.isArray(users); } else { throw new Error(`${res.status} ${res.statusText}`); }; }; ``` Cada elemento en el arreglo devuelto desde `GET /api/users` es un literal de objeto que contiene el `username` y `_id`. ```js async(getUserInput) => { const url = getUserInput('url'); const res = await fetch(url + '/api/users'); if(res.ok){ const users = await res.json(); const user = users[0]; assert.exists(user); assert.exists(user.username); assert.exists(user._id); assert.isString(user.username); assert.isString(user._id); } else { throw new Error(`${res.status} ${res.statusText}`); }; }; ``` Puedes hacer una petición `POST` a `/api/users/:_id/exercises` con datos de formulario `description`, `duration`, y opcionalmente `date`. Si no se proporciona ninguna fecha, se utilizará la fecha actual. ```js async (getUserInput) => { const url = getUserInput('url'); const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `username=fcc_test_${Date.now()}`.substr(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); const expected = { username, description: 'test', duration: 60, _id, date: 'Mon Jan 01 1990' }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01` }); assert.isTrue(addRes.ok); if(!addRes.ok) { throw new Error(`${addRes.status} ${addRes.statusText}`) }; } else { throw new Error(`${res.status} ${res.statusText}`); } }; ``` La respuesta devuelta desde `POST /api/users/:_id/exercises` será el objeto de usuario con los campos de ejercicio añadidos. ```js async (getUserInput) => { const url = getUserInput('url'); const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `username=fcc_test_${Date.now()}`.substr(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); const expected = { username, description: 'test', duration: 60, _id, date: 'Mon Jan 01 1990' }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01` }); if (addRes.ok) { const actual = await addRes.json(); assert.deepEqual(actual, expected); assert.isString(actual.description); assert.isNumber(actual.duration); assert.isString(actual.date); } else { throw new Error(`${addRes.status} ${addRes.statusText}`); } } else { throw new Error(`${res.status} ${res.statusText}`); } }; ``` Puedes hacer una petición `GET` a `/api/users/:_id/logs` para recuperar un log completo del ejercicio de cualquier usuario. ```js async (getUserInput) => { const url = getUserInput('url'); const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `username=fcc_test_${Date.now()}`.substr(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); const expected = { username, description: 'test', duration: 60, _id, date: new Date().toDateString() }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `description=${expected.description}&duration=${expected.duration}` }); if (addRes.ok) { const logRes = await fetch(url + `/api/users/${_id}/logs`); assert.isTrue(logRes.ok); if(!logRes.ok) { throw new Error(`${logRes.status} ${logRes.statusText}`) }; } else { throw new Error(`${addRes.status} ${addRes.statusText}`); } } else { throw new Error(`${res.status} ${res.statusText}`); } }; ``` Una solicitud al log de un usuario `GET /api/users/:_id/logs` devuelve un objeto de usuario con una propiedad `count` representando el número de ejercicios que pertenecen a ese usuario. ```js async (getUserInput) => { const url = getUserInput('url'); const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `username=fcc_test_${Date.now()}`.substr(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); const expected = { username, description: 'test', duration: 60, _id, date: new Date().toDateString() }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `description=${expected.description}&duration=${expected.duration}` }); if (addRes.ok) { const logRes = await fetch(url + `/api/users/${_id}/logs`); if (logRes.ok) { const { count } = await logRes.json(); assert(count); } else { throw new Error(`${logRes.status} ${logRes.statusText}`); } } else { throw new Error(`${addRes.status} ${addRes.statusText}`); } } else { throw new Error(`${res.status} ${res.statusText}`); } }; ``` Una solicitud `GET` a `/api/users/:id/logs` devolverá el objeto de usuario con un arreglo `log` de todos los ejercicios añadidos. ```js async(getUserInput) => { const url = getUserInput('url'); const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `username=fcc_test_${Date.now()}`.substr(0, 29) }) if(res.ok){ const {_id, username} = await res.json(); const expected = { username, description: 'test', duration: 60, _id, date: new Date().toDateString() }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `description=${expected.description}&duration=${expected.duration}` }); if(addRes.ok){ const logRes = await fetch(url + `/api/users/${_id}/logs`); if(logRes.ok) { const {log} = await logRes.json(); assert.isArray(log); assert.equal(1, log.length); } else { throw new Error(`${logRes.status} ${logRes.statusText}`); } } else { throw new Error(`${addRes.status} ${addRes.statusText}`); }; } else { throw new Error(`${res.status} ${res.statusText}`) }; }; ``` Cada elemento en el arreglo `log` que es devuelto desde `GET /api/users/:id/logs` es un objeto que debe tener las propiedades `description`, `duration` y `date`. ```js async(getUserInput) => { const url = getUserInput('url'); const res = await fetch(url + `/api/users`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `username=fcc_test_${Date.now()}`.substr(0, 29) }); if(res.ok) { const {_id, username} = await res.json(); const expected = { username, description: 'test', duration: 60, _id, date: new Date().toDateString() }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `description=${expected.description}&duration=${expected.duration}` }); if(addRes.ok) { const logRes = await fetch(url + `/api/users/${_id}/logs`); if(logRes.ok) { const {log} = await logRes.json(); const exercise = log[0]; assert.exists(exercise); assert.exists(exercise.description); assert.exists(exercise.duration); assert.exists(exercise.date); } else { throw new Error(`${logRes.status} ${logRes.statusText}`); }; } else { throw new Error(`${addRes.status} ${addRes.statusText}`); }; } else { throw new Error(`${res.status} ${res.statusText}`) }; }; ``` La propiedad `description` de cualquier objeto en el arreglo `log` que es devuelto desde `GET /api/users/:id/logs` debe ser una cadena. ```js async(getUserInput) => { const url = getUserInput('url'); const res = await fetch(url + '/api/users/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: `username=fcc_test_${Date.now()}`.substr(0,29) }); if(res.ok) { const {_id, username} = await res.json(); const expected = { username, description: 'test', duration: 60, _id, date: new Date().toDateString() }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: `description=${expected.description}&duration=${expected.duration}` }); if(addRes.ok) { const logRes = await fetch(url + `/api/users/${_id}/logs`); if(logRes.ok){ const {log} = await logRes.json(); const exercise = log[0]; assert.isString(exercise.description); assert.equal(exercise.description, expected.description); } else { throw new Error(`${logRes.status} ${logRes.statusText}`); } } else { throw new Error(`${addRes.status} ${addRes.statusText}`); }; } else { throw new Error(`${res.status} ${res.statusText}`); }; }; ``` La propiedad `duration` de cualquier objeto en el arreglo `log` que es devuelto desde `GET /api/users/:id/logs` debe ser un número. ```js async(getUserInput) => { const url = getUserInput('url'); const res = await fetch(url + '/api/users/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: `username=fcc_test_${Date.now()}`.substr(0,29) }); if(res.ok) { const {_id, username} = await res.json(); const expected = { username, description: 'test', duration: 60, _id, date: new Date().toDateString() }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: `description=${expected.description}&duration=${expected.duration}` }); if(addRes.ok) { const logRes = await fetch(url + `/api/users/${_id}/logs`); if(logRes.ok){ const {log} = await logRes.json(); const exercise = log[0]; assert.isNumber(exercise.duration); assert.equal(exercise.duration, expected.duration); } else { throw new Error(`${logRes.status} ${logRes.statusText}`); } } else { throw new Error(`${addRes.status} ${addRes.statusText}`); }; } else { throw new Error(`${res.status} ${res.statusText}`); }; }; ``` La propiedad `date` de cualquier objeto en el arrelgo `log` que es devuelto desde `GET /api/users/:id/logs` debe ser una cadena.. Utiliza el formato `dateString` de la API `Date`. ```js async(getUserInput) => { const url = getUserInput('url'); const res = await fetch(url + '/api/users/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: `username=fcc_test_${Date.now()}`.substr(0,29) }); if(res.ok) { const {_id, username} = await res.json(); const expected = { username, description: 'test', duration: 60, _id, date: new Date().toDateString() }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: `description=${expected.description}&duration=${expected.duration}` }); if(addRes.ok) { const logRes = await fetch(url + `/api/users/${_id}/logs`); if(logRes.ok){ const {log} = await logRes.json(); const exercise = log[0]; assert.isString(exercise.date); assert.equal(exercise.date, expected.date); } else { throw new Error(`${logRes.status} ${logRes.statusText}`); } } else { throw new Error(`${addRes.status} ${addRes.statusText}`); }; } else { throw new Error(`${res.status} ${res.statusText}`); }; }; ``` Puedes añadir parámetros `from`, `to` y `limit` a una petición `GET /api/users/:_id/logs` para recuperar parte del log de cualquier usuario. `from` y `to` son fechas en formato `yyyy-mm-dd`. `limit` es un número entero de cuántos logs hay que devolver. ```js async (getUserInput) => { const url = getUserInput('url'); const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `username=fcc_test_${Date.now()}`.substr(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); const expected = { username, description: 'test', duration: 60, _id, date: new Date().toDateString() }; const addExerciseRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01` }); const addExerciseTwoRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-03` }); if (addExerciseRes.ok && addExerciseTwoRes.ok) { const logRes = await fetch( url + `/api/users/${_id}/logs?from=1989-12-31&to=1990-01-04` ); if (logRes.ok) { const { log } = await logRes.json(); assert.isArray(log); assert.equal(2, log.length); } else { throw new Error(`${logRes.status} ${logRes.statusText}`); } const limitRes = await fetch( url + `/api/users/${_id}/logs?limit=1` ); if (limitRes.ok) { const { log } = await limitRes.json(); assert.isArray(log); assert.equal(1, log.length); } else { throw new Error(`${limitRes.status} ${limitRes.statusText}`); } const filterDateBeforeLimitRes = await fetch( url + `/api/users/${_id}/logs?from=1990-01-02&to=1990-01-04&limit=1` ); if (filterDateBeforeLimitRes.ok) { const { log } = await filterDateBeforeLimitRes.json(); assert.isArray(log); assert.equal(1, log.length); } else { throw new Error(`${filterDateBeforeLimitRes.status} ${filterDateBeforeLimitRes.statusText}`); } } else { throw new Error(`${res.status} ${res.statusText}`); } } else { throw new Error(`${res.status} ${res.statusText}`); } }; ``` # --solutions-- ```js /** Backend challenges don't need solutions, because they would need to be tested against a full working project. Please check our contributing guidelines to learn more. */ ```