CV SPEKTRUM TEKNOLOGI

1
 CV SPEKTRUM TEKNOLOGI

MODUL 4
PENGENALAN USER INTERFACE
ANDROID STUDIO

1
 CV SPEKTRUM TEKNOLOGI
PENGENALAN USER INTERFACE (UI) ANDROID STUDIO

A. Tujuan Pembelajaran
1. Peserta didik dapat memahami dasar pengoperasian aplikasi Android Studio.
2. Peserta didik dapat memahami tata cara pembuatan User Interface (UI) dalam aplikasi
Android Studio.
3. Peserta didik dapat menggunakan Emulator Virtual dalam aplikasi Android Studio untuk
menjalankan aplikasi hasil compile.
4. Peserta didik dapat menggunakan Hardware Device (Smartphone) mealui fitur USB
Debugging untuk menjalankan aplikasi hasil compile.

B. Dasar Teori

1. ANDROID STUDIO
a. Pengertian
Android Inc. merupakan perusahaan perangkat lunak kecil yang didirikan di Palo Alto,
California pada Oktober 2003. Perusahaan ini didirikan oleh pendahulu beberapa
perusahaan IT dan komunikasi, yaitu Andy Rubin, Rich Miner, Nick Sears dan Chris White.
Di perusahaan Android, banyak pengembang sistem dan perangkat lunak akhirnya
menggunakan perangkat lunak yang mendukung Android untuk mengembangkan dan
merancang sistem Android, seperti Android Studio.

Gambar 1: Logo Android Studio

Sebelum lahirnya Android Studio, aplikasi pada Android dikembangkan menggunakan

Eclipse IDE, yaitu Java IDE. Android dapat menyediakan antarmuka bagi Anda untuk
membuat aplikasi dan mengelola manajemen file aplikasi Anda. Bahasa pemrograman
yang Anda gunakan adalah Java. Di Android Studio, Anda hanya perlu menggunakan
android studio untuk menulis, mengedit, menyimpan, dan menguji proyek dan file lain
dalam proyek.

Gambar 2: Antarmuka (UI) Android Studio

2
 CV SPEKTRUM TEKNOLOGI

Tidak hanya itu, keunggulan menggunakan Android Studio juga memberi Anda akses ke
Android Software Development Kit (SDK). SDK adalah sebuah ekstensi dari kode Java yang
memperbolehkannya untuk berjalan dengan mulus di device Android.

Gambar 3: Tampilan Setting Android SDK pada Android Studio

Untuk Java-nya dibutuhkan untuk menulis program, Android SDK sangat diperlukan untuk
menjalankan programnya di Android. Maka dari itu dengan menggabungkan keduanya, Anda
memerlukan Android Studio. Sehingga ketika Anda menemukan bug pada aplikasi Anda, Anda
bisa mengetahui bug tersebut dengan menggunakan Android Studio untuk memperbaikinya.
Berikut ini adalah beberapa kelebihan Android Studio:

• Environment yang mempermudah Anda untuk mengembangkan aplikasi Android

• Support dalam mengembangkan aplikasi Android TV dan Android Wear
• Template untuk menentukan design dan komponen Android
• Editor layout dengan interface drag-and-drop
• Refactoring dan perbaikan cepat khusus Android
• Dukungan build berbasis Gradle
• Integrasi ProGuard
• Emulator yang cepat dan berbagai fitur didalamnya
• Dapat terintegrasi dengan Google Cloud Messaging dan App Engine
• Dukungan program basic C++ dan NDK

3
 CV SPEKTRUM TEKNOLOGI

C. Alat dan Bahan

1. PC/Laptop yang sudah terinstal Android Studio.

D. Keselamatan dan Kesehatan Kerja

• Bersihkan meja praktikum dari benda-benda yang terbuat dari logam dan pastikan
kondisi meja kerja siap digunakan untuk kegiatan praktikum.
• Baca dan pahami petunjuk praktikum pada langkah kerja praktikum.
• Periksa kondisi alat dan bahan praktikum sebelum memulai kegiatan praktikum.
• Gunakan peralatan praktikum sesuai dengan fungsinya.
• Baca dan pahami petunjuk praktikum pada langkah kerja praktikum.
• Setelah kegiatan praktikum selesai, kembalikan alat ke tempat semula, dan bersihkan
meja praktikum yang telah digunakan.

E. Langkah Percobaan

1. Pertama, Anda harus menginstall Aplikasi Android Studio versi 4.2.2 atau diatasnya.
(Jika Anda sudah memiliki aplikasinya, silahkan lewati langkah ini).
Anda dapat menginstall melalui Website Android Studio.

a) Klik URL berikut: https://www.google.com/search?kgmid=/m/0vpp538&hl=en-

ID&q=Android+Studio&kgs=205aacc45f43b43e&shndl=0&source=sh/x/kp/1&entryp
oint=sh/x/kp

b) Setelah masuk ke Website, Anda dapat mengunduh langsung untuk Windows 64-bit,
atau mengunduh sesuai versi OS (Operating System) dari Komputer/Laptop yang
Anda miliki (Baik Windows, Mac, ataupun Linux) melalui tombol Download Options.

c) Kemudian Anda akan diarahkan kehalaman berikut, centang dan klik “Download
Android Studio for Windows”.

4
 CV SPEKTRUM TEKNOLOGI

d) Klik Download. Simpan file tersebut ditempat yang Anda inginkan. (tampilan
mungkin berbeda, sesuai browser dan downloader app yang Anda gunakan).

e) Setelah selesai. Simpan file tersebut ditempat yang Anda inginkan. (tampilan
mungkin berbeda, sesuai browser dan downloader app yang Anda gunakan).
Kemudian install seperti biasa.

2. Jika sudah selesai menginstall, selanjutnya buka aplikasi Android Studio dan akan
muncul pop-up seperti dibawah ini.
Pilih +Create New Project untuk memulai projek baru.

5
 CV SPEKTRUM TEKNOLOGI

3. Kemudian muncul pop-up dibawah dan pilih salah satu saja.

Dalam hal ini kita akan memilih “Empty Activity” untuk memulai projek dengan tampilan
kosong. Dan klik “Next” untuk melanjutkan.

4. Isikan data-data penting berikut untuk memulai projek baru Anda.

Beberapa hal penting yang harus diisi diantaranya adalah Nama, Bahasa, dan Minimum
SDK.
• Untuk Nama Projek bisa Anda isi sesuai keinginan Anda. Dalam contoh dibawah,
projek diberi nama “Smarthome”.

6
 CV SPEKTRUM TEKNOLOGI

• Kemudian untuk Language, pilih “Java”. Ini berarti dalam pemrograman, Anda akan
menggunakan bahasa Java.
• Terakhir, untuk Minimum SDK dapat menyesuaikan kebutuhan. Dalam hal diatas,
Minimum SDK ditentukan sebatas Android 4.4 (KitKat). Ini berarti, aplikasi yang Anda
buat nantinya hanya akan berjalan minimal di Android 4.4 (KitKat) atau versi yang
lebih baru.
• Klik Finish jika sudah selesai.

5. Masuk ke tampilan berikut, tunggu beberapa saat hingga proses loading selesai.

6. Anda telah masuk ke tampilan awal dari Android Studio.

7. Dalam Android Studio, terdapat 3 program penting yang harus diperhatikan untuk
membuat sebuah Aplikasi. Yaitu Activity_main.xml; MainActivity.java; dan build.gradle
(:app).

7
 CV SPEKTRUM TEKNOLOGI

8. Sekarang, luangkan waktu untuk meninjau file-file tersebut.

Pertama, pastikan jendela Project terbuka (pilih View > Tool Windows > Project) dan
tampilan Android dipilih dari menu drop-down di bagian atas jendela tersebut. Kemudian,
Anda bisa melihat file berikut:
• app > java > com.example.myfirstapp > MainActivity
Ini adalah aktivitas utama. Ini adalah titik entri aplikasi Anda. Saat Anda membuat dan
menjalankan aplikasi, sistem akan meluncurkan instance Activity ini dan memuat tata
letaknya.
• app > res > layout > activity_main.xml
File XML ini menentukan tata letak antarmuka pengguna (UI) aktivitas. File ini berisi
elemen TextView dengan teks "Hello, World!"
• app > manifests > AndroidManifest.xml
File manifes menjelaskan karakteristik dasar aplikasi dan mendefinisikan masing-masing
komponennya.
• Gradle Scripts > build.gradle
Ada dua file dengan nama berikut: satu untuk project, "Project: My_First_App", dan satu
lagi untuk modul aplikasi, "Module: My_First_App.app". Setiap modul memiliki file
build.gradle sendiri, tetapi project ini saat ini hanya memiliki satu modul. Gunakan file
build.gradle setiap modul untuk mengontrol cara plugin Gradle membuat aplikasi. Untuk
informasi selengkapnya tentang file ini, lihat Mengonfigurasi build.

9. Membuka Layout Editor

Untuk memulai, siapkan ruang kerja Anda seperti berikut:
• Di jendela Project, buka app > res > layout > activity_main.xml
• Untuk memberi ruang bagi Layout Editor, sembunyikan jendela Project. Untuk
melakukannya, pilih View > Tool Windows > Project, atau cukup klik Project di sisi kiri
layar Android Studio.
• Jika editor Anda menunjukkan source XML, klik tab Design pada kanan atas jendela.
• Klik (Select Design Surface) lalu pilih Blueprint.
• Klik (View Options) di toolbar Layout Editor dan pastikan Show All Constraints
dicentang.
• Pastikan Autoconnect nonaktif. Tooltip di toolbar akan menampilkan (Enable
Autoconnection to Parent) jika Autoconnect nonaktif.
• Klik (Default Margins) pada toolbar, lalu pilih 16. Jika diperlukan, Anda dapat
menyesuaikan margin untuk setiap tampilan nanti.
• Klik (Device for Preview) pada toolbar, lalu pilih 5.5, 1440 × 2560, 560 dpi (Pixel XL).
• Layout Editor kini terlihat seperti yang ditampilkan dalam gambar berikut.

8
 CV SPEKTRUM TEKNOLOGI

10. Panel Component Tree di bagian kiri bawah menampilkan tata letak tampilan.
Dalam hal ini, tampilan root adalah ConstraintLayout, yang hanya berisi satu objek
TextView. ConstraintLayout adalah tata letak yang menentukan posisi setiap tampilan
berdasarkan batasan terhadap tampilan yang setara dan tata letak induk.

