3.3. Perancangan Perangkat Lunak 3.3.1. Diagram alir Utama Pengiriman Data
Pada gambar 3.7 Menujukkan diagram alir keseluruhan proses pemrograman. Setelah mulai, program melakukan inisialisasi terhadap port-port mikrokontroler yang
digunakan untuk proses bekerjanya alat. Pertama menghubungkan ke access point pada jaringan wi-fi agar dapat terkoneksi. Kedua dan ketiga melakukan pemrograman pada alat
arah angin dan alat kecepatan angin supaya sensor dapat terbaca. Kemudian melakukan pemrograman pada alat ESP8266 agar mendapatkan IP yang dibutuhkan dan selajutnya
mengirim data ke web browser dan ditampilkan hasil data tersebut.
3.3.2. Diagram Alir Subrutin Arah Angin
Melakukan pemrograman di Arduino IDE agar sensor dapat terbaca sesuai nama arah yang sudah di tetapkan dan tidak mengambil data sampling. Gambar 3.8
Menunjukkan diagram alir dari proses pengolahan data Arahangin.
3.3.3. Diagram Alir Subrutin Kecepatan Angin
Melakukan pemrograman di Arduino IDE agar sensor terbaca. Dimana sensor kecepatan angin menggunakan setiap perubahan pulsa high atau low untuk menghasilkan
data.Pengolahan data kecepatan angin akan dibandingkan dengan hasil alat anemometer digital. Gambar 3.9 Menunjukkan diagram alir dari proses pengolahan data kecepatan
angin. PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
Mulai
Inisalisasi Port Masukkan
Proses data arah angin
Proses data kecepatan angin
Sambungkan ke Access Point
Mendapatkan IP addres
Data dikirim Web
Tampilan di Web
Selesai Mulai
Baca Sensor Arah angin
Data dikirim
Selesai Gambar 3.8 Diagram alir proses
pengolahan data arah angin
Gambar 3.7 Diagram alir keseluruah proses Pemograman
Mulai
Selesai Gambar 3.9 Diagram alir proses
pengolahan data Kecepatan angin Data dikirim
Baca sensor kecepatan angin
3.3.4. Alur Proses Koneksi dan Pengiriman Data
Mulai
Sambungkan Wifi Access Point
Membuka web browser
Memasukkan IP addres
Browser mengirim HTTP
Menerima Server
Sudah diterima
Server HTTP: Web
Page Dikirm
HTTP: File Not Found
BelumTer konek
A A
Browser menerima data yang diolah
Selesai Data
Ditampilkan di Androidlaptop
No
Yes
Yes
No B
B PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
3.3.5 . User Interface
Dalam mendesain tampilan Web yang digunakan User Interface pada penelitian ini. Maka hal ini harus menggunakan HTML sebagai bahasa pemograman web dasar.
Gambar 3.10 Rancangan tampilan Web Pada gambar 3.10 menunjukkan Rancangan tampila Web.Terdapat 2 informasi tentang
Kondisi Angin Terkini yang terdiri dari Arah Angin dan Kecepatan Angin, dimana arah angin dan kecepatan angin menyampaikan hasil data pada lokasi tersebut. Untuk update
data pengiriman ke web tiap 10 detik.
Kondisi Angin Terkini
ArahAngin : Selatan E
KecepatanAngin : 1.23 ms
