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.



martes, 2 de junio de 2020

Enseña programación a niños a partir de 5 años: ScratchJr

ScratchJr es un lenguaje de programación creado para atraer a niños de 5 a 7 años. Es un lenguaje basado en bloques de colores, mediante el cual los niños pueden crear sus propias historias y juegos. ScratchJr es una variación del lenguaje Scratch que esta diseñado para niños a partir de 8 años. ScratchJr está disponible en iPad, tabletas Android y en Chromebook. Este lenguaje ha sido desarrollado en colaboración por  DevTech Research Group at Tufts University, Lifelong Kindergarten Group at the MIT Media Lab, y Playful Invention Company.

Es una app gratuita que se instala desde la tienda online que corresponda y permite desarrollar proyectos en un entorno gráfico. Los proyectos incluyen programas ejecutables formados por ordenes que se añaden desde bloques a ciertos elemento del proyecto de forma gráfica. Estas ordenes realmente constituyen sentencias que tienen una secuencia de ejecución. Incluye el concepto de bucle y de ceder el control a otras partes del programa.

Una buena forma de aprender esta herramienta y de enseñarsela a los niños es el libro:
"The Official ScratchJr Book" de Marisa Umaschi Bers y Mitchel Resnick publicado por No Starch Press en Oct 2015 ISBN: 9781593276713. 

También está la web oficial de ScratchJr https://www.scratchjr.org/

Los proyectos tienen fondos y personajes que se incluyen en escenarios. A los personajes se les puede animar mediante scripts(guiones o programas) que les indican lo que tienen que hacer cuando se ejecuta el proyecto. Estos scripts son los programas que establecen el orden de ejecución de las ordenes programadas por el niño mediante los bloques. Existen ordenes de:
  • movimiento
  • sonido
  • retorno a la posición original
  • desaparecer y aparecer
  • empequeñecerse y agrandarse
  • envío y recepción de mensajes
  • realizar bucles de n veces o infinitos
  • establecer velocidad 
  • etc.

Además de la posibilidad de hacer programas,  ScratchJr dispone de un editor de imágenes que permite dibujar para crear nuevos personajes o modificar los existentes.

También es posible depurar el programa. ScratchJr indica mediante colores que orden se está ejecutando en cada momento. Así el programador puede saber cual es el camino que sigue el programa en cada momento y descubrir fallos y/o malos funcionamientos.

En fin, animaros. Es una buena forma de introducir a los pequeños en el mundo de la algorítmica. Así pueden entender en que consiste la programación y como partiendo de un estado inicial y siguiendo unos pasos que ordena el programador se llega a un estado final o solución. Francamente creo que les va a hacer falta entender esto a lo largo de su vida.




lunes, 25 de mayo de 2020

Ejemplo de uso de Firebase. Accediendo a una BD.

Una de las tendencias actuales en cuanto a la explotación de sistemas web o apps, pasa por no tener que ocuparse de los servidores desde los cuales se suministra la funcionalidad del sistema a los usuarios. Y no solamente no ocuparse del hardware que aloga los servicios que implementan la funcionalidad de la web o app, tampoco del software de infraestructura. Es decir: base de datos, dependencias, sistema operativo, marcos de prueba, SEO, etc.

Estas plataformas se ocupan de que el hardware y software que da soporte al sistema en producción esté siempre a punto, actualizado y correctamente dimensionado según la demanda de los usuarios.

Una de las plataformas de este tipo es Firebase de Google teniendo otras compañias plataformas similares. Amazón dispone de AWS Lamda o Microsoft dispone de Azure Functions.

Esta forma de computación se viene llamando Serverless y está muy bien descrita en  https://www.genbeta.com/desarrollo/que-serverless-que-adoptarlo-desarrollo-tu-proxima-aplicacion

Es este artículo se presenta un ejemplo de utilización de Firebase. El objetivo es explicar de forma rápida a modo introductorio cómo se usa Firebase para que el lector se pueda hacer a la idea de las posibilidades que suministra este tipo de plataformas de forma rápida y sencilla.

