Institut Teknologi Del

Jl. Sisingamangaraja, Sitoluama, Laguboti, Toba Samosir, Sumatera Utara 22381

Telp. 021 5455477; 0632 331234. Fax. 0632 331116
http://www.del.ac.id

Session Date : September 2022

Semester : 5
Courses : Teknologi IoT-1333104
Week/Session : 3/2
Key Topics : Network Communication Part 1
Place of delivery : ecourse.del.ac.id
Lecturer : AZP/MMS/FWH

1. Pendahuluan
Pada praktikum ini anda akan membuat web server sehingga Raspberry Pi dapat diakses dari network
serta anda akan membuat endpoint dimana jika diakses akan menampilkan data berupa nilai sensor dan
status actuator yang sedang terhubung dengan Raspberry Pi.

2. Flask
Untuk membuat web server pada Raspberry Pi pada praktikum ini anda akan menggunakan Flask. Flask
adalah framework aplikasi web yang ditulis dengan Python yang dikembangkan oleh Armin Ronacher.
Flask didasarkan pada toolkit WSGI, Werkzeg dan mesin template Jinja2. WSGI adalah spesifikasi
antarmuka umum antara server web dan aplikasi web. Werkzeug adalah toolkit WSGI yang
mengimplementasikan permintaan, objek respons, dan fungsi utilitas. Sedangkan Jinja2 adalah mesin
templat yang enggabungkan templat dengan sumber data tertentu untuk merender halaman web
dinami[1]. Dengan menngunakan Flask anda dapat meneruskan variabel Python ke dalam template
HTML seperti contoh berikut ini:

Pada contoh di atas variabel Python disimpan dalam {{}} yaitu title dan username. Anda perlu
menginstal Flask terlebih dahulu dengan menggunakan perintah berikut pada terminal::
sudo apt-get install python3-flask

3. Membangun Flask Web

Untuk memulainya pertama-tama anda perlu membuat file melalui file explorer berbasis GUI atau
melalui terminal. Untuk membuat folder melalui terminal maka perintah berikut:
mkdir MyFlaskWebsite
Lalu anda masuk ke folder tersebut dengan perintah:
cd MyFlaskWebsite

1333104_TioT_2022/2023_AZP_MMS_FWH
 Institut Teknologi Del
Jl. Sisingamangaraja, Sitoluama, Laguboti, Toba Samosir, Sumatera Utara 22381
Telp. 021 5455477; 0632 331234. Fax. 0632 331116
http://www.del.ac.id

Selanjutnya anda buat file dengan ekstensi .py, misalkan anda beri nama web_dasar.py dengan perintah
sebagai berikut:
touch web_dasar.py
lalu anda buka file tersbeut dengan text editor yang anda mau. Disini dicontohkan menggunakan
mousepad dengan menggunakan perintah berikut:
mousepad web_dasar.py &
Selanjutnya copy code berikut pada file web_dasar.py:

Selanjutnya jalankan file dengan mengetikan perintah berikut:

python3 app.py
maka akan muncul tampilan seperti berikut:

Sekarang buka browser web Anda lalu masukkan URL http://127.0.0.1:5000/, maka akan muncul
tampilan berikut:

1333104_TioT_2022/2023_AZP_MMS_FWH
 Institut Teknologi Del
Jl. Sisingamangaraja, Sitoluama, Laguboti, Toba Samosir, Sumatera Utara 22381
Telp. 021 5455477; 0632 331234. Fax. 0632 331116
http://www.del.ac.id

Note: 127.0.0.1 berarti home yang didapat dari Ip address Raspberry Pi (cek melalui ifconfig),
:5000 berarti 'port 5000', yang merupakan port tempat server web berjalan.

4. Membangun Web data realtime

Sekarang anda akan membuat web dimana isinya adalah hasil pengukuran data sensor dan
aktuator secara real time.
4.1. Alat dan komponen
1. Buzzer 1 buah
2. Breadboard 1 buah
3. Sensor Ultrasonik HC-SR04 1 buah
4. Rapsberry Pi 1 buah
5. Kabel Jumper
4.2 Rangkaian listrik
Rangkaian listrik untuk praktikum 1 ini, anda perlu merangkainya seperti pada gambar berikut:

Pada gambar di atas pin 1 terhubung dengan VCC pada sensor Ultrasonik, pin 39 terhubung pin ground
sensor Ultrasonik dan buzzer, pin 15 terhubung dengan trigger sensor Ultrasonik, pin 16 terhubung
dengan Echo sensor Ultrasonik, output sensor PIR, dan pin 12 terhubung dengan input Buzzer.
4.3 Code program
Masuk ke folder MyFlaskWebsite dengan perintah:
cd MyFlaskWebsite
Selanjutnya anda buat file dengan ekstensi .py, misalkan anda beri nama web_lanjutan.py dengan
perintah sebagai berikut:
touch web_lanjutan.py

