Collegare il tuo Raspberry Pi al Web: 9 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:01

In questa lezione imparerai come creare una pagina Web, raccogliere dati utilizzando il World Wide Web e utilizzare le API per pubblicare immagini su Tumblr e Twitter.

Passaggio 1: client e server

In informatica, client-server è un modello software composto da due parti: un client e un server. Entrambi comunicano su una rete di computer o insieme sullo stesso computer. Il client è un programma o un computer con un software che si basa sull'invio di richieste di servizio a un server. Il server è un programma per computer o un dispositivo in grado di accettare queste richieste, elaborarle e restituire le informazioni richieste al client. A volte è difficile capire quale sia l'altro quando si lavora con macchine che svolgono più attività contemporaneamente. Ecco alcune caratteristiche per aiutarti a distinguere un client e un server.

Caratteristiche del cliente:

• È il primo attivo
• Invia richieste al server
• Si aspetta e riceve risposte dal server
• Di solito interagisce direttamente con gli utenti finali utilizzando qualsiasi interfaccia utente come l'interfaccia utente grafica

Caratteristiche del server:

• Inizialmente è passivo
• È in ascolto, pronto a rispondere alle richieste inviate dai clienti
• quando arriva una richiesta, risponde con i dati richiesti ai clienti
• Gli utenti finali in genere non interagiscono direttamente con un server, ma utilizzano un client.

Un esempio comune di relazione tra client e server è un browser Web (client) che richiede e riceve file di pagine Web ospitati su un server Web.

Passaggio 2: creare un server Web locale

Il Raspberry Pi può diventare un server web installando ed eseguendo un'applicazione server. Due popolari applicazioni server open source sono: NGINX (pronunciato motore x) e Apache. In questa lezione utilizzerai Apache perché, al momento della stesura di questo documento, è più ampiamente documentato. Ciò semplifica la ricerca di risposte online man mano che impari.

Il tuo Raspberry Pi ospiterà un sito Web a cui può accedere qualsiasi dispositivo sulla stessa rete. Iniziamo!

Passaggio 3: installa Apache

Installa il pacchetto apache2. Il flag -y risponde automaticamente alla domanda di sicurezza pre-installazione.

sudo apt-get install apache2 -y

Apache viene fornito con un file HTML di prova che genera una pagina Web segnaposto con cui testare l'installazione. Questo file HTML di prova si trova nella directory principale di Apache. Per impostazione predefinita, Apache è impostato per cercare in questa directory i documenti Web per creare contenuti all'interno di un browser Web. Per dare un'occhiata a questa pagina di prova e confermare che Apache è stato effettivamente installato correttamente, richiamalo nel tuo browser web digitando questo indirizzo URL:

localhost/

Se Apache è installato correttamente, nel browser verrà visualizzata la pagina Web di test di Apache:

Trova l'indirizzo IP del tuo Raspberry Pi

È possibile utilizzare l'indirizzo localhost per accedere alla pagina Web mentre si è sul Raspberry Pi. Per accedere alla pagina web da un altro computer è necessario l'indirizzo IP del tuo Raspberry Pi. Per trovare il tipo di indirizzo IP in LXTerminal:

ifconfig

Puoi trovarlo anche sul desktop posizionando il cursore sul simbolo della ricezione WiFi.

Passaggio 4: crea una pagina Web statica

Il tuo Raspberry Pi ora può ospitare una pagina web e tutti i contenuti che verranno pubblicati su di essa. Ci sono due tipi fondamentali di pagine web: statiche e dinamiche. Una pagina statica ha un contenuto che non cambia. Una pagina dinamica è in grado di visualizzare i dati che cambiano come le letture del sensore o la modifica dell'ora e della data.

Iniziamo con una pagina statica. Per crearne uno è necessario utilizzare un linguaggio chiamato HTML. Quando vai su una pagina web la prima cosa che vedi visualizzata è probabilmente una pagina index.html. Questa pagina è la pagina predefinita che un browser mostra se non viene specificata un'altra pagina. Per impostazione predefinita, Apache cerca il file index.html qui:

/var/www/html

Questa è chiamata root del documento ed è una cartella nascosta. È designato per contenere pagine web. Vai lì e dai un'occhiata in giro:

cd /var/www/html

ls

Vedrai elencato il file index.html di prova predefinito. Se vuoi salvare il file predefinito, rinominalo in qualcosa come defaultIndex.html usando il comando mv.

sudo mv index.html defaultIndex.html

se non vuoi salvarlo, rimuovi il file usando il comando rm:

sudo rm index.html

Ora puoi creare e iniziare a modificare il tuo file index.html:

