Gestión de múltiples versiones de pyton en Ubuntu

– Paso previo, añadir software-properties-common y repositorio.

sudo apt install software-properties-common
sudo add-apt-repository ppa:deadsnakes/ppa

– Instalación de las versiones de python: 3.10 y 2.7.

sudo apt install python3.10
python3.10 --version

sudo apt install python2.7
python3.7 --version

– Configuración de ubuntu para facilitar el cambio de una version a otra.

//Creas enlaces simbolicos con update-alternatives
sudo update-alternatives --install /usr/bin/python python /usr/bin/python2.7 1
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3.10 2

//Menu para seleccionar la version elegida
sudo update-alternatives --config python

//comprobar la versión activa
python --version

https://www.python.org/downloads/

Instalación Apache + Mysql + Php + PhpMyAdmin en ubuntu

Paso 1 – Actualizar la lista de paquetes disponibles y sus versiones ( sudo apt-get update )

Paso 2 – Instalar Apache ( sudo apt-get install apache2 )
Servicio: /etc/init.d/apache2 status
Url: http://127.0.0.1/ ó http://localhost/

Paso 3 – Instalar MySQL ( sudo apt-get install mysql-server )
Te va pedir una contraseña para el usuario root.
Servicio: systemctl status mysql

Paso 4 – Instalar PHP ( sudo apt install -y php )
Prueba:

Crear el fichero /var/www/html/info.php
Con el contenido < !--?php phpinfo();?-- >
Visitar la url: http://localhost/info.php

Paso 5 – Instalar PhpMyAdmin ( sudo apt-get install phpmyadmin )
Adicionalmente, hay que añadirlo en la configuración de apache2. Para ello:

//Descomentamos el alias en el fichero apache.conf /etc/phpmyadmin/apache.conf
Alias /phpmyadmin /usr/share/phpmyadmin
//Incluimos la configuración del phpmyadmin en el apache2.conf
echo "Include /etc/phpmyadmin/apache.conf" >> /etc/apache2/apache2.conf

A partir de la version 5.7 no se puede realizar login en phpMyAdmin con el usuario root. Por lo tanto es necesario crearte un usuario:

sudo mysql -p -u root
Enter password:

mysql> CREATE USER 'rpf'@'%' IDENTIFIED BY 'rpf';
Query OK, 0 rows affected (0,02 sec)

mysql> GRANT ALL PRIVILEGES ON *.* TO 'rpf'@'%' WITH GRANT OPTION;
Query OK, 0 rows affected (0,02 sec)

mysql> FLUSH PRIVILEGES;
Query OK, 0 rows affected (0,01 sec)

Error: “Login sin una contraseña está prohibido por la configuración (Ver AllowNoPassword)”
Este error nos lo dará al intentar logarnos si no ponemos una contraseña.

La forma de solucionarlo es:

Descomentar la propiedad AllowNoPassword en el fichero /etc/phpmyadmin/config.inc.php
$cfg['Servers'][$i]['AllowNoPassword'] = TRUE;

Url dinámicas con react

Podemos parametrizar las urls en React. Esto nos va a permitir tener url dinámicas en función a unos parametros. Para ver su funcionamiento se muestra un ejemplo:

1 – Definición de parámetros en la url
Dado un route, podemos indicar los parámetros como en el ejemplo :category y :type

Fuente

2 – Utilización de esos parámetros en el componente invocado
La forma de recoger luego esos párametros seria con useParams.

import { useParams } from "react-router-dom"
...
const { category } = useParams()
...

Fuente

Hooks de React: useState y useEffect

Para poder utilizar estos hooks lo primero es importarlos.

import React, { useState, useEffect } from 'react';

– useState: se trata de una función que crea una variable donde se puede almacenar el estado del componente. Acepta un valor inicial para esa variable y devuelve un array con dos elementos, el valor de la variable y la función para modificarla.

const [isLoading, setIsLoading] = useState(false);

– useEffect: se usa para la inicialización o modificación de variables, llamadas a APIs, etc. La llamada a useEffect acepta una función como argumento que se ejecuta por defecto cuando el componente se renderiza por primera vez, y después cada vez que el componente se actualice o cuando se modifique alguno de los argumentos pasados como parámetros (en el ejemplo category y type).

  useEffect(() => {
    const fetchDataTxt = async () => {
      setIsLoading(true);
      try {
        const result = await axios("http://" + window.location.host + "/" + category + "/" + type + "/description.txt");
        setData(result.data);
      }catch(err){
        console.log("error http://" + window.location.host + "/" + category + "/" + type + "/description.txt");
      }
      setIsLoading(false);
    };
    fetchDataTxt();
  }, [category, type]);

Ejemplos

React tips and tricks

– React Developer Tools: Herramienta para depurar el código. Es un plugin que se instala en el navegador: Chrome, Firefox.

– Simple React Snippets: Plugin para el VSCode que te facilita mucho el desarrollo.

– Fragmentos: Es muy común que un componente devuelva múltiples elementos. La forma más cómoda de hacerlo es con los tag <> </>

class Columns extends React.Component {
  render() {
    return (
      <>        
        <td>Hello</td>
        <td>World</td>
      </>
          );
  }
}

– React Bootstrap: Framework de bootstrap adaptado a React. https://react-bootstrap.github.io/

npm install react-bootstrap bootstrap@5.1.3

– Axios: Axios es un cliente HTTP ligero basado en el servicio $http que se puede utilizar con react. Documentación 1 – Documentación 2

npm install axios

Enrutado dinámico en React: BrowserRouter vs HashRouter

En react para configurar las rutas tenemos la libreria react-router-dom. Podemos instalar con:

npm install react-router-dom

Esa librería tiene los componentes BrowserRouter y HashRouter. La principal diferencia entre ellos está en que con HashRouter se añade el # a las rutas url. Tal que así:

– HashRouter: https://gallery-react.disastercode.com.es/#/gallery/animales/gatos
En este caso el servidor ignora lo en la url lo que hay despues del #. Y el cliente es el que se encarga de interpretar esa parte de la ruta.

– BrowserRouter: https://gallery-react.disastercode.com.es/gallery/animales/gatos
En este otro caso el servidor intentará manejar la ruta completa. Por eso al recargar la página nos devolverá 404, al ser rutas que no existen en el lado del servidor.

Ejemplo con HashRouter

Fuente

Uso de dangerouslySetInnerHTML en React

Esta función te permite incrustar html directamente con React. Se utiliza en lugar de innerHTML.

const App = () => {
  const data = 'lorem ipsum';
  return (
dangerouslysetinnerhtml={{__html: data}}
  );
}
export default App;

Fuente

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