DEV Community: Emanuel

Clonador y Fusionador de Playlists para Spotify

Emanuel — Wed, 19 Jun 2024 04:40:24 +0000

Hace aproximadamente 2 años tuve la oportunidad de conocer proyectos en React, pero fue hacia finales del año pasado cuando comencé a perfeccionar mis habilidades en esta tecnología.

Aunque todavía estoy en proceso de aprendizaje, he decidido compartir una serie de proyectos que he desarrollado en mi cuenta de Github. Durante este tiempo, mi objetivo ha sido crear proyectos funcionales que no solo beneficien mi crecimiento como desarrollador, sino que también puedan ser útiles para la comunidad en general. Recientemente, mientras escuchaba una playlist en Spotify, noté varias canciones que no me gustaban. Esto me llevó a plantearme la siguiente pregunta:

¿Existirá una opción dentro de Spotify, en la que pueda clonar una playlist pública y que pueda eliminar canciones?

La respuesta corta es: No

Debido a que solo el dueño de la playlist tiene el control total sobre su contenido, incluyendo la capacidad de agregar, eliminar o reorganizar canciones.

Entonces decidí investigar cómo funciona Spotify y descubrí que tienen una API a la cual puedes conectarte de forma gratuita después de cierta configuración. Con esta información, desarrollé la siguiente SPA (Single Page Application).

La versión más reciente del repositorio está publicada en vercel, puedes acceder desde acá https://spotify-playlists-mu.vercel.app/

¿Como funciona?

Iniciar sesión con Spotify.

¿Porque debo acceder con mi cuenta de Spotify?
Cuando clonas listas de reproducción, estas se guardan en tu cuenta, por lo que te conviertes en el administrador. Esto significa que no solo se agregarán a tu biblioteca, sino que también podrás gestionarlas a tu gusto. Está sesión quedará únicamente en tu navegador.

Al momento de que presiones el botón iniciar con Spotify, si no tienes ingresada tu sesión te pedirá que accedas.

Después de que ingreses sesión te pedirá que apruebes unos permisos, estos permisos servirán para crear playlists, agregar canciones a playlists y eliminar canciones.

Si otorgas los permisos correspondientes, la aplicación te dará un mensaje de Bienvenida y se habilitarán los inputs para colocar los links de las playlists.

Clonar playlist
Para clonar una playlist basta con poner el link de la playlist pública, si deseas eliminar una canción presiona el botón "Agregar Canción" y entonces las canciones que coloques en esa lista se excluirán de tu nueva playlist.

Fusionar Playlists
Durante el desarrollo de la aplicación web, se me ocurrió la idea de poder combinar las canciones de 2 o más playlists. Para esto, creé una sección donde se pueden ingresar los enlaces de las playlists públicas. Utilizando el API de Spotify, la aplicación crea una nueva playlist y agrega todas las canciones de las playlists especificadas.

Explicando el código

Antes de continuar, cabe mencionar que el código está disponible de forma gratuita en mi Github.

El link del repositorio es https://github.com/garcodas/spotify-playlists

Debido a que es una SPA (Single Page Application), en el repositorio solo se encuentra la parte del frontend, que se conecta con el API de Spotify.

Para su desarrollo, se utilizaron las siguientes bibliotecas:

React con versión 18.2.0
React Router con versión 6.23.1
Vite con versión 5.2.0

Para la realización de solicitudes se utilizó la biblioteca:

Axios con versión 1.7.2

Para la realización y validación de formularios se utilizaron las bibliotecas:

Zod con versión 3.23.8
React Hook Form con versión 7.51.5

También se utilizó una biblioteca de componentes llamada shadcn/ui la cual utiliza tailwindcss para estilizar los componentes.

En conclusión, esta SPA que he desarrollado te permite combinar canciones de varias playlists de Spotify, facilitando la creación de nuevas listas personalizadas. Todo el código está disponible en mi repositorio de GitHub, donde puedes encontrar la parte del frontend que se conecta con el API de Spotify.

