bab iii metodologi/perancangan sistemeprints.umm.ac.id/54633/4/bab iii.pdflaptop atau komputer....
TRANSCRIPT
11
BAB III
METODOLOGI/PERANCANGAN SISTEM
Pada bab ini membahas mengenai analisis kebutuhan software maupun
hardware, pembuatan coding, desain alat, serta model sistem yang akan dibuat.
Dari pembahasan pada bab ini akan diketahui gambaran umum tentang cara kerja
smart room berbasis arduino.
3.1 Blok Diagram
Adapun rancangan blok diagram smart room berbasis arduino adalah
sebagai berikut:
Gambar 3.1 Blok Diagram Smart Room Berbasis Arduino.
Pertama, hal yang dilakukan adalah membuat coding berisi perintah dalam
bahasa pemprogaman. Lalu, coding tersebut akan di upload ke dalam NodeMCU
melalui usb. Kemudian, membuat coding untuk aplikasi yang nantinya
dioperasikan melalui smartphone. Coding tersebut menggunakan bahasa HTML.
Dalam coding html ini, berisi perintah komunikasi menuju server ThingSpeak.
Lalu setelah perintah sampai di server ThingSpeak, perintah tersebut di check
kembali dan segera dikirim kembali menuju alat. Hal ini membutuhkan delay
waktu, tergantung dari koneksi internet dan koneksi server. Setelah perintah
dikirim ke alat, maka alat akan memerintah lampu dan kipas untuk melakukan
12
aktivitas on atau off, sesuai dengan perintah yang dikirim oleh user. Pastikan
smartphone dan alat dalam satu jaringan internet yang sama.
3.2 Analisis Kebutuhan
Perancangan alat membutuhkan beberapa bahan dalam proses pengerjaan.
Beberapa bahan tersebut meliputi:
3.2.1 Perangkat Keras (Hardware)
a. NodeMCU
b. Trafo
c. Transistor NPN
d. Kapasitor
e. Ic Regulator 7805
f. Resistor
g. Dioda
h. Perabot (lampu, dan kipas)
i. Modul LDR
3.2.2 Perangkat Lunak (Software)
a. IDE Arduino
b. Notepad++
c. ThingSpeak
13
3.3 Rancangan Perangkat Keras (Hardware)
Berikut ini adalah bagan rancangan perangkat keras (hardware) tentang
simulasi cara kerja smart room berbasis Arduino:
Gambar 3.2 Cara Kerja Smart Room Berbasis Arduino.
Keterangan gambar:
Trafo : Berfungsi sebagai penyalur energi listrik ke tegangan rendah maupun tegangan
tinggi.
Dioda : penyearah tegangan ac (bolak balik) menjadi dc (tegangan searah).
Kapasitor : agar tegangan dc yg disearahkan dioda lebih stabil.
Transistor NPN : sebagai switch atau saklar untuk menyalakan kipas yg butuh arus besar,
melalui sinyal arus lemah dari NodeMCU.
Resistor : Berfungsi sebagai tahanan arus.
Ic Regulator 7805 : Regulator tegangan 5v untuk memyalakan kipas (5v).
Pin D2 : untuk menghidupkan lampu utama.
Pin D3 : untuk menghidupkan lampu tidur.
Pin D4 : untuk menghidupkan kipas.
Modul ldr : Sebagai sensor penangkap cahaya agar alat dapat menyalakan/mematikan
lampu dengan efisien (penghematan energi).
14
3.4 Rancangan Perangkat Lunak (Software)
3.4.1 Flowcart
Berikut adalah flowcart tentang alur kerja smart room berbasis arduino:
Gambar 3.3 Flowcart Smart Room Berbasis Arduino.
3.4.2 Pembuatan Channel Server ThingSpeak
Langkah awal dalam membuat simulasi cara kerja smart room berbasis
Arduino adalah membuat server sebagai tempat menyimpan dan memanggil
kembali perintah yang akan dijalankan. ThingSpeak berfungsi sebagai server yang
15
dapat diperintah langsung melalui koneksi internet dalam satu jaringan yang
sama. Berikut adalah langkah-langkah membuat channel di server ThingSpeak:
1. Buka ThingSpeak pada browser laptop atau smartphone dengan alamat
https://thingspeak.com
Gambar 3.4 Tampilan Web ThingSpeak.
2. Setelah itu pilih menu Sign Up untuk membuat akun baru. Berikut
adalah tampilannya:
Gambar 3.5 Tampilan Halaman Sign Up Account.
3. Setelah itu isi data berupa email, location, first name, dan juga last
name. setelah semua terisi pilih box berwarna biru bertuiskan continue
untuk melanjutkan ke halaman yang selanjutnya. Setelah itu akan
16
muncul tulisan yang mengharuskan untuk segera memverifikasi email
yang sudah didaftarkan sebelumnya. Berikut adalah tampilannya:
Gambar 3.6 Verifikasi Email Yang Telah Didaftarkan.
4. Setelah memverifikasi email, maka langkah selanjutnya adalah
membuat id beserta password untuk login ke akun ThingSpeak.
Berikut adalah tampilannya:
Gambar 3.7 Pembuatan ID Beserta Password.
5. Setelah itu maka akan segera dialuhkan menuju halaman utama dari
akun yang sudah dibuat sebelumnya. Berikut adalah tampilan setelah
login ke akun ThingSpeak:
17
Gambar 3.8 Tampilan Utama Akun ThingSpeak Setelah Login.
6. Setelah itu, langkah selanjutnya adalah membuat sebuah channel yang
nantinya akan diintegrasikan dengan perintah yang dibuat di program
Arduino dengan menggunakan Bahasa pemprograman C. Pilih New
Channel dan isikan data sesuai kebutuhan yang diinginkan. Berikut
adalah tampilannya:
Gambar 3.9 Pembuatan Channel.
7. Setelah itu isikan data yang dibutuhkan. Dan dalam penelitian ini,
kolom field yang diapakai hanya sebanyak 3 kolom yakni field 1, field
2, dan field 3. Jumlah field berpengaruh terhadap banyaknya peralatan
yang akan diintegrasikan nanti. Dalam penelitian ini, alat yang akan
diintegrasikan antara lain 2 buah lampu, dan 1 kipas.
18
8. Setelah itu, channel yang sudah dibuat pada langkah sebelumnya akan
mendapatkan nomor channel id secara otomatis. Nomor ini sangat
berguna sebagai jembatan untuk memberi perintah dan mengirimkan
perintah terhadapa alat alat yang sudah terintegrasi. Berikut adalah
tampilannya:
Gambar 3.10 Channel ID.
9. Langkah selanjutnya adalah melakukan generated API Key untuk
melakukan integrasi antara program arduino terhadap server
thingspeak untuk menerima maupun memberikan perintah. Berikut
adalah tampilannya:
Gambar 3.11 Tampilan API Key Channel.
3.4.3 Pembuatan Bahasa Program Arduino
Pada langkah ini akan dijelaskan tentang bagaimana membuat program
arduino dengan menggunakan Notepad++ untuk menyusun coding beserta
menggunakan IDE Arduino v1.8.9. Berikut adalah tampilan IDE Arduino v1.8.9:
19
Gambar 3.12 Tampilan IDE Arduino v.1.8.9.
Langkah selanjutnya yaitu menggunakan Notepad++ untuk menyusun
coding yang akan di-upload ke dalam board NodeMCU yang nantinya akan
diintegrasikan dengan server ThingSpeak melalui koneksi internet. Berikut adalah
tampilan coding untuk program arduino :
Tabel 3.1 Coding Program Arduino
#include "ThingSpeak.h"
#include <ESP8266WiFi.h>
//hotspot yang sudah disetting sehingga ketika alat dinyalakan maka akan langsung terhubung
dengan data dari server thingspeak
const char* ssid = "nagasmartroom";
const char* password = "nagasmartroom1234";
//Channel id yang sudah dibuat dalam akun thingspeak berguna untuk menyampaikan perintah
unsigned long channel = 800735;
20
//definisi dari kotak field yang sudah diinputkan saat membuat channel di ThingSpeak.
Penamaan harus sama
unsigned int led1 = 1;
unsigned int led2 = 2;
unsigned int led3 = 3;
WiFiClient client;
void setup() {
Serial.begin(115200);
delay(100);
pinMode(D1, OUTPUT);
pinMode(D2, OUTPUT);
pinMode(D3, OUTPUT);
digitalWrite(D1, 0);
digitalWrite(D2, 0);
digitalWrite(D3, 0);
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
Serial.print("Netmask: ");
Serial.println(WiFi.subnetMask());
Serial.print("Gateway: ");
21
Serial.println(WiFi.gatewayIP());
ThingSpeak.begin(client);
}
void loop() {
//mengambil data dari server thingspeak
int led_1 = ThingSpeak.readFloatField(channel, led1);
int led_2 = ThingSpeak.readFloatField(channel, led2);
int led_3 = ThingSpeak.readFloatField(channel, led3);
if(led_1 == 1){
digitalWrite(D1, 1);
Serial.println("Lampu Utama ON");
}
else if(led_1 == 0){
digitalWrite(D1, 0);
Serial.println("Lampu Utama OFF");
}
if(led_2 == 1){
digitalWrite(D2, 1);
Serial.println("Lampu Tidur OFF");
}
else if(led_2 == 0){
digitalWrite(D2, 0);
Serial.println("Lampu Tidur OFF");
}
if(led_3 == 1){
digitalWrite(D3, 1);
Serial.println("Kipas ON");
}
else if(led_3 == 0){
digitalWrite(D3, 0);
Serial.println("Kipas OFF");
}
Serial.println(led_1);
22
Serial.println(led_2);
Serial.println(led_3);
delay(5000);
}
Setelah penyusunan coding selesai dibuat, langkah selanjutnya yaitu
upload coding ke board nodeMCU. Pastikan board sudah terhubung dengan
laptop atau komputer. Apabila board baru pertama kali terhubung dengan laptop
ataupun komputer, dibutuhkan driver tambahan yaitu usb convert CH341SER
agar board NodeMCU dapat terbaca di komputer, khususnya terbaca pada IDE
Arduino. Berikut adalah tampilan setelah coding dimasukkan ke dalam IDE
Arduino:
Gambar 3.13 Coding yang Akan Di-upload ke Board NodeMCU.
23
Sebelum memulai proses upload coding ke dalam board NodeMCU,
pastikan beberapa langkah berikut terpenuhi. Berikut langkah-langkah yang haris
diperhatikan sebelum melakukan proses upload coding ke board NodeMCU:
1. Download package library ThingSpeak dan masukkan ke dalam folder
program IDE Arduino.
2. Kemudian buka FilePreferences. Lalu masukkan
http://arduino.esp8266.com/stable/package_esp8266com_index.json ke
dalam kotak additional boards manager url’s. Berikut adalah
tampilannya:
Gambar 3.14 Menambahkan Modul Esp8266.
3. Setelah itu, masuk ke menu SketchInclude LibraryAdd ZIP Library.
Lalu arahkan ke library Thingspeak yang sudah di-download sebelumnya.
4. Kemudian pilih menu ToolsBoardBoard Manager. Kemudian ketikan
“esp” pada kolom pencarian lalu instal. Berikut adalah tampilan ketika
board esp sudah terinstal:
Gambar 3.15 Intalasi Board Esp.
5. Jika sudah terinstal seperti langkah sebelumnya, masuk ke menu
ToolsBoardlalu pilih NodeMCU 1.0 (ESP-12E Module).
24
Gambar 3.16 Pemilihan Board NodeMCU 1.0 (ESP 12-E Module).
6. Setelah itu masuk kembali pada menu ToolsPort. Pilih port yang
tersedia. Jika alat terhubung dengan computer, maka menu Port telah aktif.
Jika belum terhubung, maka menu ini akan disable secara otomatis.
7. Coding siap untuk di upload.
3.4.4 Pembuatan Aplikasi
Setelah membuat coding program dan meng-upload coding tersebut ke
dalam board NodeMCU, langkah selanjutnya yaitu membuat coding untuk
aplikasi yang nantinya akan dioperasikan di smartphone atau laptop atau
komputer melalui web browser. Penyusunan coding aplikasi ini menggunakan
Notepad++ dengan menggunakan bahasa pemprogaman HTML. Berikut adalah
coding aplikasinya:
25
Tabel 3.2 Coding Aplikasi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="naga" content="width=device-width, initial-scale=1.0"/>
<meta name="naga" content="RIZKY NAGA MUHAMAD">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<title>SMARTROOM RIZKY NAGA MUHAMAD </title></head>
<body bgcolor="#607D8B">
<center>
<h1 style="font-family: Helvetica;color: white;">SMARTROOM</h1>
</center>
<div class="center">
<div align="center" class="form">
<form action="" method="get">
<input type="text" id="ip" class="ip" placeholder="Thingspeak
Write API Key"></input><br>
<br>
<button type="button" id="D1-on" class="button button1" >LAMPU UTAMA
ON</button>
<button type="button" id="D1-off" class="button button3"
>LAMPU UTAMA OFF</button>
<br>
<button type="button" id="D2-on" class="button button1"
>LAMPU TIDUR ON</button>
<button type="button" id="D2-off" class="button button3"
>LAMPU TIDUR OFF</button>
<br>
<button type="button" id="D3-on" class="button button1" >KIPAS
ON</button>
<button type="button" id="D3-off" class="button button3"
>KIPAS OFF</button>
26
<br>
</form>
</div>
</div>
<footer class="footer">
<center>
<h3 style="font-family: Helvetica;color: white;">RIZKY NAGA
MUHAMAD
<h3 style="font-family: Helvetica;color: white;">201410150511019
<h3 style="font-family: Helvetica;color: white;">2019
</center>
</footer>
</body>
<script>
document.getElementById('D1-on').addEventListener('click', function() {
var ip = document.getElementById('ip').value;
var url = "http://api.thingspeak.com/update?api_key="+ ip
+ "&field1=1"
$.getJSON(url, function(data) {
console.log(data);
});
});
document.getElementById('D1-off').addEventListener('click', function() {
var ip = document.getElementById('ip').value;
var url = "http://api.thingspeak.com/update?api_key="+ ip
+ "&field1=0"
$.getJSON(url, function(data) {
console.log(data);
});
});
document.getElementById('D2-on').addEventListener('click', function() {
27
var ip = document.getElementById('ip').value;
var url = "http://api.thingspeak.com/update?api_key="+ ip
+ "&field2=1"
$.getJSON(url, function(data) {
console.log(data);
});
});
document.getElementById('D2-off').addEventListener('click', function() {
var ip = document.getElementById('ip').value;
var url = "http://api.thingspeak.com/update?api_key="+ ip
+ "&field2=0"
$.getJSON(url, function(data) {
console.log(data);
});
});
document.getElementById('D3-on').addEventListener('click', function() {
var ip = document.getElementById('ip').value;
var url = "http://api.thingspeak.com/update?api_key="+ ip
+ "&field3=1"
$.getJSON(url, function(data) {
console.log(data);
});
});
document.getElementById('D3-off').addEventListener('click', function() {
var ip = document.getElementById('ip').value;
var url = "http://api.thingspeak.com/update?api_key="+ ip
+ "&field3=0"
$.getJSON(url, function(data) {
console.log(data);
});
});
</script>
</html>
28
Penjelasan coding adalah sebagai berikut:
1. <input type="text" id="ip" class="ip" placeholder="Thingspeak Write API
Key"></input><br>. Coding ini bermaksud untuk mengirim data ke server
ThingSpeak melalui inisiasi API Key yang terdapat pada channel yang
dibuat sebelumnya.
2. Coding untuk menginisiasi perintah on pada field 1. Berikut adalah
codingnya:
3. Coding untuk menginisiasi perintah off pada field 1. Berikut adalah
codingnya:
4. Coding untuk menginisiasi perintah on pada field 2. Berikut adalah
codingnya:
5. Coding untuk menginisiasi perintah off pada field 2. Berikut adalah
codingnya:
29
6. Coding untuk menginisiasi perintah on pada field 3. Berikut adalah
codingnya:
7. Coding untuk menginisiasi perintah off pada field 3. Berikut adalah
codingnya: