Menyambungkan Pi Raspberry Anda ke Web: 9 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:08

Dalam pelajaran ini, anda akan belajar bagaimana membuat halaman web, mengumpulkan data menggunakan web seluruh dunia, dan menggunakan API untuk menghantar gambar ke Tumblr dan Twitter.

Langkah 1: Pelanggan dan Pelayan

Dalam pengkomputeran, pelayan pelanggan adalah model perisian yang terdiri daripada dua bahagian: pelanggan dan pelayan. Kedua-duanya berkomunikasi melalui rangkaian komputer atau bersama-sama di komputer yang sama. Pelanggan adalah program atau komputer dengan perisian yang bergantung pada membuat permintaan perkhidmatan ke pelayan. Pelayan adalah program komputer atau peranti yang dapat menerima permintaan ini, memprosesnya, dan mengembalikan maklumat yang diminta kepada klien. Kadang-kadang sukar untuk mengetahui yang mana ketika bekerja dengan mesin yang melakukan banyak tugas sekaligus. Berikut adalah beberapa ciri untuk membantu anda membezakan pelanggan dan pelayan.

Ciri-ciri pelanggan:

• Ia adalah yang pertama aktif
• Menghantar permintaan ke pelayan
• Ia menjangkakan dan menerima respons dari pelayan
• Biasanya berinteraksi secara langsung dengan pengguna akhir menggunakan antara muka pengguna seperti antara muka pengguna grafik

Ciri pelayan:

• Pada mulanya ia pasif
• Ia mendengar, bersedia untuk menjawab permintaan yang dihantar oleh pelanggan
• apabila permintaan datang, balasan dengan data yang diminta kepada pelanggan
• Pengguna akhir biasanya tidak berinteraksi secara langsung dengan pelayan, tetapi menggunakan pelanggan.

Contoh umum hubungan pelanggan dan pelayan adalah penyemak imbas web (pelanggan) meminta dan menerima fail halaman web yang dihoskan di pelayan web.

Langkah 2: Buat Pelayan Web Tempatan

Raspberry Pi dapat menjadi pelayan web dengan memasang dan menjalankan aplikasi pelayan. Dua aplikasi pelayan sumber terbuka yang popular ialah: NGINX (diucapkan enjin x) dan Apache. Dalam pelajaran ini, anda akan menggunakan Apache kerana, sejak penulisan ini, ia lebih banyak didokumentasikan. Ini menjadikan mencari jawapan dalam talian lebih mudah semasa anda belajar.

Raspberry Pi anda akan menghoskan laman web yang boleh diakses oleh mana-mana peranti di rangkaian yang sama. Mari kita mulakan!

Langkah 3: Pasang Apache

Pasang pakej apache2. Bendera -y menjawab soalan keselamatan pra-pemasangan untuk anda.

sudo apt-get install apache2 -y

Apache dilengkapi dengan fail HTML ujian yang menghasilkan laman web placeholder untuk menguji pemasangan dengan. Fail HTML ujian ini terdapat dalam direktori root Apache. Secara lalai, Apache diatur untuk mencari dokumen web dalam direktori ini untuk membuat kandungan dalam penyemak imbas web. Untuk melihat halaman ujian ini dan mengesahkan bahawa Apache memang memasang dengan betul, tarik ke atas dalam penyemak imbas web anda dengan menaip alamat URL ini:

localhost /

Sekiranya Apache dipasang dengan betul, anda akan melihat halaman web ujian Apache di penyemak imbas:

Cari Alamat IP Raspberry Pi Anda

Anda boleh menggunakan alamat localhost untuk mengakses laman web semasa berada di Raspberry Pi. Untuk mengakses laman web dari komputer lain, anda memerlukan alamat IP Raspberry Pi anda. Untuk mencari jenis alamat IP di LXTerminal:

ifconfig

Anda juga boleh mencarinya di desktop jika mengarahkan kursor ke atas simbol penerimaan WiFi.

