Dynamic React Gallery

Aplicación web realizada en React que partiendo de un fichero *.json completa dinámicamente todo su contenido. Generando una galeria de imágenes divididas por categorias.

El código se encuentra subido en el siguiente repositorio:
https://github.com/roberto-pf/DynamicReactGallery

Se ha generado la documentación mediante Compodoc y puede consultarse la documentación aquí:
https://roberto-pf.github.io/DynamicReactGallery/

Demo funcionando en este enlace: http://gallery-react.disastercode.com.es

Git Actions de GitHub (Parte 5)

Continuamos con algún ejemplo de GitHub Action

workflow.yml: Cuando se crea una rama nueva se modifica en ella la versión del pom.xml, añadiéndole un sufijo extraido del nombre de dicha rama.

name: On create branch - Rename version pom.xml
# Esta action se va a ejecutar cada vez que se crea una rama de main
on:
  create:
    branches:
      - main
jobs:
  # Tarea que se encargar de sacar el sufijo de la rama
  extract-suffix-name-branch:
      runs-on: ubuntu-latest
      #Lista de variables de salida del job
      outputs:
        suffix_name: ${{ steps.get-id.outputs.id }}
      steps:
        # Checkout repository
        - uses: actions/checkout@v2         
          
        # Utilizamos action que recupera los nombres de las ramas las ramas 
        - name: Get branch name
          id: branch-name
          uses: tj-actions/branch-names@v5.1
          
        # Mostramos por pantalla el nombre de la rama actual: 'prueba-100] description rama'
        - name: Running on the default branch.
          if: steps.branch-name.outputs.is_default == 'true'
          run: |
            echo "Running on default: ${{ steps.branch-name.outputs.current_branch }}"
        # Extraemos el sufijo que queremos utilizar para la version del pom: 'prueba-100'
        - id: get-id
          run: |
            id=$(echo ${{ steps.branch-name.outputs.current_branch }} | cut -d] -f1 | cut -d[ -f2)
            echo "::set-output name=id::$id"

  # Tarea que se encargar de sacar el prefijo de la versión del pom.xml  
  extract-preffix-name-pom-version:
      runs-on: ubuntu-latest
      #Lista de variables de salida del job
      outputs:
        preffix_name: ${{ steps.get-id.outputs.id }}
      steps:
        # Checkout repository
        - uses: actions/checkout@v2        
                
        #Tarea extrae a la variable version, la version existente en el pom.xml
        - name: Extract Maven project version
          working-directory: ./example3-gitactions
          run: echo ::set-output name=version::$(mvn -q -Dexec.executable=echo -Dexec.args='${project.version}' --non-recursive exec:exec)
          id: project_version
        - run: echo "Maven project version is ${{ steps.project_version.outputs.version }}"

        - id: get-id
          run: |
            id=$(echo ${{ steps.project_version.outputs.version }} | cut -d- -f1)
            echo "::set-output name=id::$id"       

  # Tarea que se encargar modificar la versión del pom.xml  
  rename-pom-version-and-commit:
      # Se le indica que depende de las dos tareas anteriores
      needs: [extract-preffix-name-pom-version, extract-suffix-name-branch]
      runs-on: ubuntu-latest
      steps:
        # Checkout repository
        - uses: actions/checkout@v2          
        
        # Instalamos jdk 11
        - name: Set up JDK 1.11
          uses: actions/setup-java@v1
          with:
            java-version: 1.11             
              
        # Realiza la modificación de la versión del pom.xml. 
        # Indicando generateBackupPoms a true nos generaría un backup del pom.xml que podríamos utilizar para restaurarlo al mergear la pull-request.
        - name: set version pom
          working-directory: ./example3-gitactions
          run: mvn -B versions:set -DnewVersion=${{ needs.extract-preffix-name-pom-version.outputs.preffix_name }}-${{ needs.extract-suffix-name-branch.outputs.suffix_name }}-SNAPSHOT -DgenerateBackupPoms=false

         # Realiza una prueba de que sigue compilando perfectamente. 
        - name: mvn package
          run: mvn -B package --file example3-gitactions/pom.xml
          
        # Subimos el cambio al repo. 
        - name: Commit new version pom.xml - branch
          run: |
            git config --global user.name 'Roberto'
            git config --global user.email 'roberto-pf@github.com'
            git add .
            git commit -am "Automated report"
            git push

Nota: Repositorio Github

Documentación action que extrae el nombre de la rama: tj-actions/branch-names

JQ

JQ es una herramienta de consola que nos permite parsear ficheros json. Te permite buscar dentro de un json y mostrar los resultados formateados en lugar de en una sola línea.

Existe una herramienta online donde puedes practicar expresiones: https://jqplay.org/
En el post anterior donde extraiamos de un Json la información necesaria para la Git Action se utilizó con este ejemplo.

