Cara Membuat Aplikasi Chat Android Menggunakan Firebase

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Dengan Firebase, membuat aplikasi sosial real-time adalah semudah berjalan-jalan di taman. Dan hal terbaik tentang itu: Anda tidak perlu menulis satu baris kode sisi server.

Dalam tutorial ini, saya akan menunjukkan cara memanfaatkan Firebase UI untuk membuat aplikasi obrolan grup yang dapat Anda bagikan dengan teman Anda. Ini akan menjadi aplikasi yang sangat sederhana dengan hanya satu ruang obrolan, yang terbuka untuk semua pengguna.

Seperti dugaan Anda, aplikasi akan bergantung pada Firebase Auth untuk mengelola pendaftaran pengguna dan sign in. Ini juga akan menggunakan basis data real-time Firebase untuk menyimpan pesan obrolan grup.

Prasyarat

Untuk dapat mengikuti tutorial langkah-demi-langkah ini, Anda memerlukan yang berikut ini:

Versi terbaru Android Studio
Akun Firebase

Untuk petunjuk tentang cara menyiapkan akun Firebase dan bersiap untuk pengembangan Firebase di Android Studio, lihat tutorial saya Memulai dengan Firebase untuk Android di sini di Envato Tuts+.

Android SDK

Memulai dengan Firebase untuk Android

Ashraff Hathibelagal

1. Buatlah Sebuah Proyek Android Studio

Jalankan Android Studio dan buat proyek baru dengan activity kosong yang disebut MainActivity.

Tambahkan activity kosongUntuk mengkonfigurasi proyek untuk menggunakan platform Firebase, buka jendela Firebase Assistant dengan mengklik Tools > Firebase.

Saat menggunakan platform Firebase, biasanya sebaiknya tambahkan Firebase Analytics ke proyeknya. Oleh karena itu, di dalam jendela Asisten Firebase, buka bagian Analytics dan tekan Log an Analytics event.

Selanjutnya, tekan tombol Connect to Firebase dan pastikan opsi Create new Firebase project dipilih. Setelah sambungan dibuat, tekan tombol Add Analytics to your app.

Tekan Add analytics ke aplikasi AndaPada titik ini, proyek Android Studio tidak hanya terintegrasi dengan Firebase Analytics, namun juga siap untuk menggunakan semua layanan Firebase lainnya.

2. Tambahkan Dependensi

Kita akan menggunakan dua perpustakaan dalam proyek ini: Firebase UI, dan perpustakaan dukungan desain Android. Oleh karena itu, buka file build.gradle dari modul app dan tambahkan dependensi compile berikut ini:

1	compile 'com.android.support:design:23.4.0'
2	compile 'com.firebaseui:firebase-ui:0.6.0'

Tekan tombol Sync Now untuk memperbarui proyek.

3. Menentukan Layout

File activity_main.xml, yang sudah terikat pada MainActivity, mendefinisikan isi layar awal aplikasi. Dengan kata lain, itu akan mewakili ruang obrolan.

Seperti kebanyakan aplikasi obrolan grup lainnya yang tersedia saat ini, aplikasi kita akan memiliki elemen UI berikut:

Sebuah daftar yang menampilkan semua pesan obrolan grup dalam urutan kronologis
Field masukan dimana pengguna dapat mengetikkan pesan baru
Tombol yang bisa ditekan pengguna untuk mengirim pesannya

Oleh karena itu, activity_main.xml harus memiliki ListView, EditText, dan FloatingActionButton. Setelah menempatkan semuanya di dalam widget RelativeLayout, XML layout Anda akan terlihat seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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.tutsplus.mychatapp.MainActivity">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:src="@drawable/ic_send_black_24dp"
        android:id="@+id/fab"
        android:tint="@android:color/white"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        app:fabSize="mini" />

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/fab"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Input"
            android:id="@+id/input"
            />
    </android.support.design.widget.TextInputLayout>

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:layout_above="@id/fab"
        android:dividerHeight="16dp"
        android:divider="@android:color/transparent"
        android:id="@+id/list_of_messages"
        android:layout_marginBottom="16dp"/>
</RelativeLayout>

Perhatikan bahwa saya telah menempatkan widget EditText di dalam widget TextInputLayout. Melakukannya menambahkan label mengambang ke EditText, yang penting jika Anda ingin mematuhi pedoman material design.

Setelah layout layar beranda sudah siap, kita dapat beralih ke pembuatan layout untuk pesan obrolan, yang akan menjadi item di dalam ListView. Mulailah dengan membuat file XML layout baru yang disebut message.xml, yang elemen root-nya adalah RelativeLayout.

Layout-nya harus memiliki widget TextView untuk menampilkan teks pesan obrolan, waktu pengirimannya, dan pengarangnya. Anda bebas menempatkannya dalam urutan apapun. Inilah layout yang akan saya gunakan:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:id="@+id/message_user"
        android:textStyle="normal|bold" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/message_user"
        android:layout_alignParentEnd="true"
        android:id="@+id/message_time" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/message_user"
        android:layout_alignParentStart="true"
        android:layout_marginTop="5dp"
        android:id="@+id/message_text"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textSize="18sp" />
</RelativeLayout>

4. Menangani Otentikasi Pengguna

Mengizinkan pengguna untuk secara anonim mengeposkan pesan ke ruang obrolan akan menjadi ide yang sangat buruk. Hal ini dapat menyebabkan spam, masalah keamanan, dan pengalaman obrolan yang kurang ideal bagi pengguna. Karena itu, mari kita konfigurasikan aplikasi kita sehingga hanya pengguna terdaftar yang bisa membaca dan memposting pesan.

Mulailah dengan membuka bagian Auth dari Konsol Firebase dan mengaktifkan Email/Password sebagai penyedia sign-in.

Jangan ragu untuk mengaktifkan penyedia sign-in OAuth 2.0 juga. Namun, FirebaseUI v0.6.0 mendukung Google Sign-In dan Facebook Login dengan mudah.

Langkah 1: Menangani Sign-In Pengguna

Segera setelah aplikasi dijalankan, aplikasi harus memeriksa apakah pengguna sudah sign-in. Jika demikian, aplikasi harus terus maju dan menampilkan isi ruang obrolan. Jika tidak, ia harus mengalihkan pengguna ke sign-in, atau layar pendaftaran. Dengan FirebaseUI, membuat layar tersebut membutuhkan kode yang jauh lebih sedikit daripada yang Anda bayangkan.

Di dalam metode onCreate() dari MainActivity, periksa apakah pengguna sudah sign-in dengan memeriksa apakah objek FirebaseUser saat ini bukan null. Jika null, Anda harus membuat dan mengkonfigurasi objek Intent yang membuka aktivitas sign-in. Untuk melakukannya, gunakan kelas SignInIntentBuilder. Setelah intent siap, Anda harus meluncurkan aktivitas sign-in menggunakan metode startActivityForResult().

Perhatikan bahwa aktivitas sign-in juga memungkinkan pengguna baru mendaftar. Oleh karena itu, Anda tidak memiliki kode tambahan untuk menangani pendaftaran pengguna.

Tambahkan kode berikut ke metode onCreate():

if(FirebaseAuth.getInstance().getCurrentUser() == null) {
    // Start sign in/sign up activity
    startActivityForResult(
            AuthUI.getInstance()
            .createSignInIntentBuilder()
            .build(),
            SIGN_IN_REQUEST_CODE
    );
} else {
    // User is already signed in. Therefore, display
    // a welcome Toast
    Toast.makeText(this,
            "Welcome " + FirebaseAuth.getInstance()
                    .getCurrentUser()
                    .getDisplayName(),
            Toast.LENGTH_LONG)
            .show();

    // Load chat room contents
    displayChatMessages();
}

Seperti yang dapat Anda lihat dalam kode di atas, jika pengguna sudah sign-in, pertama-tama kita menampilkan Toast untuk menyambut pengguna, lalu memanggil metode bernama displayChatMessages. Untuk saat ini, buat saja stub untuk itu. Kita akan menambahkan kode untuknya nanti.

1	private void displayChatMessages() {
2
3	}

Begitu pengguna sign-in, MainActivity akan menerima hasilnya dalam bentuk Intent. Untuk mengatasinya, Anda harus menimpa metode onActivityResult().

Jika hasil kodenya adalah RESULT_OK, itu berarti pengguna telah sign-in dengan sukses. Jika demikian, Anda harus memanggil metode displayChatMessages() lagi. Jika tidak, panggil finish() untuk menutup aplikasi.

@Override
protected void onActivityResult(int requestCode, int resultCode, 
                                            Intent data) {
    super.onActivityResult(requestCode, resultCode, data);

    if(requestCode == SIGN_IN_REQUEST_CODE) {
        if(resultCode == RESULT_OK) {
            Toast.makeText(this,
                    "Successfully signed in. Welcome!",
                    Toast.LENGTH_LONG)
                    .show();
            displayChatMessages();
        } else {
            Toast.makeText(this,
                    "We couldn't sign you in. Please try again later.",
                    Toast.LENGTH_LONG)
                    .show();

            // Close the app
            finish();
        }
    }

}

Pada tahap ini, Anda dapat menjalankan aplikasi dan melihat layar sign-in dan pendaftaran.

Langkah 2: Menangani Sign-Out Pengguna

Secara default, FirebaseUI menggunakan Smart Lock for Passwords. Oleh karena itu, setelah pengguna sign in, mereka akan tetap sign in meskipun aplikasi dimulai ulang. Agar pengguna dapat sign out, sekarang kita akan menambahkan opsi sign-out ke menu overflow dari MainActivity.

Buat file sumber menu baru yang disebut main_menu.xml dan tambahkan satu item ke padanya, atribut title-nya disetel ke Sign out. Isi file akan terlihat seperti ini:

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

    <item android:title="Sign out" app:showAsAction="never"
        android:id="@+id/menu_sign_out"/>

</menu>

Untuk instansiasi sumber menu di dalam MainActivity, timpa metode onCreateOptionsMenu() dan panggil metode inflate() dari objek MenuInflater.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main_menu, menu);
    return true;
}

Selanjutnya, timpa metode onOptionsItemSelected() untuk menangani event klik pada item menu. Di dalam metode ini, Anda dapat memanggil metode signOut() dari kelas AuthUI untuk sign out pengguna. Karena operasi sign-out dilakukan secara asinkron, kita juga akan menambahkan OnCompleteListener ke dalamnya.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if(item.getItemId() == R.id.menu_sign_out) {
        AuthUI.getInstance().signOut(this)
            .addOnCompleteListener(new OnCompleteListener<Void>() {
                @Override
                public void onComplete(@NonNull Task<Void> task) {
                    Toast.makeText(MainActivity.this,
                            "You have been signed out.",
                            Toast.LENGTH_LONG)
                            .show();

                    // Close activity
                    finish();
                }
            });
    }
    return true;
}

Setelah pengguna sign out, aplikasi harus ditutup secara otomatis. Itulah alasan mengapa Anda melihat panggilan ke metode finish() pada kode di atas.

5. Membuat Model

Untuk menyimpan pesan obrolan di database real-time Firebase, Anda harus membuat model untuk mereka. Layout pesan obrolan, yang telah kita buat sebelumnya dalam tutorial ini, memiliki tiga view. Untuk dapat mengisi view-view tersebut, model juga harus memiliki setidaknya tiga field.

Buat kelas Java baru yang disebut ChatMessage.java dan tambahkan tiga variabel anggota ke dalamnya: messageText, messageUser, and messageTime. Juga tambahkan constructor untuk menginisialisasi variabel-variabel tersebut.

Untuk membuat model yang kompatibel dengan FirebaseUI, Anda juga harus menambahkan constructor default ke dalamnya, bersama dengan getter dan setter untuk semua variabel anggota.

Pada titik ini, kelas ChatMessage akan terlihat seperti ini:

public class ChatMessage {

    private String messageText;
    private String messageUser;
    private long messageTime;

    public ChatMessage(String messageText, String messageUser) {
        this.messageText = messageText;
        this.messageUser = messageUser;

        // Initialize to current time
        messageTime = new Date().getTime();
    }

    public ChatMessage(){

    }

    public String getMessageText() {
        return messageText;
    }

    public void setMessageText(String messageText) {
        this.messageText = messageText;
    }

    public String getMessageUser() {
        return messageUser;
    }

    public void setMessageUser(String messageUser) {
        this.messageUser = messageUser;
    }

    public long getMessageTime() {
        return messageTime;
    }

    public void setMessageTime(long messageTime) {
        this.messageTime = messageTime;
    }
}

6. Memposting Pesan Obrolan

Setelah modelnya siap, kita dapat dengan mudah menambahkan pesan obrolan baru ke database real-time Firebase.

Untuk mengirim pesan baru, pengguna akan menekan tombol FloatingActionButton. Karena itu, Anda harus menambahkan OnClickListener untuknya.

Di dalam listener, Anda harus terlebih dahulu mendapatkan objek DatabaseReference menggunakan metode getReference() dari kelas FirebaseDatabase. Anda kemudian dapat memanggil metode push() dan setValue() untuk menambahkan instance baru dari kelas ChatMessage ke database real-time.

Instances ChatMessage harus, tentu saja, diinisialisasi dengan menggunakan konten EditText dan nama tampilan pengguna yang saat ini sign in.

Dengan demikian, tambahkan kode berikut ke metode onCreate():

FloatingActionButton fab = 
        (FloatingActionButton)findViewById(R.id.fab);

fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        EditText input = (EditText)findViewById(R.id.input);

        // Read the input field and push a new instance
        // of ChatMessage to the Firebase database
        FirebaseDatabase.getInstance()
                .getReference()
                .push()
                .setValue(new ChatMessage(input.getText().toString(),
                        FirebaseAuth.getInstance()
                                .getCurrentUser()
                                .getDisplayName())
                );

        // Clear the input
        input.setText("");
    }
});

