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 :
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
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.
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”
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
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
2. Extract file yang sudah didownload > klik 2x pada file .exe
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
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("");
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 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_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;
@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();
}
@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;
}
}
String time
= String
.format(Locale.getDefault(),
"%d:%02d:%02d", hours,
minutes, secs);
tagihan = satuan * 5;
tvTagihan.setText("Tagihan : Rp. "+tagihan);
if (running) {
seconds++;
}
handler.postDelayed(this, 1000);
}
});
}
}
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>
@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>
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.