{"id":2208,"date":"2026-02-09T12:41:48","date_gmt":"2026-02-09T12:41:48","guid":{"rendered":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2208"},"modified":"2026-04-21T07:41:04","modified_gmt":"2026-04-21T07:41:04","slug":"comunicacio-frontend-i-backend-i-integracio-del-widget-a-la-pagina-web","status":"publish","type":"page","link":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2208","title":{"rendered":"Comunicaci\u00f3 FrontEnd i BackEnd i integraci\u00f3 del Widget a la p\u00e0gina web"},"content":{"rendered":"\n
\n\n\n\n

En aquesta fase final, he aconseguit que el meu xatbot no nom\u00e9s sigui un codi en una consola, sin\u00f3 una eina real integrada a la meva p\u00e0gina web que qualsevol usuari pot fer servir.<\/p>\n\n\n\n

1. Arquitectura i Flux de Dades (El cam\u00ed del missatge)<\/h2>\n\n\n\n

He creat un ecosistema on el FrontEnd<\/strong> (el que veu l’usuari) i el BackEnd<\/strong> (el cervell de la IA) es comuniquen sense interrupcions. El flux funciona aix\u00ed:<\/p>\n\n\n\n

    \n
  1. L’usuari escriu:<\/strong> El missatge es captura des del Widget que he programat.<\/li>\n\n\n\n
  2. Peticions As\u00edncrones (Fetch):<\/strong> Faig servir JavaScript per enviar la pregunta al servidor de Google Colab sense que la p\u00e0gina web s’hagi de recarregar.<\/li>\n\n\n\n
  3. T\u00fanel Ngrok:<\/strong> Com que el servidor est\u00e0 en un entorn privat, faig servir un t\u00fanel de Ngrok<\/strong> que em d\u00f3na una adre\u00e7a p\u00fablica segura per rebre les preguntes.<\/li>\n\n\n\n
  4. Resposta en temps real:<\/strong> El servidor Flask processa la petici\u00f3 i torna un objecte JSON<\/strong> amb la resposta de Gemini, que es mostra instant\u00e0niament al xat.<\/li>\n<\/ol>\n\n\n\n

    Com m’ha ajudat la IA?<\/strong> M’ha ajudat a configurar les cap\u00e7aleres de seguretat com 'ngrok-skip-browser-warning': 'true'<\/code>. Sense aix\u00f2, en fer servir la versi\u00f3 gratu\u00efta de Ngrok, el xat no funcionaria perqu\u00e8 sortiria una pantalla d’av\u00eds de seguretat bloquejant la resposta.<\/p>\n\n\n\n

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

    2. Disseny i Integraci\u00f3 del Widget (“Gold & Dark Edition”)<\/h2>\n\n\n\n

    He decidit canviar el disseny per un m\u00e9s professional que el de la pr\u00e0ctica anterior. He creat un bot\u00f3 flotant circular amb tons daurats (#c9a84c<\/code>) que s’obre en fer clic.<\/p>\n\n\n\n

    Caracter\u00edstiques del disseny:<\/strong><\/p>\n\n\n\n

      \n
    • Disseny Responsive:<\/strong> He fet servir @media queries<\/code> perqu\u00e8 el xat ocupi gaireb\u00e9 tota la pantalla en m\u00f2bils, per\u00f2 sigui discret en ordinadors.<\/li>\n\n\n\n
    • Efectes Visuals:<\/strong> He programat efectes de hover<\/code> i shadows<\/code> perqu\u00e8 el bot\u00f3 sembli que floti i tingui un aspecte modern.<\/li>\n\n\n\n
    • WPCode:<\/strong> Per integrar-lo a WordPress, he fet servir aquest plugin per enganxar el codi al Footer<\/strong> (peu de p\u00e0gina), evitant aix\u00ed haver de modificar els fitxers interns de la plantilla.<\/li>\n<\/ul>\n\n\n\n

      Com m’ha ajudat la IA?<\/strong> M’ha ajudat a polir el JavaScript perqu\u00e8, quan el xatbot escrigui en negretes (fent servir asteriscos **<\/code>), el navegador els transformi en etiquetes <b><\/code> reals. Tamb\u00e9 hem programat l’indicador d’escriptura (“…”) perqu\u00e8 l’usuari s\u00e0piga que el bot est\u00e0 pensant.<\/p>\n\n\n\n

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

      3. Seguretat de les Claus i Gesti\u00f3 d’Errors<\/h2>\n\n\n\n

      No podem deixar les claus d’API a la vista de tothom al codi JavaScript del navegador. Per aix\u00f2, tota la seguretat es gestiona al BackEnd<\/strong>:<\/p>\n\n\n\n

        \n
      • El Widget de la web nom\u00e9s coneix la URL de Ngrok, mai la clau de Gemini.<\/li>\n\n\n\n
      • He utilitzat els Secrets de Colab<\/strong> per cridar la clau de l’API de manera oculta.<\/li>\n\n\n\n
      • He programat un sistema de Try-Catch<\/strong>: si per algun motiu el servidor est\u00e0 apagat, el xatbot respon autom\u00e0ticament: “Error de connexi\u00f3<\/strong>“, en lloc de quedar-se congelat.<\/li>\n<\/ul>\n\n\n\n
        \"\"<\/figure>\n\n\n\n

        4. Resultat Final: Prova de funcionament<\/h2>\n\n\n\n

        El xatbot \u00e9s capa\u00e7 de respondre sobre qui s\u00f3c i sobre els continguts del meu portafolis perqu\u00e8 el Crawler<\/strong> que vaig programar abans li d\u00f3na tot el context necessari.<\/p>\n\n\n\n

        Prompt utilitzat per al disseny:<\/strong><\/p>\n\n\n\n

        \n

        “Necessito que el xatbot tingui un disseny daurat i negre, que sigui elegant i professional. El bot\u00f3 ha de ser circular i estar a la part de baix a la dreta. Assegura’t que el JavaScript estigui net i que no m’oblidi de gestionar el par\u00e0metre de Ngrok per saltar l’av\u00eds de seguretat.”<\/em><\/p>\n<\/blockquote>\n\n\n\n

        <\/p>\n\n\n\n

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

        En aquesta fase final, he aconseguit que el meu xatbot no nom\u00e9s sigui un codi en una consola, sin\u00f3 una eina real integrada a la meva p\u00e0gina web que qualsevol usuari pot fer servir. 1. Arquitectura i Flux de Dades (El cam\u00ed del missatge) He creat un ecosistema on el FrontEnd (el que veu l’usuari) […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2202,"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\":539,\"id\":\"wordCount\",\"status\":\"average\",\"detailStatus\":\"shortAverage\",\"tooltip\":\"words count should be greater then 1500.\"},{\"id\":\"heading1\",\"name\":\"heading 1\",\"count\":1,\"status\":\"excellent\",\"detailStatus\":\"excellent\",\"tooltip\":\"good use of h1 tag.\"},{\"id\":\"heading2\",\"name\":\"heading 2\",\"count\":4,\"status\":\"excellent\",\"detailStatus\":\"excellent\",\"tooltip\":\"good use of h2 tags.\"},{\"id\":\"heading3\",\"name\":\"heading 3\",\"count\":0,\"status\":\"poor\",\"detailStatus\":\"missing\",\"tooltip\":\"web page should have h3 tags for better SEO\"},{\"id\":\"paragraphTags\",\"name\":\"paragraph tags\",\"count\":10,\"status\":\"excellent\",\"detailStatus\":\"excellent\",\"tooltip\":\"good use of paragraph tags.\"},{\"id\":\"boldAndStrongTags\",\"name\":\"bold and strong tags list\",\"count\":21,\"status\":\"excellent\",\"detailStatus\":\"excellent\",\"tooltip\":\"good use of bold and strong tags.\"},{\"name\":\"Avg. Stopword percentage\",\"count\":6,\"id\":\"averageStopwordPercentage\"},{\"name\":\"Avg. Words per sentence\",\"count\":19,\"id\":\"averageWordsPerSentence\"},{\"name\":\"Stopword count\",\"count\":32,\"id\":\"sentenceCount\"},{\"name\":\"Sentence count\",\"count\":28,\"id\":\"sentenceCount\"},{\"name\":\"Letter count\",\"count\":2519,\"id\":\"letterCount\"},{\"name\":\"Difficult word\",\"count\":100,\"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\":false,\"name\":\"Flesch - Kincaid reading ease\",\"score\":34.08,\"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\":\"Difficult (College)\"},{\"helpLink\":\"link\",\"isError\":true,\"name\":\"Gunning fog score\",\"score\":13.95,\"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\":\"College (Grade 13-16)\"},{\"helpLink\":\"link\",\"isError\":false,\"name\":\"Coleman liau index\",\"score\":9.87,\"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\":\"High School (Grade 9-12)\"},{\"helpLink\":\"link\",\"isError\":false,\"name\":\"Flesch - Kincaid grade level\",\"score\":12.56,\"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\":13.07,\"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\":\"College (Grade 13-16)\"},{\"helpLink\":\"link\",\"isError\":false,\"name\":\"Automated readability index\",\"score\":8.75,\"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\":\"High School (Grade 9-12)\"},{\"helpLink\":\"link\",\"isError\":false,\"name\":\"Dale chall readability score\",\"score\":7.38,\"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\":2.64,\"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\":\"3rd 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\":2,\"imageAnalyticsScore\":1},\"singlePostScore\":25},\"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_too_long\",\"name\":{\"label\":\"Meta description is too long\"},\"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\":\"critical_too_long_social_media_description\",\"name\":{\"label\":\"Description is Too long 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\":\"critical_too_long_social_media_twitter_description\",\"name\":{\"label\":\"X(Twitter) description is Too long 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_word_count_is_low\",\"name\":{\"label\":\"Word count is low in your content add more words.\"},\"type\":\"Recommended\"},{\"id\":\"critical_heading3_is_missing\",\"name\":{\"label\":\"Missing H3 tags, consider adding H3 for better SEO.\"},\"type\":\"Critical\"}],\"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\":\"4\"},{\"id\":\"ImagesHasTitle\",\"name\":\"Images has title\",\"value\":\"0\",\"outOff\":\"4\",\"status\":\"poor\",\"tooltip\":\"Missing image title attribute\"},{\"id\":\"ImageHasAltAttribute\",\"name\":\"Images has alt\",\"value\":\"0\",\"outOff\":\"4\",\"status\":\"poor\",\"tooltip\":\"Missing alt attribute\"},{\"id\":\"ImagesHasProperFileName\",\"name\":\"Images has proper filename format\",\"value\":\"4\",\"outOff\":\"4\",\"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\":\"4\",\"status\":\"poor\",\"tooltip\":\"Missing keyword in image filename\"}]}}","_dseop_selected_keywords":"","footnotes":""},"class_list":["post-2208","page","type-page","status-publish","hentry"],"kubio_ai_page_context":{"short_desc":"","purpose":"general"},"yoast_head":"\nComunicaci\u00f3 FrontEnd i BackEnd i integraci\u00f3 del Widget a la p\u00e0gina web - 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=2208\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comunicaci\u00f3 FrontEnd i BackEnd i integraci\u00f3 del Widget a la p\u00e0gina web - Adrian Jaimes\" \/>\n<meta property=\"og:description\" content=\"En aquesta fase final, he aconseguit que el meu xatbot no nom\u00e9s sigui un codi en una consola, sin\u00f3 una eina real integrada a la meva p\u00e0gina web que qualsevol usuari pot fer servir. 1. Arquitectura i Flux de Dades (El cam\u00ed del missatge) He creat un ecosistema on el FrontEnd (el que veu l’usuari) […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2208\" \/>\n<meta property=\"og:site_name\" content=\"Adrian Jaimes\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-21T07:41:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ajaimes.inscastellbisbal.net\/wp-content\/uploads\/2026\/04\/image-9.png\" \/>\n\t<meta property=\"og:image:width\" content=\"538\" \/>\n\t<meta property=\"og:image:height\" content=\"47\" \/>\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=\"4 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=2208\",\"url\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=2208\",\"name\":\"Comunicaci\u00f3 FrontEnd i BackEnd i integraci\u00f3 del Widget a la p\u00e0gina web - Adrian Jaimes\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=2208#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=2208#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image-9.png\",\"datePublished\":\"2026-02-09T12:41:48+00:00\",\"dateModified\":\"2026-04-21T07:41:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=2208#breadcrumb\"},\"inLanguage\":\"ca\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=2208\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=2208#primaryimage\",\"url\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image-9.png\",\"contentUrl\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image-9.png\",\"width\":538,\"height\":47},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=2208#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.4\",\"item\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=1496\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"2\ufe0f\u20e3 – \u200b\ud83e\udd16\u200b – El Xatbot\",\"item\":\"https:\\\/\\\/ajaimes.inscastellbisbal.net\\\/?page_id=2202\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Comunicaci\u00f3 FrontEnd i BackEnd i integraci\u00f3 del Widget a la p\u00e0gina web\"}]},{\"@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":"Comunicaci\u00f3 FrontEnd i BackEnd i integraci\u00f3 del Widget a la p\u00e0gina web - 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=2208","og_locale":"ca_ES","og_type":"article","og_title":"Comunicaci\u00f3 FrontEnd i BackEnd i integraci\u00f3 del Widget a la p\u00e0gina web - Adrian Jaimes","og_description":"En aquesta fase final, he aconseguit que el meu xatbot no nom\u00e9s sigui un codi en una consola, sin\u00f3 una eina real integrada a la meva p\u00e0gina web que qualsevol usuari pot fer servir. 1. Arquitectura i Flux de Dades (El cam\u00ed del missatge) He creat un ecosistema on el FrontEnd (el que veu l’usuari) […]","og_url":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2208","og_site_name":"Adrian Jaimes","article_modified_time":"2026-04-21T07:41:04+00:00","og_image":[{"width":538,"height":47,"url":"https:\/\/ajaimes.inscastellbisbal.net\/wp-content\/uploads\/2026\/04\/image-9.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Temps estimat de lectura":"4 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2208","url":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2208","name":"Comunicaci\u00f3 FrontEnd i BackEnd i integraci\u00f3 del Widget a la p\u00e0gina web - Adrian Jaimes","isPartOf":{"@id":"https:\/\/ajaimes.inscastellbisbal.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2208#primaryimage"},"image":{"@id":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2208#primaryimage"},"thumbnailUrl":"https:\/\/ajaimes.inscastellbisbal.net\/wp-content\/uploads\/2026\/04\/image-9.png","datePublished":"2026-02-09T12:41:48+00:00","dateModified":"2026-04-21T07:41:04+00:00","breadcrumb":{"@id":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2208#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2208"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2208#primaryimage","url":"https:\/\/ajaimes.inscastellbisbal.net\/wp-content\/uploads\/2026\/04\/image-9.png","contentUrl":"https:\/\/ajaimes.inscastellbisbal.net\/wp-content\/uploads\/2026\/04\/image-9.png","width":538,"height":47},{"@type":"BreadcrumbList","@id":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2208#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.4","item":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=1496"},{"@type":"ListItem","position":4,"name":"2\ufe0f\u20e3 – \u200b\ud83e\udd16\u200b – El Xatbot","item":"https:\/\/ajaimes.inscastellbisbal.net\/?page_id=2202"},{"@type":"ListItem","position":5,"name":"Comunicaci\u00f3 FrontEnd i BackEnd i integraci\u00f3 del Widget a la p\u00e0gina web"}]},{"@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\/2208","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=2208"}],"version-history":[{"count":3,"href":"https:\/\/ajaimes.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/2208\/revisions"}],"predecessor-version":[{"id":3041,"href":"https:\/\/ajaimes.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/2208\/revisions\/3041"}],"up":[{"embeddable":true,"href":"https:\/\/ajaimes.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/2202"}],"wp:attachment":[{"href":"https:\/\/ajaimes.inscastellbisbal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}