Data dalam database real-time Firebase selalu disimpan sebagai pasangan kunci-nilai. Namun, jika Anda mengamati kode di atas, Anda akan melihat bahwa kita memanggil setValue() tanpa menentukan kunci apa pun. Itu hanya diperbolehkan karena panggilan ke metode setValue() didahului dengan panggilan ke metode push(), yang secara otomatis menghasilkan kunci baru.

7. Menampilkan Pesan Obrolan

FirebaseUI memiliki kelas yang sangat berguna yang disebut FirebaseListAdapter, yang secara dramatis mengurangi upaya yang dibutuhkan untuk mengisi ListView menggunakan data yang ada di database real-time Firebase. Kita akan menggunakannya sekarang untuk mengambil dan menampilkan semua objek ChatMessage yang ada dalam database.

Tambahkan objek FirebaseListAdapter sebagai variabel anggota baru dari kelas MainActivity.

1	private FirebaseListAdapter<ChatMessage> adapter;

Di dalam metode displayChatMessages(), menginisialisasi adaptor menggunakan constructor-nya, yang mengharapkan argumen berikut:

Referensi ke Activity
class dari objek yang Anda minati
Layout dari item-item daftar
Objek DatabaseReference

FirebaseListAdapter adalah kelas abstrak dan memiliki metode abstrak populateView(), yang harus ditimpa.

Seperti namanya, populateView() digunakan untuk mengisi view setiap item daftar. Jika Anda terbiasa dengan kelas ArrayAdapter, Anda bisa memikirkan populateView() sebagai alternatif metode getView().

Di dalam metode ini, Anda harus terlebih dahulu menggunakan findViewById() untuk mendapatkan referensi ke setiap TextView yang ada di file layout message.xml. Anda kemudian dapat memanggil metode setText() mereka dan mengisi mereka menggunakan getter dari kelas ChatMessage.

Pada titik ini, konten metode displayChatMessages() seharusnya seperti ini:

ListView listOfMessages = (ListView)findViewById(R.id.list_of_messages);

adapter = new FirebaseListAdapter<ChatMessage>(this, ChatMessage.class,
        R.layout.message, FirebaseDatabase.getInstance().getReference()) {
    @Override
    protected void populateView(View v, ChatMessage model, int position) {
        // Get references to the views of message.xml
        TextView messageText = (TextView)v.findViewById(R.id.message_text);
        TextView messageUser = (TextView)v.findViewById(R.id.message_user);
        TextView messageTime = (TextView)v.findViewById(R.id.message_time);

        // Set their text
        messageText.setText(model.getMessageText());
        messageUser.setText(model.getMessageUser());

        // Format the date before showing it
        messageTime.setText(DateFormat.format("dd-MM-yyyy (HH:mm:ss)",
                model.getMessageTime()));
    }
};

listOfMessages.setAdapter(adapter);

Aplikasi obrolan grup sudah siap. Jalankan dan posting pesan baru untuk melihat mereka muncul segera di ListView. Jika Anda berbagi aplikasi dengan teman Anda, Anda juga akan bisa melihat pesan mereka begitu mereka mengeposkannya.

Kesimpulan

Dalam tutorial ini, Anda belajar menggunakan Firebase dan FirebaseUI untuk membuat aplikasi obrolan grup yang sangat sederhana. Anda juga melihat betapa mudahnya bekerja dengan kelas yang tersedia di FirebaseUI untuk dengan segera membuat layar baru dan menerapkan fungsionalitas yang rumit.

Untuk mempelajari lebih lanjut tentang Firebase dan FirebaseUI, lihat dokumentasi resminya. Atau lihat beberapa tutorial Firebase kami yang lain di sini di Envato Tuts+!

1	public class ChatMessage {
2
3	private String messageText;
4	private String messageUser;
5	private long messageTime;
6
7	public ChatMessage(String messageText, String messageUser) {
8	this.messageText = messageText;
9	this.messageUser = messageUser;
10
11	// Initialize to current time
12	messageTime = new Date().getTime();
13	}
14
15	public ChatMessage(){
16
17	}
18
19	public String getMessageText() {
20	return messageText;
21	}
22
23	public void setMessageText(String messageText) {
24	this.messageText = messageText;
25	}
26
27	public String getMessageUser() {
28	return messageUser;
29	}
30
31	public void setMessageUser(String messageUser) {
32	this.messageUser = messageUser;
33	}
34
35	public long getMessageTime() {
36	return messageTime;
37	}
38
39	public void setMessageTime(long messageTime) {
40	this.messageTime = messageTime;
41	}
42	}