Project Akhir Semester "SMART LAMP CONTROL"

Laporan Project Akhir Semester
Alat Pengembang Perangkat Lunak

“SMART LAMP CONTROL”
LUSIANA DIYAN NINGRUM

2210181051
2 D4 Teknik Komputer B
Program Studi D4 Teknik Komputer

Departemen Teknik Informatika dan Komputer
Politeknik Elektronika Negeri Surabaya
2020
Laporan Project Akhir Semester
Alat Pengembang Perangkat Lunak
“SMART LAMP CONTROL”
DASAR TEORI
NodeMCU
Internet of Thing (IoT) mulai dikenalkan sejak tahun 2009. Beberapa perangkat
pendukung mulai dikembangkan dengan paket yang kecil dan simple, seperti Arduino dan
NodeMCU. NodeMCU adalah platform IoT yang bersifat opensource. Terdiri dari
perangkat keras berupa System On Chip ESP8266 dari ESP8266 buatan Espressif System.
NodeMCU telah me-package ESP8266 ke dalam sebuah board yang kompak dengan
berbagai fitur layaknya mikrokontroler + kapabilitas akses terhadap Wifi juga chip
komunikasi USB to serial. Sehingga untuk memprogramnya hanya diperlukan ekstensi
kabel data USB persis yang digunakan sebagai kabel data dan kabel charging smartphone
Android.
NodeMCU V3 ESP8266 ini sejatinya juga sebuah mikrokontroler seperti Arduino, yang
ditambahi dengan modul WiFi ESP8266. Selain terdapat memori untuk menyimpan
program, juga tersedia port digital Input – Output, sebuah port analog input serta port
dengan fungsi khusus seperti serial UART, SPI, I2C dll.
NodeMCU adalah sebuah platform IoT yang bersifat opensource. Terdiri dari perangkat
keras berupa System On Chip ESP8266 dari ESP8266 buatan Esperessif System,
juga firmware yang digunakan, yang menggunakan bahasa pemrograman scripting Lua. Istilah
NodeMCU secara default sebenarnya mengacu pada firmware yang digunakan daripada
perangkat keras development kit.
NodeMCU bisa dianalogikan sebagai board arduino-nya ESP8266. Dalam seri tutorial
ESP8266 embeddednesia pernah membahas bagaimana memprogram ESP8266 sedikit
merepotkan karena diperlukan beberapa teknik wiring serta tambahan modul USB to serial
untuk mengunduh program. Namun NodeMCU telah me-package ESP8266 ke dalam
sebuah board yang kompak dengan berbagai fitur layaknya mikrokontroler + kapabilitas akses
terhadap Wifi juga chip komunikasi USB to serial. Sehingga untuk memprogramnya hanya
diperlukan ekstensi kabel data USB persis yang digunakan sebagai kabel data dan
kabel charging smartphone Android.
Gambar 1. NodeMCU ESP8266 V.3
NodeMCU bisa dianalogikaan sebagai board arduino yang terkoneksi dengan ESP8622.
NodeMCU telah me-package ESP8266 ke dalam sebuah board yang sudah terintergrasi
dengan berbagai feature selayaknya microkontroler dan kapalitas ases terhadap wifi dan
juga chip komunikasi yang berupa USB to serial. Sehingga dala pemograman hanya
dibutuhkan kabel data USB. Karena Sumber utama dari NodeMCU adalah ESP8266
khusunya seri ESP-12 yang termasuk ESP-12E. Maka fitur – fitur yang dimiliki oleh
NodeMCU akan lebih kurang serupa dengan ESP-12. Beberapa Fitur yang tersedia antara
lain :
1. 10 Port GPIO dari D0 – D10

