Programació de les funcionalitats bàsiques en el BackEnd i FrontEnd

Arquitectura de l’Aplicació (Full Stack)

A. El Frontend (Interfície d’Usuari)

S’ha programat una interfície web utilitzant estàndards moderns per ser incrustada mitjançant un iframe a Google Sites.

HTML5: Defineix l’estructura del xat (contenidor de missatges, caixa d’entrada i botons).
CSS3: Aplica un estil Dark Mode d’estètica gaming, utilitzant variables (:root) per facilitar el manteniment dels colors corporatius.
JavaScript (Client-side): Gestiona els esdeveniments del teclat (com l’ús de la tecla Enter) i la manipulació del DOM per mostrar els missatges en temps real.

B. El Middleware (Google Apps Script)

Actua com a servidor proxy. És la peça que connecta la web amb la intel·ligència artificial.

Seguretat: El script emmagatzema l’API Key de forma segura al costat del servidor, evitant que qualsevol usuari pugui veure-la des de la consola del navegador.
Endpoint HTTP: Utilitza la funció doPost(e) per rebre dades JSON des del frontend i reenviar-les a l’API oficial de Google Gemini.

C. El Backend i Entorn de Desenvolupament (Python/Colab)

S’ha utilitzat Google Colab per al prototipat i el testeig del model.

Model: gemini-2.0-flash, optimitzat per a respostes ràpides.
Paràmetres de control: S’ha configurat una temperature de 0.3 per garantir que les respostes siguin precises i poc «creatives» (evitant al·lucinacions de la IA).

Guia d’Instal·lació i Implementació (Pas a Pas)

Pas 1: Configuració de l’entorn IA

Dins de Google Colab, s’instal·la la llibreria google-generativeai. És crucial utilitzar userdata.get per gestionar les credencials de forma cibersegura.

Pas 2: Creació del servei de missatgeria

Es desplega el codi a Google Apps Script. Aquest script rep el missatge de l’usuari, li adjunta una «System Instruction» (que defineix el rol del bot com a tècnic de la LAN) i fa la crida a l’URL de l’API de Gemini.

Pas 3: Integració al Google Sites

S’utilitza l’eina «Insereix codi» de Google Sites.

Es copia el codi HTML/CSS/JS.
Es vincula la constant SCRIPT_URL amb l’adreça de l’Apps Script desplegat anteriorment.
S’ajusten les mides del bloc per a una visualització correcta en l’escriptori i mòbils.

Conceptes Clau SMX aplicats

API (Application Programming Interface): Interfície que permet que el nostre codi parli amb els servidors de Google.
JSON: Format d’intercanvi de dades lleuger utilitzat entre el front i el back.
Ciberseguretat: Ús de claus privades i ocultació de credencials en el codi font públic.
DOM (Document Object Model): Estructura que permet a JavaScript canviar el text de la pantalla sense recarregar la pàgina.

Resum Justificatiu: Arquitectura Full Stack

Aquest projecte s’ha dissenyat com un ecosistema interactiu on cada part (Widget, Middleware i Backend) és vital per al funcionament de l’assistent de la LAN Party.

El BackEnd com a «Cervell»: Centralitza la intel·ligència de l’aplicació i protegeix la lògica i les dades de la LAN Party. Utilitza l’intercanvi de dades en format JSON per connectar-se amb el front.
Robustesa i Experiència d’Usuari (UX): Es garanteix una bona UX gràcies a un codi robust. La configuració de la temperatura a 0.3 evita «al·lucinacions» de la IA, assegurant respostes tècniques precises, mentre que la manipulació del DOM per JavaScript permet respostes en temps real sense recarregar la pàgina.
Ciberseguretat: Com a prioritat de SMX, l’arquitectura protegeix les credencials crítiques. L’API Key s’oculta al costat del servidor, evitant que qualsevol usuari pugui veure-la des de la consola del navegador.