Membuat Aplikasi Chat Sederhana dengan Firebase di Android

Hai All, oya pas banget nih dengan peluncuran fitur baru, design baru dan logo barunya Firebase, karena pada postingan kali ini kita akan membahas apa itu firebase dan mencoba untuk mengimplementasikannya. Target dari sharing ini nantinya dapat menghasilkan aplikasi sederhana yang bisa melakukan komunikasi/chatting antara dua device.

Firebase ini merupakan cloud service provider dan backend as a service, yang artinya perusahaan Firebase ini menyediakan layanan cloud berupa backend seperti database, API, dsb more ..

Dengan Firebase, kita tidak perlu menyeting apapun perihal server, karena firebase menyediakan service layaknya server dan juga database. Nah yang membuatnya lebih menarik lagi, adalah karena Firebase ini mudah di gunakan untuk Android dan iOS, karena telah disediakan untuk Android SDK dan juga iOS SDK. Dan juga Developer tidak perlu repot-repot lagi membuat socket manual untuk memulai pengembangan aplikasi chat, dan baca selengkapnya disini dan juga ini.

Firebase Feature

Pertama yang harus kita lakukan untuk mengetahui lebih dalam tentang Firebase ini adalah membuat akun baru untuk Firebase. Kalau ditanya kapan menggunakan Firebase? Firebase akan sangat cocok digunakan pada aplikasi yang dikembangkan untuk menampilkan data yang dikirim secara realtime, seperti chat, social todo list, dsb. Nah sebelum memulainya lebih jauh, yang kita butuhkan adalah memahami tentang Android Life Cycle, terkoneksi dengan internet, dan memahami pengetahuan dasar tentang Firabase dan juga mengetahui tentang Github atau repository sejenis. So, langsung kita coba saja…

Pertama yang harus kita lakukan adalah membuat akun baru untuk Firebase. atau bisa SignUp menggunakan Google Account yang sudah ada.


Registrasi Firebase and Say Hello!

Saya asumsikan Anda telah mendaftar kan akun di Firebase, lalu buat Aplikasi baru dengan nama yang Anda inginkan, atau bisa menggunakan app card my first app yang telah dibuatkan secara default oleh firebase. Di sini saya memberi nama firebase baru sesuai dengan www.wirasetiawan29.firebase.io. Url itu adalahh base url yang akan kita gunakan dalam aplikasi yang akan kita buat dalam sharing kali ini. Nah setelah kita masuk kedalam card app yang telah kita buat tadi, firebase akan menyediakan beberapa baris fitur Data, Security & Rules, Simulator, Analytic, Login & Auth, Hosting, Secrets.

Dalam Firebase, kita menggunakan code berikut untuk mengambil data dan mengirimkan data ke Firebase servicenya:

Langkah – langkah untuk mengkoneksikan aplikasi ke Firebase :

  1. Instal Firebase
    Tambahkan code dibawah ini pada file Gradlle App Project

    Firebase Gradle Settings
    Firebase Gradle Settings
  2. Menambahkan Permission pada aplikasi (AndroidManifest.xml)
    Buka file AndroidManifest.xml pada project aplikasi, dan tambahkan Internet accese permisson code dibawah ini:

    <uses-permission android:name="android.permission.INTERNET" />
    
  3. Mengatur firebase pada method onCreate
    Ini bertujuan untuk membuat inisialisasi Firebase pada project, agar Firebase dapat dikenali pada aplikasi, yaitu pada file MainActivity.java

    public class MainActivity extends AppCompatActivity {
    
        TextView fireData; //Untuk menampilkan data dari firebase
        Firebase ref; //Initialiasi Firebase untuk project
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            Firebase.setAndroidContext(this);
    
            fireData = (TextView) findViewById(R.id.firebase_textview);
            ref = new Firebase("https://wirasetiawan29.firebaseio.com/chat");
            ref.addValueEventListener(new ValueEventListener() {
                @Override
                public void onDataChange(DataSnapshot dataSnapshot) {
                    String superData = (String) dataSnapshot.getValue();
                    fireData.setText(superData);
                }
    
                @Override
                public void onCancelled(FirebaseError firebaseError) {
    
                }
            });
        }
    }
    
  4. Menampikan data value Firbase
    Buat TextView baru pada file activity_main.xml dengan id firebase_textview seperti berikut:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.logbook29.hellofirebase.MainActivity">
    
        <TextView android:id="@+id/firebase_textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" />
    </RelativeLayout>
    

Kapanpun kita ingin berinteraksi dengan data Firebase, pertama kali yang harus kita lakukan adalah membuat object dari Firebase itu sendiri. Oleh karena itu kita harus membuat object Firebase pada aplikasi seperti code dibawah ini:

Firebase ref = new Firebase("URL Firebasenya");

Nantinya code akan seperti dibawah ini:

Contoh Syntax Firebase
Contoh Syntax Firebase

Selanjutnya mari kita simulasikan pada aplikasi, bagaimana aplikasi dapat bekerja dalam implementasi menggunakan Firebase.

Hello Firebase Demo
Hello Firebase Demo