11. Untuk memudahkan pengerjaan, ubah pengaturan layout dari “Design” menjadi “Split”
dan Design Surface ubah menjadi “Design”.

9
 CV SPEKTRUM TEKNOLOGI

12. Setelah Anda mengetahui dasar-dasar dari cara kerja Android Studio, maka selanjutnya
kita mulai untuk membuat project sederhana.
Sebelum itu, siapkan bahan-bahan yang akan digunakan dalam project dengan
mengunduhnya pada link berikut:
https://drive.google.com/drive/folders/1s6_TvtRVxoBYpZh40HBtGrArHkBHUzKK?usp=sh
aring

13. Jika semua sudah siap, pada halaman kerja activity_main.xml masukkan sintaks berikut:
<?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:gravity="center"
android:padding="16dp"
android:orientation="vertical"
android:background="@drawable/wallpaper"
tools:context=".MainActivity">

<ImageView
android:id="@+id/imageView"
android:layout_width="124dp"
android:layout_height="124dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="56dp"
android:src="@drawable/light_off" />

<ToggleButton
android:id="@+id/button_power"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:textOff="HIDUPKAN LAMPU"
android:textOn="MATIKAN LAMPU" />

<ToggleButton
android:id="@+id/button_auto"
android:layout_width="362dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:textOff="HIDUPKAN FITUR OTOMATIS"
android:textOn="MATIKAN FITUR OTOMATIS" />

android:layout_marginBottom="8dp"
</LinearLayout>

10
 CV SPEKTRUM TEKNOLOGI

14. Maka tampilan berubah menjadi seperti ini.

15. Jika Anda melihat pada line 10 "@drawable/wallpaper" dan 21 "@drawable/light_off"

masih berwarna merah, itu berarti file-file yang dibutuhkan masih belum tersedia. Untuk
itu, Anda harus menyalin file-file yang sebelumnya sudah diunduh pada Langkah No.12.

16. Sebelum itu, ubah “Project” menjadi “Android” seperti pada gambar dibawah. Setelah
berubah, hasil salinan dapat langsung Anda letakkan pada direktori app > res > drawable
dengan menekan CTRL+V pada keyboard.

11
 CV SPEKTRUM TEKNOLOGI

17. Muncul tampilan berikut, pastikan file tersalin pada …\app\src\main\res\drawable

kemudian tekan OK.

18. Muncul pop-up berikut, tekan OK.

19. Selamat, sekarang tampilan project Anda sudah memiliki Background dan Icon.

12
 CV SPEKTRUM TEKNOLOGI

20. Langkah berikutnya adalah melakukan percobaan menampilkan hasil compile program
yang sudah ada ke Emulator Android.
Buka tab Tools, kemudian pilih “AVD Manager”.

21. Akan muncul tampilan berikut. Anda dapat memilih device virtual yang diinginkan untuk
menjalankan emulator. Dalam hal ini, percobaan dicontohkan menngunakan emulator
dari Smartphone Google Pixel 2. Pilih perangkat “Pixel 2”.

13
 CV SPEKTRUM TEKNOLOGI

22. Selanjutnya pilih Release Name dari perangkat yang ingin dipasang. Dalam percobaan ini
dipilih “R” atau Android 11. Klik Download untuk memulai prosesnya dan ikuti langkah
berikutnya hingga selesai.

Tunggu hingga proses download dan instalasi selesai. Proses ini akan memakan waktu
cukup lama.

14
 CV SPEKTRUM TEKNOLOGI

23. Setelah proses instalasi selesai, maka device virtual dengan nama emulator Pixel 2 API 30
sudah siap digunakan.

24. Kembali pada layar utama Android Studio, pilih emulator yang sudah terpasang
sebelumya seperti gambar dibawah.

25. Langkah selanjutnya, tekan tombol Run atau tekan SHIFT+F10 pada keyboard seperti
gambar dibawah.

26. Emulator dengan tampilan Smartphone Google Pixel 2 akan muncul dan menampilkan
hasil compile dari aplikasi yang telah dibuat.

27. Tulis hasil percobaan pertama Anda pada kolom Hasil Percobaan.

15
 CV SPEKTRUM TEKNOLOGI

28. Setelah Anda menjalankan Emulator Virtual pada Android Studio, maka selanjutnya
adalah menjalankan program pada Hardware Device atau menginstall hasil compile ke
dalam Smartphone secara langsung.
Sebelum itu, Anda perlu mempersiapkan perangkat/Smartphone yang Anda miliki agar
dapat terhubung dengan Android Studio.

29. Langkah awal, pastikan pengaturan “Developer Mode” dan fitur “USB Debugging” telah
aktif dan siap digunakan. Dibawah ini merupakan contoh pengaktifan fitur Developer
Mode untuk Samsung.
(perlu diperhatikan bahwa setiap Vendor Smartphone mungkin memiliki pengaturan yang
berbeda. Cek kembali melalui website resmi sesuai device yang Anda miliki).

30. Selanjutnya, pilih nama Device/Smartphone yang Anda gunakan dan tekan tombol Run
atau tekan SHIFT+F10 pada keyboard seperti gambar dibawah.

31. Jika di Smartphone Anda muncul pop-up seperti dibawah, centang dan klik Allow.

32. Tunggu hingga prosesnya selesai, dan amati perubahan di layar Smartphone Anda.
33. Tulis hasil percobaan kedua Anda pada kolom Hasil Percobaan.
34. Buat kesimpulan dari apa yang telah Anda pelajari dalam modul pelatihan ini.

*Perlu diperhatikan bahwa percobaan ini hanya untuk menampilkan UI (User Interface) sederhana
dari aplikasi yang telah Anda buat. Agar aplikasi dapat berfungsi, maka diperlukan program lanjutan
yang akan dibahas pada Modul 5.

16
 CV SPEKTRUM TEKNOLOGI

F. Hasil Percobaan
a) Hasil Percobaan pada Emulator

b) Hasil Percobaan pada Hardware Device

G. Kesimpulan

………………………………………………………………………………..……………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………..……………………………………………………..………………………….…
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………..……………………………………….…
………………………………………………………………………………………………………………………………………………

17
 CV SPEKTRUM TEKNOLOGI

H. Tes Formatif

1. Keunggulan menggunakan Android Studio salah satunya adalah memberi Anda akses ke
Android Software Development Kit (SDK). Jelaskan secara singkat apa itu Android SDK beserta
fungsinya!
Jawab:

2. Jelaskan langkah-langkah dalam menginstall Emulator Virtual pada Android Studio!

Jawab:

3. Jelaskan langkah-langkah menjalankan Aplikasi menggunakan Emulator Virtual pada Android

Studio!
Jawab:

18
 CV SPEKTRUM TEKNOLOGI

4. Jelaskan langkah-langkah menjalankan Aplikasi menggunakan Hardware Device (Smartphone)

pada Android Studio!
Jawab:

5. Perhatikan sintaks berikut.

Manakah bagian yang harus diganti jika kita ingin mengganti latar belakang dari UI Aplikasi
yang dibuat? Jelaskan!
Jawab:

19
 CV SPEKTRUM TEKNOLOGI

I. Kunci Jawaban - Tes Formatif Modul 4

1. Keunggulan menggunakan Android Studio salah satunya adalah memberi Anda akses ke
Android Software Development Kit (SDK). Jelaskan secara singkat apa itu Android SDK
beserta fungsinya!
Jawab:
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.
Sederhananya, Android SDK terdiri dari beberapa software development tools dan library
yang berfungsi untuk mengembangkan aplikasi Android.

2. Jelaskan langkah-langkah dalam menginstall Emulator Virtual pada Android Studio!

Jawab:
a. Buka tab Tools, kemudian pilih “AVD Manager”.

b. Akan muncul tampilan berikut. Anda dapat memilih device virtual yang diinginkan untuk
menjalankan emulator. Dalam hal ini, percobaan dicontohkan menngunakan emulator dari
Smartphone Google Pixel 2. Pilih perangkat “Pixel 2” dan klik Next.

20
 CV SPEKTRUM TEKNOLOGI

c. Selanjutnya pilih Release Name dari perangkat yang ingin dipasang. Dalam percobaan ini
dipilih “R” atau Android 11. Klik Download untuk memulai prosesnya dan ikuti langkah
berikutnya hingga selesai.

Tunggu hingga proses download dan instalasi selesai. Proses ini akan memakan waktu
cukup lama.

d. Setelah proses instalasi selesai, maka device virtual dengan nama emulator Pixel 2 API 30
sudah siap digunakan.

e. Kembali pada layar utama Android Studio, lihat daftar emulator yang terpasang untuk
memastikan bahwa Emulator telah terinstall dengan baik.

21
 CV SPEKTRUM TEKNOLOGI

3. Jelaskan langkah-langkah menjalankan Aplikasi menggunakan Emulator Virtual pada

Android Studio!
Jawab:
a. Kembali pada layar utama Android Studio, pilih emulator yang sudah terpasang
sebelumya seperti gambar dibawah.

b. Langkah selanjutnya, tekan tombol Run atau tekan SHIFT+F10 pada keyboard seperti
gambar dibawah.

c. Emulator dengan tampilan Smartphone Google Pixel 2 akan muncul dan menampilkan
hasil compile dari aplikasi yang telah dibuat.

22
 CV SPEKTRUM TEKNOLOGI

4. Jelaskan langkah-langkah menjalankan Aplikasi menggunakan Hardware Device

(Smartphone) pada Android Studio!
Jawab:
a. Sebelum itu, Anda perlu mempersiapkan perangkat/Smartphone yang Anda miliki agar
dapat terhubung dengan Android Studio.

b. Langkah awal, pastikan pengaturan “Developer Mode” dan fitur “USB Debugging” telah
aktif dan siap digunakan. Dibawah ini merupakan contoh pengaktifan fitur Developer
Mode untuk Samsung.
(perlu diperhatikan bahwa setiap Vendor Smartphone mungkin memiliki pengaturan yang
berbeda. Cek kembali melalui website resmi sesuai device yang Anda miliki).

c. Selanjutnya, pilih nama Device/Smartphone yang Anda gunakan dan tekan tombol Run
atau tekan SHIFT+F10 pada keyboard seperti gambar dibawah.

d. Jika di Smartphone Anda muncul pop-up seperti dibawah, centang dan klik Allow.

