Aquest encàrrec l’he pogut realitzar amb ajuda de la IA, que m’ha guiat per dissenyar el Widget, Flask i un fitxer JSON els quals funcionen com un ecosistema vital. La IA ha estat clau per ajudar-me a estructurar el BackEnd de manera que el xatbot no només respongui, sinó que ho faci basant-se en les dades reals del meu lloc web extretes prèviament.
Hem posat un focus especial en la robustesa i la UX, utilitzant la IA per implementar una gestió d’errors sòlida que evita que el sistema falli davant imprevistos de xarxa.
A més, m’ha ajudat a entendre que la seguretat de les claus API (Gemini i ngrok) és una responsabilitat ètica innegociable; per això, s’han confinat al BackEnd per protegir-les de qualsevol accés extern des del navegador.
Widget (FrontEnd): He escollit un xatbot integrat directament a la web per oferir una interacció immediata i fluida, millorant la UX al permetre que l’usuari consulti informació sense navegar per tot el lloc.
Flask (BackEnd): Utilitzo aquest framework de Python com a nucli segur per gestionar les peticions de l’usuari, actuant com un pont robust que connecta la interfície amb la intel·ligència artificial.
JSON (BBDD Local): He optat per aquest format per emmagatzemar la informació extreta de la meva web, ja que és lleuger i permet que la IA de Gemini tingui un context personalitzat i ràpid per respondre.
ngrok (Túnel): Aquesta eina és vital per exposar el meu servidor local de Flask a Internet, permetent que el WordPress (FrontEnd) es pugui comunicar amb el BackEnd sense necessitat d’un servidor de pagament.
Gemini API (IA): He integrat aquesta IA per la seva gran capacitat de processament de llenguatge natural, garantint respostes intel·ligents i coherents basades exclusivament en les meves dades.
1 – Arquitectura i flux de dades entre FrontEnd i BackEnd
Muntar una arquitectura completa client-servidor des de zero ha estat un repte complex. Per aconseguir-ho i entendre bé cada peça, he utilitzat la IA (Gemini) com a tutor de programació. M’ha ajudat a estructurar el codi, a entendre com es comuniquen dues plataformes diferents a través d’internet i, sobretot, a depurar els errors de connexió que anaven sortint durant les proves.
L’inici (FrontEnd): Quan un usuari escriu un missatge, el codi JavaScript empaqueta aquest text en un format estàndard anomenat JSON i l’envia fent una petició asíncrona (fetch tipus POST).
El Pont (Ngrok): Com que el codi Python s’està executant en un servidor privat a Google Colab, el WordPress no el pot veure directament. Per solucionar-ho, he integrat Ngrok, una eina que crea un «túnel» segur i em dona un URL pública temporal. El missatge viatja per aquest túnel.
La Recepció i Resposta (BackEnd amb Flask): A l’altra banda del túnel, un servidor creat amb la llibreria Flask està escoltant. Rep el JSON, n’extreu la pregunta, la processa i retorna la resposta empaquetada de nou cap al WordPress.
FLASK
NGROK
Per saber com fer aquest apartat detalladament he demanat ajuda a la IA
Com m’ha ajudat la IA?
Per desenvolupar el BackEnd, he utilitzat la IA com a guia pas a pas per entendre i dissenyar l’arquitectura client-servidor. En lloc de demanar el codi directament, vaig sol·licitar unes pautes estructurades per connectar el WordPress amb Google Colab mitjançant un servidor Flask. Això em va permetre entendre cada concepte (com la necessitat d’utilitzar CORS o com obrir túnels amb Ngrok) i assegurar-me que complia amb els requisits d’estabilitat i gestió d’errors exigits al projecte.
2 – Integració del Widget a la pàgina web
Per fer l’estructura principal del xatbot, m’he basat en el codi (HTML, CSS i JavaScript) del xatbot de la Lan Party, ja que sabia que funcionava bé. A partir d’aquí, he canviat tot el disseny amb CSS per adaptar-lo als colors corporatius del meu portafolis (com el color blau de la capsa on s’escriu). També m’he assegurat que fos fàcil de llegir; per exemple, he fet que el text d’exemple (placeholder) sigui d’un blanc pur perquè contrasti bé amb el fons blau.
Per ficar tot aquest codi dins del meu WordPress sense complicacions, he fet servir un plugin que es diu WPCode. Això em permet posar el meu JavaScript i el CSS directament al lloc web sense haver de tocar o espatllar els fitxers originals del tema. Així és més segur i no perdo el xatbot si actualitzo la pàgina.
El xatbot s’adapta bé a la pantalla: a l’ordinador es veu a la cantonada sense molestar, i al mòbil s’ajusta perquè, quan vas a escriure, el teclat no et tapi els missatges. A més, perquè els colors i botons del meu portafolis no es barregin amb els del xatbot, he posat noms únics a les regles del CSS, així cada cosa va per la seva banda i no hi ha problemes.
Aquests són els passos que he seguit per implementar el codi al meu WordPress.
Una vegada instal·lat i activat hem d’anar al menú de l’extensió i entrar a l’apartat “Capçalera i peu de pàgina”.
Dintre de la pàgina, anirem a l’apartat “Peu de pàgina” on enganxarem el codi
Així és com quedaria implementat el codi al meu WordPress.
Com m’ha ajudat aqui la IA.
En aquesta part, he fet servir la IA per resoldre problemes concrets de disseny que em tenien encallat. Per exemple, quan estava posant els meus colors al bot de la Lan Party, no aconseguia que el text de suggeriment destaqués. Jo li posava color blanc, però es continuava veient gris. La IA em va explicar que els navegadors fan que aquest text sigui mig transparent per defecte, i em va donar el codi exacte. Tambe amb ajuda de algun company vaig poder resoldrel correctament.
3 – Seguretat de les claus API
Com a mesura de seguretat he hagut d’amagar les claus API tant de Google com de Ngrok als secrets de Google Colab per tal que no fossin visibles al codi. Per això ha hagut d’entrar al meu arxiu on tinc el codi del Xatbot, anar a l’apartat de «Secretes» que està en forma de clau, i allà dintre afegir-ne les dues. Les he hagut d’anomenar amb un nom en específic, ja que serà el nom que he utilitzat per anomenar-les dins del codi.
Aquests són els noms que he utilitzat
- Google = GEMINI_API_KEY
- Ngrok = NGROK_TOKEN
Com m’ha ajudat la IA
La IA em va avisar que deixar les claus al codi era perillós si volia fer captures de pantalla pel meu portafolis. Em va guiar per trobar l’apartat de «Secrets» de Colab i em va ensenyar com cridar aquestes variables amagades des del codi.
PROMPT
Tinc les meves claus de l’API de Gemini i el token d’ngrok posades directament al meu codi de Python a Google Colab. Com ho puc fer per amagar-les als ‘Secrets’ de Colab.