XatBot amb Vivecoding – XatBot Talent 2026 · Tarik Aberdane

CFGM · Sistemes Microinformàtics i Xarxes

Implementació d'un XatBot amb eines de Vivecoding

Prompt Engineering avançat · XatBot Talent 2026

Tarik Aberdane · Institut Castellbisbal · Curs 2024–2026

🧠 Justificació: Vivecoding vs. programació tradicional

El vivecoding —programar amb ajuda d'IA en temps real— no és simplement "demanar codi a la IA". És un procés creatiu on el programador dirigeix, supervisa i refina. He triat aquest enfocament per raons tècniques concretes:

Eficiència real: Amb programació tradicional, implementar el sistema complet (Flask + ngrok + widget + validació + estats + reinici) hauria trigat dies. Amb vivecoding i prompts encadenats, he iterat la solució en hores mantenint el control total del codi.
Prompt Engineering com a habilitat tècnica: Saber formular un prompt precís és tan valuós com saber programar. He après a especificar constraints (seguretat, arquitectura, compatibilitat WordPress) en els prompts per obtenir codi directament utilitzable.
Control i supervisió: He llegit i entès cada línia generada. Quan la IA proposava solucions insegures (API Key al JS) o ineficients (polling en comptes de websocket), les he rebutjat i reformulat el prompt.
Arquitectura supervisada: La decisió Flask + ngrok (en comptes de serverless o Firebase) la vaig prendre jo, no la IA. El vivecoding em va permetre implementar-la ràpidament un cop decidida.

❌ Programació tradicional

Aprendre Flask des de zero: 3-4 hores
Debugar errors de CORS: 1-2 hores
Implementar el widget: 2-3 hores
Integrar Gemini API: 2 hores
Total estimat: 8-11 hores

✅ Vivecoding amb IA

Arquitectura dissenyada: 20 min
Flask + ngrok operatiu: 45 min
Widget complet: 30 min
Iteració i millores: 1 hora
Total real: ~2,5 hores

🔗

1. Prompt Engineering i Iteració Prompts encadenats

Domini avançat del llenguatge natural per guiar la IA en múltiples iteracions

He usat prompts encadenats i refinats: cada prompt partia del resultat anterior i afinava un aspecte concret. No he acceptat mai el primer resultat sense revisar-lo críticament.

Arquitectura inicial

💬 Prompt: "Necessito un servidor Flask a Google Colab que exposi un endpoint POST /ask, llegeixi l'API Key de Gemini dels Secrets de Colab (no del codi), i retorni la resposta en JSON. Ha d'incloure CORS per poder cridar-lo des d'un WordPress extern."

✅ Resultat: Servidor Flask bàsic funcional amb CORS i gestió de secrets

Detecció d'un problema de seguretat

💬 Prompt de correcció: "El codi que has generat fa: api_key = 'AIza...' directament al fitxer. Això és un risc de seguretat perquè el repositori és públic. Refactoritza perquè llegeixi la clau des de userdata.get('GOOGLE_API_KEY') i afegeix un try/except que aturi l'execució si la clau no existeix."

✅ Resultat: Secrets de Colab integrats correctament amb validació

Afegir memòria de conversa

💬 Prompt: "El xatbot ara no recorda el que hem parlat. Modifica el backend per acceptar un camp 'history' al JSON de la petició (array de {role, content}), i usa model.start_chat(history=...) per mantenir el context. Al frontend, acumula els missatges en un array conversationHistory i envia'l a cada petició."

✅ Resultat: XatBot amb memòria de conversa persistent per sessió

Millora del disseny UI

💬 Prompt: "El widget es veu massa bàsic. Vull: 1) Un header amb degradat lila i un punt verd que indiqui 'connectat'. 2) Bombolles de xat amb ombra i border-radius asimètric (cua a la dreta per usuari, cua a l'esquerra per bot). 3) Animació de punt parpellant mentre espera resposta. 4) Que el botó d'enviament es desactivi mentre processa. Usa variables CSS per facilitar canvis de color."

✅ Resultat: Interfície professional amb animacions i variables CSS

Refinament final i integració WordPress

