Ansluta din Raspberry Pi till webben: 9 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:40

I den här lektionen får du lära dig hur du skapar en webbsida, samlar in data med hjälp av world wide web och använder API: er för att lägga upp bilder på Tumblr och Twitter.

Steg 1: Klient och server

Inom databehandling är klient-server en mjukvarumodell som består av två delar: en klient och en server. Båda kommunicerar över ett datornätverk eller tillsammans på samma dator. Klienten är ett program eller en dator med programvara som är beroende av att göra servicebegäranden till en server. Servern är ett datorprogram eller en enhet som kan acceptera dessa förfrågningar, behandla dem och returnera den begärda informationen till klienten. Ibland är det svårt att ta reda på vilken som är vilken när man arbetar med maskiner som utför flera uppgifter samtidigt. Här är några egenskaper som hjälper dig att skilja en klient och en server åt.

Klientegenskaper:

• Det är den första aktiva
• Skickar förfrågningar till servern
• Den förväntar sig och tar emot svar från servern
• Vanligtvis interagerar direkt med slutanvändare med hjälp av alla användargränssnitt som grafiskt användargränssnitt

Serveregenskaper:

• Det är till en början passivt
• Det lyssnar, redo att svara på förfrågningar som skickas av kunder
• när en förfrågan kommer, svarar den med begärd data till klienterna
• Slutanvändare interagerar vanligtvis inte direkt med en server, utan använder en klient.

Ett vanligt exempel på en klient- och serverrelation är en webbläsare (klient) som begär och tar emot webbsidefiler som finns på en webbserver.

Steg 2: Skapa en lokal webbserver

Raspberry Pi kan bli en webbserver genom att installera och köra ett serverprogram. Två populära öppna källserverapplikationer är: NGINX (uttalad motor x) och Apache. I den här lektionen kommer du att använda Apache eftersom det i skrivande stund är tyngre dokumenterat. Detta gör det lättare att söka svar online när du lär dig.

Din Raspberry Pi kommer att vara värd för en webbplats som alla enheter i samma nätverk kan komma åt. Låt oss börja!

Steg 3: Installera Apache

Installera apache2 -paketet. Flaggan -y besvarar säkerhetsfrågan före installationen åt dig.

sudo apt -get install apache2 -y

Apache kommer med en test -HTML -fil som genererar en platshållarwebbsida att testa installationen med. Denna test -HTML -fil kommer i Apaches rotkatalog. Som standard är Apache inställd på att leta i den här katalogen efter webbdokument för att skapa innehåll i en webbläsare. För att ta en titt på denna testsida och bekräfta att Apache verkligen installerades korrekt, ta upp den i din webbläsare genom att skriva in denna URL -adress:

localhost/

Om Apache installeras korrekt ser du webbsidan för Apache -testet i webbläsaren:

Hitta din Raspberry Pi: s IP -adress

Du kan använda localhost -adressen för att komma åt webbsidan medan du är på Raspberry Pi. För att komma åt webbsidan från en annan dator behöver du din Raspberry Pi: s IP -adress. För att hitta IP -adresstypen i LXTerminal:

ifconfig

Du kan också hitta den på skrivbordet om du håller muspekaren över WiFi -mottagningssymbolen.

Steg 4: Skapa en statisk webbsida

Din Raspberry Pi kan nu vara värd för en webbsida och allt innehåll som kommer att publiceras på den. Det finns två grundläggande typer av webbsidor: statisk och dynamisk. En statisk sida har innehåll som inte ändras. En dynamisk sida kan visa ändrade data som sensoravläsningar eller ändring av tid och datum.

Låt oss börja med en statisk sida. För att skapa ett måste du använda ett språk som heter HTML. När du går till en webbsida är det första du ser visas troligen en index.html -sida. Denna sida är standardsidan som en webbläsare visar om en annan sida inte har angetts. Som standard letar Apache efter filen index.html här:

/var/www/html

Detta kallas dokumentrot, och det är en dold mapp. Det är avsett för att hålla webbsidor. Gå dit och titta runt:

cd/var/www/html

ls

Du kommer att se standardtestindex.html -filen listad. Om du vill spara standardfilen, byt namn på den till något som defaultIndex.html med kommandot mv.

sudo mv index.html defaultIndex.html

Om du inte vill spara den tar du bort filen med kommandot rm:

sudo rm index.html

Nu kan du skapa och börja redigera din egen index.html -fil:

sudo nano index.html

