He dissenyat un ecosistema integrat per al desplegament d’un assistent virtual intel·ligent. En ser la meva primera aproximació a aquestes tecnologies, he utilitzat la IA com a eina de suport per comprendre la interconnexió entre el FrontEnd (interfície), el BackEnd (lògica de servidor) i l’estructura de dades.
El sistema s’ha construït sota dos pilars fonamentals:
Robustesa: Implementació de gestió d'excepcions per garantir que el servei no s'interrompi davant fallades de xarxa.
Seguretat per disseny: Seguint les bones pràctiques de ciberseguretat, les credencials sensibles (API Keys de Gemini i Ngrok) s'emmagatzemen exclusivament al BackEnd, protegint-les d'exposicions no desitjades al costat del client.1. Widget (FrontEnd)
És la interfície d’interacció directa amb l’usuari. S’ha dissenyat per oferir una accessibilitat immediata, permetent realitzar consultes des de qualsevol punt del web i optimitzant així el flux de navegació (UX).
2. Flask (BackEnd)
Aquest micro-framework de Python actua com el nucli operatiu del projecte. Gestiona les peticions HTTP, processa la lògica de negoci i estableix una comunicació segura amb l’API de generació de text.
3. JSON (Estructura de Dades)
He utilitzat aquest format per emmagatzemar el coneixement extret del lloc web. En ser un fitxer lleuger i estructurat, permet a la IA de Gemini processar el context del domini amb una latència mínima, garantint respostes precises i alineades amb el contingut real.
4. Ngrok (Tunelització HTTP)
Eina crítica per a l’exposició del servidor local. Crea un túnel segur cap a Internet, permetent que el lloc de WordPress es comuniqui amb el meu entorn de desenvolupament sense necessitat d’una infraestructura de hosting externa ni configuracions de xarxa complexes.
5. Gemini API (Motor d’IA)
Constitueix la unitat de processament lingüístic. S’ha triat per la seva capacitat avançada de comprensió del llenguatge natural i la seva facilitat per integrar dades externes (context injection), assegurant que les respostes siguin coherents i personalitzades.
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.
