Justificació de la Integració i de la Seguretata
Millora de la User Experience (UX) i Usabilitat
Integrar el xatbot directament com una secció o pàgina dedicada dins del portal oficial de la LAN Party Castellbisbal millora moltíssim la User Experience (UX) (l’experiència de l’usuari). En lloc d’obligar els participants a obrir aplicacions externes o buscar la informació en un llistat de text llarguíssim, poden resoldre els seus dubtes sobre horaris o normativa directament des del navegador en temps real.
Com que la interfície manté el disseny fosc del portal i té els botons clars (com el quadre de text per «Escriure una comanda…» i el botó «ENVIAR»), qualsevol usuari pot fer-lo servir sense perdre’s. Si la pantalla fos petita o els botons estiguessin amagats, la usabilitat seria dolenta i la gent es frustraria.
Seguretat de les Claus d’API com a Responsabilitat Professional
Les claus d’API de Gemini i els tokens de connexió de l’agent ngrok serveixen per identificar-nos i tenen un límit d’ús (quota).
Si haguéssim posat aquestes claus privades dins del codi JavaScript del FrontEnd (el que s’executa al navegador del client), qualsevol persona podria prémer F12 o fer clic dret a «Inspeccionar element» i copiar-les. Això seria un perill invisible molt gran, ja que podrien utilitzar la nostra clau per a altres programes, esgotar el nostre saldo o col·lapsar el bot de la LAN Party. Per això, amagar les claus al BackEnd (al servidor Python) és una decisió innegociable per protegir els recursos de l’esdeveniment.
Versió Mínima del Widget – Frontend
La interfície s’ha dissenyat perquè sigui totalment accessible i senzilla de fer servir. S’han col·locat de manera molt clara els tres elements clau de qualsevol aplicació de missatgeria:
| L’àrea de text o pantalla de missatges | El quadre d’entrada | El botó d’acció |
Ocupa la major part de la interfície d’usuari (#chat-content), amb un text inicial verd fosc (ECOTECH_OS_V2.0) que avisa l’usuari que el xatbot està llest per ajudar-lo. | Situat a la part de baix de tot, ben gran, on es llegeix «Escriu una comanda…». Està programat de manera que el text no quedi tallat. | Un botó quadrat a la cantonada inferior dreta amb el text «ENVIAR» ressaltat en color rosa fúcsia perquè es vegi a primera vista i l’usuari sàpiga on ha de clicar per enviar la seva pregunta sense bloquejos. |
Integració del Widget a la Pàgina Web
Per integrar el xatbot a la web de la LAN Party, hem creat una secció nova i dedicada dins del portal. Hem configurat el codi de la pàgina de manera que carregui directament l’estructura HTML que controla el xat:
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EcoTech 2026 - Asistent Virtual</title>
<style>
:root {
--primary: #2ecc71; /* Verd Eco */
--dark: #1a1a1a;
--light: #f4f4f4;
}
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #121212; }
/* Contenidor del Chat */
#chat-widget {
position: fixed; bottom: 20px; right: 20px;
width: 350px; height: 500px;
background: var(--dark); border: 2px solid var(--primary);
border-radius: 10px; display: flex; flex-direction: column;
box-shadow: 0 10px 25px rgba(0,0,0,0.5); overflow: hidden;
}
/* Capçalera */
#chat-header {
background: var(--primary); color: black; padding: 15px;
font-weight: bold; text-align: center; font-size: 1.1em;
}
/* Àrea de missatges */
#chat-content {
flex: 1; padding: 15px; overflow-y: auto;
display: flex; flex-direction: column; gap: 10px;
background-image: linear-gradient(rgba(46, 204, 113, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
}
.message { padding: 10px; border-radius: 8px; max-width: 80%; font-size: 0.9em; }
.user { align-self: flex-end; background: var(--primary); color: black; }
.bot { align-self: flex-start; background: #333; color: white; border: 1px solid #444; }
/* Controls */
#chat-controls { padding: 10px; display: flex; gap: 5px; background: #222; }
input { flex: 1; padding: 10px; border: none; border-radius: 5px; outline: none; }
button {
padding: 10px; border: none; border-radius: 5px; cursor: pointer;
font-weight: bold; transition: 0.3s;
}
#btn-send { background: var(--primary); color: black; }
#btn-clear { background: #e74c3c; color: white; }
button:hover { opacity: 0.8; }
</style>
</head>
<body>
<div id="chat-widget">
<div id="chat-header">🤖 EcoTech Assistant</div>
<div id="chat-content">
<div class="message bot">Hola! Soc l'assistent de la LAN EcoTech. Com et puc ajudar avui?</div>
</div>
<div id="chat-controls">
<input type="text" id="user-input" placeholder="Escriu el teu dubte...">
<button id="btn-send" onclick="sendMessage()">Enviar</button>
<button id="btn-clear" onclick="clearChat()">Netejar</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Seguretat de les Claus API
El codi JavaScript del client connecta amb la xarxa enviant les preguntes cap a l’enllaç públic generat per ngrok (que fa de pont HTTPS cap al nostre Colab), garantint que el navegador mai vegi les claus d’accés de Google AI Studio.
Al codi del fitxer de JavaScript (script.js) només es fa la crida cap a la ruta de l’API web (/chat), mentre que a la part oculta del servidor (Python) és on es criden de manera segura:
# Codi del BackEnd que manté les claus ocultes de la vista de l'usuari web
from google.colab import userdata
# Es demanen les variables al sistema de secrets
API_KEY = userdata.get("GOOGLE_API_KEY")
client = genai.Client(api_key=API_KEY)
# Configuració del token de xarxa per ngrok
ngrok.set_auth_token(userdata.get("NGROK_TOKEN"))Evidències