Si estás interesado en aprender más sobre React o deseas contribuir haciendo mejoras al proyecto, te animo a explorar el repositorio y enviar tus Pull Requests. Estaré encantado de revisar y colaborar en tus aportes. Además, Estoy abierto a recibir comentarios constructivos sobre mi código para seguir avanzando en esta tecnología. Tu participación es muy valiosa para seguir mejorando esta herramienta.

¡Gracias por su interés y apoyo!

MULTIPLES LLAVES SSH PARA DIFERENTES CUENTAS EN GITHUB

Emanuel — Sun, 22 Oct 2023 05:35:03 +0000

Me ha tocado que, en algunas empresas para compartir el código, en lugar de compartir por medio de permisos del repositorio comparten las credenciales de una cuenta en Github. Si bien es cierto no es la mejor manera de compartir el código, pero ellos ya tienen un flujo de trabajo preestablecido.

La forma más segura de compartir información entre Github y un ambiente de desarrollo es mediante llaves SSH; sin embargo, si también estas trabajando en proyectos personales ya sea un emprendimiento o simplemente estas creando proyectos para aprender y conectas tu cuenta personal de la misma manera, Github te indicará que no puedes agregar una llave ssh dos veces, por lo tanto, tendrás que crear dos diferentes claves, una para cada cuenta. Pero: ¿Como creamos esas llaves y las relacionamos con las cuentas de Github?

Tabla de Contenido

Generación de llaves
Agregar llaves a Github
Relacionar llaves con Github
Clonar repositorios

Generación de llaves

Lo primero que debemos hacer es posicionarnos en la carpeta .ssh, regularmente en todos los sistemas operativos está ubicada en el home del usuario.

Luego debemos crear una llave ssh, una forma fácil de hacerlo es ejecutar el siguiente comando:

ssh-keygen

Al momento de ejecutar el comando nos va a preguntar en cual archivo queremos guardar la clave, para este ejemplo podemos ponerle personal_github para la llave de nuestra cuenta personal. Luego nos va a preguntar si queremos ponerle una frase (o contraseña 😂) a nuestra llave, yo siempre recomiendo ponerla para mayor seguridad.

Listo, ya tenemos nuestra primera llave.

Después repetimos los mismos pasos para generar nuestra segunda llave, solo que ahora cuando nos vuelva a solicitar el nombre para la llave podemos poner work_github simulando la llave para nuestra cuenta de trabajo.

Si se crearon las llaves correctamente debes tener cuatro archivos de la siguiente manera:

personal_github
personal_github.pub

work_github
work_github.pub

Agregar llaves a Github

Ahora en la sección de Llaves SSH y GPG en la configuración de Github debemos agregar las llaves de los archivos con extensión .pub, para ver el contenido de estos archivos podemos ejecutar el comando:

cat personal_github.pub

//además para la cuenta work deberíamos ejecutar

cat work_github.pub

Relacionar llaves con Github

Cuando ya tengamos agregadas las llaves públicas a las respectivas cuentas de Github y tratamos de clonar un repositorio de esas cuentas nos informará del siguiente error:

Este error es debido a que ya hemos creado las llaves, pero aún nos hace falta relacionarlas en nuestro ambiente. Vamos a ubicarnos en nuestra consola a la carpeta .ssh que está ubicada en el home de nuestro usuario del sistema operativo, como ejemplo podemos usar el siguiente comando:

cd ~/.ssh

Cuando ya estemos en la carpeta debemos crear un archivo sin extensión llamado config. Dependiendo del sistema operativo así también va a depender el comando para crear el archivo, por ejemplo, en Linux puede ser:

touch config

En Windows Powershell sería:

New-Item config

Ahora debemos editar ese archivo, puedes hacerlo con tu editor de texto favorito. Yo lo editaré con VSCode por lo que voy a ejecutar el comando:

code touch

Debemos colocar las siguientes configuraciones:

# Personal GitHub account
 Host personal.github.com
 HostName github.com
 IdentityFile ~/.ssh/personal_github
# Work GitHub account
 Host work.github.com
 HostName github.com
 IdentityFile ~/.ssh/work_github

Acá estamos indicado el host al que pertenece la llave, el nombre de ese host y también donde está ubicada la llave correspondiente a cada host.

Clonar repositorios

Ahora para clonar los repositorios debemos modificar el comando de git, antes hacíamos:

