{"id":1785,"date":"2026-02-25T11:46:05","date_gmt":"2026-02-25T11:46:05","guid":{"rendered":"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785"},"modified":"2026-05-07T09:14:07","modified_gmt":"2026-05-07T09:14:07","slug":"comunicacio-frontend-i-backend-i-integracio-del-widget-a-la-pagina-web","status":"publish","type":"page","link":"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785","title":{"rendered":"Comunicaci\u00f3 FrontEnd i BackEnd i integraci\u00f3 del Widget a la p\u00e0gina web"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong>Resum del projecte i eines<\/strong><\/h3>\n\n\n\n<p><strong>He creat un sistema perqu\u00e8 el meu xat aprengui de la informaci\u00f3 real del meu web. M\u2019he assegurat que sigui f\u00e0cil d\u2019utilitzar, que no s\u2019espatlli si hi ha un error de connexi\u00f3 i, sobretot, que sigui segur: les claus privades estan ben guardades on ning\u00fa les pot veure.<\/strong><\/p>\n\n\n\n<p><strong>Aix\u00ed \u00e9s com s\u2019organitza tot:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>La finestreta de xat: \u00c9s el que veu l\u2019usuari. Est\u00e0 pensada perqu\u00e8 qualsevol pugui preguntar el que necessiti al moment.<\/strong><\/li>\n\n\n\n<li><strong>El motor central: \u00c9s el cervell que rep els missatges, els gestiona i els passa a la intel\u00b7lig\u00e8ncia artificial sense riscos.<\/strong><\/li>\n\n\n\n<li><strong>L\u2019arxiu de dades: Tota la informaci\u00f3 del meu web est\u00e0 guardada en un fitxer molt lleuger. Aix\u00f2 permet que el sistema trobi la resposta correcta en un tres i no res.<\/strong><\/li>\n\n\n\n<li><strong>El t\u00fanel d\u2019internet: Com que no pago un allotjament web car, faig servir una eina que connecta el meu ordinador amb la p\u00e0gina web de forma gratu\u00efta.<\/strong><\/li>\n\n\n\n<li><strong>La intel\u00b7lig\u00e8ncia artificial: \u00c9s qui redacta les respostes. Ent\u00e9n perfectament com parlem i fa servir les dades que jo li dono per no inventar-se res.<\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Ngrok<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"612\" height=\"90\" src=\"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image.png\" alt=\"\" class=\"wp-image-2183\" srcset=\"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image.png 612w, https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image-300x44.png 300w, https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image-496x73.png 496w\" sizes=\"(max-width: 612px) 100vw, 612px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Flask<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"598\" height=\"60\" src=\"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image-1.png\" alt=\"\" class=\"wp-image-2184\" srcset=\"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image-1.png 598w, https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image-1-300x30.png 300w, https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image-1-496x50.png 496w\" sizes=\"(max-width: 598px) 100vw, 598px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Com hem afegit el xat al web<\/strong><\/h3>\n\n\n\n<p><strong>Perqu\u00e8 el xat aparegui a WordPress, he utilitzat una eina anomenada WPCode. Aquesta utilitat serveix per afegir trossos de codi personalitzats al web de manera facil<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"320\" height=\"387\" src=\"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image-2.png\" alt=\"\" class=\"wp-image-2185\" srcset=\"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image-2.png 320w, https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image-2-248x300.png 248w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Activaci\u00f3 final del xat<\/h3>\n\n\n\n<p>Dins de l\u2019apartat del Peu de p\u00e0gina, simplement hi posem el codi que la pr\u00f2pia intel\u00b7lig\u00e8ncia artificial ens ha ajudat a crear (que inclou el disseny i el funcionament del xat).<\/p>\n\n\n\n<p>Un cop enganxat, nom\u00e9s cal pr\u00e9mer el bot\u00f3 de \u201cGuardar canvis\u201d. En tornar a carregar el nostre web, el xat ja apareixer\u00e0 a la cantonada a punt per fer-se servir.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/ielyahmoudi.inscastellbisbal.net\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-20-at-09-49-33-Capcalera-i-peu-de-pagina-\u2039-\u2014-WordPress-1024x216.png\" alt=\"\" class=\"wp-image-3125\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Resum del projecte i eines He creat un sistema perqu\u00e8 el meu xat aprengui de la informaci\u00f3 real del meu web. M\u2019he assegurat que sigui &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1760,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1785","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Comunicaci\u00f3 FrontEnd i BackEnd i integraci\u00f3 del Widget a la p\u00e0gina web - Ivan Rodriguez Jimenez<\/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:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785\" \/>\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 - Ivan Rodriguez Jimenez\" \/>\n<meta property=\"og:description\" content=\"Resum del projecte i eines He creat un sistema perqu\u00e8 el meu xat aprengui de la informaci\u00f3 real del meu web. M\u2019he assegurat que sigui &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785\" \/>\n<meta property=\"og:site_name\" content=\"Ivan Rodriguez Jimenez\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-07T09:14:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"612\" \/>\n\t<meta property=\"og:image:height\" content=\"90\" \/>\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=\"3 minuts\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785\",\"url\":\"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785\",\"name\":\"Comunicaci\u00f3 FrontEnd i BackEnd i integraci\u00f3 del Widget a la p\u00e0gina web - Ivan Rodriguez Jimenez\",\"isPartOf\":{\"@id\":\"https:\/\/irodriguez.inscastellbisbal.net\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785#primaryimage\"},\"image\":{\"@id\":\"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785#primaryimage\"},\"thumbnailUrl\":\"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image.png\",\"datePublished\":\"2026-02-25T11:46:05+00:00\",\"dateModified\":\"2026-05-07T09:14:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785#breadcrumb\"},\"inLanguage\":\"ca\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785#primaryimage\",\"url\":\"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image.png\",\"contentUrl\":\"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image.png\",\"width\":612,\"height\":90},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inici\",\"item\":\"https:\/\/irodriguez.inscastellbisbal.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SMX1\",\"item\":\"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1205\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Repte 1.4\",\"item\":\"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1209\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"El Xatbot\",\"item\":\"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1760\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Comunicaci\u00f3 FrontEnd i BackEnd i integraci\u00f3 del Widget a la p\u00e0gina web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/irodriguez.inscastellbisbal.net\/#website\",\"url\":\"https:\/\/irodriguez.inscastellbisbal.net\/\",\"name\":\"Ivan Rodriguez Jimenez\",\"description\":\"Hola, em dic Iv\u00e1n, tinc 16 anys i actualment estic cursant el meu primer any de cicle formatiu en inform\u00e0tica.  En aquest espai anir\u00e9 compartint el que aprenc: des de conceptes b\u00e0sics de maquinari i programari, fins a programaci\u00f3, xarxes i projectes personals. El meu objectiu \u00e9s anar creixent pas a pas en aquest m\u00f3n de la tecnologia i, al hora, deixar aqu\u00ed un registre del meu progr\u00e9s.  Espero que trobis interessant el contingut i que aquest rac\u00f3 sigui \u00fatil tant per a mi com per a qualsevol que tamb\u00e9 estigui comen\u00e7ant al cam\u00ed de la inform\u00e0tica.\",\"publisher\":{\"@id\":\"https:\/\/irodriguez.inscastellbisbal.net\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/irodriguez.inscastellbisbal.net\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ca\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/irodriguez.inscastellbisbal.net\/#organization\",\"name\":\"Ivan Rodriguez Jimenez\",\"url\":\"https:\/\/irodriguez.inscastellbisbal.net\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\/\/irodriguez.inscastellbisbal.net\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2025\/09\/cropped-cropped-ChatGPT-Image-Sep-19-2025-08_40_26-AM.jpg\",\"contentUrl\":\"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2025\/09\/cropped-cropped-ChatGPT-Image-Sep-19-2025-08_40_26-AM.jpg\",\"width\":1536,\"height\":1024,\"caption\":\"Ivan Rodriguez Jimenez\"},\"image\":{\"@id\":\"https:\/\/irodriguez.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 - Ivan Rodriguez Jimenez","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:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785","og_locale":"ca_ES","og_type":"article","og_title":"Comunicaci\u00f3 FrontEnd i BackEnd i integraci\u00f3 del Widget a la p\u00e0gina web - Ivan Rodriguez Jimenez","og_description":"Resum del projecte i eines He creat un sistema perqu\u00e8 el meu xat aprengui de la informaci\u00f3 real del meu web. M\u2019he assegurat que sigui &hellip;","og_url":"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785","og_site_name":"Ivan Rodriguez Jimenez","article_modified_time":"2026-05-07T09:14:07+00:00","og_image":[{"width":612,"height":90,"url":"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Temps estimat de lectura":"3 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785","url":"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785","name":"Comunicaci\u00f3 FrontEnd i BackEnd i integraci\u00f3 del Widget a la p\u00e0gina web - Ivan Rodriguez Jimenez","isPartOf":{"@id":"https:\/\/irodriguez.inscastellbisbal.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785#primaryimage"},"image":{"@id":"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785#primaryimage"},"thumbnailUrl":"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image.png","datePublished":"2026-02-25T11:46:05+00:00","dateModified":"2026-05-07T09:14:07+00:00","breadcrumb":{"@id":"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785#primaryimage","url":"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image.png","contentUrl":"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2026\/05\/image.png","width":612,"height":90},{"@type":"BreadcrumbList","@id":"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1785#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inici","item":"https:\/\/irodriguez.inscastellbisbal.net\/"},{"@type":"ListItem","position":2,"name":"SMX1","item":"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1205"},{"@type":"ListItem","position":3,"name":"Repte 1.4","item":"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1209"},{"@type":"ListItem","position":4,"name":"El Xatbot","item":"https:\/\/irodriguez.inscastellbisbal.net\/?page_id=1760"},{"@type":"ListItem","position":5,"name":"Comunicaci\u00f3 FrontEnd i BackEnd i integraci\u00f3 del Widget a la p\u00e0gina web"}]},{"@type":"WebSite","@id":"https:\/\/irodriguez.inscastellbisbal.net\/#website","url":"https:\/\/irodriguez.inscastellbisbal.net\/","name":"Ivan Rodriguez Jimenez","description":"Hola, em dic Iv\u00e1n, tinc 16 anys i actualment estic cursant el meu primer any de cicle formatiu en inform\u00e0tica.  En aquest espai anir\u00e9 compartint el que aprenc: des de conceptes b\u00e0sics de maquinari i programari, fins a programaci\u00f3, xarxes i projectes personals. El meu objectiu \u00e9s anar creixent pas a pas en aquest m\u00f3n de la tecnologia i, al hora, deixar aqu\u00ed un registre del meu progr\u00e9s.  Espero que trobis interessant el contingut i que aquest rac\u00f3 sigui \u00fatil tant per a mi com per a qualsevol que tamb\u00e9 estigui comen\u00e7ant al cam\u00ed de la inform\u00e0tica.","publisher":{"@id":"https:\/\/irodriguez.inscastellbisbal.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/irodriguez.inscastellbisbal.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"},{"@type":"Organization","@id":"https:\/\/irodriguez.inscastellbisbal.net\/#organization","name":"Ivan Rodriguez Jimenez","url":"https:\/\/irodriguez.inscastellbisbal.net\/","logo":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/irodriguez.inscastellbisbal.net\/#\/schema\/logo\/image\/","url":"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2025\/09\/cropped-cropped-ChatGPT-Image-Sep-19-2025-08_40_26-AM.jpg","contentUrl":"https:\/\/irodriguez.inscastellbisbal.net\/wp-content\/uploads\/2025\/09\/cropped-cropped-ChatGPT-Image-Sep-19-2025-08_40_26-AM.jpg","width":1536,"height":1024,"caption":"Ivan Rodriguez Jimenez"},"image":{"@id":"https:\/\/irodriguez.inscastellbisbal.net\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/irodriguez.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/1785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irodriguez.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/irodriguez.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/irodriguez.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/irodriguez.inscastellbisbal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1785"}],"version-history":[{"count":2,"href":"https:\/\/irodriguez.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/1785\/revisions"}],"predecessor-version":[{"id":2187,"href":"https:\/\/irodriguez.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/1785\/revisions\/2187"}],"up":[{"embeddable":true,"href":"https:\/\/irodriguez.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/1760"}],"wp:attachment":[{"href":"https:\/\/irodriguez.inscastellbisbal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}