sudo nano index.html

Ricorda di usare sudo, le directory www e html sono di proprietà di root, quindi devi agire come root per creare, modificare e manipolare tutti i file che vivono in quelle directory.

Pagina HTML di base

L'HTML è un linguaggio che va in profondità. Puoi fare molto con esso. Se sei interessato a saperne di più, dai un'occhiata al sito Web di W3Schools dove puoi trovare molti tutorial su come utilizzare l'HTML per creare un sito Web. Inizieremo con una semplice pagina HTML.

Innanzitutto, comunica al browser quale versione di HTML stai utilizzando. Questo documento è dichiarato come documento HTML5:

Inizia con i tag html e body:

La maggior parte dei tuoi contenuti va dopo, tra i tag del corpo. Rendi la prima riga un'intestazione con il tag h1. Il numero dopo la "h" definisce l'importanza dell'intestazione che influenza la dimensione del carattere. Usa il tag p per definire un paragrafo:

Il mio Raspberry Pi ha un sito web

Cosa devo mettere qui?

Termina la pagina chiudendo il corpo e html e tag:

Salva il documento con il suffisso.html e visita localhost nel tuo browser. Vedrai la tua pagina web!

Cosa inserire nella pagina web? Mettiamo un'immagine, o meglio ancora, l'animateMe.gif! Affinché qualsiasi risorsa venga visualizzata su questa pagina Web, deve essere inserita nella radice dei documenti di Apache. Dovresti copiarlo e incollarlo in modo che rimanga anche nella tua directory boof/fotos. Per copiare e incollare un file nella riga di comando usa il comando cp. Innanzitutto, cd nella tua directory home:

cd ~

Copia e incolla il file animateMe.gif:

sudo cp boof/fotos/animateMe-g.webp

Torna alla directory html:

cd /var/www/html

Riapri il file index.html in modo da poter aggiungere l'immagine:

sudo nano index.html

Per definire e incorporare un'immagine in una pagina HTML utilizzare il tag img. Metti la seguente riga tra l'intestazione e il paragrafo.

Apri la pagina nel browser e apparirà così tranne che con la tua elegante-g.webp

Passaggio 5: aggiungi un po' di stile

La pagina sembra un po' insipida. Nessun colore e nessuno stile. È qui che entra in gioco CSS. È un linguaggio che lavora di pari passo con l'HTML per rendere una pagina web più attraente e visivamente creativa. Toccherai solo qui, ma se vuoi saperne di più, vai su W3schools per saperne di più.

Ad esempio, cambiamo il colore dello sfondo aggiungendo CSS al tuo file HTML. Ci sono diversi modi per dare uno stile alla tua pagina web usando i CSS. Per questa classe, utilizzerai i tag di stile per incorporare CSS direttamente nel tuo file HTML.

Inserisci le seguenti righe tra i primi tag html e body nella parte superiore della tua pagina HTML:

body {colore di sfondo: powderblue;} tag. Apparirà così:

corpo {colore di sfondo: azzurro polvere;}

Passaggio 6: installa PHP

Invece di una pagina statica, puoi crearne una dinamica in grado di cambiare senza che tu debba caricare manualmente i file su di essa. Un modo popolare per farlo è usare un linguaggio di script chiamato PHP. Per utilizzare PHP sul Raspberry Pi devi prima installarlo con il pacchetto del modulo per Apache:

sudo apt-get install libapache2-mod-php5 php5 -y

Passaggio 7: crea una pagina Web dinamica

Combina PHP con HTML Finché il codice PHP è contenuto all'interno dei tag, puoi includerlo in una struttura di file HTML. Ad esempio, combina i tuoi attuali script HTML e PHP e ingrandisci il testo utilizzando i tag HTML.

Includiamo un semplice script PHP che visualizza la data e l'ora. Incolla quanto segue ovunque tra i tag:

Salva il file con Ctrl + o ma cambia l'estensione da.html a.php, che salverà un nuovo file. Per non confondere il browser, rimuovi la vecchia versione.html:

sudo rm index.html

Aggiorna localhost nel tuo browser web. L'output sarà simile a questo:

Ok, allora qual è la differenza? Sembra una normale pagina HTML, vero? Aggiorna la pagina e guarda la magia. La magia è che il tempo cambierà! Questo è PHP e la sua funzione date() integrata che lavorano per creare una pagina web dinamica.

Passaggio 8: creare un client API di Tumblr

