Comunicador.js
Justificació i explicació del comunicador.js
- Funcions clares i separades: Tenir una funció que s’encarrega només d’enviar les dades i una altra que gestiona l’event fa que el codi sigui més net i fàcil de mantenir.
- Ús de constants: Definim la URL del servidor en una constant per poder canviar-la fàcilment en un futur sense haver de buscar per tot el codi.
- Event ‘load’ de l’iframe: Ens permet detectar exactament quan s’ha carregat una nova pàgina dins l’iframe, que és el moment ideal per enviar la informació.
- Enviament asíncron amb fetch: Això fa que la pàgina no es bloquegi mentre s’envien les dades, millorant l’experiència d’usuari.
- Gestió d’errors: Capturem i mostrem possibles errors a la consola, facilitant la depuració en cas que hi hagi algun problema.
Mòdul autoexecutat: Evita conflictes amb altres scripts i manté el codi ben encapsulat.
Servidor.py
Justificació i explicació del servidor Flask (app.py)
- Funció específica per a la connexió a la base de dades: Centralitza la lògica de connexió i facilita canvis o reutilització del codi.
- Variables de configuració: Agrupem les dades sensibles i configuracions en un únic lloc, que facilita la gestió i millora la seguretat.
- Validació de dades rebudes: Assegura que no falten camps essencials abans d’inserir a la base de dades, evitant errors o dades incompletes.
- Consulta parametritzada: Prevé atacs d’injecció SQL, una pràctica molt important per garantir la seguretat de l’aplicació.
- Ús de CORS: Permet que les peticions des del navegador funcionin encara que el servidor i el client estiguin en orígens diferents (ports o IPs diferents), molt útil durant el desenvolupament.
Documentació clara: Cada part del codi està ben comentada, facilitant la comprensió i el manteniment posterior.
Tour html
Aquest fitxer tour.html és una pàgina web amb un menú i un iframe.
El menú té dues seccions (Secció 1 i 2), i cada una té dues opcions que apareixen al passar el ratolí.
Quan fas clic a una opció, es canvia la pàgina que es veu dins del quadre gran (iframe) de sota.
L’iframe és com una finestra que mostra altres pàgines web dins d’aquesta mateixa.
El codi CSS fa que tot es vegi ben organitzat i amb colors foscos.
El JavaScript s’encarrega de canviar la pàgina de l’iframe quan cliques.
Pàgina amb Menú i Iframe
Script
Justificació i explicació del script SQL
Base de dades pròpia: Manté les dades d’aquesta aplicació separades d’altres possibles projectes, millorant l’organització.
Taula simple i funcional: Només conté els camps necessaris per guardar les activitats i el moment que van succeir.
Tipus de dades adequats:
DATETIMEper la marca temporal,VARCHARper textos curts iTEXTper URL que poden ser llargues.Clau primària autoincremental: Facilita la identificació única de cada registre sense complicacions addicionals.
Com fer-ho
Primer de tot creas la carpeta on posaras tots els codis
En aquest cas crearem una carpeta que es dira “projecte-activitat”
mkdir projecte-activitat
Ens posem en el directori de la carpeta que em creat
cd projecte-activitat
Dins creas aquestes carpetes
Java/
├── Vagrantfile
├── html
├── servidor
│ └── servidor.py
├── util/
│ └── comunicador.js
amb la comanda d’abans (mkdir)
Després per crear la MV, poses això
vagrant up code –provision
Una vegada fet això ja tindries la mv creada, llavors entras a la MV
Una vegada has entrar a la MV, ves al directori Vagrant:
cd /vagrant
Activas l’entorn Virtual de Python
source .venv/bin/activate
Ara toca crear la base de dades
sudo mariadb
Després dins de MariaDB
SOURCE script.sql;
EXIT;
Executar el servidor Flask
python3 app.py
Obrir el navegador (fora de la MV)
Obre el fitxer index.html des del teu navegador a l’ordinador (fora de la màquina virtual).
Quan facis clic en un enllaç del menú, l’iframe carregarà una pàgina i enviarà les dades al servidor.
Ultim pas Verificar els resultats
A la terminal on tens Flask obert, veuràs les peticions que reps.
Pots connectar-te a MariaDB i fer:
Fotos del resultat