Documentación oficial: https://stedolan.github.io/jq/

Herramienta para formateo de json: https://jsonformatter.curiousconcept.com

Git Actions de GitHub (Parte 4)

Continuamos con algún ejemplo de GitHub Action

workflow.yml: se compila un proyecto que tiene como dependencia otro proyecto perteneciente a otro repositorio (además, se le indica que utilice una rama concreta).

name: Compile with other repo dependency
//Evento que desencadenará el workflow
on: [push]
//Se definen unas variables de entorno para acceder
//al repositorio donde esta la dependencia que necesitamos.
env:
  //nombre del repositorio
  DEPENDENCY_REPOSITORY: "roberto-pf/Example-Git-Actions"
  //directorio en el que vamos a trabajar
  DEPENDENCY_PATH: "Example-Git-Actions"
  //rama del repositorio
  DEPENDENCY_REF: "example-2"
jobs:
  compile-mvn:
      runs-on: ubuntu-latest
      steps:
        //Tarea que hace un checkout del repositorio
        - uses: actions/checkout@v2          
        //Tarea que instalar java 11
        - name: Set up JDK 1.11
          uses: actions/setup-java@v1
          with:
            java-version: 1.11
        //Tarea que hace un checkout del repositorio con la dependencia necesaria
        - name: Checkout cross repo
          uses: actions/checkout@v2
          with:
            repository:  ${{env.DEPENDENCY_REPOSITORY}}
            path:  ${{env.DEPENDENCY_PATH}}
            ref:  ${{env.DEPENDENCY_REF}}             
        //Instalamos en el directorio .m2 esa dependencia
        - name: Build with Maven repo roberto-pf/Example-Git-Actions project example2-gitactions-model
          working-directory: ./Example-Git-Actions/example2-gitactions-model
          run: |
            mvn -B install --file pom.xml
        //Ya podemos construir el proyecto
        - name: Build with Maven repo roberto-pf/Example-Git-Actions-II project example2-gitactions
          run: mvn -B package --file example2-gitactions/pom.xml

Nota: Repositorio Github

Git Actions de GitHub (Parte 3)

Continuamos con algún ejemplo de GitHub Action

workflow-external_json_parameters.yml: Contiene dos jobs para extraer la información de un json. El primer job utiliza JQ y el segundo es más simple ya que el json está en una única línea.

name: Read External JSON
//Evento que desencadenará el workflow
on: [push]
jobs:
  //Primer job a ejecutar 
  read-json-with-jq:
      //Máquina en la que se va a ejecutar el job 
      runs-on: ubuntu-latest
      steps:
        //Tarea que hace un checkout del repositorio
        - uses: actions/checkout@v2

        - name: extract repositories to file
          run: |
            //se vuelca a la variable content el contenido del fichero json
            content=`cat ./example2-gitactions/dependencies.json`
            //con JQ extraemos todos los valores de la key repository y los listamos en un fichero txt
            echo "$(jq -r '.dependencies[].repository' <<< "$content")" >> aux.txt
        //Tarea que pinta por pantalla los repositorios
        - name: print repositories
          run: cat aux.txt

  //Segundo job a ejecutar
  read-json: 
       //Máquina en la que se va a ejecutar el job 
       runs-on: ubuntu-latest
       steps:
        //Tarea que hace un checkout del repositorio
        - uses: actions/checkout@v2
        
        - name: extract repositories to array
          id: set_var
          run: |
            //se vuelca a la variable content el contenido del fichero json
            content=`cat ./example2-gitactions/dependencies-one-line.json`
            //se setea como salida en la variable jsonDep
            echo "::set-output name=jsonDep::$content"
        //Tarea que pinta por pantalla los repositorios
        - name: print repositories
          run: |
            echo: "${{fromJson(steps.set_var.outputs.jsonDep).dependencies[0].repository}}"
            echo: "${{fromJson(steps.set_var.outputs.jsonDep).dependencies[1].repository}}"

Nota: Repositorio Github

Convertir imagen 2D a 3D (con InkScape y FreeCAD)

Guía de pasos para convertir una imagen 2D a un archivo 3D que podremos imprimir en una impresora.
Primero utilizamos el InkScape para convertir la imagen a svg.

Paso 1 – Abrimos InkScape y menú -> Archivo -> Importar

Paso 2 – Vamos a menú -> Trayecto -> Vectorizar mapa de bits

Paso 3 – Esto nos habrá creado encima de la imagen otro objeto con nodos. Podemos eliminar el anterior.

Paso 4 – El objeto ahora mismo está relleno, lo que nos viene mal para tratarlo en FreeCAD. Para dejarlo “hueco” iremos a Menú -> Objeto -> Relleno y borde…

En la primera pestaña Relleno le diremos que sin color.
En la pestaña Color de trazo, el que os guste.
Y en Estilo de Trazo el ancho de la línea.

