BAB III METODOLOGI/PERANCANGAN SISTEMeprints.umm.ac.id/54633/4/BAB III.pdflaptop atau komputer. Apabila board baru pertama kali terhubung dengan laptop ataupun komputer, dibutuhkan

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: