Modul Pemrograman Mobile

Android Web API

A. Tujuan
1. Mahasiswa mengetahui apa itu Cloud FireStore dan bagaimana melakukan
implementasikan ke Pengembangan Android
2. Mahasiswa Mampu memahami tahapan dalam membangun aplikasi Android dengan
menggunakan Cloud FireStore sebagai penyimpanan data.

B. Teori

Cloud Firestore adalah real time database yang mendukung penyimpanan data dengan
konsep No-SQL. Firestore merupakan salah satu solusi database yang Firebase tawarkan
untuk pengembangan aplikasi seluler. Firestore juga dapat digunakan secara offline
untuk seluler, iOS, dan situs web. Pembuatan kueri di Cloud Firestore bersifat efisien,
ekspresif, dan fleksibel.

Akses data dapat dilindungi menggunakan aturan keamanan Cloud Firestore atau
Pengelolaan Akses dan Idendtitas (IAM). Aturan keamaan ini lebih kuat dari yang ada
pada Firebase Realtime Database. Jika dibandingkan dengan Firebase Realtime
Database, Firestrore memiliki fitur kueri yang lebih lengkap dan cepat dan firut skala
yang lebih mendalam.

Berbeda dengan Firebase Realtime Database yang memiliki struktur parent dan child,
Firestore memiliki struktur yang hirarki dan fleksibel. Data akan disimpan dalam
dokumen yang tersusun menjadi koleksi. Dokumen dalam koleksi memiliki nama yang
bersifat unik. Setiap dokumen berisi pasangan kunci dan nilai. Gambar 2.4 merupakan
ilustrasi dari struktur data cloud firestore. Jenis data yang disimpan dapat berupa string,
angka, boolean, titik 14 geografis, array, hingga objek yang kompleks dan bertingkat.
Ukuran data yang dapat dimuat dalam satu dokumen tidak lebih dari satu MB. Itu
sebabnya Firestore baik untuk menyimpan banyak data berukuran kecil. Koleksi
merupakan wadah untuk menyimpan beberapa dokumen. Koleksi tidak dapat langsung
berisi data. Dokumen dapat memuat koleksi.
C. Praktikum

TUJUAN

Pada praktikum kali ini kita akan mencoba menyimpan data ke Cloud FireStore dan
menarik data dari Cloud FireStore kemudian menampilkan ke ListView

1. Buat proyek baru di Android Studio dengan kriteria sebagai berikut :

Nama Project FireStore

Target & Minimum Target SDK Phone and Tablet, Api Level 21
Tipe Activity Empty Activity
Activity Name MainActivity

2. Hubungkan project ke firebase dengan cara klik Tools → Firebase → Pilih Cloud

Firestore.
3. Klik “Get started with Cloud Firestore” → klik “Connect to Firebase” → Build,

untuk menghubungkan antara aplikasi yang dibuat dengan firebase

4. Sekali lagi klik “Connect to Firebase” → New Project → Masukkan nama project

→ centang checkbox → continue.

5. Klik continue → pilih “Default Account for Firebase” → Create Project kemudian

tunggu sebentar.

6. Klik continue → Connect

7. Buka kembali Android Studio maka status langkah pertama menjadi connected
8. Lanjut ke langkah kedua untuk menambahkan SDK Cloud Firestore ke aplikasi

yang dibuat dengan cara klik “Add the Cloud Firestore SDK to your app” →

Accept Changes.

9. Langkah selanjutnya yaitu membuat database di Firebase Console → pilih project

yang baru saja di buat → Pilih “Firestore Database” → Create Database

10. Pilih “Start in test mode” → Next → Enable

11. klik “Rules” → Ubah kode menjadi seperti di bawah → Publish

1. rules_version = '2';
2. service cloud.firestore {
3. match /databases/{database}/documents {
4. match /{document=**} {
 5. allow read, write: if
6. request.time < timestamp.date(2023, 6, 8);
7. }
8. }
9. }

12. Download Asset https://github.com/arafat1419/Asdos-Assets-FireStore_Drawable

kemudian import ke drawable dan skip pada bagian ic_lancher_background.xml.

13. Buka activity_main.xml dan tambahkan kode seperti berikut :

1. <?xml version="1.0" encoding="utf-8"?>
2. <androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:app="http://schemas.android.com/apk/res-auto"
4. xmlns:tools="http://schemas.android.com/tools"
5. android:layout_width="match_parent"
6. android:layout_height="match_parent"
7. tools:context=".MainActivity">
8.
9.
10. <LinearLayout
11. android:id="@+id/linear_layout"
12. android:layout_width="match_parent"
13. android:layout_height="match_parent"
14. android:gravity="center"
15. android:orientation="vertical">
16. <ImageView
17. android:id="@+id/imgView_1"
18. android:layout_width="wrap_content"
19. android:layout_height="wrap_content"
20. android:padding="16dp"
21. app:srcCompat="@drawable/logo_firebase" />
22.
23. <TextView
24. android:id="@+id/welcomeText"
25. android:layout_width="wrap_content"
26. android:layout_height="wrap_content"
27. android:layout_marginTop="32dp"
28. android:text="Selamat Datang di Firebase"
29. android:textColor="@android:color/black"
30. android:textSize="24sp"/>
31.
32. <EditText
33. android:id="@+id/mainText"
34. android:layout_width="match_parent"
35. android:layout_height="44dp"
36. android:layout_marginTop="32dp"
37. android:layout_marginStart="32dp"
38. android:layout_marginEnd="32dp"
39. android:background="@drawable/text_view_border"
40. android:ems="10"
41. android:hint="Enter name..."
42. android:inputType="textPersonName"
43. android:paddingStart="16dp"
44. android:paddingEnd="16dp"/>
45.
46. <EditText
47. android:id="@+id/mainText2"
48. android:layout_width="match_parent"
49. android:layout_height="44dp"
50. android:layout_marginTop="16dp"
51. android:layout_marginStart="32dp"
52. android:layout_marginEnd="32dp"
53. android:background="@drawable/text_view_border"
54. android:ems="10"
55. android:hint="Enter Stambuk..."
56. android:inputType="textPersonName"
57. android:paddingStart="16dp"
58. android:paddingEnd="16dp"/>
59.
60.
61. <Button
62. android:id="@+id/saveBtn"
63. android:layout_width="match_parent"
64. android:layout_height="wrap_content"
65. android:layout_margin="32dp"
66. android:background="@drawable/button_background"
67. android:text="Save to Firestore" />
68.
69. <TextView
70. android:id="@+id/textView1"
71. android:layout_width="wrap_content"
72. android:layout_height="wrap_content"
73. android:layout_marginBottom="32dp"
74. android:text="Go to List" />
75. </LinearLayout>
76.
77. <ProgressBar
78. android:id="@+id/progress_bar"
79. android:layout_width="match_parent"
80. android:layout_height="match_parent"
 81. android:padding="80dp"
82. android:visibility="gone"
83. app:layout_constraintBottom_toBottomOf="parent"
84. app:layout_constraintEnd_toEndOf="parent"
85. app:layout_constraintStart_toStartOf="parent"
86. app:layout_constraintTop_toTopOf="parent" />
87.
88. </androidx.constraintlayout.widget.ConstraintLayout>

14. Tambahkan inisialisasi EditText dan FirebaseFirestore di atas onCreate pada

MainActivity.Java seperti berikut :
1. private EditText mMainText, mMainText1;
2. private FirebaseFirestore mFirestore;
15. Di dalam onCreate pada MainActivity.Java hubungkan antara variable dengan
komponen yang ada di activity_main.xml seperti berikut :
1. mMainText = findViewById(R.id.mainText);
2. mMainText1 = findViewById(R.id.mainText2);
3. Button mSaveBtn = findViewById(R.id.saveBtn);
4. TextView mListText = findViewById(R.id.textView1);
5. ProgressBar progressBar = findViewById(R.id.progress_bar);
6.
7. FirebaseApp.initializeApp(this);
8.
9. mFirestore = FirebaseFirestore.getInstance();

