En el marc de l’organització de la LAN Party 2026, he desenvolupat un assistent virtual basat en intel·ligència artificial per millorar l’atenció als participants. L’objectiu principal és resoldre dubtes sobre horaris, reglaments i inscripcions de forma immediata i personalitzada, integrant un xatbot directament a la nostra web oficial.

1. Arquitectura del Sistema

Per garantir la seguretat, l’escalabilitat i la funcionalitat, el projecte utilitza una arquitectura de tres capes:

  • Frontend: Interfície d’usuari desenvolupada en HTML5, CSS3 i JavaScript, integrada de manera nativa en Google Sites.
  • Backend: Servidor Flask programat en Python, encarregat de gestionar les peticions i la lògica de negoci, executat en l’entorn de Google Colab.
  • IA (Cervell): Connexió mitjançant API amb Google Gemini (model gemini-1.5-flash) per al processament del llenguatge natural i generació de respostes basades en el context de la LAN.
  • Comunicació i Túnel: Ús d’ngrok per crear un túnel segur que connecta la web pública amb el servidor local del backend.

2. Implementació i Seguretat

La protecció de dades ha estat una prioritat. En lloc d’exposar les claus API directament en el codi, he utilitzat el gestor de secrets de Google Colab. Això evita filtracions accidentals en compartir el codi o pujar-lo a repositoris:

from google.colab import userdata
import os
Gestió segura de credencials des del panell de Secrets
genai.configure(api_key=userdata.get(‘GEMINI_KEY’))
ngrok.set_auth_token(userdata.get(‘NGROK_TOKEN’))

3. Integració del Frontend en Google Sites

La integració s’ha realitzat mitjançant la inserció de codi personalitzat, seguint aquests passos tècnics:

  1. Incorporació de Codi: Dins de l’editor de Google Sites, s’ha utilitzat l’opció “Incorpora” (Embed) > “Codi”.
  2. Disseny Adaptatiu: S’ha ajustat el contenidor a unes mides de 450x650px, garantint que el widget sigui accessible i visualment coherent amb la resta de la web.
  3. Connexió HTTP: El JavaScript del frontend s’ha configurat per apuntar a la URL dinàmica generada per ngrok, assegurant el pas de dades en format JSON.

3. Integració del Frontend en Google Sites

La integració s’ha realitzat mitjançant la inserció de codi personalitzat, seguint aquests passos tècnics:

  1. Incorporació de Codi: Dins de l’editor de Google Sites, s’ha utilitzat l’opció “Incorpora” (Embed) > “Codi”.
  2. Disseny Adaptatiu: S’ha ajustat el contenidor a unes mides de 450x650px, garantint que el widget sigui accessible i visualment coherent amb la resta de la web.
  3. Connexió HTTP: El JavaScript del frontend s’ha configurat per apuntar a la URL dinàmica generada per ngrok, assegurant el pas de dades en format JSON.

4. Errors Tècnics Solucionats

Durant el desplegament, he diagnosticat i corregit diversos obstacles crítics:

  • Gestió de Ports (OSError: [Errno 98]): Resolució d’errors de “Address already in use” mitjançant scripts de neteja de processos residuals (pkill) per alliberar el servidor Flask.
  • Optimització de Quota (Error 429): Ajust del model a gemini-1.5-flash per evitar els límits estrictes de la capa gratuïta i garantir la disponibilitat contínua del servei.
  • Advertència d’ngrok: Implementació de la capçalera ngrok-skip-browser-warning per evitar la pantalla d’intercepció que bloquejava la comunicació automàtica del bot.
  • UX/UI: Redisseny estètic amb ombrejats (box-shadow) i tipografia optimitzada per millorar la llegibilitat.

Gemini ha dicho

Aquí tens la redacció final del teu projecte, unificant tota la informació de les pràctiques, els errors solucionats i la integració final. Aquest document està llistat per ser copiat directament a la teva memòria o blog de WordPress.

Implementació i Integració del Xatbot Intel·ligent: LAN Party 2026

En el marc de l’organització de la LAN Party 2026, he desenvolupat un assistent virtual basat en intel·ligència artificial per millorar l’atenció als participants. L’objectiu principal és resoldre dubtes sobre horaris, reglaments i inscripcions de forma immediata i personalitzada, integrant un xatbot directament a la nostra web oficial.

