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"
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.
Categorias
- adobe (2)
- agile (1)
- Alfresco (1)
- Android (26)
- Angular (6)
- angularjs (10)
- apache (1)
- axis (2)
- Bases de datos (14)
- Bootstrap (1)
- C# (3)
- Cámara (1)
- chrome (3)
- Codeigniter (2)
- Control de Versiones (2)
- CSS (25)
- CVS (1)
- Django (9)
- Django Rest Framework (1)
- DNS (1)
- Docker (1)
- dominio (1)
- eclipse (5)
- Entity Framework (2)
- ETL (1)
- Firefox (6)
- flash (1)
- freecad (1)
- Git (12)
- GitHub (4)
- Groovy (1)
- Handlebars (1)
- hibernate (4)
- hosting (1)
- HTML (50)
- HTML 5 (26)
- Impresión 3D (9)
- Inkscape (1)
- IOS (2)
- ireports (3)
- Java (43)
- Javascript (55)
- JBoss (3)
- JPA (2)
- JQuery (20)
- Json (7)
- JSP (5)
- Lamp (1)
- lean (1)
- linkedin (1)
- LINQ (1)
- linux (13)
- Livecycle (1)
- log (1)
- microcontroladores (1)
- MongoDB (4)
- MySQL (8)
- Node.js (5)
- OC4J (1)
- Openshift (2)
- Oracle (5)
- Patrones de Diseño (1)
- Photoshop (2)
- php (20)
- PostgreSQL (1)
- python (19)
- rabbitmq (1)
- Raspberry PI (13)
- Raspherry PI (5)
- React (6)
- seguridad (3)
- Selenium (3)
- Sencha Touch (1)
- Sin categoría (25)
- Spring (16)
- spring-boot (3)
- SQL (7)
- SQLServer (1)
- struts (2)
- SVN (1)
- Talend (1)
- Tomcat (5)
- unity (3)
- Visual Studio Code (2)
- vmware (5)
- Web Services (11)
- windows (18)
- wordpress (10)
- Xiaomi (1)
- xml (2)
Trabajos Realizados
- App Android – Autoka Fr
- App Android – Cartelera Cántabra
- App Android – Gramática y Vocabulario Ingles
- App Android – Hoja de Gastos
- App Android – Hotel Torre Cristina
- App Android – OcioEnjoy
- App Android – Visor CardBoard
- App Firefox – Managapp
- DiamanteBomba – DisasterCode
- Generador de Partes de Trabajo
- GitHub – Android Web Generator
- GitHub – Dynamic Angular Gallery
- GitHub – Dynamic React Gallery
- GitHub – Sotilizator
- GitHub – SpringAngularJS
- GitHub – Swiper Dynamic Angular Gallery
- HazParejas – DisasterCode
- RompeCabezas – DisasterCode
- Unity Game – English Couple
- Unity Game – Kill Wasp
- WordPress – El Buen Apicultor
- WordPress – El Cajón de los Retales
- WordPress – El Vestidito Azul
- WordPress – Feuchas
- WordPress – Fragua de Navajas Ponce
- WordPress – Humor a las Tres
- WordPress – Photo Places