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:
app = Flask(__name__)
CORS(app)!pkill ngrok
time.sleep(2)
public_url = ngrok.connect(5000).public_url
print(f"\n🌍 URL PER AL TEU JAVASCRIPT:\n{public_url}/ask\n")
app.run(port=5000)Per saber com fer aquest apartat detalladament he demanat ajuda a la IA.
2 – Integració del Widget a la pàgina web
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.
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:
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 = Api_gemini
- Ngrok = Token
