BAB III PERANCANGAN ALAT. 3.1 Gambaran Umum Proses Perancangan Alat. pesat akhir-akhir ini. Suatu aplikasi web tidak akan berjalan tanpa adanya

Transkripsi

1 BAB III PERANCANGAN ALAT 3.1 Gambaran Umum Proses Perancangan Alat Web dan internet merupakan suatu kebutuhan mutlak di dunia teknologi informasi sekarang ini. Perkembangan web dan internet sangat pesat akhir-akhir ini. Suatu aplikasi web tidak akan berjalan tanpa adanya webserver. Salah satu fungsi utamanya webserver adalah menyediakan layanan web yang mampu memberikan informasi tertentu kepada penggunanya. Pada sistem yang dibuat, akan membahas komunkasi antara mikrokontroler sebagai webserver dan komputer yang digunakan oleh pengguna untuk me-request web ke server. Pada tugas akhir ini penulis memanfaatkan sebuah mini komputer yaitu Raspberry Pi sebagai host server yang akan me-remote mikrokontroler Arduino Mega dengan Ethernet Shield yang terhubung ke router secara lokal melalui Web Browser. Dengan bantuan beberapa software pendukung agar Arduino dapat dikontrol darimana saja menggunakan device yang memiliki jaringan internet dan web browser. 20

2 21 Gambar 3.1Komunikasi dari Client pada Web Server Langkah yang terjadi pada webserver : 1. Web browser akan membagi URL dalam 3 bagian : a. Protokol ( http ) b. Nama server, c. Nama file, misalnya index.html 2. Web browser berkomunikasi dengan DNS server untuk mentranslasikan nama sever ke IP address, yang digunakan untuk berhubungan dengan server. 3. Web browser membentuk koneksi dengan server pada IP address dan port tertentu. 4. Sebelum terjadi pertukaran data antara web browser dengan server. Terjadi proses three way handshake untuk membentuk koneksi virtual antara server dan client.

3 22 5. Berdasarkan protokol HTTP, browser mengirimkan GET request ke server 6. Server mengirimkan teks HTML berupa halaman web kepada browser. 7. Browser membaca HTML tags tersebut dan menampilkannya pada client. Pada tugas akhir ini file atau teks HTML digantikan oleh listing program yang diupload ke Arduino Mega. Dengan kata lain teks HTML dimasukan kedalam Arduino Sketch kemudian diupload dan tersimpan di dalam memory Arduino Mega. Penulis lebih memilih Arduino Mega karena kapasitasnya cukup untuk menyimpan web server sederhana yang penulis rancang Analisa Jaringan Langkah awal yang perlu dilakukan adalah mengetahui tentang kondisi jaringan karena keadaan jaringan sangat mempengaruh dalam penentuan alamat. Kondisi jaringan ini dapat berupa : 1. Jumlah Jaringan Untuk membentuk sebuah jaringan, perlu mengetahui banyaknya jumlah jaringan lokal yang dimiliki sebelumnya beserta dengan kondisi jaringan tersebut. 2. Jumlah Host dalam Jaringan Setelah mengetahui jumlah jaringan local yang ada, perlu juga mengetahui banyaknya host yang digunakan sebagai client pada jaringan lokal yang digunakan sekaligus kondisi fisik masing-masing host tersebut.

4 Identifikasi Kebutuhan Untuk dapat membuat webserver berbasis mikrokontroler bukanlah suatu pekerjaan yang mudah. Perlu dipertimbangkan pemilihanteknologi yang sesuai dengan permasalahan dan kondisi sistem yang sudah ada. Halhal yang perlu diperhatikan antara lain : 1. Webserver harus mampu menjalankan salah satu fungsi utamanya, yaitu menyediakan layanan web yang memberikan informasi tertentu kepada penggunanya. 2. Webserver berbasis mikrokontroler ini menggunakan protokol TCP/IP dalam komunikasinya dengan pengguna, sehingga dapat melayani pengguna seperti layaknya webserver berbasis komputer. 3. Pemilihan jenis mikrokontroler yang sesuai, sehingga bisa menjalankan fungsi sebagai webserver Spesifikasi Sistem Dalam tugas akhir ini, sistem diimplementasikan kedalam suatu aplikasi web tentang Smarthome Berbasis Arduino Via Webserver ini akan berisi sistem kendali jarak jauh peralatan rumah menggunakan relay. Dengan web tersebut, pengguna yang mengakses diharapkan akan mengetahui informasi-informasi mengenai peralatan atau lampu mana sajakah yang ON. Program webserver pada Arduino webserver akan ditulis dengan menggunakan Arduino sketch sebagai editor teksnya. Program dibagi dalam tiga hal pokok yaitu program komunikasi antara pengguna dengan mikrokontroler, program inisialisasi ADC untuk