git clone git@github.com:garcodas/example_bot.git

Modificado sería:

git clone git@personal.github.com:garcodas/example_bot.git

Como nos damos cuenta en el host del url del repositorio debemos colocar el nombre del host que hicimos en el archivo config que creamos en la carpeta .ssh, como estoy clonando un repositorio de mi cuenta personal coloque personal.github.com, si quisiera clonar algo del host work.github.com debería hacer el mismo proceso.

ROBOT PARA DECLARACIÓN EN LA SAT

Emanuel — Sat, 14 Oct 2023 12:59:10 +0000

Cuando estamos inscritos como pequeños contribuyentes electrónicos ante la Superintendencia de Administración Tributaria (SAT) debemos hacer la declaración a Q 0 todos los meses para no caer en omisos y pagar una multa inicial como de Q 150. Esto lo tuve que aprender a las malas 😂 ya que por casi 6 meses no hice la declaración a Q 0, obviamente tuve que pagar casi Q 1 000 en multas más intereses. 😭😭

Por lo que decidí crear un recordatorio en mi calendario digital para que no se me olvidara (por increíble que parezca en febrero de este año solo ignore el recordatorio y también se me paso la fecha límite para hacerlo 😂🤡). Pero los que también hacen este tipo de declaraciones saben lo repetitivo que puede ser. Sin embargo, este proceso a veces no lleva más de 5 minutos.

Desde hace tiempo he desarrollado pruebas de integración que aprendí a hacerlas con #Javascript específicamente con Puppeteer, pero de igual forma tenía que ejecutar los procesos y volvía a la misma situación del recordatorio.

A raíz de esta situación aprendí a hacer "robots" y a programarlos con una tarea programada en Windows y desde entonces ya no hay meses en los que olvidé hacer las declaraciones 😍.

¿Como lo hice?

SikuliX automatiza todo lo que ves en la pantalla de tu computadora de escritorio con Windows, Mac o algo de Linux/Unix. Utiliza reconocimiento de imágenes impulsado por OpenCV para identificar componentes de GUI. Esto es útil en los casos en los que no hay un acceso fácil a las partes internas de una GUI o al código fuente de la aplicación o página web en la que deseas actuar.

SikuliX soporta lenguajes como:

Python
Ruby
JavaScript

Decidí crear este robot con Python, para aprender más del lenguaje y debido a que los astros se alinearon el día que lo hice ¡FUNCIONÓ! ❤️

Lo interesante de SikuliX es que mediante capturas de pantalla, la automatización sabrá donde dar click, donde debe ingresar texto y así con todas las instrucciones que le ingresemos. También tiene opciones para crear ventanas emergentes y poder informar al usuario sobre procesos o podemos pedirle información al usuario desde las mismas.

Estas ventanas emergentes me fueron de gran utilidad debido a que en el portal de Declaraguate tienen una pequeña validación de captcha 😅. Por lo que cuando llega esa parte de la automatización solo pido que se ingrese el captcha que aparece en la imagen y luego este sigue el proceso para hacer la declaración.

La tarea programada se ejecuta cada 27 de cada mes y para ejecutarlo cree un archivo .bat para ejecutar el siguiente comando de Java:

java -jar C:\Sikulix\sikulixidewin-2.0.6-20230417.153928-17.jar -r "C:\Users\UsuarioWindows\declaracion_sat.sikuli"

Les comparto una pequeña demostración de la automatización 😍:

¿Como implementarlo?

Requisitos:

Windows 11
SikuliX
Java 11
Git

Si no tienes Windows 11 puedes hacer las modificaciones en las capturas en Sikulix para que se adapte a tu sistema operativo.

Paso 1:
Clonamos el repositorio en github

Paso 2:

Ejecutamos el comando:
java -jar C:\Sikulix\sikulixidewin-2.0.6-20230417.153928-17.jar -r "C:\Users\UsuarioWindows\declaracion_sat.sikuli"

Debes reemplazar la ruta de tu SikuliX y reemplazar la ruta donde clonaste el repositorio por la ruta de ejemplo que está dentro de las comillas.

Si quieres que también se ejecute en una tarea programada te dejo el link de la documentación de Microsoft