Mostrando entradas con la etiqueta Javascript. Mostrar todas las entradas
Mostrando entradas con la etiqueta Javascript. Mostrar todas las entradas

lunes, 28 de enero de 2019

Extraer contenido de páginas web y XML con Node.js y jQuery

A veces necesitamos obtener información a partir del contenido de páginas web: imágenes, enlaces, índices, atributos, etc. Existen muchas formas de hacer esto, y las más comunes hacen uso de algún lenguaje interpretado (como Python y Powershell) y alguna librería para procesar XML o el DOM de HTML, pero eso requiere algún grado de experticia en dichas herramientas.

Sin embargo, hay una librería vieja y confiable con la que muchos programadores, en especial los web, están familiarizados, para manipular el DOM de los documentos HTML: jQuery. Esta librería proporciona una gran facilidad para hacer uso de selectores estándar de CSS, así como funciones especiales de búsqueda de elementos. Así que, utilizando Linux como sistema operativo (por lo que no contaba con Powershell), y estando familiarizado con JavaScript/jQuery/Node.js, esta resultó ser la opción más rápida y fácil para mí.

Sin más preámbulo, esto es lo que podemos hacer para extraer información de una página web utilizando jQuery y Node.js:

  1. Creamos un proyecto nuevo con NPM. Para ello ejecutamos el comando npm init, el cual nos solicita información opcional del proyecto paso a paso. Podemos dejar todas las opciones por defecto, o ajustar lo que necesitemos según el caso. Para este ejemplo se modificó el Entry point de "index.js" a "leerHtml.js", para describir el contenido del script. También se cambió la licencia a MIT. El cambio de nombre y licencia solo son una convención personal, no son obligatorios. Por otra parte, cabe mencionar que para este ejemplo se utilizará Node v10.15.0 con NPM v6.4.1, que es la versión con soporte de largo plazo (LTS) al momento de escribir esta entrada.
  2. Instalamos los paquetes request-promise, jsdom y jquery. El primer paquete nos permitirá obtener el HTML desde la web; el segundo paquete nos servirá para modelar el DOM del documento HTML en JavaScript puro; y el tercero es el que utilizaremos para examinarlo y extraer contenido.
  3. Creamos el archivo leerHtml.js, en el que realizaremos el proceso de extracción de datos del HTML. Para este ejemplo, obtendremos los textos alternativos de todas las imágenes de un artículo de Wikipedia. Se listarán solamente aquellas imágenes que posean el atributo alt, y que este no se encuentre vacío. El código fuente y la descripción de cada paso se muestran a continuación:
    4. Cabe notar algunos puntos:
    • Es necesario crear el objeto jQuery a partir del DOM generado con JSDOM.
    • Los métodos auxiliares de jQuery, como find y each, nos retornan objetos HTML, por lo que es necesario crear objetos de jQuery a partir de estos. Tal es el caso de las variables imagen e imagenes, a las cuales fue necesario aplicar la función $.
  4. Finalmente, para ejecutar el script, escribimos en la terminal node leerHtml.js Podremos ver como se muestra en la línea de comandos el listado de los textos alternativos de las imágenes que se encontraron en la página web.


Esta técnica no solo es aplicable para páginas HTML descargadas desde la web, sino también para archivos cargados desde disco, así como para formato XML. A continuación se muestra un script llamado leerXml.js, para obtener de un archivo XML llamado "paises.xml", el listado de países cuyo código inicia con la letra "a":


Puede notarse que el proceso es muy similar, ya que XML es el superset de HTML, y es también soportado por JSDOM y jQuery. Para ejecutar el script, escribimos en la terminal el comando node leerXml.js, lo cual muestra el siguiente resultado:


El código fuente de este ejemplo se puede encontrar acá: https://github.com/guillegr123/node-jq-readxml

domingo, 19 de agosto de 2018

Mi primera aplicación web con React


Bueno, por azares del destino, finalmente fue inevitable tener que adquirir el gusto de React. Es la tendencia, culpa de Facebook. Habiéndome desahogado, empecemos.

Intro a React.js

React.js es una herramienta de JavaScript para construir interfaces de usuario. La forma más fácil de crear el esqueleto de una aplicación de React, es utilizar la herramienta de Node JS llamada create-react-app (😒), la cual podemos instalar de forma global a través de la terminal mediante el siguiente comando (nótese que debe ejecutarse como administrador -en Windows- o root -en Linux-):