5 24 menampilan kondisi ON atau OFF peralatan yang akan dikendalikan dalam bentuk WEB GUI. Arduino webserver bekerja menggunakan chip W5100 Wiznet menyediakan jaringan (IP) yang mampu baik TCP (transmission control protocol) dan UDP (user datagram protocol). Sesuai dengan namanya, protokol ini digunakan untuk menghubungkan beberapa buah rangkaian terintegrasi yang jenisnya bisa berbeda. Komunikasi ini menggunakan dua jalur yaitu jalur data serial (SDA) dan jalur clock serial (SCL). Dalam suatu perancangan system, pertama tama kita harus menentukan prinsip kerja dari suatu system yang akan kita buat. Untuk itu perlu disusun spesifikasi teknis dari system itu sendiri dan hubungan Interfacing secara diagram blok nya digambarkan. Dengan tujuan untuk mempermmudah pada implementasinya nanti, berikut penjelasanya.

6 25 Gambar 3.2Blok Diagram Arduino Smarthome Webserver Berikut list perangkat yang akan digunakan dalam tugas akhir ini: 1. Arduino Mega 2. Raspberry Pi + Power Adapter 5v 3. Wireless Adapter USB (untuk Raspberry Pi)

7 26 4. Modul Relay 4 Channel 5. Ehternet Shield 6. Switching Power Supply 5v (copotan dari charger handphone Cross) 7. Wireless Router TL-MR Power Adapter 12v 8. Kabel Ethernet 9. Kabel USB LCT buah switch 11. USB Hub Rexus (akan dimodifikasi sebagai power hub 5v) 3.2 Instalasi Arduino Sketch di Windows 7 Arduino MEGA merupakan sebuah Mikrokontroler yang dapat di program di System Operasi Windows dan Linux. Dalam Realisasi ini Arduino di kontrol melalui Operating SystemWindows 7. Software yang digunakan untuk memprogram Arduino yaitu Arduino IDE, IDE ini dapat di download pada halaman Sebelum mendownload Arduino IDE, karena Windows 7 dilengkapi keamanan yang tinggi dan juga tidak bisa sembarang install driver dari Software pihak ketiga maka aktifkan dulu fitur Disable Driver Signature Enforcment. Karena jika tidak maka Driver Arduino IDE tidak dapat di install dan akan terblock oleh Windows. Dan berikut cara mematikan fitur keamanan Driver pada Windows 7 berikut langkah-langkah nya. a. Pertama masuk ke menu PC Setting, lalu klik tab General, dan dibawah Advance Startup klik Restart Now.

8 27 b. Setelah itu Windows akan restar dan masuk ke menu recovery, disini klik Troubleshoot. c. Setelah masuk menu Troubleshoot lalu pilih AdvanceOptions seperti dibawah d. Setelah masuk menu Advance Option, klik menu StartupSettings untuk mengganti Startup Behavior dari Windows 7 e. Dan di menu Startup Settings ini, pilih nomor 7 dengan cara menekan numpad 7 pada keyboard dan ini berfungsi untuk mematikan fitur keamanan driver pada Windows 7 dan selanjutnya kita bisa bebas menginstal driver pada Windows 7. f. Setelah men disable fitur kemanan driver di Windows 7 selanjutnya download IDE tersebut dan sesuaikan dengan System Operasi yang dipakai, dan dalam perancangan ini penulis menggunakan Laptop HP Probook 4341s dengan System Operasi Windows 7 64 Bit. Maka penulis menngunduh versi 64 Bit dari IDE tersebut dengan versi IDE yang terbaru yaitu Versi r2 BETA. Karena versi ini merupakan versi portable dari Arduino IDE, maka hasil download akan ber extensi.zip. g. Setelah berhasil di download,extractarduino IDE.zip tersebut lalu letakkan hasil extract di Local Disk C :. h. Dan buatlah Shortcut dari Arduino IDE tersebut ke Desktop agar mudah di jalankan i. Setelah dibuat Shortcut, sekarang colokan ArduinoMEGA ke salah satu port USB di Laptop dan untuk pertama kalinya Windows akan