El ejemplo consiste en una página html que contiene una función javascript que accede a los datos de una base de datos alojada en un proyecto Firebase. Para construir el ejemplo se han realizado las siguientes acciones:

  1. Crear un proyecto Firebase. Dentro del proyecto crear una base de datos con una colección y un documento con datos.
  2. Agregar una aplicación al proyecto Firebase.
  3. Desarrollar la aplicación, en este caso codificar la página html y la función javascript. La página está desplegada y se puede consultar en https://miprimerproyecto-e2f9e.web.app/paginafirebase.html 
  4. Desplegar la aplicación en Firebase. Para ello:
    • Se instala firebase tools con el comando "npm install -g firebase-tools". Para hacer esto es necesario tener instalado node y node package manager.
    • Se inicia sesión en Firebase con el comando "firebase login".
    • Se inicializa la aplicación para que sea desplegable en firebase con el comando "firebase init".
Para más detalles visitar la documentación de Firebase https://firebase.google.com/docs/web/setup?authuser=0#create-project 

Una vez hecho esto se puede probar la aplicación en local. Para ello se arranca el servidor con el comando "firebase serve". Una vez probada, para desplegar la aplicación en producción en la plataforma Firebase se usa el comando "firebase deploy". Y voilà, la aplicación está en producción lista para su utilización.

domingo, 5 de abril de 2020

Cómo usar Git y GitHub


Git es un repositorio distribuido. Esto quiere decir que cada desarrollador tiene un repositorio instalado en local. Además hay un repositorio común donde compartir el código, en el caso que nos ocupa el repo común será un proyecto en GitHub.

El proyecto GitHub tiene una rama principal llamada master, esta va a contener la última versión del código funcionando. Se pueden crear ramas para distintos desarrollos pero en esta forma de uso solo se va a trabajar con la rama master.

Pasos a seguir para trabajar con Git y GitHub en el proyecto politicagitgithub:


Primera vez. Para crear el repositorio local git y descargar el contenido del repositorio de GitHub a local

-     Instalar Git. Para ello descargar un fichero ejecutable desde https://git-scm.com/downloads, el fichero a descargar depende del sistema operativo en el que queremos instalar Git. Se ejecuta y para asegurar la correcta instalación, ir a una pantalla de comandos y ejecutar el comando git --versión,  el sistema muestra la versión de Git instalada.

-          Para contener el repositorio local del proyecto se crea una carpeta en el sistema de archivos. En esta carpeta se crea el repositorio local con git clone de la siguiente manera:

1.       Acceder a la URL https://github.com/MarisaAfuera/politicagitgithub.
2.       Pulsar  el botón  "Clone or download"y entonces se muestra la pantalla:

 
3.     Copiar la URL y abrir una ventana de git bash que se habrá instalado con git. Situarse en la carpeta del proyecto yejecutar el comando:

git clone https://github.com/MarisaAfuera/aficionbaloncesto.git


Para el trabajo del día a día

Cuando un desarrollador va a empezar un trabajo sobre el código, lo primero que hace es traer (pull) a su repo local la última versión que hay en la rama master de GitHub. Para ello utilizar el  comando git pull origin master.

Después en local (su equipo) crea una rama para empezar a desarrollar lo que corresponda. Para crear la rama en la que va a trabajar usa el comando git checkout –b .

Trabaja añadiendo, modificando y borrando código en la rama creada en local. Cuando acaba ejecuta los comandos:


  •  git add . Este comando añade al repositorio local en la rama actual los ficheros nuevos, elimina los borrados y cambia los modificados.
  •  git commit –m “<motivo de los cambios>”. Este comando compromete (los da por buenos)  los cambios en local y los marca con el mensaje que escribimos en “motivo de los cambios”.
Ahora hay que integrar los cambios con el código de los demás desarrolladores llevando los cambios al repositorio remoto, en este caso GitHub. Para ello se  comunica al equipo que se va a realizar un “merge” a master de GitHub. El objetivo es que mientras se hace este merge, ningún otro integrante del equipo interfiera haciendo cambios a master. Para integrar los cambios realizados con el código que hay actualmente en master se ejecutan los siguientes comandos:

  •  git checkout master. Para volver a master del repo local.
  •  git pull origin master. Para traer al repo local los últimos cambios a master del repo compartido en GitHub.
  •  git merge nombre-de-rama. Para mezclar los cambios de la rama del repo local con el código en master.  Pueden surgir conflictos que se deben resolver para realizar el merge, algunos conflictos tendrán que ser resueltos en colaboración con otros integrantes del equipo.
  •  git push origin master. Para llevar los cambios a master de GitHub.

Conclusión

Esta es una posible forma de uso de Git y GitHub para el control de versiones del código y la documentación de un proyecto. Esta en una forma muy sencilla de uso de estas herramientas. La política de uso que se emplee en cada caso será algo que los equipos de desarrollo deben acordar cuando aborden un proyecto de desarrollo.