Desenvolupament del Projecte i Rol de la IA
Aquest encàrrec s’ha dut a terme amb el suport actiu d’una Intel·ligència Artificial, que ha actuat com a tutora de programació. El seu guiatge ha estat clau per dissenyar l’arquitectura i sincronitzar el Widget, Flask i un fitxer JSON com un ecosistema unificat.
La IA m’ha permès estructurar el BackEnd amb èmfasi en tres pilars:
- Contextualització: El xatbot no genera respostes genèriques, sinó que es basa en les dades reals de la web extretes prèviament.
- Robustesa i UX: S’ha implementat una gestió d’errors sòlida que protegeix el sistema davant d’imprevistos de xarxa o caigudes de connexió.
- Seguretat Ètica: M’ha ajudat a comprendre que la protecció de les claus API (Gemini i ngrok) és innegociable; per aquest motiu, s’han confinat al BackEnd per evitar que siguin accessibles des del navegador.
Components de l’Ecosistema
- Widget (FrontEnd): Integrat directament a la interfície web per oferir una interacció immediata. Millora l’experiència de l’usuari (UX), ja que permet resoldre dubtes sense haver de navegar per tot el lloc.
- Flask (BackEnd): Aquest microframework de Python actua com el nucli del sistema. Gestiona les peticions de l’usuari de manera segura i fa de pont robust amb la IA.
- JSON (Base de Dades Local): Un format lleuger i òptim per emmagatzemar la informació web ja extreta, garantint que Gemini tingui un context personalitzat i ràpid per respondre.
- ngrok (Túnel de Connexió): Eina essencial per exposar el servidor local de Flask a Internet. Gràcies a això, el WordPress es comunica amb el BackEnd sense dependre d’un allotjament web de pagament.
- Gemini API (Intel·ligència Artificial): El motor d’anàlisi de llenguatge natural, triat per la seva capacitat de generar respostes intel·ligents, coherents i acotades estrictament a les meves dades.
1. Arquitectura i Flux de Dades (Client-Servidor)
Muntar aquesta arquitectura des de zero ha estat un repte complex, especialment a l’hora de depurar els errors de connexió durant les proves. El flux de la informació segueix un camí clar de tres fases:
El Punt de Partida: FrontEnd
Quan l’usuari escriu al xat, un codi en JavaScript agafa el text, l’empaqueta en format JSON i l’envia cap al servidor mitjançant una petició asíncrona (fetch de tipus POST).
El Canal Segur: ngrok
Com que el codi Python s’executa en un entorn privat de Google Colab, el WordPress no el pot detectar de manera directa. Per solucionar-ho, ngrok genera un túnel segur i proporciona una URL pública temporal que serveix d’autopista per al missatge.
El Processament: BackEnd amb Flask
A l’altre extrem del túnel, el servidor Flask rep el paquet JSON, n’extreu la consulta, la processa conjuntament amb la base de dades local i la API de Gemini, i finalment retorna la resposta estructurada de tornada cap al WordPress.
HTML
Després he afegit la extensió WPCode per afegir el codi HTML que m’ha donat la IA per a dissenyar l’apartat estètic i el pont amb el Ngrok