e. Tunggu beberapa saat, dan Aplikasi hasil compile akan tampil dan terinstall secara
otomatis pada Smartphone Anda.

23
 CV SPEKTRUM TEKNOLOGI

5. Perhatikan sintaks berikut.

Manakah bagian yang harus diganti jika kita ingin mengganti latar belakang dari UI Aplikasi
yang dibuat? Jelaskan!
Jawab:
a. Langkah awal, salin file yang ingin digunakan sebagai latar belakang (wallpaper).

b. Sebelum itu, ubah “Project” menjadi “Android” seperti pada gambar dibawah. Setelah
berubah, hasil salinan dapat langsung Anda letakkan pada direktori app > res > drawable
dengan menekan CTRL+V pada keyboard.

c. Muncul tampilan berikut, pastikan file tersalin pada …\app\src\main\res\drawable

kemudian tekan OK.

24
 CV SPEKTRUM TEKNOLOGI

d. Muncul pop-up berikut, tekan OK.

e. Setelah sudah tersalin, pada sintaks android:background=”@drawable/wallpaper” ubah

bagian nama pada android:background=”@drawable/ubah nama disini”. Nama yang
tertulis harus sama dengan nama file yang disalin sebelumnya (tanpa ekstensi).

f. Setelah selesai, cek kembali apakah wallpaper yang baru sudah terpasang dengan baik.

25
CV SPEKTRUM TEKNOLOGI

1
 CV SPEKTRUM TEKNOLOGI

MODUL 5
ANDROID STUDIO
KONTROL DAN MONITORING AKSES
MENGGUNAKAN FIREBASE

1
 CV SPEKTRUM TEKNOLOGI
ANDROID STUDIO
KONTROL DAN MONITORING AKSES MENGGUNAKAN FIREBASE
A. Tujuan Pembelajaran
1. Peserta didik dapat memahami tata cara menggunakan Firebase Realtime Database.
2. Peserta didik dapat menghubungkan Android Studio ke Firebase Realtime Database.
3. Peserta didik dapat menggunakan fitur Firebase Realtime Database sebagai media
Monitoring Akses.
4. Peserta didik dapat menggunakan Aplikasi yang telah dibuat dan terhubung ke Firebase
Realtime Database sebagai media Kontrol Akses.

B. Dasar Teori

1. ANDROID STUDIO
a. Pengertian
Android Inc. merupakan perusahaan perangkat lunak kecil yang didirikan di Palo Alto,
California pada Oktober 2003. Perusahaan ini didirikan oleh pendahulu beberapa
perusahaan IT dan komunikasi, yaitu Andy Rubin, Rich Miner, Nick Sears dan Chris White.
Di perusahaan Android, banyak pengembang sistem dan perangkat lunak akhirnya
menggunakan perangkat lunak yang mendukung Android untuk mengembangkan dan
merancang sistem Android, seperti Android Studio.

Gambar 1: Logo Android Studio

Sebelum lahirnya Android Studio, aplikasi pada Android dikembangkan menggunakan

Eclipse IDE, yaitu Java IDE. Android dapat menyediakan antarmuka bagi Anda untuk
membuat aplikasi dan mengelola manajemen file aplikasi Anda. Bahasa pemrograman
yang Anda gunakan adalah Java. Di Android Studio, Anda hanya perlu menggunakan
android studio untuk menulis, mengedit, menyimpan, dan menguji proyek dan file lain
dalam proyek.

Gambar 2: Antarmuka (UI) Android Studio

2
 CV SPEKTRUM TEKNOLOGI

Tidak hanya itu, keunggulan menggunakan Android Studio juga memberi Anda akses ke
Android Software Development Kit (SDK). SDK adalah sebuah ekstensi dari kode Java yang
memperbolehkannya untuk berjalan dengan mulus di device Android.

Gambar 3: Tampilan Setting Android SDK pada Android Studio

Untuk Java-nya dibutuhkan untuk menulis program, Android SDK sangat diperlukan untuk
menjalankan programnya di Android. Maka dari itu dengan menggabungkan keduanya, Anda
memerlukan Android Studio. Sehingga ketika Anda menemukan bug pada aplikasi Anda, Anda
bisa mengetahui bug tersebut dengan menggunakan Android Studio untuk memperbaikinya.
Berikut ini adalah beberapa fitur Android Studio:

• Environment yang mempermudah Anda untuk mengembangkan aplikasi Android

• Support dalam mengembangkan aplikasi Android TV dan Android Wear
• Template untuk menentukan design dan komponen Android
• Editor layout dengan interface drag-and-drop
• Refactoring dan perbaikan cepat khusus Android
• Dukungan build berbasis Gradle
• Integrasi ProGuard
• Emulator yang cepat dan berbagai fitur didalamnya
• Dapat terintegrasi dengan Google Cloud Messaging dan App Engine
• Dukungan program basic C++ dan NDK

3
 CV SPEKTRUM TEKNOLOGI

2. FIREBASE
a. Pengertian
Firebase adalah suatu layanan dari Google untuk memberikan kemudahan bahkan
mempermudah para developer aplikasi dalam mengembangkan aplikasinya. Firebase alias
BaaS (Backend as a Service) merupakan solusi yang ditawarkan oleh Google untuk
mempercepat pekerjaan developer. Dengan menggunakan Firebase, apps developer bisa
fokus dalam mengembangkan aplikasi tanpa memberikan effort yang besar untuk urusan
backend.
Singkat cerita mengenai sejarah dari Firebase didirikan pertama kali pada tahun 2011
oleh Andrew Lee dan James Tamplin. Produk Firebase yang pertama kali adalah Realtime
Database. Realtime Database digunakan developer untuk menyimpan data dan
synchronize ke banyak user. Kemudian ia berkembang sebagai layanan pengembang
aplikasi. Pada bulan Oktober 2014, perusahaan tersebut diakuisisi oleh Google.

Gambar 4: Logo Google Firebase

Mengenai segi layanan, dulu Firebase memberikan service trial (percobaan), namun
saat ini kamu bisa memanfaatkan dan menggunakan layanan Firebase secara free (gratis).
Tentu saja dengan adanya batasan-batasan tertentu.

Layanan-layanan yang tersedia dari Firebase ada 2 pilihan, di antaranya:

SPARK: kita bisa menggunakan layanan secara gratis.
BLAZE: kita akan dikenakan biaya sesuai dengan pemakaian layanan.

Gambar 5: Login Page Firebase

4
 CV SPEKTRUM TEKNOLOGI

b. Fitur Firebase - Realtime Database

Firebase Realtime Database adalah database yang di-host melalui cloud. Data disimpan
dan dieksekusi dalam bentuk JSON dan disinkronkan secara realtime ke setiap user yang
terkoneksi. Hal ini berfungsi memudahkan kamu dalam mengelola suatu database dengan
skala yang cukup besar.

Gambar 6: Fitur Realtime Database

Realtime Database adalah database NoSQL, sehingga memiliki pengoptimalan dan

fungsionalitas yang berbeda dengan database relasional. API Realtime Database dirancang
agar hanya mengizinkan operasi yang dapat dijalankan dengan cepat. Hal ini
memungkinkan Anda untuk mem-build pengalaman realtime yang luar biasa dan dapat
melayani jutaan pengguna tanpa mengorbankan kemampuan respons. Oleh karena itu,
perlu dipikirkan bagaimana pengguna mengakses data, kemudian buat struktur data sesuai
dengan kebutuhan tersebut.
Kemampuan lain dari Firebase Realtime Database adalah tetap responsif bahkan
saat offline karena SDK Firebase Realtime Database menyimpan data langsung ke disk
device atau memori lokal. Setelah perangkat terhubung kembali dengan internet,
perangkat pengguna (user) akan menerima setiap perubahan yang terjadi. Firebase
Realtime Database memungkinkan Anda untuk mem-build aplikasi kolaboratif dan kaya
fitur dengan menyediakan akses yang aman ke database, langsung dari kode sisi klien. Data
disimpan di drive lokal. Bahkan saat offline sekalipun, peristiwa realtime terus berlangsung,
sehingga pengguna akhir akan merasakan pengalaman yang responsif. Ketika koneksi
perangkat pulih kembali, Realtime Database akan menyinkronkan perubahan data lokal
dengan pembaruan jarak jauh yang terjadi selama klien offline, sehingga setiap perbedaan
akan otomatis digabungkan.
Realtime Database menyediakan bahasa aturan berbasis ekspresi yang fleksibel, atau
disebut juga Aturan Keamanan Firebase Realtime Database, untuk menentukan metode
strukturisasi data dan kapan data dapat dibaca atau ditulis. Ketika diintegrasikan dengan
Firebase Authentication, developer dapat menentukan siapa yang memiliki akses ke data
tertentu dan bagaimana mereka dapat mengaksesnya.

5
 CV SPEKTRUM TEKNOLOGI

C. Alat dan Bahan

1. PC/Laptop yang sudah terinstall Android Studio.

D. Keselamatan dan Kesehatan Kerja

• Bersihkan meja praktikum dari benda-benda yang terbuat dari logam dan pastikan
kondisi meja kerja siap digunakan untuk kegiatan praktikum.
• Baca dan pahami petunjuk praktikum pada langkah kerja praktikum.
• Periksa kondisi alat dan bahan praktikum sebelum memulai kegiatan praktikum.
• Gunakan peralatan praktikum sesuai dengan fungsinya.
• Baca dan pahami petunjuk praktikum pada langkah kerja praktikum.
• Setelah kegiatan praktikum selesai, kembalikan alat ke tempat semula, dan bersihkan
meja praktikum yang telah digunakan.

E. Langkah Percobaan

1. Langkah awal buka kembali aplikasi Android Studio pada komputer/Laptop.

Jika sebelumnya Anda pernah mengerjakan suatu project, pada umumnya secara
otomatis Android Studio akan membuka kembali tampilan terakhir dari project yang
pernah Anda kerjakan seperti berikut.

Jika tidak muncul, Anda dapat membuka secara manual melalui File > Open lalu cari
lokasi atau tempat Anda menyimpan project tersebut.

2. Sebelum itu, pada lembar kerja sebelumnya telah dibahas cara membuat UI (User
Interface) pada Android Studio. Untuk keperluan monitoring, maka dari sintaks
sebelumnya (Lihat Modul 4; Project Smarthome) perlu disempurnakan agar nilai hasil
monitoring dapat terbaca dengan baik. Periksa kembali pada activity_main.xml dan
perbarui menggunakan sintaks berikut:
<?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:gravity="center"
android:padding="20dp"
android:orientation="vertical"
android:background="@drawable/wallpaper"
tools:context=".MainActivity">