Kom ihåg att använda sudo, www och html kataloger ägs av root så du måste fungera som root för att skapa, redigera och manipulera alla filer som finns i dessa kataloger.

Grundläggande HTML -sida

HTML är ett språk som går djupt. Du kan göra mycket med det. Om du är intresserad av att ta reda på mer kolla in W3Schools webbplats där du kan hitta många självstudier om hur du använder HTML för att bygga en webbplats. Vi börjar med en enkel HTML -sida.

Berätta först för webbläsaren vilken version av HTML du använder. Detta dokument deklareras som ett HTML5 -dokument:

Börja med html- och body -taggarna:

Huvuddelen av ditt innehåll går nästa, mellan kroppstaggarna. Gör den första raden till en rubrik med h1 -taggen. Siffran efter "h" definierar vikten av rubriken som påverkar teckensnittets storlek. Använd p -taggen för att definiera ett stycke:

Min Raspberry Pi har en webbplats

Vad ska jag lägga här?

Avsluta sidan genom att stänga brödtexten och html och taggar:

Spara dokumentet med suffixet.html och besök localhost i din webbläsare. Du kommer att se din webbsida!

Vad ska du lägga på webbsidan? Låt oss lägga upp en bild, eller ännu bättre, animateMe.gif! För att någon tillgång ska kunna visas på denna webbsida måste den placeras i Apaches dokumentrot. Du bör kopiera och klistra in det så att det också finns kvar i din boof/fotos -katalog. För att kopiera och klistra in en fil på kommandoraden, använd kommandot cp. Först cd till din hemkatalog:

cd ~

Kopiera och klistra in animateMe-g.webp

sudo cp boof/fotos/animateMe.gif/var/www/html

Gå tillbaka till html -katalogen:

cd/var/www/html

Öppna index.html -filen igen så att du kan lägga till bilden:

sudo nano index.html

Använd img -taggen för att definiera och bädda in en bild på en HTML -sida. Sätt följande rad mellan rubriken och stycket.

Öppna sidan i webbläsaren så ser det ut så här utom med din egen snygga selfie -GIF.

Steg 5: Lägg till lite stil

Sidan ser lite tråkig ut. Ingen färg och ingen stil. Det är här CSS kommer in. Det är ett språk som fungerar hand i hand med HTML för att göra en webbsida mer attraktiv och visuellt kreativ. Du kommer bara att beröra här, men om du vill lära dig mer, gå över W3schools för att lära dig mer.

Som ett exempel, låt oss ändra färgen på bakgrunden genom att lägga till CSS i din HTML -fil. Det finns flera sätt att utforma din webbsida med hjälp av CSS. För den här klassen kommer du att använda stiltaggarna för att bädda in CSS direkt i din HTML -fil.

Sätt följande rader mellan de första html- och body -taggarna högst upp på din HTML -sida:

body {background-color: powderblue;} taggar. Det kommer att se ut så här:

kropp {bakgrundsfärg: pulverblå;}

Steg 6: Installera PHP

Istället för en statisk sida kan du skapa en dynamisk sida som kan ändras utan att du manuellt överför filer till den. Ett populärt sätt att göra detta är att använda ett skriptspråk som kallas PHP. För att använda PHP på Raspberry Pi måste du först installera det med modulpaket för Apache:

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

Steg 7: Skapa en dynamisk webbsida

Kombinera PHP med HTMLA så länge PHP -kod finns i taggar, du kan inkludera den i en HTML -filstruktur. Som ett exempel kan du kombinera dina nuvarande HTML- och PHP -skript och göra texten större med hjälp av HTML -taggar.

Låt oss inkludera ett enkelt PHP -skript som visar datum och tid. Klistra in följande var som helst mellan taggarna:

Spara filen med Ctrl + o men ändra tillägget från.html till.php, vilket sparar en ny fil. För att inte förvirra webbläsaren, ta bort den gamla.html -versionen:

sudo rm index.html

Uppdatera localhost i din webbläsare. Utgången kommer att se ut så här:

Ok, så vad är skillnaden? Det ser ut som en vanlig HTML -sida, eller hur? Uppdatera sidan och titta på magin. Det magiska är att tiden kommer att förändras! Det är PHP och dess inbyggda datum () -funktion som fungerar för dig att skapa en dynamisk webbsida.

Steg 8: Skapa en Tumblr API -klient

