Cara membuat Python dev-server Anda sendiri dengan Raspberry Pi


Ia dapat melakukan apa saja yang dapat Anda bayangkan komputer Linux normal dapat lakukan, seperti menelusuri web, menulis kode, mengedit dokumen, dan terhubung ke perangkat I / O seperti thumb drive, mouse, keyboard, dll. Tutorial ini akan difokuskan pada belajar bagaimana membuat Python dev-server Anda sendiri dengan Raspberry Pi.

Langkah 0. Tentukan tujuan
Sebelum memulai, penting untuk memahami apa yang sedang kita coba bangun. Pada akhir tutorial, Anda akan dapat menjalankan situs web dasar (menggunakan Flask) dari Raspberry Pi di jaringan rumah lokal Anda.

Tujuan dari tutorial ini adalah untuk mendemonstrasikan bagaimana Pi dapat digunakan sebagai dev-server, lebih khusus lagi, contohnya adalah untuk menghosting situs web sederhana (menggunakan Flask).

Langkah 1. Nyatakan asumsi
Berikut adalah beberapa asumsi yang akan dibuat oleh tutorial ini:

Anda sudah memiliki Raspberry Pi yang diatur dengan Raspbian OS. Berikut adalah panduan penyiapan yang bermanfaat jika Anda memerlukannya.
Pi terhubung ke WiFi rumah Anda (dan Anda tahu alamat IP Pi).
Anda tidak akan memerlukan layar maju. dengan asumsi poin 1 dan 2 selesai.
Kami akan menggunakan VS Code dengan ekstensi Remote VSCode untuk membuat dan mengedit file dari jarak jauh di Pi. Saya merekomendasikan Anda menggunakan keduanya untuk mengikuti. Selain itu, ini akan membuat bekerja dengan file jauh jauh lebih mudah, jadi itu plus.

Langkah 2. Temukan alamat IP Pi
Pertama, hubungkan Pi ke catu daya, dan pastikan bahwa ia sudah di-boot dengan benar dan terhubung ke WiFi / Ethernet (pada dasarnya, ia harus memiliki koneksi internet).

