Forem: Anartz Mugika Ledo

Web Scrapping con NodeJS

Anartz Mugika Ledo — Tue, 18 Aug 2020 16:47:48 +0000

En este nuevo artículo, vamos a trabajar con Node aplicando la técnica “Web-Scrapping”

0.- ¿Qué es?

El “Web-scrapping” se refiere a la recopilación de información de un sitio web a través de scripts automatizados. Esto va a facilitarnos el proceso de recopilación de grandes cantidades de datos de sitios web donde no se ha definido ninguna API oficial.

1.- ¿En qué consiste?

El “Web-scrapping” se puede dividir en dos pasos principales: obtener el código fuente HTML del sitio web a través de una solicitud HTTP o mediante un navegador sin cabeza, y analizar los datos sin procesar para extraer solo la información que nos interesa en un formato utilizable.

2.- Para qué sirve el scraping

Estas son algunas de las utilidades más habituales para las que usamos esta técnica:

Agregadores de contenido
Reputación online
Caza de tendencias (cool hunting)
Optimización de precios
Monitorización de la competencia
Optimización ecommerce
Google Search Analysis

3.- Advertencia antes de empezar a extraer datos

¡Tener cuidado! El “Web scrapping”va en contra de los términos de servicio de la mayoría de los sitios web. Nuestra dirección IP puede ser prohibida en un sitio web si aplicamos la técnica con demasiada frecuencia o de manera maliciosa.

Por eso es importante no abusar de ello y no hacerlo con fines maliciosos.

4.- Preparativos del proyecto

Antes de empezar a trabajar con el proyecto, tenemos que tener instalado:

NodeJS
NPM

Si no lo tenemos, acudimos a la página https://nodejs.org/en/ y seguimos las indicaciones para su descarga e instalación. Es muy sencillo.

Una vez que ya tenemos lo necesario para trabajar accedemos al terminal y dentro el creamos un nuevo directorio en el que vamos a trabajar.

mkdir web-scrapping && cd web-scrapping

Ahora creamos el fichero package.json, que será el manifiesto de nuestro proyecto que servirá para almacenar la información más relevante de nuestro proyecto como nombre, descripción, dependencias,…

npm init -y

Modificamos el package.json para añadirle la descripción, las palabras clave (keywords) y el autor, quedará de la siguiente manera:

Creamos el ficheros index.js que será donde vamos a ejecutar la operación para extraer la información e instalamos las dependencias que vamos a necesitar para trabajar con ello.

npm install request request-promise cheerio objects-to-csv

Las librerías que instalamos harán lo siguiente:

request / request-promise : Para traer la información que queremos descargar.
cheerio: Para manipular y seleccionar la información que queremos extraer únicamente.
objects-to-csv: Para guardar la información en un fichero CSV después de obtener lo que deseamos.

5.- Empezando a hacer Scrapping

Vamos a trabajar con la web que nos brinda información de las estadísticas del ciclismo mundial llamada Pro Cycling Stats.

Lo que vamos a querer obtener concretamente es la información del ranking UCI PRO TOUR de la clasificación individual de los ciclistas.

Por lo tanto, vamos a trabajar con esta URL:

PCS Ranking Individual

_Summation of PCS points over a 12-month + 2 weeks overlap period. Races are counted once. After the finish of a stage…_www.procyclingstats.com

Cuya página tendrá esta apariencia:

Realizamos mediante request-promise una solicitud HTTP en la URL mencionada.

Si ejecutamos y visualizamos el log de salida, nos da toda la información de esa página.

Ya tenemos el primer paso en el que somos capaces de extraer la información de una URL concreta y descargar todo su código HTML. Todo lo que se ha visualizado aquí es como si hiciesemos en el navegador “click derecho” en la página y seleccionasemos “Ver código fuente de la página”.

6.- Seleccionando la información que deseamos extraer

Ahora que ya hemos conseguido extraer la información, vamos a seleccionar la que queremos obtener y para saber lo que tenemos que obtener, podemos hacer uso de las herramientas de desarrollo que nos proporcionan navegadores como Firefox o Google Chrome.

Para acceder a esas herramientas, tanto en uno como en otro, pulsamos click derecho sobre cualquier apartado de la web y seleccionamos “Inspeccionar elemento” (Firefox) ó “Inspeccionar” (Chrome).

A continuación os muestro la parte que queremos “extraer” para obtener los datos que queremos, en este caso la información de:

Posición en el ranking.
Ciclista.
URL con la información principal del ciclista.
Equipo al que pertenece.
Puntos obtenidos.

Información con la clasificación de los ciclistas del ranking UCI PRO Tour

Ahora que ya tenemos localizado el apartado que queremos obtener para tratar sus datos, vamos a hacer referencia a ese apartado de la tabla y vamos a obtener todas las filas de esa tabla. Vamos a hacer referencia dentro de la tabla a todos los “tr”.

Por lo tanto, nos quedaría algo de este estilo:

Como véis, después de asignar a la constante el extracto con el que queremos trabajar, pones la orden la orden “debugger” y pulsamos estando en Visual Studio code y ese fichero seleccionado “F5” que sirve para ejecutar en modo debugger.

En el momento que se ejecuta, si os fijáis en la siguiente imagen, podéis apreciar que el cursor amarillo está parado en la línea de debugger.

Gracias a esta parada, podemos ir viendo la información que se ha ido almacenando en las constantes, variables anteriores y demás.

Lo que nos interesa en este momento es ver todos los nodos que tenemos dentro de la constantes “rankingTable”. Poniendo el cursor veremos que tenemos hasta un total de 100, que casualmente son los ciclistas que aparecen en la clasificación. Vamos paso a paso correctamente.

7.- Seleccionar los datos por ciclista deseados

Ahora que ya tenemos dentro de la constante los nodos con la información de los ciclistas, lo que tenemos que hacer es recorrerlos uno por uno y para hacer esto debemos de usar la función “each”.

Vamos a implemenarla y dentro vamos a mostrar el log en formato texto con todo el contenido de las 7 columnas que tenemos por fila.

Ejecutamos modo debugger (F5) y podemos ver como nos aparece la información de los ciclistas, fila a fila en la consola:

Resultado recorriendo todos los nodos que hemos encontrado con la información de los ciclistas

Ahora lo que nos queda es extraer los valores que queremos individualmente y almacenarlo en un objeto para añadirlos en un array y tener toda la información a mano para poder guardarla en un fichero CSV, que será el último paso que haremos.

Para seleccionar los elementos, en este caso, dentro del nodo tenemos 7 nodos hijos como podemos ver en esta imagen.

La información que tendremos en cada uno, será la siguiente. Así sabremos que tenemos que usar y que posición de los hijos tenemos que seleccionar.

Ranking Actual.
Ranking Previo a la actualización.
Diferencia de puestos entre ranking actual / anterior.
Ciclista.
Equipo.
Puntos totales
No hay nada de información.

Como hemos mencionado anteriormente, lo que queremos extraer es el ranking actual (1), información del ciclista (4) como es el nombre y enlace a su información más detallada, equipo (5) y puntos totales (6).

Para hacer esto, como queremos seleccionar los hijos del elemento con el que estamos trabajando, vamos a usar el selector “nth-child(posicion)” para seleccionar el que queremos utilizar y lo vamos a hacer refiriéndonos al elemento “td”

Quedará de la siguiente manera:

Si ejecutamos, ya tendremos la información “limpia” con lo que queremos únicamente:

8.- Almacenar en una lista de objetos

Ahora que ya tenemos los datos que queremos guardar, tenemos que almacenarlo en una lista de objetos para que al final de este artículo podamos crear un fichero CSV con esa información y tengamos un backup de lo que hemos descargado, para hacer uso de esa información.

Añadimos un array al inicio del script y dentro del each almacenamos como objeto dentro de esa lista añadiendo las propiedades necesarias.

Como veís, ya tenemos todo almacenado en una lista con los items del ranking.

Si ejecutamos el modo debugger y ponemos el cursor encima de rankingItems dentro del each de la tabla del ranking, podremos ver que tiene 100 elementos, que es la cantidad de ciclistas que aparecen en el ranking.

9.- Guardar la información en un fichero CSV

Ahora que ya tenemos toda la información deseada, lo único que nos queda es hacer una copia para no tener que andar descargando una y otra vez la información.

Creamos una función y guardamos en el disco lo que hemos almacenado en el array.

El resultado que tendremos en el fichero CSV será el siguiente:

El resultado lo encontraremos en el siguiente repositorio:

Anartz Mugika Ledo / scapping-uci-pro-tour-riders-ranking

_Ejemplo de Scrapping de la tabla de clasificación del ranking actual. Artículo escrito en Medium:_gitlab.com

By Anartz Mugika Ledo🤗 on November 3, 2019.

Canonical link

Exported from Medium on August 18, 2020.

Trabajando con Lazy Loading en Angular 8, 9, 10

Anartz Mugika Ledo — Tue, 18 Aug 2020 16:44:40 +0000

En este artículo os voy a hablar de Lazy Loading, técnica que sirve para la mejora del rendimiento y velocidad de las aplicaciones Angular y que se implementará a partir de la versión 8, haciendo uso de la importación del módulo en vez de traer la referencia en un string. Este cambio, hay que hacerlo si o si en la versión 9 que salió a la luz a principios de febrero del 2020.

Por esa razón, os voy a enseñar a trabajar aplicando la técnica Lazy Loading en Angular que nos va a ayudar a mejorar el rendimiento de nuestras aplicaciones y en consecuencia, conseguiremos que el usuario final tenga una experiencia de navegación más agradable y satisfactoria

1.- ¿Qué pasa cuando una aplicación de Angular inicia?

Por defecto, nuestras aplicaciones de Angular cargan todos los componentes que están importados en nuestro módulo principal app.module.ts y dependiendo de los módulos que contenga puede ser que tarde más o menos en cargar nuestra aplicación.

Para resolver ese problema en el que a veces cargamos módulos que igual no utilizaremos en ningún momento, aplicaremos lo que es Lazy Loading.

2.- ¿Qué es Lazy Loading?

Según lo que encontramos en Wikipedia

> La carga diferida (en inglés lazy loading), es un patrón de diseño comúnmente usado en la programación informática que consiste en retrasar la carga o inicialización de un objeto hasta el mismo momento de su utilización. Esto contribuye a la eficiencia de los programas, evitando la precarga de objetos que podrían no llegar a utilizarse. El opuesto de la carga diferida es la carga previa, precarga o eager loading.

Esta técnica usada en Angular nos permite cargar sólo, el o los componentes que necesitemos al inicio de nuestra aplicación, estos componentes no cargan cada vez que entres, sino que solo cargan una sola vez.

Cuando usamos Lazy Loading hacemos llamado de un módulo mediante el sistema de rutas de Angular y este módulo a su vez tiene rutas hijas que se encargan de cargar el componente solicitado por el usuario, más adelante entenderemos esto mejor.

3.- Comenzando con el proyecto

Vamos a crear el proyecto

3.1.- Crear proyecto Angular

ng new angular-lazy-loading --routing --style=css && cd angular-lazy-loading

--routing: Para que nos genere un módulo de ruta listo para funcionar

--style=css: Para que nos añada las hojas de estilos CSS

Ahora que ya tenemos nuestro proyecto creado, el siguiente paso que vamos hacer es generar 3 componentes.

3.2.- Crear los componentes / módulos para el proyecto

Vamos a crear los componentes llamados home, about, contact con sus módulos que se encargarán de gestionar la carga de la información mediante la gestión de sus rutas hijas

3.2.1.- Creación de los módulos

ng g m @pages/home --routing  
ng g m @pages/about --routing  
ng g m @pages/contact --routing

El resultado será el siguiente donde podremos ver que se han creado dos ficheros por carpeta:

Uno de ellos es el módulo principal donde vamos a cargar los componentes, módulos que necesitemos y el modulo de enrutamiento.

El otro fichero es el que corresponde al módulo de enrutamiento donde vamos a cargar el componente con una ruta hija.

3.2.2.- Creación de los componentes

ng g c @pages/home --skipTests=true  
ng g c @pages/about --skipTests=true  
ng g c @pages/contact --skipTests=true

> La opción --skipTests=true corresponde a la exclusión de los ficheros de los tests que no vamos a necesitar en este caso.

Estos serían los ficheros que compondrían una página que se va a cargar mediante Lazy Loading. En este caso os muestro el que corresponde a “about”

4.- Añadir rutas hijas en los módulos para las páginas

Ahora vamos a trabajar sobre el módulo about-routing.module.ts.

Dentro de este archivo creamos la ruta hija que servirá para cargar el componente about.component.ts desde el módulo about.module.ts

Primero importamos los componentes que van a depender de ese módulo, creamos las rutas y luego dentro de imports hacemos uso de forChild para especificar que ese módulo va a servir rutas hijas.

En el fichero about.module.ts ya tenemos importado el AboutRoutingModule

Hacemos los mismo pero con las páginas home y contact.

home-routing.module.ts

contact-routing.module.ts

5.- Configurando el fichero principal de rutas

Ahora vamos a nuestro módulo de rutas principales app-routing.module.ts que quedará de la siguiente manera:

Dentro de nuestra variable routes vamos almacenar todas las rutas principales de nuestra aplicación.

Ruta home, aquí le decimos a Angular, cuando la ruta sea igual a home carga el hijo haciendo referencia al HomeModule. Si os fijáis aquí ya está aplicando el Lazy Loading.
Ruta about y contact, hacemos lo mismo pero haciendo las referencias a los módulos que les corresponden.
La última ruta le dice a Angular, cuando no especifique una url, llévame a la ruta home

El último paso es visualizar la información navegando entre diferentes páginas

6.- Comprobar rutas y visualizar las páginas

Accedemos al fichero app.component.html y borramos todo el contenido para añadir el siguiente:

Dejamos tres enlaces para navegar entre las diferentes páginas y el elemento “router-outlet” para cargar esas páginas.

> Para notar el cambio abrimos la consola del navegador y vamos a la pestaña “Red” (es necesario reiniciar la página para poder capturar los archivos en esta pestaña).

Ahora vamos hacer click a nuestro enlace para ir a la página “about”

Y lo mismo con la página “contact”

Si volvemos a cargar cualquiera de las páginas, ya no se cargarán los ficheros porque ya los tendremos cargados con la ejecución inicial de cada uno.

7.- Resultado del código

Este es el resultado de lo trabajado en este artículo.

Anartz Mugika Ledo / lazy-loading-angular

_Ejemplo de Lazy Loading Sencillo_gitlab.com

8.- Cursos

En relación con este artículo, os cuento que dispongo de varios cursos en Udemy a precios ecónocimicos en los que podéis aprender muchas cosas. Los cursos que dispongo actualmente:

NPM.Desarrollo y publicación de librerias en JS, TS, Angular (PAGO)
GraphQL con Angular de 0 a Experto. JWT, Sockets, MongoDB (PAGO)
Compodoc: Crea documentación en proyectos Angular/Ionic/TS (GRATIS)

Todos los cursos al mejor precio SIEMPRE en mi web

Canonical link

Modularizar los ficheros GraphQL para la definición de tipos (versión 2020)

Anartz Mugika Ledo — Tue, 18 Aug 2020 12:18:52 +0000

En GraphQL, como en otros tipos de implementaciones, hay momentos en el que vamos implementando más código para las nuevas funcionalidades, “causando” de manera inconsciente un pequeño “caos”, que si no le damos remedio lo antes posible, puede que se nos vaya de la manos.

Para mejorar este aspecto, siempre podemos modularizar nuestros ficheros haciendo que el proyecto sea más controlable y menos cáotico aunque siga funcionando igual.

En este caso, lo que vamos a aprender es a modularizar los ficheros con extensión graphql (*.graphql) que usamos para poder definir los tipos de definiciones en una API de GraphQL.

Con esto lo que vamos a conseguir es tener el proyecto más limpio, más accesible a la hora de trabajar y más elegante, ya que no vamos a tener cientos de líneas en un solo fichero, tendremos menos código por fichero y más ficheros pero mejor distribuidos.

Para empezar, lo primero que necesitamos es tener un proyecto de GraphQL creado y listo para trabajar.

Para crear el proyecto más rápido y con la estructura que me parece la más correcta y cómoda para trabajar, necesitamos instalar de manera global el CLI generador de proyectos de GraphQL.

Añadimos sudo por delante del comando “npm install…” en el caso de que estemos trabajando con alguna distribución de Linux o el sistema operativo MacOS.

npm install -g mugan86/graphql-project-cli

Una vez instalado el CLI de generador de proyectos de GraphQL en nuestro equipo, mediante el terminal nos ubicamos en el directorio donde vamos a querer crear el proyecto y ejecutamos el siguiente comando:

Seleccionamos el primer proyecto “graphql-hello-world” que será un proyecto muy sencillo con lo básico para empezar a trabajar en un proyecto de una API de GraphQL. Simplemente encontramos definidas tres queries que nos devuelven un mensaje de tipo string, nada destacable.

Una vez seleccionemos el tipo de proyecto, tenemos que ir contestando las preguntas que se nos hacen para añadir las configuraciones en el proyecto. Entre las cuales tenemos las siguientes:

Nombre del proyecto: El nombre que le daremos al proyecto. No puede contener mayúsculas ni empezar con un punto o guión bajo. El largo máximo del nombre es 214 caracteres.
Usuario de github.
Nombre y apellidos.
Correo electrónico.

Asistente para crear nuestro proyecto mediante el CLI Generador de Proyectos GraphQL

Con esto conseguiremos tener añadida esa información de manera personalizada dentro del package.json del proyecto que estamos generando con el CLI generador de proyectos de GraphQL.

Proceso de la creación de los ficheros del proyecto e instalación de las dependencias

Una vez que ya tengamos el proyecto creado, tenemos esta estructura:

Estructura general del proyecto creado con el generador

Vamos a poner el proyecto en marcha y para trabajar en desarrollo tenemos que ejecutar el siguiente comando:

npm run start:dev

Si todo va bien, nos debería de aparecer un mensaje en el terminal como el que véis a continuación:

Api de GraphQL en marcha

Ahora que ya tenemos en marcha la API vamos a src/schema/schema.graphql

Una vez que estemos en el fichero, vamos a añadir el tipo de objeto “Usuario” y una query para obtener la lista de todos los usuarios. Tendremos algo como lo que podéis ver a continuación:

Ahora que ya hemos definido la query “usuarios”, tenemos que resolverla en el fichero “query.ts” dentro del directorio “resolvers”. Accedemos al fichero y damos solución a la definición.

Accedemos al playground de la API mediante la url: http://localhost:5000/graphql y escribimos la operación para obtener la lista de usuarios y le damos al botón de Play, obteniendo la siguiente información.

Lista de usuarios después de ejecutar la operación

Ahora que ya hemos conseguido que funcione correctamente vamos a separar la definición del tipo de objeto a otro fichero para poder ir modularizándolo y así podremos evitar tener todos los tipos de definiciones que tendrá nuestra API en un fichero.

Vamos a src/schema y dentro vamos a crear un directorio llamado “objects” y dentro de este nuevo directorio creamos un fichero llamado “user.graphql” donde vamos a añadir el tipo de objeto del usuario quitándolo del fichero schema.graphql.

Tipo de objeto del usuario en el nuevo fichero

Guardamos y si nos fijamos en el terminal ¡¡TENEMOS UN ERROR!! El error en resumen es el siguiente: Error: Unknown type “Usuario”

Esto quiere decir que no encuentra el tipo de objeto de “Usuario”, por lo que para poder añadirlo en el ejecutable del schema que realizamos dentro del fichero schema.ts en el directorio schema junto con los resolvers tenemos que añadirlo de alguna manera.

Para hacer la mezcla de todos los ficheros con extensión *.graphql, tenemos que seguir los siguientes pasos:

Accedemos a los paquetes de NPM llamados
Dentro de la información tenemos el comando para instalar dicho paquete, ejecutamos la instalación:

npm install @graphql-tools/load-files@6.0.3 @graphql-tools/merge@6.0.3

3. Siguiendo con las instrucciones, nos ubicamos en este punto y seguimos las instrucciones.

4. Accedemos al fichero schema.ts dentro de la carpeta schema (src/schema/schema.ts) y añadimos

import { mergeTypeDefs } from '@graphql-tools/merge';

import { loadFilesSync } from '@graphql-tools/load-files';

const typeDefs = mergeTypeDefs(loadFilesSync(`${__dirname}/**/*.graphql`));

// Y quitamos
import typeDefs from './schema.graphql';

Analizamos la línea:

const typeDefs = mergeTypeDefs(loadFilesSync(`${__dirname}/**/*.graphql`));

mergeTypesDefs: Esto lo usamos para mezclar todos los ficheros de extensión graphql que cargamos en el path que especificamos.
loadesFileSync: Para cargar todos los ficheros en la ubicación definida y la extensión.
`${__dirname}/**/*.graphql`: Para buscar los ficheros con extensión graphql que están en el directorio que estamos trabajando.

5. Quedará de la siguiente manera:

Carga de los ficheros con los nuevos paquetes

Una vez que ya hemos seguido los pasos para mezclar todos los ficheros con la extensión graphql, guardamos y comprobamos que no tenemos el error que nos aparecía anteriormente sobre el tipo desconocido con “Usuario”

El terminal con la API en marcha, sin errores

Como véis, no hay ningún error y en teoría está añadiendo el tipo de objeto “Usuario” como un tipo de definición junto con el tipo de raíz Query.

Vamos al playground y ejecutamos de nuevo la operación para obtener todos los usuarios.

Resultado de la ejecución para obtener la lista de usuarios.

El resultado como se puede apreciar es satisfactorio. Hemos conseguido que funcione la API de la misma manera pero aplicando una modularización para tener mejor distribuidas nuestras definiciones de los tipos y así evitar que un fichero se vuelva incontrolable a medida que crece la API.

Os dejo el enlace al respositorio con lo trabajado y un poco más: https://github.com/graphql-course/modularize-graphql-schema

Con esto finalizo este tutorial y si tenéis preferencia sobre algún tema podéis hacer propuestas mediante Twitter, Facebook, Udemy,…

Toda la información para que podáis contactarme la tenéis a continuación:

Anartz Mugika Ledo — Desarrollador Web / Móvil e Instructor On Line
Página persona de Anartz Mugika donde se podrá encontrar contenido relacionado al desarrollo. Encontraremos artículo…anartz-mugika.com

En relación con este artículo, he utilizado los conocimientos adquiridos en estos cursos que los podéis adquirir al precio más bajo siempre desde los enlaces que os proporciono.

Crear el Generador de Proyectos GraphQL mediante el CLI: NPM.Desarrollo y publicación de librerias en JS, TS, Angular
Desarrollo de APIs en GraphQL: GraphQL con Angular de 0 a Experto. JWT, Sockets, MongoDB

Todos los cursos al mejor precio SIEMPRE en mi web

By Anartz Mugika Ledo🤗 on May 28, 2020.

Canonical link

Exported from Medium on August 18, 2020.

Aplicar CI / CD desarrollando un paquete NPM

Anartz Mugika Ledo — Tue, 18 Aug 2020 06:01:36 +0000

Aplicar CI / CD desarrollando un paquete NPM

Pasos que seguiremos para publicar un paquete NPM aplicando los principios de Integración Contínua (CI) y Despliegue Contínuo (CD)

Aplicar CI / CD desarrollando un paquete NPM

Pasos que seguiremos para publicar un paquete NPM aplicando los principios de Integración Contínua (CI) y Despliegue Contínuo (CD)

0.- Introducción

Vamos a comenzar un artículo en el que vamos a aprender a trabajar con unas prácticas y principios que nos van a hacer nuestro trabajo diario mucho más sencillo.

En este caso, os voy a enseñar como trabajar con los principios y prácticas de CI y CD.

Llegados a este punto, quizás nunca habéis escuchado ni leido nada sobre las siglas CI y CD (aunque espero que después de este artículo tengáis una idea más clara), por lo que os estaréis preguntando “¿y este de qué nos está hablando? ¡¡Queremos respuestas!!”

Como el objetivo del artículo es enseñaros como funcionan estos principios y prácticas, lo ideal es empezar hablando sobre que es cada uno de ellos y para que sirven.

1.- CI/CD: integración continua y despliegue continuo al detalle

La integración y la entrega continua (CI y CD, respectivamente) son unos principios y prácticas que permiten a los desarrolladores de aplicaciones entregar cambios de código de manera más frecuente y fiable, con lo que la calidad del software tenderá a ser de mayor calidad gracias a trabajar de esta manera.

CI: Integración Contínua. Filosofía de codificación y un conjunto de prácticas que impulsan a los equipos de desarrollo a implementar con frecuencia pequeños cambios y registrar el código en los repositorios de control de versiones.

