DEV Community: enzotrucchi

Un nuevo look, un viejo look

enzotrucchi — Mon, 25 Jul 2022 21:37:00 +0000

Renovación de mi web con Jekyll y GitHub Pages

Como cualquier renovación, la de mi web personal viene de la mano de una (o varias) necesidades.

Aquí mi lluvía de ideas/necesidades, sin ningún orden de importancia:

No quería utilizar WordPress -otra vez-: No tengo nada en su contra, me parece que, bien utilizada, es una herramienta super sencilla y práctica. Ojo, tiene sus particularidades: Plugins, Base de datos, cositas que no son dificiles de utilizar ni configurar, pero hay que tener ganas.
No quería quedarme en HTML/CSS. Me gusta, me gusta.. Mi sitio anterior (+ algunos construídos en los últimos años) estaba desarrollado siguiendo una plantilla HTML/CSS, pero quería probar algo distinto. Además, cansa un poco la "lucha" por tener sitios super estéticos y siguiendo las tendencias de diseño en donde cada año se actualiza un border, un rounded, la forma de presentación de un elemento y demás. En este caso estaba buscando algo más minimalista, más práctico, más enfocado al contenido puro. Lo demás, gracias por ahora.
Hablando de contenido: Quería que fuese una gran parte de contenido de código, por lo que debía ser fácil utilizar markdown y que el código quede entendible. La otra opción, usar imagenes de algún servicio como Carbon, pero al momento de copiar/pegar el código (y tambien leerlo), al usuario se le termina haciendo dificil desde una imagen. Vamos a por el buen markdown.
Dedicarle el menor tiempo posible (y a eso restale unos minutos) al armado de base de datos, configuración de backups, configuración plugins, etc.

🔎 Primer intento: Publicando algunas entradas en el Blog Dev

Arranqué posteando algunas entradas de prueba en Dev. Si bien soy usuario del Blog desde hace un par de años, está bueno también probar el otro lado. Mi experiencia hasta ahora: Excelente.

Facilidad para escribir entradas (si bien por lo general uso un editor de Markdown y después copio/pego el contenido).
Guías de otros usuarios
Permite crear series de entradas relacionadas.
Provee un dashboard bastante completo.
Tiene una gran base de usuarios (si bien la mayoría de habla Inglesa, también hay contenido en español, cómo el mío).

Primera prueba cumplida. DEV.to es genial y voy a seguir utilizandolo en el futuro.
Además, podría servirte esta comparativa entre DEV y MEDIUM (otra plataforma de Blog muy conocida en el ambiente tech).

🔎 Segundo intento: Jekyll + GitHub Pages

Mi segundo intento viene de la mano de Github Pages
En la misma web que linkeo, podes ver que se hace mención a Jekyll como herramienta de Blogging. Por lo tanto no hace falta una explicación tan larga. Alcanza con ver el vídeo introductorio.

En mi caso ya tenía dominio comprado (enzotrucchi.com), pero si ese no fuera el caso, se podría alojar de manera gratuita de la siguiente forma: username.github.io
Las buenas noticias, además de que es gratuito el hospedaje, no paran:

Se puede utilizar markdown
Hay plantillas de Jekyll por montones, de estilo minimalista, old school o lo que se te ocurra.
Se puede hacer live reload si utilizamos Jekyll en local (versiones nuevas nativo, si no se puede bypassear)
Está preparado y optimizado para el despligue en GitHub pages: Sólo con un push a la rama indicada, el despliegue con los cambios es automático y se refleja en la web.
Se puede utilizar un dominio propio y se configura literalmente en 5 minutos.
Permite https
Si bien no tiene un gestor de contenido tipo CMS como Wordpress, es fácil crear entradas desde el editor o directamente desde GitHub.

A todo esto, obviamente ya tenemos dos ganadores: Web personal en GitHub pages, Blog de replicación de contenidos: DEV

🔎 Tercer intento: Jekyll + GitHub Pages + Jekyll Now

Y si faltaba algo más:
Buscando info y repos de Jekyll, me encontré con esta locura:
Jekyll Now quien a partír de un simple Fork, nos deja nuestro blog estilizado de forma minimalista y un diseño que algunos considerarán antiguo pero digamoslé mejor Old School.

Jekyll Now makes it easier to create your Jekyll blog, by eliminating a lot of the up front setup.

Acá podes ver como quedó el repo: https://github.com/enzotrucchi/enzotrucchi.github.io
Y acá ingresá a mi web

Espero te sirva el post! Recordá que para cada necesidad, hay una o varias soluciones diferentes!

ToDo List (o lista de tareas) en Ionic

enzotrucchi — Mon, 11 Jul 2022 01:43:57 +0000

Antes de comenzar:

👉🏾 Demo operativa.

👉🏾 Repo en GitHub

