Integrar el xatbot dins del portal web de la LAN Party

Tornar a “Generació d’un Xatbot”

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 és resoldre dubtes sobre horaris, reglaments i inscripcions de manera immediata i personalitzada, integrant un xatbot directament a la nostra web oficial.

1 – Arquitectura del Sistema

El projecte utilitza una arquitectura de tres capes per garantir seguretat i funcionalitat

Frontend: Interfície d’usuari desenvolupada en HTML, CSS i JavaScript, integrada a Google Sites.

Backend: Servidor Flask programat en Python i executat a Google Colab.

IA: Connexió amb l’API de Google Gemini (model gemini-1.5-flash) per al processament del llenguatge natural.

Comunicació: Ús de ngrok per crear un túnel segur que connecta la web amb el servidor local.

En les imatges seguents es poden veure:

La confirmació de la creació de la BBDD (arxiu JSON)
La llista de models disponibles d’IA
La creació de l’URL que enllaça el Front End amb el Back End a través de l’API de ngrok
La confirmació de què el servidor de Flask està encès

2 – Implementació i Seguretat

Un dels punts clau ha estat la seguretat. En lloc d’exposar les claus API directament al codi, he utilitzat el gestor de secrets de Google Colab per protegir les credencials de ngrok i Gemini.

from google.colab import userdata
import os

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

3 – Integració del Frontend a Google Sites

Per integrar el xatbot a la web oficial de la LAN Party, he utilitzat l’eina d’inserció de codi de Google Sites. Com que el xat s’ha de comunicar amb un servidor extern (el nostre backend a Colab), la implementació s’ha fet seguint aquests passos.

Dins de l’editor de Google Sites, vaig seleccionar l’opció “Incopora” (Embed) i vaig triar la pestanya “Incorpora codi”

Vaig ajustar el contenidor de l’script dins del Sites perquè el widget de 450x650px es visualitzés correctament sense tallar-se, assegurant que el botó de “Enviar” fos sempre accessible.

Assistent LAN Party 2026

Hola, soc l’assistent de la LAN Party, en què et puc ajudar?

Codi HTML

HTML Widget

4 – Errors Tècnics Solucionats

Durant el desplegament m’he enfrontat a diversos errors tècnics que he hagut de resoldre:

Gestió de Ports: Solució d’errors Address already in use mitjançant la neteja de processos orfes al servidor.
Optimització de Quota: Ajust del model a gemini-1.5-flash per evitar errors 429 (Rate Limit) i garantir la disponibilitat del servei gratuït.
UX/UI: Redisseny del widget del xat per fer-lo més accessible i visualment coherent amb la LAN Party (mides de 450x650px).

5 – Utilitat de la IA

Com m’ha ajudat la IA aquí?

En aquest projecte, la IA no ha fet la feina per mi, sinó que ha actuat com el meu tutor tècnic. M’ha ajudat a diagnosticar errors complexos de backend (com bloquejos de ports i quotes de l’API), a aplicar pràctiques de ciberseguretat per ocultar credencials, i a polir la integració de la web. Gràcies a això, he pogut comprendre la lògica de tota l’arquitectura, utilitzant la IA com l’eina perfecta per accelerar el meu aprenentatge i aconseguir un resultat professional.

Prompt utilitzat

Tinc la següent tasca tècnica per fer: "Integrar el xatbot dins del portal web de la LAN Party". No resolguis la feina per mi ni em donis el codi final tancat. En lloc d'això, dona'm una llista detallada dels passos tècnics que he de seguir, els conceptes clau que necessito entendre per a cada fase, pautes per justificar les meves decisions tècniques (com la seguretat o l'optimització), i una estructura recomanada per registrar i explicar tot aquest procés d'aprenentatge en una entrada per al meu blog de WordPress, incloent-hi com redactar l'actualització corresponent del fitxer Changelog.

6 – Resultat Final

Així és com es veu el xatbot totalment funcional i integrat a la pàgina de la LAN Party 2026, a punt per atendre els usuaris.

Actualització de l’arxiu CHANGELOG.rm

He actualitzat el fitxer Changelog del repositori per documentar les últimes millores del projecte. A la versió 1.2.0 he registrat el redisseny de la interfície del xat per fer-la més accessible, la correcció dels bloquejos de ports al servidor Flask, i l’optimització del model de Gemini per evitar errors de quota i mantenir el servei estable.

## [1.5.0] 🔌 Implementació del Xatbot

### Afegit
- Interfície de xat redimensionada (450x650px) per a una millor experiència d'usuari i llegibilitat.
- Estils CSS avançats amb ombrejats (box-shadow) i tipografia optimitzada.
- Implementació de `ngrok-skip-browser-warning` per evitar interrupcions en el túnel de dades.

### Millorat
- Estabilitat del servidor backend mitjançant l'eliminació de fils secundaris (threading) que causaven tancaments inesperats.
- Gestió de la base de dades local per a respostes més precises sobre la LAN Party.

### Corregit
- Resolució de l'error `OSError: [Errno 98]` mitjançant la neteja de ports i reinici de sessió de l'entorn.
- Mitigació d'errors de quota (429) mitjançant el canvi dinàmic entre models Gemini 1.5 i 2.0 segons disponibilitat.

Deixa un comentari Cancel·la les respostes