Laporan Project Akhir

Alat Pengembang Perangkat Lunak

“SMART LAMP CONTROL”

NAMA LUSIANA DIYAN NINGRUM

NRP 2210181051

KELAS 2 TK B

TANGGAL PRAKTIKUM 5 Juni 2020

Program Studi D4 Teknik Komputer

Politeknik Elektronika Negeri Surabaya
2020
 FINAL PROJECT
“SMART LAMP CONTROL”
DASAR TEORI
NodeMCU

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

Android Studio

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.

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. Breadboard
8. 2 buah LED (Warna merah dan biru)
9. NodeMCU
10. 2 buah Resistor
11. Kabel male to female dan Kabel USB
LANGKAH PEMBUATAN
Pembuatan Project Arduino
1. Buat rangkaian pada breadboard seperti rangkaian du 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>
#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>&nbsp;<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>&nbsp;<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", []() {
server.send(200, "text/html", webpage);
digitalWrite(LED1,HIGH);
state1 = "On";
 delay(1000);
});

server.on("/LED2ON", []() {
server.send(200, "text/html", webpage);
digitalWrite(LED2,HIGH);
state2 = "On";
delay(1000);
});

server.on("/LED1OFF", []() {
server.send(200, "text/html", webpage);
digitalWrite(LED1,LOW);
state1 = "Off";
delay(1000);

});
server.on("/LED2OFF", []() {
server.send(200, "text/html", webpage);
digitalWrite(LED2,LOW);
state2 = "Off";
delay(1000);
});

server.begin();
Serial.println("Web server started!");
}

void loop() {
server.handleClient();
}

4. Upload code ke NodeMCU. 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

5. 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_width="match_parent"
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_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:orientation="vertical">
 <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LAMP"
android:textColor="@color/textColor"
android:textSize="20sp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/xsmall"
android:text="Table Lamp"
android:textSize="15sp" />
</LinearLayout>

<ImageView
android:id="@+id/status"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:background="@drawable/grey_circular_border"
android:padding="@dimen/small"
android:src="@drawable/heart" />
</RelativeLayout>

<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!--Body-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ImageView
android:id="@+id/image"
android:layout_width="230dp"
android:layout_height="230dp"
android:scaleType="centerCrop"
android:layout_gravity="center"
android:src="@drawable/lampoff" />

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/medium">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="@dimen/small">

<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/small">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Durasi "
android:textColor="@color/textColor"
android:textSize="20sp" />
<TextView
android:id="@+id/tvTimer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TIMER"
android:textColor="@color/textColor"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>

<TextView
android:id="@+id/satuan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="23dp"
android:layout_marginBottom="5dp"
android:layout_marginEnd="11dp"
android:text="0 Watt"
android:textColor="@color/textColor"
android:textSize="18sp" />

<TextView
android:id="@+id/tagihan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/satuan"
android:layout_alignParentEnd="true"
android:layout_marginTop="5dp"
android:text="Rp. 1000"
android:textColor="@color/textColor"
android:textSize="18sp" />
</RelativeLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/violet_circular_border"
android:orientation="vertical"
android:padding="@dimen/medium">

<RelativeLayout
android:layout_width="match_parent"
 android:layout_height="wrap_content"
android:padding="@dimen/small">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:text="Choose The Lamp"
android:textColor="@color/white"
android:textSize="16sp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:text="View all"
android:textColor="@color/white"
android:textSize="16sp" />
</RelativeLayout>

<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<LinearLayout
android:id="@+id/redlamp"
android:layout_width="160dp"
android:layout_height="wrap_content"
android:background="@drawable/white_circular_border"
android:orientation="vertical"
android:gravity="center"
android:padding="12dp">

<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/redlamp" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="@dimen/small"
android:paddingRight="@dimen/small">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Edison Red Home Lamp"
android:textColor="@color/textColor"
android:textSize="14sp" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
 <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="25Watt"
android:textColor="@color/textColor"
android:textSize="13sp" />

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/xsmall">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="750/H"
android:layout_marginStart="@dimen/xsmall"
android:textColor="@color/orange"
android:textSize="13sp" />

</RelativeLayout>

<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
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_width="160dp"
android:layout_height="wrap_content"
android:background="@drawable/white_circular_border"
android:orientation="vertical"
android:gravity="center"
android:layout_marginStart="20dp"
android:padding="12dp">

<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/bluelamp" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="@dimen/small"
android:paddingRight="@dimen/small">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Edison Blue Home Lamp"
 android:textColor="@color/textColor"
android:textSize="14sp" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="350Watt"
android:textColor="@color/textColor"
android:textSize="13sp" />

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/xsmall">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="750/H"
android:layout_marginStart="@dimen/xsmall"
android:textColor="@color/orange"
android:textSize="13sp" />
</RelativeLayout>

<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:padding="6.5dp"
android:src="@drawable/heart_orange_fill"
android:background="@drawable/light_orange_circle"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

<LinearLayout
android:id="@+id/greenlamp"
android:layout_width="160dp"
android:layout_height="wrap_content"
android:background="@drawable/white_circular_border"
android:orientation="vertical"
android:gravity="center"
android:layout_marginStart="20dp"
android:padding="12dp">

<ImageView
android:layout_width="100dp"
android:layout_height="120dp"
android:src="@drawable/greenlamp" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
 android:orientation="vertical"
android:paddingLeft="@dimen/small"
android:paddingRight="@dimen/small">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Edison Yellow Table Lamp"
android:textColor="@color/textColor"
android:textSize="14sp" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="350/W"
android:textColor="@color/textColor"
android:textSize="13sp" />

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/xsmall">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="750/H"
android:layout_marginStart="@dimen/xsmall"
android:textColor="@color/orange"
android:textSize="13sp" />

<LinearLayout
android:layout_width="30dp"
android:background="@color/orange"
android:layout_centerVertical="true"
android:layout_height="1dp"/>
</RelativeLayout>

<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:padding="6.5dp"
android:src="@drawable/heart_orange_fill"
android:background="@drawable/light_orange_circle"/>
</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
public void onClick(View v) {
Intent intent = new Intent(MonitoringActivity.this, BluelampActivity.class);
startActivity(intent);
}
});

redlamp = findViewById(R.id.redlamp);
redlamp.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MonitoringActivity.this, RedlampActivity.class);
startActivity(intent);
}
});

greenlamp = findViewById(R.id.greenlamp);
greenlamp.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MonitoringActivity.this, GreenlampActivity.class);
startActivity(intent);
}
});

if (savedInstanceState != null) {
seconds
= savedInstanceState
 .getInt("seconds");
running
= savedInstanceState
.getBoolean("running");
wasRunning
= savedInstanceState
.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
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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"
tools:context=".GreenlampActivity">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
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
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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"
tools:context=".SplashScreen">
<ImageView
android:id="@+id/pict"
android:layout_width="wrap_content"
android:layout_height="600dp"
app:layout_constraintTop_creator="1"
app:layout_constraintRight_creator="1"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Home Energy Monitoring"
app:layout_constraintBottom_toBottomOf="@id/pict"
android:layout_marginBottom="150dp"
android:gravity="center"
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