Markdown es un lenguaje de marcado
ligero muy popular entre developers. Es usado en muchísimas plataformas que
manejan texto plano (GitHub, foros, blogs, ...) y es muy común
encontrar varios archivos en ese formato en cualquier tipo de repositorio
(empezando por el tradicional README.md
).
Estos archivos Markdown
normalmente contienen links (vínculos/ligas) que
muchas veces están rotos o ya no son válidos y eso perjudica mucho el valor de
la información que se quiere compartir.
Dentro de una comunidad de código abierto, nos han propuesto crear una
herramienta usando Node.js, que lea y analice archivos
en formato Markdown
, para verificar los links que contengan y reportar
algunas estadísticas.
En este proyecto crearás una herramienta de línea de comando (CLI) así como tu propia librería (o biblioteca - library) en JavaScript.
En esta oportunidad nos alejamos un poco del navegador para construir un
programa que se ejecute usando Node.js. Aprenderemos sobre procesos
(process.env
, process.argv
, ...), cómo interactuar con el sistema archivos,
cómo hacer consultas de red, etc.
Node.js es un entorno de ejecución para JavaScript construido con el motor de JavaScript V8 de Chrome. Esto nos va a permitir ejecutar JavaScript en el entorno del sistema operativo, ya sea tu máquina o un servidor, lo cual nos abre las puertas para poder interactuar con el sistema en sí, archivos, redes, ...
Diseñar tu propia librería es una experiencia fundamental para cualquier desarrollador porque que te obliga a pensar en la interfaz (API) de tus módulos y cómo será usado por otros developers. Debes tener especial consideración en peculiaridades del lenguaje, convenciones y buenas prácticas.
Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.
[ ] Diferenciar entre tipos de datos primitivos y no primitivos
[ ] Arrays (arreglos)
* [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/04-arrays) * [Array - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/) * [Array.prototype.sort() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) * [Array.prototype.forEach() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) * [Array.prototype.map() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map) * [Array.prototype.filter() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
[ ] Objetos (key, value)
* [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects)
[ ] Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
* [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/01-conditionals-and-loops) * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals)
[ ] Funciones (params, args, return)
* [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/03-functions) * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/01-classic) * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/02-arrow) * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions)
[ ] Recursión o recursividad
* [Píldora recursión - YouTube Laboratoria Developers](https://www.youtube.com/watch?v=lPPgY3HLlhQ) * [Recursión o Recursividad - Laboratoria Developers en Medium](https://medium.com/laboratoria-developers/recursi%C3%B3n-o-recursividad-ec8f1a359727)
[ ] Módulos de CommonJS
* [Modules: CommonJS modules - Node.js Docs](https://nodejs.org/docs/latest/api/modules.html)
[ ] Diferenciar entre expresiones (expressions) y sentencias (statements)
[ ] Callbacks
* [Función Callback - MDN](https://developer.mozilla.org/es/docs/Glossary/Callback_function)
[ ] Promesas
* [Promise - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise) * [How to Write a JavaScript Promise - freecodecamp (en inglés)](https://www.freecodecamp.org/news/how-to-write-a-javascript-promise-4ed8d44292b8/)
[ ] Pruebas unitarias (unit tests)
* [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started)
[ ] Pruebas asíncronas
* [Tests de código asincrónico con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/asynchronous)
[ ] Uso de mocks y espías
* [Manual Mocks con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/manual-mocks)
[ ] Pruebas de compatibilidad en múltiples entornos de ejecución
[ ] Uso de linter (ESLINT)
[ ] Uso de identificadores descriptivos (Nomenclatura y Semántica)
[ ] Instalar y usar módulos con npm
* [Sitio oficial de npm (en inglés)](https://www.npmjs.com/)
[ ] Configuración de package.json
* [package.json - Documentación oficial (en inglés)](https://docs.npmjs.com/files/package.json)
[ ] Configuración de npm-scripts
* [scripts - Documentación oficial (en inglés)](https://docs.npmjs.com/misc/scripts)
[ ] process (env, argv, stdin-stdout-stderr, exit-code)
* [Process - Documentación oficial (en inglés)](https://nodejs.org/api/process.html)
[ ] File system (fs, path)
* [File system - Documentación oficial (en inglés)](https://nodejs.org/api/fs.html) * [Path - Documentación oficial (en inglés)](https://nodejs.org/api/path.html)
[ ] Git: Instalación y configuración
[ ] Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)
[ ] Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)
[ ] GitHub: Creación de cuenta y repos, configuración de llaves SSH
[ ] GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)
[ ] GitHub: Organización en Github (projects | issues | labels | milestones | releases)
[ ] Consulta o petición (request) y respuesta (response).
* [Generalidades del protocolo HTTP - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Overview) * [Mensajes HTTP - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Messages)
[ ] Códigos de status de HTTP
* [Códigos de estado de respuesta HTTP - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Status) * [The Complete Guide to Status Codes for Meaningful ReST APIs - dev.to](https://dev.to/khaosdoctor/the-complete-guide-to-status-codes-for-meaningful-rest-apis-1-5c5)
Este proyecto se debe "resolver" de manera individual.
La librería y el script ejecutable (herramienta de línea de comando - CLI) deben estar implementados en JavaScript para ser ejecutados con Node.js. Está permitido usar librerías externas.
Tu módulo debe ser instalable via npm install <github-user>/md-links
. Este
módulo debe incluir tanto un ejecutable que podamos invocar en la línea de
comando como una interfaz que podamos importar con require
para usarlo
programáticamente.
Los tests unitarios deben cubrir un mínimo del 70% de statements, functions, lines y branches. Te recomendamos explorar Jest para tus pruebas unitarias.
Para este proyecto no está permitido utilizar async/await
.
Para este proyecto te sugerimos no utilizar la versión síncrona
de la función para leer archivos, readFileSync
, y en cambio intentar
resolver este desafío de manera asíncrona.
Para este proyecto es opcional el uso de ES Modules (import/export)
, en el
caso optes utilizarlo deberás de crear un script de build
en el package.json
que los transforme en requires
y module.exports
con ayuda de babel.
Para disminuir la complejidad de tu algoritmo recursivo, te recomendamos
utilizar la versión síncrona de la función para leer directorios, readdirSync
.
Para comenzar este proyecto tendrás que hacer un fork y clonar este repositorio.
Antes de comenzar a codear, es necesario crear un plan de acción. Esto debería
quedar detallado en el README.md
de tu repo y en una serie de issues
y milestones para priorizar y organizar el trabajo, y para poder hacer
seguimiento de tu progreso.
Dentro de cada milestone se crearán y asignarán los issues que cada quien considere necesarios.
README.md
con descripción del módulo, instrucciones de instalación/uso,
documentación del API y ejemplos. Todo lo relevante para que cualquier
developer que quiera usar tu librería pueda hacerlo sin inconvenientes.index.js
: Desde este archivo debes exportar una función (mdLinks
).package.json
con nombre, versión, descripción, autores, licencia,
dependencias, scripts (pretest, test, ...), main, bin.editorconfig
con configuración para editores de texto. Este archivo no se
debe cambiar..eslintrc
con configuración para linter. Este archivo contiene una
configuración básica para ESLint, si deseas agregar reglas adicionales
como Airbnb deberás modificar este archivo..gitignore
para ignorar node_modules
u otras carpetas que no deban
incluirse en control de versiones (git
).test/md-links.spec.js
debe contener los tests unitarios para la función
mdLinks()
. Tu inplementación debe pasar estos tets.El módulo debe poder importarse en otros scripts de Node.js y debe ofrecer la siguiente interfaz:
mdLinks(path, options)
path
: Ruta absoluta o relativa al archivo o directorio.
Si la ruta pasada es relativa, debe resolverse como relativa al directorio
desde donde se invoca node - current working directory).options
: Un objeto con únicamente la siguiente propiedad:
validate
: Booleano que determina si se desea validar los links
encontrados.La función debe retornar una promesa (Promise
) que resuelva a un arreglo
(Array
) de objetos (Object
), donde cada objeto representa un link y contiene
las siguientes propiedades
Con validate:false
:
href
: URL encontrada.text
: Texto que aparecía dentro del link (<a>
).file
: Ruta del archivo donde se encontró el link.Con validate:true
:
href
: URL encontrada.text
: Texto que aparecía dentro del link (<a>
).file
: Ruta del archivo donde se encontró el link.status
: Código de respuesta HTTP.ok
: Mensaje fail
en caso de fallo u ok
en caso de éxito.const mdLinks = require("md-links");
mdLinks("./some/example.md")
.then(links => {
// => [{ href, text, file }, ...]
})
.catch(console.error);
mdLinks("./some/example.md", { validate: true })
.then(links => {
// => [{ href, text, file, status, ok }, ...]
})
.catch(console.error);
mdLinks("./some/dir")
.then(links => {
// => [{ href, text, file }, ...]
})
.catch(console.error);
El ejecutable de nuestra aplicación debe poder ejecutarse de la siguiente manera a través de la terminal:
md-links <path-to-file> [options]
Por ejemplo:
$ md-links ./some/example.md
./some/example.md http://algo.com/2/3/ Link a algo
./some/example.md https://otra-cosa.net/algun-doc.html algún doc
./some/example.md http://google.com/ Google
El comportamiento por defecto no debe validar si las URLs responden ok o no, solo debe identificar el archivo markdown (a partir de la ruta que recibe como argumento), analizar el archivo Markdown e imprimir los links que vaya encontrando, junto con la ruta del archivo donde aparece y el texto que hay dentro del link (truncado a 50 caracteres).
--validate
Si pasamos la opción --validate
, el módulo debe hacer una petición HTTP para
averiguar si el link funciona o no. Si el link resulta en una redirección a una
URL que responde ok, entonces consideraremos el link como ok.
Por ejemplo:
$ md-links ./some/example.md --validate
./some/example.md http://algo.com/2/3/ ok 200 Link a algo
./some/example.md https://otra-cosa.net/algun-doc.html fail 404 algún doc
./some/example.md http://google.com/ ok 301 Google
Vemos que el output en este caso incluye la palabra ok
o fail
después de
la URL, así como el status de la respuesta recibida a la petición HTTP a dicha
URL.
--stats
Si pasamos la opción --stats
el output (salida) será un texto con estadísticas
básicas sobre los links.
$ md-links ./some/example.md --stats
Total: 3
Unique: 3
También podemos combinar --stats
y --validate
para obtener estadísticas que
necesiten de los resultados de la validación.
$ md-links ./some/example.md --stats --validate
Total: 3
Unique: 3
Broken: 1
Módulo instalable via npm install <github-user>/md-links
. Este módulo debe
incluir tanto un ejecutable como una interfaz que podamos importar con require
para usarlo programáticamente.
Las secciones llamadas Hacker Edition son opcionales. Si terminaste con todo lo anterior y te queda tiempo, intenta completarlas. Así podrás profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto.
line
a cada objeto link
indicando en qué línea
del archivo se encontró el link.Para que el módulo sea instalable desde GitHub solo tiene que:
package.json
válidoCon el comando npm install githubname/reponame
podemos instalar directamente
desde GitHub. Ver docs oficiales de npm install
acá.
Por ejemplo, el course-parser
que usamos para la currícula no está publicado en el registro público de NPM,
así que lo instalamos directamente desde GitHub con el comando npm install Laboratoria/course-parser
.
La implementación de este proyecto tiene varias partes: leer del sistema de archivos, recibir argumentos a través de la línea de comando, analizar texto, hacer consultas HTTP, ... y todas estas cosas pueden enfocarse de muchas formas, tanto usando librerías como implementando en VanillaJS.
Por poner un ejemplo, el parseado (análisis) del markdown para extraer los links podría plantearse de las siguientes maneras (todas válidas):
RegExp
).new marked.Renderer()
).No dudes en consultar a tus compañeras y coaches si tienes dudas existenciales con respecto a estas decisiones. No existe una "única" manera correcta :wink:
npm install --global <github-user>/md-links
README.md
mdLinks(path, opts)
options.validate
md-links
en el path (configurado en package.json
)--validate
--stats
npm test
).Un "superpoder" que esperamos puedas desarrollar durante el bootcamp es el de definir "mini-proyectos" que te acerquen paso a paso a la solución del "gran proyecto". Es el equivalente a comenzar armando esquinas o bordes del rompecabezas/puzzle sin saber necesariamente cómo encajarán al final. Déjate llevar y explora.
Estas son algunas sugerencias:
Este proyecto es distinto de los que has venido trabajando hasta ahora dado que no hay una interfaz web, todo se desarrollará en tu editor y consola/terminal.
Es por ello que, para visualizar mejor lo que tendrás que hacer
y planificar tus tareas y objetivos, es recomendable hacer un
diagrama de flujo
.
Si nunca has hecho un diagrama de flujo revisa este recurso.
Una alternativa al diagrama de flujo puede ser el pseudocódigo
.
En este proyecto te recomendamos usar la herramienta de planificación y organización de GitHub llamada Github Projects.
Mediante issues y milestones podrás organizar y planificar tareas y objetivos concretos.
Tomando en consideración los entregables del proyecto, el
9. Checklist y los pasos que definiste en tu
diagrama de flujo
, crea tu planificación en GitHub Projects.
En esta ocasión estarás trabajando en NodeJS, asegúrate de saber para qué sirve y sus consideraciones.
En particular, deberás decidir desde un comienzo si usarás
ES Modules
, es decir, import/export, ó, por el contrario,
CommonJS Modules
, es decir, require/module.exports.
Asegurate de tener clara esta decisión desde un inicio para que no encuentres problemas más adelante.
Como primer reto, puedes tratar de leer un solo archivo con
una ruta fija e imprimir su contenido en la consola con un console.log
.
La librería nativa FS
(FileSystem) te será de utilidad.
Recuerda: Te sugerimos no utilizar la versión síncrona
de la función para leer archivos, readFileSync
, y en cambio
intentar resolver ese desafío de manera asíncrona.
Ya sabiendo leer un archivo, aventúrate a conocer cual es su extensión.
Recuerda, las extensiones son esas letras al final del nombre de un archivo, por ejemplo: .js, .txt, .doc, etc
Aquí también podrá ser útil FS
.
Este proyecto consiste en buscar archivos, pero para eso, primero debes poder verlos.
Intenta imprimir en consola la lista de archivos en una carpeta.
La librería FS
también te será útil aquí.
Recuerda: Para disminuir la complejidad de tu algoritmo
recursivo, te recomendamos utilizar la versión síncrona de
la función para leer directorios, readdirSync
.
Para poder acceder a carpetas y archivos será necesario que indiques en qué lugar de tu computadora se encuentran, a esto le llamamos rutas.
Usa la librería nativa path
para unir dos segmentos de ruta,
por ejemplo, si queremos unir:
1) /home/Laboratoria/ 2) ./test
El resultado sería: /home/Laboratoria/test
Este proyecto se ha de resolver de forma casi natural con recursividad.
¿Por qué?.
Porque no conocemos realmente cuantas carpetas y archivos tendremos que recorrer antes de terminar.
Si recibes una ruta de carpeta, no sabrás de ante mano si dentro hay más carpetas o muchos archivos.
Por ello, asegurate bien de entender de qué trata la recursividad y ver algunos ejemplos.
Entre los recursos de este proyecto hay un video que te ayudará.
El valor de retorno de nuestra librería es una Promesa
,
no un Array
.
Prueba leyendo sobre las promesas y creando una por tu cuenta utilizando new Promise()
Es importante que sepas qué es un callback pues las promesas los utilizarán.