Raspberry Pi kan begära och få information från andra program online via ett API (Application Programming Interface). Ett API gör det enkelt för något som Raspberry Pi att skära igenom all data på en webbplats för att fånga bara användbara saker. Låt din Raspberry Pi prata med Tumblr, Twitter och weather.com för att tweeta, lägga upp bilder och visa väderprognoser.

Hallon Pi och Tumblr

Följande övning skapar en konversation mellan din Raspberry Pi och Tumblr. Som klient kommer din Raspberry Pi att be Tumblr om dataklipp så att den kan ladda upp bilder till Tumblrs fjärrserver, vilket resulterar i att bilderna läggs upp på ett Tumblr -konto. För att få en Raspberry Pi att arbeta med ett API kommer det troligen redan att finnas ett bibliotek där ute som du kan använda. För Tumblr finns Pytumblr. En klient skapas i ett Python-program med en inbyggd funktion skapad i Pytumblr. Denna funktion använder fyra behörighetskoder som genereras av Tumblr:

• konsumentnyckel
• konsumenthemlighet
• token nyckel
• token hemlighet

Innan du kan använda Tumblrs API måste du få fyra dessa nycklar (liknande lösenord). Följ dessa steg för att få dem:

1. Skapa ett gratis Tumblr -konto och logga in.
2. Registrera en ansökan. Du behöver bara ge grundläggande information som en titel (prova "My Raspberry Pi"), beskrivning, e -post och webbplats (använd den här om du inte har en). Efter registrering får du en konsumentnyckel och konsumenthemlighet. Kopiera och klistra in dem någonstans säkert, som en textfil eller e -post. För att komma åt dem igen, gå till din Tumblr -kontosida, välj Inställningar på Konto -menyn och klicka på Appar.
3. Logga in på utvecklarkonsolen med dina nycklar och hemliga behörighetskoder. Klicka på Tillåt när du tillfrågas om du vill att den ska publiceras för dina räkning.
4. När du har loggat in på utvecklarkonsolen ser du exempelkod på flera olika språk. Klicka antingen på Python -fliken och kopiera OAuth -blocket, eller klicka på Visa nycklar i toppmenyn för att se tokenyckeln och tokenhemliga koder tillsammans med de två koder du redan har.

Låt oss få dessa koder att fungera och göra ett Python -program som postar animateMe-g.webp

Första installationen av Pytumblr:

sudo apt-get uppdatering

sudo pip installera pytumblr

Från din hemkatalog, cd i mappen boof och skapa en Python -fil:

cd boof

Skapa din fil med IDLEs editor för att göra det lättare att klippa ut och klistra in dina mycket långa behörighetskoder. Lägg detta i din testPytumblr.py -fil och uppdatera de fyra nycklarna och ditt användarnamn:

importera pytumblr

# Autentiserar via OAuth, kopiera från https://api.tumblr.com/console/calls/user/info client = pytumblr. TumblrRestClient ('your_consumer_key', 'your_consumer_secret', 'your_token', 'your_token_secret') client.create_photo ('your_account_username', state = "published", tags = ["raspberrypi", "picamera"], data = "fotos/animateMe.gif") print ("uploaded")

Programmet märker det uppladdade fotot åt dig med "raspberrypi" och "picamera". Om du vill kan du ta bort, ersätta eller lägga till dessa taggar. Dessa lagras i en variabel som kallas taggar som används i client.create_photo ().

Tryck på F5 för att köra programmet. Det kommer att finnas ett fel … men du har redan installerat Pytumblr så varför säger Python att den inte kan hitta modulen? Detta beror på att Pytumblr inte stöder Python 3, det fungerar bara i Python 2*. Öppna Python 2 IDLE -redigeraren och klipp ut och klistra in din kod, skriv över Python 3 -programmet och kör det sedan. När den har laddat upp-g.webp

Detta är den spännande delen! Gå till din Tumblr -sida och kolla in GIF! Byt "publicerat" i ditt program till "utkast" om du istället vill skapa utkast till inlägg.

*Efter att denna klass publicerats har en annan github -användare gafflat originalet och lagt till stöd för Python 3 för vissa kommandon.

Om inlägget inte visas, dubbelkolla att du korrekt har angett dina fyra nycklar och Tumblr -användarnamn och att din Pi: s internetanslutning är aktiv. Du kan också köra ditt skript från kommandoraden med Python 2 (cd till din mappboof om du inte redan är där):

python testPytumblr.py

Steg 9: Ta en skärmdump av Tumblr och/eller webbplats

Skapa en webbplats för att visa en-g.webp