Fase Final · XatBot TalentFP · Desplegament i Arquitectura
Implementació Final del
Sistema de XatBot
Documentació del desplegament complet de la solució de xatbot distribuïda: de prototip local a una solució web plenament operativa integrada mitjançant microfrontends.
Desplegament i objectiu de l’arquitectura
Arquitectura distribuïda en tres capes
En aquesta fase final he implementat el desplegament complet d’un sistema de xatbot basat en arquitectura distribuïda, convertint un prototip local en una solució web operativa i accessible públicament. L’objectiu principal ha estat la construcció d’un flux de dades robust, modular i segur, on cadascuna de les tres capes independents compleix una funció específica: la capa de presentació (FrontEnd en WordPress), la capa de processament (BackEnd en Flask) i la capa d’intel·ligència (API externa Gemini).
Arquitectura de comunicació i flux de dades
Comunicació asíncrona HTTP REST
El flux de dades segueix un patró client-servidor. Quan l’usuari interactua amb el widget, el FrontEnd genera una petició POST mitjançant fetch() amb càrrega JSON que és enviada a un endpoint Flask exposat amb un túnel segur. Com que Google Colab no té exposició pública nativa, s’ha implementat Ngrok com a reverse proxy tunneling service per simular el desplegament cloud.
Seguretat, ètica professional i protecció de credencials
Principi de Zero Exposure Architecture
Un dels pilars fonamentals és la seguretat. S’ha aplicat un disseny on el FrontEnd no conté cap informació sensible i les claus de l’API mai s’envien al navegador. Totes les credencials es gestionen al BackEnd mitjançant el sistema de Secrets Manager de Google Colab. Per garantir la integritat i evitar bloquejos del túnel, s’ha incorporat control de CORS i capçaleres específiques.
Integració del sistema en WordPress (FrontEnd Engineering)
Microfrontend embegut i modular
El giny s’ha integrat dins de WordPress com un component modular independent mitjançant l’ús de WPCode, evitant dependències destructives del tema, problemes d’actualització del CMS o inestabilitats estructurals. El disseny de la interfície d’usuari es fonamenta en un Floating Action Button (FAB), una finestra de xat modal adaptativa i renderitzat basat en estats.
Evidències d’integració i funcionament real
Optimització del FrontEnd i experiència d’usuari
Parser de format Markdown
Conversió a HTML per tal de normalitzar visualment els codis i respostes enriquides de text que lliura el model.
Indicador de Typing State
Simula de forma controlada la latència cognitiva humana mentre s’espera la resolució de la trucada asíncrona.
Gestió d’estats asíncrons
Evita el bloqueig complet de la interfície gràfica principal de la pàgina web de WordPress (UI thread).
Robustesa del sistema i tolerància a errors
El sistema incorpora un control robust de fallades de comunicació mitjançant timeouts controlats en les peticions HTTP, capturadors clars d’errors no tècnics apte per a usuaris finals i recuperació ràpida de la sessió sense necessitat de recarregar la pàgina de manera forçosa. Això constitueix una capa de tolerància a errades (fault-tolerance layer) ideal per a sistemes distribuïts.
Resultat final i valor tècnic del projecte
El resultat és una arquitectura web totalment integrada que demostra habilitats avançades en enginyeria de programari i sistemes. S’ha aconseguit enllaçar amb èxit un FrontEnd modular basat en WordPress, un BackEnd programat en Flask exposat mitjançant túnels temporals segurs, i l’ús intel·ligent del model de llenguatge a través de l’API de Gemini.
Més enllà del funcionament lògic, el projecte aporta un gran valor professional gràcies al compliment estricte de principis clau: separació d’entorns de treball (desacoblament), ciberseguretat en l’ocultació de credencials i mètodes d’optimització de la interfície orientats a la interacció humà-ordinador (HCI).