2. Fungsionalitas PWM
3. Antarmuka I2C dan SPI
4. Antaruka 1 Wire
5. ADC
ESP8266 menggunakan standar tegangan JEDEC (tegangan 3.3V) untuk bisa berfungsi.
Tidak seperti mikrokontroler AVR dan sebagian besar board Arduino yang memiliki
tegangan TTL 5 volt. Meskipun begitu, node mcu masih bisa terhubung dengan 5V namun
melalui port micro USB atau pin Vin yang disediakan oleh board-nya. Namun karena
semua pin pada ESP8266 tidak toleran terhadap masukan 5V. Maka jangan sekali – kali
langsung mencatunya dengan tegangan TTL jika tidak ingin merusak board anda. Anda
bisa menggunakan Level Logic Converter untuk mengubah tegangan ke nilai aman 3.3v.
Android Studio IDE
Android adalah sistem operasi yang dirancang oleh Google dengan basis kernel Linux
untuk mendukung kinerja perangkat elektronik layar sentuh, seperti tablet
atau smartphone. Jadi, android digunakan dengan sentuhan, gesekan ataupun ketukan pada
layar gadget anda. Android bersifat open source atau bebas digunakan, dimodifikasi,
diperbaiki dan didistribusikan oleh para pembuat ataupun pengembang perangkat lunak.
Dengan sifat open source perusahaan teknologi bebas menggunakan OS ini
diperangkatnya tanpa lisensi alias gratis. Begitupun dengan para pembuat aplikasi, mereka
bebas membuat aplikasi dengan kode-kode sumber yang dikeluarkan google. Dengan
seperti itu android memiliki jutaan support aplikasi gratis/berbayar yang dapat diunduh
melalui google play.
Gambar 2. Android
Android Studio adalah Lingkungan Pengembangan Terpadu – Integrated Development

Environment (IDE) untuk pengembangan aplikasi Android, berdasarkan IntelliJ IDEA .
Selain merupakan editor code IntelliJ dan alat pengembang yang berdaya guna, Android
Studio menawarkan lebih banyak fitur. Gunanya untuk meningkatkan produktivitas saat
membuat aplikasi Android.
Android Software Development Kit (SDK) merupakan kit yang bisa digunakan oleh
para developer untuk mengembangkan aplikasi berbasis Android. Di dalamnya, terdapat
beberapa tools seperti debugger, software libraries, emulator, dokumentasi, sample
code dan tutorial.
Java SE Development kit adalah salah satu contoh Android SDK dan menjadi bahasa
pemrograman yang paling sering digunakan untuk mengembangkan aplikasi Android. Di
samping itu ada beberapa bahasa lainnya seperti C++, Go, dan Kotlin -bahasa yang
ditetapkan Google pada tahun 2017 lalu.
Arduino IDE
Arduino IDE (Integrated Development Environment) adalah software yang di gunakan
untuk memprogram di arduino, dengan kata lain Arduino IDE sebagai media untuk
memprogram board Arduino. Arduino IDE bisa di download secara gratis di website
resmi Arduino IDE. Arduino IDE ini berguna sebagai text editor untuk
membuat, mengedit, dan juga mevalidasi kode program. bisa juga digunakan untuk meng-
upload ke board Arduino. Kode program yang digunakan pada Arduino disebut dengan
istilah Arduino “sketch” atau disebut juga source code arduino, dengan ekstensi file
source code .ino
Arduino menggunakan bahasa pemrograman C yang dimodifikasi. Kita sebut saja dengan
bahasa pemrograman C for Arduino. Bahasa pemrograman arduino sudah dirubah untuk
memudahkan pemula dalam melakukan pemrograman dari bahasa aslinya. Didalam
arduino sendiri sudah terdapat IC mikrokontroler yang sudah ditanam program yang
bernama Bootloader. Funsi dari bootloader tersebut adalah untuk menjadi penengah antara
compiler arduino dan mikrokontroler. Arduino IDE dibuat dari bahasa pemrograman
JAVA yang dilengkapi dengan library C/C++ (wiring), yang membuat operasi
input/output lebih mudah.
ALAT DAN BAHAN