Langkah 4: Buat Laman Web Statik

Raspberry Pi anda sekarang dapat menghoskan laman web dan semua kandungan yang akan diterbitkan di atasnya. Terdapat dua jenis laman web asas: statik dan dinamik. Halaman statik mempunyai kandungan yang tidak berubah. Halaman dinamik dapat menampilkan data yang berubah seperti pembacaan sensor atau perubahan waktu dan tarikh.

Mari mulakan dengan halaman statik. Untuk membuatnya, anda perlu menggunakan bahasa yang disebut HTML. Apabila anda pergi ke laman web perkara pertama yang anda lihat mungkin adalah halaman index.html. Halaman ini adalah halaman lalai yang ditunjukkan oleh penyemak imbas jika halaman lain tidak ditentukan. Secara lalai, Apache mencari fail index.html di sini:

/ var / www / html

Ini dipanggil root dokumen, dan ia adalah folder tersembunyi. Ia dikhaskan untuk menyimpan laman web. Pergi ke sana dan melihat-lihat:

cd / var / www / html

ls

Anda akan melihat fail index.html ujian lalai disenaraikan. Sekiranya anda ingin menyimpan fail lalai, ganti namanya menjadi seperti defaultIndex.html menggunakan perintah mv.

sudo mv index.html defaultIndex.html

jika anda tidak mahu menyimpannya, buang fail tersebut dengan menggunakan perintah rm:

sudo rm index.html

Sekarang, anda boleh membuat dan mula mengedit fail index.html anda sendiri:

sudo nano index.html

Ingatlah untuk menggunakan sudo, direktori www dan html dimiliki oleh root jadi anda perlu bertindak sebagai root untuk membuat, menyunting, dan memanipulasi setiap fail yang tinggal di direktori tersebut.

Halaman HTML Asas

HTML adalah bahasa yang mendalam. Anda boleh melakukan banyak perkara dengannya. Sekiranya anda berminat untuk mengetahui lebih lanjut, periksa laman web W3Schools di mana anda boleh mendapatkan banyak tutorial mengenai cara menggunakan HTML untuk membina laman web. Kita akan mulakan dengan halaman HTML yang sederhana.

Pertama, beritahu penyemak imbas versi HTML yang anda gunakan. Dokumen ini dinyatakan sebagai dokumen HTML5:

Mulakan dengan tag html dan badan:

Sebilangan besar kandungan anda seterusnya, antara tanda badan. Jadikan baris pertama sebagai tajuk dengan tag h1. Nombor selepas "h" menentukan kepentingan tajuk yang mempengaruhi ukuran fon. Gunakan tag p untuk menentukan perenggan:

Raspberry Pi saya mempunyai laman web

Apa yang perlu saya letakkan di sini?

Selesaikan halaman dengan menutup isi badan dan html dan tag:

Simpan dokumen dengan akhiran.html dan lawati localhost di penyemak imbas anda. Anda akan melihat laman web anda!

Apa yang harus anda letakkan di laman web? Mari letakkan gambar, atau lebih baik lagi, animateMe.gif! Agar aset dapat dipaparkan di laman web ini, ia mesti dimasukkan ke dalam akar dokumen Apache. Anda harus menyalin dan menampalnya sehingga tetap dalam direktori boof / fotos anda juga. Untuk menyalin dan menampal fail di baris perintah gunakan perintah cp. Pertama, cd ke direktori rumah anda:

cd ~

Salin dan tampal fail animateMe.gif:

sudo cp boof / fotos / animateMe-g.webp

Kembali ke direktori html:

cd / var / www / html

Buka semula fail index.html supaya anda dapat menambahkan gambar:

sudo nano index.html

Untuk menentukan dan menanamkan gambar pada halaman HTML gunakan tag img. Letakkan baris berikut antara tajuk dan perenggan.

