Ana Borrego Toledo

Millores estètiques i funcionals

Millores estètiques i funcionals Tornar al repte 1.6 He millorat estèticament el meu xat bot. Per això vaig utilitzar ChatGPT: Vaig demanar-li el que volia i li vaig adjuntar el meu frontend: “M’agradaria que ho fessis més estètic, amb cantonades arrodonides, algun efecte visual agradable i que tingui un efecte flotant. Vull que els colors siguin en tons liles, combinant amb aquesta paleta: #8D358A, #7B4CA8… A més, en comptes de ‘Chatbot’, vull que el text digui alguna cosa com ‘Parla amb l’Ana!’ i que la font sigui “Poppins”.. Explicació de les millores: Clarificació: He fet que la redacció sigui més fluida i entenedora. Estètica: He utilitzat un llenguatge més precís per indicar els elements visuals desitjats. Efecte flotant: He remarcat aquest detall perquè sigui més clar que vols un efecte visual lleuger o amb ombra. Personalització: He reforçat la idea que vols un text més amigable en comptes de “Chatbot”.  

Creació d’un punt de recollida de dispositius electrònics en desús

Creació d’un punt de recollida de dispositius electrònics en desús Tornar al repte 1.6 Creació d’un punt de recollida de dispositius electrònics en desús Per crear un punt de recollida eficient de dispositius electrònics en desús, podem seguir aquests passos: Ubicació – Col·locar el punt de recollida en llocs visibles i accessibles: centres comercials, escoles o altres espais públics de gran afluència. – Utilitzar cartells grans i visibles per indicar la ubicació exacta del punt de recollida i guiar els usuaris. Disseny – Contenidors adequats: Utilitzar contenidors específics per a dispositius electrònics, amb compartiments per a diferents tipus de materials (telèfons mòbils, ordinadors, bateries, etc.), per evitar la contaminació creuada de materials reciclables. – Accés senzill: Dissenyar els contenidors per facilitar la disposició dels dispositius, amb una obertura ampla i fàcil d’utilitzar. Recompenses motivadores – Oferir recompenses per la entrega dels dispositius, com ara descomptes en productes tecnològics, targetes de regal o punts acumulables per a futurs descomptes. – Sorteigs: Organitzar competicions o sorteigs per als usuaris que més dispositius reciclin, amb premis atractius com gadgets tecnològics o experiències relacionades amb la tecnologia. Informació sobre Reciclatge i Reutilització – Cartells informatius: Col·locar informació clara i concisa sobre com es reciclen els dispositius, els beneficis del reciclatge i els perills de no fer-ho (com la contaminació ambiental). O també fer cartells digitals: instal·lar pantalles que mostrin vídeos curts sobre el procés de reciclatge i reutilització de dispositius electrònics. – Codi QR per a més informació: Afegir codis QR als contenidors o cartells que redirigeixin els usuaris a webs o apps amb informació detallada sobre el reciclatge. Col·laboracions -Aliances amb empreses tecnològiques: Cercar col·laboracions amb marques de tecnologia per a oferir recompenses exclusives o donar suport al projecte. -Treballar amb organitzacions ecologistes per garantir que els dispositius recollits es reciclin correctament i de manera sostenible.

Generar l’API Key a Google IA Studio i configurar-la a Google Colab

Generar l’API Key a Google IA Studio i configurar-la a Google Colab Tornar al repte 1.6 A Google AI Studio, els estudiants menors de 18 anys no poden generar la seva pròpia API Key, ja que la plataforma té restriccions d’edat. A causa d’això, alguns companys no van poder obtenir accés. Per solucionar el problema, el professor va proporcionar una API Key compartida perquè tots els afectats poguessin utilitzar-la a Google Colab i treballar amb les eines de Google AI sense restriccions. Generar una API Key a Google AI Studio ⚠ Nota: Google requereix tenir 18 anys per generar una API Key pròpia. Si teniu restriccions per edat, haureu d’utilitzar la que us ha donat el professor. 1 Accedir a Google AI Studio Aneu a Google AI Studio. Inicieu sessió amb el vostre compte de Google (si teniu restriccions, potser no podreu generar una API Key). 2 Generar la clau API Aneu a Settings (Configuració). Busqueu API Key i feu clic a Generate API Key. Guardeu la clau en un lloc segur. Configurar l’API Key a Google Colab 1 Obrir Google Colab Aneu a Google Colab i creeu un nou notebook. A Google Colab, fes clic a la icona de clau  a la barra lateral dreta. 2. Afegir la API Key A “Key”, escriu: GOOGLE_API_KEY   A “Value”, enganxa la clau API proporcionada pel professor.

