Tutorial Realtime Chat Android Studio dan Firebase #2 Connect App to Firebase

Assalamualaikum wr.wb

Hallo teman-teman kembali lagi bersama forumkoding.com kali ini kita akan membahas mengenai Cara menghubungkan aplikasi android dengan firebase, kemarin teman-teman telah menbaca aplikasi apa yang akan kita buat ... nah yang belum mengunjungi artikel sebelumnya silahkan kunjungi Tutorial Realtime Chat Android Studio dan Firebase #1, Silahkan teman-teman simak tutorial Tutorial Realtime Chat Android Studio dan Firebase #2 Connect App to Firebase hingga selesai.

Membuat Project Android

Tutorial kali ini kita akan membahas mengenai pembuatan project android dan cara menghubungkan dengan firebase.. Apa itu firebase? Firebase Adalah aplikasi layanan google untuk mempermudah pada developer menggembangkan aplikasinya dengan metode menyimpan data secara online.

Pastikan teman-teman sudah menginstal Android Studio versi terbaru
  1. Pada jendel Welcome To Android Studio, Silahkan teman-teman klik  Start a new Android Studio Project
Atau jika sudah membuka project, silahkan pilih File > New > New Project
             
              2. Di Jendela Silahkan teman teman Choose your Project, dan pilih Empty Activity
              3. Silahkan klik Next
              4. Silahkan teman-teman beri nama projectnya dengan nama MyChat
              5. Silahkan pilih minimum SDK yaitu SDK 19 atau versi Kitkat 
              6. Silahkan beri nama Activitynya dengan nama WelcomeActivity
              7. Tunggu hingga instalasi project selesai

Silahkan teman-teman buka file style.xml pada folder app > res > values  lalu ubah script pada file style.xml seperti berikut
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources>
Sekarang silahkan teman-teman buka file colors.xml dan silahkan ubah seperti script berikut ini
<?xml version="1.0" encoding="utf-8"?><resources>
   <color name="colorPrimary">#a60707</color>
   <color name="colorPrimaryDark">#9b0502</color>
   <color name="colorAccent">#FF4081</color>
</resources> 
Hasilnya
Sebelum kita menghubungkan aplikasi kita dengan firebase langkah pertama adalah silahkan teman teman loginkan akun gmailnya pada aplikai android studio, Silahkan perhatikan gambar dibawah ini:
Lalu bagaimana cara untuk loginnya? .. tenang saja kita akan bahas satu persatu.. silahkan simak pembahasan dibawah ini:

Langkah pertama adalah silahkan teman klik icon profile di pojok sudut kanan atas:
Nah langkah kedua Setelah tampil tulisan Google silahkan klik tombol SignIn ... secara otomatis aplikasi Android Studio akan mengarahkan kita pada halaman website untuk melakukan login akun gmail yang biasa kita pakai,

Setelah muncul tampilan akun silahkan teman-teman klik salah satu akun yang mau teman teman pakai dan setelah itu kita akan diarahkan pada halaman persetujuan, silahkan perhatikan gambar dibawah ini:
 Nah sekarang silahkan kembali pada project android kalian jika behasil maka icon profile akan berubah seperti profile gmail teman-teman.

Menghubungkan Android Studi dengan Firebase

Langkah pertama silahkan teman teman klik menu tools dan pilih firebase
setelah di klik akan tampil beberapa buah menu untuk konfigurasi firebase
langkah selanjutnya silahkan teman teman klik menu Authentication lalu silahkan klik link Email and Password authentication.
Setelah di klik maka akan muncul dua buah tombol yaitu: connect to Firebase dan Add Firebase Authentification to your app ... Silahkan klik tombol connect to Firebase terlebih dahulu lalu klik connect to firebase lalu klik Add Firebase Authenticication to your app maka akan muncul seperti gambar berikut ini:

  Maksud gambar diatas adalah perubahan library yang kita gunakan dan menambah library firebase pada file gradle build.. langkah selanjutnya kita akan melakukan configurasi pada Realtime Database
Selanjutnya silahkan klik tombol Add the Realtime Database to your App .. Setelah itu klik tombol Accept Change, Selanjutnya kita akan melakukan configurasi pada cloud Messaging
Setelah muncul tampilannya silahkan klik Add FCM to your app setelah muncul tampilan baru silahkan teman-teman klik Accept Changes

Untuk mengecek apakah database kita berhasil dibuat .. silahkan teman - teman ketikan pada browser FIrebase lalu masuk kehalaman resminya dan masuk ke halaman Go To Console maka akan muncul tampilan seperti berikut
Silahkan klik database myChat kalian dan pergi kehalaman Authentification lalu klik Sign-In Method. fungsinya adalah untuk menghubungkan aplikasi kita dengan sosial media seperti facebook,gmail, twitter dan lain sebagainya, Sekarang kita akan mengubah status Email/Password menjadi Enabled, langkahnya cukup mudah nyaha mengarahkan cursor pada Email/Password maka akan muncul icon seperti pensil, silahkan klik icon tersebut dan silahkan klik tolbol bertuliskan Disabled.. untuk melihat hasilnya silahkan perhatikan gambar dibawah ini:
Selamat Teman- teman telah berhasil menghubungkan project kita dengan firebase ... jangan lupa teman-teman trus ikuti tutorial selanjutnya hingga teman-teman berhasil membuat aplikasi Chatting dengan fitur yang lengkap ... terimakasih telah membaca artikel ini, Semoga Bermanfaat ;)

0 Response to "Tutorial Realtime Chat Android Studio dan Firebase #2 Connect App to Firebase"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel