{"id":6311,"date":"2025-03-20T10:22:47","date_gmt":"2025-03-20T10:22:47","guid":{"rendered":"https:\/\/aborrego.inscastellbisbal.net\/?p=6311"},"modified":"2025-03-25T12:25:03","modified_gmt":"2025-03-25T12:25:03","slug":"crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok","status":"publish","type":"post","link":"https:\/\/aborrego.inscastellbisbal.net\/en\/2025\/03\/20\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\/","title":{"rendered":"Crear un frontend tipus widget senzill amb HTML\/JavaScript i el connecta amb el backend amb ngrok"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\n\t\n<\/svg>\t\t<\/div>\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Crear un frontend tipus widget senzill amb HTML\/JavaScript i el connecta amb el backend amb ngrok<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tTornar al repte 1.6<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

He creat un widget frontend senzill utilitzant HTML i JavaScript, i ho he connectat a un servidor backend en Flask mitjan\u00e7ant Ngrok. Per a aix\u00f2, primer vaig configurar Ngrok amb un authtoken per a poder exposar el servidor local a internet i fer que el frontend pogu\u00e9s comunicar-se amb el backend de manera remota. Despr\u00e9s d’integrar el giny en la web, vaig solucionar alguns problemes comuns, com la configuraci\u00f3 incorrecta de la URL i el maneig de la resposta del servidor, assegurant-me que el frontend reb\u00e9s i mostr\u00e9s correctament les dades des del backend.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Instal\u00b7laci\u00f3 de depend\u00e8ncies <\/strong><\/p>

Primer, executa aquesta cel\u00b7la per instal\u00b7lar totes les depend\u00e8ncies necess\u00e0ries per al projecte. Aix\u00f2 inclou les llibreries de Flask i altres eines que necessites per configurar el servidor.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t
!pip install google-genai # Alg1: Instal·la la llibreria google-genai per interactuar amb el model GenAI\n!pip install beautifulsoup4 requests # Alg2: Instal·la BeautifulSoup per web scraping i requests per fer peticions HTTP\n!pip install flask flask-ngrok # Alg3: Instal·la Flask per crear el servidor web i Flask-ngrok per exposar el servidor\n!pip install flask pyngrok # Alg4: Instal·la Flask per crear el servidor i pyngrok per crear túnels amb Ngrok\n!pip install flask-cors # Alg5: Instal·la Flask-CORS per gestionar CORS (peticions des de diferents orígens)\n<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Iniciar el servidor Flask amb Ngrok<\/strong><\/p>
A continuaci\u00f3, executa la cel\u00b7la que inicia el servidor Flask. Per\u00f2, vaig tenir un error relacionat amb Ngrok que deia que necessitava autenticaci\u00f3 amb un token, ja que estava utilitzant Ngrok sense un compte verificat.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
app = Flask(__name__) # Alg38: Crea una instància de l'aplicació Flask\nCORS(app)  # Alg39: Activa CORS per permetre peticions des de diferents orígens\n\nngrok.set_auth_token("2uTpEJU6jYqOIOXrL4NDYFpSu8R_4stuSzXJ3Bv64N5rr5auN") # Alg40: Configura el token d'autenticació per a Ngrok\n\n\n# Iniciar Ngrok i exposar el servidor\npublic_url = ngrok.connect(5000) # Alg41: Exposa l'aplicació Flask a través d'Ngrok a la porta 5000\nprint("\ud83c\udf0d URL pública del backend:", public_url) # Alg42: Mostra la URL pública per accedir al servidor\n\n@app.route("\/chat", methods=["POST"]) # Alg43: Defineix la ruta '\/chat' per a les peticions POST\ndef chat_route():# Alg44: Funció que gestiona la petició del xat\n    data = request.get_json() # Alg45: Obté les dades JSON enviades pel frontend\n    message = data.get("message", "") # Alg46: Extreu el missatge del JSON\n\n    try:\n        response = chat.send_message(message) # Alg47: Envia el missatge al model GenAI\n        return jsonify({"response": response.text.strip()}) # Alg48: Retorna la resposta generada pel model\n    except Exception as e: # Alg49: Captura errors durant la comunicació amb GenAI\n        print(f"\u26a0\ufe0f Error en la comunicació amb Gemini: {e}")  # Alg50: Mostra el missatge d'error\n        return jsonify({"response": "S'ha produït un error. Torna-ho a intentar més tard."}) # Alg51: Resposta d'error al frontend\n\nif __name__ == "__main__": # Alg52: Condició per a executar el servidor si el script es llanci directament\n    print("\ud83d\udd25 Servidor en funcionament! Usa aquesta URL en el teu frontend:") # Alg53: Mostra un missatge indicant que el servidor està actiu\n    app.run(port=5000) # Alg54: Inicia el servidor Flask a la porta 5000<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Vaig tenir un error de Ngrok. Per resoldre aix\u00f2, necessitaba obtenir un Ngrok authtoken<\/strong> i configurar-lo a Google Colab:<\/p>
1\ufe0fCrea un compte gratu\u00eft a Ngrok<\/strong>
Visita https:\/\/dashboard.ngrok.com\/signup<\/a><\/p>
2\ufe0fObtenir el teu Ngrok authtoken<\/strong>
Un cop creat el compte, visita aquesta p\u00e0gina<\/a> per obtenir el teu authtoken. Copia\u2019l.<\/p>
3\ufe0fConfigurar el teu Ngrok authtoken a Google Colab<\/strong>
Un cop obtingut el teu authtoken, executa la seg\u00fcent cel\u00b7la a Google Colab amb el teu authtoken per configurar Ngrok correctament.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Un cop configurat, podr\u00e0s tornar a executar la cel\u00b7la per obrir Ngrok i obtenir l\u2019URL p\u00fablica<\/strong> per accedir al servidor. Cada vegada que executis la cel\u00b7la, l\u2019URL generat canviar\u00e0, aix\u00ed que recorda actualitzar-lo al teu WordPres<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Ara conectarem el fontend amb el backend.<\/strong><\/h4>
Ara que\u00a0 el servidor Flask est\u00e1 funcionant, em ‘ integrar el frontend<\/strong> amb el backend<\/strong>. Aqu\u00ed \u00e9s on vaig trobar un petit error:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
1\ufe0f Obtenir el frontend<\/strong>
Demana a ChatGPT que et proporcioni el codi del frontend (HTML\/JavaScript) per crear el widget que vols integrar al teu lloc web.<\/p>
2\ufe0fAfegir el codi HTML al teu WordPress<\/strong>
Un cop tinguis el codi del widget, copia\u2019l i afegeix-lo a la teva p\u00e0gina de WordPress.\u00a0 Si fas click aqu\u00ed trobar\u00e1s una p\u00e0gina on explico com insertar un widget html i com utilitzar-ho.<\/p>
3\ufe0f Com solucionar l’error de connexi\u00f3<\/strong>
En el meu cas, vaig col\u00b7locar el codi del widget, per\u00f2 no funcionava perqu\u00e8 em donava un error de connexi\u00f3. La ra\u00f3 era que la URL p\u00fablica generada per Ngrok era incorrecta. Havia de fer una petici\u00f3 a la ruta correcta del backend, que \u00e9s \/chat<\/code>, en lloc de simplement utilitzar l’URL p\u00fablica de Ngrok.<\/p>
4\ufe0fCorregir el problema de la resposta<\/strong>
A m\u00e9s, vaig adonar-me que l’objecte de resposta no era el mateix que s\u2019esperava. En el backend, estava retornant l\u2019objecte de la seg\u00fcent manera:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
return jsonify ({response:response})<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Per\u00f2 al frontend, estava intentant accedir a data.message<\/code>, quan hauria d’accedir a data.response<\/code>. Aix\u00ed que vaig modificar el codi del frontend de la seg\u00fcent manera:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Abans:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
document.getElementById('response').innerText = 'Resposta del servidor:' + data.message<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Despr\u00e9s:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
document.getElementById('response').innerText = 'Resposta del servidor:' + data.response<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Un cop modificat, torna a executar la cel\u00b7la on tens el backend i obtindr\u00e0s un nou enlla\u00e7 d\u2019Ngrok. Recorda afegir \/chat<\/code> al final d\u2019aquest enlla\u00e7. Finalment, el widget haur\u00e0 de funcionar correctament.<\/p>
Ja tenim el nostre xatbot b\u00e0sic configurat al nostre WordPress.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"
Crear un frontend tipus widget senzill amb HTML\/JavaScript i el connecta amb el backend amb ngrok Tornar al repte 1.6 He creat un widget frontend senzill utilitzant HTML i JavaScript, i ho he connectat a un servidor backend en Flask mitjan\u00e7ant Ngrok. Per a aix\u00f2, primer vaig configurar Ngrok amb un authtoken per a poder exposar el servidor local a internet i fer que el frontend pogu\u00e9s comunicar-se amb el backend de manera remota. Despr\u00e9s d’integrar el giny en la web, vaig solucionar alguns problemes comuns, com la configuraci\u00f3 incorrecta de la URL i el maneig de la resposta del servidor, assegurant-me que el frontend reb\u00e9s i mostr\u00e9s correctament les dades des del backend. Instal\u00b7laci\u00f3 de depend\u00e8ncies Primer, executa aquesta cel\u00b7la per instal\u00b7lar totes les depend\u00e8ncies necess\u00e0ries per al projecte. Aix\u00f2 inclou les llibreries de Flask i altres eines que necessites per configurar el servidor. !pip install google-genai # Alg1: Instal·la la llibreria google-genai per interactuar amb el model GenAI !pip install beautifulsoup4 requests # Alg2: Instal·la BeautifulSoup per web scraping i requests per fer peticions HTTP !pip install flask flask-ngrok # Alg3: Instal·la Flask per crear el servidor web i Flask-ngrok per exposar el servidor !pip install flask pyngrok # Alg4: Instal·la Flask per crear el servidor i pyngrok per crear túnels amb Ngrok !pip install flask-cors # Alg5: Instal·la Flask-CORS per gestionar CORS (peticions des de diferents orígens) Iniciar el servidor Flask amb Ngrok A continuaci\u00f3, executa la cel\u00b7la que inicia el servidor Flask. Per\u00f2, vaig tenir un error relacionat amb Ngrok que deia que necessitava autenticaci\u00f3 amb un token, ja que estava utilitzant Ngrok sense un compte verificat. app = Flask(__name__) # Alg38: Crea una instància de l'aplicació Flask CORS(app) # Alg39: Activa CORS per permetre peticions des de diferents orígens ngrok.set_auth_token("2uTpEJU6jYqOIOXrL4NDYFpSu8R_4stuSzXJ3Bv64N5rr5auN") # Alg40: Configura el token d'autenticació per a Ngrok # Iniciar Ngrok i exposar el servidor public_url = ngrok.connect(5000) # Alg41: Exposa l'aplicació Flask a través d'Ngrok a la porta 5000 print("\ud83c\udf0d URL pública del backend:", public_url) # Alg42: Mostra la URL pública per accedir al servidor @app.route("\/chat", methods=["POST"]) # Alg43: Defineix la ruta '\/chat' per a les peticions POST def chat_route():# Alg44: Funció que gestiona la petició del xat data = request.get_json() # Alg45: Obté les dades JSON enviades pel frontend message = data.get("message", "") # Alg46: Extreu el missatge del JSON try: response = chat.send_message(message) # Alg47: Envia el missatge al model GenAI return jsonify({"response": response.text.strip()}) # Alg48: Retorna la resposta generada pel model except Exception as e: # Alg49: Captura errors durant la comunicació amb GenAI print(f"\u26a0\ufe0f Error en la comunicació amb Gemini: {e}") # Alg50: Mostra el missatge d'error return jsonify({"response": "S'ha produït un error. Torna-ho a intentar més tard."}) # Alg51: Resposta d'error al frontend if __name__ == "__main__": # Alg52: Condició per a executar el servidor si el script es llanci directament print("\ud83d\udd25 Servidor en funcionament! Usa aquesta URL en el teu frontend:") # Alg53: Mostra un missatge indicant que el servidor està actiu app.run(port=5000) # Alg54: Inicia el servidor Flask a la porta 5000 Vaig tenir un error de Ngrok. Per resoldre aix\u00f2, necessitaba obtenir un Ngrok authtoken i configurar-lo a Google Colab: 1\ufe0fCrea un compte gratu\u00eft a NgrokVisita https:\/\/dashboard.ngrok.com\/signup 2\ufe0fObtenir el teu Ngrok authtokenUn cop creat el compte, visita aquesta p\u00e0gina per obtenir el teu authtoken. Copia\u2019l. 3\ufe0fConfigurar el teu Ngrok authtoken a Google ColabUn cop obtingut el teu authtoken, executa la seg\u00fcent cel\u00b7la a Google Colab amb el teu authtoken per configurar Ngrok correctament. Un cop configurat, podr\u00e0s tornar a executar la cel\u00b7la per obrir Ngrok i obtenir l\u2019URL p\u00fablica per accedir al servidor. Cada vegada que executis la cel\u00b7la, l\u2019URL generat canviar\u00e0, aix\u00ed que recorda actualitzar-lo al teu WordPres Ara conectarem el fontend amb el backend. Ara que\u00a0 el servidor Flask est\u00e1 funcionant, em ‘ integrar el frontend amb el backend. Aqu\u00ed \u00e9s on vaig trobar un petit error: 1\ufe0f Obtenir el frontendDemana a ChatGPT que et proporcioni el codi del frontend (HTML\/JavaScript) per crear el widget que vols integrar al teu lloc web. 2\ufe0fAfegir el codi HTML al teu WordPressUn cop tinguis el codi del widget, copia\u2019l i afegeix-lo a la teva p\u00e0gina de WordPress.\u00a0 Si fas click aqu\u00ed trobar\u00e1s una p\u00e0gina on explico com insertar un widget html i com utilitzar-ho. 3\ufe0f Com solucionar l’error de connexi\u00f3En el meu cas, vaig col\u00b7locar el codi del widget, per\u00f2 no funcionava perqu\u00e8 em donava un error de connexi\u00f3. La ra\u00f3 era que la URL p\u00fablica generada per Ngrok era incorrecta. Havia de fer una petici\u00f3 a la ruta correcta del backend, que \u00e9s \/chat, en lloc de simplement utilitzar l’URL p\u00fablica de Ngrok. 4\ufe0fCorregir el problema de la respostaA m\u00e9s, vaig adonar-me que l’objecte de resposta no era el mateix que s\u2019esperava. En el backend, estava retornant l\u2019objecte de la seg\u00fcent manera: return jsonify ({response:response}) Per\u00f2 al frontend, estava intentant accedir a data.message, quan hauria d’accedir a data.response. Aix\u00ed que vaig modificar el codi del frontend de la seg\u00fcent manera: Abans: document.getElementById('response').innerText = 'Resposta del servidor:' + data.message Despr\u00e9s: document.getElementById('response').innerText = 'Resposta del servidor:' + data.response Un cop modificat, torna a executar la cel\u00b7la on tens el backend i obtindr\u00e0s un nou enlla\u00e7 d\u2019Ngrok. Recorda afegir \/chat al final d\u2019aquest enlla\u00e7. Finalment, el widget haur\u00e0 de funcionar correctament. Ja tenim el nostre xatbot b\u00e0sic configurat al nostre WordPress.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[95,84],"tags":[],"class_list":["post-6311","post","type-post","status-publish","format-standard","hentry","category-repte-1-6","category-disseny-i-aplicacio-de-la-ia"],"yoast_head":"\nCrear un frontend tipus widget senzill amb HTML\/JavaScript i el connecta amb el backend amb ngrok - Ana Borrego Toledo<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crear un frontend tipus widget senzill amb HTML\/JavaScript i el connecta amb el backend amb ngrok - Ana Borrego Toledo\" \/>\n<meta property=\"og:description\" content=\"Crear un frontend tipus widget senzill amb HTML\/JavaScript i el connecta amb el backend amb ngrok Tornar al repte 1.6 He creat un widget frontend senzill utilitzant HTML i JavaScript, i ho he connectat a un servidor backend en Flask mitjan\u00e7ant Ngrok. Per a aix\u00f2, primer vaig configurar Ngrok amb un authtoken per a poder exposar el servidor local a internet i fer que el frontend pogu\u00e9s comunicar-se amb el backend de manera remota. Despr\u00e9s d’integrar el giny en la web, vaig solucionar alguns problemes comuns, com la configuraci\u00f3 incorrecta de la URL i el maneig de la resposta del servidor, assegurant-me que el frontend reb\u00e9s i mostr\u00e9s correctament les dades des del backend. Instal\u00b7laci\u00f3 de depend\u00e8ncies Primer, executa aquesta cel\u00b7la per instal\u00b7lar totes les depend\u00e8ncies necess\u00e0ries per al projecte. Aix\u00f2 inclou les llibreries de Flask i altres eines que necessites per configurar el servidor. !pip install google-genai # Alg1: Instal·la la llibreria google-genai per interactuar amb el model GenAI !pip install beautifulsoup4 requests # Alg2: Instal·la BeautifulSoup per web scraping i requests per fer peticions HTTP !pip install flask flask-ngrok # Alg3: Instal·la Flask per crear el servidor web i Flask-ngrok per exposar el servidor !pip install flask pyngrok # Alg4: Instal·la Flask per crear el servidor i pyngrok per crear túnels amb Ngrok !pip install flask-cors # Alg5: Instal·la Flask-CORS per gestionar CORS (peticions des de diferents orígens) Iniciar el servidor Flask amb Ngrok A continuaci\u00f3, executa la cel\u00b7la que inicia el servidor Flask. Per\u00f2, vaig tenir un error relacionat amb Ngrok que deia que necessitava autenticaci\u00f3 amb un token, ja que estava utilitzant Ngrok sense un compte verificat. app = Flask(__name__) # Alg38: Crea una instància de l'aplicació Flask CORS(app) # Alg39: Activa CORS per permetre peticions des de diferents orígens ngrok.set_auth_token("2uTpEJU6jYqOIOXrL4NDYFpSu8R_4stuSzXJ3Bv64N5rr5auN") # Alg40: Configura el token d'autenticació per a Ngrok # Iniciar Ngrok i exposar el servidor public_url = ngrok.connect(5000) # Alg41: Exposa l'aplicació Flask a través d'Ngrok a la porta 5000 print("\ud83c\udf0d URL pública del backend:", public_url) # Alg42: Mostra la URL pública per accedir al servidor @app.route("\/chat", methods=["POST"]) # Alg43: Defineix la ruta '\/chat' per a les peticions POST def chat_route():# Alg44: Funció que gestiona la petició del xat data = request.get_json() # Alg45: Obté les dades JSON enviades pel frontend message = data.get("message", "") # Alg46: Extreu el missatge del JSON try: response = chat.send_message(message) # Alg47: Envia el missatge al model GenAI return jsonify({"response": response.text.strip()}) # Alg48: Retorna la resposta generada pel model except Exception as e: # Alg49: Captura errors durant la comunicació amb GenAI print(f"\u26a0\ufe0f Error en la comunicació amb Gemini: {e}") # Alg50: Mostra el missatge d'error return jsonify({"response": "S'ha produït un error. Torna-ho a intentar més tard."}) # Alg51: Resposta d'error al frontend if __name__ == "__main__": # Alg52: Condició per a executar el servidor si el script es llanci directament print("\ud83d\udd25 Servidor en funcionament! Usa aquesta URL en el teu frontend:") # Alg53: Mostra un missatge indicant que el servidor està actiu app.run(port=5000) # Alg54: Inicia el servidor Flask a la porta 5000 Vaig tenir un error de Ngrok. Per resoldre aix\u00f2, necessitaba obtenir un Ngrok authtoken i configurar-lo a Google Colab: 1\ufe0fCrea un compte gratu\u00eft a NgrokVisita https:\/\/dashboard.ngrok.com\/signup 2\ufe0fObtenir el teu Ngrok authtokenUn cop creat el compte, visita aquesta p\u00e0gina per obtenir el teu authtoken. Copia\u2019l. 3\ufe0fConfigurar el teu Ngrok authtoken a Google ColabUn cop obtingut el teu authtoken, executa la seg\u00fcent cel\u00b7la a Google Colab amb el teu authtoken per configurar Ngrok correctament. Un cop configurat, podr\u00e0s tornar a executar la cel\u00b7la per obrir Ngrok i obtenir l\u2019URL p\u00fablica per accedir al servidor. Cada vegada que executis la cel\u00b7la, l\u2019URL generat canviar\u00e0, aix\u00ed que recorda actualitzar-lo al teu WordPres Ara conectarem el fontend amb el backend. Ara que\u00a0 el servidor Flask est\u00e1 funcionant, em ‘ integrar el frontend amb el backend. Aqu\u00ed \u00e9s on vaig trobar un petit error: 1\ufe0f Obtenir el frontendDemana a ChatGPT que et proporcioni el codi del frontend (HTML\/JavaScript) per crear el widget que vols integrar al teu lloc web. 2\ufe0fAfegir el codi HTML al teu WordPressUn cop tinguis el codi del widget, copia\u2019l i afegeix-lo a la teva p\u00e0gina de WordPress.\u00a0 Si fas click aqu\u00ed trobar\u00e1s una p\u00e0gina on explico com insertar un widget html i com utilitzar-ho. 3\ufe0f Com solucionar l’error de connexi\u00f3En el meu cas, vaig col\u00b7locar el codi del widget, per\u00f2 no funcionava perqu\u00e8 em donava un error de connexi\u00f3. La ra\u00f3 era que la URL p\u00fablica generada per Ngrok era incorrecta. Havia de fer una petici\u00f3 a la ruta correcta del backend, que \u00e9s \/chat, en lloc de simplement utilitzar l’URL p\u00fablica de Ngrok. 4\ufe0fCorregir el problema de la respostaA m\u00e9s, vaig adonar-me que l’objecte de resposta no era el mateix que s\u2019esperava. En el backend, estava retornant l\u2019objecte de la seg\u00fcent manera: return jsonify ({response:response}) Per\u00f2 al frontend, estava intentant accedir a data.message, quan hauria d’accedir a data.response. Aix\u00ed que vaig modificar el codi del frontend de la seg\u00fcent manera: Abans: document.getElementById('response').innerText = 'Resposta del servidor:' + data.message Despr\u00e9s: document.getElementById('response').innerText = 'Resposta del servidor:' + data.response Un cop modificat, torna a executar la cel\u00b7la on tens el backend i obtindr\u00e0s un nou enlla\u00e7 d\u2019Ngrok. Recorda afegir \/chat al final d\u2019aquest enlla\u00e7. Finalment, el widget haur\u00e0 de funcionar correctament. Ja tenim el nostre xatbot b\u00e0sic configurat al nostre WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/aborrego.inscastellbisbal.net\/en\/2025\/03\/20\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\/\" \/>\n<meta property=\"og:site_name\" content=\"Ana Borrego Toledo\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-20T10:22:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-25T12:25:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/aborrego.inscastellbisbal.net\/wp-content\/uploads\/2025\/03\/Selection_309.png\" \/>\n\t<meta property=\"og:image:width\" content=\"990\" \/>\n\t<meta property=\"og:image:height\" content=\"84\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"aborrego\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"aborrego\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/2025\\\/03\\\/20\\\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/2025\\\/03\\\/20\\\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\\\/\"},\"author\":{\"name\":\"aborrego\",\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/#\\\/schema\\\/person\\\/596b5d3dc4735c43cfaafed47741b9d1\"},\"headline\":\"Crear un frontend tipus widget senzill amb HTML\\\/JavaScript i el connecta amb el backend amb ngrok\",\"datePublished\":\"2025-03-20T10:22:47+00:00\",\"dateModified\":\"2025-03-25T12:25:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/2025\\\/03\\\/20\\\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\\\/\"},\"wordCount\":614,\"publisher\":{\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/2025\\\/03\\\/20\\\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Selection_309.png\",\"articleSection\":[\"Repte 1.6\",\"\ud83e\udd16- Disseny i aplicaci\u00f3 de la IA\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/2025\\\/03\\\/20\\\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\\\/\",\"url\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/2025\\\/03\\\/20\\\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\\\/\",\"name\":\"Crear un frontend tipus widget senzill amb HTML\\\/JavaScript i el connecta amb el backend amb ngrok - Ana Borrego Toledo\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/2025\\\/03\\\/20\\\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/2025\\\/03\\\/20\\\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Selection_309.png\",\"datePublished\":\"2025-03-20T10:22:47+00:00\",\"dateModified\":\"2025-03-25T12:25:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/2025\\\/03\\\/20\\\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/2025\\\/03\\\/20\\\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/2025\\\/03\\\/20\\\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\\\/#primaryimage\",\"url\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Selection_309.png\",\"contentUrl\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Selection_309.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/2025\\\/03\\\/20\\\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Crear un frontend tipus widget senzill amb HTML\\\/JavaScript i el connecta amb el backend amb ngrok\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/#website\",\"url\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/\",\"name\":\"Ana Borrego Toledo\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/#organization\",\"name\":\"Ana Borrego Toledo\",\"url\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/cropped-Selection_255.png\",\"contentUrl\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/cropped-Selection_255.png\",\"width\":549,\"height\":328,\"caption\":\"Ana Borrego Toledo\"},\"image\":{\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/#\\\/schema\\\/person\\\/596b5d3dc4735c43cfaafed47741b9d1\",\"name\":\"aborrego\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e158785622f9364a28d322a7a8711e2ea34ebb67263b57ff915d7b49cb3cf0d1?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e158785622f9364a28d322a7a8711e2ea34ebb67263b57ff915d7b49cb3cf0d1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e158785622f9364a28d322a7a8711e2ea34ebb67263b57ff915d7b49cb3cf0d1?s=96&d=mm&r=g\",\"caption\":\"aborrego\"},\"sameAs\":[\"https:\\\/\\\/aborrego.inscastellbisbal.net\",\"https:\\\/\\\/www.instagram.com\\\/anaaaa.aaaaaaaaaaaaaaaaaaaaa?igsh=MWVqcmx5MXl5eGdxaw==\"],\"url\":\"https:\\\/\\\/aborrego.inscastellbisbal.net\\\/en\\\/author\\\/aborrego\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Crear un frontend tipus widget senzill amb HTML\/JavaScript i el connecta amb el backend amb ngrok - Ana Borrego Toledo","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Crear un frontend tipus widget senzill amb HTML\/JavaScript i el connecta amb el backend amb ngrok - Ana Borrego Toledo","og_description":"Crear un frontend tipus widget senzill amb HTML\/JavaScript i el connecta amb el backend amb ngrok Tornar al repte 1.6 He creat un widget frontend senzill utilitzant HTML i JavaScript, i ho he connectat a un servidor backend en Flask mitjan\u00e7ant Ngrok. Per a aix\u00f2, primer vaig configurar Ngrok amb un authtoken per a poder exposar el servidor local a internet i fer que el frontend pogu\u00e9s comunicar-se amb el backend de manera remota. Despr\u00e9s d’integrar el giny en la web, vaig solucionar alguns problemes comuns, com la configuraci\u00f3 incorrecta de la URL i el maneig de la resposta del servidor, assegurant-me que el frontend reb\u00e9s i mostr\u00e9s correctament les dades des del backend. Instal\u00b7laci\u00f3 de depend\u00e8ncies Primer, executa aquesta cel\u00b7la per instal\u00b7lar totes les depend\u00e8ncies necess\u00e0ries per al projecte. Aix\u00f2 inclou les llibreries de Flask i altres eines que necessites per configurar el servidor. !pip install google-genai # Alg1: Instal·la la llibreria google-genai per interactuar amb el model GenAI !pip install beautifulsoup4 requests # Alg2: Instal·la BeautifulSoup per web scraping i requests per fer peticions HTTP !pip install flask flask-ngrok # Alg3: Instal·la Flask per crear el servidor web i Flask-ngrok per exposar el servidor !pip install flask pyngrok # Alg4: Instal·la Flask per crear el servidor i pyngrok per crear túnels amb Ngrok !pip install flask-cors # Alg5: Instal·la Flask-CORS per gestionar CORS (peticions des de diferents orígens) Iniciar el servidor Flask amb Ngrok A continuaci\u00f3, executa la cel\u00b7la que inicia el servidor Flask. Per\u00f2, vaig tenir un error relacionat amb Ngrok que deia que necessitava autenticaci\u00f3 amb un token, ja que estava utilitzant Ngrok sense un compte verificat. app = Flask(__name__) # Alg38: Crea una instància de l'aplicació Flask CORS(app) # Alg39: Activa CORS per permetre peticions des de diferents orígens ngrok.set_auth_token("2uTpEJU6jYqOIOXrL4NDYFpSu8R_4stuSzXJ3Bv64N5rr5auN") # Alg40: Configura el token d'autenticació per a Ngrok # Iniciar Ngrok i exposar el servidor public_url = ngrok.connect(5000) # Alg41: Exposa l'aplicació Flask a través d'Ngrok a la porta 5000 print("\ud83c\udf0d URL pública del backend:", public_url) # Alg42: Mostra la URL pública per accedir al servidor @app.route("\/chat", methods=["POST"]) # Alg43: Defineix la ruta '\/chat' per a les peticions POST def chat_route():# Alg44: Funció que gestiona la petició del xat data = request.get_json() # Alg45: Obté les dades JSON enviades pel frontend message = data.get("message", "") # Alg46: Extreu el missatge del JSON try: response = chat.send_message(message) # Alg47: Envia el missatge al model GenAI return jsonify({"response": response.text.strip()}) # Alg48: Retorna la resposta generada pel model except Exception as e: # Alg49: Captura errors durant la comunicació amb GenAI print(f"\u26a0\ufe0f Error en la comunicació amb Gemini: {e}") # Alg50: Mostra el missatge d'error return jsonify({"response": "S'ha produït un error. Torna-ho a intentar més tard."}) # Alg51: Resposta d'error al frontend if __name__ == "__main__": # Alg52: Condició per a executar el servidor si el script es llanci directament print("\ud83d\udd25 Servidor en funcionament! Usa aquesta URL en el teu frontend:") # Alg53: Mostra un missatge indicant que el servidor està actiu app.run(port=5000) # Alg54: Inicia el servidor Flask a la porta 5000 Vaig tenir un error de Ngrok. Per resoldre aix\u00f2, necessitaba obtenir un Ngrok authtoken i configurar-lo a Google Colab: 1\ufe0fCrea un compte gratu\u00eft a NgrokVisita https:\/\/dashboard.ngrok.com\/signup 2\ufe0fObtenir el teu Ngrok authtokenUn cop creat el compte, visita aquesta p\u00e0gina per obtenir el teu authtoken. Copia\u2019l. 3\ufe0fConfigurar el teu Ngrok authtoken a Google ColabUn cop obtingut el teu authtoken, executa la seg\u00fcent cel\u00b7la a Google Colab amb el teu authtoken per configurar Ngrok correctament. Un cop configurat, podr\u00e0s tornar a executar la cel\u00b7la per obrir Ngrok i obtenir l\u2019URL p\u00fablica per accedir al servidor. Cada vegada que executis la cel\u00b7la, l\u2019URL generat canviar\u00e0, aix\u00ed que recorda actualitzar-lo al teu WordPres Ara conectarem el fontend amb el backend. Ara que\u00a0 el servidor Flask est\u00e1 funcionant, em ‘ integrar el frontend amb el backend. Aqu\u00ed \u00e9s on vaig trobar un petit error: 1\ufe0f Obtenir el frontendDemana a ChatGPT que et proporcioni el codi del frontend (HTML\/JavaScript) per crear el widget que vols integrar al teu lloc web. 2\ufe0fAfegir el codi HTML al teu WordPressUn cop tinguis el codi del widget, copia\u2019l i afegeix-lo a la teva p\u00e0gina de WordPress.\u00a0 Si fas click aqu\u00ed trobar\u00e1s una p\u00e0gina on explico com insertar un widget html i com utilitzar-ho. 3\ufe0f Com solucionar l’error de connexi\u00f3En el meu cas, vaig col\u00b7locar el codi del widget, per\u00f2 no funcionava perqu\u00e8 em donava un error de connexi\u00f3. La ra\u00f3 era que la URL p\u00fablica generada per Ngrok era incorrecta. Havia de fer una petici\u00f3 a la ruta correcta del backend, que \u00e9s \/chat, en lloc de simplement utilitzar l’URL p\u00fablica de Ngrok. 4\ufe0fCorregir el problema de la respostaA m\u00e9s, vaig adonar-me que l’objecte de resposta no era el mateix que s\u2019esperava. En el backend, estava retornant l\u2019objecte de la seg\u00fcent manera: return jsonify ({response:response}) Per\u00f2 al frontend, estava intentant accedir a data.message, quan hauria d’accedir a data.response. Aix\u00ed que vaig modificar el codi del frontend de la seg\u00fcent manera: Abans: document.getElementById('response').innerText = 'Resposta del servidor:' + data.message Despr\u00e9s: document.getElementById('response').innerText = 'Resposta del servidor:' + data.response Un cop modificat, torna a executar la cel\u00b7la on tens el backend i obtindr\u00e0s un nou enlla\u00e7 d\u2019Ngrok. Recorda afegir \/chat al final d\u2019aquest enlla\u00e7. Finalment, el widget haur\u00e0 de funcionar correctament. Ja tenim el nostre xatbot b\u00e0sic configurat al nostre WordPress.","og_url":"https:\/\/aborrego.inscastellbisbal.net\/en\/2025\/03\/20\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\/","og_site_name":"Ana Borrego Toledo","article_published_time":"2025-03-20T10:22:47+00:00","article_modified_time":"2025-03-25T12:25:03+00:00","og_image":[{"width":990,"height":84,"url":"https:\/\/aborrego.inscastellbisbal.net\/wp-content\/uploads\/2025\/03\/Selection_309.png","type":"image\/png"}],"author":"aborrego","twitter_card":"summary_large_image","twitter_misc":{"Written by":"aborrego","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/aborrego.inscastellbisbal.net\/2025\/03\/20\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\/#article","isPartOf":{"@id":"https:\/\/aborrego.inscastellbisbal.net\/2025\/03\/20\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\/"},"author":{"name":"aborrego","@id":"https:\/\/aborrego.inscastellbisbal.net\/#\/schema\/person\/596b5d3dc4735c43cfaafed47741b9d1"},"headline":"Crear un frontend tipus widget senzill amb HTML\/JavaScript i el connecta amb el backend amb ngrok","datePublished":"2025-03-20T10:22:47+00:00","dateModified":"2025-03-25T12:25:03+00:00","mainEntityOfPage":{"@id":"https:\/\/aborrego.inscastellbisbal.net\/2025\/03\/20\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\/"},"wordCount":614,"publisher":{"@id":"https:\/\/aborrego.inscastellbisbal.net\/#organization"},"image":{"@id":"https:\/\/aborrego.inscastellbisbal.net\/2025\/03\/20\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\/#primaryimage"},"thumbnailUrl":"https:\/\/aborrego.inscastellbisbal.net\/wp-content\/uploads\/2025\/03\/Selection_309.png","articleSection":["Repte 1.6","\ud83e\udd16- Disseny i aplicaci\u00f3 de la IA"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/aborrego.inscastellbisbal.net\/2025\/03\/20\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\/","url":"https:\/\/aborrego.inscastellbisbal.net\/2025\/03\/20\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\/","name":"Crear un frontend tipus widget senzill amb HTML\/JavaScript i el connecta amb el backend amb ngrok - Ana Borrego Toledo","isPartOf":{"@id":"https:\/\/aborrego.inscastellbisbal.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/aborrego.inscastellbisbal.net\/2025\/03\/20\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\/#primaryimage"},"image":{"@id":"https:\/\/aborrego.inscastellbisbal.net\/2025\/03\/20\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\/#primaryimage"},"thumbnailUrl":"https:\/\/aborrego.inscastellbisbal.net\/wp-content\/uploads\/2025\/03\/Selection_309.png","datePublished":"2025-03-20T10:22:47+00:00","dateModified":"2025-03-25T12:25:03+00:00","breadcrumb":{"@id":"https:\/\/aborrego.inscastellbisbal.net\/2025\/03\/20\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/aborrego.inscastellbisbal.net\/2025\/03\/20\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/aborrego.inscastellbisbal.net\/2025\/03\/20\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\/#primaryimage","url":"https:\/\/aborrego.inscastellbisbal.net\/wp-content\/uploads\/2025\/03\/Selection_309.png","contentUrl":"https:\/\/aborrego.inscastellbisbal.net\/wp-content\/uploads\/2025\/03\/Selection_309.png"},{"@type":"BreadcrumbList","@id":"https:\/\/aborrego.inscastellbisbal.net\/2025\/03\/20\/crear-un-frontend-tipus-widget-senzill-amb-html-javascript-i-el-connecta-amb-el-backend-amb-ngrok\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/aborrego.inscastellbisbal.net\/"},{"@type":"ListItem","position":2,"name":"Crear un frontend tipus widget senzill amb HTML\/JavaScript i el connecta amb el backend amb ngrok"}]},{"@type":"WebSite","@id":"https:\/\/aborrego.inscastellbisbal.net\/#website","url":"https:\/\/aborrego.inscastellbisbal.net\/","name":"Ana Borrego Toledo","description":"","publisher":{"@id":"https:\/\/aborrego.inscastellbisbal.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/aborrego.inscastellbisbal.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/aborrego.inscastellbisbal.net\/#organization","name":"Ana Borrego Toledo","url":"https:\/\/aborrego.inscastellbisbal.net\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/aborrego.inscastellbisbal.net\/#\/schema\/logo\/image\/","url":"https:\/\/aborrego.inscastellbisbal.net\/wp-content\/uploads\/2025\/03\/cropped-Selection_255.png","contentUrl":"https:\/\/aborrego.inscastellbisbal.net\/wp-content\/uploads\/2025\/03\/cropped-Selection_255.png","width":549,"height":328,"caption":"Ana Borrego Toledo"},"image":{"@id":"https:\/\/aborrego.inscastellbisbal.net\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/aborrego.inscastellbisbal.net\/#\/schema\/person\/596b5d3dc4735c43cfaafed47741b9d1","name":"aborrego","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e158785622f9364a28d322a7a8711e2ea34ebb67263b57ff915d7b49cb3cf0d1?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e158785622f9364a28d322a7a8711e2ea34ebb67263b57ff915d7b49cb3cf0d1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e158785622f9364a28d322a7a8711e2ea34ebb67263b57ff915d7b49cb3cf0d1?s=96&d=mm&r=g","caption":"aborrego"},"sameAs":["https:\/\/aborrego.inscastellbisbal.net","https:\/\/www.instagram.com\/anaaaa.aaaaaaaaaaaaaaaaaaaaa?igsh=MWVqcmx5MXl5eGdxaw=="],"url":"https:\/\/aborrego.inscastellbisbal.net\/en\/author\/aborrego\/"}]}},"_links":{"self":[{"href":"https:\/\/aborrego.inscastellbisbal.net\/en\/wp-json\/wp\/v2\/posts\/6311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aborrego.inscastellbisbal.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aborrego.inscastellbisbal.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aborrego.inscastellbisbal.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aborrego.inscastellbisbal.net\/en\/wp-json\/wp\/v2\/comments?post=6311"}],"version-history":[{"count":7,"href":"https:\/\/aborrego.inscastellbisbal.net\/en\/wp-json\/wp\/v2\/posts\/6311\/revisions"}],"predecessor-version":[{"id":6480,"href":"https:\/\/aborrego.inscastellbisbal.net\/en\/wp-json\/wp\/v2\/posts\/6311\/revisions\/6480"}],"wp:attachment":[{"href":"https:\/\/aborrego.inscastellbisbal.net\/en\/wp-json\/wp\/v2\/media?parent=6311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aborrego.inscastellbisbal.net\/en\/wp-json\/wp\/v2\/categories?post=6311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aborrego.inscastellbisbal.net\/en\/wp-json\/wp\/v2\/tags?post=6311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}