Il Raspberry Pi può richiedere e ottenere informazioni da altre applicazioni software online tramite un'API (Application Programming Interface). Un'API rende facile per qualcosa come il Raspberry Pi tagliare tutti i dati di un sito Web per afferrare solo le cose utili. Fai in modo che il tuo Raspberry Pi parli con Tumblr, Twitter e weather.com per twittare, pubblicare immagini e visualizzare le previsioni del tempo.

Raspberry Pi e Tumblr

Il seguente esercizio crea una conversazione tra il tuo Raspberry Pi e Tumblr. Come client, il tuo Raspberry Pi chiederà a Tumblr frammenti di dati in modo che possa caricare immagini sul server remoto di Tumblr, con conseguente pubblicazione delle immagini su un account Tumblr. Per far funzionare un Raspberry Pi con un'API, molto probabilmente ci sarà già una libreria da usare. Per Tumblr c'è Pytumblr. Un client viene creato in un programma Python utilizzando una funzione integrata creata in Pytumblr. Questa funzione utilizza quattro codici di autorizzazione generati da Tumblr:

• chiave del consumatore
• segreto del consumatore
• chiave token
• token segreto

Prima di poter utilizzare l'API di Tumblr devi ottenere quattro di queste chiavi (simili alle password). Per ottenerli segui questi passaggi:

1. Crea un account Tumblr gratuito e accedi.
2. Registra un'applicazione. Devi solo fornire informazioni di base come un titolo (prova "My Raspberry Pi"), descrizione, e-mail e sito web (usa questo se non ne hai uno). Dopo la registrazione, riceverai una chiave del consumatore e un segreto del consumatore. Copiali e incollali in un posto sicuro, come un file di testo o un'e-mail. Per accedervi nuovamente, vai alla pagina del tuo account Tumblr, scegli Impostazioni nel menu Account e fai clic su App.
3. Accedi alla console per sviluppatori utilizzando la tua chiave e i codici di autorizzazione segreti. Fai clic su Consenti quando ti viene chiesto se desideri che venga pubblicato per tuo conto.
4. Una volta effettuato l'accesso alla console degli sviluppatori, vedrai il codice di esempio in diverse lingue. Fai clic sulla scheda Python e copia il blocco OAuth, oppure nel menu in alto fai clic su Mostra chiavi per vedere la chiave del token e i codici segreti del token insieme ai due codici che già possiedi.

Mettiamo in funzione questi codici e creiamo un programma Python che pubblichi il file animateMe-g.webp

Prima installa Pytumblr:

sudo apt-get update

sudo pip install pytumblr

Dalla tua home directory, cd nella cartella boof e crea un file Python:

cd boof

Crea il tuo file utilizzando l'editor di IDLE per semplificare il taglio e l'incollaggio dei tuoi codici di autorizzazione molto lunghi. Inserisci questo nel tuo file testPytumblr.py, aggiornando le quattro chiavi e il tuo nome utente:

import pytumblr

# Autentica tramite OAuth, copia da https://api.tumblr.com/console/calls/user/info client = pytumblr. TumblrRestClient('your_consumer_key', 'your_consumer_secret', 'your_token', 'your_token_secret') client.create. 'your_account_username', state="published", tags=[“raspberrypi”, “picamera”], data="fotos/animateMe.gif") print("uploaded")

Il programma contrassegna la foto caricata per te con "raspberrypi" e "picamera". Se lo desideri, puoi rimuovere, sostituire o aggiungere a questi tag. Questi sono memorizzati in una variabile chiamata tag utilizzata in client.create_photo().

Premi F5 per eseguire il programma. Ci sarà un errore… ma hai già installato Pytumblr, quindi perché Python dice che non riesce a trovare il modulo? Questo perché Pytumblr non supporta Python 3, funziona solo in Python 2*. Apri l'editor IDLE di Python 2 e taglia e incolla il tuo codice, sovrascrivi il programma Python 3 e quindi eseguilo. Quando ha caricato la GIF, "caricato" verrà stampato nella finestra della shell Python.

Questa è la parte emozionante! Vai alla tua pagina Tumblr e guarda la GIF! Scambia "pubblicato" nel tuo programma con "bozza" se desideri invece creare bozze di post.

*Dopo che questa classe è stata pubblicata, un altro utente github ha biforcato l'originale, aggiungendo il supporto per Python 3 per alcuni comandi.

Se il post non viene visualizzato, ricontrolla di aver inserito correttamente le quattro chiavi e il nome utente Tumblr e che la connessione Internet del tuo Pi sia attiva. Puoi anche eseguire il tuo script dalla riga di comando usando Python 2 (cd nella tua cartella boof se non ci sei già):

python testPytumblr.py

Passaggio 9: fai uno screenshot di Tumblr e/o del sito web

Crea un sito Web per visualizzare una-g.webp