Σύνδεση του Raspberry Pi με τον Ιστό: 9 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:33

Σε αυτό το μάθημα, θα μάθετε πώς να δημιουργείτε μια ιστοσελίδα, να συλλέγετε δεδομένα χρησιμοποιώντας τον παγκόσμιο ιστό και να χρησιμοποιείτε API για να δημοσιεύετε εικόνες στο Tumblr και στο Twitter.

Βήμα 1: Πελάτης και διακομιστής

Στην πληροφορική, ο πελάτης-διακομιστής είναι ένα μοντέλο λογισμικού που αποτελείται από δύο μέρη: έναν πελάτη και έναν διακομιστή. Και οι δύο επικοινωνούν μέσω ενός δικτύου υπολογιστών ή μαζί στον ίδιο υπολογιστή. Ο πελάτης είναι ένα πρόγραμμα ή ένας υπολογιστής με λογισμικό που βασίζεται στην υποβολή αιτήσεων υπηρεσίας σε διακομιστή. Ο διακομιστής είναι ένα πρόγραμμα υπολογιστή ή μια συσκευή που μπορεί να αποδεχθεί αυτά τα αιτήματα, να τα επεξεργαστεί και να επιστρέψει τις ζητούμενες πληροφορίες στον πελάτη. Μερικές φορές είναι δύσκολο να καταλάβουμε ποιο είναι αυτό όταν εργάζεστε με μηχανές που εκτελούν πολλές εργασίες ταυτόχρονα. Ακολουθούν ορισμένα χαρακτηριστικά που θα σας βοηθήσουν να ξεχωρίσετε έναν πελάτη και έναν διακομιστή.

Χαρακτηριστικά πελάτη:

• Είναι το πρώτο ενεργό
• Στέλνει αιτήματα στον διακομιστή
• Αναμένει και λαμβάνει απαντήσεις από τον διακομιστή
• Συνήθως αλληλεπιδρά άμεσα με τους τελικούς χρήστες χρησιμοποιώντας οποιαδήποτε διεπαφή χρήστη, όπως γραφική διεπαφή χρήστη

Χαρακτηριστικά διακομιστή:

• Αρχικά είναι παθητικό
• Ακούει, είναι έτοιμο να απαντήσει σε αιτήματα που στέλνουν οι πελάτες
• όταν έρχεται ένα αίτημα, απαντά με τα ζητούμενα δεδομένα στους πελάτες
• Οι τελικοί χρήστες συνήθως δεν αλληλεπιδρούν απευθείας με έναν διακομιστή, αλλά χρησιμοποιούν έναν πελάτη.

Ένα κοινό παράδειγμα σχέσης πελάτη και διακομιστή είναι ένα πρόγραμμα περιήγησης ιστού (πελάτης) που ζητά και λαμβάνει αρχεία ιστοσελίδων που φιλοξενούνται σε διακομιστή ιστού.

Βήμα 2: Δημιουργήστε έναν τοπικό διακομιστή Web

Το Raspberry Pi μπορεί να γίνει διακομιστής ιστού εγκαθιστώντας και τρέχοντας μια εφαρμογή διακομιστή. Δύο δημοφιλείς εφαρμογές διακομιστή ανοιχτού κώδικα είναι: NGINX (προφέρεται κινητήρας x) και Apache. Σε αυτό το μάθημα, θα χρησιμοποιήσετε το Apache επειδή, από τη στιγμή που γράφεται, είναι πιο τεκμηριωμένο. Αυτό διευκολύνει την αναζήτηση απαντήσεων στο διαδίκτυο καθώς μαθαίνετε.

Το Raspberry Pi θα φιλοξενήσει έναν ιστότοπο στον οποίο μπορεί να έχει πρόσβαση οποιαδήποτε συσκευή στο ίδιο δίκτυο. Ας αρχίσουμε!

Βήμα 3: Εγκαταστήστε το Apache