Kami akan menggunakan ssh untuk terhubung dan berkomunikasi dengan Pi. Untuk melakukan itu dari jarak jauh menggunakan laptop, Anda perlu tahu alamat IP-nya. Ini dapat dengan mudah diperoleh menggunakan portal admin ISP Anda (biasanya tersedia di http://192.168.0.1. Harap perhatikan bahwa ini dapat berbeda untuk ISP yang berbeda.)

Biasanya, Anda harus menyambungkan Pi Anda ke alamat yang mungkin terlihat mirip dengan '192.168.0.12.' Sekali lagi, ini akan berbeda untuk orang yang berbeda. Jadi silakan gunakan alamat IP yang Anda temukan untuk Pi Anda di portal admin. Untuk selanjutnya, tutorial ini akan menggunakan 192.168.0.12 sebagai alamat IP Pi.

Langkah 3. Hubungkan ke Pi menggunakan ssh
Buka VS Code dan jendela terminal built-in di laptop Anda. Hubungkan ke Pi dengan alamat IP 192.188.0.12 menggunakan perintah ssh berikut:

ssh -R 52698: localhost: 52698 pi@192.168.0.12
Perintah di atas akan mengatur saluran komunikasi 2 arah antara laptop Anda dan Pi. Jika ini adalah pertama kalinya Anda terhubung ke Pi, gunakan raspberry sebagai kata sandi. Anda mungkin diminta untuk mengubah kata sandi standar Anda. Sangat disarankan agar Anda melakukannya.

Jendela terminal setelah berhasil terhubung ke pi
Langkah 4. Buat direktori proyek
Anda sekarang harus berada di direktori home dari Pi. Mari buat direktori untuk situs web yang ingin kita bangun. Gunakan perintah berikut untuk membuat direktori:

mkdir MyFlaskWebsite
Gunakan perintah 'ls' untuk memverifikasi bahwa Anda memang dapat melihat folder baru bernama MyFlaskWebsite.


Buat dan verifikasi direktori proyek
Langkah 5. Instal Flask
Kami akan menggunakan Flask untuk membuat situs web sederhana. Flask adalah kerangka web mikro berbasis Python. Menggunakan Jinja (mesin template berbasis Python) sebagai mesin template yang membuatnya sangat bermanfaat dan kuat. Gunakan perintah berikut untuk menginstal labu pada Pi:

sudo apt-get install python3-flask

Instal labu
Langkah 6. Tulis beberapa kode dasar
Sekarang Flask telah terinstal, kita dapat mulai membuat file dan menulis beberapa kode. Pertama, arahkan ke direktori proyek Anda yang baru dibuat (dari langkah 4) dengan menggunakan perintah berikut:

cd MyFlaskWebsite
Semua file dan folder proyek akan berada di dalam direktori ‘MyFlaskWebsite’ ini. Sekarang, buat file kode pertama Anda (app.py) menggunakan perintah berikut:

sentuh app.py
Saat memeriksa direktori menggunakan perintah 'ls', Anda seharusnya dapat melihat file yang baru dibuat ini.


Arahkan ke direktori proyek dan buat file baru
Sekarang, tekan F1 dan pilih ‘Server Mulai Jauh.’ Ini seharusnya memungkinkan Anda mengedit file di dalam jarak jauh menggunakan komputer laptop.


Mulai server jauh
Selanjutnya, gunakan perintah berikut untuk mulai mengedit file app.py yang baru dibuat. Mungkin perlu beberapa detik, tetapi file yang kosong seharusnya akan terlihat di jendela tepat di atas.

rmate app.py

Mulai mengedit file dari jarak jauh
Ketikkan kode yang ditunjukkan pada gambar di bawah ini. Di sini, kami telah menetapkan rute ke halaman beranda situs web yang seharusnya menampilkan 'Ini adalah situs web labu saya dan itu sangat keren.' Perhatikan bahwa pengaturan host ke 0.0.0.0 memungkinkan situs web ini dapat diakses oleh semua perangkat yang terhubung ke jaringan yang sama.


Buat situs web dasar
Simpan file dan gunakan perintah berikut untuk menjalankan situs web di server Pi:

python3 app.py

Jalankan situs web
Saat menerima pesan sukses di atas, buka jendela peramban baru di perangkat apa pun dalam jaringan Anda dan ketik alamat IP Pi (dalam hal ini, itu adalah 192.168.0.12) diikuti oleh port dev-server sedang berjalan (5000. ) Jadi alamat lengkapnya adalah http://192.168.0.12:5000/

Anda harus melihat teks 'Ini adalah situs web labu saya dan itu sangat keren.' Di halaman web.


Periksa halaman web di browser
Ini menegaskan bahwa dev-server Anda aktif dan menjalankan situs web yang baru Anda buat.

Langkah 7. Tambahkan lebih banyak rute
Saat ini, kode hanya terdiri dari 1 rute yang merupakan halaman beranda situs web. Tambahkan rute lain dengan mengetikkan kode berikut. Perhatikan bahwa Anda dapat secara dinamis membuat perubahan ketika dev-server berjalan. Ini secara otomatis akan menangkap delta (perubahan kode) dan menjalankan versi revisi setelah Anda me-refresh jendela browser Anda.


Tambahkan rute meong
Untuk memeriksa apakah rute baru berfungsi sebagaimana yang diharapkan, buka http://192.168.0.12:5000/meow dan halaman web harus ‘MEOW’ pada Anda.

Verifikasi bahwa rute baru berfungsi seperti yang diharapkan
Langkah 8. Tambahkan struktur ke kode Anda
Sekarang, menambahkan lebih banyak rute keren tetapi memiliki semua kode hanya dalam 1 file app.py bukan bagaimana sebuah situs web harus terstruktur. Biasanya, kita akan memiliki folder dengan templat HTML, folder dengan file CSS statis dan yang lain untuk file JS. Mari tambahkan folder ini dan pindahkan kode di folder yang sesuai untuk menyusun kode dengan lebih baik. Gunakan perintah berikut untuk membuat direktori ini:

template mkdir
mkdir statis
Gunakan perintah ‘ls’ untuk memverifikasi bahwa folder-folder ini telah dibuat.


Tambahkan struktur ke kode Anda
Sekarang, mari buat file HTML untuk beranda. Gunakan perintah berikut untuk menavigasi ke direktori templat. Kemudian, buat file baru bernama index.html dan gunakan rmate untuk mengedit yang sama:

templat cd
sentuh index.html
rmate index.html

Tulis beberapa kode HTML dasar untuk beranda di dalam index.html.


Kode HTML untuk beranda
Buat perubahan berikut di app.py untuk menggunakan file index.html. Kode di bawah ini akan mencari file bernama index.html di direktori templates secara default.


Gunakan file index.html baru dan render menggunakan app.py
Arahkan kembali ke direktori proyek dan jalankan situs web lagi.


Kembali ke halaman beranda dan Anda akan melihat konten yang Anda masukkan ke dalam index.html.


Sekarang tambahkan beberapa gaya dengan membuat ‘main.css’ di dalam direktori statis. Seperti biasa, gunakan perintah ‘cd’ untuk mengubah direktori, ‘sentuh’ perintah untuk membuat file baru, dan perintah ‘rmate’ untuk mengedit file yang sama.


Buat file css
Tambahkan beberapa styling ke tag h4. Perhatikan bahwa saat ini kami memiliki 1 tag h4 di index.html yang seharusnya diubah oleh css.

Beberapa kode css
Seperti biasa, uji perubahan Anda dengan menggunakan perintah berikut:

python3 app.py

Perhatikan bagaimana teks dalam tag h4 diberi warna sesuai dengan CSS.


Langkah 9. Manfaatkan Jinja
Jinja dalam mesin template berbasis Python yang menambahkan banyak fitur canggih ke halaman web. Meskipun tutorial ini tidak berfokus pada pembelajaran Jinja, mari kita lihat contoh sederhana tentang bagaimana Jinja dapat berguna.

Mari buat daftar buah di app.py dan berikan sebagai parameter ke index.html. Kami kemudian akan memiliki index.html menampilkan daftar itu di halaman web. Buat perubahan berikut di app.py dan index.html.


Lewati my_list sebagai parameter ke index.html

Tampilkan my_list di halaman web
Segarkan halaman web Anda dan Anda akan melihat daftar buah di layar.


Ini berbicara tentang bagaimana Jinja yang kuat dan berguna. Untuk info lebih lanjut tentang Jinja, silakan lihat ini.

Langkah 10. Langkah selanjutnya
Sekarang setelah Anda memiliki dev-server Python yang berfungsi penuh, kemungkinan ke depannya praktis tidak terbatas. Berikut adalah beberapa langkah berikutnya yang bermanfaat yang dapat Anda pertimbangkan untuk proyek Anda:

Saat ini, Pi hanya dapat diakses melalui perangkat dalam jaringan pribadi Anda. Untuk mengekspos Pi ke dunia luar (mengaksesnya melalui perangkat apa pun di luar jaringan pribadi Anda), Anda memerlukan sesuatu yang dikenal sebagai penerusan port. Pada dasarnya, Anda membutuhkan nama domain dan alamat IP statis yang secara permanen ditugaskan untuk Pi. Info lebih lanjut di sini dan di sini.
Sebagian besar aplikasi akan membutuhkan database untuk operasi CRUD dasar. Python mendukung SQlite langsung dari kotak. Pelajari cara menggunakan SQlite dengan Flask di sini dan di sini.
Berikut ini kit starter Raspberry Pi keren di Amazon. Hal yang rapi tentang ini adalah bahwa ia memiliki semua yang Anda butuhkan untuk memulai dan menghemat upaya pencarian item individual sendiri.
Karena Anda tidak menggunakan layar, penting bahwa Anda menggunakan perintah shutdown untuk Pi menggunakan terminal. Ini memastikan bahwa Pi dan kartu SD tidak rusak:
sudo shutdown -h sekarang