🎯 Proyecto realizado con Ionic 6 y utilizando Ionic Storage. Permite agregar, modificar, eliminar tareas.
Se presentan en una lista.

Objetivo del proyecto:

Desarrollar una app utilizando Ionic 6, que tenga como principal funcionalidad administrar tareas. Utilizaremos IonicStorage para almacenar en local las tareas.
En la primera versión, vamos a desarrollar un servicio para gestionar las tareas:
- Crear tarea
- Modificar
- Borrar
- Obtener todas
- Obtener por Id

Así nos debería quedar nuestra app:

Iniciando el proyecto en Ionic

Vamos a utilizar la opción blank para tener una plantilla limpia.

📢 En mi caso elegí la opción de Angular al momento de seleccionar el frame con el cual trabajar, por lo tanto en la carpeta que seleccciones, abrimos terminal y tipeamos:

ionic start todo-list blank

Estructura de archivos y carpetas 📃

¡Empezamos la parte interesante!
Lo primero que voy a hacer es armar la estructura de carpetas y archivos que posteriormente vamos a utilizar.
Con esto, ya podríamos hacer nuestro primer commit.

Instalando Ionic Storage

Para la versión 6 de Ionic, utilizando Angular, instalamos Ionic Storage con npm, basandonos en el siguiente link:
Ionic Storage Oficial

Siguiendo la documentación oficial:

If using Angular, install the @ionic/storage-angular library instead:

npm install @ionic/storage-angular

Interface

export  interface  ITarea {

    id?:  number;

    titulo:  string;

    descripcion:  string;

}

Definiendo nuestro component home.page

Vamos a basarnos en componentes de Ionic como ion-item-options y ion-buttons, además de utilizar una lista de items para mostrar las tareas que ya tengamos cargadas.

Cuando ingresemos a este componente, vamos a buscar las tareas a nuestro servicio. Para tomar estas tareas que nos devuelve el servicio y poder utilizarlas en nuestro componente, ya tenemos definido un array de tareas siguiendo la interfaz ITarea

Después, sólo utilizamos AlertController para el cuadro de diálogo de eliminar y nos vamos a la ruta /tareas enviando el id si estamos modificando una tarea. Caso contrario, estamos agregando. Vamos a /tareas pero sin enviar id.

En nuestro servicio definimos los métodos para hacer CRUD de Tarea.
📌 Importante no olvidarse de esta línea (ya que nos dará error al intentar utilizar storage):

await this.storage.create();

Lo demás, sólo un poco de Js ✔️ ✔️

Eso es todo!
Con un poquito de Js y utilizando IonicStorage, tenemos funcionando nuestra lista de tareas con opción de eliminar, agregar y modificar .

Si te gustó, compartilo!

Hasta la vista!

Telegram Bot - Parte 3: Deploy a Heroku

enzotrucchi — Sat, 02 Jul 2022 22:53:03 +0000

Última parte de nuestro primer proyecto de fin de semana.
📢📢 Vamos a deployear nuestro código y dejar el pequeño bot operativo en Telegram.

Vamos a necesitar un proveedor de hosting para mantener operativo nuestro bot. Si bien existen varios, en este caso elegí Heroku por el plan gratuito que nos brinda.

Primero, una pequeña intro-recordatorio de qué es Heroku, el gran servicio que vamos a utilizar en esta etapa de nuestro proyecto:

Heroku es una solución de Plataforma como Servicio (PaaS) basada en la nube para que el cliente solo se preocupe de desarrollar su aplicación mientras Heroku se encarga de la infraestructura que hay detrás.

¿Es gratis? 😐

Además de poseer planes de pago, Heroku pone a nuestra disposición un plan gratuito, lo que hay que tener en cuenta es que si una aplicación no recibe ninguna solicitud en 30 minutos, entrará en modo suspensión, por lo que a la siguiente petición se levantará de nuevo, lo que tardará más tiempo de que la primera petición (muy pequeño).

¿Qué lenguajes soporta? ✋

Actualmente, y según el sitio oficial:

NodeJS.
Ruby.
Java.
PHP.
Python.
Go.
Scala.
Clojure.

Manos a la obra

Creando el archivo Procfile

Primero, nuestro archivo Procfile, encargado de configurar los pasos de deployment y el que opcionalmente puede incluír las instrucciones para inicializar nuestro proyecto. Más info disponible en la Procfile documentación oficial

En la raíz del proyecto, creamos el archivo indicado con el siguiente contenido:

worker: node bot.js
// En mi caso bot.js indica el nombre de mi archivo.

Creamos la aplicación en Heroku

Desde el panel de administración de Heroku (después de crear nuestra cuenta), vamos a Nueva -> Nueva App. Además del nombre y la región, podemos seleccionar el método de deployment.