6
 CV SPEKTRUM TEKNOLOGI

<ImageView
android:id="@+id/imageView"
android:layout_width="124dp"
android:layout_height="124dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="56dp"
android:src="@drawable/light_off" />

<ToggleButton
android:id="@+id/button_power"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:textOff="HIDUPKAN LAMPU"
android:textOn="MATIKAN LAMPU" />

<ToggleButton
android:id="@+id/button_auto"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:textOff="HIDUPKAN FITUR OTOMATIS"
android:textOn="MATIKAN FITUR OTOMATIS" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:letterSpacing="0.1"
android:text="Intensitas Cahaya Ruangan"
android:textColor="@color/white"
android:textSize="12sp" />

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="100dp"
android:layout_marginEnd="100dp"
app:cardBackgroundColor="#77AF29"
app:cardCornerRadius="9dp"
app:cardElevation="0dp"
app:contentPadding="0dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="56dp">

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="54dp"
android:layout_marginTop="1dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="130dp"
android:layout_marginTop="9dp"

7
 CV SPEKTRUM TEKNOLOGI
android:layout_marginBottom="0dp"
android:text="%"
android:textColor="@color/white"
android:textSize="25sp"
android:textStyle="bold" />

<TextView
android:id="@+id/ldr_sensor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="00.0"
android:textColor="@color/white"
android:textSize="25sp"
android:textStyle="bold" />

</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>

3. Langkah selanjutnya adalah menambahkan sintaks berikut pada MainActivity.java pada

project yang sebelumnya sudah Anda buat (Lihat Modul 4; Project Smarthome).
package com.example.smarthome;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.ToggleButton;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.ValueEventListener;

public class MainActivity extends AppCompatActivity implements

View.OnClickListener {

TextView LDRSensor;
ToggleButton mButtonPower;
ToggleButton mButtonAuto;
ImageView mImageStatus;
String ldr_sensor;
FirebaseDatabase mDatabase;
private DatabaseReference databaseReference;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getSupportActionBar().hide();
setContentView(R.layout.activity_main);

mDatabase = FirebaseDatabase.getInstance();

LDRSensor = findViewById(R.id.ldr_sensor);

8
 CV SPEKTRUM TEKNOLOGI
mButtonPower = findViewById(R.id.button_power);
mButtonAuto = findViewById(R.id.button_auto);
mImageStatus = findViewById(R.id.imageView);

mButtonPower.setOnClickListener(this);
mButtonAuto.setOnClickListener(this);

databaseReference =
FirebaseDatabase.getInstance().getReference();
databaseReference.addValueEventListener(new
ValueEventListener() {
@Override
public void onDataChange(@androidx.annotation.NonNull
DataSnapshot dataSnapshot) {
ldr_sensor
=dataSnapshot.child("ldr").getValue().toString();
LDRSensor.setText(ldr_sensor);
}

@Override
public void onCancelled(@androidx.annotation.NonNull
DatabaseError databaseError) {

}
});
}

@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.button_power:
toggleLed();
break;
}
switch (view.getId()) {
case R.id.button_auto:
toggleAuto();
break;
}
}

void toggleLed() {
if (mButtonPower.isChecked()) {
turnOnLed();
} else {
turnOffLed();
}
}

void toggleAuto() {
if (mButtonAuto.isChecked()) {
mButtonPower.setVisibility(View.VISIBLE);
turnOnAuto();
} else {
turnOffAuto();
}
}

void turnOnLed() {
mButtonPower.setEnabled(false);

9
 CV SPEKTRUM TEKNOLOGI

mDatabase.getReference("manual").setValue(1).addOnCompleteListener
(new OnCompleteListener<Void>() {
@Override
public void onComplete(@NonNull Task<Void> task) {
if (task.isSuccessful()) {
Toast.makeText(MainActivity.this, "LAMPU
MENYALA", Toast.LENGTH_SHORT).show();
mButtonPower.setChecked(true);

mImageStatus.setImageResource(R.drawable.light_on);
}
mButtonPower.setEnabled(true);
}
});
}

void turnOffLed() {
mButtonPower.setEnabled(false);

mDatabase.getReference("manual").setValue(0).addOnCompleteListener
(new OnCompleteListener<Void>() {
@Override
public void onComplete(@NonNull Task<Void> task) {
if (task.isSuccessful()) {
Toast.makeText(MainActivity.this, "LAMPU
MATI", Toast.LENGTH_SHORT).show();
mButtonPower.setChecked(false);

mImageStatus.setImageResource(R.drawable.light_off);
}
mButtonPower.setEnabled(true);
}
});
}

void turnOnAuto() {
mButtonAuto.setEnabled(false);

mDatabase.getReference("otomatis").setValue(1).addOnCompleteListen
er(new OnCompleteListener<Void>() {
@Override
public void onComplete(@NonNull Task<Void> task) {
if (task.isSuccessful()) {
Toast.makeText(MainActivity.this, "FITUR
OTOMATIS MENYALA", Toast.LENGTH_SHORT).show();
mButtonAuto.setChecked(true);

mImageStatus.setImageResource(R.drawable.light_off);
}
mButtonAuto.setEnabled(true);
}
});
}

void turnOffAuto() {
mButtonAuto.setEnabled(false);

mDatabase.getReference("otomatis").setValue(0).addOnCompleteListen
er(new OnCompleteListener<Void>() {
@Override

10
 CV SPEKTRUM TEKNOLOGI
public void onComplete(@NonNull Task<Void> task) {
if (task.isSuccessful()) {
Toast.makeText(MainActivity.this, "FITUR
OTOMATIS MATI", Toast.LENGTH_SHORT).show();
mButtonAuto.setChecked(false);

mImageStatus.setImageResource(R.drawable.light_off);
}
mButtonAuto.setEnabled(true);
}
});
}
}

• Penjelasan singkat beberapa fungsi penting dari sintaks diatas sebagai berikut.
a) Pada baris berikut, ldr_sensor=dataSnapshot.child("ldr").get
Value().toString(); merupakan fungsi yang digunakan untuk menerima
data yang dikirimkan sensor melalui fitur Firebase Realtime Database.

b) Selanjutnya baris berikut merupakan fungsi yang digunakan untuk tombol yang
digunakan. Jika button_power: ditekan (checked), maka toggleLed()akan
mengaktifkan fungsi turnOnLed(); dan apabila ditekan kembali maka fungsi
turnOffLed(); akan aktif. Begitupula sama untuk fungsi Auto.

11
 CV SPEKTRUM TEKNOLOGI

c) Jika fungsi turnOnLed()yang aktif, maka perintah tersebut akan mengeksekusi

bagian sintaks void turnOnLed() dan selanjutnya akan mengirim nilai “1” ke
Realtime Database sebagai tanda untuk memerintahkan lampu agar dapat
menyala (aktif). Untuk melengkapi fungsi ini, ditambahkan fungsi pop-up
notification pada bagian if(task.isSuccessful()) fungsi agar user dapat
mengetahui status kondisinya apakah sudah sukses terkirim ke Firebase atau
belum. Begitupula sama untuk fungsi turnOffLed().

d) Jika fungsi turnOnAuto()yang aktif, maka perintah tersebut akan mengeksekusi

bagian sintaks void turnOnAuto() dan selanjutnya akan mengirim nilai “1” ke
Realtime Database sebagai tanda untuk memerintahkan lampu agar dapat
menyala (aktif) otomatis. Untuk melengkapi fungsi ini, ditambahkan fungsi pop-
up notification pada bagian if(task.isSuccessful()) fungsi agar user
dapat mengetahui status kondisinya apakah sudah sukses terkirim ke Firebase
atau belum. Begitupula sama untuk fungsi turnOffAuto().

12
 CV SPEKTRUM TEKNOLOGI

4. Setelah mengetahui beberapa fungsi penting diatas, langkah selanjutnya adalah

menghubungkan ke Firebase, klik tab “Tools” lalu pilih “Firebase”.

5. Akan muncul halaman Firebase pada sebelah kanan, Anda pilih Realtime Database, dan
klik “Get Started with Realtime Database”.

13
 CV SPEKTRUM TEKNOLOGI

6. Pada halaman ini, langkah pertama sebelum menghubungkan aplikasi ke Firebase, klik
“Add the Realtime Database to your app” terlebih dahulu.

7. Jika Muncul pop-up seperti dibawah, klik Accept Changes.

8. Selanjutnya hubungkan aplikasi yang Anda buat dengan Firebase dengan menekan tombol
“Connect to Firebase” seperti pada langkan No.6 dan secara otomatis Anda diarahkan
pada Firebase. Untuk memulai, tambahkan project baru dengan menekan “Add Project”
seperti pada gambar dibawah.

14
 CV SPEKTRUM TEKNOLOGI

9. Nama project akan terisi secara otomatis sesuai nama project pada Android Studio yang
telah Anda buat sebelumnya. Pada tahap ini Anda cukup menekan tombol “Continue”
untuk melanjutkan proses.

10. Pada langkah ini, pilih “Default Account for Firebase” dan klik “Create project”.

11. Tunggu hingga prosesnya selesai, dan terakhir klik “Continue”.

12. Jika muncul tampilan seperti berikut, klik “Connect” dan Aplikasi Android sudah
terhubung ke Firebase.

15
 CV SPEKTRUM TEKNOLOGI

13. Selanjutnya kembali ke halaman awal Firebase, pilih project yang sebelumnya sudah
dibuat.

14. Anda akan diarahkan pada tampilan berikut. Pada Build, pilih “Realtime Database” dan
klik “Create Database” untuk melanjutkan.

15. Pada Database options, pilih United States (us-central1) dan klik Next.

16. Untuk Security rules, pilih Start in Locked Mode dan klik Enable.

16
 CV SPEKTRUM TEKNOLOGI

17. Anda telah masuk ke halaman utama dari Realtime Database.

*Jika tidak tampil secara otomatis, Anda dapat menampilkan kembali dengan memilih
“Realtime Database” pada halamn awal.

18. Langkah selanjutnya adalah menambahkan beberapa fungsi yang diperlukan sesuai
sintaks yang telah dibuat pada Android Studio. Klik tombol “+” seperti gambar berikut.

