jueves, 16 de julio de 2020

Ejemplo sencillo de Mockserver con json-server

Si estas leyendo esto es porque te interesa sacarle partido a los mockservers. Estos te permiten desarrollar el frontend sin que el backend esté terminado. Solo necesitas definir y acordar con los desarrolladores del backend, los "End-points" que recibirá la API y cual será el formato de la respuesta.

Con Json server puedes suplantar la funcionalidad ofrecida por el API. De esta forma puedes ir desarrollando tu frontend sin más esperas.

¿Qué es lo que tienes que hacer?

  1. Instalar node desde https://nodejs.org/en/
  2. instalar Json server con "npm install -g json-server"
  3. Descargar el proyecto en local con "git clone https://github.com/MarisaAfuera/Ejemplo-Json-server.git"
  4. Arrancar Json server con "json-server --watch db.json"
El fichero db.json es el que Json server interpreta cómo el contenedor de datos. En el caso de este ejemplo contiene:
{
  "users": [
    {
      "name": "Hills.Yesenia",
      "id": 1
    },
    {
      "name": "Juliana.Bednar",
      "id": 2
    },
    {
      "name": "Lebsack.Afton",
      "id": 3
    },
    {
      "name": "Davis_Sonny",
      "id": 4
    },
    {
      "name": "Pasquale.Hartmann",
      "id": 5
    },
    {
      "name": "Moore_Chelsie",
      "id": 6
    },
    {
      "name": "Jayda.Effertz",
      "id": 7
    },
    {
      "name": "Weissnat_Craig",
      "id": 8
    },
    {
      "name": "Bernhard_Roman",
      "id": 9
    },
    {
      "name": "Lynch.Vincenzo",
      "id": 10
    }
  ]
}
     5. Consultar la base de datos desde el browser con http://localhost:3000/users .Esto mostrará en el browser el contenido del fichero db.json.


ACCEDER A LOS DATOS DESDE MÓDULO JAVASCRIPT

  1. Instalar node-fetch con "npm install --save node-fetch"
  2. Ejecutar el módulo readdata.js con "node readdata.js". Este módulo mostrará en la consola la lista de usuarios contenidos en db.json.

POBLANDO LA BASE DE DATOS

  1. Instalar CASUAL con "npm install casual". Es un generador de datos aleatorios, en este ejemplo se usa para generar nombres
  2. Consultar el contenido del fichero db.json
  3. Ejecutar populatedb.mjs con "node populatedb.mjs"
  4. Consultar de nuevo el contenido del fichero db.json. Ahora contendrá datos de más usuarios. Esto es útil para generar datos de prueba y además regenerarlos cuando sea necesario.

Terminando

Espero que este pequeño ejemplo sea de utilidad, para arrancar con el uso de Mockservers. Realmente los Mockservers tienes más utilidades, cómo independizar las pruebas del frontend de las del backend y otros varios.

Si tienes problemas para entender, probar o desarrollar algo basado en el ejemplo aquí suministrado pornun comentario y te atenderé lo antes posible.

domingo, 5 de julio de 2020

Descarga de un fichero con javascript desde el cliente

En este post se muestra como descargar un fichero pdf que está almacenado en una URL y por lo tanto lo despacha un servidor web. Para hacer esta descarga desde el lado cliente con javascript se utilizan 2 técnicas:
  1. Descargar mediante propiedad download de la etiqueta anchor de html
  2. Descarga utilizando la librería download.js

1. Descarga mediante propiedad download de la etiqueta anchor


<html>

<head>
  <meta charset="UTF-8">   
  <title>Descarga de un fichero PDF</title>
  <script type="text/javascript">
    function DownloadFromUrl(fileURL, fileName) {
      var link = document.createElement('a');
      link.href = fileURL;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }  
  </script>  
</head>

<body>
  <h1>Descarga de un fichero PDF</h1>   
  <button
    onClick="DownloadFromUrl('http://127.0.0.1:5500/scrum_manager.pdf',
                             'Fichero.pdf')">
    Descargar
  </button>   
</body>

</html>

2. Descaga utilizando la librería download.js


Esta librería se puede descargar en http://danml.com/download.html#Download.

Esta técnica permite descargar ficheros en formato: Strings, Blob, Arrays y desde URL. En el ejemplo aquí mostrado se descarga un fichero desde una URL. En el caso de tener problemas con CORS, se pueden adoptar dos soluciones. Si se está haciendo una prueba de la técnica, instalar una extensión al browser para que se salte la política CORS y el servidor permita acceder al fichero. Si es para una función que se implanta en producción, hay que configurar la política CORS del servidor que sirve el fichero a descargar.

<html>

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="download.js"></script>
    <title>Descarga de un fichero PDF</title>
</head>

<body>
    <h1>Descarga de un fichero PDF</h1>
    <button onClick="download('http://127.0.0.1:5500/scrum_manager.pdf')">Descargar</button>
</body>

</html>


Terminando


Espero que sean ejemplos de utlidad. He intentado ser breve e ir al grano para no hacer perder el tiempo al lector. Si hay algún problema o duda, enviad comentarios. Serán atendidos a la mayor brevedad posible.