1333104_TioT_2022/2023_AZP_MMS_FWH
 Institut Teknologi Del
Jl. Sisingamangaraja, Sitoluama, Laguboti, Toba Samosir, Sumatera Utara 22381
Telp. 021 5455477; 0632 331234. Fax. 0632 331116
http://www.del.ac.id

lalu anda buka file tersbeut dengan text editor yang anda mau. Disini dicontohkan menggunakan
mousepad dengan menggunakan perintah berikut:
mousepad web_lanjutan.py &
Selanjutnya copy code berikut pada file web_lanjutan.py:

1333104_TioT_2022/2023_AZP_MMS_FWH
 Institut Teknologi Del
Jl. Sisingamangaraja, Sitoluama, Laguboti, Toba Samosir, Sumatera Utara 22381
Telp. 021 5455477; 0632 331234. Fax. 0632 331116
http://www.del.ac.id

1333104_TioT_2022/2023_AZP_MMS_FWH
 Institut Teknologi Del
Jl. Sisingamangaraja, Sitoluama, Laguboti, Toba Samosir, Sumatera Utara 22381
Telp. 021 5455477; 0632 331234. Fax. 0632 331116
http://www.del.ac.id

Sekarang kita akan memiliki folder dengan template HTML di dalam folder MyflaskWebsite.
Gunakan perintah berikut untuk membuat direktori ini:
mkdir templates
Sekarang, mari kita buat file HTML untuk beranda. Gunakan perintah berikut untuk
menavigasi ke direktori template.
cd templates
Kemudian buat file baru bernama index.html:
touch index.html
Salin code berikut ke file index.html:

Jalankan file dengan perintah:

python3 web_lanjutan.py
Maka tampilan pada saat anda buka browser dengan url 169.254.12.183:5000 akan seperti
gambar berikut:

5. Membuat Daemon untuk program flask

Daemon adalah service yang berjalan sendiri secara periodik/realtime dan berjalan dibelakang
layar. Disini kita akan membuat script untuk web flask dijalankan secara otomatis saat
raspberry reboot. Dalam mebuat daemon di praktikum ini kita akan menggunakan PM2.

1333104_TioT_2022/2023_AZP_MMS_FWH
 Institut Teknologi Del
Jl. Sisingamangaraja, Sitoluama, Laguboti, Toba Samosir, Sumatera Utara 22381
Telp. 021 5455477; 0632 331234. Fax. 0632 331116
http://www.del.ac.id

Note: anda harus sudah menginstall node dan npm terlebih dahulu. Anda bisa
menginstallnya dengan mengikuti langkah pada link berikut:
https://www.golinuxcloud.com/install-nodejs-and-npm-on-raspberry-pi/
Setalah node dan nmp sudah terinstall, maka selanjutnya anda bisa instal PM2 dengan dengan
menggunakan perintah berikut:
npm install -g pm2
Setelah itu anda masuk ke folder MyFlaskWebsite untuk menjalankan script web_lanjutan.py
secara otomatis dengan menggunakan PM2. Silahkan ketikan perintah berikut:
pm2 start web_lanjutan.py
setelah itu anda dapat mengecek apakah web_lanjutan.py sudah terdaftar di dalam PM2 dengan
menggunakan perintah berikut:
pm2 ls
maka akan muncul tampilan sebagai berikut:

Setelah itu anda akan membuat script dijalnakan saat raspberry pi rebbot secara otomasti
dengan menggunakan perintah berikut:
pm2 startup
pm2 save
Selanjutnya silahkan anda reboot raspberry pi lalu akses IP static (169.254.12.183:5000). Jika
pembuatan daemon berhasil maka akan menampilkan tampilan web hasil pengukuran sensor
ultrasonik.
6. Tugas
Buatlah Web data real time seperti pada poin 4 namun menggunakan sensor LDR, Relay, dan LED
dimana jika cahaya lingkunag terang maka akan mengontrol Relay untuk menghidupkan LED merah
dan jika gelap maka yang dihidupkan adlah LED kuning. Data yang harus muncul di web adalah hasil
pengukuran sensor LDR dan status kedua LED (on/off).

6. Referensi
1. Pyhton Basic. 2021. Pyhton Tutorial [online]. Diakses pada 27 Agustus 2022, dari:
https://pythonbasics.org/what-is-flask-python/
2. Bembyho blog. 2021. Parking sensor made with HC-SR04 and Raspberry [online]. Diakses
pada 27 Agustus 2022, dari: https://www.bambusekd.cz/dev/raspberry-parking-sensor-hc-sr04

1333104_TioT_2022/2023_AZP_MMS_FWH