Kemudian isi “Name” dengan “ldr” agar Firebase dapat menerima nilai yang dikirim oleh
sensor nantinya. Untuk “Value” cukup diisi dengan nilai “0” sebagai kondisi awal.
Setelah selesai, klik Add.

Ulangi langkah diatas untuk memasukkan fungsi dengan nama “manual” dan “otomatis”
sehingga tampilannya menjadi lengkap seperti berikut.

17
 CV SPEKTRUM TEKNOLOGI

19. Agar fitur Realtime Database dapat digunakan, jangan lupa untuk mengubah Rules dan
ganti semua kondisi menjadi “true”. Setelah selesai, klik “Publish” agar rules dapat
tersimpan.

20. Jika sudah, masuk ke menu settings dan pilih “Project Settings”.

21. Anda akan masuk ke bagian General, kemudian scroll ke bawah hingga terlihat bagian SDK
Setup and Configuration. Pada tahap ini, silahkan download terlebih dahulu file google-
services.json seperti pada gambar berikut.

22. Setelah selesai ter-download, selanjutnya salin file google-services.json tersebut ke

Project > app dan pastikan file tersebut sudah tersalin dengan baik.

18
 CV SPEKTRUM TEKNOLOGI

23. Anda dapat meletakkan file tersebut dengan menekan tombol CTRL+V pada keyboard,
atau klik kanan pada “app” dan pilih Paste.

24. Muncul pop-up berikut, tekan OK dan pilih Overwrite.

25. Pastikan kembali bahwa Aplikasi Anda telah terhubung dengan Firebase (Cek Kembali
Langka No.6).

19
 CV SPEKTRUM TEKNOLOGI

26. Periksa kembali sintaks MainActivity.java.

Jika Anda melihat masih terdapat bagian-bagian sintaks yang error (ditandai dengan
tulisan yang berwarna merah), maka tambahkan sintaks berikut pada build.gradle.
Sebelum itu, ubah “Project” menjadi “Android” seperti pada gambar dibawah. Setelah
berubah, pada Gradle Scripts klik build.gradle (Module: Smarthome.app) seperti gambar
dibawah.

27. Lembar kerja dari build.gradle(:app) akan terbuka otomatis.

28. Kemudian tambahkan sintaks berikut dalam build.gradle(:app)

plugins {
id 'com.android.application'
id 'com.google.gms.google-services'
}

android {
compileSdkVersion 30

defaultConfig {
applicationId "com.example.smarthome"
minSdkVersion 19
targetSdkVersion 30
versionCode 1
versionName "1.0"
useLibrary 'org.apache.http.legacy'
testInstrumentationRunner
"androidx.test.runner.AndroidJUnitRunner"
multiDexEnabled true
}

20
 CV SPEKTRUM TEKNOLOGI

buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-
android-optimize.txt'), 'proguard-rules.pro'
}
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}

dependencies {

implementation 'androidx.appcompat:appcompat:1.3.0'
implementation 'androidx.appcompat:appcompat:1.0.0'
implementation 'com.google.android.material:material:1.4.0'
implementation
'androidx.constraintlayout:constraintlayout:2.0.4'
implementation platform('com.google.firebase:firebase-
bom:28.2.1')
implementation 'com.google.firebase:firebase-analytics'
implementation 'com.google.firebase:firebase-database:20.0.0'
implementation 'org.jetbrains:annotations:15.0'
testImplementation 'junit:junit:4.+'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
implementation 'com.android.support:support-
annotations:27.0.0'
implementation "androidx.cardview:cardview:1.0.0"
implementation "androidx.multidex:multidex:2.0.1"
def multidex_version = "2.0.1"
implementation "androidx.multidex:multidex:$multidex_version"
}

29. Setelah semuanya dirasa lengkap, klik “Sync Now” pada tulisan yang muncul dibagian atas
Lembar kerja dari build.gradle(:app)

21
 CV SPEKTRUM TEKNOLOGI

30. Tunggu beberapa saat hingga prosesnya selesai.

31. Setelah semuanya telah tersinkronisasi, lakukan uji coba menjalankan aplikasi dengan
menekan tombol Run seperti gambar dibawah.
Anda dapat memilih untuk menjalankan Aplikasi melalui Emulator ataupun pada
Hardware Device.
(Lihat Kembali Modul 4, Langkah No.25).

32. Dalam uji coba menggunakan Emulator akan menampilkan gambar berikut.
Setelah aplikasi sudah terbuka, lakukan serangkaian uji coba dengan menekan tombol-
tombol yang ada, dan lihat kembali pada Realtime Database apakah ada perubahan nilai
atau tidak. Lakukan uji coba kembali pada Hardware Device.

33. Jika Firebase tidak merespon, periksa kembali langkah-langkah percobaan Anda dan
pastikan semuanya sudah sesuai dengan modul ini.
34. Tulis hasil percobaan Anda pada kolom Hasil Percobaan.
35. Buat kesimpulan dari apa yang telah Anda pelajari dalam modul pelatihan ini.

22
 CV SPEKTRUM TEKNOLOGI

F. Hasil Percobaan
a) Hasil Percobaan pada Emulator

b) Hasil Percobaan pada Hardware Device

G. Kesimpulan

………………………………………………………………………………..……………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………..……………………………………………………..………………………….…
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………..……………………………………….…
………………………………………………………………………………………………………………………………………………

23
 CV SPEKTRUM TEKNOLOGI

H. Tes Formatif

1. Jelaskan menurut pemahaman Anda mengenai fungsi Build.Gradle pada Android Studio!
Jawab:

2. Jelaskan langkah-langkah dalam menghubungkan Aplikasi ke Firebase Realtime Database.

Jawab:

24
 CV SPEKTRUM TEKNOLOGI

3. Lengkapi bagian yang kurang pada sintaks berikut!

void toggleLed
if (ButtonPower.Checked()
{
turnOnLed;
}
else
{
turnOffLed;
}
Jawab:

4. Jelaskan fungsi sintaks ldr_sensor=dataSnapshot.child("ldr").get Value().

toString(); pada baris berikut:

Jawab:

25
 CV SPEKTRUM TEKNOLOGI

5. Jelaskan fungsi turnOnLed()pada bagian sintaks void turnOnLed. Begitupula jelaskan

untuk fungsi turnOffLed()pada bagian sintaks void turnOffLed. Berikut.

Jawab:

26
 CV SPEKTRUM TEKNOLOGI

I. Kunci Jawaban - Tes Formatif Modul 5

1. Jelaskan menurut pemahaman Anda mengenai fungsi Build.Gradle pada Android Studio!
Jawab:
Gradle adalah sebuah program yang berfungsi untuk melakukan build secara otomatis. Karena
itu, Gradle sering disebut sebagai build-tool. Build di sini bisa kita artikan sebagai aktivitas
melakukan compile dan packaging.
Gradle akan membantu kita dalam mengembangkan aplikasi android, bahkan tidak hanya
android saja. Gradle juga dapat digunakan untuk mengembangkan aplikasi lain, seperti Web,
Desktop, Bot, dll.

2. Jelaskan langkah-langkah dalam menghubungkan Aplikasi ke Firebase Realtime Database.

Jawab:
a. Langkah pertama, klik tab “Tools” lalu pilih “Firebase”.

b. Akan muncul halaman Firebase pada sebelah kanan, Anda pilih Realtime Database, dan
klik “Get Started with Realtime Database”.

27
 CV SPEKTRUM TEKNOLOGI

c. Pada halaman ini, langkah pertama sebelum menghubungkan aplikasi ke Firebase, klik
“Add the Realtime Database to your app” terlebih dahulu.

d. Jika Muncul pop-up seperti dibawah, klik Accept Changes.

e. Selanjutnya hubungkan aplikasi yang Anda buat dengan Firebase dengan menekan tombol
“Connect to Firebase” seperti pada langkan No.6 dan secara otomatis Anda diarahkan
pada Firebase. Untuk memulai, tambahkan project baru dengan menekan “Add Project”
seperti pada gambar dibawah.

28
 CV SPEKTRUM TEKNOLOGI

f. Nama project akan terisi secara otomatis sesuai nama project pada Android Studio yang
telah Anda buat sebelumnya. Pada tahap ini Anda cukup menekan tombol “Continue”
untuk melanjutkan proses.

g. Pada langkah ini, pilih “Default Account for Firebase” dan klik “Create project”.

h. Tunggu hingga prosesnya selesai, dan terakhir klik “Continue”.

i. Jika muncul tampilan seperti berikut, klik “Connect” dan Aplikasi Android sudah
terhubung ke Firebase.

29
 CV SPEKTRUM TEKNOLOGI

3. Lengkapi bagian yang kurang pada sintaks berikut!

void toggleLed
if (ButtonPower.Checked()
{
turnOnLed;
}
else
{
turnOffLed;
}
Jawab:
void toggleLed()
{
if (mButtonPower.isChecked())
{
turnOnLed();
}
else
{
turnOffLed();
}
}

4. Jelaskan fungsi sintaks ldr_sensor=dataSnapshot.child("ldr").get Value().

toString(); pada baris berikut:

Jawab:
Pada baris ldr_sensor=dataSnapshot.child("ldr").get Value().toString();
merupakan fungsi yang digunakan untuk menerima data yang dikirimkan sensor melalui fitur
Firebase Realtime Database. String dalam pemrograman komputer merupakan sebuah deret
simbol. Tipe data string adalah tipe data yang digunakan untuk menyimpan barisan karakter.
Sehingga value (nilai) yang diterima dari Sensor akan selalu diubah ke dalam bentuk String.

30
 CV SPEKTRUM TEKNOLOGI

5. Jelaskan fungsi turnOnLed()pada bagian sintaks void turnOnLed. Begitupula jelaskan

untuk fungsi turnOffLed()pada bagian sintaks void turnOffLed. Berikut.

Jawab:
Jika fungsi turnOnLed()yang aktif, maka perintah tersebut akan mengeksekusi bagian
sintaks void turnOnLed() dan selanjutnya akan mengirim nilai “1” ke Realtime Database
sebagai tanda untuk memerintahkan lampu agar dapat menyala (aktif). Untuk melengkapi
fungsi ini, ditambahkan fungsi pop-up notification pada bagian
if(task.isSuccessful()) fungsi agar user dapat mengetahui status kondisinya apakah
sudah sukses terkirim ke Firebase atau belum.
Begitupula sama untuk fungsi turnOffLed(). Jika fungsi turnOffLed()yang aktif, maka
perintah tersebut akan mengeksekusi bagian sintaks void turnOffLed() dan selanjutnya
akan mengirim nilai “0” ke Realtime Database sebagai tanda untuk memerintahkan lampu
agar dapat mati (nonaktif).

31
CV SPEKTRUM TEKNOLOGI

1
 CV SPEKTRUM TEKNOLOGI

MODUL 6
ANDROID STUDIO
KONTROL DAN MONITORING AKSES
MENGGUNAKAN FIREBASE
(TINGKAT LANJUT)

1
 CV SPEKTRUM TEKNOLOGI
ANDROID STUDIO
KONTROL DAN MONITORING AKSES ESP8266, SENSOR LDR, DAN RELAY
MENGGUNAKAN FIREBASE
A. Tujuan Pembelajaran
1. Peserta didik dapat menghubungkan Android Studio ke Firebase Realtime Database.
2. Peserta didik dapat menggunakan fitur Firebase Realtime Database sebagai media
Monitoring Akses.
3. Peserta didik dapat menggunakan Aplikasi yang telah dibuat dan terhubung ke Firebase
Realtime Database sebagai media Kontrol Akses.
4. Peserta didik dapat menghubungkan, memonitoring, dan mengendalikan rangkaian
elektronik (perangkat keras) ke Firebase melalui Aplikasi yang telah dibuat.

B. Dasar Teori

1. ANDROID STUDIO
a. Pengertian
Android Inc. merupakan perusahaan perangkat lunak kecil yang didirikan di Palo Alto,
California pada Oktober 2003. Perusahaan ini didirikan oleh pendahulu beberapa
perusahaan IT dan komunikasi, yaitu Andy Rubin, Rich Miner, Nick Sears dan Chris White.
Di perusahaan Android, banyak pengembang sistem dan perangkat lunak akhirnya
menggunakan perangkat lunak yang mendukung Android untuk mengembangkan dan
merancang sistem Android, seperti Android Studio.

Gambar 1: Logo Android Studio

Sebelum lahirnya Android Studio, aplikasi pada Android dikembangkan menggunakan

Eclipse IDE, yaitu Java IDE. Android dapat menyediakan antarmuka bagi Anda untuk
membuat aplikasi dan mengelola manajemen file aplikasi Anda. Bahasa pemrograman
yang Anda gunakan adalah Java. Di Android Studio, Anda hanya perlu menggunakan
android studio untuk menulis, mengedit, menyimpan, dan menguji proyek dan file lain
dalam proyek.

Gambar 2: Antarmuka (UI) Android Studio

2
 CV SPEKTRUM TEKNOLOGI

Tidak hanya itu, keunggulan menggunakan Android Studio juga memberi Anda akses ke
Android Software Development Kit (SDK). SDK adalah sebuah ekstensi dari kode Java yang
memperbolehkannya untuk berjalan dengan mulus di device Android.

Gambar 3: Tampilan Setting Android SDK pada Android Studio

Untuk Java-nya dibutuhkan untuk menulis program, Android SDK sangat diperlukan untuk
menjalankan programnya di Android. Maka dari itu dengan menggabungkan keduanya, Anda
memerlukan Android Studio. Sehingga ketika Anda menemukan bug pada aplikasi Anda, Anda
bisa mengetahui bug tersebut dengan menggunakan Android Studio untuk memperbaikinya.
Berikut ini adalah beberapa fitur Android Studio:

• Environment yang mempermudah Anda untuk mengembangkan aplikasi Android

• Support dalam mengembangkan aplikasi Android TV dan Android Wear
• Template untuk menentukan design dan komponen Android
• Editor layout dengan interface drag-and-drop
• Refactoring dan perbaikan cepat khusus Android
• Dukungan build berbasis Gradle
• Integrasi ProGuard
• Emulator yang cepat dan berbagai fitur didalamnya
• Dapat terintegrasi dengan Google Cloud Messaging dan App Engine
• Dukungan program basic C++ dan NDK

3
 CV SPEKTRUM TEKNOLOGI

2. FIREBASE
a. Pengertian
Firebase adalah suatu layanan dari Google untuk memberikan kemudahan bahkan
mempermudah para developer aplikasi dalam mengembangkan aplikasinya. Firebase alias
BaaS (Backend as a Service) merupakan solusi yang ditawarkan oleh Google untuk
mempercepat pekerjaan developer. Dengan menggunakan Firebase, apps developer bisa
fokus dalam mengembangkan aplikasi tanpa memberikan effort yang besar untuk urusan
backend.
Singkat cerita mengenai sejarah dari Firebase didirikan pertama kali pada tahun 2011
oleh Andrew Lee dan James Tamplin. Produk Firebase yang pertama kali adalah Realtime
Database. Realtime Database digunakan developer untuk menyimpan data dan
synchronize ke banyak user. Kemudian ia berkembang sebagai layanan pengembang
aplikasi. Pada bulan Oktober 2014, perusahaan tersebut diakuisisi oleh Google.

Gambar 4: Logo Google Firebase

Mengenai segi layanan, dulu Firebase memberikan service trial (percobaan), namun
saat ini kamu bisa memanfaatkan dan menggunakan layanan Firebase secara free (gratis).
Tentu saja dengan adanya batasan-batasan tertentu.

Layanan-layanan yang tersedia dari Firebase ada 2 pilihan, di antaranya:

SPARK: kita bisa menggunakan layanan secara gratis.
BLAZE: kita akan dikenakan biaya sesuai dengan pemakaian layanan.

Gambar 5: Login Page Firebase

4
 CV SPEKTRUM TEKNOLOGI

b. Fitur Firebase - Realtime Database

Firebase Realtime Database adalah database yang di-host melalui cloud. Data
disimpan dan dieksekusi dalam bentuk JSON dan disinkronkan secara realtime ke
setiap user yang terkoneksi. Hal ini berfungsi memudahkan kamu dalam mengelola
suatu database dengan skala yang cukup besar.

Gambar 6: Fitur Realtime Database

Realtime Database adalah database NoSQL, sehingga memiliki pengoptimalan dan

fungsionalitas yang berbeda dengan database relasional. API Realtime Database dirancang
agar hanya mengizinkan operasi yang dapat dijalankan dengan cepat. Hal ini
memungkinkan Anda untuk mem-build pengalaman realtime yang luar biasa dan dapat
melayani jutaan pengguna tanpa mengorbankan kemampuan respons. Oleh karena itu,
perlu dipikirkan bagaimana pengguna mengakses data, kemudian buat struktur data sesuai
dengan kebutuhan tersebut.
Kemampuan lain dari Firebase Realtime Database adalah tetap responsif bahkan
saat offline karena SDK Firebase Realtime Database menyimpan data langsung ke disk
device atau memori lokal. Setelah perangkat terhubung kembali dengan internet,
perangkat pengguna (user) akan menerima setiap perubahan yang terjadi. Firebase
Realtime Database memungkinkan Anda untuk mem-build aplikasi kolaboratif dan kaya
fitur dengan menyediakan akses yang aman ke database, langsung dari kode sisi klien. Data
disimpan di drive lokal. Bahkan saat offline sekalipun, peristiwa realtime terus berlangsung,
sehingga pengguna akhir akan merasakan pengalaman yang responsif. Ketika koneksi
perangkat pulih kembali, Realtime Database akan menyinkronkan perubahan data lokal
dengan pembaruan jarak jauh yang terjadi selama klien offline, sehingga setiap perbedaan
akan otomatis digabungkan.
Realtime Database menyediakan bahasa aturan berbasis ekspresi yang fleksibel, atau
disebut juga Aturan Keamanan Firebase Realtime Database, untuk menentukan metode
strukturisasi data dan kapan data dapat dibaca atau ditulis. Ketika diintegrasikan dengan
Firebase Authentication, developer dapat menentukan siapa yang memiliki akses ke data
tertentu dan bagaimana mereka dapat mengaksesnya.

5
 CV SPEKTRUM TEKNOLOGI

3. ESP8266
a. Pengertian
ESP8266 adalah modul WiFi yang cukup populer di kalangan pengembang perangkat
keras baru-baru ini. Selain harganya yang sangat terjangkau, modul WiFi multi fungsi ini
sudah menjadi SoC (System on Chip). Modul ini memiliki keluarga (family) dimana terdapat
macam-macam tipe ESP8266 yang memiliki kelebihan dan kekurangannya masing-masing
diantaranya adalah ESP8266 Module Series (ESP-01 sampai ESP-14), WeMos, NodeMCU,
dan ESPduino.

b. Index Board ESP8266

Berikut ditampilkan index board dari ESP8266 (ESP8266 chip pin-out). Dalam pembahasan
kali ini, ESP8266 yang digunakan berjenis WeMos D1 Mini, namun jika tidak ada Anda dapat
menggunakan jenis NodeMCU, atau jenis lainnya.

• NodeMCU ESP8266 12-E Chip PIN OUT

Gambar 7: NodeMCU ESP8266 12-E Chip PIN OUT

Image by: Fritzing

• WeMos D1 Mini ESP8266 Chip PIN OUT

Gambar 8: WeMos D1 Mini ESP8266 Chip PIN OUT

Image by: Fritzing

6
 CV SPEKTRUM TEKNOLOGI

c. Index GPIO ESP8266

Berikut ditampilkan Index GPIO ESP8266. Index GPIO ini dapat digunakan sebagai
referensi untuk identifikasi pin pada Modul WeMos D1 Mini, berlaku juga untuk jenis
NodeMCU, atau jenis ESP8266 lainnya.

Gambar 9: Index GPIO ESP8266

Source: https://randomnerdtutorials.com/esp8266-pinout-reference-gpios/

d. Spesifikasi WeMos ESP8266 D1 Mini

WeMos D1 mini merupakan sebuah module development board yang berbasis WiFi dari
keluarga ESP8266, dimana dapat diprogram menggunakan software IDE Arduino seperti
halnya dengan NodeMCU.
Ada beberapa turunan dari keluarga (family) Wemos D1 Tahun Produksi 2018 yang beredar
dipasaran meliputi:
• D1 Mini
• D1 Mini Lite
• D1 Mini Pro
Akan tetapi, pada kali ini difokuskan ke Wemos D1 Mini yang sudah populer di Indonesia,
bentuk modul dan penjelasan selengkapnya telah dibahas pada Modul 1.

7
 CV SPEKTRUM TEKNOLOGI

4. Sensor LDR
a. Pengertian
LDR (Light Dependent Resistor) merupakan salah satu komponen resistor yang nilai
resistansinya akan berubah-ubah sesuai dengan intensitas cahaya yang mengenai sensor
ini. Perlu diketahui bahwa nilai resistansi dari sensor ini sangat bergantung pada intensitas
cahaya. Semakin banyak cahaya yang mengenainya, maka akan semakin menurun nilai
resistansinya. Sebaliknya jika semakin sedikit cahaya yang mengenai sensor (gelap), maka
nilai hambatannya akan menjadi semakin besar sehingga arus listrik yang mengalir akan
terhambat. Umumnya Sensor LDR memiliki nilai hambatan 200 Kilo Ohm pada saat dalam
kondisi sedikit cahaya (gelap), dan akan menurun menjadi 500 Ohm pada kondisi terkena
banyak cahaya.

Gambar 10: Bentuk Fisik Sensor LDR

Source: https://pintarelektro.com/wp-content/uploads/2020/07/sensor-ldr.jpg

Gambar 11: Simbol Sensor LDR

Source: https://www.kelasplc.com/wp-content/uploads/2020/04/Simbol-LDR-atau-Photoresistor.jpg

b. Fungsi dan Aplikasinya

LDR berfungsi sebagai sebuah sensor cahaya dalam berbagai macam rangkaian
elektronika seperti saklar otomatis berdasarkan cahaya yang jika sensor terkena cahaya
maka arus listrik akan mengalir (ON) dan sebaliknya jika sensor dalam kondisi minim cahaya
(gelap) maka aliran listrik akan terhambat (OFF). LDR juga sering digunakan sebagai sensor
lampu penerang jalan otomatis, lampu kamar tidur, alarm, rangkaian anti maling otomatis
menggunakan laser, sutter kamera otomatis, dan masih banyak lagi yang lainnya.

8
 CV SPEKTRUM TEKNOLOGI

5. Relay
a. Pengertian
Relay merupakan komponen elektronika berupa saklar atau switch elektrik yang
dioperasikan secara listrik dan terdiri dari 2 bagian utama yaitu Elektromagnet (coil) dan
mekanikal (seperangkat kontak Saklar/Switch). Komponen elektronika ini menggunakan
prinsip elektromagnetik untuk menggerakan saklar sehingga dengan arus listrik yang kecil
(low power) dapat menghantarkan listrik yang bertegangan lebih tinggi.

Gambar 12: Contoh Modul Relay 1 Channel

Source: https://cf.shopee.co.id/file/87cb44236d73c38e88c85a8f55ccf308

Gambar 13: Simbol Relay

Source: https://wikielektronika.com/wp-content/uploads/2021/02/gambar-simbol-relay.jpg

b. Fungsi dan Aplikasinya

Seperti yang telah di jelaskan tadi bahwa relay memiliki fungsi sebagai saklar elektrik,
namun jika di aplikasikan ke dalam rangkaian elektronika, relay memiliki beberapa fungsi
yang cukup unik. Berikut beberapa fungsi saat di aplikasikan ke dalam sebuah rangkaian
elektronika.
• Mengendalikan sirkuit tegangan tinggi dengan menggunakan bantuan signal tegangan
rendah.
• Menjalankan logic function atau fungsi logika.
• Memberikan time delay function atau fungsi penundaan waktu.
• Melindungi motor atau komponen lainnya dari korsleting atau kelebihan tegangan.

9
 CV SPEKTRUM TEKNOLOGI

C. Alat dan Bahan

1. PC/Laptop yang sudah terinstal Arduino IDE dan Android Studio ………. 1 set
2. Modul WeMos ESP8266 D1 Mini (atau sejenisnya) ……….….…….…………. 1 buah
3. Sensor Cahaya (LDR) ………………………………………………………………………….. 1 buah
4. Resistor 1kΩ ………………………………………………………………………………………. 1 buah
5. Modul Relay ………………………………………………………………………………………. 1 buah
6. Project Board …………………………………………………………………………………..… 1 buah
7. Kabel MicroUSB ……………………………………………………………………………….… 1 buah
8. Kabel Jumper …...………………………………………………………………………….……. Secukupnya
9. Akses Jaringan Internet ……………………………………….…………………………..… Secukupnya

D. Keselamatan dan Kesehatan Kerja

• Bersihkan meja praktikum dari benda-benda yang terbuat dari logam dan pastikan
kondisi meja kerja siap digunakan untuk kegiatan praktikum.
• Baca dan pahami petunjuk praktikum pada langkah kerja praktikum.
• Periksa kondisi alat dan bahan praktikum sebelum memulai kegiatan praktikum.
• Gunakan peralatan praktikum sesuai dengan fungsinya.
• Baca dan pahami petunjuk praktikum pada langkah kerja praktikum.
• Setelah kegiatan praktikum selesai, kembalikan alat ke tempat semula, dan bersihkan
meja praktikum yang telah digunakan.

E. Langkah Percobaan

1. Langkah awal buka kembali aplikasi Android Studio pada komputer/Laptop.

Jika sebelumnya Anda pernah mengerjakan suatu project, pada umumnya secara
otomatis Android Studio akan membuka kembali tampilan terakhir dari project yang
pernah Anda kerjakan seperti berikut.

Jika tidak muncul, Anda dapat membuka secara manual melalui File > Open lalu cari
lokasi atau tempat Anda menyimpan project tersebut.

2. Sebelum itu, pada lembar kerja sebelumnya telah dibahas cara membuat UI (User
Interface) dan menjalankan fungsi aplikasinya pada Android Studio. (Lihat Modul 5;
Project Smarthome).

10
 CV SPEKTRUM TEKNOLOGI

Selanjutnya adalah merealisasikan Aplikasi tersebut pada perangkat keras (hardware)

yang akan dimonitoring dan dikendalikan melalui jarak jauh.
Setelah bahan-bahan yang dibutuhkan telah tersedia, perhatikan gambar dibawah dan
rangkai sesuai jenis Modul ESP8266 yang Anda gunakan.

a) Jika Anda menggunakan Modul ESP8266 jenis Wemos D1

PROJECT BOARD

b) Jika Anda menggunakan Modul ESP8266 jenis NodeMCU