No es necesario conectarlo a Github si no la seleccionamos. En mi caso, en el primero bot no lo hice, en el segundo si (siempre está bien probar las opciones disponibles)

Deployeamos desde terminal

Volvemos a nuestra terminal y escribimos lo siguiente:

heroku login

heroku git:remote -a NombreDeMiBot

git add .

git commit -m "First commit"
// Push a Heroku!
git push heroku main

✨✨✨✨ Super aclaración ✨✨✨✨

Si queremos que nuestra app sea más segura, en este punto no deberíamos "exponer" nuestro token (hardcodeado en la parte 1 del tutorial) y en cambio utilizar las Variables de Entorno:
TELEGRAF_KEY: token_obtenido_de_botFather

También podríamos configurarlo desde terminal:

 heroku config:set TELEGRAF_KEY=99999999999999

El paso siguiente es ir a la pestaña Resources:

deshabilitar web npm start (para aplicaciones webs)
habilitar worker node bot.js

Listo! Tenemos nuestro bot funcionando!

¿Te sirvió el post?
Copate compartiendo y

Telegram Bot - Parte 2: Live reload

enzotrucchi — Sat, 02 Jul 2022 21:55:13 +0000

Listo el código de nuestro pequeño bot en Js, vamos a agregarle una funcionalidad extra y a aprender a utilizar una herramienta súper útil a la hora de trabajar con Node.js: Nodemon

¿Qué es Nodemon?

En palabras simples: Es una utilidad que nos sirve para permitir que los cambios que realicemos en nuestro proyecto se implementen en tiempo real.

En palabras más técnicas -o precisas- y siguiendo la fuente de Digital Ocean: nodemon es una utilidad de interfaz de línea de comandos (CLI) que envuelve su aplicación Node, vigila el sistema de archivos y reinicia automáticamente el proceso.

Instalación

Globalmente:

$ npm install nodemon -g

$ yarn global add nodemon

Localmente:

$ npm install nodemon --save-dev

$ yarn add nodemon --dev

Si vas a instalarlo de manera local, recordá que no vas a poder utilizar el comando nodemon directamente desde línea de comandos.

Uso

Hasta aquí para levantar nuestra aplicación corríamos desde terminal el siguiente comando:

node bot.js

El problema con esto es que cada cambio que hagamos en nuestro código, sólo lo veremos después de terminar el proceso y volver a levantarlo.

🚩 ¿Bastante tedioso no?

Con Nodemon cambiamos el código de inicialización anterior por el siguiente:

nodemon bot.js

y en terminal deberíamos ver algo como esto:

¡Ahora si!
Cada cambio que realizemos, deberíamos verlo en tiempo real. 👀

¿Cool no?

En la próximo y última entrada de nuestro Telegram Bot vamos a subirlo a Heroku y dejarlo operativo en Telegram. 🤘🤘

Desarrollando un Bot para Telegram

enzotrucchi — Sat, 25 Jun 2022 22:11:27 +0000

Objetivos del proyecto:

Etapa 1: Desarrollar y probar nuestro bot en local.
Etapa 2: Publicarlo por medio de Heroku.

Pero antes de arrancar... ✋

¿Qué son los Bots de Telegram?

¿Escuchaste algo de esto? Si es tu primera vez, te lo resumo así nomás:

Son aplicaciones de terceros que se ejecutan dentro de la aplicación de mensajería.
No necesitas instalarlos ni hacer nada diferente para poder utilizarlos, ya que se utilizan como si estuvieras interactuando con una persona real (Es decír, buscando el nombre del bot en el buscador de la app como harías con cualquier usuario: @nombreDelBot).
Hay más: Son multiplataforma, y los podes usar en la versión de Telegram del sistema operativo que quieras.

Ahora, a nivel dev: Funcionan con una API de Telegram

🎌 ¿Intro lista?
¡Manos a la obra con nuestro primer proyecto de fin de semana! 👇👇

Requisitos

NodeJs
npm instalado
Algún editor de código, yo voy a utilizar el siempre confiable Visual Studio Code
Obvio pero también, tener una cuenta en Telegram.
Telegraf. Esta librería será la que utilizaremos para crear el bot, específicamente con Js.

Paso a Paso

1. Damos de alta nuestro Bot

Abrimos Telegram y vamos a utilizar el Bot "Padre": botFather. Esta cuenta es la administradora de todos los bots, por lo que podrás administrar los tuyos interactuando con ella.
Como dato particular, el nombre del bot debe terminar con "bot". (¿Ya pensaste un nombre marketinero? 😎)

Una vez en el chat con botFather, basta con hacer /newbot y setear el nombre. Eso es todo.
Nos devolverá un token que necesitaremos luego en nuestro código. De todas formas, podemos volver y chequearlo.