# npm install -g create-react-app

Luego, procedemos a crear la aplicación base, con el nombre "peliculas-app" (pronto verán el porqué del nombre):

$ create-react-app peliculas-app

Luego, nos trasladamos al nuevo directorio creado para la app, y la probamos ejecutar:

$ cd peliculas-app/
$ npm start

Esto compila la aplicación con Webpack y la ejecuta con un servidor interno de desarrollo, publicándola localmente en el puerto 3000, por defecto. Al abrir la aplicación web, se muestra lo siguiente:

Al observar la estructura de la aplicación, tenemos algo similar a esto:
La página principal se encuentra en el archivo public/index.html. Por otra parte, el componente principal de React, el cual renderiza todo el contenido mostrado en la página inicial, se encuentra en el archivo src/App.js. En este último archivo, por ejemplo, podemos reemplazar el contenido del párrafo que usa la clase App-intro, con el texto "Hola mundo", así:

Una vez que se guarda el archivo, se recompila la aplicación de forma automática, por lo que podemos ver el cambio reflejado en el navegador de forma casi inmediata:

Creación de la aplicación: lista de películas

Luego de esta rápida introducción práctica a React, procederé a crear mi primera aplicación web con React. La aplicación consistirá en mostrar en pantalla un listado de nombres de películas, obtenidos desde un arreglo de datos. La película incluirá el título, una breve sinopsis y una imagen. El listado, así como cada ítem de este, será un componente distinto. Comencemos:

1. Primero agregaremos el listado de películas en el estado de la aplicación. Pondremos 3 para este ejemplo:


2. Luego crearemos un nuevo componente para mostrar cada ítem de la lista, en el cual mostraremos la imagen, el nombre y la sinopsis de esta. Cada ítem sera un elemento de tipo <li>. Dicho componente se creará en un nuevo archivo de JavaScript, al que llamaremos Item.js, dentro de la carpeta src.


En este componente se recibe como parámetro la variable props, la cual nos sirve para recibir datos de quien invoque este componente. En este caso, dentro de props recibiremos el campo pelicula, el cual contendrá la información de un elemento de la lista de películas: id, nombre, sinopsis y urlImagen. El componente renderiza la vista HTML que definimos en el cuerpo de la función, y en la cual podemos hacer uso de los props al incluirlos entre llaves.

3. Seguidamente procedemos a crear un tercer componente, en un nuevo archivo que nombraremos Lista.js. Este componente será el encargado de renderizar la lista, haciendo uso del componente Item para renderizar cada elemento, de la siguiente forma:


Nótese que este componente recibe el parámetro listaPeliculas dentro de los props, el cual contendrá el arreglo de películas. Este arreglo se itera mediante la función map(), dentro del cuerpo de la lista (<ul></ul>), para convertir cada elemento del arreglo en una vista, haciendo uso del componente Item. Puede observarse que el elemento es pasado a cada Item mediante el atributo pelicula, que es el nombre con el que se le hace referencia en dicho componente. Cabe mencionar que para hacer uso del componente Item, debemos importarlo al inicio del archivo de javascript.

4. Para armar la aplicación final, sustituimos en el componente principal (App.js) el párrafo que contenía la frase "Hola Mundo", por un div, y dentro de este colocamos el elemento Lista, al cual le proporcionaremos el arreglo de películas a través del atributo listaPeliculas, que es el nombre con el cual le hacemos referencia en dicho componente. Cabe recordar que para poder utilizar el componente Lista, debemos importarlo antes.


El resultado final del componente principal contenido en App.js es el siguiente:


5. Finalmente, para mostrar las películas de forma ordenada, agregamos algunos estilos CSS al final del archivo App.css, para aplicarlos globalmente a través del componente principal:


El resultado es el siguiente:
El código fuente de este ejemplo lo pueden encontrar acá: https://github.com/guillegr123/react-primera-app

Intenté que los commits fueran quedando conforme a cada paso descrito en esta entrada del blog. Pueden consultarlos acá: https://github.com/guillegr123/react-primera-app/commits/master

Conclusiones