PROJECT BOARD

Keterangan:
Relay & Sensor ESP8266
Keterangan
PINOUT PINOUT
VCC 3.3V (3V3) Sumber Tegangan (VCC) yang digunakan adalah DC 3,3V
GND GND (G) Ground/Negative
Relay Signal D5 Pin D5 pada ESP8266 sebagai Output Digital menuju Relay
LDR Signal A0 Pin A0 pada ESP8266 sebagai Input Analog dari Sensor LDR
Relay Pin (NO) - Terhubung Langsung ke Sumber Tegangan (L) AC 220V
Relay Pin (C) - Terhubung ke Lampu dan Sumber Tegangan (N) AC 220V

11
 CV SPEKTRUM TEKNOLOGI

3. Langkah berikutnya, buka aplikasi Arduino IDE dan masukkan sintaks berikut.

#include <ESP8266WiFi.h>
#include <FirebaseArduino.h>
#include <ESP8266WebServer.h>
#include <WiFiManager.h>

#define FIREBASE_HOST "Salin URL Firebase Host Disini"

#define FIREBASE_AUTH "Salin Kode Autentikasinya Disini"

byte ldr= A0;

byte lampu= D5;
int nilai, manual, otomatis;

void setup()
{
Serial.begin(115200);
WiFiManager wifiManager;
wifiManager.autoConnect("WiFiManager-IoT");
Serial.println("\n\nWiFi Already Connected!\n");

Firebase.begin(FIREBASE_HOST, FIREBASE_AUTH);
Firebase.stream("/manual");
Firebase.stream("/otomatis");
pinMode(D5, OUTPUT);
}
void loop()
{
if (Firebase.failed())
{
Serial.print("Firebase Error\n");
Serial.print(Firebase.error());
Serial.println(Firebase.error());
Serial.println("!!! Firebase Error !!!\n\n");
delay(500);
}
else
{
Serial.println("\nStatus:Connected to Firebase\n");
delay(300);
}

manual = Firebase.getInt("manual");
otomatis = Firebase.getInt("otomatis");

nilai = analogRead(ldr)/10.24;
Serial.print("Nilai LDR: ");
Serial.println(nilai);
float n = nilai;
Firebase.setFloat("/ldr",n);

12
 CV SPEKTRUM TEKNOLOGI

if(otomatis > 0)
{
n = nilai;
if(n < 30)
{
Serial.print("Lampu Menyala (Otomatis)\n");
digitalWrite(lampu, HIGH);
}
else
{
Serial.print("Lampu Mati (Otomatis)\n");
digitalWrite(lampu, LOW);
}
}
else if(manual > 0)
{
Serial.print("Lampu Menyala (Manual)\n");
digitalWrite(lampu, HIGH);
}
else
{
Serial.print("Lampu Mati (Manual)\n");
digitalWrite(lampu, LOW);
}
delay(50);
}

Berikut merupakan penjelasan dari beberapa bagian penting dalam sintaks diatas.
a) Sintaks dibawah menunjukkan perhitungan untuk konversi nilai skala dari yang
awalnya 0 sampai 1024, diubah menjadi 0 sampai 100 dengan fungsi pembagian
analogRead(ldr)/10.24. Artinya, setiap nilai yang dibaca melalui Analog Read akan
selalu dibagi 10,24. Fungsi ini diperlukan agar nilai yang terbaca dapat dilihat
dalam bentuk persentase (%) dari 0% hingga 100%.

b) Sintaks dibawah merepresentasikan kondisi apabila tombol “otomatis”

diaktifkan, maka lampu akan menyala apabila nilai (n) yang terbaca kurang dari
30. Jika nilai yang terbaca lebih dari 30, maka lampu akan otomatis mati.

13
 CV SPEKTRUM TEKNOLOGI

c) Sintaks dibawah merepresentasikan kondisi apabila tombol “manual” diaktifkan,

maka lampu akan menyala. Jika tombol ditekan kembali, maka lampu akan mati,
dan begitu seterusnya.
Dalam kondisi ini, apabila tombol “manual” dan “otomatis” diaktifkan bersamaan,
maka yang akan aktif adalah fungsi otomatisnya dan fungsi manual akan berhenti
bekerja hingga tombol “otomatis” dinonaktifkan kembali.

4. Setelah sintaks sudah tersalin, sambungkan Modul ESP8266 yang Anda gunakan dan
Upload sintaks tersebut hingga muncul keterangan “Done Saving”.

14
 CV SPEKTRUM TEKNOLOGI

5. Sebelum memulai kegiatan kontrol dan monitoring, atur kembali WiFi Manager dan
hubungkan ke jaringan WiFi yang tersedia di lokasi Anda. Jika sudah tersambung ke
jaringan WiFi namun gagal terhubung ke Firebase, cobalah untuk menekan tombol
“Reset” (umumnya bertanda tulisan “RST”) pada Modul ESP8266 yang Anda gunakan.
6. Perhatikan ESP8266 melalui port Serial Monitor.
Gambar dibawah (kiri) merupakan kondisi dimana ESP8266 sudah terhubung ke Firebase
dan fungsi tombol “otomatis” diaktifkan melalui Aplikasi yang telah Anda buat pada
project sebelumnya. Sedangkan gambar (kanan) merupakan kondisi dimana ESP8266
sudah terhubung ke Firebase dan fungsi tombol “manual” diaktifkan melalui Aplikasi yang
telah Anda buat pada project sebelumnya.

7. Jika gagal terhubung, cobalah untuk menekan kembali tombol Reset pada Modul ESP8266
secara berulang.
Jika masih gagal, Anda dapat mencoba mengganti Fingerprint dari URL Firebase Anda
melalui https://www.grc.com/fingerprints.htm dan perbarui Fingerprint Anda pada
direktori C:\Users\pcname\Documents\Arduino\libraries\firebase-arduino-master\src
\FirebaseHttpClient.h (buka file FirebaseHttpClient.h menggunakan Notepad).

8. Tulis hasil percobaan Pertama Anda pada kolom Hasil Percobaan.

15
 CV SPEKTRUM TEKNOLOGI

9. Jika percobaan pertama telah berhasil, cobalah untuk meningkatkan kemampuan Anda
dengan mengikuti langkah percobaan kedua berikut.
Pada percobaan kedua, Anda akan belajar bagaimana cara mengubah tampilan Aplikasi
Anda menjadi adaptive, yaitu dapat mengikuti arah orientasi layar Smartphone Anda (baik
Potrait ataupun Landscape).
10. Langkah awal, pada tampilan awal aplikasi Android Studio pilih activity_mail.xml dan
ubah tampilan menjadi “Split” seperti gambar berikut.

11. Pilih “Orientation for Preview” seperti gambar dibawah dan klik “Create Landscape
Variation”.

Kemudian akan muncul lembar kerja baru land\activity_main.xml seperti gambar

dibawah ini.

12. Pada “Device for Preview” pilih “Pixel 4XL” sebagai acuan untuk
membuat tata letak desainnya.

16
 CV SPEKTRUM TEKNOLOGI

13. Jika semua sudah siap, salin sintaks dibawah ini di lembar kerja land\activity_main.xml
pada Langkah Kegiatan No.12 sebelumnya.
<?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"
android:gravity="center"
android:padding="20dp"
android:orientation="vertical"
android:background="@drawable/wallpaper"
tools:context=".MainActivity">

<ImageView
android:id="@+id/imageView"
android:layout_width="138dp"
android:layout_height="147dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="185dp"
android:layout_marginTop="1dp"
android:src="@drawable/light_off" />

<ToggleButton
android:id="@+id/button_power"
android:layout_width="250dp"
android:layout_height="wrap_content"

17
 CV SPEKTRUM TEKNOLOGI
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="130dp"
android:layout_marginTop="150dp"
android:textOff="HIDUPKAN LAMPU"
android:textOn="MATIKAN LAMPU" />

<ToggleButton
android:id="@+id/button_auto"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="130dp"
android:layout_marginTop="196dp"
android:textOff="HIDUPKAN FITUR OTOMATIS"
android:textOn="MATIKAN FITUR OTOMATIS" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="120dp"
android:layout_marginTop="60dp"
android:letterSpacing="0.1"
android:text="Intensitas Cahaya Ruangan"
android:textColor="@color/white"
android:textSize="14sp" />

<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="100dp"
android:layout_marginTop="90dp"
app:cardBackgroundColor="#77AF29"
app:cardCornerRadius="20dp">

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_marginTop="1dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="200dp"
android:layout_marginEnd="10dp"
android:text="%"
android:textColor="@color/white"
android:textSize="50sp"
android:textStyle="bold" />

<TextView
android:id="@+id/ldr_sensor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

18
 CV SPEKTRUM TEKNOLOGI
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="64dp"
android:layout_marginTop="32dp"
android:text="00.0"
android:textColor="@color/white"
android:textSize="60sp"
android:textStyle="bold" />

</RelativeLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>

14. Tekan tombol “Run” dan aktifkan mode orientasi pada Device atau Emulator Anda,
dan perhatikan perbedaannya saat layar Device/Smartphone tersebut dimiringkan (Mode
Landscape).
15. Tulis hasil percobaan Kedua Anda pada kolom Hasil Percobaan.
16. Buat kesimpulan dari apa yang telah Anda pelajari dalam modul pelatihan ini.

19
 CV SPEKTRUM TEKNOLOGI

F. Hasil Percobaan
a) Hasil Percobaan Kontrol dan Monitoring melalui Emulator dan melalui Hardware
Device/Smartphone

b) Hasil Percobaan Perubahan Orientasi (Potrait/Landscape) Aplikasi melalui Emulator

dan melalui Hardware Device/Smartphone

G. Kesimpulan

………………………………………………………………………………..……………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………..……………………………………………………..………………………….…
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………..……………………………………….…
………………………………………………………………………………………………………………………………………………

20
 CV SPEKTRUM TEKNOLOGI

H. Tes Formatif

1. Perhatikan rangkaian berikut!

Dari rangkaian diatas, diketahui Signal Relay terhubung pada PIN D5 dari ESP8266. Apa yang
terjadi jika Signal Relay tersebut dihubungkan pada PIN D6? Jelaskan!
Jawab:

2. Jelaskan langkah apa saja yang dapat dilakukan saat perangkat keras yang dirancang tidak
dapat terhubung ke Firebase!
Jawab:

21
 CV SPEKTRUM TEKNOLOGI

3. Jelaskan langkah-langkah membuat tampilan adaptif (Potrait & Landscape Variation) pada
Aplikasi yang Anda buat!
Jawab:

22
 CV SPEKTRUM TEKNOLOGI

4. Perhatikan Sintaks berikut.

Manakah bagian yang berfungsi untuk mengatur jenis warna pada cardview? Dan kode warna
apa yang harus ditulis apabila Anda ingin menggantinya dengan warna Hitam?
Jawab:

5. Lengkapi bagian-bagian yang kurang/salah pada Sintaks berikut!

<TextView;
android:id="@id/ldr_sensor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="64dp"
android:layout_marginTop="32dp"
android_text="00.0"
android:textcolor="color=”white"
android:textsize="60px"
android:textStyle="bold">
Jawab:

23
 CV SPEKTRUM TEKNOLOGI

I. Kunci Jawaban - Tes Formatif Modul 6

1. Perhatikan rangkaian berikut!

Dari rangkaian diatas, diketahui Signal Relay terhubung pada PIN D5 dari ESP8266. Apa yang
terjadi jika Signal Relay tersebut dihubungkan pada PIN D6? Jelaskan!
Jawab:
PIN D6 dari segi karakteristik GPIO untuk input maupun output digital memiliki kesamaan yang
serupa dengan PIN D5. Sehingga teoritis jika Signal Relay dihubungkan dengan PIN D6, Relay
masih akan berfungsi dengan baik dan PIN D6 juga tetap bekerja dengan maksimal tanpa
kendala yang berarti.

2. Jelaskan langkah apa saja yang dapat dilakukan saat perangkat keras yang dirancang tidak
dapat terhubung ke Firebase!
Jawab:
a. Jika gagal terhubung, cobalah untuk menekan kembali tombol Reset pada Modul ESP8266
secara berulang.
b. Jika tetap gagal, Anda dapat mencoba mengganti Fingerprint dari URL Firebase Anda
melalui https://www.grc.com/fingerprints.htm dan perbarui Fingerprint Anda pada
direktori C:\Users\pcname\Documents\Arduino\libraries\firebase-arduino-master\src
\FirebaseHttpClient.h (buka file FirebaseHttpClient.h menggunakan Notepad).

24
 CV SPEKTRUM TEKNOLOGI

3. Jelaskan langkah-langkah membuat tampilan adaptif (Potrait & Landscape Variation) pada
Aplikasi yang Anda buat!
Jawab:
a. Langkah awal, pada tampilan awal aplikasi Android Studio pilih activity_mail.xml dan
ubah tampilan menjadi “Split” seperti gambar berikut.

b. Pilih “Orientation for Preview” seperti gambar dibawah dan klik “Create Landscape
Variation”.

Kemudian akan muncul lembar kerja baru land\activity_main.xml seperti gambar

dibawah ini.

c. Pada “Device for Preview” pilih “Pixel 4XL” sebagai acuan untuk
membuat tata letak desainnya.

d. Jika semua sudah siap, tulis sintaks baru pada lembar kerja land\activity_main.xml dan
sesuaikan dengan tampilan Landscapenya.

25
 CV SPEKTRUM TEKNOLOGI

4. Perhatikan Sintaks berikut.

Manakah bagian yang berfungsi untuk mengatur jenis warna pada cardview? Dan kode
warna apa yang harus ditulis apabila Anda ingin menggantinya dengan warna Hitam?
Jawab:
Bagian yang berfungsi untuk mengatur jenis warna pada widget terletak pada Sintaks
app:cardBackgroundColor=”#77AF29” yang merepresentasikan bahwa background widget
akan berwarna Hijau. Jika ingin mengganti dengan warna Putih, maka Sintaksnya berubah
menjadi: app:cardBackgroundColor=”#FF000000”.

5. Lengkapi bagian-bagian yang kurang/salah pada Sintaks berikut!

<TextView;
android:id="@id/ldr_sensor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="64dp"
android:layout_marginTop="32dp"
android_text="00.0"
android:textcolor="color=”white"
android:textsize="60px"
android:textStyle="bold">

Jawab:
<TextView
android:id="@+id/ldr_sensor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="64dp"
android:layout_marginTop="32dp"
android:text="00.0"
android:textColor="@color/white"
android:textSize="60sp"
android:textStyle="bold"/>

26