💬 Prompt: "Ara he d'integrar el widget a WordPress sense modificar el tema. Tot el CSS ha de tenir el prefix 'tariks-' per evitar conflictes. Afegeix un botó de reinici que cridi POST /reset al backend i buidi l'array conversationHistory. El widget ha de ser responsive: 360px flotant a escriptori i pantalla completa a mòbil (max-width: 768px)."

✅ Resultat: Widget llest per WPCode, responsive i amb reinici funcional

// ── EXEMPLE D'ITERACIÓ: Detecció d'error i correcció ──

// VERSIÓ 1 (generada per IA, INSEGURA — rebutjada):
const API_KEY = "AIzaSyD...";  // ❌ CLAU VISIBLE AL JS → REBUTJAT
const response = await fetch(`https://generativelanguage.googleapis.com/...?key=${API_KEY}`);

// PROMPT DE CORRECCIÓ que vaig enviar a la IA:
// "Aquesta implementació exposa la clau API al codi JavaScript visible
//  al navegador. Refactoritza per usar un backend intermediari (Flask)
//  que tingui la clau amagada al servidor. El JS només ha de cridar
//  el nostre endpoint /ask, mai l'API de Google directament."

// VERSIÓ 2 (corregida — acceptada):
const API_URL = "https://TU_URL_NGROK.ngrok.io/ask"; // ✅ Backend intermediari
const response = await fetch(API_URL, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({ message, history: conversationHistory })
});
// La clau de Gemini mai surt del servidor Flask ✅

🎨

2. Qualitat de la interfície (UI/UX) Professional + Modern

Disseny que supera la versió estàndard: animacions, historial visual, responsive

He dissenyat una interfície que supera el widget estàndard en tots els aspectes, iterant el disseny amb prompts de refinament específics per a cada element visual.

✨ Animació de càrrega

Tres punts parpellejants mentre el backend processa. L'usuari sap exactament que el sistema està treballant.

💬 Historial visual

Bombolles diferenciades per color i posició. Scroll automàtic al missatge més recent. Timestamp visible.

🎨 Colors coherents

Degradat lila corporatiu coherent amb el portafolis. Variables CSS per fàcil manteniment.

📱 Responsive

Flotant 360px a escriptori, pantalla completa a mòbil. Testejat a Chrome, Firefox i Safari mòbil.

🔄 Botó reinici

Visible al header. Un clic neteja pantalla i backend. Confirmació visual immediata.

🟢 Indicador connexió

Punt verd al header indica que el servidor Flask està actiu. Canvia a vermell si hi ha error.

🤖 LANBot

Hola! Soc el LANBot del portafolis de Tarik. Pregunta'm sobre els reptes, apunts o el XatBot! 🚀

🎮 Demo del widget (simulació)

✅ Animació "Pensant..." mentre processa
✅ Bombolles diferenciades usuari/bot
✅ Tecla Enter per enviar
✅ Botó desactivat durant petició
✅ Scroll automàtic al nou missatge
✅ Reinici de conversa amb 1 clic
✅ Indicador de connexió activa (punt verd)
✅ Barra d'estat en temps real

Prova la demo escrivint un missatge. Al portafolis real, respon amb IA de Gemini.

/* ── CSS DE L'ANIMACIÓ DE CÀRREGA (3 punts) ─────── */
@keyframes pulse-dot {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40%            { transform: scale(1); opacity: 1; }
}

.tariks-loading-dots { display: inline-flex; gap: 4px; }
.tariks-loading-dots span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #7c3aed;
    animation: pulse-dot 1.4s infinite ease-in-out;
}
.tariks-loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.tariks-loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.tariks-loading-dots span:nth-child(3) { animation-delay:  0s;    }