Después de haber hecho esta primera prueba con React, resulta que se parece a Vue 2, jajaja. Al menos hasta donde pude ver, el concepto de componente es similar. Seguiré viendo qué tan parecido es a medida vaya progresando con esta herramienta.

Saludos. Happy coding!

sábado, 7 de julio de 2018

Plantilla de Onsen UI para Vue CLI

Hola, en esta ocasión quería compartirles una plantilla de Vue CLI para crear un proyecto de aplicación web progresiva (PWA) con Onsen UI y Vue JS 2. Onsen UI es una librería de componentes para aplicaciones móviles híbridas, es decir, aplicaciones creadas con HTML y Javascript. Dicha librería está adaptada a 4 frameworks para la creación de aplicaciones web dinámicas: Angular JS (1), Angular 2+, React JS y Vue JS 2.

Vue JS 2 ofrece la herramienta de línea de comandos Vue CLI que permite crear la estructura básica de aplicaciones de una sola página (Single Page Applications, o SPA) de forma amigable. Para más detalles sobre la instalación y uso de esta herramienta recomiendo ver los siguientes enlaces:
La plantilla que he creado es un fork de la plantilla de Onsen UI para PWA con Webpack, la cual a su vez se basa en la plantilla para PWA de Vue JS. La plantilla de Onsen UI incluye:
  • Aplicación básica de ejemplo utilizando Onsen UI.
  • Webpack, para empaquetar los componentes del sitio web.
  • Recarga en caliente, para actualizar los cambios realizados en el código de forma inmediata en el navegador.
  • Verificador de sintaxis (lint).
  • Pruebas unitarias y de integración.
  • Extracción de CSS.
  • Manejo de estados utilizando Vuex.
Adicional a esto, he agregado las siguientes características en mi versión de la plantilla:
  • Soporte para TypeScript.
  • Uso de Vue Router para el manejo de rutas en aplicaciones de una sola página.
  • Integración de Vue Router y el componente Ons Navigator, mediante Vuex, para el cambio de páginas, basado en este ejemplo.
  • Axios como cliente HTTP para el consumo de servicios web.
  • La aplicación de ejemplo ha sido extendida para mostrar el manejo de rutas y la descarga de datos desde servicio web.
El código fuente de la plantilla está disponible acá: https://github.com/guillegr123/ons-vue-pwa-webpack-full

Para crear una aplicación utilizando la plantilla, basta ejecutar el siguiente comando, y contestar algunas preguntas:

$ vue init guillegr123/ons-vue-pwa-webpack-full mi-app

Luego, para instalar las dependencias:

$ cd mi-app
$ npm install

Y finalmente, para ejecutar en modo de desarrollo:

$ npm run dev

Con ello se muestra la siguiente aplicación de ejemplo:
Algunos puntos de interés:
  • En el menú lateral existe una sección llamada "internal links", que hace referencia a las páginas dentro de la app. El resto son enlaces externos. 
  • En la página de "Movies" se descarga un listado de películas desde un servicio web utilizando Axios.