9 28 meminta untuk menginstal driver pada Windows. Ketika muncul Popup Windows Security pilih Install this driversoftware anyway untuk menginstal driverarduino IDE pada Windows. j. Dan selanjutnya proses penginstalan driverarduinomega pada Windows 7. k. Setelah terinstal, dapat dilihat di Device Manager pada menu Ports (COM & LPT) dan driver Arduino Mega telah terinstal pada Port COM21. Setelah semuanya terinstal, jalankan programarduino IDE dan program akan menampilkan SketchWindows untuk mem-programarduino. Di dalam Sketch ini kita bisa memulai membuat Coding untuk mengontrol dan memerintah MikrokontrolerArduino. Gambar 3.3Arduino Sketch

10 Pengetesan Ethernet Shield Untuk meyakinkan bahwa Modul Ethernet Shieldberjalan dengan baik, pertama kali kita lakukan test terlebih dahulu. Sebelumnya pastikan bahwa setiap port pada Modul Ethernet Shield sudah tersambung dengan Arduino nya. Setelah itu kita dapat menggunakan example sketch pada Arduino Sktech, program dapat dilihat pada Lampiran 2. Gambar 3.4Example Sketch Web Server Karena ModulEthernet Shield ini berupa Shield jadi cukup mudah dipasangkan karena setiap port sudah di pas kan untuk PortsArduino nya. Tinggal di tumpangkan di atas Arduino nya dan ShieldModulRthernet ini sudah bisa bekerja dan dibawah ini merupakan Interfacing nya.

11 30 Gambar 3.5InterfacingModulEthernet Shield dengan ArduinoMega Dapat dilihat dari Langkah dan Gambar diatas dimana setiap port pada Modul Ethernet Shield dan Arduino tersambung secara sejajar. Karena ini merupakan keunggulan dari Ethernet Shieldyang dimana memang sudah diperuntukan untuk Arduino. Dan dibawah ini merupakan Interfacing secara nyatanya pada Hardware. Setelah example sketch muncul, lihat IP address yang tertulis atau tentukan sendiri IP yang diinginkan kemudian upload sketch tersebut. Dengan menghubungkan port ethernet di Ethernet Shiled + Arduino Mega ke PC atau laptop dan ketik IP yang telah di setting (dalam contoh ini IP-nya ) sebelumnya di sketch, akan muncul web simpel seperti gambar di bawah.

12 31 Gambar 3.6Output contoh Web Server Sketch Apabila output di browser sudah seperti gambar di atas berarti ethernet shield-nya sudah siap dipakai dan tidak ada masalah. 3.4 Perancangan Arduino Sketch Berikut sketch program yang akan diupload melalui Arduino Sktech. Pin digital yang digunakan adalah pin digital 2, 3, 4, dan 5. Kemudian yang perlu diperhatikan adalah konfigurasi IP address dan Gateway, IP address disetting dan Gateway

13 32 Gambar 3.7Capture sketch program page 1 Gambar 3.8Capture sketch program page 2

14 33 Gambar 3.9Capture sketch program page 3 Gambar 3.10Capture sketch program page 4 Gambar 3.11Capture sketch program page 5

15 34 Gambar 3.12Capture sketch program page 6 Gambar 3.13Capture sketch program page 7

16 35 Gambar 3.14Capture sketch program page 8 Gambar 3.15Capture sketch program page 9 Setelah semua listing program telat selesai verify kemudian upload sketch ke Arduino Mega, tunggu hingga compiling sketch dan uploading sketch done. Cek tampilan GUI dari web server arduino yang telah dirancang