1. Sistem Operasi : OS Windows 7/8 32 – 64 Bit, Linux, Mac
2. Prosesor : Minimal dual core, disarankan lebih
3. RAM : Minimum 4 GB, disarankan 8 GB
4. Ruang Drive : 1 GB lebih untuk Android SDK, Emulator, dan Cache
5. Resolusi Layar : 1280 X 800 Minimum
6. Java Development Kit : JDK 7/8
7. Software Arduino IDE yang sudah diinstal (jika belum terinstall, silahkan download di
https://www.arduino.cc/en/main/software dan install)
8. Driver CH340 (Download di https://sparks.gogo.co.nz/ch340.html dan install)
9. Breadboard
10. 2 buah LED (Warna merah dan biru)
11. Board NodeMCU(Board yang berbasis ESP8266)
12. 2 buah Resistor
13. Kabel male to female dan Kabel USB
LANGKAH PEMBUATAN
Installasi Arduino IDE
1. Download intaller Arduino IDE di link berikut
https://www.arduino.cc/en/main/software
Pilih versi Arduino berdasarkan sistem operasi yang digunakan.
2. Pada halaman konfirmasi untuk download pilih “Just Download”
3. Install file Arduino.exe yang didownload

4. Pada License Agreement , klik tombol “I Agree” untuk memulai menginstall software
5. Untuk kotak dialog Installation Option pilih semua option/pilihan dan tekan tombol
“Next”
6. Pada installation folder atau pilihan folder penyimpanan program Arduino, pilih
lokasi untuk menyimpan dan klik tombol “install” untuk memulai proses installasi
Arduino
7. Proses instalasi Arduino mulai berjalan, program di extract ke window

8. Ketika proses instalasi sedang berjalan, akan muncul kotak dialog untuk install driver,
centang pada opsi “Always trust software from Arduino..” dan klik tombol “Instal”
9. Proses instalasi selesai. Jendela ini bisa ditutup dengan menekan tombol “Close”
10. Proses instalasi Software Arduino sudah selesai terinstal di laptop. Cek di Desktop
Windows atau Start Menu untuk menjalankan Software IDE Arduino. Double Klik
icon Arduino di desktop atau klik di Start Menu
11. Jendela awal software Arduino IDE
12. Setelah Arduino IDE terbuka. Klik File > Preferences > Ketikan link berikut kedalam
box Additional Board Manager
(http://arduino.esp8266.com/stable/package_esp8266com_index.json ) > klik OK
13. Untuk install board NodeMCU, klik Tools > Board Manager > Ketikan ESP8266
pada searchbox > klik tombol Install. Pastikan perangkat terhubung dengan internet,
karena pada proses ini Arduino IDE akan mendownload library ESP8266 board
sebesar 150MB
14. Setelah proses download selesai maka kita bisa mendapati board bernama NodeMCU
atau Wemos di submenu Board. Atur tipe board, port dan upload speed nya sesuai
dengan yang digunakan
Memilih COM port

15. Pastikan upload speednya 115200 dan pilih tipe Board juga nomor Port nya sesuai
dengan yang kalian gunakan, NodeMCU atau Wemos
Installasi Library NodeMCU dan Driver CH340

1. Download file instalasi pada link berikut : https://sparks.gogo.co.nz/ch340.html
2. Extract file yang sudah didownload > klik 2x pada file .exe
3. Tunggu hingga proses installasi selesai

4. Dalam window perizinan “User Account Control”, pilih Yes
5. Pada window Driver Setup. Klik install kemudian tunggu hingga proses selesai
6. Ketika proses installasi selesai akan muncul dialog box yang memberitahukan bahwa
proses installasi driver telah berhasil
Pembuatan Project Arduino dan NodeMCU

1. Buat rangkaian pada breadboard seperti rangkaian di bawah ini (pada project ini saya
menggunakan 2 LED dengan warna yang berbeda yakni LED merah dan biru)
Gambar 3. Rangkaian
2. Buka Arduino IDE
3. Tuliskan kode di bawah ini pada editor Arduino IDE

#include <ESP8266WiFi.h> //definisikan library ESP8266 Wifi
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
// Ganti dengan password Jaringan WiFi yang user miliki

const char* ssid = "(isi dengan ID jaringan wifi yang digunakan)";
const char* password = "(password wifi/jaringan yang digunakan)";
ESP8266WebServer server(80); //Inisialisasi server pada port 80
String webpage; //inisialisasi variabel untuk menampung tampilan

String state1 = " ";
String state2 = " ";
int LED1 = D1; //pin yang terhubung dengan LED
int LED2 = D3; //pin yang terhubung dengan LED
void setup(void){
//Inisialisasi pin padam ketika NodeMCU pertama kali menyala
pinMode(LED1, OUTPUT);
pinMode(LED2, OUTPUT);
digitalWrite(LED1, LOW);
digitalWrite(LED2, LOW);
delay(1000);
Serial.begin(115200);
WiFi.begin(ssid, password); //begin WiFi connection
Serial.println("");
// Wait for connection

while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
// Isi dari Webpage ------------------------------------------------

-------
webpage += "<!DOCTYPE HTML>";
webpage += "<html>";
webpage += "<head>";
webpage += "<meta name=\"viewport\" content=\"width=device-width,
initial-scale=1\">";
webpage += "<link rel=\"stylesheet\"
href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap
.min.css\">";
webpage += "</head><div class=\"container\">";
webpage+= "<h1> LED Web Control ESP8266</h1>";
webpage+= "<h3>LED Biru : " + state1 + "\n";
webpage += "<div class=\"row\">";
//webpage += "<div class=\"col-md-2\"><a href=\"LED1On\"
class=\"btn btn-block btn-lg btn-primary\"
role=\"button\">ON</a></div>";
//webpage += "<div class=\"col-md-2\"><a href=\"LED1Off\"
class=\"btn btn-block btn-lg btn-info\"
role=\"button\">OFF</a></div>";
webpage+= "<div class=\"col-md-2\"><a href=\"LED1ON\"\"><button
class=\"btn btn-block btn-lg btn-primary\">ON</button></a> <a
href=\"LED1OFF\"\"><button class=\"btn btn-block btn-lg btn-
danger\">OFF</button></a></p><br></div>";
webpage += "</div>";
webpage+= "<h3>LED Merah : " + state2 + "\n";
webpage += "<div class=\"row\">";
webpage+= "<div class=\"col-md-2\"><a href=\"LED2ON\"\"><button
class=\"btn btn-block btn-lg btn-primary\">ON</button></a> <a
href=\"LED2OFF\"\"><button class=\"btn btn-block btn-lg btn-
danger\">OFF</button></a></p><br></div>";
//webpage += "<div class=\"col-md-2\"><a href=\"LED2On\"
class=\"btn btn-block btn-lg btn-primary\"
role=\"button\">ON</a></div>";
//webpage += "<div class=\"col-md-2\"><a href=\"LED2Off\"
class=\"btn btn-block btn-lg btn-info\"
role=\"button\">OFF</a></div>";
webpage += "</div>";
//membuat tampilan webpage

Serial.println(WiFi.localIP());
server.on("/", [](){
server.send(200, "text/html", webpage);
});
//untuk merespon perintah yang masuk --------------------------

server.on("/LED1ON", []() {
digitalWrite(LED1,HIGH);
state1 = "On";
delay(1000);
});
server.on("/LED2ON", []() {
digitalWrite(LED2,HIGH);
state2 = "On";
delay(1000);
});
server.on("/LED1OFF", []() {
digitalWrite(LED1,LOW);
state1 = "Off";
delay(1000);
});
server.on("/LED2OFF", []() {
digitalWrite(LED2,LOW);
state2 = "Off";
delay(1000);
});
server.begin();
Serial.println("Web server started!");
}
void loop() {
server.handleClient();
}
4. Upload code program ke NodeMCU dengan menekan button panah (Upload)
5. Kemudian lihat serial monitor untuk melihat apakah sudah terhubung ke SSID atau
belum. Jika sudah terhubung maka serial monitor akan menampilkan IP Address dan
keterangan seperti di bawah ini. Jangan lupa untuk memilih 115200 baud pada serial
monitor
Nb : ketika proses upload code ke NodeMCU jangan lupa untuk menekan tombol
“Reset” pada NodeMCU ketika terminal menampilkan pesan seperti di bawah ini agar
data pada serial monitor bisa keluar
6. Cek IP Address di browser dengan isi sesuai alamat ip yang tertera di serial
monitor http://xx.xx.xx.xx/ . Apabila berhasil maka led pada NodeMCU akan nyala
atau sebaliknya.
Pembuatan Aplikasi Kontrol LED pada Android Studio
1. Buat project baru pada android studio. New Project > Empty Activity > Next
2. Tulis beberapa data untuk project seperti nama project, nama package, lokasi
penyimpanan project, Bahasa yang digunakan untuk mendevelop project dan SDK
minimum dari aplikasi. Kemudian tekan “Finish” agar project dieksekusi oleh
Android Studio.
3. Buat tampilan pada file .xml. Tampilan ini yang nantinya akan tampil pada aplikasi
yang digunakan oleh user. Tuliskan kode di bawah ini untuk membuat tampilan.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F4F4F4"
android:orientation="vertical"
tools:context=".MonitoringActivity">
<RelativeLayout
android:layout_height="wrap_content"
android:padding="@dimen/medium">
<ImageView
android:id="@+id/reset"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentLeft="true"
android:background="@drawable/grey_circular_border"
android:padding="12dp"
android:src="@drawable/square_icon"
android:onClick="onClickReset"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:orientation="vertical">
<TextView
android:text="LAMP"
android:textColor="@color/textColor"
android:textSize="20sp" />
<TextView
android:layout_marginTop="@dimen/xsmall"
android:text="Table Lamp"
</LinearLayout>
<ImageView
android:id="@+id/status"
android:layout_alignParentRight="true"
android:background="@drawable/grey_circular_border"
android:padding="@dimen/small"
android:src="@drawable/heart" />
</RelativeLayout>
<ScrollView
android:layout_height="wrap_content">

<LinearLayout
android:orientation="vertical">
<ImageView
android:id="@+id/image"
android:scaleType="centerCrop"
android:layout_gravity="center"
android:src="@drawable/lampoff" />
<RelativeLayout
<LinearLayout
android:padding="@dimen/small">
<ToggleButton
android:layout_gravity="center"
android:id="@+id/toogle"
android:background="@drawable/btn_gradient_style"
android:padding="10dp"
android:textOff=" Power Off "
android:textOn =" Power On "
android:drawableStart="@drawable/selector"/>
<LinearLayout
android:layout_marginTop="@dimen/small">
<TextView
android:text="Durasi "
<TextView
android:id="@+id/tvTimer"
android:text="TIMER"
</LinearLayout>
</LinearLayout>
<TextView
android:id="@+id/satuan"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="23dp"
android:layout_marginBottom="5dp"
android:layout_marginEnd="11dp"
android:text="0 Watt"
<TextView
android:id="@+id/tagihan"
android:layout_below="@+id/satuan"
android:text="Rp. 1000"
</RelativeLayout>
<LinearLayout
android:background="@drawable/violet_circular_border"
<RelativeLayout
android:padding="@dimen/small">
<TextView
android:layout_alignParentStart="true"
android:text="Choose The Lamp"
android:textColor="@color/white"
<TextView
android:text="View all"
android:textColor="@color/white"
</RelativeLayout>
<HorizontalScrollView
<LinearLayout
<LinearLayout
android:id="@+id/redlamp"
android:background="@drawable/white_circular_border"
android:padding="12dp">
<ImageView
android:src="@drawable/redlamp" />
<LinearLayout
android:paddingLeft="@dimen/small"
android:paddingRight="@dimen/small">
<TextView
android:text="Edison Red Home Lamp"
<LinearLayout
android:gravity="center_vertical">
<TextView
android:text="25Watt"
<RelativeLayout
android:layout_marginStart="@dimen/xsmall">
<TextView
android:text="750/H"
android:layout_marginStart="@dimen/xsmall"
android:textColor="@color/orange"
</RelativeLayout>
<Space
android:layout_weight="1"/>
<ImageView
android:padding="6.5dp"
android:src="@drawable/heart_orange_fill"
android:background="@drawable/light_orange_circle"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/bluelamp"
android:layout_marginStart="20dp"
<ImageView
android:src="@drawable/bluelamp" />
<LinearLayout
<TextView
android:text="Edison Blue Home Lamp"
<LinearLayout
<TextView
android:text="350Watt"
<RelativeLayout
<TextView
</RelativeLayout>
<Space
<ImageView
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/greenlamp"
android:layout_marginStart="20dp"
<ImageView
android:src="@drawable/greenlamp" />
<LinearLayout
<TextView
android:text="Edison Yellow Table Lamp"
<LinearLayout
<TextView
android:text="350/W"
<RelativeLayout
<TextView
<LinearLayout
android:background="@color/orange"
android:layout_centerVertical="true"
android:layout_height="1dp"/>
</RelativeLayout>
<Space
<ImageView
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
Tampilan yang dihasilkan kode di atas seperti berikut
4. Buat koding untuk mengatur jalannya aplikasi android. Code untuk backend ini ditulis
pada file .java. Untuk aplikasi kontroler ini, gunakan kode berikut
public class MonitoringActivity extends AppCompatActivity {
//ip address yang didapatkan ketika upload project Arduino ke NodeMCU
private String mStringUrl="http://xxx.xxx.xx.xx/";
private OkHttpClient client;
private Request request;
ToggleButton toggleButton;
ImageView imageView, status;
LinearLayout bluelamp, redlamp, greenlamp;
TextView tvTimer, tvsatuan, tvTagihan;

ImageView reset;
double satuan = 0;
double tagihan =0;
private int seconds = 0;

private boolean running;
private boolean wasRunning;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_monitoring);
client = new OkHttpClient();
toggleButton = findViewById(R.id.toogle);
imageView = findViewById(R.id.image);
status = findViewById(R.id.status);
reset = findViewById(R.id.reset);
tvTimer = findViewById(R.id.tvTimer);
tvTimer.setText("00:00:00");
tvsatuan = findViewById(R.id.satuan);
tvsatuan.setText(""+ satuan);
tvTagihan = findViewById(R.id.tagihan);
imageView.setImageDrawable(getResources().getDrawable(R.drawable.lampoff));
toggleButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (toggleButton.isChecked()){
imageView.setImageDrawable(getResources().getDrawable(R.drawable.yellowlamp
));
status.setImageDrawable(getResources().getDrawable(R.drawable.heart_orange_
fill));
nyala("0");
running = true;
}else {
imageView.setImageDrawable(getResources().getDrawable(R.drawable.lampoff));
status.setImageDrawable(getResources().getDrawable(R.drawable.heart));
nyala("1");
running = false;
}
}
});
bluelamp = findViewById(R.id.bluelamp);
bluelamp.setOnClickListener(new View.OnClickListener() {
@Override
Intent intent = new Intent(MonitoringActivity.this,
BluelampActivity.class);
startActivity(intent);
}
});
redlamp = findViewById(R.id.redlamp);
redlamp.setOnClickListener(new View.OnClickListener() {
@Override
RedlampActivity.class);
}
});
greenlamp = findViewById(R.id.greenlamp);
greenlamp.setOnClickListener(new View.OnClickListener() {
@Override
GreenlampActivity.class);
}
});
if (savedInstanceState != null) {
seconds
= savedInstanceState
.getInt("seconds");
running
.getBoolean("running");
wasRunning
.getBoolean("wasRunning");
}
runTimer();
}
private void nyala(String id){

request = new Request.Builder().url(mStringUrl+id).build();
client.newCall(request).enqueue(new Callback() {
@Override
public void onFailure(Request request, IOException e) {
Log.d(TAG, "onFailure: ");
}
@Override
public void onResponse(Response response) throws IOException {
Log.i(TAG, "onResponse: succes ");
}
});
}
@Override
public void onSaveInstanceState(
Bundle savedInstanceState) {
super.onSaveInstanceState(savedInstanceState);
savedInstanceState
.putInt("seconds", seconds);
savedInstanceState
.putBoolean("running", running);
savedInstanceState
.putBoolean("wasRunning", wasRunning);
}
@Override
protected void onPause()
{
super.onPause();
wasRunning = running;
running = false;
}
@Override
protected void onResume()
{
super.onResume();
if (wasRunning) {
running = true;
}
}
public void onClickReset(View view)

{
running = false;
seconds = 0;
}
private void runTimer()

{
// Creates a new Handler
final Handler handler
= new Handler();
handler.post(new Runnable() {
@Override
public void run()

{
int hours = seconds / 3600;
int minutes = (seconds % 3600) / 60;
int secs = seconds % 60;
String time
= String
.format(Locale.getDefault(),
"%d:%02d:%02d", hours,
minutes, secs);
// Set the text view text.

tvTimer.setText(time);
satuan = seconds * 0.25;
tvsatuan.setText("Daya : "+satuan+" Watt");
tagihan = satuan * 5;
tvTagihan.setText("Tagihan : Rp. "+tagihan);
if (running) {
seconds++;
}
handler.postDelayed(this, 1000);
}
});
}
}
5. Tambahkan permission pada AndroidManifest.xml agar aplikasi android dapat

mengakses data melalui internet atau jaringan WiFi. Serta pada tag “application”
tambahkan usesCleartextTraffic dengan nilai “True” agar aplikasi dapat mengambil
data dari WebServer
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme"
android:usesCleartextTraffic="true">
Pada project ini saya mengambil juga data durasi lampu menyala, besar daya yang digunakan
dan estimasi tagihan dari penggunaan listrik. Sebelum menyambungkan dengan perhitungan
ini saya membuat activity lagi yang berisi control led saja untuk memastikan bahwa LED
sudah bisa dikontrol melalui aplikasi android ini. Untuk membuat test control LED saya
membuat activity seperti di bawah ini
Code pada file .xml
<RelativeLayout
tools:context=".GreenlampActivity">
<WebView
android:id="@+id/webview"
android:layout_height="match_parent"/>
</RelativeLayout>
Code pada file .java

WebView webView;
String URL;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_greenlamp);
URL = "http://192.168.43.61/";
webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().getUseWideViewPort();
webView.loadUrl(URL);
webView.setWebViewClient(new WebViewClient());
}
Hasil code pada tampilan Android ketika dijalankan
Untuk membuat tampilan aplikasi lebih bagus saya juga menambahkan Splashscreen agar
ketika aplikasi pertama kali dibuka oleh user terdapat welcome activity sehingga tampak
lebih user-friendly. Adapun cara untuk membuat splashscreen yakni
1. Buat activity baru untuk splashscreen dengan cara sorot file main > klik kanan > new
activity > empty activity > dan isi data splashscreen > finish
2. Untuk mengatur tampilan splashscreen tuliskan kode seperti di bawah ini
<androidx.constraintlayout.widget.ConstraintLayout
tools:context=".SplashScreen">
<ImageView
android:id="@+id/pict"
app:layout_constraintTop_creator="1"
app:layout_constraintRight_creator="1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_creator="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:src="@drawable/splash"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/title"
android:text="Home Energy Monitoring"
app:layout_constraintBottom_toBottomOf="@id/pict"
android:layout_marginBottom="150dp"
android:textSize="25sp"
android:textColor="@android:color/black"
android:textStyle="bold"
tools:ignore="MissingConstraints"
android:fontFamily="@font/roboto_italic"
app:layout_constraintRight_creator="1"
app:layout_constraintBottom_creator="1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_creator="1"
app:layout_constraintLeft_toLeftOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Dan untuk mengatur animasi dari gambar dan text pada splashscreen bisa diatur
dengan membuat folder dengan value anim yang berisi file xml untuk mengatur
transisi dari komponen spalshscreen. Adapun kode xml untuk mengatur transisi
animasi pada splashscreen sebagai berikut
Untuk mengatur text yang bergerak dari bawha ke atas sebagai berikut
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromYDelta="10%p"
android:toYDelta="0%"
android:duration="1000"/>
</set>
Sedangkan untuk mengatur gerak gambar dari atas ke bawah yakni

<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromYDelta="-10%p"
android:toYDelta="0%"
android:duration="1000"
/>
</set>
Jangan lupa untuk menambahkan library material design dan http pada dependencies
di file build gradle agar dapat membuat design pada aplikasi dan membuat akses
menggunakan http
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test.ext:junit:1.1.1'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
//new material design
implementation 'com.google.android.material:material:1.2.0-alpha02'
implementation 'com.squareup.okhttp:okhttp:2.0.0'
}
Gambar diatas merupakan kondisi ketika aplikasi Android digunakan untuk mengontrol
nyala lampu dan memilih lampu mana yang akan dikontrol.
Gambar tersebut ketika LED dikontrol menggunakan aplikasi Android, yakni ketika salah
satu lampu saja yang dinyalakan baik merah atau biru maupun ketika kedua LED dinyalakan.
Gambar di atas merupakan kondisi rangkaian ketika masih belum dikontrol dengan aplikasi
Android, kedua LED dalam kondisi off.
Project lengkapnya sudah saya letakkan pada github saya

https://github.com/LusianaDiyan/smart-lamp-control/tree/master
Deskripsi Project
Smart Lamp Control merupakan aplikasi yang berfungsi untuk memudahkan
pengguna dalam mengontrol kondisi lampu yang berada di rumah dengan di lengkapi fitur
saklar jarak jauh yang mana dapat menyalakan dan memadamkan lampu yang berada di
rumah dengan adanya indicator mengenai kondisi lampu, durasi waktu lampu menyala,
besarnya daya yang telah dikonsumsi oleh lampu serta estimasi tagihan listrik. Selain untuk
lampu, aplikasi ini dapat digunakan untuk mengontrol alat elektronik lainnya yang berada di
rumah. Akan tetapi, dalam project ini saya hanya mengambil case pada alat elektronik lampu
rumah. Project ini memanfaatkan control LED system menggunakan web server yang berasal
dari NodeMCU yang telah deprogram menggunakan Arduino IDE serta untuk control melalui
aplikasinya memanfaatkan pemrograman Android dengan Android Studio IDE untuk
menyambungkan aplikasi android dengan web server.

Project Akhir Semester &quot;SMART LAMP CONTROL&quot;

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Project Akhir Semester &quot;SMART LAMP CONTROL&quot;

Diunggah oleh

Hak Cipta:

Format Tersedia

Laporan Project Akhir Semester

Alat Pengembang Perangkat Lunak

LUSIANA DIYAN NINGRUM

Program Studi D4 Teknik Komputer

1. 10 Port GPIO dari D0 – D10

Android Studio IDE

Android Studio adalah Lingkungan Pengembangan Terpadu – Integrated Development

ALAT DAN BAHAN

3. Install file Arduino.exe yang didownload

7. Proses instalasi Arduino mulai berjalan, program di extract ke window

Memilih COM port

Installasi Library NodeMCU dan Driver CH340

3. Tunggu hingga proses installasi selesai

Pembuatan Project Arduino dan NodeMCU

3. Tuliskan kode di bawah ini pada editor Arduino IDE

// Ganti dengan password Jaringan WiFi yang user miliki

ESP8266WebServer server(80); //Inisialisasi server pada port 80

String webpage; //inisialisasi variabel untuk menampung tampilan

// Wait for connection

// Isi dari Webpage ------------------------------------------------

//membuat tampilan webpage

//untuk merespon perintah yang masuk --------------------------

TextView tvTimer, tvsatuan, tvTagihan;

private int seconds = 0;

private void nyala(String id){

public void onClickReset(View view)

private void runTimer()

public void run()

// Set the text view text.

5. Tambahkan permission pada AndroidManifest.xml agar aplikasi android dapat

Code pada file .java

Sedangkan untuk mengatur gerak gambar dari atas ke bawah yakni

Project lengkapnya sudah saya letakkan pada github saya

Anda mungkin juga menyukai

Project Akhir Semester "SMART LAMP CONTROL"

Project Akhir Semester "SMART LAMP CONTROL"