Cualquier comentario/sugerencia con respecto a la plantilla, así como cualquier contribución, es bienvenida.
Saludos.

    martes, 15 de mayo de 2018

    Tutorial de Vue.js 2 - 2. Creación de proyecto desde plantilla

    Índice:

    Hola nuevamente, en esta ocasión continuaré con la segunda entrega del tutorial de Vue.js 2. En esta ocasión trataremos los siguientes puntos:
    • Definición general del ejemplo
    • Descarga de plantilla WebPack.
    • Ejecución de proyecto de ejemplo.
    • Introducción a la estructura del proyecto

    Definición del ejemplo

    Para este tutorial, como ejemplo se elaborará una lista de contactos telefónicos, que permita hacer las operaciones ACME con ellos: Añadir, Consultar, Modificar o Eliminar. Los requerimientos específicos se irán describiendo a medida se vaya avanzando en el tutorial.

    Descarga de plantilla WebPack

    Asumiendo que se instalaron los componentes necesarios indicados en la primera parte del tutorial, podemos proceder a crear la carpeta que contendrá nuestro proyecto en el lugar que deseemos. Luego, abrimos la consola en dicha carpeta, y procedemos a generar el nuevo proyecto a partir de la plantilla de webpack, haciendo uso de la herramienta de línea de comandos de Vue (vue-cli), para ejecutar el siguiente comando:

    $ vue init webpack vue2-tutorial-contactos

    Con ese comando, le indicamos a la línea de comandos de Vue que deseamos iniciar un nuevo proyecto, a partir de la plantilla webpack, y cuyo nombre será vue2-tutorial-contactos. Luego de ello, para completar la creación del proyecto, la herramienta interactiva preguntará al usuario la información necesaria para generarlo:


    En algunos casos, la herramienta mostrará los valores por defecto a un lado del dato requerido, en un tono más claro, y entre paréntesis. Tal es el caso del nombre del proyecto, que como puede notarse es el mismo que le enviamos como tercer parámetro al comando para generar el proyecto. Si deseamos utilizar el valor por defecto, solamente presionamos ENTER. Si no, digitamos el nuevo valor, y presionamos ENTER.

    Luego de ello nos solicita la descripción del proyecto. En este caso, ingresamos una pequeña sinopsis de nuestro proyecto de prueba:


    El siguiente dato solicitado es el autor del proyecto, el cual se obtiene de la configuración global de GIT:


    Seguidamente el asistente nos indica que elijamos el tipo de compilación a utilizar con Vue. En este ejemplo utilizaremos la recomendada, la cual es más fácil de utilizar, pero levemente más pesada (de acuerdo a la descripción, no he probado la segunda opción, jejeje):


    Luego debemos elegir si instalar o no el vue-router en nuestro proyecto, el cual se utiliza para navegar entre distintas partes de la aplicación. Si bien no es necesario poseer un componente de enrutamiento elaborado para este proyecto, ya que no tendremos una gran cantidad de "páginas", lo utilizaremos a modo de ejemplo, ya que puede ser de utilidad para proyectos de mayor envergadura. Para instalarlo ingresamos la letra Y, o bien presionamos ENTER solamente, ya que esta es la opción por defecto.


    Después se solicita indicar si se utilizará la herramienta ESLint para analizar el código fuente (linter). Si bien no es necesario, ya que Vetur lo hará dentro del Visual Studio Code, dejaremos que el asistente lo instale, para ver cómo se ejecuta y muestra esta herramienta al momento de correr el proyecto.


    Luego elegimos la configuración estándar de reglas de ESLint (he aquí una comparación de las configuraciones de lint):


    En el siguiente paso, se nos pide indicar si deseamos que el asistente prepare pruebas unitarias para el proyecto. Indicaremos que sí (Y), y seguidamente elegiremos a Karma y Mocha como herramientas para la creación y ejecución de las pruebas.


    Como penúltimo paso, se nos pregunta si deseamos que se preparen las pruebas de extremo a extremo (end-to-end) utilizando Nightwatch. Indicaremos que sí.


    Y finalmente, el asistente nos consulta si deseamos que se ejecute el comando npm install, una vez creado el proyecto, para instalar todas las librerías y componentes necesarios para poderlo ejecutar. Seleccionaremos que sí, utilizando la herramienta NPM:


    Una vez completados estos pasos, el asistente procede a crear el proyecto, e instalar los paquetes necesarios:


    Y nos indica cuando el proceso ha finalizado:


    Ejecución del proyecto de ejemplo

    Allí, en color mostaza, nos indica como podemos ejecutar el proyecto. Tal como dice allí, basta con ingresar a la carpeta vue2-tutorial-contactos, que es la que contiene el proyecto (nótese que el nombre de la carpeta es el mismo que indicamos al iniciar el asistente de vue-cli), y ejecutar el comando npm run dev. Con ello se procede a construir el proyecto.


    Una vez finalizada la construcción, se nos indica que se puede ver la aplicación en la URL: http://localhost:8080


    Al abrir la ruta en el navegador, vemos el resultado:


    Introducción a la estructura del proyecto

    Ahora que el proyecto ya esta listo, podemos abrir la carpeta que lo contiene utilizando Visual Studio Code, con la opción de menú File > Open Folder:


    En este punto las partes de la estructura del proyecto que más nos interesan son las siguientes:
    • src: contiene el código fuente de Vue del proyecto.
    • index.html: es la página de inicio de la aplicación.
    Una gran ventaja de que este proyecto haya sido generado con WebPack es que posee la característica de hot-reload, lo cual quiere decir que luego de modificar un archivo, este es recompilado, y la página web es refrescada automáticamente para ver los cambios. Para probar esto, podemos modificar el mensaje dentro archivo src/components/HelloWorld.vue, así:


    Al guardar el archivo, WebPack detecta el cambio, y recompila el archivo modificado, lo cual puede observarse en la terminal donde está corriendo la aplicación:


    Y una vez finalizada la compilación, la página es refrescada automáticamente en nuestro navegador (y si no es el caso, basta que la refresquemos nosotros mismos). Nótese el cambio en el texto del mensaje:


    Esto es todo en esta ocasión. Pueden encontrar el código fuente de esta parte del tutorial acá: https://github.com/guillegr123/vue2-tutorial-contactos/tree/tutorial-parte-02. Espero próximamente poder mostrar como crear nuestra lista inicial de contactos. Saludos.

    miércoles, 6 de diciembre de 2017

    WP - Diseño Web - Panel de carga (loading panel)


    Hola nuevamente. Tratando de manternerme conectado, (y mientras espero a que se termine de instalar SQL Server), en esta ocasión quiero compartirles una forma bastante sencilla de hacer un panel de cargado con CSS y javascript. El panel de cargado usualmente es un componente que se utiliza para invalidar un área determinada de la página web mientras se realiza algún proceso, para evitar que el usuario realice alguna acción dentro de dicha área.

    El panel que les mostraré básicamente es un DIV que poseerá un GIF animado como indicador de procesamiento. Este “panel” se superpondrá a otro elemento DIV, que es el área a invalidar.

    Primeramente, este es el HTML de la página web:



    Obsérvese que el DIV que se desea invalidar es el que posee el ID "area_invalidar". Dentro de este se ha colocado el DIV que servirá de panel de cargado, como primer elemento hijo (ID="panel_carga").

    Luego, tenemos el archivo CSS ("estilos.css"):



    La parte de mayor interés está marcada entre los comentarios "Clases CSS de interés". Nótese que el DIV que representa el área a invalidar tendrá la propiedad position con el valor relative, mientras que el DIV que será nuestro panel de carga tendrá el valor de absolute. Esto se debe a que queremos indicar que las propiedades de posición y tamaño del DIV panel de carga serán relativas con respecto al DIV área a invalidar. Gracias a ello podemos especificar el ancho y alto del DIV panel de carga como 100%, para indicar que éste ocupará todo el espacio del área a invalidar.

    Luego, en la misma clase utilizada para el panel de carga, tenemos la propiedad de opacidad (alpha para Internet Explorer, opacity para Mozilla Firefox y otros), con la cual especificamos la razón o porcentaje de opacidad del panel de cargado. Al combinarla con un color de fondo (background-color) se logra un efecto de oscurecimiento y transparencia sobre el área invalidada. Adicionalmente a ello se coloca una imagen de fondo, que en este caso es un GIF animado, mediante la propiedad background-image, para que muestre al usuario un indicador de que se está realizando alguna clase de procesamiento. La imagen es centrada y aparece solamente una vez, gracias a las propiedades background-position:center y background-repeat:no-repeat, respectivamente.

    También se tiene la propiedad z-index, que indica la “altura” o nivel del elemento. Dicha propiedad tiene significado dentro del elemento padre, por lo que tiene influencia para todos los nodos hermanos. El valor por defecto es cero, por lo que al colocar un valor de, por ejemplo, 10, nos aseguramos de que el panel de cargado estará sobre el resto de elementos contenidos en el DIV de área a invalidar.

    Finalmente tenemos la propiedad de visibilidad, que le colocamos el valor de hidden, para que el panel de carga aparezca oculto al mostrarse la página.

    Por otra parte se tiene el archivo de código fuente de Javascript. El javascript es necesario para realizar el cambio de las propiedades CSS a través de las acciones del usuario.



    En este caso, según puede observarse en la página HTML (arriba), al presionar el botón "Enviar" se ejecutará la función procesar, que recibe como parámetro el ID del DIV que sirve de panel de carga. Dicha función básicamente se encarga de mostrar el DIV de carga.

    Nótese que para efectos demostrativos, al final de la función se colocó una llamada a la función setTimeout, para que el panel de cargado se oculte después de 5 segundos. En una aplicación web real, el panel debería de ocultarse una vez se haya obtenido alguna respuesta o resultado después del proceso solicitado.

    Este es el resultado final, antes de presionar el botón:


    Luego de presionar el botón, nótese el aparecimiento del panel de cargado solamente sobre el área a invalidar, que para efectos de este ejemplo corresponde al mismo formulario web:


    Finalmente después de 5 segundos se oculta el panel de cargado, gracias al uso de la función SetTimeOut.

    Como pueden observar este método es una forma fácil, rápida y directa de crear un panel de cargado DIV, utilizando solamente HTML, CSS y javascript puros.

    Les debo el código fuente para descargar, ya que lo dejé en otra computadora que he prestado por el momento.

    Saludos.

    Publicado originalmente el 13/02/2013, en https://itsouvenirs.wordpress.com/2013/02/13/diseno-web-panel-de-carga-loading-panel/.

    domingo, 22 de octubre de 2017

    Tutorial de Vue.js 2 - 1. Qué es Vue.js y preparación del entorno


    Índice:

    Hola, este es un pequeño tutorial acerca de Vue.js 2 (que espero sí pase de la primera entrega, a diferencia de mis intentos fallidos con Symfony 2 - que por cierto ya van por la v3 - y WebAPI 2 - que por cierto ya esta siendo sustituida por ASP.NET Core 2). La idea de este tutorial surgió como una forma de práctica, después de seguir el tutorial Build a To-Do App with Vue.js 2 de Jeremy Kithome en scotch.io, y para compartir acerca del framework en español.

    En esta primera entrega se explicará un poco acerca de qué es Vue.js, y cómo preparar el entorno de desarrollo utilizando Node JS y la herramienta de línea de comandos provista por el framework.

    Sin más que agregar, ¡empecemos!

    ¿Qué es Vue.js?

    Vue (pronunciado viú) es un framework progresivo para construir interfaces de usuario utilizando HTML, CSS y Javascript. Es progresivo porque ha sido diseñado para ser adoptado de forma gradual, siendo posible integrarlo con otras librerías en proyectos existentes. Este framework ha sido influenciado desde sus inicios por AngularJS (Angular 1); sin embargo, es más liviano que este, y que otras alternativas similares.

    Preparación del entorno de desarrollo

    Aunque Vue no depende de ningún framework o herramienta de terceros, y puede codificarse usando cualquier editor de texto, para este tutorial se hará uso de Node JS y la herramienta Vue CLI para la creación del "esqueleto" de la aplicación y su ejecución, y Visual Studio Code con una extensión para el soporte de los componentes de Vue, para la codificación.

    Primeramente, se procede a instalar Node JS. Para ello, se recomienda descargar e instalar la versión LTS desde el sitio web oficial (6.11.4 con NPM 3.10.10), para el sistema operativo que se esté utilizando: https://nodejs.org/es/download/

    Una vez instalado Node JS, procedemos a instalar la herramienta Vue CLI, que provee un conjunto de plantillas para la creación rápida de aplicaciones. También facilita su ejecución con recarga en caliente, y su compilación para ambiente de producción. Para instalar la herramienta se ejecuta en una terminal el siguiente comando:

    npm install -g vue-cli

    Para verificar que Vue CLI ha sido instalado correctamente, ejecutamos el comando vue en la línea de comandos, lo cual nos muestra las opciones de uso disponibles:


    Luego, con respecto a la edición del codigo fuente, se procede a descargar e instalar Visual Studio Code. La última versión del editor puede descargarse en el siguiente enlace, para el sistema operativo que se esté utilizando: https://code.visualstudio.com/download

    Finalmente, para facilitar la edición de los componentes de Vue, buscamos e instalamos "Vetur" en las extensiones de Visual Studio Code.



    Vetur es un conjunto de herramientas para trabajar con Vue, que incluye un servidor de lenguaje para VS Code, y provee las funcionaliedades de embellecimiento de código, revisión se errores, auto-completamiento, depuración, entre otras.

    Con esto ya se tiene un entorno listo para el desarrollo de nuestra primera aplicación con Vue. En la próxima entrada explicaré como crear el proyecto a partir de la plantilla de webpack, ejecutarlo, y agregar las primeras funcionalidades básicas.

    Ir a Parte 2: Creación de proyecto desde plantilla
    Con la tecnología de Blogger.