Paso 5 – Ahora lo grabamos como svg, para ello Menú -> Archivo -> Guardar como

A continuación, en el FreeCAD, abriremos un nuevo proyecto e iremos directamente al escenario Part.
Cargamos el fichero svg desde Menú -> Archivo -> Abrir. Elegimos el fichero y abrir, donde nos preguntará como lo queremos cargar y marcamos la opción de la imagen…

Deberíamos ver algo así:

Y ya al extruirlo quedaría así:

Git Actions de GitHub (Parte 2)

Continuamos con algún ejemplo de GitHub Action

3 – get version from pom workflow.yml: un job extrae la version del pom para que se utilice tanto en otros jobs como en steps posteriores.

//Nombre del workflow
name: Get version from pom.xml
//Evento que desencadenará el workflow
on: [push]
//Configuración por defecto.
defaults:
    run:
        //Se indica el directorio desde donde se ejecutarán los jobs.
        working-directory: example1-gitactions
//lista de trabajos a realizar
jobs:
    //Job a ejecutar 
    get-version:
        //Máquina en la que se va a ejecutar el job 
        runs-on: ubuntu-latest
        //Lista de variables de salida del job
        outputs:
            output_version: ${{ steps.project_version.outputs.version }}     
        //Lista de steps/tareas a realizar dentro del job 
        steps:
            //Tarea que hace un checkout del repositorio
            - uses: actions/checkout@v2
            //Tarea que instala en la máquina java 11
            - name: Set up JDK 1.11
              uses: actions/setup-java@v1
              with:
                java-version: 1.11
            //Tarea extrae a la variable version, la version existente en el pom.xml
            - name: Extract Maven project version
              run: echo ::set-output name=version::$(mvn -q -Dexec.executable=echo -Dexec.args='${project.version}' --non-recursive exec:exec)
              //identificador asignado a la tarea
              id: project_version
            //Tarea que hace un echo de la variable creada en la tarea anterior
            - name: Show extracted  Maven project version
              run: echo "Version is ${{ steps.project_version.outputs.version }}"
    //Job a ejecutar   
    use-version:
        //Se indica que este job va a depender del anterior. Es decir, se va a ejecutar el otro primero.
        needs: get-version
        //Máquina en la que se va a ejecutar el job 
        runs-on: ubuntu-latest
        //Lista de steps/tareas a realizar dentro del job
        steps:
            //Tarea que hace un checkout del repositorio
            - uses: actions/checkout@v2
            //Tarea que hace un echo de la variable creada en el job anterior
            - name: Show extracted  Maven project version
              run: echo "Version is ${{ needs.get-version.outputs.output_version }}"

4 – env get version from pom workflow.yml: en un job se estrae la version del pom y la mete en el environment. Se puede ver como se puede utlizar en los steps posteriores pero no en otros jobs

//Nombre del workflow
name: Get version from pom.xml - env
 //Evento que desencadenará el workflow
on: [push]
//Configuración por defecto.
defaults:
 run:
  //Se indica el directorio desde donde se ejecutarán los jobs.
  working-directory: example1-gitactions
//lista de variables de entorno inicializadas para usar en los jobs
env: 
  GITHUB_RELEASE_VERSION: "prueba"
  
//lista de trabajos a realizar
jobs:
 //Job a ejecutar 
 get-version-env:
    //Máquina en la que se va a ejecutar el job 
    runs-on: ubuntu-latest
    //Lista de steps/tareas a realizar dentro del job 
    steps:
      //Tarea que hace un checkout del repositorio
      - uses: actions/checkout@v2
      //Tarea que instala en la máquina java 11
      - name: Set up JDK 1.11
        uses: actions/setup-java@v1
        with:
          java-version: 1.11
      //Tarea extrae a la variable de entorno GITHUB_RELEASE_VERSION, la version existente en el pom.xml
      - name: Extract Maven project version
        run: echo "GITHUB_RELEASE_VERSION=$(mvn -q -Dexec.executable=echo -Dexec.args='${project.version}' --non-recursive exec:exec)" >> $GITHUB_ENV
      //Tarea que hace un echo de la variable de entorno GITHUB_RELEASE_VERSION. Mostrará el valor de la version del pom
      - name: Show extracted  Maven project version
        run: echo "Version is ${{ env.GITHUB_RELEASE_VERSION }}"
 //Job a ejecutar 
 use-version:
    //Se indica que este job va a depender del anterior. Es decir, se va a ejecutar el otro primero.
    needs: get-version-env
    //Máquina en la que se va a ejecutar el job 
    runs-on: ubuntu-latest
    //Lista de steps/tareas a realizar dentro del job 
    steps:
      //Tarea que hace un checkout del repositorio
      - uses: actions/checkout@v2
      //Tarea que instala en la máquina java 11
      - name: Set up JDK 1.11
        uses: actions/setup-java@v1
        with:
          java-version: 1.11
      //Tarea que hace un echo de la variable de entorno GITHUB_RELEASE_VERSION. Mostrará el valor por defecto "prueba"
      - name: Show extracted  Maven project version
        run: echo "Version is ${{ env.GITHUB_RELEASE_VERSION }}"