Desplegament en MV d’un backup del WP personal

DESPLEGAMENT EN MV D’UN BAKCUP DEL WP PERSONAL Tornar al repte 1.6 He desplegat la pàgina web a la MV, copiant fitxers, configurant nginx i la base de dades, ajustant permisos i reiniciant el servidor. Finalment, he actualitzat el fitxer /etc/hosts per resoldre el domini correctament. Primer hem de instal·lar la MV que ens han proporcionat.  Ara ens hauria de sortir en el VirtualBox I ens connectem per ssh a la nostre màquina virtual. Copia tots els fitxers del directori de treball a la MV Per copiar els fitxers del directori de treball a la MV, primer has de comprovar que estàs al directori correcte amb pwd. Si no ho estàs o no saps la ruta, pots utilitzar find ~/ -type d -name “wordpress” per localitzar-lo. Un cop tinguis la ruta, entra al directori amb cd /ruta/del/directori. Finalment, copia tots els fitxers a la MV amb scp -r * vagrant@172.24.199.205:/home/vagrant/. I ara comprobem que s’hagin copiat. Descomprimeix l’arxiu “tar.gz” a la MV Per descomprimir l’arxiu “tar.gz” a la MV, primer has d’estar connectat per SSH. Un cop dins de la MV, executa la següent comanda per descomprimir l’arxiu dins del directori /home/vagrant/:   I ara comprobem que s’hagin descomprimit. Crea el directori “/var/www/html/$NOM” a la MV Creem el directori (sudo mkdir /var/www/html/$NOM) i executem: cd /var/www/html/ per comprobar que s’ha creat Copiar el contingut del directori “20250317-$NOM” dins del directori creat Ara copiem el contingut del directori descomprimit dins del directori que acabes de crear:   Canviar el propietari del directori creat i el seu contingut a l’usuari “www-data” excecutem : sudo chown -R www-data:www-data /var/www/html/$NOM Copiar el fitxer “$NOM.conf” dins del directori /etc/nginx/sites-available/  Per copiar el fitxer de configuració de Nginx ($NOM.conf) dins del directori /etc/nginx/sites-available/, primer has d’assegurar-te que el fitxer es troba a la ubicació correcta dins de la màquina virtual. Si no saps on es troba, utilitza la comanda ls per localitzar-lo. Si el fitxer, per exemple aborrego.conf, es troba en un directori concret com /home/vagrant/nginx/ o /vagrant/nginx/, copieu-lo amb la següent comanda: sudo cp /home/vagrant/nginx/aborrego.conf /etc/nginx/sites-available/ Aquesta comanda copiarà el fitxer de configuració de Nginx al directori adequat per la configuració de llocs disponibles.   Crear un enllaç simbòlic del fitxer a “/etc/nginx/sites-enabled/” (surt error ja que quan ho vaig fer per primer cop després vaig netejar la terminal.)   Executar les ordres del fitxer “$NOM.sql” dins del servidor de BBDD he utilitzat la comanda següent per executar el fitxer: sudo mysql -u root < /home/vagrant/mariadb/aborrego.sq Per assegurar-me que les ordres s’han aplicat correctament, entro a MySQL com a root: sudo mysql -u root -p Un cop dins de MySQL, comprovo que la base de dades aborrego s’ha creat correctament: SHOW DATABASES; Per verificar que l’usuari aborrego s’ha creat correctament, executo aquesta comanda: SELECT User, Host FROM mysql.user; i Per assegurar-me que l’usuari té tots els privilegis sobre la base de dades aborrego, executo: SHOW GRANTS FOR ‘aborrego’@’localhost’; Restaura el fitxer “20250317-$NOM.sql” dins de la BBDD que he creat. Dins del servidor de la base de dades posem: USE aborrego; Ara que tenim la base de dades seleccionada, puc restaurar el fitxer utilitzant la comanda mysql des de la línia de comandes

Integració del widget al WordPress

