Aux.
: Instalación de JSON Server
Introducción a la Ingeniería del Software y los Sistemas de
Información II
Curso 2019/20
Aux.: Instalación de JSON Server Índice
Índice
1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2 Instalación de [Link] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
3 Instalación de JSON Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
4 Ejecutando JSON Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
i
Aux.: Instalación de JSON Server 2 Instalación de [Link]
1. Introducción
Hasta ahora, los datos que se mostraban en nuestra aplicación eran estáticos, incluidos
en el propio código HTML de cada vista. Para cambiar este comportamiento necesitaremos
una fuente externa de datos en un formato estándar, por ejemplo, los datos JSON que nos
proporciona un backend concreto. Dado que no es práctico desplegar un proyecto backend
completo para realizar la integración con nuestra aplicación web, usaremos un backend de
mockup que nos permite cargar datos de un archivo y exponerlos mediante una API REST.
Una de las herramientas disponibles para ello es JSON Server, cuyo funcionamiento se detalla
a continuación.
2. Instalación de [Link]
[Link] es un entorno que permite ejecutar código JavaScript en cualquier máquina,
no sólo en navegadores web, y es el entorno requerido por JSON Server. Comenzaremos
por instalarlo descargándolo de la página oficial (el instalador para Windows está disponible
aquí).
Procederemos entonces a instalarlo con normalidad. Es importante asegurarse de que
se instalan todos los componentes, especialmente npm package manager y Add to PATH:
Una vez finalice, podremos asegurarnos de que Node se ha instalado correctamente
Página 1 de 4
Aux.: Instalación de JSON Server 3 Instalación de JSON Server
abriendo una terminal y ejecutando el comando node --version, donde deberíamos ver la
versión de Node instalada (actualmente, 12.16.1).
3. Instalación de JSON Server
Una vez instalado Node, crearemos una carpeta en cualquier lugar de nuestro equipo
que contendrá los archivos necesarios para ejecutar JSON Server (por ejemplo, una carpeta
json_server en nuestro escritorio) y abriremos una terminal de comandos en la carpeta crea-
da. Entonces, ejecutaremos el comando npm install -g json-server json-server-auth.
Esto indicará a npm, el gestor de paquetes de Node (equivalente a pip en Python) que ins-
tale JSON Server y una extensión adicional que nos ayudará en el futuro para la gestión de
usuarios. Tras una breve espera, ambos quedarán instalados:
Podemos comprobar que JSON Server funciona ejecutando el comando json-server:
Página 2 de 4
Aux.: Instalación de JSON Server 4 Ejecutando JSON Server
Se muestran todas las opciones, por lo que JSON Server está correctamente instalado.
Si no se encontrara el comando json-server, asegúrese de haber ejecutado el comando de
instalación añadiendo el parámetro -g tras npm install.
4. Ejecutando JSON Server
Para ejecutar JSON Server, necesitaremos indicarle qué archivo de datos usar. Usare-
mos el archivo [Link], que se encuentra disponible en EV en la misma carpeta que este
boletín, y lo colocaremos en la carpeta que hemos creado (aquella en la que tenemos una
consola abierta). A continuación, ejecutaremos JSON Server sobre ese archivo usando el
comando json-server [Link]:
Página 3 de 4
Aux.: Instalación de JSON Server 4 Ejecutando JSON Server
En esta ocasión JSON Server ha sido capaz de localizar el archivo, y ha ejecutado un
servidor web en las URLs que se indican. Si inspeccionamos el archivo [Link], veremos
que en el primer nivel hay una clave por cada tabla que contendría nuestra base de datos,
y asociado a cada una de ellas hay un array de elementos. Así, JSON Server nos provee
automáticamente una URL separada para cada clase de datos.
Si accedemos a la URL [Link] mediante nuestro navegador, po-
dremos comprobar que, efectivamente, el listado de fotos incluidas en el fichero [Link]
se está obteniendo correctamente. Además, JSON Server nos permite hacer un filtrado por
ID, con el mismo esquema de URL que implementamos el cuatrimestre pasado: accedien-
do a localhost:3000/tabla/id podremos obtener un único elemento por ID, e.g., la URL
[Link] nos devolverá únicamente la foto con ID = 2.
Página 4 de 4
