Interconnexió entre FrontEnd i BackEnd i implementació del Widget
Per a la realització d’aquest projecte, he configurat un entorn integrat on diverses eines col·laboren per donar vida a un xatbot intel·ligent. En ser la meva primera incursió en aquest camp, la intel·ligència artificial ha estat un suport clau per aprendre a sincronitzar la interfície de xat (Widget), el servidor central (Flask) i l’emmagatzematge de dades (JSON). El resultat és un assistent que no improvisa, sinó que basa les seves respostes en el contingut real que he obtingut del meu propi lloc web.
He prioritzat la solidesa del sistema i la qualitat de l’experiència d’usuari (UX). Amb l’ajuda de la IA, he implementat protocols de control d’errors per garantir que el xat es mantingui estable davant d’incidències a la xarxa. A més, he aplicat principis fonamentals de ciberseguretat: les claus d’accés (com les de Gemini o ngrok) es gestionen exclusivament des del BackEnd per evitar que quedin exposades al navegador i protegir-les de tercers.
Components del sistema:
- Widget (FrontEnd): És la interfície visual de xat allotjada a la web. El seu objectiu és facilitar una interacció directa i immediata, estalviant a l’usuari la navegació manual per tota la pàgina.
- Flask (BackEnd): He emprat aquest entorn de Python com a nucli operatiu. Actua com l’enllaç encarregat de rebre les consultes, processar-les i comunicar-se amb la IA de forma privada i segura.
- JSON (Base de dades local): Tota la documentació del meu web està estructurada en aquest format. Es tracta d’un arxiu molt àgil que permet a Gemini consultar el context del lloc ràpidament per oferir respostes precises.
- ngrok (El Túnel): Una peça clau en la fase de desenvolupament. Aquesta eina genera una passarel·la segura que exposa el meu servidor local a la xarxa, permetent que WordPress interactuï amb el meu equip sense necessitat d’un allotjament extern.
- Gemini API (IA): Representa la unitat de processament i lògica. L’he escollit per la seva gran capacitat de comprensió del llenguatge i perquè, en alimentar-se de les dades que li proporciono, s’ajusta perfectament al que necessito comunicar.
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.
I ara tindrem el nostre Xatbot integrat al nostre WP