17 36 dengan web browser dengan memasukan IP yang telah disetting tadi yaitu Gambar 3.16Tampilan GUI di web browser 3.5 Instalasi OS (Operating System) Pada Raspberry Pi Raspberry Pi merupakan Single Board Computer berbasis linux, sehingga banyak developer yang mengembangkan OS untuk komputer mini ini karena device ini bersifat open source. Dan OS yang akan penulis gunakan pada Raspi ini adalah NOOBS, OS yang diperkenalkan oleh

18 37 pencipta Raspberry Pi. NOOBS merupakan OS yang paling mudah dilakukan instalasinya oleh pemula. Sebelum proses instalasi, unduh terlebih dahulu NOOBS installer dari website resmi Raspberry Pihttp:// Pilih NOOBS Offline and Network Install dan klik download ZIP, ukuran file yang diunduh sekitar 1,4 GB. Simpan file yang diunduh ke harddisk PC/Notebook terlebih dahulu. Gambar 3.17Ilustrasi Download File NOOBS Setelah file zip NOOBS diunduh, unzip/ekstrak pada SD card yang telah diformat dengan ukuran 4GB atau lebih besar. Sebelum file NOOBS diekstrak ke SD card sesuai petunjuk resmi dari Raspberry Pi, SD card harus terlebih dahulu di format menggunakan SD Formatter. SD Formatter dapat diunduh installernya di URL berikut Kemudian, pilih Installer untuk Windows.

19 38 Gambar 3.18Ilustrasi Download File SD Formatter Setelah selesai mengunduh, lakukan proses instalasi di PC/Notebook yang digunakan. Setelah selesai langsung eksekusi program SDFormatter, jangan lupa masukkan SD Card yang akan digunakan ke Card Reader di PC/Notebook. Gambar 3.19Tampilan Software SD Formatter

20 39 Tanpa perlu merubah konfigurasi, langsung klik tombol Format untuk memulai proses Quick Format. Setelah selesai proses formatting, SD Card sudah siap untuk digunakan. Setelah proses download NOOBS dan format SD Card, lakukan ekstraksi file ZIP yang telah diunduh ke harddisk PC/Notebook terlebih dahulu.setelah proses ekstraksi selesai, kurang lebih akan ada list file sesuai gambar berikut. Copy seluruh file hasil ekstraksi ke dalam SD Card. Gambar 3.20Hasil unzip NOOBS pada SD card Setelah seluruh proses Copy telah selesai, keluarkan SD Card dari Card Reader dan pasangkan ke Socket SD Card pada Raspberry Pi.Siapkan Raspberry Pi beserta accessoris nya (adaptor 5v micro usb, keyboard, mouse, WiFi dongle, kabel hdmi, dan monitor).

21 40 Gambar 3.21Raspberry Pi dan Accessories Hidupkan Raspberry, tunggu sampai Proses selesai. Jika sudah masuk Raspberry Pi Config, klik finish. Ketik startx maka akan masuk ke tampilan utama Raspberry Pi, kurang lebih seperti tampilan windows. Gambar 3.22Tampilan Home Screen Raspberry Pi

22 Instalasi TightVNC pada Raspberry Pi VNC adalah graphical desktop sharing system yang memungkinkan Anda untuk kontrol jarak jauh interface desktop suatu komputer dari komputer yang lain. VNC ini mentransmisikan pergerakan input keyboard dan mouse dari controller, dan menerima update ke layar melalui jaringan dari host remote. Dengan menggunkan VNC kita akan dapat melihat dan mengakses desktop Raspberry Pi dari window komputer kita. Kita akan dapat mengendalikannya seolah-olah kita sedang bekerja pada Raspberry Pi sendiri. Sehingga kita tidak lagi memerlukan keyboard, mouse, maupun monitor pada Raspberry Pi seperti pada saat startup instalasi OS NOOBS cukup power micro usb dan WiFi dongle saja yg terpasang pada Raspberry Pi. VNC yang diinstal pada Raspberry Pi kali ini adalah TightVNC. TightVNC merupakan clone software dari VNC yang biasa digunakan pada Windows, bedanya TightVNC dapat diinstaldi OS yang bersifat opensource dikarenakan device yang penulis digunakan berbasis linux. Berikut langkah-langkah instalasi TightVNC pada Raspberry Pi. a. Buka commad prompt langsung pada Pi atau bisa melalui SSH menggunakan PuTTY. Untuk menggunakan PuTYY, terlebih dahulu kita harus sudah mengetahui IP address Pi kemudian baru dapat di kontrol melalui SSH di PuTTY. Agar IP DHCP yang didapat tidak berubah-ubah penulis sudah mendaftarkan mac addrees Pi pada router

