Aquest encàrrec s’ha realitzat amb l’ajuda de la IA, que ha facilitat el disseny del Widget, Flask i un fitxer JSON, funcionant com un ecosistema vital. La IA ha estat important per organitzar el BackEnd, permetent que el xatbot respongui amb dades reals del lloc web.

S’ha posat un èmfasi en la robustesa i la UX, utilitzant la IA per gestionar errors i protegir les claus API al BackEnd. El Widget és un xatbot integrat que permet interaccions immediates, millorant l’experiència de l’usuari.

Flask s’utilitza com a nucli segur per gestionar peticions, mentre que JSON emmagatzema la informació per a respostes ràpides. Ngrok exposa el servidor local a Internet, i l’API Gemini proporciona respostes basades en dades personalitzades.

1 – Arquitectura i flux de dades entre FrontEnd i BackEnd

Aquest encàrrec s’ha realitzat amb la IA, que ha ajudat a dissenyar el Widget, Flask i un fitxer JSON. La IA organitza el BackEnd permetent al xatbot respondre amb dades reals. El Widget millora la UX amb interaccions immediates, mentre que Flask gestiona peticions i JSON emmagatzema informació. Ngrok exposa el servidor a Internet i l’API Gemini proporciona respostes personalitzades.

2 – Integració del Widget a la pàgina web

He basat l’estructura principal del xatbot en el codi del xatbot de la Lan Party. He modificat el disseny amb CSS per adaptar-lo als colors del meu portafolis. També he millorat la llegibilitat, utilitzant un text d’exemple negreper fer contrast amb el fons groc.

Per integrar el codi al meu WordPress, he utilitzat el plugin WPCode, que permet afegir JavaScript i CSS sense danyar els fitxers originals. El xatbot s’adapta bé a diferents pantalles. He assignat noms únics a les regles del CSS per evitar conflictes.

Els passos per implementar el codi són: instal·lar i activar el plugin, anar a «Capçalera i peu de pàgina», i enganxar el codi a «Peu de pàgina».

Així és com quedaria implementat el codi al meu WordPress.

3 – Seguretat de les claus API

He hagut d’amagar les claus API de Google i Ngrok als secrets de Google Colab per evitar que siguin visibles. He d’entrar al meu arxiu del Xatbot, afegir-les a «Secretes» i anomenar-les de forma específica.

Aquests són els noms que he utilitzat

• Google = apikeygoogle
• Ngrok = ngrok