Well, dari penjelasan sederhana diatas, kita seharunya telah memahami bagaimana firebase bekerja, mulai dari aplikasi push data ke firebase, dan retrive data dari firebase, dan project diatas dapat didownload disini.

Firebase Table Json
Firebase Table Json

Yang nantinya dashborad firebase di visualisasikan dalam bentuk JSON tree, nah object firebase yang ada di Android project kita tadi lah yang menjadi representasi dari object JSON tree diatas.

Firebase Data Realtime Dashboard


 

Membuat aplikasi Android Chat sederhana dengan Firebase

Nah base on sharing diatas, mari kita lanjutkan pengembangan aplikasi menjadi aplikasi chatting sederhana. Yang pertama kali dilakukan adalah menambahkan support recycler view pada gradle project. Karena untuk menampilkan list chat kita menggunakan Recycler View. Selanjutnya buat model terlebih dahulu, model ini nantinya berfungsi untuk menentukan value apa saja yang akan di tampilkan  pada konten text messagenya. Disini saya mempunyai 5 model, antara lain:

  • name
  • message
  • userId
  • timestamp
  • formattedTime

Sehingga class modelnya menjadi seperti berikut:

Selanjutnya membuat body chat, dan chat list nya. Buat 1 Drawable resource file baru pada res/layout, beri nama text_message.xml dan tambahkan code dibawah ini kedalamnya:

Next membuat tampilan list chatnya menggunakan bantuan RecyclerView, dengan cara menambahkan syntax berikut pada file activity_main.xml.

Next, tambahkan 2 file ini pada folder drawable project Anda untuk melengkapi tampilan chat.

Terakhir, buat 2 class baru dengan nama FirebaseArray.java dan FirebaseRecyclerAdapter.java. Lalu tambahkan code dibawah ini pada masing-masing file tersebut:

Last, tambahkan code dibawah ini kedalam class MainActivity.java agar aplikasi siap untuk dijalankan.

Jika semuanya telah dilengkapi dan tidak ada error yang muncul, maka aplikasi sudah bisa dijalankan dan akan terlihat seperti simulasi dibawah ini. Pada simulasi dibawah ini saya menggunakan akun Budi dengan id 1 agar dapat berinteraksi dengan akun lainnya.

Firebase Chat Demo - Budi
Firebase Chat Demo – Budi

Dan pada simulasi dibawah ini saya menggunakan akun upin dengan id 2 yang dapat melihat chat yang ada di room yang sama, yaitu room chat.

Firebase Chat Demo - Upin
Firebase Chat Demo – Upin

Well mungkin cukup sekian pembahasan kita tentang Firebase, dan saya sangat yakin masih banyak kekurangan dari sharing kali ini. Karena namanya ilmu akan terus update dan dioptimasi, jadi jangan sungkan untuk berkomentar dan berbagi pengalamannya. Oya untuk source lengkapnya bisa di download disini.


Plus .. disarankan untuk mengikuti Video Firebase Esential dari Udacity itu, karena dapat membantu menjelaskan lebih detail tentang Firebase lengkap dengan simulasinya juga. Semoga sharing kali ini bermanfaat guys, fell free for question ya guys .. see you ..

5 thoughts on “Membuat Aplikasi Chat Sederhana dengan Firebase di Android

  1. ada erornya gan

    chatapps.firebase.com.chatapps.FirebaseRecyclerAdapter.onCreateViewHolder(FirebaseRecyclerAdapter.java:87)

    isinya

    Constructor constructor = mViewHolderClass.getConstructor(View.class);
    return constructor.newInstance(view);
    } catch (NoSuchMethodException e) {
    throw new RuntimeException(e);
    } catch (InvocationTargetException e) {
    throw new RuntimeException(e);
    } catch (InstantiationException e) {
    throw new RuntimeException(e);
    } catch (IllegalAccessException e) {
    throw new RuntimeException(e);
    }
    }

    tolong pencerahan gan

    Suka

  2. Coding program ga ada error cuma pas running program ada error :
    10-16 08:25:01.741 301-615/? E/NetlinkEvent: NetlinkEvent::FindParam(): Parameter ‘INTERFACE’ not found
    10-16 08:25:01.741 301-615/? E/NetlinkEvent: NetlinkEvent::FindParam(): Parameter ‘TIME_NS’ not found
    10-16 08:25:01.743 626-651/? E/NetdConnector: Error handling ‘613 IfaceClass active (null)’: java.lang.NumberFormatException: Invalid int: “(null)”

    bisa kasih pencerahan mas?
    Tks b4

    Suka

  3. wah terima kasih artikelnya. Lagi cari cara bikin aplikasi chat di android 😀
    btw, apakah database chat di firebase bisa dikirim ke database di server sendiri? Atau apakah firebase bisa hanya dijadikan sebagai perantara pengiriman pesan saja? sementara datanya tetap disimpan di database kita, di mysql misalnya.

    agak repot juga kalau ada dua database, satu di server sendiri, satu lagi di firebase nya 😀
    *maklum masih pra-newbie

    Suka

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s