23 42 sehingga ketika Pi terhubung ke router akan selalu mendapat IP address yang sama. IP address default pada Pi yang penulis konfig adalah Gambar 3.23Login Pi via SSH PuTTY b. Masukan username dan password (user: pi, password: raspberry). Kemudian masukan command berikut, sudo apt-get install tightvncserver c. Setelah install selesai, run TightVNC Server kemudian akan ada prompt untuk mengisi username dan password. tightvncserver d. Start VNC server dari terminal dengan memasukan command, vncserver :1

24 43 Gambar 3.24Instalasi TightVNC dan Aktivasi VNC Server e. Setelah mengaktifkan VNC server, install VNC Viewer di PC dan di smartphone yang akan dijadikan remote. Untuk PC Windows dapat di download dari tightvnc.com. Untuk smartphone IOS atau android, dapat menggunakan berbagai macam app asalkan support VNC. Untuk app yang penulis gunakan di smartphone IOS adalah VNCViewer. Untuk test TightVNC telah terinstal dengan benar atau tidak kita dapat mengujinya dengan menghubungkan dengan jaringan lokal. Setelah Pi terhubung dengan wireless router, lihat alamat IP yang didapat. Kemudian masukan IP tersebut ke software VNC Viewer yang telah diinstal di masing-masing device. Kali ini penulis mencoba menggunakan TightVNC Viewer di PC Windows 7. Setelah memasukan IP Pi kemudian klik tombol connect. Apabila di jendela VNC Viewer muncul home screen Pi, berarti instalasi TightVNC pada Pi telah berhasil. Screenshot di bawah ini adalah masih remote lokal artinya belum via internet.

25 44 Gambar 3.25Login lokal Pi via TightVNC Viewer di PC Gambar 3.26Home screen Pi via TightVNC Viewer di PC Instalasi Software Weaved pada Raspberry Pi Weaved adalah salah satu penyedia layanan Internet of Things (IoT) gratis. Apa itu IoT? Sederhananya IoT merupakan sebuah konsep yang menghubungkan alat apapun dengan prinsip ON dan OFF switch melalui internet. Alat-alat yang dapat terhubung ini termasuk telepon rumah, alat pembuat kopi, mesin cuci, handphone, lampu, dan lain-lain. Namun kali

26 45 ini penulis hanya menggunakan sample alatnya adalah lampu, kipas angin, dan charger HP. Semua siwtch dikontrol melalui relay. Langkah-langkah instalasi Weaved pada Pi. a. Pertama kita harus memiliki akun Weaved, kita dapat registrasi di web weaved.com kemudian ikuti langkah-langkah nya. Gambar 3.27Sign up akun Weaved di websitenya b. Setelah akun kita telah diregistrasi, instal app Weaved di Pi melalui command prompt.pastikan Pi telah terkoneksi dengan internet. Berikut command linenya. - Download Weaved Wgethttps://github.com/weaved/installer/raw/master/ binaries/weaved-nixinstaller_ bin - Membuat software Weaved menjadi executetable file Chmod +x weaved-nixinstaller_ bin - Kemudian launch./weaved-nixinstaller_ bin

27 46 - Akan muncul prompt untuk memasukan user dan password, isi sesuai akun yang telah dibuat di website weaved sebelumnya. - Kemudian akan muncul menu pilihan service yang akan digunakan. - Pilih nomer 4 untuk service VNC Gambar 3.28Menu service Weaved di Pi a. Setelah instalasi selesai, pilih jenis service yang akan digunakan. Untuk tugas akhir ini penulis menggunakan VNC. b. Setelah pemilihan service selesai seharusnya device kita sudah online di internet. Buka weaved.com kemudian login. Kita akan melihat device dan service yang telah kita buat sebelumnya di Pi. Klik nama device tersebut kemudian kita akan mendapatkan alamat UID yang akan kita remote melalui VNC Viewer. Gambar 3.29Device yang online di weaved.com

28 47 c. Coba masukan alamat UID yang telah didapat tadi ke VNC Viewer. Pastikan device yang digunakan (PC atau smartphone) terkoneksi dengan internet. UID untuk VNC yang didapatkan dari Weaved akan berbeda setiap kali Raspberry Pi dalam keadaan offline, jadi UID harus dicek di web Weaved tiap kali Raspberry starting up. Apabila Rasberry Pi tetap dalam keadaan Online UID VNC tidak akan berubah. Gambar 3.30Alamat UID yang didapat dari weaved d. Apabila sudah dapat terkoneksi dengan Pi dan muncul jendela home screen dari Pi berarti instalasi Weaved telah berhasil.

29 48 Gambar 3.31Tampilan remote Raspberry Pi dari TightVNC Viewer 3.6 Konfigurasi Wireless Router via internet Router yang digunakan pada tugas akhir ini adalah TP Link MR3220. Pada tugas akhir ini penulis mengkombinasikan TP Link MR3220 dengan modem ZTE 4G untuk mendapat akses internet nya. Gambar 3.32Interkoneksi Router dengan Modem 4G

30 49 Interkoneksi antara router dengan modem 4G cukup mudah karena TP Link MR3200 memiliki port usb. Cukup dengan plug and play modem 4G ke port usb di TP Link MR3200, modem akan otomatis terdeteksi dan terhubung ke internet. Untuk mengetahui network sudah terhubung atau belum dapat dilihat melalui web console router tersebut. Dengan memasukan default IP gateway pada browser, default IP gateway router ini adalah setelah memasukan IP gateway akan ada prompt untuk memasukan user dan password, masukan user: admin dan password: Dengan masuk ke web console kita juga dapat menkonfigur router ini. Gambar 3.33Network status pada router

31 DHCP Settings Pada dasarnya IP DHCP yang didapat dari router akan didapatkan berurutan sesuai device yang konek lebih dulu. Agar IP pada masingmasing device yang terkoneksi ke router tidak berubuah-ubah, harus dilakukan address revervation pada router melalui DCHP settings. Sebelum melakukan reservation address terlebih dahulu catat mac address masing-masing device untuk didaftarkan di router. Berikut list mac address dan planning IP address dari device yang penulis gunakan untuk tugas akhir ini: Iphone 5 DC:86D8:42:CC: Laptop HP F4:B7:E2:05:FF:F Raspberry Pi 00:E0:4C:81:7B:F Arduino Mega B8:27:EB:3E:AC:B Setelah kita mengetahui mac address dari masing-masing device, kemudian daftarkan mac address dan IP address-nya di menu DHCP Setting Address Reservtaion Add New. Gambar 3.34Pendaftaran mac address di router

32 51 Gambar 3.35List mac address yang telah didaftarkan Setelah semua mac address didaftarkan dan mendapatkan IP masingmasing, reboot router. Kemudian device yang terkoneksi dengan router akan mendapatkan IP DHCP yang tetap dan tidak berubah-ubah apabila device restart atau baru startup. Gambar 3.36List device yang terhubung ke router setelah mac adress dari masing-masing device didaftarkan

33 Perancangan dan Interkoneksi Wiring Antar Device Setelah selesai menyiapkan dan menguji semua device atau perangkat yang akan digunakan, lanjut ke perancangan dan internokensi perangkat ke dalam casing. Berikut tampilan dari perangkat-perangkat yang telah disiapkan. Dapat dilihat dari gambar di atas ada satu perangkat tambahan, yaitu Switching Power Supply 5v sebagai sumber tegangan untuk Arduino Mega. Sedangkan Raspberry Pi akan stand alone dengan power adapter sendiri dan tidak berada di dalam case. Gambar 3.37 Interkoneksi dan wiring antar device