<h1>Bot de Whatsapp con chatGPT y Javascript</h1>
Últimamente está de moda usar chatGPT para casi todo, es normal, es una inteligencia artificial muy curiosa. ChatGPT se está usando para muchos ámbitos pero los usuarios no dejan de usarlo para tener conversaciones con él de todo tipo de temas.
¿Qué pasaría si lleváramos chatGPT a un bot Whatsapp para que conteste por nosotros? ¿Y en Javascript? Vamos verlos que parece interesante :)
# Requerimientos
Vamos a usar dos librerías para crear este bot de Whatsapp. Una para crear el propio bot y otra que nos facilite la integración con chatGPT (o la api de OpenAI.com)
<ul>
<li><a href="https://github.com/pedroslopez/whatsapp-web.js">Whatsapp-web.js</a></li>
<li><a href="https://github.com/PawanOsman/ChatGPT-Official">ChatGPT-Official</a></li>
<li>Token de OpenAI. <a href="https://platform.openai.com/account/api-keys">Obtener token</a></li>
</ul>
<h1>Prueba de concepto</h1>
Vamos a crear una instancia de nuestra sesión de Whatsapp para que esté a la escucha de los mensajes. Capturaremos cada mensaje y se consultará a chatGPT, cuando obtengamos una respuesta de chatGPT contestaremos al usuario o grupo desde nos hayan preguntado en Whatsapp. Así es, muy sencillo.
Para ello creamos un proyecto con <code>npm init</code> e instalamos las dos dependencias mencionadas anteriormente. Creamos un fichero index.js con el contenido del ejemplo de Whatsapp-web.js e importamos chatGPT.
<pre><code class="hljs javascript">import { ChatGPT } from &#x27;chatgpt-official&#x27;;
import qrcode from &#x27;qrcode-terminal&#x27;; // Crea e imprime por consola un código QR
import { Client } from &#x27;whatsapp-web.js&#x27;;

const client = new Client();
const bot = new ChatGPT(&quot;OPENAI_API_TOKEN&quot;, { model: &quot;text-davinci-003&quot; }); // Forzamos este modelo

client.on(&#x27;qr&#x27;, (qr) =&gt; {
 // Genera y escanea este código con tu teléfono para iniciar sesión
 qrcode.generate(qr, { small: true });
});

client.on(&#x27;ready&#x27;, () =&gt; {
 console.log(&#x27;Client is ready!&#x27;);
});

client.on(&#x27;message&#x27;, async msg =&gt; {
 // Recibimos el mensaje y nos quedamos con el &#x27;sender&#x27; y el &#x27;body&#x27;
 // sender: Grupo/Usuario que envía en mensaje que usaremos para las conversaciones.
 // body: Contiene el texto del mensaje
 const conversation_id = msg.sender;
 const message = msg.body; 
 
 // Consultamos al bot y esperamos la respuesta
 const response = await bot.ask(message, conversation_id);
 const text = response.response;

 // Respondemos con el bot al usuario/grupo que lo haya enviado
 let destination = message.from; // Obtenemos quién envió el mensaje
 let sendMessageData = await client.sendMessage(destination, text);
 console.log(sendMessageData);
});

client.initialize();
</code></pre>
Esto sería una prueba de concepto, a partir de aquí ya puedes disparar tu creatividad para darle el comportamiento que quieras.

Creando un bot de Whatsapp con chatGPT en Javascript

Bot de Whatsapp con chatGPT y Javascript