Εγκαταστήστε το πακέτο apache2. Η σημαία -y απαντά στην ερώτηση ασφαλείας προεγκατάστασης για εσάς.

sudo apt -get install apache2 -y

Το Apache συνοδεύεται από ένα δοκιμαστικό αρχείο HTML που δημιουργεί μια ιστοσελίδα κράτησης θέσης για δοκιμή της εγκατάστασης. Αυτό το δοκιμαστικό αρχείο HTML έρχεται στον ριζικό κατάλογο του Apache. Από προεπιλογή, το Apache έχει ρυθμιστεί να αναζητά σε αυτόν τον κατάλογο έγγραφα ιστού για τη δημιουργία περιεχομένου σε ένα πρόγραμμα περιήγησης ιστού. Για να ρίξετε μια ματιά σε αυτήν τη δοκιμαστική σελίδα και να επιβεβαιώσετε ότι το Apache πράγματι εγκατέστησε σωστά, τραβήξτε το στο πρόγραμμα περιήγησής σας, πληκτρολογώντας αυτήν τη διεύθυνση URL:

localhost/

Εάν το Apache εγκατασταθεί σωστά, θα δείτε τη δοκιμαστική ιστοσελίδα Apache στο πρόγραμμα περιήγησης:

Βρείτε τη διεύθυνση IP του Raspberry Pi

Μπορείτε να χρησιμοποιήσετε τη διεύθυνση localhost για πρόσβαση στην ιστοσελίδα ενώ βρίσκεστε στο Raspberry Pi. Για να αποκτήσετε πρόσβαση στην ιστοσελίδα από άλλο υπολογιστή, χρειάζεστε τη διεύθυνση IP του Raspberry Pi. Για να βρείτε τον τύπο διεύθυνσης IP στο LXTerminal:

ifconfig

Μπορείτε επίσης να το βρείτε στην επιφάνεια εργασίας εάν τοποθετήσετε τον κέρσορα πάνω από το σύμβολο λήψης WiFi.

Βήμα 4: Δημιουργήστε μια στατική ιστοσελίδα

Το Raspberry Pi σας μπορεί τώρα να φιλοξενήσει μια ιστοσελίδα και όλο το περιεχόμενο που θα δημοσιευτεί σε αυτήν. Υπάρχουν δύο βασικά είδη ιστοσελίδων: στατικές και δυναμικές. Μια στατική σελίδα έχει περιεχόμενο που δεν αλλάζει. Μια δυναμική σελίδα μπορεί να εμφανίζει μεταβαλλόμενα δεδομένα, όπως οι ενδείξεις των αισθητήρων ή η αλλαγή της ώρας και της ημερομηνίας.

Ας ξεκινήσουμε με μια στατική σελίδα. Για να δημιουργήσετε μία πρέπει να χρησιμοποιήσετε μια γλώσσα που ονομάζεται HTML. Όταν πηγαίνετε σε μια ιστοσελίδα, το πρώτο πράγμα που βλέπετε είναι πιθανώς μια σελίδα index.html. Αυτή η σελίδα είναι η προεπιλεγμένη σελίδα που εμφανίζει ένα πρόγραμμα περιήγησης εάν δεν έχει καθοριστεί άλλη σελίδα. Από προεπιλογή, το Apache αναζητά το αρχείο index.html εδώ:

/var/www/html

Αυτό ονομάζεται ρίζα εγγράφου και είναι ένας κρυμμένος φάκελος. Έχει οριστεί για τη διατήρηση ιστοσελίδων. Πηγαίνετε εκεί και ρίξτε μια ματιά τριγύρω:

cd/var/www/html

ls

Θα δείτε το προεπιλεγμένο αρχείο δοκιμής index.html στη λίστα. Εάν θέλετε να αποθηκεύσετε το προεπιλεγμένο αρχείο, μετονομάστε το σε κάτι σαν defaultIndex.html χρησιμοποιώντας την εντολή mv.

sudo mv index.html defaultIndex.html

Εάν δεν θέλετε να το αποθηκεύσετε, αφαιρέστε το αρχείο χρησιμοποιώντας την εντολή rm:

sudo rm index.html

Τώρα, μπορείτε να δημιουργήσετε και να αρχίσετε να επεξεργάζεστε το δικό σας αρχείο index.html:

sudo nano index.html

Θυμηθείτε να χρησιμοποιήσετε το sudo, οι κατάλογοι www και html ανήκουν στη root, οπότε πρέπει να λειτουργήσετε ως root για να δημιουργήσετε, να επεξεργαστείτε και να χειριστείτε τυχόν αρχεία που ζουν σε αυτούς τους καταλόγους.

Βασική σελίδα HTML

Η HTML είναι μια γλώσσα που πηγαίνει βαθιά. Μπορείτε να κάνετε πολλά με αυτό. Εάν ενδιαφέρεστε να μάθετε περισσότερα, ανατρέξτε στον ιστότοπο του W3Schools, όπου μπορείτε να βρείτε πολλά σεμινάρια για το πώς να χρησιμοποιήσετε το HTML για τη δημιουργία ενός ιστότοπου. Θα ξεκινήσουμε με μια απλή σελίδα HTML.

Πρώτα, πείτε στο πρόγραμμα περιήγησης ποια έκδοση του HTML χρησιμοποιείτε. Αυτό το έγγραφο δηλώνεται ως έγγραφο HTML5:

Ξεκινήστε με τις ετικέτες html και body:

Το μεγαλύτερο μέρος του περιεχομένου σας ακολουθεί, μεταξύ των ετικετών του σώματος. Κάντε την πρώτη γραμμή επικεφαλίδα με την ετικέτα h1. Ο αριθμός μετά το "h" καθορίζει τη σημασία της επικεφαλίδας που επηρεάζει το μέγεθος της γραμματοσειράς. Χρησιμοποιήστε την ετικέτα p για να ορίσετε μια παράγραφο:

Το My Raspberry Pi έχει ιστοσελίδα

Τι να βάλω εδώ;

Ολοκληρώστε τη σελίδα κλείνοντας το σώμα και το html και τις ετικέτες:

Αποθηκεύστε το έγγραφο με το επίθημα.html και επισκεφτείτε το localhost στο πρόγραμμα περιήγησής σας. Θα δείτε την ιστοσελίδα σας!

Τι πρέπει να βάλετε στην ιστοσελίδα; Ας βάλουμε μια εικόνα, ή ακόμα καλύτερα, το animateMe.gif! Για να εμφανιστεί οποιοδήποτε περιουσιακό στοιχείο σε αυτήν την ιστοσελίδα πρέπει να το τοποθετήσετε στη ρίζα εγγράφων του Apache. Θα πρέπει να το αντιγράψετε και να το επικολλήσετε ώστε να παραμείνει στον κατάλογο boof/fotos. Για να αντιγράψετε και να επικολλήσετε ένα αρχείο στη γραμμή εντολών, χρησιμοποιήστε την εντολή cp. Πρώτα, στείλτε το cd στον αρχικό σας κατάλογο:

cd

Αντιγράψτε και επικολλήστε το αρχείο animateMe.gif:

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

Επιστρέψτε στον κατάλογο html:

cd/var/www/html

Ανοίξτε ξανά το αρχείο index.html για να προσθέσετε την εικόνα:

sudo nano index.html

Για να ορίσετε και να ενσωματώσετε μια εικόνα σε μια σελίδα HTML, χρησιμοποιήστε την ετικέτα img. Βάλτε την ακόλουθη γραμμή μεταξύ της επικεφαλίδας και της παραγράφου.

Ανοίξτε τη σελίδα στο πρόγραμμα περιήγησης και θα μοιάζει με αυτό εκτός από το δικό σας κομψό-g.webp

