{"id":2567,"date":"2026-02-25T07:44:19","date_gmt":"2026-02-25T07:44:19","guid":{"rendered":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2567"},"modified":"2026-04-21T09:14:11","modified_gmt":"2026-04-21T09:14:11","slug":"programacio-de-les-funcionalitats-basiques-en-el-backend-i-frontend","status":"publish","type":"page","link":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2567","title":{"rendered":"Programaci\u00f3 de les funcionalitats b\u00e0siques en el BackEnd i FrontEnd"},"content":{"rendered":"\n

<\/h2>\n\n\n\n

Qu\u00e8 \u00e9s el Xatbot?<\/h1>\n\n\n\n

El Xatbot \u00e9s un assistent autom\u00e0tic creat per a la LAN Party Castellbisbal 2026. La idea \u00e9s senzilla: qualsevol participant pot escriure una pregunta i rebre una resposta a l’instant, sense haver de buscar per la web ni esperar que alg\u00fa de l’organitzaci\u00f3 estigui disponible.<\/p>\n\n\n\n

Durant una LAN Party es repeteixen sempre les mateixes preguntes: “A quina hora comen\u00e7a el torneig?”, “On es pot menjar?”, “Puc portar la meva cadira?”. Respondre-les una per una manualment \u00e9s lent i cansat. Amb el xatbot, qualsevol persona rep la resposta en pocs segons, a qualsevol hora del dia.<\/p>\n\n\n\n

Com funciona?<\/h2>\n\n\n\n

Quan l’usuari escriu una pregunta a la finestra de xat, el missatge s’envia al nostre servidor. El servidor consulta la intel\u00b7lig\u00e8ncia artificial de Google (un model anomenat Gemini) i genera una resposta basada en la informaci\u00f3 real de la LAN Party que hem introdu\u00eft nosaltres pr\u00e8viament.<\/p>\n\n\n\n

El sistema t\u00e9 tres parts principals: el frontend<\/strong> (la finestra de xat que veu l’usuari), el backend<\/strong> (el servidor que processa les preguntes) i les dades<\/strong> (fitxers JSON amb tota la informaci\u00f3 de l’esdeveniment).<\/p>\n\n\n\n

\n\n\n\n

Backend: el servidor Flask<\/h3>\n\n\n\n

El backend est\u00e0 fet amb Python i utilitza les eines seg\u00fcents:<\/p>\n\n\n\n

    \n
  • Flask<\/strong>: un servidor web lleuger que rep les preguntes i retorna les respostes.<\/li>\n\n\n\n
  • Flask-CORS<\/strong>: permet que el navegador de l’usuari es pugui comunicar amb el servidor (sense aix\u00f2, el navegador bloqueja la connexi\u00f3 per seguretat).<\/li>\n\n\n\n
  • Google Gemini<\/strong>: la intel\u00b7lig\u00e8ncia artificial que genera les respostes.<\/li>\n\n\n\n
  • ngrok<\/strong>: crea una adre\u00e7a web p\u00fablica temporal per al servidor.<\/li>\n\n\n\n
  • Google Colab<\/strong>: entorn gratu\u00eft al n\u00favol des d’on s’executa el servidor.<\/li>\n<\/ul>\n\n\n\n
    # 1. INSTAL\u00b7LACI\u00d3
    !pip install -q -U google-genai flask-cors pyngrok beautifulsoup4 requests
    !pip install requests==2.32.4
    # ==========================================
    # 1. NETEJA I DEPEND\u00c8NCIES
    # ==========================================
    !pkill -f ngrok
    import time, json, os
    from flask import Flask, request, jsonify
    from flask_cors import CORS
    from google import genai
    from google.colab import userdata
    from pyngrok import ngrok
    import IPython

    # ==========================================
    # 2. C\u00c0RREGA DE CONTEXT OPTIMITZADA
    # ==========================================
    def carregar_dades():
    docs = [‘Lanparty.json’, ‘Faq.json’, ‘Normativa.json’, ‘dades_party.json’]
    resum = “”
    for d in docs:
    if os.path.exists(d):
    with open(d, ‘r’, encoding=’utf-8′) as f:
    resum += f.read()[:500] # Tall de seguretat per evitar lag
    return resum

    # ==========================================
    # 3. BACKEND (XATBOT PURPLE EDITION)
    # ==========================================
    app = Flask(__name__)
    CORS(app)

    API_KEY = userdata.get(“GOOGLE_API_KEY”)
    client = genai.Client(api_key=API_KEY)

    def init_xatbot():
    return client.chats.create(
    model=”gemini-2.5-flash”,
    config=genai.types.GenerateContentConfig(
    system_instruction=f”Ets Xatbot de la LAN Party Castellbisbal. Context: {carregar_dades()}. Estil gamer, catal\u00e0, breu i divertit.”
    )
    )

    chat_session = init_xatbot()

    @app.route(‘\/chat’, methods=[‘POST’])
    def handle_chat():
    global chat_session
    # [\u00daS DE LA IA] Implementaci\u00f3 d’un delay artificial de 0 segons demanat per l’usuari.
    time.sleep(0)
    try:
    user_msg = request.json.get(“message”, “”)
    response = chat_session.send_message(user_msg)
    return jsonify({“reply”: response.text.strip()})
    except:
    chat_session = init_xatbot()
    return jsonify({“reply”: “S’ha perdut la connexi\u00f3 al servidor lila… Torna a provar-ho!”})

    # ==========================================
    # 4. LLAN\u00c7AMENT NGROK
    # ==========================================
    NGROK_TOKEN = userdata.get(“NGROK_TOKEN”)
    ngrok.set_auth_token(NGROK_TOKEN)
    public_url = ngrok.connect(5000).public_url

    print(f”\ud83d\udc9c XATBOT ONLINE: {public_url}”)

    # ==========================================
    # 5. FRONTEND PURPLE GAMER RGB
    # ==========================================
    frontend_purple = f”””
    <div id=”chat-ui” style=”max-width:400px; margin:auto; background:#0d0216; border: 2px solid #a020f0; border-radius:15px; overflow:hidden; font-family:’Segoe UI’, sans-serif; box-shadow: 0 0 15px #a020f0;”>
    <div style=”background: #1a052d; color:#e0b0ff; padding:15px; text-align:center; font-weight:bold; border-bottom: 2px solid #a020f0; letter-spacing: 2px;”>
    \ud83d\udd2e XATBOT CASTELLBISBAL \ud83d\udd2e
    <\/div>
    <div id=”display” style=”height:380px; overflow-y:auto; padding:15px; display:flex; flex-direction:column; gap:12px; background: #0d0216;”>
    <div style=”background:#2d0a4e; color:#e0b0ff; padding:10px; border-radius:15px 15px 15px 0px; align-self:flex-start; max-width:85%; font-size:14px; border: 1px solid #a020f0;”>
    Hola gamer! Soc en Xatbot. Quina \u00e9s la teva consulta? \ud83d\udc7e
    <\/div>
    <\/div>
    <div id=”typing” style=”color:#a020f0; font-size:10px; padding-left:15px; height:15px; visibility:hidden;”>Xatbot est\u00e0 escrivint…<\/div>
    <div style=”padding:10px; background:#1a052d; display:flex; gap:8px;”>
    <input id=”user_in” type=”text” style=”flex:1; background:#0d0216; color:white; border:1px solid #a020f0; padding:10px; border-radius:10px; outline:none;” placeholder=”Escriu…”>
    <button onclick=”askBot()” style=”background:#a020f0; color:white; border:none; padding:10px 15px; font-weight:bold; cursor:pointer; border-radius:10px; box-shadow: 0 0 5px #a020f0;”>GG<\/button>
    <\/div>
    <\/div>

    <script>
    async function askBot() {{
    const input = document.getElementById(‘user_in’);
    const display = document.getElementById(‘display’);
    const typing = document.getElementById(‘typing’);
    const msg = input.value.trim();
    if(!msg) return;

    \/\/ Missatge usuari (Sense prefix)
    display.innerHTML += `<div style=”background:#a020f0; color:white; padding:10px; border-radius:15px 15px 0px 15px; align-self:flex-end; max-width:85%; font-size:14px;”>${{msg}}<\/div>`;
    input.value = ”;
    display.scrollTop = display.scrollHeight;

    \/\/ Activar indicador d’escriptura
    typing.style.visibility = ‘visible’;

    try {{
    const res = await fetch(‘{public_url}\/chat’, {{
    method: ‘POST’,
    headers: {{‘Content-Type’: ‘application\/json’}},
    body: JSON.stringify({{message: msg}})
    }});
    const data = await res.json();

    typing.style.visibility = ‘hidden’;
    \/\/ Resposta bot (Sense prefix)
    display.innerHTML += `<div style=”background:#2d0a4e; color:#e0b0ff; padding:10px; border-radius:15px 15px 15px 0px; align-self:flex-start; max-width:85%; font-size:14px; border: 1px solid #a020f0;”>${{data.reply}}<\/div>`;
    }} catch(e) {{
    typing.style.visibility = ‘hidden’;
    display.innerHTML += `<div style=”color:red; text-align:center; font-size:12px;”>Connexi\u00f3 fallida<\/div>`;
    }}
    display.scrollTop = display.scrollHeight;
    }}
    document.getElementById(‘user_in’).addEventListener(‘keypress’, (e) => {{ if(e.key === ‘Enter’) askBot(); }});
    <\/script>
    “””

    IPython.display.display(IPython.display.HTML(frontend_purple))
    app.run(port=5000)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Problemes que vam trobar i com els vam solucionar:<\/strong><\/p>\n\n\n\n

    Durant el desenvolupament ens vam topar amb tres problemes concrets. El primer va ser l’error HTTP 429 (quota superada): el model gemini-pro<\/code> tenia restriccions molt severes a la capa gratu\u00efta, i la soluci\u00f3 va ser canviar a gemini-2.5-flash<\/code>, que \u00e9s m\u00e9s r\u00e0pid i t\u00e9 una quota molt m\u00e9s generosa. El segon va ser el bloqueig CORS: el navegador bloquejava les peticions perqu\u00e8 el frontend i el backend estaven en dominis diferents, i vam solucionar-ho afegint la llibreria flask-cors<\/code>. El tercer va ser la pantalla d’advert\u00e8ncia de ngrok: quan el frontend feia una petici\u00f3, ngrok mostrava primer una p\u00e0gina HTML d’advert\u00e8ncia i el nostre JavaScript es trencava perqu\u00e8 esperava rebre JSON. Ho vam resoldre assegurant que les cap\u00e7aleres de la petici\u00f3 fossin correctes.<\/p>\n\n\n\n

    Frontend: la interf\u00edcie de l’usuari<\/h3>\n\n\n\n

    La interf\u00edcie del xatbot est\u00e0 feta amb HTML5, CSS3 i JavaScript est\u00e0ndard. No necessita cap llibreria externa. L’est\u00e8tica \u00e9s de tipus gamer, amb fons fosc i colors morats.<\/p>\n\n\n\n

    Funcions implementades: els missatges de l’usuari surten a la dreta en morat intens, les respostes del bot surten a l’esquerra en lila clar, apareix l’indicador “Xatbot est\u00e0 escrivint…” mentre s’espera la resposta, la finestra es despla\u00e7a autom\u00e0ticament per veure sempre el darrer missatge, i es pot enviar un missatge prement la tecla Enter.<\/p>\n\n\n\n

    <div id=”chat-ui” style=”max-width:400px; margin:10px auto; background:#0d0216; border: 2px solid #a020f0; border-radius:15px; box-shadow: 0 0 20px #a020f0;”> <div id=”header” style=”background:#1a052d; color:#e0b0ff; padding:15px; text-align:center; font-weight:bold; border-bottom:2px solid #a020f0;”> \ud83d\udd2e XATBOT CASTELLBISBAL \ud83d\udd2e <\/div> <div id=”display” style=”height:380px; overflow-y:auto; padding:15px; display:flex; flex-direction:column; gap:12px; background:#0d0216;”> <div class=”bot-msg”>Benvingut a la LAN Party! Com puc ajudar-te? \ud83d\udc7e<\/div> <\/div> <div id=”typing” style=”color:#a020f0; font-size:11px; padding:0 15px 5px; height:15px; font-style:italic; visibility:hidden;”> Xatbot est\u00e0 escrivint… <\/div> <div id=”input-area” style=”padding:10px; background:#1a052d; display:flex; gap:8px;”> <input id=”user_in” type=”text” placeholder=”Escriu missatge…” style=”flex:1; background:#0d0216; color:white; border:1px solid #a020f0; padding:10px; border-radius:10px; outline:none;”> <button onclick=”askBot()” style=”background:#a020f0; color:white; border:none; padding:10px 15px; font-weight:bold; cursor:pointer; border-radius:10px;”>GG<\/button> <\/div> <\/div> <script> const NGROK_URL = “https:\/\/el-teu-servidor.ngrok-free.dev”; async function askBot() { const input = document.getElementById(‘user_in’); const display = document.getElementById(‘display’); const typing = document.getElementById(‘typing’); const msg = input.value.trim(); if (!msg) return; display.innerHTML += `<div style=”background:#a020f0; color:white; padding:10px; border-radius:15px 15px 0 15px; align-self:flex-end; max-width:85%; font-size:14px;”>${msg}<\/div>`; input.value = ”; display.scrollTop = display.scrollHeight; typing.style.visibility = ‘visible’; try { const res = await fetch(`${NGROK_URL}\/chat`, { method: ‘POST’, headers: { ‘Content-Type’: ‘application\/json’ }, body: JSON.stringify({ message: msg }) }); const data = await res.json(); setTimeout(() => { typing.style.visibility = ‘hidden’; display.innerHTML += `<div style=”background:#2d0a4e; color:#e0b0ff; padding:10px; border-radius:15px 15px 15px 0; align-self:flex-start; max-width:85%; font-size:14px; border:1px solid #a020f0;”>${data.reply}<\/div>`; display.scrollTop = display.scrollHeight; }, 500); } catch(e) { typing.style.visibility = ‘hidden’; display.innerHTML += `<div style=”color:red; text-align:center; font-size:12px;”> Error de connexi\u00f3<\/div>`; } } document.getElementById(‘user_in’).addEventListener(‘keypress’, (e) => { if (e.key === ‘Enter’) askBot(); }); <\/script><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Gesti\u00f3 de dades: els fitxers JSON<\/h3>\n\n\n\n

    Tota la informaci\u00f3 de la LAN Party (horaris, normativa, preguntes freq\u00fcents, tornejos) es guarda en fitxers JSON. Quan el xatbot rep una pregunta, la IA consulta aquests fitxers i construeix una resposta basada en dades reals. Aix\u00f2 \u00e9s important perqu\u00e8 evita que la IA inventi informaci\u00f3 sobre l’esdeveniment.<\/p>\n\n\n\n

    Hem usat quatre fitxers: Lanparty.json<\/code> (informaci\u00f3 general), Faq.json<\/code> (preguntes freq\u00fcents), Normativa.json<\/code> (regles de la LAN Party) i dades_party.json<\/code> (configuraci\u00f3 de xarxa i tornejos).<\/p>\n\n\n\n

    Per seguretat, el codi gestiona dos tipus d’errors: si un fitxer no existeix (FileNotFoundError<\/code>), el sistema avisa per consola en lloc de trencar-se; si el fitxer t\u00e9 un error de sintaxi (JSONDecodeError<\/code>), el bot el detecta i protegeix l’execuci\u00f3.<\/p>\n\n\n\n

    Gesti\u00f3 de dades: els fitxers JSON<\/h3>\n\n\n\n

    Tota la informaci\u00f3 de la LAN Party (horaris, normativa, preguntes freq\u00fcents, tornejos) es guarda en fitxers JSON. Quan el xatbot rep una pregunta, la IA consulta aquests fitxers i construeix una resposta basada en dades reals. Aix\u00f2 \u00e9s important perqu\u00e8 evita que la IA inventi informaci\u00f3 sobre l’esdeveniment.<\/p>\n\n\n\n

    Hem usat quatre fitxers: Lanparty.json<\/code> (informaci\u00f3 general), Faq.json<\/code> (preguntes freq\u00fcents), Normativa.json<\/code> (regles de la LAN Party) i dades_party.json<\/code> (configuraci\u00f3 de xarxa i tornejos).<\/p>\n\n\n\n

    Per seguretat, el codi gestiona dos tipus d’errors: si un fitxer no existeix (FileNotFoundError<\/code>), el sistema avisa per consola en lloc de trencar-se; si el fitxer t\u00e9 un error de sintaxi (JSONDecodeError<\/code>), el bot el detecta i protegeix l’execuci\u00f3.<\/p>\n\n\n\n

    GitHub: CHANGELOG i CONTRIBUTING<\/h3>\n\n\n\n

    CHANGELOG<\/strong><\/p>\n\n\n\n

    El CHANGELOG \u00e9s un document que registra tots els canvis fets al projecte. Permet saber en quin punt estava el codi en cada moment i quines funcionalitats s’han afegit o corregit. A GitHub es troba com el fitxer CHANGELOG.md<\/code> a l’arrel del repositori.<\/p>\n\n\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    El fitxer CONTRIBUTING.md<\/code> explica com qualsevol persona pot col\u00b7laborar al projecte: afegir funcionalitats, corregir errors o millorar la documentaci\u00f3.<\/p>\n\n\n\n\n\n

    \"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

    Qu\u00e8 \u00e9s el Xatbot? El Xatbot \u00e9s un assistent autom\u00e0tic creat per a la LAN Party Castellbisbal 2026. La idea \u00e9s senzilla: qualsevol participant pot escriure una pregunta i rebre una resposta a l’instant, sense haver de buscar per la web ni esperar que alg\u00fa de l’organitzaci\u00f3 estigui disponible. Durant una LAN Party es repeteixen […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1707,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"saved_in_kubio":false,"_dseop_meta":"{\"noFollowLinks\":{\"linkList\":[],\"ignoredGlobalDomains\":[],\"textboxValue\":\"\"},\"schemaMarkup\":{\"schemas\":[{\"templateId\":\"WebpageSchema\",\"name\":\"Webpage\",\"id\":\"WebpageSchema\",\"schemaData\":{\"@type\":\"WebPage\",\"@id\":\"\",\"name\":\"\",\"url\":\"\",\"description\":\"\",\"breadcrumb\":{\"@type\":\"BreadcrumbList\",\"@id\":\"\"},\"datePublished\":\"\",\"dateModified\":\"\",\"inLanguage\":\"\"}}],\"schemaTemplates\":[]},\"metaDescription\":{\"metaData\":[]},\"keywordAppearance\":{\"contentDetails\":[{\"name\":\"Word count\",\"count\":1375,\"id\":\"wordCount\",\"status\":\"success\",\"detailStatus\":\"success\",\"tooltip\":\"words count should be greater then 1500.\"},{\"id\":\"heading1\",\"name\":\"heading 1\",\"count\":2,\"status\":\"poor\",\"detailStatus\":\"longPoor\",\"tooltip\":\"web page should have one h1 tag for better SEO\"},{\"id\":\"heading2\",\"name\":\"heading 2\",\"count\":1,\"status\":\"excellent\",\"detailStatus\":\"excellent\",\"tooltip\":\"good use of h2 tags.\"},{\"id\":\"heading3\",\"name\":\"heading 3\",\"count\":5,\"status\":\"excellent\",\"detailStatus\":\"excellent\",\"tooltip\":\"good use of h3 tags.\"},{\"id\":\"paragraphTags\",\"name\":\"paragraph tags\",\"count\":18,\"status\":\"excellent\",\"detailStatus\":\"excellent\",\"tooltip\":\"good use of paragraph tags.\"},{\"id\":\"boldAndStrongTags\",\"name\":\"bold and strong tags list\",\"count\":11,\"status\":\"excellent\",\"detailStatus\":\"excellent\",\"tooltip\":\"good use of bold and strong tags.\"},{\"name\":\"Avg. Stopword percentage\",\"count\":4,\"id\":\"averageStopwordPercentage\"},{\"name\":\"Avg. Words per sentence\",\"count\":27,\"id\":\"averageWordsPerSentence\"},{\"name\":\"Stopword count\",\"count\":58,\"id\":\"sentenceCount\"},{\"name\":\"Sentence count\",\"count\":51,\"id\":\"sentenceCount\"},{\"name\":\"Letter count\",\"count\":8900,\"id\":\"letterCount\"},{\"name\":\"Difficult word\",\"count\":278,\"id\":\"difficultWord\"}],\"advanceOptions\":[],\"modifyStopwords\":{\"customStopwords\":[],\"disabledStopwords\":[]}},\"socialMedia\":{\"openGraphData\":[],\"twitterData\":{\"xSummaryCardData\":[],\"xAppCardData\":{\"iphoneAppName\":\"\",\"iphoneAppId\":\"\",\"iphoneAppUrl\":\"\",\"ipadAppName\":\"\",\"ipadAppId\":\"\",\"ipadAppUrl\":\"\",\"googlePlayAppName\":\"\",\"googlePlayAppId\":\"\",\"googlePlayAppUrl\":\"\",\"appCountry\":\"\"},\"xPlayerCardData\":{\"player\":\"\",\"playerWidth\":\"\",\"streamUrl\":\"\",\"streamContentType\":\"\"}}},\"readability\":{\"readabilityFactorList\":[{\"helpLink\":\"link\",\"isError\":true,\"name\":\"Flesch - Kincaid reading ease\",\"score\":1.76,\"description\":\"The Flesch-Kincaid Reading Ease score measures the readability of your text. A higher score indicates easier-to-read content. Aim for a score between 60 and 70 for most web content.\",\"grade\":\"Very Difficult (College Graduate)\"},{\"helpLink\":\"link\",\"isError\":false,\"name\":\"Gunning fog score\",\"score\":11.19,\"description\":\"The Gunning Fog Score estimates the years of formal education needed to understand your text. Lower scores indicate easier readability. Aim for a score of 7 to 8 for general audiences.\",\"grade\":\"High School (Grade 9-12)\"},{\"helpLink\":\"link\",\"isError\":false,\"name\":\"Coleman liau index\",\"score\":18.45,\"description\":\"The Coleman-Liau Index calculates readability based on characters per word and sentence length. It estimates the U.S. school grade level required to comprehend the text. A lower score suggests easier content.\",\"grade\":\"College Graduate (Grade 17+)\"},{\"helpLink\":\"link\",\"isError\":false,\"name\":\"Flesch - Kincaid grade level\",\"score\":14.94,\"description\":\"The Flesch-Kincaid Grade Level formula evaluates the readability of your text by calculating the U.S. school grade level. A lower grade level indicates easier readability.\",\"grade\":\"College (Grade 13-16)\"},{\"helpLink\":\"link\",\"isError\":false,\"name\":\"Smog index\",\"score\":10.29,\"description\":\"The SMOG (Simple Measure of Gobbledygook) Index estimates the years of education a person needs to understand a text. A lower score means simpler text, while a higher score suggests more complex content.\",\"grade\":\"High School (Grade 9-12)\"},{\"helpLink\":\"link\",\"isError\":false,\"name\":\"Automated readability index\",\"score\":12.94,\"description\":\"The Automated Readability Index calculates the readability of your content using characters per word and words per sentence. It estimates the U.S. school grade level needed to understand the text.\",\"grade\":\"College (Grade 13-16)\"},{\"helpLink\":\"link\",\"isError\":false,\"name\":\"Dale chall readability score\",\"score\":7.21,\"description\":\"The Dale-Chall Readability Score evaluates the readability of your text based on familiar words and sentence structure. A lower score indicates that the content is easier to read.\",\"grade\":\"9th-10th grade\"},{\"helpLink\":\"link\",\"isError\":false,\"name\":\"Spache readability score\",\"score\":1.6,\"description\":\"The Spache Readability Score measures the readability of texts for younger readers. It identifies words that are unfamiliar to children and calculates a score accordingly. A lower score indicates easier content.\",\"grade\":\"2nd grade\"}]},\"advanceSetting\":{\"advanceRobotsMeta\":[],\"breadcrumbTitle\":\"\",\"canonicalURL\":\"\",\"criticalOptions\":[]},\"scoring\":{\"subScoring\":{\"metaDescriptionScore\":2.5,\"schemaMarkupScore\":8,\"outwardInterlinkingScore\":0,\"inwardInterlinkingScore\":0,\"socialMediaScore\":0,\"misspelledWordsScore\":0,\"advanceSettingScore\":3,\"noFollowLinksScore\":0,\"keywordAppearanceScore\":4.5,\"imageAnalyticsScore\":1},\"singlePostScore\":29},\"misspelledWords\":[],\"pointsToImprove\":{\"count\":{\"criticalPointsCount\":0,\"recommendedPointsCount\":0},\"pointsToImproveDetails\":{\"searchEngineAppearance\":[{\"id\":\"critical_meta_title_too_long\",\"name\":{\"label\":\"Meta title is too long\"},\"type\":\"Critical\",\"priority\":\"too_high\"},{\"id\":\"recommended_keyword_missing_meta_title\",\"name\":{\"label\":\"Keyword is missing in meta title.\"},\"type\":\"Critical\",\"priority\":\"too_high\"},{\"id\":\"critical_meta_description_short\",\"name\":{\"label\":\"Meta description is Short\"},\"type\":\"Critical\"},{\"id\":\"recommended_meta_description_with_no_selected_keyword\",\"name\":{\"label\":\"There in no keyword in your meta description.\"},\"type\":\"Critical\"},{\"id\":\"recommended_keyword_missing_permalink\",\"name\":{\"label\":\"Keyword is missing in permalink.\"},\"type\":\"Critical\"}],\"searchEngineVisibility\":[],\"redirectedLink301\":[],\"socialMedia\":[{\"id\":\"critical_missing_social_media_image\",\"name\":{\"label\":\"Image is missing in social media appearance.\"},\"type\":\"Critical\",\"priority\":\"high\"},{\"id\":\"recommended_keyword_missing_open_graph_title\",\"name\":{\"label\":\"Keyword is missing in social media title.\"},\"type\":\"Recommended\"},{\"id\":\"critical_too_large_social_media_title\",\"name\":{\"label\":\"Title is Too long in social media appearance.\"},\"type\":\"Critical\"},{\"id\":\"recommended_keyword_missing_open_graph_description\",\"name\":{\"label\":\"Keyword is missing in social media description.\"},\"type\":\"Recommended\"},{\"id\":\"recommended_short_social_media_description\",\"name\":{\"label\":\"Description is short in social media appearance.\"},\"type\":\"Critical\"},{\"id\":\"critical_missing_social_media_twitter_image\",\"name\":{\"label\":\"X(Twitter) image is missing in social media appearance.\"},\"type\":\"Critical\",\"priority\":\"high\"},{\"id\":\"recommended_keyword_missing_twitter_title\",\"name\":{\"label\":\"Keyword is missing in X(Twitter) title.\"},\"type\":\"Recommended\"},{\"id\":\"critical_too_large_social_media_twitter_title\",\"name\":{\"label\":\"X(Twitter) title is Too long in social media appearance.\"},\"type\":\"Critical\"},{\"id\":\"recommended_keyword_missing_twitter_description\",\"name\":{\"label\":\"Keyword is missing in X(Twitter) description.\"},\"type\":\"Recommended\"},{\"id\":\"recommended_short_social_media_twitter_description\",\"name\":{\"label\":\"X(Twitter) description is short in social media appearance.\"},\"type\":\"Critical\"}],\"noFollowLink\":[],\"misspelledWords\":[],\"inwardLinks\":[],\"outwardLinks\":[],\"keywordAppearance\":[{\"id\":\"critical_no_selected_keyword\",\"name\":{\"label\":\"Selected keyword missing in keyword appearance.\"},\"type\":\"Critical\",\"priority\":\"too_high\"},{\"id\":\"critical_h1_is_too_high\",\"name\":{\"label\":\"H1 tags is too high in your content.\"},\"type\":\"Critical\",\"priority\":\"too_high\"}],\"advanceSettings\":[],\"schemaMarkup\":[],\"imageAnalytics\":[{\"id\":\"critical_missing_images_title_attribute\",\"name\":{\"label\":\"Missing images title attribute.\"},\"type\":\"Critical\"},{\"id\":\"critical_missing_images_alt_attribute\",\"name\":{\"label\":\"Missing images alt attribute.\"},\"type\":\"Critical\"},{\"id\":\"critical_keyword_missing_in_image_filename\",\"name\":{\"label\":\"Keyword missing in images filename.\"},\"type\":\"Critical\"}],\"productGtins\":[]}},\"imageAnalytics\":{\"imageAnalysis\":[{\"id\":\"TotalImages\",\"name\":\"Total images\",\"value\":\"2\"},{\"id\":\"ImagesHasTitle\",\"name\":\"Images has title\",\"value\":\"0\",\"outOff\":\"2\",\"status\":\"poor\",\"tooltip\":\"Missing image title attribute\"},{\"id\":\"ImageHasAltAttribute\",\"name\":\"Images has alt\",\"value\":\"0\",\"outOff\":\"2\",\"status\":\"poor\",\"tooltip\":\"Missing alt attribute\"},{\"id\":\"ImagesHasProperFileName\",\"name\":\"Images has proper filename format\",\"value\":\"2\",\"outOff\":\"2\",\"status\":\"excellent\",\"tooltip\":\"Good! all images has proper filename format\"},{\"id\":\"KeywordInTitleAttribute\",\"name\":\"Keyword in image title\",\"value\":\"0\",\"outOff\":\"0\",\"status\":\"disabled\",\"tooltip\":\"Add image title attribute to enable this feature.\"},{\"id\":\"KeywordInAltAttribute\",\"name\":\"Keyword in image Alt\",\"value\":\"0\",\"outOff\":\"0\",\"status\":\"disabled\",\"tooltip\":\"Add image alt attribute to enable this feature.\"},{\"id\":\"KeywordInFilename\",\"name\":\"Keyword in image filename\",\"value\":\"0\",\"outOff\":\"2\",\"status\":\"poor\",\"tooltip\":\"Missing keyword in image filename\"}]}}","_dseop_selected_keywords":"","footnotes":""},"class_list":["post-2567","page","type-page","status-publish","hentry"],"kubio_ai_page_context":{"short_desc":"","purpose":"general"},"yoast_head":"\nProgramaci\u00f3 de les funcionalitats b\u00e0siques en el BackEnd i FrontEnd - Adrian Jaimes<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2567\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Programaci\u00f3 de les funcionalitats b\u00e0siques en el BackEnd i FrontEnd - Adrian Jaimes\" \/>\n<meta property=\"og:description\" content=\"Qu\u00e8 \u00e9s el Xatbot? El Xatbot \u00e9s un assistent autom\u00e0tic creat per a la LAN Party Castellbisbal 2026. La idea \u00e9s senzilla: qualsevol participant pot escriure una pregunta i rebre una resposta a l’instant, sense haver de buscar per la web ni esperar que alg\u00fa de l’organitzaci\u00f3 estigui disponible. Durant una LAN Party es repeteixen […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2567\" \/>\n<meta property=\"og:site_name\" content=\"Adrian Jaimes\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-21T09:14:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ajaimes.inscastellbisbal.net\/wp-content\/uploads\/2026\/04\/imagen-7.png\" \/>\n\t<meta property=\"og:image:width\" content=\"895\" \/>\n\t<meta property=\"og:image:height\" content=\"743\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minuts\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=2567\",\"url\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=2567\",\"name\":\"Programaci\u00f3 de les funcionalitats b\u00e0siques en el BackEnd i FrontEnd - Adrian Jaimes\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=2567#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=2567#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/imagen-7.png\",\"datePublished\":\"2026-02-25T07:44:19+00:00\",\"dateModified\":\"2026-04-21T09:14:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=2567#breadcrumb\"},\"inLanguage\":\"ca\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=2567\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=2567#primaryimage\",\"url\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/imagen-7.png\",\"contentUrl\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/imagen-7.png\",\"width\":895,\"height\":743},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=2567#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inici\",\"item\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"1r SMX\",\"item\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=1084\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Repte 1.3\",\"item\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=1491\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"5\ufe0f\u20e3 – \ud83e\udd16 – Generaci\u00f3 d\u2019un xatbot\",\"item\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=1707\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Programaci\u00f3 de les funcionalitats b\u00e0siques en el BackEnd i FrontEnd\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/#website\",\"url\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/\",\"name\":\"Adrian Jaimes\",\"description\":\"S\u00f3c estudiant d'inform\u00e0tica i aqu\u00ed podr\u00e0s veure el meu cam\u00ed acad\u00e8mic, els projectes que he realitzat i els coneixements que he adquirit durant la meva formaci\u00f3. Aquesta p\u00e0gina \u00e9s un reflex de la meva passi\u00f3 per la tecnologia i el meu comprom\u00eds per seguir aprenent i millorant cada dia. Explora els meus treballs i seguiment acad\u00e8mic!\",\"publisher\":{\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ca\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/#organization\",\"name\":\"Adrian Jaimes\",\"url\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/cropped-cropped-cropped-width_550_009.webp\",\"contentUrl\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/cropped-cropped-cropped-width_550_009.webp\",\"width\":512,\"height\":512,\"caption\":\"Adrian Jaimes\"},\"image\":{\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Programaci\u00f3 de les funcionalitats b\u00e0siques en el BackEnd i FrontEnd - Adrian Jaimes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2567","og_locale":"ca_ES","og_type":"article","og_title":"Programaci\u00f3 de les funcionalitats b\u00e0siques en el BackEnd i FrontEnd - Adrian Jaimes","og_description":"Qu\u00e8 \u00e9s el Xatbot? El Xatbot \u00e9s un assistent autom\u00e0tic creat per a la LAN Party Castellbisbal 2026. La idea \u00e9s senzilla: qualsevol participant pot escriure una pregunta i rebre una resposta a l’instant, sense haver de buscar per la web ni esperar que alg\u00fa de l’organitzaci\u00f3 estigui disponible. Durant una LAN Party es repeteixen […]","og_url":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2567","og_site_name":"Adrian Jaimes","article_modified_time":"2026-04-21T09:14:11+00:00","og_image":[{"width":895,"height":743,"url":"https:\/\/ajaimes.inscastellbisbal.net\/wp-content\/uploads\/2026\/04\/imagen-7.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Temps estimat de lectura":"8 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2567","url":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2567","name":"Programaci\u00f3 de les funcionalitats b\u00e0siques en el BackEnd i FrontEnd - Adrian Jaimes","isPartOf":{"@id":"https:\/\/ajaimes.inscastellbisbal.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2567#primaryimage"},"image":{"@id":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2567#primaryimage"},"thumbnailUrl":"https:\/\/ajaimes.inscastellbisbal.net\/wp-content\/uploads\/2026\/04\/imagen-7.png","datePublished":"2026-02-25T07:44:19+00:00","dateModified":"2026-04-21T09:14:11+00:00","breadcrumb":{"@id":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2567#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2567"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2567#primaryimage","url":"https:\/\/ajaimes.inscastellbisbal.net\/wp-content\/uploads\/2026\/04\/imagen-7.png","contentUrl":"https:\/\/ajaimes.inscastellbisbal.net\/wp-content\/uploads\/2026\/04\/imagen-7.png","width":895,"height":743},{"@type":"BreadcrumbList","@id":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2567#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inici","item":"https:\/\/ajaimes.inscastellbisbal.net\/"},{"@type":"ListItem","position":2,"name":"1r SMX","item":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=1084"},{"@type":"ListItem","position":3,"name":"Repte 1.3","item":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=1491"},{"@type":"ListItem","position":4,"name":"5\ufe0f\u20e3 – \ud83e\udd16 – Generaci\u00f3 d\u2019un xatbot","item":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=1707"},{"@type":"ListItem","position":5,"name":"Programaci\u00f3 de les funcionalitats b\u00e0siques en el BackEnd i FrontEnd"}]},{"@type":"WebSite","@id":"https:\/\/ajaimes.inscastellbisbal.net\/#website","url":"https:\/\/ajaimes.inscastellbisbal.net\/","name":"Adrian Jaimes","description":"S\u00f3c estudiant d'inform\u00e0tica i aqu\u00ed podr\u00e0s veure el meu cam\u00ed acad\u00e8mic, els projectes que he realitzat i els coneixements que he adquirit durant la meva formaci\u00f3. Aquesta p\u00e0gina \u00e9s un reflex de la meva passi\u00f3 per la tecnologia i el meu comprom\u00eds per seguir aprenent i millorant cada dia. Explora els meus treballs i seguiment acad\u00e8mic!","publisher":{"@id":"https:\/\/ajaimes.inscastellbisbal.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ajaimes.inscastellbisbal.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"},{"@type":"Organization","@id":"https:\/\/ajaimes.inscastellbisbal.net\/#organization","name":"Adrian Jaimes","url":"https:\/\/ajaimes.inscastellbisbal.net\/","logo":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/ajaimes.inscastellbisbal.net\/#\/schema\/logo\/image\/","url":"https:\/\/ajaimes.inscastellbisbal.net\/wp-content\/uploads\/2025\/12\/cropped-cropped-cropped-width_550_009.webp","contentUrl":"https:\/\/ajaimes.inscastellbisbal.net\/wp-content\/uploads\/2025\/12\/cropped-cropped-cropped-width_550_009.webp","width":512,"height":512,"caption":"Adrian Jaimes"},"image":{"@id":"https:\/\/ajaimes.inscastellbisbal.net\/#\/schema\/logo\/image\/"}}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ajaimes.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/2567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ajaimes.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ajaimes.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ajaimes.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ajaimes.inscastellbisbal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2567"}],"version-history":[{"count":9,"href":"https:\/\/ajaimes.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/2567\/revisions"}],"predecessor-version":[{"id":3018,"href":"https:\/\/ajaimes.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/2567\/revisions\/3018"}],"up":[{"embeddable":true,"href":"https:\/\/ajaimes.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/1707"}],"wp:attachment":[{"href":"https:\/\/ajaimes.inscastellbisbal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}