Per a aquest projecte, he dissenyat un ecosistema que connecta diverses eines per fer funcionar un xatbot intel·ligent. Com que és el meu primer contacte amb aquesta tecnologia, la IA m’ha servit de guia per entendre com lligar el xat (Widget), el servidor (Flask) i les dades (JSON). Gràcies a això, el xatbot no respon a l’atzar, sinó que fa servir la informació real que he extret de la meva pròpia web.
M’he centrat molt en que el sistema sigui “robust” (que no caigui a la mínima) i que l’experiència de l’usuari (UX) sigui bona. La IA m’ha ajudat a programar una gestió d’errors perquè, si la xarxa falla, el xat no es trenqui. També m’ha ensenyat un punt clau de ciberseguretat: les claus privades (com les de Gemini o ngrok) mai han d’estar a la vista al navegador; per això les he guardat al BackEnd, on estan protegides de qualsevol tafaner.
Widget (FrontEnd): És la finestreta de xat que veieu a la web. L’he posat així perquè l’usuari pugui preguntar coses ràpidament sense haver de fer mil clics per tota la pàgina.
Flask (BackEnd): He fet servir aquest framework de Python com a motor principal. És el pont que rep el que escriu l’usuari, ho processa i ho connecta amb la intel·ligència artificial de manera segura.
JSON (Base de dades local): Tota la info de la meva web la tinc guardada en aquest format. És un fitxer molt lleuger que permet a la IA de Gemini llegir el context de la meva web súper ràpid per donar la resposta clavada.
ngrok (El Túnel): Aquesta eina és vital. Com que estic treballant en local, ngrok crea un túnel que treu el meu servidor a Internet. Així, el WordPress pot “parlar” amb el meu ordinador sense haver de pagar un hosting car.
Gemini API (IA): És el cervell que respon. L’he triat perquè entén el llenguatge natural de meravella i, en passar-li les meves dades, respon exactament el que jo vull.
Ngrok
Flask
Integració del widget a la página web
Per integrar el Xatbot al WordPress he fet servir el plugin WPCode, aquest permet enganxar codi HTML,CSS,JS al wordpress.
Per fer-ho ens dirigim a “code snippets” i s’obrirà un desplegable, allà fem clic a “Capçalera i peu de pàgina”
Un cop fem clic a”Capçalera i peu de pàgina” baixarem a “Peu de pàgina” i allà li direm a la IA que ens generi un codi de programació HTML,CSS,JS per incrustar al nostre WP. Un cop enganxat el codi farem clic a “Save Changes” i al recargar la pàgina ja ens hauria de sortir el nou XatBot.