16. Tambahkan kode ketika mSaveButton di klik maka data akan dimasukkan ke
Firestore seperti berikut :
1. mSaveBtn.setOnClickListener(v -> {
2. String username = mMainText.getText().toString();
3. String stambuk = mMainText1.getText().toString();
4.
5. Map<String, String> userMap = new HashMap<>();
6.
7. userMap.put("nama", username);
8. userMap.put("stambuk", stambuk);
9.
10. progressBar.setVisibility(View.VISIBLE);
11. if (!username.equals("") && !stambuk.equals("")) {
12.
mFirestore.collection("pengguna").add(userMap).addOnSuccessList
ener(documentReference -> {
13. Toast.makeText(MainActivity.this, "Pengguna
Ditambahakan di Firestore", Toast.LENGTH_SHORT).show();
14.
15. mMainText.setText("");
16. mMainText1.setText("");
17. progressBar.setVisibility(View.GONE);
18. }).addOnFailureListener(e -> {
19. String error = e.getMessage();
 20. Toast.makeText(MainActivity.this, "Error: " +
error, Toast.LENGTH_SHORT).show();
21. });
22. } else {
23. Toast.makeText(MainActivity.this, "Username dan
Stambuk tidak boleh kosong", Toast.LENGTH_SHORT).show();
24. }
25. });

17. Buatlah activity baru dan beri nama ListActivity seperti berikut :

18. Selanjutnya tambahkan kode ketika mListText di klik maka akan berpindah ke
activity:
1. mListText.setOnClickListener(v -> {
2. Intent registerIntent = new Intent(MainActivity.this,
ListActivity.class);
3. startActivity(registerIntent);
4. Toast.makeText(MainActivity.this, "Buka Acitiviy yang
menampilkan ListView", Toast.LENGTH_SHORT).show();
5. });

19. Buka activity_list.xml dan tambahkan kode seperti berikut :

1. <?xml version="1.0" encoding="utf-8"?>
2. <androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:app="http://schemas.android.com/apk/res-auto"
4. xmlns:tools="http://schemas.android.com/tools"
5. android:layout_width="match_parent"
6. android:layout_height="match_parent"
7. tools:context=".ListActivity">
8.
9. <ListView
10. android:id="@+id/list_view"
11. android:layout_width="match_parent"
12. android:layout_height="match_parent"
13. android:padding="16dp"/>
14.
15. </androidx.constraintlayout.widget.ConstraintLayout>
20. Inisialisasikan sebuah ArrayList yang akan menampung dataNama seperti berikut :
1. private ArrayList<String> dataNama;

21. Tambahkan kode berikut di dalam OnCreate pada ListActivity.java untuk

menampilkan list data yang ada pada Firestore :
1. FirebaseFirestore mFirestore = FirebaseFirestore.getInstance();
2.
3. dataNama = new ArrayList<>();
4.
5. ListView listView = findViewById(R.id.list_view);
6.
7. mFirestore.collection("pengguna")
8. .get()
9. .addOnCompleteListener(task -> {
10. if (task.isSuccessful()) {
11. for (QueryDocumentSnapshot document :
Objects.requireNonNull(task.getResult())) {
12. dataNama.add(document.getString("nama") + "
- " + document.getString("stambuk"));
13. }
14. ArrayAdapter<String> adapter = new
ArrayAdapter<>(this,androidx.appcompat.R.layout.support_simple_
spinner_dropdown_item, dataNama);
15. listView.setAdapter(adapter);
16. } else {
17. Log.w("Lihat", "Error getting documents.",
task.getException());
18. }
19. });

22. Selesai, Jalankan aplikasi FireStore. Hasilnya akan seperti ini

23. Maka data akan masuk ke dalam Cloud FireStore

24. Pada aplikasi klik Go to List untuk melihat data yang berhasil disimpan