1. Arquitectura del Sistema

Per garantir la seguretat, l’escalabilitat i la funcionalitat, el projecte utilitza una arquitectura de tres capes:

  • Frontend: Interfície d’usuari desenvolupada en HTML5, CSS3 i JavaScript, integrada de manera nativa en Google Sites.
  • Backend: Servidor Flask programat en Python, encarregat de gestionar les peticions i la lògica de negoci, executat en l’entorn de Google Colab.
  • IA (Cervell): Connexió mitjançant API amb Google Gemini (model gemini-1.5-flash) per al processament del llenguatge natural i generació de respostes basades en el context de la LAN.
  • Comunicació i Túnel: Ús d’ngrok per crear un túnel segur que connecta la web pública amb el servidor local del backend.

2. Implementació i Seguretat

La protecció de dades ha estat una prioritat. En lloc d’exposar les claus API directament en el codi, he utilitzat el gestor de secrets de Google Colab. Això evita filtracions accidentals en compartir el codi o pujar-lo a repositoris:

Python

from google.colab import userdata
import os

# Gestió segura de credencials des del panell de Secrets
genai.configure(api_key=userdata.get('GEMINI_KEY'))
ngrok.set_auth_token(userdata.get('NGROK_TOKEN'))

3. Integració del Frontend en Google Sites

La integració s’ha realitzat mitjançant la inserció de codi personalitzat, seguint aquests passos tècnics:

  1. Incorporació de Codi: Dins de l’editor de Google Sites, s’ha utilitzat l’opció “Incorpora” (Embed) > “Codi”.
  2. Disseny Adaptatiu: S’ha ajustat el contenidor a unes mides de 450x650px, garantint que el widget sigui accessible i visualment coherent amb la resta de la web.
  3. Connexió HTTP: El JavaScript del frontend s’ha configurat per apuntar a la URL dinàmica generada per ngrok, assegurant el pas de dades en format JSON.

4. Errors Tècnics Solucionats

Durant el desplegament, he diagnosticat i corregit diversos obstacles crítics:

  • Gestió de Ports (OSError: [Errno 98]): Resolució d’errors de “Address already in use” mitjançant scripts de neteja de processos residuals (pkill) per alliberar el servidor Flask.
  • Optimització de Quota (Error 429): Ajust del model a gemini-1.5-flash per evitar els límits estrictes de la capa gratuïta i garantir la disponibilitat contínua del servei.
  • Advertència d’ngrok: Implementació de la capçalera ngrok-skip-browser-warning per evitar la pantalla d’intercepció que bloquejava la comunicació automàtica del bot.
  • UX/UI: Redisseny estètic amb ombrejats (box-shadow) i tipografia optimitzada per millorar la llegibilitat.

5. El paper de la IA com a Tutor Tècnic

En aquest projecte, la IA no ha realitzat el treball de manera automatitzada, sinó que ha actuat com un tutor tècnic personalitzat. M’ha ajudat a:

  • Diagnosticar errors complexos de xarxa i backend.
  • Aplicar bones pràctiques de ciberseguretat.
  • Entendre la lògica de l’arquitectura Client-Servidor.

Gràcies a aquest mètode de treball basat en prompts d’aprenentatge, he pogut accelerar la meva corba d’aprenentatge en Python i integració web, aconseguint un resultat professional i funcional.

Tinc un xatbot per a una LAN Party programat amb Flask i Gemini que estic intentant integrar en un Google Site mitjançant un ‘Embed’ de HTML/JS. Actualment tinc un problema: el túnel d’ngrok em mostra una pantalla d’advertència (‘Visit Site’) que bloqueja la comunicació JSON i el xat no respon.
No em donis la solució directament; explica’m per què passa això, quines capçaleres HTTP (headers) hauria d’investigar per saltar aquesta protecció i com puc estructurar el codi JavaScript per fer que la connexió sigui asíncrona i robusta davant d’errors de quota (429). El meu objectiu és aprendre a gestionar aquestes connexions jo mateix.

6. Registre de Canvis (Changelog)