Author: koas

Depurar Android Chrome mediante wifi

A partir de creo que es la versión 11 de Android podemos enlazar un móvil con nuestro ordenador y usar las herramientas de desarrolladores para depurar páginas web usando wifi. El ordenador y el móvil deben estar conectados a la misma wifi.

Lo primero que debemos hacer es instalar la versión más reciente de adb en nuestro ordenador. A continuación activamos la depuración por wifi en las opciones de desarrollador.

Hecho esto pulsamos en la opción de enlazar mediante código PIN, que nos mostrará una dirección IP, un puerto y un código pin. Con estos datos ejecutamos el comando:

adb pair IP:PUERTO

Introducimos el código pin y nos indicará que el enlace se ha realizado correctamente. Pero aún hay que hacer un paso más:

adb connect IP:PUERTO

y en este caso el puerto es el que nos aparece en la sección principal de “Depuración por wifi” del teléfono.

Después de hacer esto nos aparecerá el teléfono al listar los dispositivos:

adb devices

Nos vamos al navegador y abrimos una pestaña con esta URL:

chrome://inspect/#devices

Y nos aparecerán las pestañas abiertas en el Chrome de nuestro móvil; desde allí podemos lanzar el inspector web.

Migrar a Vue3

Voy a ir dejando por aquí cómo migrar ciertos elementos de Vue2 a Vue3 para tenerlo todo junto en un mismo sitio hasta que me lo aprenda.

Scoped slots

Dentro del componente:

slot(name="icons" :row="scope.row")

Para acceder al slot dentro del código del componente:

import { useSlots } from "vue";
const slots = useSlots();
console.log(slots.icons);

En el padre:

template(#icons="{ row }")
  div {{ row }}

nextTick

nextTick(() => {});

Acceder a los datos de una fila de el-table

template(#default="scope")
  pre {{ scope.row }}

Emitir eventos

const emit = defineEmits(["myEvent"]);

emit("myEvent", { foo: bar });

Llamar a un método de un componente desde una referencia

Por defecto todos los métodos del componente son privados, así que hay que indicar que queremos que se pueda acceder desde fuera:

defineExpose({ nombreDelMetodo1, nombreDelMetodo2 });

SQLite y el error “attempt to write a readonly database”

Este error es la seguna vez que viene a morderme el culo, hace poco fue con nginx, que se emperraba en decir que no podía leer el fichero index.html de un bloque.

La solución en ambos casos es la misma, así que a ver si escribiéndola me la consigo aprender: no basta con tener permisos en el propio fichero, la carpeta que los contiene tiene que tener el permiso de escritura.

Edición de cinco minutos después: acabo de caer en la cuenta de que en las instrucciones de una clase que subí a Github hace cinco años (phpLoginBlacklist) especifico claramente:

 It is recommended to provide a path outside the web document root (remember to give write permissions on that folder to your web server user).

Así que queda demostrado que en lo referente al sistema de ficheros de Linux mi memoria es equivalente a la del pez Dory. 🤦‍♂️

Proxy inverso para websockets de socket.io con nginx

Si tenemos configurado y funcionando un servidor web podemos añadirle capacidades de websockets sin tener que complicarnos con nuevos puertos, certificados de seguridad, etc.

Para eso vamos a usar nginx como proxy inverso. En mi caso necesitaba poder conectar a un programa escrito en node mediante websockets (desde el navegador del cliente) y mediante http (desde mi API en el servidor).

El programa de node usa socket.io y escucha en el puerto 1978.

Esta es la configuración que he utilizado. En el fichero nginx.conf añadimos esta directiva dentro del bloque http:

upstream websocket {
    server localhost:1978;
}

Y en el fichero de configuración de nuestro servidor, dentro del bloque server:

# Esta es la ruta que usa socket.io para escuchar conexiones de websockets
location /socket.io/ {
    proxy_pass http://websocket;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
}
# Esta es la ruta a la que podremos llamar desde la API.
location /fry/ {
    proxy_pass http://localhost:1978;
}

En el código JS del cliente usaremos como host de conexión de socket.io https://midominio.com y para conectar desde PHP https://midominio.com/fry/endpoint

Comparar valores con array de datos JSON en MySQL

Supongamos que tenemos en una tabla una columna a_productIds de tipo JSON que contiene un array de números y queremos listar los registros que tienen en esa columna algún valor de una lista de números.

La forma más sencilla que he encontrado es usar la función JSON_OVERLAPS que recibe dos documentos JSON y devuelve 1 si tienen en común algún par clave-valor o elemento de array (esto es lo que nos interesa aquí).

Si queremos listar los registros que tienen en a_productIds alguno de los valores 1, 2 o 3 la consulta quedaría así:

SELECT * 
  FROM tabla 
 WHERE JSON_OVERLAPS(JSON_EXTRACT(a_productIds, '$'), '[1, 2, 3]');

En ocasiones quizá necesitemos localizar arrays vacíos, esto puede hacerse con la función JSON_LENGTH:

SELECT * 
  FROM tabla 
 WHERE JSON_LENGTH(a_productIds, '$') = 0;