Integració del widget al wordpress Tornar al repte 1.6 He integrat un widget al wordpress per insertar el meu xatbot a la meva pàgina web. Pots comprovar-ho fent click aquí. Primer, has d’entrar al mode edició de la teva pàgina amb Elementor. Per fer-ho, ves a la teva pàgina des del panell de WordPress i fes clic a Editar amb Elementor. Això obrirà l’editor de pàgines de Elementor on podràs modificar el contingut. A la barra lateral esquerra d’Elementor, hi trobaràs una llista d’elements que pots arrossegar a la teva pàgina. Busca l’element “HTML” a la barra de cerca. Aquest element et permet afegir codi HTML personalitzat. Un cop hagis trobat l’element HTML, arrossega’l i col·loca’l a la secció de la pàgina on vols que aparegui el widget. Un cop el tinguis a l’espai seleccionat, obre’l fent clic sobre el quadre de text. Aquí és on hauràs de pegar el codi HTML/JavaScript del teu widget. Un cop hagis pegat el codi, ves a la part inferior de l’editor de Elementor i fes clic al botó “Desar” per guardar els canvis. També pots clicar “Publicar” si estàs treballant en una nova pàgina. Això farà que els canvis s’apliquin a la pàgina i el teu widget es mostrarà allà on l’has col·locat. Finalment, ves a la teva pàgina en viu i comprova que el widget es mostra correctament. Fes una prova per assegurar-te que el codi HTML/JavaScript està funcionant bé i que es fa la comunicació amb el backend (com la petició al servidor Flask via Ngrok) sense cap error.

Crear un frontend tipus widget senzill amb HTML/JavaScript i el connecta amb el backend amb ngrok

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.

Creation of a cover letter in English

Creation of a cover letter in English Tornar al repte 1.6 I have written my cover letter based on Unit 7 of iPOP. It has been very helpful, as this activity asked for key aspects to write a motivation letter. I have highlighted: Who I am What I can contribute to the company How I stand out from other candidates Click on the photo to enter the document.

Cretion of a CV in English

creation of a cv in english Tornar al repte 1.6 I created my CV with a Canva template. To do this, I used Europass before. Here I explain how to make a curriculum from Europass: – Create an account on the Europass page: You must enter the Europass website and register in order to save your documents.– Choose CV template: Once registered, select the Europass curriculum model. This template is already structured with all the important sections for a curriculum: personal data, work experience, training, skills, languages, etc.– Fill in information: Fill in the different sections with your data.– Save and export curriculum: When you have it ready, you can save it in Europass and download it in PDF or Word format. Once I had the basic curriculum created with Europass, I decided to customize using a Canva template. C Click on the photo to enter the document.

Codi net i ben documentat (Comentaris al codi)

