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çant Ngrok. Per a això, primer vaig configurar Ngrok amb un authtoken per a poder exposar el servidor local a internet i fer que el frontend pogués comunicar-se amb el backend de manera remota. Després d’integrar el giny en la web, vaig solucionar alguns problemes comuns, com la configuració incorrecta de la URL i el maneig de la resposta del servidor, assegurant-me que el frontend rebés i mostrés correctament les dades des del backend. Instal·lació de dependències Primer, executa aquesta cel·la per instal·lar totes les dependències necessàries per al projecte. Això 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ó, executa la cel·la que inicia el servidor Flask. Però, vaig tenir un error relacionat amb Ngrok que deia que necessitava autenticació 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("🌍 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"⚠️ 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("🔥 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ò, necessitaba obtenir un Ngrok authtoken i configurar-lo a Google Colab: 1️Crea un compte gratuït a NgrokVisita https://dashboard.ngrok.com/signup 2️Obtenir el teu Ngrok authtokenUn cop creat el compte, visita aquesta pàgina per obtenir el teu authtoken. Copia’l. 3️Configurar el teu Ngrok authtoken a Google ColabUn cop obtingut el teu authtoken, executa la següent cel·la a Google Colab amb el teu authtoken per configurar Ngrok correctament. Un cop configurat, podràs tornar a executar la cel·la per obrir Ngrok i obtenir l’URL pública per accedir al servidor. Cada vegada que executis la cel·la, l’URL generat canviarà, així que recorda actualitzar-lo al teu WordPres Ara conectarem el fontend amb el backend. Ara que el servidor Flask está funcionant, em ‘ integrar el frontend amb el backend. Aquí és on vaig trobar un petit error: 1️ 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️Afegir el codi HTML al teu WordPressUn cop tinguis el codi del widget, copia’l i afegeix-lo a la teva pàgina de WordPress. Si fas click aquí trobarás una pàgina on explico com insertar un widget html i com utilitzar-ho. 3️ Com solucionar l’error de connexióEn el meu cas, vaig col·locar el codi del widget, però no funcionava perquè em donava un error de connexió. La raó era que la URL pública generada per Ngrok era incorrecta. Havia de fer una petició a la ruta correcta del backend, que és /chat, en lloc de simplement utilitzar l’URL pública de Ngrok. 4️Corregir el problema de la respostaA més, vaig adonar-me que l’objecte de resposta no era el mateix que s’esperava. En el backend, estava retornant l’objecte de la següent manera: return jsonify ({response:response}) Però al frontend, estava intentant accedir a data.message, quan hauria d’accedir a data.response. Així que vaig modificar el codi del frontend de la següent manera: Abans: document.getElementById('response').innerText = 'Resposta del servidor:' + data.message Després: document.getElementById('response').innerText = 'Resposta del servidor:' + data.response Un cop modificat, torna a executar la cel·la on tens el backend i obtindràs un nou enllaç d’Ngrok. Recorda afegir /chat al final d’aquest enllaç. Finalment, el widget haurà de funcionar correctament. Ja tenim el nostre xatbot bàsic configurat al nostre WordPress.