🎁 En mi caso, voy a hacer un bot que me recuerde los días que cumple años cada miembro de mi familia. Luego intentaré desarrollar uno que les haga regalos y no tenga que gastar.

2. Primeras lineas

En nuestra carpeta preferida de proyectos, creamos una nueva con el nombre del bot/proyecto.
En mi caso: CumplesDeLaFliaBot

Nos ubicamos dentro de la carpeta y abrimos linea de comandos:

npm init 

npm install telegraf

Creamos un archivo .js; Por ejemplo: bot.js.
Aquí tendremos la lógica del bot.

const Telegraf = require('telegraf');

const bot = new Telegraf('tokenProvistoPorBotFather');

Empezamos con utilizar métodos de Telegraf, en este caso .command para mostrar un saludo personalizado cuando se inicia el bot (vamos a estar capturando el "start" propio de cuando se inicia la conversación)

 bot.command('start', ctx => {
        console.log(ctx.from)
        bot.telegram.sendMessage(ctx.chat.id, '¿Otra vez olvidaste los cumpleaños?', {
        })
    })

3. Seteamos nuestro bot en Telegram

Esta sección es necesaria sólo si queres utilizar los comandos -una especie de accesos rápidos- que te provee botFather.
Para esto vamos a Telegram nuevamente:

/mybots: Recuperar la lista de bots propios y seleccionar el necesario.
/setcommands: Setear comandos que queremos utilizar.

En mi caso sería (Recordar que tenemos que responder en formato command - Description). Donde command es el comando que vamos a capturar y description es lo que ve el usuario.

genaro - Genaro

vito - Vito

✅ Listo, volvemos a Visual Studio Code.

4. Capturando comandos del usuario.

En esta parte vamos a capturar -> devolver. Recordá que podes llamar a una función y hacer lo-que-quieras en ella, y devolver el resultado. Por ejemplo, en otro bot que desarrollé, mandando un parámetro de tipo int a una función, recorría un array de objetos y devolvía uno específico. Anyways..

 //esperamos el command /genaro y devolvemos la fecha en formato string (dd/mm)
    bot.command('/genaro', ctx  => {
        bot.telegram.sendMessage(ctx.chat.id, '17/09');
    })

    //esperamos el command /vito y devolvemos la fecha en formato string (dd/mm)
    bot.command('/vito', ctx  => {
        bot.telegram.sendMessage(ctx.chat.id, '11/04');
    })

    //lanzamos nuestro bot
    bot.launch();

5. Probando nuestro bot en local

Una vez finalizado nuestro código (o durante el desarrollo, porqué no), abrimos terminal y escribimos:

node bot.js

Teniendo Telegram abierto, y si seteamos todo de manera correcta: ¡Ya estamos listos para empezar a testear nuestro bot! 🏄

Próximos episodios de esta maravillosa serie:

Utilizar nodemon para ver cambios en tiempo real, mientras desarrollamos.
Subir nuestro bot a Heroku y dejarlo operativo en Telegram.

¿Te sirvió el post?
Copate compartiendo y

Código de Fin de Semana - Introducción

enzotrucchi — Sat, 25 Jun 2022 22:11:11 +0000

De que se trata

Hablemos de situaciones reales que vivimos los devs, en alguna etapa de nuestra carrera:

😵 ¿Te encontraste alguna vez sin saber que hacer un fin de semana para calmar la ansiedad de tipear un poco de código?
😵 ¿Te abruma tanta información disponible y no sabes por dónde empezar?
😵 ¿Viste un tutorial y queres empezar, pero sabés que eso va a seguir profundizando el agujero del tutorial hell?

Proyectos en Fin de Semana es una iniciativa propia que busca calmar esa ansiedad de aprendizaje y autorrealización proponiendo un proyecto que puedas realizar en unas pocas horas (no más de 1 día).

Así, conseguimos dos objetivos claves:
🎯 Reducir nuestra ansiedad: Desarrollando algo propio, nuevo y con diferentes enfoques, nos sentimos satisfechos y realizados.
🎯 Aprender y especializarnos: Cada proyecto nos abre un poquito más la cabeza y nos deja nuevas herramientas, terminología, incluso skills que constantemente debemos reforzar.

¿Qué necesitas?

Ganas, un poco de tiempo y auto organización. La idea es que disfrutes cada proyecto y no pierdas tu valioso time-off de trabajo, código, debuggers, y demás tareas diarias a las que estás acostumbrado.

¿Nivel de programación esperado?

Dependiendo el proyecto. Trataré en lo posible de dejar links a herramientas que se utilizan en cada proyecto con una breve descripción (o tal vez a la propia web).
Aquí una realidad del mundo tech: 🚀 ¡Se aprende haciendo!🚀 No te preocupes si no entendes la teoría la primera vez, preocupate si no tenes más ganas de aprenderla.