codi net i ben documentat (comentaris al codi) Tornar al repte 1.6 He  organitzat el codi en Google Colabs de una manera organitzada i neta (#). 1. Comentaris detallats -Comentaris a cada pas del codi (Alg1, Alg2, Alg3…) que expliquen la funcionalitat de cada línia. -Explicació de condicions i possibles errors, per exemple: –Divisió en seccions clares: El codi està estructurat amb línies de separació # ============================== que ajuden a identificar ràpidament cada bloc funcional (Configuració de l’API, Web Scraping, Servidor Flask, etc.). –Ordre lògic: Les importacions de llibreries es fan primer, seguides de la configuració de l’API, la configuració del xat, l’extracció d’informació de la web i finalment l’inici del servidor. Aquest codi està ben estructurat perquè segueix un ordre lògic i organitzat, facilitant la seva lectura i manteniment: Això garanteix que tots els mòduls estiguin disponibles abans d’importar-los. 2. Organització Aquest codi està ordenat en un flux lògic de dalt a baix: Instal·lació de llibreries (per evitar errors d’importació). Importació de llibreries (seguint una lògica de dependències). Configuració de l’API (comprova si la clau d’API està disponible). Instruccions del sistema (estableix normes i estil de resposta de l’IA). Configuració del model d’IA (defineix el model i paràmetres). Extracció de dades web (web scraping). Configuració del servidor Flask (per permetre comunicació amb el frontend). Definició de la ruta de xat (per gestionar les converses). Execució del servidor (per posar en marxa el sistema). 2.1 Instal·lació de llibreries Primer, el codi assegura que totes les llibreries necessàries estiguin instal·lades abans de continuar. Això evita errors si alguna no està disponible en l’entorn on s’executa. Després de la instal·lació, el codi importa totes les llibreries necessàries per funcionar: L’ordre d’importació segueix una lògica: primer les eines per web scraping (BeautifulSoup, requests), després la IA (genai), i finalment el servidor (Flask, ngrok). # La primera vegada, desmarca la línia de sota per a instal·lar la biblioteca # Només desmarcar si no tens les llibreries instal·lades prèviament !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) import bs4 # Alg6: Importa BeautifulSoup per analitzar el contingut HTML de les pàgines web import requests # Alg7: Importa requests per fer peticions HTTP from flask_cors import CORS # Alg8: Importa CORS per activar la compartició de recursos entre diferents orígens from google import genai # Alg9: Importa la llibreria de GenAI per generar respostes amb el model de Google from google.colab import userdata # Alg10: Importa userdata per obtenir dades d'usuari a Google Colab from bs4 import BeautifulSoup # Alg11: Torna a importar BeautifulSoup per a l'anàlisi HTML from flask import Flask, request, jsonify # Alg12: Importa Flask per gestionar el servidor web i les peticions HTT from pyngrok import ngrok # Alg13: Importa ngrok per crear un túnel per a l'aplicació web local # ============================== # CONFIGURACIÓ DE L'API # ============================== GOOGLE_API_KEY = userdata.get("GOOGLE_API_KEY") # Alg14: Obté la clau API de Google des de userdata a Google Colab if not GOOGLE_API_KEY: # Alg15: Comprova si la clau API s'ha configurat correctament print("⚠️ No s'ha trobat la clau API. Configura-la a Colab abans d'executar el programa.") # Alg16: Missatge d'error si la clau no es troba exit() # Alg17: Termina l'execució del programa si la clau API no es troba client = genai.Client(api_key=GOOGLE_API_KEY) # Alg18: Crea una instància del client de GenAI amb la clau API # ============================== # INSTRUCCIONS DEL SISTEMA # ============================== system_instruction =""" Ets un alumne del cicle de sistemes microinformàtics i xarxes a l’Institut Castellbisbal. Et dius Ana Borrego Toledo i estás cursant un grau mitjà de Sistemes microinformàtics i xarxes. Respon amb un to divertit i enginyós. estil desenfadat, però sense faltar al respecte. 📌 **Normes de comportament**: – **Respon només a preguntes relacionades amb el cicle, la teva web i el teu perfil acadèmic.** – **Ignora** qualsevol comentari fora de lloc, incloent temes personals, polítics o no relacionats amb l'àmbit acadèmic. – **No responguis** a comentaris ofensius, grollers o innecessaris. – Si algú fa una pregunta fora de context, com per exemple: "Ai ai… crec que el meu cable de xarxa s'ha desconnectat! No puc respondre això!" "Això no està dins del meu contracte de chatbot! Pregunta’m sobre informàtica!" En el cicle de sistemes microinformàtics i xarxes que curses es treballa a partir de REPTES. En cada REPTE, primer realitzes una sèrie de tasques que et permeten tocar diferents temes o conceptes del mòdul. Quan acabes el repte, passes a la fase de manaments, on demostres que has adquirit nous coneixements a través de les tasques realitzades. Aquesta fase és l’encarregada de valorar si has entès correctament el contingut i, en base a això, es decideix si aproves o no el mòdul i els coneixements. Els REPTES es fan en grup o individualment. Ignora els comentaris fora de lloc, axí com comentaris sexuals, personals…""" chat = client.chats.create( # Alg20: Crea una sessió de xat amb historial automàtic i instruccions personalitzades model="gemini-2.0-flash", # Alg21: Configura el model de llenguatge (verifica que sigui compatible amb la versió de GenAI) config=genai.types.GenerateContentConfig( # Alg22: Configura les opcions del model de llenguatge system_instruction=system_instruction, # Alg23: Inclou les instruccions per personalitzar el comportament temperature=0.7, # Alg24: Configura el nivell de creativitat del model (0 a 1, on 0 és més determinista) max_output_tokens=200 # Alg25: Configura la longitud màxima de la resposta generada ) ) # ============================== # EXTRAURE INFORMACIÓ DE LA PÀGINA WEB (web scrapping) # ============================== url = "https://aborrego.inscastellbisbal.net/ipop/" # Alg26: URL de la pàgina web de la qual es vol extreure informació response = requests.get(url) # Alg27: Realitza una petició GET per obtenir el contingut HTML … Read more