Interfície de comunicació, encàrrec simplificat.

Aquesta tasca va sobre crear codi JavaScript per a enviar una activitat sobre una pàgina web a un servidor

(Aquests apartats els vaig fer inicialment en el visual studio code, són els codis utilitzats per fer tot el procediment encara que anteriorment he creat les carpetes)

 
<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Web amb Menú i Iframe</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    header {
      background-color: #333;
      color: white;
      padding: 1rem;
      text-align: center;
    }

    nav {
      display: flex;
      flex-direction: column;
      background-color: #444;
      color: white;
    }

    .menu-nivell-1 {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      background-color: #444;
    }

    .menu-nivell-1 > div {
      position: relative;
      margin: 0.5rem;
      cursor: pointer;
    }

    .menu-nivell-2 {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #555;
      min-width: 150px;
      z-index: 1;
    }

    .menu-nivell-2 div {
      padding: 0.5rem;
      cursor: pointer;
    }

    .menu-nivell-2 div:hover {
      background-color: #666;
    }

    .menu-nivell-1 > div:hover .menu-nivell-2 {
      display: block;
    }

    iframe {
      flex: 1;
      width: 100%;
      border: none;
      
    }


    @media (max-width: 768px) {
      .menu-nivell-1 {
        flex-direction: column;
        align-items: stretch;
      }

      .menu-nivell-1 > div {
        text-align: center;
      }
    }
  </style>
  <script src="../util/comunicador.js"></script>
</head>
<body>
  <header>
    <h1 id="tit">Pàgina amb Menú i Iframe</h1>
  </header>

  <nav>
    <div class="menu-nivell-1">
      <div>
        Secció 1
        <div class="menu-nivell-2">
          <div onclick="canviaIframe('https://jcanet.inscastellbisbal.net/')">Pàgina 1.1</div>
          <div onclick="canviaIframe('https://www.wikipedia.org')">Pàgina 1.2</div>
        </div>
      </div>
      <div>
        Secció 2
        <div class="menu-nivell-2">
          <div onclick="canviaIframe('https://agora.xtec.cat/iescastellbisbal/')">Pàgina 2.1</div>
          <div onclick="canviaIframe('https://www.openai.com')">Pàgina 2.2</div>
        </div>
      </div>
    </div>
  </nav>

  <iframe id='contingut' src='about:blank' srcMenu=""></iframe>

  <script>
    function canviaIframe(url) {
      //document.getElementById('contingut').src = url;
      //document.getElementById('divcontingut').innerHTML = "<iframe id='contingut' src='" + url +"' ></iframe>";
      document.getElementById('contingut').setAttribute('src', url); 
      document.getElementById('contingut').setAttribute('srcMenu', url);
    }
    let n = 0;
    function addN(){
      n+=1;
    }
  </script>
</body>
</html>
 
from flask import Flask, request, jsonify
from flask_cors import CORS
import mysql.connector
from datetime import datetime

app = Flask(__name__)
CORS(app)

# Connexió a la base de dades
conn = mysql.connector.connect(
    host="localhost",
    user="root",
    password="1234",  # Canvia-ho segons la teva configuració
    database="activitat_db"
)
cursor = conn.cursor()

@app.route("/registre", methods=["POST"])
def registre():
    dades = request.get_json()
    accio = dades.get("accio")
    url = dades.get("url")
    timestamp = datetime.now()

    sql = "INSERT INTO Activitat (marca_de_temps, accio, url) VALUES (%s, %s, %s)"
    valors = (timestamp, accio, url)
    cursor.execute(sql, valors)
    conn.commit()

    return jsonify({"status": "ok", "accio": accio, "url": url}), 200

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000)
 
window.addEventListener("DOMContentLoaded", () => {
  const iframe = document.getElementById("contingut");

  if (!iframe) return;

  iframe.addEventListener("load", () => {
    const accio = "carregat";
    const url = iframe.getAttribute("src");

    fetch("http://172.24.199.59:5000/registre", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ accio, url })
    })
    .then(res => res.json())
    .then(data => console.log("Resposta:", data))
    .catch(err => console.error("Error:", err));
  });
});

Primer de tot canviem de directori i encenem la maquina virtual

Accedim a la maquina virtual per ssh

Accedim al directori on tenim compartit les carpetes amb el Vagrantfile ja instalat passat pel nostre professor

Fem la instalació del python3-venv

El possem com a nom test i l’activem.

Continuem també amb la instalació del flask-cors

Instal·lem el connector del mysql amb python

I a l’acabar amb les instalacions fem una copia del servidor cap el server.py

Entrem en el mysql

Veiem els “databases”

I creem el activitat_db

Fem un “use” del activitat_db

I continuem amb aquesta llista de comandes:

CREATE TABLE Activitat ( … );

  • Crea una taula que es diu “Activitat”

  • id INT AUTO_INCREMENT PRIMARY KEY:
    Una columna id que guarda un número enter que s’incrementa automàticament per a cada registre i que serveix per identificar cada fila.

  • marca_de_temps DATETIME:
    Per veure la data i hora en què s’ha fet qualsevol cosa.

  • accio VARCHAR(255):
    Per fer un text curt fins a 255 caràcters

  • url TEXT:
    Per guardar una URL relacionada amb el que es farà.

Després d’aixó continuem fent l’entorn per que és pugui executar

“sudo apt-get install python3-venv

python3 -m venv test

source test/bin/activate

pip install flask-cors

pip install mysql-connector-python” 

—————————————————————————-

Després per executar-lo fem aquesta comanda

Continuem obrint el html i ha la terminal sortiria aixó, d’aquesta manera ja sabem que funciona i així també comprovem que arriban els missatges