CD: Despliegue Contínuo. Proceso que comienza cuando el CI finaliza. Automatiza la entrega de aplicaciones a determinados entornos de infraestructura. La mayoría de los equipos trabajan con múltiples entornos además de la producción, como los entornos de pruebas y desarrollo, y CD garantiza que haya una forma automatizada de enviarles los cambios de código.

Para comenzar, por lo menos ya sabemos más sobre ello y seguramente tengamos dudas que uso le podremos dar en nuestros proyectos y los ejemplos a los que se podría aplicar, son:

Publicar librerías en NPM (que es lo que voy a enseñar), después de comprobar automáticamente los test definidos y ver que estos son los correctos, asegurándonos que no haya errores.
Publicar webs públicas en Firebase Hosting, Zeit Now,…

Si queréis saber más al detalle, acerca de estos principios y prácticas, os invito a que leáis el siguiente artículo.

CI/CD: integración continua y entrega continua al detalle

_CI/CD es una de las mejores prácticas que pueden implementar los equipos de desarrollo. También es una práctica…_www.computerworld.es

2.- Requisitos antes de empezar a trabajar

Node y NPM instalados.
Conocimientos de Git básicos.
Cuenta en Github.

3.- Crear repositorio en Github.

Lo primero que necesitamos para utilizar el servicio de Travis (accedemos con nuestra cuenta de Github), es tener la cuenta de Github y posteriormente crear el repositorio donde vamos a gestionar el control de versiones.

Una vez creado el repositorio, clonamos el repositorio en el directorio que queremos añadirlo para trabajar dentro de el.

4.- Activar nuestro repositorio para ejecutar CI / CD

Tenemos que estar en el “Settings”.

Una vez que estamos ahí, tenemos que buscar el repositorio que vamos a usar (el que hemos creado ahora mismo). Tener en cuenta vuestro usuario / organización, en mi caso es una organización. Si no la teneís a la vista, pulsáis “Sync account” para refrescar y que aparezca.

Por defecto, nos aparece la lista de los repositorios asociados al usuario que tenemos asociada la cuenta, que en mi caso es “mugan86”. Si tenéis el repositorio asociado a vuestro usuario, sin haber usado una organización, simplemente buscáis en el apartado “Legacy Services Integration” y en el buscador añadís las palabras clave para filtrar ese repositorio.

Así ya tenemos activado el repositorio y no tendremos que tocar nada más.

5.- Empezando con nuestro proyecto.

Una vez que ya tenemos claro los conceptos iniciales, tenemos todo lo necesario instalado y configurado, accedemos al directorio que acabamos de clonar, para trabajar con el control de versiones.

Ejecutamos el siguiente comando para crear nuestro fichero del manifiesto de cualquier proyecto de NPM, que es el package.json

npm init

Respondemos las preguntas que nos va haciendo el asistente, quedando algo como lo siguiente:

El resultado será un nuevo fichero llamado package.json con este contenido:

6.- Desarrollando la librería

Ahora creamos el fichero index.js en la raíz del proyecto junto con el package.json que acabamos de crear, donde vamos a definir las funciones del paquete / librería que usaremos para utilizar en este artículo y así aprender sobre CI / CD. Añadimos el siguiente contenido:

7.- Definiendo los tests

Creamos la carpeta “test” y dentro un fichero llamado “index.js” con el siguiente contenido:

Ahora, para ejecutar los test, necesitamos instalar las dependencias de chai y mocha.

npm install -D mocha chai

8.- Comenzando con la configuración de Travis para aplicar CI

Creamos el fichero de llamado “.travis.yml” donde vamos a añadir la configuración necesaria para poner en marcha el sistema automatizado donde va a ejecutar las ordenes que especifiquemos en dicho archivo, como la ejecución de tests, la publicación en NPM,…

Teniendo en cuenta lo mencionado en el punto 4, tenemos que tener de la siguiente manera el repositorio que queremos utilizar para este proceso, ya que si no está activo, no funcionará.

Subimos el primer commit al repositorio de Github:

git add — all

git commit -m “First version”

git push origin master

Una vez activado, pulsamos en “Settings” y vemos que ya ha ejecutado la integración contínua, pero topdavía no hemos desplegado el paquete en NPM de manera automática, y eso será lo que se realizará con el despliegue continuo (CD).

9.- Despligue Contínuo (CD)

Una vez que ya hemos probado que se ejecutan los test de manera automática mediante la Integración contínua y las primeras configuraciones del fichero .travis.yml lo que vamos a hacer es configurar para que se despligue la nueva actualización de ese paquete y lo publique en NPM.

9.1.- Instalar Ruby:

Tenemos que instalar Ruby para poder instalar las gemas CLI de Travis, para ejecutar el setup necesario para configurar el apartado del despliegue contínuo

> Dependiendo de nuestro sistema operativo, tendremos que seguir unas instrucciones u otras y para saber como debemos de hacerlo seguimos el siguiente enlace. En Windows actualmente la versión que funciona bien es la Ruby+Devkit 2.6.5–1 (x64)

9.2.- Instalar Travis CLI:

Una vez instalado Ruby en nuestra máquina, debemos de instalar travis mediante el siguiente comando:

gem install travis

Una vez instalado, ejecutamos “travis” para comprobar que está correctamente añadida a nuestra máquina. En el caso de que nos diga que no lo tenemos, reiniciar el terminal o consola por si acaso.

Antes de configurar de NPM, tenemos que tener en cuenta que tenemos creada una cuenta en https://www.npmjs.com/

10.- Configurar NPM con Travis

Ahora para hacer la configuración de NPM, debemos de ejecutar el siguiente comando

travis setup npm

Pasos para configurar Travis con los ajustes de NPM

Nos quedará el fichero .travis.yml de la siguiente manera:

Después de la configuración

En el apartado “on”, añadimos antes que repo “branches: master”, quedando de la siguiente manera:

Con esto, ya estamos preparados para publicar nuestro paquete en NPM, en el repositorio que encontramos en npmjs.com

11.- Publicar en NPM

Antes de publicar, vamos a hacer un par de cambios y comprobaciones, para dejar todo listo para hacer los despliegues automáticamente siempre y cuando, pase el apartado de la CI, cuando ejecuta los tests.

Vamos al fichero package.json y añadimos al nombre (name) en las propiedades el nombre siguiendo el siguiente formato:

@/nombre-actual

En mi caso:

: mugan86
nombre-actual: hello-world-ci-cd

Quedando así: @mugan86 /hello-world-ci-cd

Añadimos otra propiedad (en el package.json) para publicar como público nuestro paquete:

"publishConfig": { "access": "public" }

Asi estará actualmente nuestro package.json:

12.- Comprobar existencia del paquete y últimos pasos

Vamos a https://www.npmjs.com/.

Y dentro de la barra de la navegador, comprobamos si existe ese paquete, ya que si existe, no vamos a poder publicarlo NUNCA.

Si nos aparece algo de este estilo ejecutando la URL: https://www.npmjs.com/package/@mugan86/hello-world-ci-cd

No está diciendo que no existe y QUE SI PODREMOS PUBLICAR.

Por lo tanto, dejaré como nombre de paquete ese nombre.

Añadimos los cambios en git, y hacemos el backup:

git add — all

git commit -m “Publish 1.0.0”

git push origin master

Con esto, se activa de nuevo el sistema de Integración Contínua, ejecuta los tests y si los pasa, procede a desplegarlo en NPM mediante el despligue contínuo y publicará la versión de ese paquete:

Podéis ver el log de ese proceso automatizado desde aquí.

13.- Resultado

Canonical link

Como añadir videos de Youtube en unas sencillos pasos

Anartz Mugika Ledo — Tue, 18 Aug 2020 05:56:55 +0000

Angular 9 — Como añadir videos de Youtube en unas sencillos pasos

Pasos a seguir para poder hacer uso YouTube Player Component y visualizar videos de Youtube en nuestras apps de Angular

Angular 9 — Como añadir videos de Youtube en unas sencilos pasos

Pasos a seguir para poder hacer uso YouTube Player Component y visualizar videos de Youtube en nuestras apps de Angular

El propósito de este artículo es enseñaros como añadir el reproductor de Youtube con el video seleccionado de una manera muy fácil.

Como bien sabréis, seguramente habréis experimentado “la agradable sensación” de tener que configurar con bastante esfuerzo todo el apartado para poder visualizar videos de Youtube en Angular.

Esto nos ha ocurrido hasta la versión 8.2 donde teníamos que hacer uso del Dom Sanitizer, para poder “desinfectar” nuestra app frente a ello, para poder trabajar con un iframe.

Desde la versión 9 de Angular, por suerte, este quebradero de cabeza ha pasado a mejor historia. Empecemos.

0.- Necesario

Tener creado el proyecto de Angular (versión 9) y disponible para trabajar.

1.- Instalar el paquete de Youtube

Instalaremos el paquete de YouTube player en npm ejecutando el siguiente comando estando ubicados en el directorio raíz de nuestro proyecto de Angular.

npm install @angular/youtube-player

2.- Importar el módulo YoutubePlayer

Importaremos el módulo YouTube Player modules en nuestro fichero app.module.ts (o en su defecto, en el módulo donde vayamos a aplicar directamente)

import { YouTubePlayerModule } from "@angular/youtube-player";

...

 imports: [    ....,    YouTubePlayerModule,    ...  ],

3.- Componente YouTube Player en el HTML

Una vez realizados los dos primeros pasamos, ya podemos agregar el componente del reproductor de YouTube en nuestro componente objetivo (app.component en este caso) como se muestra a continuación con el ID del video de YouTube.

Podemos obtener fácilmente cualquier identificación desde video de YouTube seleccionado. La identificación del video de YouTube se presentará en la propia URL.

3.1.- URL del ejemplo — ¿Qué es GraphQL?:

