UKK KLASTER 3

MEMBUAT APLIKASI LOGIN DENGAN FIREBASE

MENGGUNAKAN ANDROID STUDIO
TAHUN PELAJARAN 2021 / 2022
( MODUL 1 )

DI SUSUN OLEH
TEAM RPL SMKN 5 KAB.TANGERANG

Materi
1 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK
 1. Android studio

Menurut Sumber laman aslinya (https://developer.android.com/) . Android

Studio adalah Integrated Development Environment (IDE) resmi untuk
pengembangan aplikasi Android, yang didasarkan pada IntelliJ IDEA(Intellij
IDEA adalah environment pemrograman khusus atau yang biasa disebut integrated
development environment (IDE) yang sebagian besar dibuat untuk Bahasa
pemrograman Java) . Selain sebagai editor kode dan fitur developer IntelliJ
yang andal, Android Studio menawarkan banyak fitur yang meningkatkan
produktivitas Anda dalam membuat aplikasi Android, seperti:

 Sistem build berbasis Gradle yang fleksibel

 Emulator yang cepat dan kaya fitur
 Lingkungan terpadu tempat Anda bisa mengembangkan aplikasi
untuk semua perangkat Android
 Terapkan Perubahan untuk melakukan push pada perubahan kode
dan resource ke aplikasi yang sedang berjalan tanpa memulai ulang
aplikasi
 Template kode dan integrasi GitHub untuk membantu Anda membuat
fitur aplikasi umum dan mengimpor kode sampel
 Framework dan alat pengujian yang lengkap
 Alat lint untuk merekam performa, kegunaan, kompatibilitas versi,
dan masalah lainnya
 Dukungan C++ dan NDK
 Dukungan bawaan untuk Google Cloud Platform, yang memudahkan
integrasi Google Cloud Messaging dan App Engine

2. Struktur proyek Android Studio

Secara default, Android Studio menampilkan file project Anda dalam

tampilan project Android, seperti yang ditunjukkan pada gambar 1. Tampilan
ini disusun menurut modul untuk memberikan akses cepat ke file sumber
utama project Anda. Semua file build terlihat di tingkat teratas di bagian
Gradle Script dan setiap modul aplikasi berisi folder berikut:

 manifes: Berisi file AndroidManifest.xml.

 java: Berisi file kode sumber Java, termasuk kode pengujian JUnit.
 res: Berisi semua resource non-kode, seperti tata letak XML, string UI,
dan gambar bitmap.

2 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 3. Antarmuka Pengguna

1. Toolbar memungkinkan Anda melakukan berbagai tindakan, termasuk

menjalankan aplikasi dan meluncurkan alat Android.
2. Menu navigasi membantu Anda menjelajah project dan membuka file untuk
diedit. Menu ini memberikan tampilan struktur yang lebih ringkas yang
terlihat di jendela Project
3. Jendela editor adalah tempat Anda membuat dan memodifikasi kode.
Bergantung pada jenis file yang ada, editor ini dapat berubah. Misalnya, saat
menampilkan file tata letak, editor akan menampilkan Layout Editor.
4. Panel jendela fitur berada di sisi luar jendela IDE dan berisi tombol-tombol
yang memungkinkan Anda memperluas atau menciutkan setiap jendela fitur.
5. Jendela fitur memberi Anda akses ke tugas tertentu seperti pengelolaan
project, penelusuran, kontrol versi, dan lainnya. Anda dapat memperluas dan
menciutkan jendela ini.
6. Status bar menampilkan status project Anda dan IDE itu sendiri, serta semua
peringatan atau pesan.

3 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 4. FIREBASE
Menurut sumber dicoding (https://www.dicoding.com/blog/apa-itu-firebase-
pengertian-jenis-jenis-dan-fungsi-kegunaannya/) 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.

5. Memulai Project

Sebelum kita memulai project, ada baiknya kalian memahami dahulu fitur
android studio dan fitur firebase minimal kalian membaca nya.

No Langkah Project / penjelasan / Gambar

1 Kita Membuat project Baru pada Android Studio dengan cara jalankan android
studio dan klik empty activity , untuk name kita beri nama
Ukk_klaster3_namakalian dan savelocation kita buat folder baru pada drive D
atau E atau Mydocument dengan nama folder Ukk_Klaster3_namakalian seperti
gambar dibawah ini dan untuk minimun android nya kita pilih API: android 21
lolipop, kemudian klik finish

4 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 No Langkah Project / penjelasan / Gambar

2 Membuat Activity Baru

Setelah klik finish maka activity yang pertama terbentuk adalah main activity.
Pada project kali ini kita akan menambahkan 2 Activity lagi,
1. LoginActivity
2. RegisterActivity

dengan menambahkan empty activity, cara nya pada folder java

com.ukk_klaster3 kalian klik kanan lalu  klik New  Activity 
EmptyActivity , Seperti Gambar di bawah ini :

Jadi Nya Seperti gambar dibawah ini :

5 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 No Langkah Project / penjelasan / Gambar

Pada MainActivity kita akan buat Texs jika Berhasil Login, buatlah scriptnya di
bawah ini :

6 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 No Langkah Project / penjelasan / Gambar

Hasilnya Adalah Seperti ini :

Menambahkan Aset Gambar Vector Pada Drawable

Pada drawable klikkanan  Pilih Vector Aset, Seperti Gambar di bawah ini

Lalu Tambahkan Icon seperti

1. Person

7 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 No Langkah Project / penjelasan / Gambar
2. Lock
3. Register
4. Email

Membuat UI Login Activity

Membuat Layout Login

1. Scrollview
2. Linear Layout

Penjelasan

 ScrollView
digunakan agar konten pada layar aplikasi dapat di Scroll secara vertikal,
karena jika tidak mengguanakan ScrollView, jika konten kita melebihi ukuran
layar maka konten tersebut akan terpotong

 Linear Layout
merupakan ViewGroup yang mengatur widget lainnya untuk menampilkan
satu arah, secara vertikal dan horizontal. Kita dapat mengatur arah layout
dengan mendefinisikan atribut android:orientation di widget LinearLayout

Objek Texview dan editText

 Texview
adalah salah satu widget yang digunakan untuk menampilkan text pada
aplikasi android atau layout.

 EditText
cara standar untuk memasukkan teks diaplikasi Android. Jika pengguna
diminta untuk memasukkan suatu teks, maka View ini lah yang menjadi
sarana utama untuk melakukannya.

 CardView
CardView membungkus suatu layout dan biasanya dipakai sebagai container
untuk setiap item di dalam ListView atau RecyclerView.

 Button
Adalah widget yang memiliki fungsi untuk melakukan perintah tertent

8 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 No Lamgkah Project / Penjelasan Gambar
1 Kita Membuat layout Pada Login dengan hasil seperti gambar dibawah ini :

Objek dan layout yang di guanakan :

1. Scroll View
2. Linear Layout
3. Card View 1.1.0
4. EditText
5. TextView
6. Button

2 Menambahkan Cardview
Cara Menambahkan Cardview kita perlu Sync atau Mendownload Cardview
dan sesuaikan jenis card yang terupdate pada repository android , untuk
menambahkannya bisa lihat cara di bawah ini
Pada menu gradle script , lalu pilih build gradle (Module) lalu tambahkan
repository : di dalam nya setelah dependencies, seperti gambar dibawah ini

implementation "androidx.cardview:cardview:1.0.0"

9 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 Jika sudah klik sync pada kanan atas, dan pastikan sync succesfull, dan build
ulang script nya dengan klik tanda palu , pastikan tidak terjadi error
3 Menambahkan Color
Pada Values , di menu color.xml Tambahkan Warna tambahan seperti gambar
dibawah ini :

4 Menambahkan Image pada drawable

Siapkan Gambar Logo smkn 5 kabupaten tangerang, dan pastikan nama logo
tersebut huruf kecil semua tidak memakai kapital atau spasi, lalu copy dan
paste pada file drawable, seperti gambar dibawah ini :

5 Membuat Design Layout

Pada Login Activity Ubah Layout Default menjadi scrollview
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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="@color/colorAzur"
tools:context=".LoginActivity">

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="20dp"

10 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 android:layout_margin="10dp">

<LinearLayout
android:layout_marginTop="50dp"
android:layout_marginBottom="150dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="14dp">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logosmk"
android:layout_gravity="center_horizontal">

</ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/black"
android:layout_gravity="center_horizontal"
android:textSize="20sp"
android:text="LOGIN"
android:textStyle="bold">
</TextView>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
app:boxBackgroundColor="@color/white"
app:boxBackgroundMode="outline"
app:boxStrokeWidth="2dp">

<EditText
android:id="@+id/email"
android:layout_width="match_parent"
android:drawableRight="@drawable/ic_baseline_email_24"
android:layout_height="wrap_content"
android:hint="Email"
android:inputType="textEmailAddress"
tools:ignore="SpeakableTextPresentCheck"></EditText>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:boxBackgroundColor="@color/white"
android:layout_marginTop="30dp"
app:boxBackgroundMode="outline"
app:boxStrokeWidth="2dp"
app:passwordToggleEnabled="true">

<EditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword"
tools:ignore="SpeakableTextPresentCheck">

</EditText>

11 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 </com.google.android.material.textfield.TextInputLayout>
<Button
android:id="@+id/btnlogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/ic_baseline_login_24"
android:layout_marginTop="20dp"
android:text="LOGIN"
android:backgroundTint="@color/teal_700"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="REGISTER"
android:backgroundTint="@color/black"
android:id="@+id/btnregis"/>

</LinearLayout>

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

Maka Hasilnya Seperti gambar dibawah ini :

6 Membuat Form Register

Pada Layout Register Buatlah Script seperti dibawah ini :

<?xml version="1.0" encoding="utf-8"?>

<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"

12 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
tools:context=".RegisterActivity">

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="20dp"
android:layout_margin="10dp">

<LinearLayout
android:layout_marginTop="20dp"
android:layout_marginBottom="150dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="14dp">

<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/register"
android:layout_gravity="center_horizontal">

</ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/black"
android:layout_gravity="center_horizontal"
android:textSize="20sp"
android:text="REGISTER"
android:textStyle="bold">
</TextView>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
app:boxBackgroundColor="@color/white"
app:boxBackgroundMode="outline"
app:boxStrokeWidth="2dp">

<EditText
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"

android:drawableLeft="@drawable/ic_baseline_person_24"
android:hint="Nama Lengkap"
android:inputType="textPersonName"

tools:ignore="SpeakableTextPresentCheck"></EditText>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:boxBackgroundColor="@color/white"
android:layout_marginTop="10dp"
app:boxBackgroundMode="outline"

13 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 app:boxStrokeWidth="2dp">

<EditText
android:id="@+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"

android:drawableLeft="@drawable/ic_baseline_email_24"
android:hint="Email"
android:inputType="textEmailAddress"
tools:ignore="SpeakableTextPresentCheck">

</EditText>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:boxBackgroundColor="@color/white"
android:layout_marginTop="10dp"
app:startIconDrawable="@drawable/ic_baseline_lock_24"
app:passwordToggleEnabled="true"
app:boxBackgroundMode="outline"
app:boxStrokeWidth="2dp">

<EditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword"
tools:ignore="SpeakableTextPresentCheck">

</EditText>

</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:boxBackgroundColor="@color/white"
android:layout_marginTop="10dp"
app:startIconDrawable="@drawable/ic_baseline_lock_24"
app:passwordToggleEnabled="true"
app:boxBackgroundMode="outline"
app:boxStrokeWidth="2dp">

<EditText
android:id="@+id/password_conf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Konfirmasi Password"

tools:ignore="SpeakableTextPresentCheck"></EditText>

</com.google.android.material.textfield.TextInputLayout>
<Button
android:id="@+id/btnregister"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="REGISTER NOW"
android:backgroundTint="@color/teal_700">

14 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 </Button>

</LinearLayout>

</androidx.cardview.widget.CardView>

</ScrollView>
Maka Hasilnya Akan Seperti gambar dibawah ini :

Mengubah Launcher Aplikasi, ketika kita Launcher Emulator Device Maka aplikasi
yang berjalan pertama kali adalah main. Sekarang kita akan mengubah nya agar
Launch Pertama kali adalah Activity Login, maka langkah yang harus dilakukan, kita
buka android manifest,
1. Pada Main activity android exported ubah menjadi “false”
2. Pada Login Activity kita rubah exported menjadi “true”
3. Lalu kita pindahkan inten launcher nya (Copy) ke Login Activity (Paste).
Seperti gambar di bawah ini

15 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 Sehingga ketika kita menjalankan Emulator device (AVD) maka hasilnya adalah
tampilan login yang di Launch Pertama kali

MEMBUAT SPLASCREEN DENGAN AUDIO

Apa itu Splashscreen

Splash screen biasanya menampilkan logo, nama, dan lainnya yang berhubungan
dengan aplikasi. Beberapa aplikasi yang menggunakan splash screen antara lain

Langkah Kerja

No Langkah kerja / gambar / keterangan

1 Buatlah Activity Baru dengan Cara klik mana klik file  New  Activity
 Empty Activity , beri nama dengan nama Splashcreen. Kemudian
buatlah layout Splashcreen seperti gambar di bawah ini :

1. Linear Layout
2. Text View
3. ProgressBar
4. Image View

2 Buatlah Script Seperti Gambar Di bawah ini Pada Layout

<LinearLayout

16 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 No Langkah kerja / gambar / keterangan
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:orientation="vertical"
android:gravity="center"
tools:context=".Splashscreen">

<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginBottom="30dp"
android:src="@drawable/logosmk">

</ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SELAMAT DATANG"
android:textSize="30sp"
android:textStyle="bold"
android:textColor="@color/colorPrimary">
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="APLIKASI UKK KLASTER 3"
android:textSize="30sp"
android:textStyle="bold"
android:textColor="@color/purple_200">

</TextView>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/progresbar"
android:layout_marginTop="20dp">

</ProgressBar>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Membuka Aplikasi Harap Tunggu"
android:textSize="15sp"
android:textStyle="bold"></TextView>

</LinearLayout>

Pasttikan Hasilnya Sama dengan Layout pada Kolom pertama (Diatas)

3 Menambahkan File Audio. Buatlah Folder Baru (direktori Baru) Pada
Menu Res, klik Kanan  New  Directory  Beri nama Dengan Nama
raw (Kecil semua) direktori rawa ini nanti nya sebagai tempat
penyimpanan audio kita, seperti gambar di bawah ini :

17 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 No Langkah kerja / gambar / keterangan

4 Download audio Free No Copy Right, carilah audio yang tidak panjang
durasi ya , minimal 5 sampai 7 menit,copy dan paste kedalam file raw
tersebut, kemudian pada Splashscreen java buatlah script java nya.
Pertama lakukan import dahulu seperti script dibawah ini pada file
splashcreen.java, Seperti gambar dibawah ini :

18 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 No Langkah kerja / gambar / keterangan

Lalu Tambahkan Script dibawah ini :

Dan Tambahkan lagi Script dibawah ini (Setelah SetcontentView) :

playsoun();
Thread thread = new Thread(){
public void run(){
try {
sleep(4000);
}catch (InterruptedException exception){
exception.printStackTrace();
}finally {
startActivity(new
Intent(Splashscreen.this,LoginActivity.class));
finish();
}
}
};
thread.start();
}

private void playsoun() {

try {

} catch (Exception e) {
e.printStackTrace();
}
musik = MediaPlayer.create(this,R.raw.operator);
musik.setLooping(false);
musik.start();

Karena Launcher Pertama Kali adalah Activity Login maka

pada manifest kita rubah menjadi Splashscreen :

19 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK

 No Langkah kerja / gambar / keterangan
Pada login Activity pada exported :false , dan inten
launcher kita copy ke dalam splashcreen activity
setelah Exported, dan rubah exported false menjadi true
pada splasscreen activity, seperti gambar dibawah ini :

20 | MODUL 1 ( SATU ) UKK KLASTER 3 PEMROGRAMAN OBJEK