Nota: Repositorio Github

Git Actions de GitHub (Parte 1)

Las GitHub Actions te permiten automatizar tareas en tu proyecto: despliegues, ejecución de test,… Se dispone de múltiples acciones en el Marketplace de GitHub que se pueden utilizar. Si bien, también se puede desarrollar acciones propias.

Para crearlas es tan sencillo como crear el directorio .github/workflows/ en tu repositorio y dentro de dicho directorio se colocarían los ficheros yml que contienen las actions.

Para probar su funcionamiento me he creado un proyecto sencillo en GitHub y le he añadido las siguientes actions:

1 – echo example workflow.yml: Ejecuta el comando echo

//Nombre del workflow
name: Execute echo command
//Evento que desencadenará el workflow
on: [push]
//lista de trabajos a realizar
jobs:
 //Job a ejecutar
 echo:
   //Máquina en la que se va a ejecutar el job 
   runs-on: ubuntu-latest
   //Lista de steps/tareas a realizar dentro del job
   steps:
     //Tarea a ejecutar. Tiene un name con la descripción y un run con el comando a ejecutar.
     - name: test echo
       run: echo "Testing echo"

Ejemplo Git Action 1

2 – mvn example workflow.yml: Ejecuta un mvn package

//Nombre del workflow
name: Build and test of Java Project
//Evento que desencadenará el workflow
on: [push]
//Configuración por defecto.
defaults:
 run:
  //Se indica el directorio desde donde se ejecutarán los jobs.
  working-directory: example1-gitactions
//lista de trabajos a realizar
jobs:
 //Job a ejecutar
 build:
   //Máquina en la que se va a ejecutar el job 
   runs-on: ubuntu-latest
   //Lista de steps/tareas a realizar dentro del job
   steps:
     //Tarea que hace un checkout del repositorio
     - uses: actions/checkout@v2
     //Tarea que instala en la máquina java 11
     - name: Set up JDK 1.11
       uses: actions/setup-java@v1
       with:
         java-version: 1.11
     //tarea que ejecuta un mvn package
     - name: Build with Maven
       run: mvn -B package --file pom.xml

Nota: Repositorio Github

Configuración de una ssh-key para Github desde ubuntu.

A modo de guía, para configurar una ssh-key en ubuntu y poder conectarnos a nuestra cuenta de GitHub habría que seguir los siguiente pasos:

– Paso 1 / Ejecutar el comando

ssh-keygen -t rsa

– Paso 2 / Te preguntará donde quieres dejar la clave

Enter file in which to save the key (/home/rober/.ssh/id_rsa):

– Paso 3 / Te pedirá que introduzcas una frase de seguridad

Enter passphrase (empty for no passphrase):

– Paso 4 / Si todo ha ido bien te va a generar estos dos ficheros

Your identification has been saved in /home/rober/.ssh/id_rsa
Your public key has been saved in /home/rober/.ssh/id_rsa.pub

– Paso 5 / Ahora que ya tenemos la clave nos vamos a GitHub.com en: Acount Settings -> SSG and GPG Keys -> New SSH Key

– Paso 6 / Nos pedirá que rellenemos dos campos en un formulario:

Title: Se puede poner uno descriptivo para saber desde donde se está usando esa clave.
key: Se pega el contenido del fichero /home/rober/.ssh/id_rsa.pub

– Paso 7 / Dar a Add SSH Key. Y ya podremos conectarnos a la cuenta de github desde la máquina en que hemos configurado la clave.

Nota: Para cargar en la clave privada en un terminal seria usando el comando ssh-add.
ssh-add /home/rober/.ssh/id_rsa

Nota 2: Comandos para configurar tu usuario

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

Reparar Cámaras Xiaomi que se quedan con el led amarillo fijo

Al actualizar el firmware de las cámaras MI puede que de algún error y se queden fritas. A mi me pasó que la cámara al encenderla se quedaba con el led amarillo encendido fijo. Ni el botón reset hacia nada.

Pasos para recuperarla:

– Apagar la cámara y extraerle la SD.

– Formatear la SD en formato FAT32.

– Buscar el firmware del modelo de tu cámara. En este foro hay bastantes firmwares. En mi caso para Xiaomi Imilab A1 Camera (cmsxj19e – ipc019e)

– Poner en la SD el archivo *.img

– Volver a añadir la SD a la camara y encenderla.

– Tras pasar unos 2 minutos la cámara vuelve a funcionar.