Buka halaman di penyemak imbas dan ia akan kelihatan seperti ini kecuali dengan-g.webp

Langkah 5: Tambah Beberapa Gaya

Halaman kelihatan agak hambar. Tanpa warna dan tanpa gaya. Di sinilah CSS masuk. Ini adalah bahasa yang bekerjasama dengan HTML untuk menjadikan laman web lebih menarik dan kreatif secara visual. Anda hanya akan menyentuh di sini tetapi jika anda ingin mengetahui lebih lanjut mengenai W3schools untuk mengetahui lebih lanjut.

Sebagai contoh, mari kita ubah warna latar belakang dengan menambahkan CSS ke fail HTML anda. Terdapat beberapa cara untuk menata laman web anda menggunakan CSS. Untuk kelas ini, anda akan menggunakan tag gaya untuk memasukkan CSS terus ke dalam fail HTML anda.

Letakkan baris berikut di antara tag html dan badan pertama di bahagian atas halaman HTML anda:

teg {background-color: powderblue;} badan. Ia akan kelihatan seperti ini:

badan {background-color: powderblue;}

Langkah 6: Pasang PHP

Daripada halaman statik, anda boleh membuat halaman dinamik yang mampu berubah tanpa anda memuat naik fail ke manual. Cara yang popular untuk melakukannya adalah dengan menggunakan bahasa skrip yang disebut PHP. Untuk menggunakan PHP pada Raspberry Pi, anda perlu memasangnya terlebih dahulu dengan pakej modul untuk Apache:

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

Langkah 7: Buat Laman Web Dinamik

Gabungkan PHP dengan HTMLA selagi kod PHP terkandung dalam tag anda boleh memasukkannya ke dalam struktur fail HTML. Sebagai contoh, gabungkan skrip HTML dan PHP semasa anda dan buat teks lebih besar dengan menggunakan tag HTML.

Mari sertakan skrip PHP ringkas yang memaparkan tarikh dan masa. Tampalkan perkara berikut di mana sahaja antara tag:

Simpan fail dengan Ctrl + o tetapi ubah peluasan dari.html ke.php, yang akan menyimpan fail baru. Agar tidak mengelirukan penyemak imbas, hapus versi.html lama:

sudo rm index.html

Segarkan semula localhost di penyemak imbas web anda. Keluarannya akan kelihatan seperti ini:

Ok, jadi apa bezanya? Nampaknya halaman HTML biasa bukan? Muat semula halaman dan saksikan keajaibannya. Keajaiban menjadi masa akan berubah! Itulah PHP dan fungsi tarikh terbina dalam () berfungsi untuk anda membuat laman web yang dinamik.

Langkah 8: Buat Pelanggan API Tumblr

Raspberry Pi dapat meminta dan mendapatkan maklumat dari aplikasi perisian lain secara dalam talian melalui API (Application Programming Interface). API mempermudah sesuatu seperti Raspberry Pi untuk memotong semua data laman web untuk merebut barang yang berguna sahaja. Minta Raspberry Pi anda bercakap dengan Tumblr, Twitter, dan weather.com untuk tweet, menghantar gambar, dan memaparkan ramalan cuaca.

Raspberry Pi dan Tumblr

Latihan berikut mewujudkan perbualan antara Raspberry Pi dan Tumblr anda. Sebagai pelanggan, Raspberry Pi anda akan meminta potongan data kepada Tumblr sehingga dapat memuat naik gambar ke pelayan jauh Tumblr, sehingga gambar tersebut diposkan ke akaun Tumblr. Untuk membuat Raspberry Pi berfungsi dengan API, kemungkinan besar sudah ada perpustakaan di luar sana untuk anda gunakan. Untuk Tumblr ada Pytumblr. Pelanggan dibuat dalam program Python menggunakan fungsi terbina dalam yang dibuat di Pytumblr. Fungsi ini menggunakan empat kod kebenaran yang dihasilkan oleh Tumblr:

• kunci pengguna
• rahsia pengguna
• kunci token
• rahsia token

Sebelum menggunakan API Tumblr, anda mesti mendapatkan empat kunci ini (serupa dengan kata laluan). Untuk membuat mereka mengikuti langkah-langkah berikut:

1. Buat akaun Tumblr percuma dan log masuk.
2. Daftarkan permohonan. Anda hanya perlu memberikan maklumat asas seperti tajuk (cuba "Pi Raspberry Saya"), keterangan, e-mel, dan laman web (gunakan yang ini jika anda tidak memilikinya). Selepas pendaftaran, anda akan mendapat kunci pengguna dan rahsia pengguna. Salin dan tampal di tempat yang selamat, seperti fail teks atau e-mel. Untuk mengaksesnya lagi, pergi ke halaman akaun Tumblr anda, pilih Tetapan di menu Akaun, dan klik pada Aplikasi.
3. Log masuk ke konsol pembangun menggunakan kunci dan kod kebenaran rahsia anda. Klik izinkan apabila ditanya adakah anda mahu menghantarnya bagi pihak anda.
4. Setelah log masuk ke konsol pembangun, anda akan melihat contoh kod dalam beberapa bahasa yang berbeza. Klik tab Python dan salin blok OAuth, atau di menu atas klik Tunjukkan Kekunci untuk melihat kunci token dan kod rahsia token bersama dengan dua kod yang sudah anda miliki.

Mari gunakan kod ini untuk berfungsi dan buat program Python yang menyiarkan animateMe-g.webp

Pasang Pytumblr pertama:

sudo apt-get kemas kini

sudo pip pasang pytumblr

Dari direktori rumah anda, cd ke folder boof dan buat fail Python:

cd boof

Buat fail anda menggunakan editor IDLE untuk memudahkan memotong dan menampal kod kebenaran anda yang sangat lama. Masukkan ini ke dalam fail testPytumblr.py anda, kemas kini empat kekunci dan nama pengguna anda:

import pytumblr

# Authenticates via OAuth, salin dari 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 = "diterbitkan", tag = ["raspberrypi", "picamera"], data = "fotos / animateMe.gif") cetak ("dimuat")

Program ini menandakan foto yang dimuat naik untuk anda dengan "raspberrypi" dan "picamera". Sekiranya anda mahu, anda boleh membuang, mengganti, atau menambah tag ini. Ini disimpan dalam pemboleh ubah yang disebut tag yang digunakan dalam client.create_photo ().

Tekan F5 untuk menjalankan program. Akan ada ralat… tetapi anda sudah memasang Pytumblr jadi mengapa Python mengatakan bahawa ia tidak dapat menemui modul? Ini kerana Pytumblr tidak menyokong Python 3, ia hanya berfungsi di Python 2 *. Buka editor Python 2 IDLE dan potong dan tampal kod anda, ganti program Python 3 dan kemudian jalankan. Apabila telah memuat naik GIF, "dimuat" akan dicetak di tetingkap shell Python.

Ini adalah bahagian yang menarik! Pergi ke halaman Tumblr anda dan periksa GIF! Tukar "diterbitkan" dalam program anda ke "draf" jika anda ingin membuat draf siaran.

* Selepas kelas ini diterbitkan, pengguna github lain telah memalsukan yang asli, menambah sokongan untuk Python 3 untuk perintah tertentu.

Sekiranya siaran tidak muncul, periksa semula bahawa anda memasukkan empat kunci dan nama pengguna Tumblr dengan betul, dan bahawa sambungan internet Pi anda aktif. Anda juga boleh menjalankan skrip anda dari baris perintah menggunakan Python 2 (cd ke folder folder anda jika anda belum ada):

python testPytumblr.py

Langkah 9: Ikuti Tangkapan Skrin Tumblr Dan / atau Laman Web

Buat laman web untuk memaparkan-g.webp