/* ── INDICADOR DE CONNEXIÓ ──────────────────────── */
.tariks-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #4ade80;
    animation: blink-green 2s infinite;
}
@keyframes blink-green {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

🚀

3. Lògica d'integració i deploy Operatiu + Robust

Connectat amb Gemini API, publicat al portafolis, gestió d'estats completa

L'aplicació està connectada amb l'API de Gemini a través del backend Flask i desplegada al portafolis personal. El codi està estructurat en components clars i llegibles.

# ── BACKEND COMPLET AMB MEMÒRIA I REINICI ────────────
# Estructura neta en 4 components ben separats

# COMPONENT 1: Configuració segura
from google.colab import userdata
GOOGLE_API_KEY = userdata.get("GOOGLE_API_KEY")
NGROK_TOKEN    = userdata.get("NGROK_TOKEN")

# COMPONENT 2: Model Gemini amb context del portafolis
model = genai.GenerativeModel(
    model_name="gemini-1.5-flash",
    system_instruction="""Ets el LANBot del portafolis de Tarik Aberdane
    (taberdane.inscastellbisbal.net). Estudiant de CFGM SMX a l'Institut
    Castellbisbal. El seu portafolis té: Reptes 1.1-1.5, Apunts de classe
    (Linux, navegadors, IsardVDI...) i projectes de XatBot amb Gemini.
    Respon sempre en català, de manera amigable i concisa."""
)

conversation_history = []  # memòria global de sessió

# COMPONENT 3: Endpoints Flask
@app.route('/ask', methods=['POST'])
def ask():
    global conversation_history
    data    = request.get_json()
    message = data.get('message', '').strip()
    history = data.get('history', [])

    if not message: return jsonify({"error": "Buit"}), 400

    conversation_history = history
    chat = model.start_chat(history=[
        {'role': h['role'], 'parts': [h['content']]}
        for h in conversation_history[:-1]
    ])
    response = chat.send_message(message)
    return jsonify({
        "success": True,
        "message": response.text,
        "timestamp": time.strftime("%H:%M:%S")
    })

@app.route('/reset', methods=['POST'])
def reset():
    global conversation_history
    conversation_history = []
    return jsonify({"success": True})

# COMPONENT 4: Deploy via ngrok
public_url = ngrok.connect(5000).public_url
print(f"🚀 Deploy actiu: {public_url}")
app.run(port=5000)

📊 Gestió d'estats del sistema

✅ Estat OK Resposta rebuda · JSON vàlid · HTTP 200 · Missatge mostrat

❌ Error connexió AbortError / NetworkError · Missatge amigable · Botó reactiva

⏳ Estat d'espera Animació 3 punts · Botó desactivat · Timeout 30s

🔄 Reinici FrontEnd buidat · POST /reset · Historia esborra·da

📸

Evidències – Captures del procés de vivecoding

Documentació visual de cada fase: prompts, iteració i resultat final

Cadena de prompts encadenats

✓5 iteracions documentades amb resultat concret.

✓Cada prompt partia del resultat anterior.

Detecció i correcció d'error de seguretat

✓Vaig detectar la clau visible al JS i la vaig rebutjar.

✓Prompt de correcció específic per refactoritzar.

Deploy operatiu a Google Colab

✓Servidor Flask + ngrok actiu amb URL pública.

✓Endpoints /ask i /reset responen correctament.

Interfície final del widget

✓Degradat lila, punt verd connexió, animació dots.

✓Supera el disseny estàndard en qualitat visual.

Evolució visual en 5 iteracions

✓De widget bàsic gris a interfície lila professional.

✓Cada iteració va afegir una funcionalitat concreta.

Widget operatiu al portafolis real

✓Conversa real capturada al portafolis de Tarik.

✓Respon amb IA sobre el contingut del lloc web.

✅ Compliment integral de la rúbrica

✓ Justificació Comparativa temps vivecoding vs. tradicional (2,5h vs. 11h), control total del codi generat, supervisió d'arquitectura i seguretat.

✓ Prompt Engineering i iteració 5 prompts encadenats documentats, detecció activa d'errors (clau API insegura), refinament de cada component per separat.

✓ Qualitat UI/UX Animació de 3 punts, indicador connexió verd, historial visual amb scroll, responsive 3 breakpoints, coherent amb el portafolis.

✓ Integració i deploy Flask + ngrok operatiu, endpoints /ask i /reset, gestió 4 estats (OK, error, espera, reinici), codi estructurat en 4 components.

🌐 taberdane.inscastellbisbal.net | Institut Castellbisbal · Cicle SMX · 2026

Tarik Aberdane · CFGM SMX · Institut Castellbisbal · 2026
Implementació d'un XatBot amb eines de Vivecoding · Prompt Engineering · Gemini API