IoE con Cisco Packet Tracer e HTTP Real
- Descrizione del Progetto
- Capitolo 1: Creazione del Database MySQL
- Capitolo 2: Scrittura delle API REST in PHP- 2.1 API per la ricezione dati dall’MCU (iot_data.php)
- 2.2 API per il controllo del LED (control_led.php)
- Capitolo 3: Realizzazione della rete in Packet Tracer
- Capitolo 4: Sviluppo della Dashboard- 4.1 Connessione al Database
- 4.2 Recupero dati dal database
- 4.3 Struttura della Dashboard
- 4.4 Grafico dei dati con Chart.js
- Capitolo 5: Test finale
- Conclusioni
In questo progetto, IoE con Cisco Packet Tracer e HTTP Real, realizziamo una rete con Cisco Packet Tracer costituita da sensori ed attuatori. Utilizzando le funzioni Real offerte da Cisco possiamo inviare i dati che riceve l'MCU ad un server reale e possiamo comandare attuatori, tutto attraverso richieste HTTP
Realizzare un progetto con Cisco Packet Tracer utilizzando un MCU, un potenziometro, un display ed un LED. Il funzionamento è il seguente. Il valore letto dal potenziometro deve essere riportato sul display e, attraverso una richiesta HTTP tali valori verranno memorizzati in una tabella di un Database realizzato con MySQL. Realizzare una dashboard all'interno della quale sia possibile:
- visualizzare, in un grafico, l'andamento dei valori nel tempo
- comandare (e visualizzare) lo stato del led
Capitolo 1: Creazione del Database MySQL
Per iniziare, creiamo un database denominato IoT_Database e una tabella dati per memorizzare i dati provenienti dal dispositivo IoT.
Far partire XAMPP, cliccare su start in corrispondenza di APACHE (per far partire il WEB Server) e in corrispondenza di MySQL (per far partire il Database Server). In corrispondenza di MySQL cliccare su Admin. Verrete reindirizzati a localhost/phpmyadmin l'interfaccia di gestione del DBMS. Cliccare sul TAB "SQL" e incollare il seguente codice
CopyCREATE DATABASE IoT_database;
USE IoT_database;
CREATE TABLE dati (
id INT AUTO_INCREMENT PRIMARY KEY,
valore_Pot INT(5), -- Valore del potenziometro
stato_LED VARCHAR(10), -- Stato del LED (acceso/spento)
timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP -- Data e ora della registrazione
);
Il codice precedente crea il database "IoT_DB" e la tabella "dati" con chiave primaria "id" e tre campi:
- valore_Pot che conterrà i valori del potenziometro letti dall'MCU. Ricordiamo che l'ADC di Arduino utilizza un registro a 10 bit per cui avrà 210 = 1024 possibili livelli (da 0 a 1023)
- stato_LED che conterrà lo stato del LED (acceso o spento)
Capitolo 2: Scrittura delle API REST in PHP
2.1 API per la ricezione dati dall’MCU (iot_data.php)
Questa API riceve i valori dal potenziometro e lo stato del LED, salvandoli nel database.
Sarà necessario instaurare la connessione al database appena creato e ricevere i dati. Il modo più semplice per la ricezione dei dati è in formato JSON per cui avremo bisogno di funzioni PHP che consentano di farlo. Qui di seguito c'è il codice della API iot_data.php. Attraverso un IDE o un semplice file creare lo script e memorizzarlo nella cartella htdocs, magari in una subdirectory "test/IoT". Il percorso potrebbe essere:
C:xampphtdocstestIoT
" style="color:#24292e;display:none;background-color:#e1e4e8" aria-label="Copy" data-copied-text="Copied!" data-has-text-button="textSimple" data-inside-header-type="headlights" aria-live="polite" class="code-block-pro-copy-button">Copy$sql = "SELECT * FROM sensor_data ORDER BY id DESC LIMIT 10";
$result = $conn->query($sql);
$data = ;
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$data = $row;
}
}
// Ottieni lo stato più recente del LED
$sql_led_status = "SELECT led_status FROM sensor_data ORDER BY id DESC LIMIT 1";
$result_led_status = $conn->query($sql_led_status);
$led_status = ($result_led_status->num_rows > 0) ? $result_led_status->fetch_assoc() : 'spento';
$conn->close();
?>
4.3 Struttura della Dashboard
La dashboard presenta:
- Un pannello di controllo per accendere o spegnere il LED.
- Una tabella con gli ultimi 10 valori ricevuti.
- Un grafico interattivo con l’andamento del potenziometro nel tempo.
Di seguito la sezione HEAD. Si nota la funzione jJavaScript per il refresh automatico ogni 2 secondi
CopyDOCTYPE html>
Dashboard IoT
function refreshPage() {
location.reload();
}
setInterval(refreshPage, 2000);
Qui in basso invece c'è la sezione del controllo e visualizzazione LED. Si noti la riga di codice che riempie il cerchio, che rappresenta il LED, in giallo se è acceso io in grigio se spento
Read the full article