Aquest encàrrec l’he pogut realitzar amb ajuda de la IA, que m’ha guiat per dissenyar el Widget, Flask i un fitxer JSON els quals funcionen com un ecosistema vital. La IA ha estat clau per ajudar-me a estructurar el BackEnd de manera que el xatbot no només respongui, sinó que ho faci basant-se en les dades reals del meu lloc web extretes prèviament.
Hem posat un focus especial en la robustesa i la UX, utilitzant la IA per implementar una gestió d’errors sòlida que evita que el sistema falli davant imprevistos de xarxa. A més, m’ha ajudat a entendre que la seguretat de les claus API (Gemini i ngrok) és una responsabilitat ètica innegociable; per això, s’han confinat al BackEnd per protegir-les de qualsevol accés extern des del navegador.
Widget (FrontEnd): He escollit un xatbot integrat directament a la web per oferir una interacció immediata i fluida, millorant la UX al permetre que l’usuari consulti informació sense navegar per tot el lloc.
Flask (BackEnd): Utilitzo aquest framework de Python com a nucli segur per gestionar les peticions de l’usuari, actuant com un pont robust que connecta la interfície amb la intel·ligència artificial.
JSON (BBDD Local): He optat per aquest format per emmagatzemar la informació extreta de la meva web, ja que és lleuger i permet que la IA de Gemini tingui un context personalitzat i ràpid per respondre.
ngrok (Túnel): Aquesta eina és vital per exposar el meu servidor local de Flask a Internet, permetent que el WordPress (FrontEnd) es pugui comunicar amb el BackEnd sense necessitat d’un servidor de pagament.
Gemini API (IA): He integrat aquesta IA per la seva gran capacitat de processament de llenguatge natural, garantint respostes intel·ligents i coherents basades exclusivament en les meves dades.
1 – Arquitectura i flux de dades entre FrontEnd i BackEnd
Muntar una arquitectura completa client-servidor des de zero ha estat un repte complex. Per aconseguir-ho i entendre bé cada peça, he utilitzat la IA (Gemini) com a tutor de programació. M’ha ajudat a estructurar el codi, a entendre com es comuniquen dues plataformes diferents a través d’internet i, sobretot, a depurar els errors de connexió que anaven sortint durant les proves.
L’inici (FrontEnd): Quan un usuari escriu un missatge, el codi JavaScript empaqueta aquest text en un format estàndard anomenat JSON i l’envia fent una petició asíncrona (fetch tipus POST).
El Pont (Ngrok): Com que el codi Python s’està executant en un servidor privat a Google Colab, el WordPress no el pot veure directament. Per solucionar-ho, he integrat Ngrok, una eina que crea un “túnel” segur i em dona un URL pública temporal. El missatge viatja per aquest túnel.
La Recepció i Resposta (BackEnd amb Flask): A l’altra banda del túnel, un servidor creat amb la llibreria Flask està escoltant. Rep el JSON, n’extreu la pregunta, la processa i retorna la resposta empaquetada de nou cap al WordPress.
Flask
app = Flask(__name__)
CORS(app)
Ngrok
!pkill ngrok
time.sleep(2)
public_url = ngrok.connect(5000).public_url
print(f"\n🌍 URL PER AL TEU JAVASCRIPT:\n{public_url}/ask\n")
app.run(port=5000)
Per saber com fer aquest apartat detalladament he demanat ajuda a la IA
Com m’ha ajudat la IA?
Per desenvolupar el BackEnd, he utilitzat la IA com a guia pas a pas per entendre i dissenyar l’arquitectura client-servidor. En lloc de demanar el codi directament, vaig sol·licitar unes pautes estructurades per connectar el WordPress amb Google Colab mitjançant un servidor Flask. Això em va permetre entendre cada concepte (com la necessitat d’utilitzar CORS o com obrir túnels amb Ngrok) i assegurar-me que complia amb els requisits d’estabilitat i gestió d’errors exigits al projecte.
Prompt utilitzat
He de completar aquesta tasca per a un projecte educatiu: '1. Arquitectura i flux de dades entre FrontEnd i BackEnd. Connexió robusta i estable. Gestiona correctament els errors de xarxa. L'endpoint de Flask rep dades i les retorna al widget, mitjançant el túnel d'ngrok, sense incidències'. M'has de fer unes pautes a seguir de com fer-ho pas a pas per entendre-ho i aconseguir un resultat de nivell PRO.
2 – Integració del Widget a la pàgina web
Per fer l’estructura principal del xatbot, m’he basat en el codi (HTML, CSS i JavaScript) del xatbot de la Lan Party, ja que sabia que funcionava bé. A partir d’aquí, he canviat tot el disseny amb CSS per adaptar-lo als colors corporatius del meu portafolis (com el color blau de la capsa on s’escriu). També m’he assegurat que fos fàcil de llegir; per exemple, he fet que el text d’exemple (placeholder) sigui d’un blanc pur perquè contrasti bé amb el fons blau.
Per ficar tot aquest codi dins del meu WordPress sense complicacions, he fet servir un plugin que es diu WPCode. Això em permet posar el meu JavaScript i el CSS directament al lloc web sense haver de tocar o espatllar els fitxers originals del tema. Així és més segur i no perdo el xatbot si actualitzo la pàgina.
El xatbot s’adapta bé a la pantalla: a l’ordinador es veu a la cantonada sense molestar, i al mòbil s’ajusta perquè, quan vas a escriure, el teclat no et tapi els missatges. A més, perquè els colors i botons del meu portafolis no es barregin amb els del xatbot, he posat noms únics a les regles del CSS (com #pau-chat-input), així cada cosa va per la seva banda i no hi ha problemes.
Aquests són els passos que he seguit per implementar el codi al meu WordPress.
Una vegada instal·lat i activat hem d’anar al menú de l’extensió i entrar a l’apartat “Capçalera i peu de pàgina”.
Dintre de la pàgina, anirem a l’apartat “Peu de pàgina” on enganxarem el codi
Així és com quedaria implementat el codi al meu WordPress.
Com m’ha ajudat la IA?
En aquesta part, he fet servir la IA per resoldre problemes concrets de disseny que em tenien encallat. Per exemple, quan estava posant els meus colors al bot de la Lan Party, no aconseguia que el text de suggeriment destaqués. Jo li posava color blanc, però es continuava veient gris. La IA em va explicar que els navegadors fan que aquest text sigui mig transparent per defecte, i em va donar el codi exacte (::placeholder i opacity: 1) per forçar que es veiés blanc i destaqués sobre el blau.
Prompt utilitzat
En aquesta part, he fet servir la IA per entendre quina era la millor manera de posar tot el codi dins del meu WordPress sense espatllar res. Em va recomanar l'ús del plugin WPCode i em va guiar pas a pas sobre on havia d'enganxar cada part del codi i com encapsular el CSS perquè s'adaptés bé als mòbils.3 – Seguretat de les claus API
Com a mesura de seguretat he hagut d’amagar les claus API tant de Google com de Ngrok als secrets de Google Colab per tal que no fossin visibles al codi. Per això ha hagut d’entrar al meu arxiu on tinc el codi del Xatbot, anar a l’apartat de “Secretes” que està en forma de clau, i allà dintre afegir-ne les dues. Les he hagut d’anomenar amb un nom en específic, ja que serà el nom que he utilitzat per anomenar-les dins del codi.
Aquests són els noms que he utilitzat
- Google = GOOGLE_API_KEY
- Ngrok = token_ngrok
Com m’ha ajudat la IA?
La IA em va avisar que deixar les claus al codi era perillós si volia fer captures de pantalla pel meu portafolis. Em va guiar per trobar l’apartat de “Secrets” de Colab i em va ensenyar com cridar aquestes variables amagades des del codi.
Prompt utilitzat
Tinc les meves claus de l'API de Gemini i el token d'ngrok posades directament al meu codi de Python a Google Colab com a text. Com ho puc fer per amagar-les als 'Secrets' de Colab perquè no es vegin al codi si faig captures?
Deixa un comentari