Βήμα 5: Προσθέστε λίγο στυλ

Η σελίδα φαίνεται λίγο ήπια. Χωρίς χρώμα και χωρίς στυλ. Εδώ έρχεται το CSS. Είναι μια γλώσσα που λειτουργεί χέρι-χέρι με την HTML για να κάνει μια ιστοσελίδα πιο ελκυστική και οπτικά δημιουργική. Θα θίξετε μόνο εδώ, αλλά αν θέλετε να μάθετε περισσότερα προχωρήστε στα σχολεία W3 για να μάθετε περισσότερα.

Για παράδειγμα, ας αλλάξουμε το χρώμα του φόντου προσθέτοντας CSS στο αρχείο HTML. Υπάρχουν διάφοροι τρόποι για να μορφοποιήσετε την ιστοσελίδα σας χρησιμοποιώντας CSS. Για αυτήν την τάξη, θα χρησιμοποιήσετε τις ετικέτες στυλ για να ενσωματώσετε το CSS απευθείας στο αρχείο HTML.

Τοποθετήστε τις ακόλουθες γραμμές μεταξύ των πρώτων ετικετών html και body στο επάνω μέρος της σελίδας HTML:

ετικέτες σώματος {background-color: powderblue;}. Θα μοιάζει με αυτό:

σώμα {φόντο-χρώμα: μπλε πούδρα;}

Βήμα 6: Εγκαταστήστε την PHP

Αντί για μια στατική σελίδα, μπορείτε να δημιουργήσετε μια δυναμική που να μπορεί να αλλάξει χωρίς να ανεβάζετε μη αυτόματα αρχεία σε αυτήν. Ένας δημοφιλής τρόπος για να γίνει αυτό είναι να χρησιμοποιήσετε μια γλώσσα δέσμης ενεργειών που ονομάζεται PHP. Για να χρησιμοποιήσετε την PHP στο Raspberry Pi πρέπει πρώτα να την εγκαταστήσετε με πακέτο λειτουργικής μονάδας για το Apache:

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

Βήμα 7: Δημιουργήστε μια δυναμική ιστοσελίδα

Συνδυάστε PHP με HTMLA Εφόσον ο κώδικας PHP περιέχεται σε ετικέτες, μπορείτε να το συμπεριλάβετε σε μια δομή αρχείου HTML. Για παράδειγμα, συνδυάστε τα τρέχοντα σενάρια HTML και PHP και κάντε το κείμενο μεγαλύτερο χρησιμοποιώντας ετικέτες HTML.

Ας συμπεριλάβουμε ένα απλό σενάριο PHP που εμφανίζει την ημερομηνία και την ώρα. Επικολλήστε τα παρακάτω οπουδήποτε μεταξύ των ετικετών:

Αποθηκεύστε το αρχείο με Ctrl + o αλλά αλλάξτε την επέκταση από.html σε.php, το οποίο θα αποθηκεύσει ένα νέο αρχείο. Για να μην μπερδέψετε το πρόγραμμα περιήγησης, αφαιρέστε την παλιά έκδοση.html:

sudo rm index.html

Ανανεώστε το localhost στο πρόγραμμα περιήγησής σας. Η έξοδος θα μοιάζει με αυτήν:

Εντάξει, ποια είναι η διαφορά; Μοιάζει με μια κανονική σελίδα HTML, έτσι δεν είναι; Ανανεώστε τη σελίδα και δείτε τη μαγεία. Η μαγεία ότι ο χρόνος θα αλλάξει! Αυτή είναι η PHP και η ενσωματωμένη λειτουργία ημερομηνίας () που λειτουργεί για να δημιουργήσετε μια δυναμική ιστοσελίδα.

Βήμα 8: Δημιουργήστε έναν πελάτη API Tumblr

Το Raspberry Pi μπορεί να ζητήσει και να λάβει πληροφορίες από άλλες εφαρμογές λογισμικού online μέσω ενός API (διεπαφή προγραμματισμού εφαρμογών). Ένα API διευκολύνει κάτι σαν το Raspberry Pi να κόψει όλα τα δεδομένα ενός ιστότοπου για να πάρει μόνο τα χρήσιμα πράγματα. Ζητήστε από το Raspberry Pi να μιλήσει με το Tumblr, το Twitter και το weather.com για να κάνει tweet, να δημοσιεύσει εικόνες και να προβάλει προβλέψεις καιρού.

Raspberry Pi και Tumblr

Η παρακάτω άσκηση δημιουργεί μια συνομιλία μεταξύ του Raspberry Pi και του Tumblr. Ως πελάτης, το Raspberry Pi θα ζητά από το Tumblr αποσπάσματα δεδομένων, ώστε να μπορεί να ανεβάζει εικόνες στον απομακρυσμένο διακομιστή του Tumblr, με αποτέλεσμα οι εικόνες να αναρτώνται σε λογαριασμό Tumblr. Για να δουλέψετε ένα Raspberry Pi με ένα API, πιθανότατα θα υπάρχει ήδη μια βιβλιοθήκη για να τη χρησιμοποιήσετε. Για το Tumblr υπάρχει το Pytumblr. Ένας πελάτης δημιουργείται σε ένα πρόγραμμα Python χρησιμοποιώντας μια ενσωματωμένη συνάρτηση που δημιουργήθηκε στο Pytumblr. Αυτή η λειτουργία χρησιμοποιεί τέσσερις κωδικούς εξουσιοδότησης που δημιουργήθηκαν από το Tumblr:

• κλειδί καταναλωτή
• καταναλωτικό μυστικό
• διακριτικό κλειδί
• μυστικό μυστικό

Για να μπορέσετε να χρησιμοποιήσετε το API του Tumblr, πρέπει να λάβετε τέσσερα αυτά τα κλειδιά (παρόμοια με τους κωδικούς πρόσβασης). Για να τα αποκτήσετε ακολουθήστε τα εξής βήματα:

1. Δημιουργήστε έναν δωρεάν λογαριασμό Tumblr και συνδεθείτε.
2. Εγγραφή αίτησης. Χρειάζεται μόνο να δώσετε βασικές πληροφορίες, όπως έναν τίτλο (δοκιμάστε "My Raspberry Pi"), περιγραφή, email και ιστότοπο (χρησιμοποιήστε αυτόν εάν δεν έχετε). Μετά την εγγραφή, θα λάβετε ένα καταναλωτικό κλειδί και ένα καταναλωτικό μυστικό. Αντιγράψτε και επικολλήστε τα σε ασφαλές μέρος, όπως ένα αρχείο κειμένου ή ένα email. Για να αποκτήσετε ξανά πρόσβαση σε αυτά, μεταβείτε στη σελίδα του λογαριασμού σας στο Tumblr, επιλέξτε Ρυθμίσεις στο μενού Λογαριασμός και κάντε κλικ στις Εφαρμογές.
3. Συνδεθείτε στην κονσόλα προγραμματιστή χρησιμοποιώντας τα κλειδιά και τους μυστικούς κωδικούς εξουσιοδότησης. Κάντε κλικ στο άδεια όταν σας ζητηθεί αν θέλετε να δημοσιεύσει για λογαριασμό σας.
4. Μόλις συνδεθείτε στην κονσόλα προγραμματιστή, θα δείτε παράδειγμα κώδικα σε πολλές διαφορετικές γλώσσες. Είτε κάντε κλικ στην καρτέλα Python και αντιγράψτε το μπλοκ OAuth, είτε στο επάνω μενού κάντε κλικ στην επιλογή Εμφάνιση κλειδιών για να δείτε το κλειδί διακριτικού και τους μυστικούς κωδικούς συμβόλων μαζί με τους δύο κωδικούς που έχετε ήδη.

Ας θέσουμε σε λειτουργία αυτούς τους κωδικούς και δημιουργήστε ένα πρόγραμμα Python που δημοσιεύει το animateMe-g.webp

Πρώτη εγκατάσταση του Pytumblr:

sudo apt-get ενημέρωση

sudo pip install pytumblr

Από τον αρχικό σας κατάλογο, μεταφέρετε cd στον φάκελο boof και δημιουργήστε ένα αρχείο Python:

cd boof

Δημιουργήστε το αρχείο σας χρησιμοποιώντας το πρόγραμμα επεξεργασίας IDLE για να διευκολύνετε την αποκοπή και επικόλληση των πολύ μεγάλων κωδικών εξουσιοδότησής σας. Βάλτε το στο αρχείο testPytumblr.py, ενημερώνοντας τα τέσσερα κλειδιά και το όνομα χρήστη σας:

εισαγωγή pytumblr

# Πιστοποιεί μέσω OAuth, αντιγράψτε από https://api.tumblr.com/console/calls/user/info client = pytumblr. TumblrRestClient ('your_consumer_key', 'your_consumer_secret', 'your_token', 'your_token_secret') 'your_account_username', state = "published", tags = ["raspberrypi", "picamera"], data = "fotos/animateMe.gif") print ("uploaded")

Το πρόγραμμα επισημαίνει τη φωτογραφία που έχετε ανεβάσει για εσάς με "raspberrypi" και "picamera". Εάν επιθυμείτε, μπορείτε να αφαιρέσετε, να αντικαταστήσετε ή να προσθέσετε σε αυτές τις ετικέτες. Αυτά αποθηκεύονται σε μια μεταβλητή που ονομάζεται ετικέτες που χρησιμοποιείται στο client.create_photo ().

Πατήστε F5 για να εκτελέσετε το πρόγραμμα. Θα υπάρξει σφάλμα… αλλά έχετε ήδη εγκαταστήσει το Pytumblr, γιατί η Python λέει ότι δεν μπορεί να βρει τη μονάδα; Αυτό συμβαίνει επειδή το Pytumblr δεν υποστηρίζει Python 3, λειτουργεί μόνο σε Python 2*. Ανοίξτε τον επεξεργαστή Python 2 IDLE και κόψτε και επικολλήστε τον κώδικά σας, αντικαταστήστε το πρόγραμμα Python 3 και στη συνέχεια εκτελέστε το. Όταν ανεβάσει το GIF, το "uploaded" θα εκτυπωθεί στο παράθυρο του κελύφους Python.

Αυτό είναι το συναρπαστικό μέρος! Μεταβείτε στη σελίδα σας στο Tumblr και δείτε το GIF! Αντικαταστήστε "δημοσιευμένο" στο πρόγραμμά σας σε "πρόχειρο" εάν θέλετε να δημιουργήσετε πρόχειρα δημοσιεύματα.

*Μετά τη δημοσίευση αυτής της κατηγορίας, ένας άλλος χρήστης του github πήρε το πρωτότυπο, προσθέτοντας υποστήριξη για Python 3 για ορισμένες εντολές.

Εάν η ανάρτηση δεν εμφανίζεται, ελέγξτε ξανά ότι έχετε εισαγάγει σωστά τα τέσσερα κλειδιά και το όνομα χρήστη του Tumblr και ότι η σύνδεση Pi στο διαδίκτυο είναι ενεργή. Μπορείτε επίσης να εκτελέσετε το σενάριό σας από τη γραμμή εντολών χρησιμοποιώντας το Python 2 (cd στο boof του φακέλου σας αν δεν είστε ήδη εκεί):

python testPytumblr.py

Βήμα 9: Πάρτε ένα στιγμιότυπο οθόνης του Tumblr και/ή του ιστότοπου

Δημιουργήστε έναν ιστότοπο για να εμφανίσετε ένα-g.webp