¿Siempre has querido utilizar una misma ruta en angular pero renderizar componentes diferentes... según rol, un test a/b de alguna version nueva de tu aplicación?... ¿y siempre andabas haciendo redirecciones según las condiciones?
<h2>Angular 14 + CanMatch</h2>
En la última versión de Angular disponemos de este nuevo guard con el que podremos decidir que ruta y que componente renderizamos. Si la implementación de CanMatch devuelve true continua con la navegación y el enrutador utilizará el primer componente que haga &quot;match&quot;.
<h2>Podemos hacer ruta según rol de manera sencilla</h2>
Para verlo mejor podemos ver el siguiente código:
<pre><code class="hljs typescript">const isRole = (role: string) =&gt; {
 const roleLogged = localStorage.getItem(&#x27;role&#x27;)

 return roleLogged === role
}

const routes: Routes = [
 {
 path: &#x27;profile&#x27;,
 children: [
 {
 path: &#x27;&#x27;,
 canMatch: [() =&gt; isRole(&#x27;admin&#x27;)],
 component: AdminProfileComponent
 },
 {
 path: &#x27;&#x27;,
 canMatch: [() =&gt; isRole(&#x27;register&#x27;)],
 component: RegisterProfileComponent
 },
 {
 path: &#x27;&#x27;,
 canMatch: [() =&gt; isRole(&#x27;guest&#x27;)],
 component: GuestProfileComponent
 },
 {
 path: &#x27;**&#x27;,
 component: NotFoundComponent
 }
 ]
 }
]

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule {}
</code></pre>
En este pequeño fragmento de código hacemos una implementación sencilla para comprobar el rol del usuario guardado en el localstorage.
<pre><code class="hljs typescript">const isRole = (role: string) =&gt; {
 const roleLogged = localStorage.getItem(&#x27;role&#x27;)

 return roleLogged === role
}
</code></pre>
En la definición de rutas ya vemos como se está implementado el canMatch, llamando a nuestra función isRole.
<pre><code class="hljs typescript">const routes: Routes = [
 {
 path: &#x27;profile&#x27;,
 children: [
 {
 path: &#x27;&#x27;,
 canMatch: [() =&gt; isRole(&#x27;admin&#x27;)],
 component: AdminProfileComponent
 },
 {
 path: &#x27;&#x27;,
 canMatch: [() =&gt; isRole(&#x27;register&#x27;)],
 component: RegisterProfileComponent
 },
 {
 path: &#x27;profile&#x27;,
 canMatch: [() =&gt; isRole(&#x27;guest&#x27;)],
 component: GuestProfileComponent
 },
 {
 path: &#x27;**&#x27;,
 component: NotFoundComponent
 }
 ]
 }
]
</code></pre>
<h3>¿Que hará esto?</h3>
Cuando accedemos a la pantalla de /profile comprobará el rol guardado en el localStorage y lo comparará contra el rol que pasamos por parámetro. Irá pasando por todas las &quot;rutas&quot; hijas y la que primero devuelva true será a la que el enrutador entrará y renderizará ese componente. Si el rol no es encontrado irá al NotFoundComponent.
Es un ejemplo bastante sencillo pero conciso de como puedo usar este CanMatch.
Enlace documentación:
<a href="https://angular.io/api/router/CanMatch">Angular - CanMatch</a>
<h2>Demo</h2>
<img src="https://user-images.githubusercontent.com/11647193/215853745-547b7f55-8c87-4131-91cf-fc4290026684.gif" alt="demo-canmatch-angular">
Alberto Tejero - Senior frontend - Bravent
<a href="https://github.com/albertot-dev">Github</a> -
<a href="https://www.instagram.com/albertot_dev/">Instagram</a> -
<a href="https://twitter.com/albertot_dev">Twitter</a>

En este pequeño post podemos ver una implementación sencilla del nuevo guard 🛡️ que tenemos disponible en Angular 14. Hacemos un acceso a un perfil de usuario según el rol que tiene el usuario autenticado.

CanMatch, el nuevo guard de Angular

Pues si... Desde ayer (2022-06-22) Github Copilot deja de ser gratuito, aunque podrás obtener unos días gratuitos (60 días) hasta el 22 de agosto. Y ahora... ¿Tendré que volver a aprender a programar? ¿Merece la pena pagar? ¿Hay alternativas?
Estas preguntas deberás valorarlas tu mismo, desde mi experiencia, es cierto que ayuda algo pero tampoco es un sustituto 100%, por lo que para mi, insisto, PARA MI, si que puedo prescindir de él y no creo que pague por tenerlo. Y no te voy a engañar, lo primero que hice al enterarme de esto, fué buscar en google 'tabnine pricing' 🤣
<h2>¿Cual es mi opinón sobre estas IA?</h2>
Como decía antes, molan, pero también pienso que se están &quot;aprovechando&quot; de nuestros conocimiento, también nos beneficiamos, pero si la intención es entrenar un modelo con todos los repositorios de Github... ese entrenamiento va a ser rapidísimo, pero peligroso... Algunos usuarios han reportado que Copilot ha completado fragmentos de código con tokens, api-key...
Llamame conspiranoico... pero que todo el código que hacemos, que si, que antes ya estaba en sus servidores, pase por analizadores para entrenar esa IA...
<img src="https://user-images.githubusercontent.com/11647193/215847924-8e378605-96e3-4075-ad16-235f3371acc9.png" alt="image">
Pero bueno por si os interesa, aquí están los precios de copilot, aunque existe otra alternativa que es <a href="https://www.tabnine.com/pricing">Tabnine</a> y cuenta con un plan gratuito, yo no lo he probado pero he oido muy buenas cosas sobre él y es un claro candidato a sustituir Copilot en mi día a día...
<img src="https://user-images.githubusercontent.com/11647193/215848408-4c3b42d1-9863-4bf7-8908-e893558859d3.png" alt="precios copilot">
<h2>Ojo! que eso no es todo... ¡TENEMOS LOGROS!</h2>
<img src="https://user-images.githubusercontent.com/11647193/215848817-379b8a25-4af6-474e-84f9-0e782da2d112.png" alt="logros github">
El pasado 9 de Junio de 2022 Github comenzó la versión beta de los &quot;Logros&quot;. Son pequeños emblemas que vas ganando según tu actividad en la plataforma. Aqui tienes el listado de las que puedes conseguir <a href="https://github.com/Schweinepriester/github-profile-achievements">Listado de logros</a>
La verdad que estas cosas molan, porque nuestra profesión se puede convertir en un juego, en el buen sentido, pero es cierto que nos están haciendo disfrutar, aún más, de nuestro trabajo, cosa que se agradece mucho. También es cierto que la gente entró en pánico cuando Github fué adquirida por Microsoft, pero que va, parece que las cosas que van haciendo van gustando a la comunidad... Como CodeSpace, el skyline de tus contribucciones, los cursos para convertirte en un jedi de git...
En fin... quería contaros un poco el tema de Copilot y mira por donde vamos ya... Y como resumen de todo este post...
<h3>👏🏻👏🏻 Github sigue así metiendo cosillas que a los desarrolladores nos gustan... pero 👎🏻👎🏻 por no tener un plan gratuito de Copilot!</h3>

Pues Copilot de Github se vuelve de pago 🤑, se terminó la preview y ahora te "regalan" 60 días... ¡pero oye! una de cal y otra de arena... Tenemos desde hace unos días los logros activados! 

Copilot de pago... pero tenemos logros

<h1>Configurando el entorno</h1>
Para estos tutoriales usaré <a href="https://code.visualstudio.com/">Visual Studio Code</a> junto con las extensiones <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools">C++</a> y <a href="https://marketplace.visualstudio.com/items?itemName=ACharLuk.easy-cpp-projects">Easy C++ Projects</a>.
<h2>Descargando Visual Studio Code</h2>
Lo primero que necesitaremos es un editor de código o IDE, personalmente yo utilizo Visual Studio Code (o VSC para acortar) porque es ligero como Sublime, pero tiene características típicas de IDEs, en concreto Intellisense. Puedes descargar Visual Studio Code <a href="https://code.visualstudio.com/">aquí</a>, te aparecerá una página como ésta:
<img src="https://user-images.githubusercontent.com/11647193/215844417-ad31e171-5946-415d-b3a6-a9f1a7bedaa2.png" alt="image">
Haz click en el botón de descarga y espera unos segundos a que comience.
<hr>
<h2>Configurando VSC para desarrollo en C++</h2>
La primera vez que abres VSC verás una página de bienvenida. VSC tiene un diseño muy simple: una barra a la izquierda con cinco botones (Explorador de archivos, Búsqueda, Git, Depuración, Extensiones), una barra de estado en la parte de abajo y una ventana con pestañas en la cual se irán abriendo los editores. Haz click en el último boton para abrir Extensiones:
<img src="https://user-images.githubusercontent.com/11647193/215844585-5b1e9b2a-c01c-4632-abed-f21e930583a1.png" alt="image">
Para desarrollar C++ instalaremos dos extensiones, la primera es C/C++, que aparece en la imagen anterior, para instalarla simplemente haz click en el boton verde que dice <code>Install</code>:
<img src="https://user-images.githubusercontent.com/11647193/215844694-b6ee2edd-a10d-4576-be81-f4d007882afd.png" alt="image">
Después, buscaremos &quot;easy c++&quot; e instalaremos la extensión llamada &quot;Easy C++ Projects&quot;
<img src="https://user-images.githubusercontent.com/11647193/215844772-e9c28c70-1bf5-4ceb-a8cd-9e3a990a341e.png" alt="image">
<hr>
<h2>Configuración terminada</h2>
Tras instalar las extensiones, aparecerá un botón azul que dice <code>Reload</code>, al pulsarlo la ventana se recargará y activará las extensioes que acabamos de instalar:
<img src="https://user-images.githubusercontent.com/11647193/215844889-ab93dfc6-a8f3-46f2-9c4a-d259fa3f18f9.png" alt="image">
Buen trabajo! Ahora tenemos un entorno para desarrollar nuestro primer proyecto en C++!
<hr>
<h1>Comenzando nuestro primer proyecto</h1>
Después de haber configurado VSC para desarrollar C++, solo necesitamos crear un nuevo proyecto! Esto se hace en unos pocos pasos:
<h2>Creando una carpeta para el proyecto</h2>
Para crear la carpeta del proyecto, ve a File &gt; Open folder (o usa el atajo [Ctrl+K Ctrl+O]), una ventana aparecerá para seleccionar la carpeta deseada:
<img src="https://user-images.githubusercontent.com/11647193/215845192-0b4da0be-d0c1-40dc-8512-275bad8e2858.png" alt="image">
Crea una nueva carpeta y pulsa &quot;Select folder&quot;, la ventana de diálogo se cerrará y VSC se recargará para abrir la nueva carpeta que acabamos de crear.
<hr>
<h2>Creando un proyecto C++</h2>
Pulsa F1, una pequeña ventana aparecerá con distintos comandos, busca &quot;c++&quot; y haz click en &quot;Create new C++ project&quot;:
<img src="https://user-images.githubusercontent.com/11647193/215845471-a824bf8b-3447-40c8-8d90-7385fc0ebbc4.png" alt="image">
Ahora nos preguntará qué compilador queremos usar, lee la página de la extensión Easy C++ para más información sobre como configurar un compilador para tu sistema operativo. Yo usaré Windows Subsystem for Linux
<img src="https://user-images.githubusercontent.com/11647193/215845611-293671ca-07e8-43e2-a66e-1beea313e2b1.png" alt="image">
<img src="https://user-images.githubusercontent.com/11647193/215845753-25844bd7-d18b-4d45-b12b-d37228d04aa6.png" alt="image">
<hr>
<h2>Código!</h2>
Al finalizar la configuración del proyecto, VSC generará la estructura del proyecto por nosotros, y abrirá el archivo <code>main.cpp</code> con código de ejemplo:
<img src="https://user-images.githubusercontent.com/11647193/215846162-47270504-1e95-4b15-ab38-9bd3376c5f3c.png" alt="image">
Para probar que el proyecto funciona, pulsa el botton <code>Build &amp; Run</code> que hay en la barra de estado, una terminal se abrirá, compilará el proyecto y ejecutará nuestro programa por primera vez!
<img src="https://user-images.githubusercontent.com/11647193/215846223-f1159850-f25d-49e1-a430-caf93be3c754.png" alt="image">

Configurando VS Code para C++

<h2>Hola de nuevo! 👋🏻</h2>
Pues después de taaaaanto tiempo... nos encanta escribir estas lineas y es que...
<h4>¡¡JaénDevelopers vuelve!!</h4>
Vuelve con un cambio de imagen, nuevo nombre y nueva web pero con las mismas ganas o más que antes después de este periodo de inactividad.
A partir de ahora esta comunidad se denominará XauenDevs, haciendo una referencia al nombre de la ciudad en la época musulmana.
En esta nueva etapa queremos aplicar una serie de cambios, que creemos, nos ayudarán a crecer como comunidad en toda la provincia de Jaén.
<h3>¿Qué necesitamos?</h3>
Es simple, necesitamos TÚ ayuda, asistiendo a las charlas, que retomaremos en septiembre, participando en nuestro servidor de discord, cualquier cosa que se te ocurra... ¡para nosotros es de gran ayuda!
También podrás participar agregando secciones/funcionalidades a esta web, ya que tenemos el repositorio público y cualquiera puede crear una Pull Request añadiendo contenido a la web.
Nuestro blog será también abierto para cualquier persona/empresa que quiera publicar algún post, sea del tema que sea, siempre y cuando esté relacionado con la tecnología y la provincia de Jaén.

Después de tanto tiempo de inactividad por el COVID-19, queremos volver y lo queremos hacer renovando la imagen de JaénDevelopers que a partir de ahora se denominará XauenDevs.

Blog

Bot de Whatsapp con chatGPT y Javascript

CanMatch, el nuevo guard de Angular

Copilot de pago... pero tenemos logros

Configurando VS Code para C++

Nueva imagen y nueva temporada