[https://www.youtube.com/watch?v=80_Cr9m-1fE](https://www.youtube.com/watch?v=80_Cr9m-1fE)

Dentro de la URL, encontramos el ID del video después de ?v= que es 80_Cr9m-1fE. Teniendo esto como referencia, añadimos el siguiente código con las siguientes configuraciones que explicaré detalladamente posteriormente.

4.2.- Añadiendo el script en el componente que usaremos

5.- Resultado

A continuación os muestro como se vería nuestro resultado.

https://angular-youtube-demo.stackblitz.io

6.- Crear nuestro ejemplo

Ahora que sabemos como configurar y como añadir el reproductor de Youtube de una manera sencilla, ¡vamos a intentarlo por nuestra cuenta! ¡Ánimo!

Gracias por leer este artículo, espero que te haya sido útil y puedas compartirlo con la mayor gente posible, para poder dar opción a otras personas de disfrutar de este tipo de contenido.

Si no me sigues, te invito a hacerlo ;)

7.- Contacto

Medium: https://medium.com/@mugan86
Udemy: https://www.udemy.com/user/anartzmugika/
Twitter: https://twitter.com/mugan86
Instagram: https://www.instagram.com/anartz.mugika.ledo/
Telegram: https://t.me/anartzmugika

Canonical link

Añadir el botón de suscripción a nuestro canal en Angular

Anartz Mugika Ledo — Tue, 18 Aug 2020 05:52:08 +0000

Añadir el botón de suscripción a nuestro canal en Angular

En este tutorial sencillo vamos a aprender como añadir el botón de suscripción a nuestro canal de Youtube en una aplicación de Angular.

Añadir el boton de suscripción a nuestro canal en Angular En este tutorial sencillo vamos a aprender como añadir el botón de suscripción a nuestro canal de Youtube en una aplicación de Angular. Esto servirá para que las personas que deseen suscribirse en nuestro canal, puedan hacerlo mediante el botón habilitado para ello. Sería algo como lo siguiente:

Ahora bien, ya que tenemos claro que vamos a hacer, lo primero vamos a crear un nuevo proyecto de aplicación Angular. Tenemos que tener instalado Angular CLI junto con Typescript, Node y NPM Node / NPM: https://nodejs.org/en/ Typescript: npm install -g typescript Angular CLI: npm install -g @angular/cli Creando el proyecto de Angular: Ahora al ejecutar la orden mediante el CLI para crear el proyecto, tendremos que responder dos preguntar que lo haremos de la siguiente manera: ? Would you like to add Angular routing? No ? Which stylesheet format would you like to use? CSS Ahora esperaremos a que se creen los ficheros, se instalen las dependencias y se añadan las configuraciones. Una vez que tenemos todo listo, navegamos al directorio del proyecto que acabamos de crear y ejecutamos npm start para poner en marcha la aplicación. Tenemos lo siguiente:

Tenemos la aplicación preparada para añadir el script. Ahora tenemos que configurar el script a nuestro gusto para poder añadirlo en nuestro proyecto de Angular. Vamos al siguiente enlace para acceder al configurador. Nos encontraremos con una página de la siguiente apariencia:

1. Introducimos el nombre de usuario o ID de nuestro canal. La url de mi canal es https://www.youtube.com/mugan86/ y lo que introduciremos es “mugan86” que es el nombre de usuario. 2. Diseño: Tenemos dos opciones, la que es por defecto que solo tiene el botón y la “full” que es la que tiene el avatar del usuario. Yo seleccionaré la opción “full” 3. Tema: Apariencia del background. Dos opciones, “default” y “Oscuro”. Dejamos como está (default) para obtener el fondo blanco pero si seleccionamos la segunda tendremos el fondo más oscuro. 4. Conteo de suscriptores: Con esta opción habilitamos para que se muestre el número de suscriptores o no. Por defecto viene habilitado y así lo voy a dejar. 5. Vista previa de lo que hemos configurado. 6. Código fuente que vamos a inscrustar en nuestra app Angular. Una vez realizadas las configuraciones, quedará de la siguiente manera con mi canal:

Copiamos el siguiente código (6): Y lo pegamos en el fichero app.component.html (Borramos todo el contenido que viene en ese fichero) Guardamos, vamos a la pantalla y vemos que no funciona, es porque el script lo tenemos que añadir desde la página index.html y podemos hacerlo de manera dinámica cuando estémos utilizando un componente concreto o cuando ya iniciamos la aplicación. Si queremos añadirlo en el index.html (src/index.html), simplemente copiamos **** y lo pegamos dentro del index.html El código es el siguiente: El resultado:

Y si queremos hacerlo que se inicie ese script SOLO cuando iniciamos ese componente, lo tenemos que hacer de esta manera. Tenemos que entrar en el ngOnInit() del componente (src/app/app.component.ts) Y escribir lo siguiente: const body = document.body as HTMLDivElement; const script = document.createElement('script'); script.async = true; script.defer = true; script.src = 'https://apis.google.com/js/platform.js'; body.appendChild(script); Con esos datos, empezamos creando el elemento body donde vamos a añadir el elemento script que creamos como un elemento y le añadimos el cñodigo fuente mediante la URL. Con esto, si guardamos, vamos a tener lo mismo que lo que hemos hecho en el index.html. Con esto vamos a poder trabajar de manera dinámica con diferentes scripts dependiendo de lo que queramos cargar en un momento concreto.