FIREBASE CHAT APP PART 2

Farah Clarashinta Rachmady

FARAHCLARA.ID | hi@farahclara.id
Dalam tutorial ini, saya akan menunjukkan cara untuk memanfaatkan UI
Firebase untuk membuat Group aplikasi chat Anda dapat berbagi dengan
teman-teman Anda. Ini akan menjadi aplikasi yang sangat sederhana
dengan hanya satu chat room, yang terbuka untuk semua pengguna.

Seperti sudah bisa anda duga, aplikasi akan tergantung pada Firebase
Auth untuk mengelola pendaftaran pengguna dan masuk. Ini juga akan
menggunakan database real-time Firebase untuk menyimpan pesan grup
chat.

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

The versi terbaru dari Android Studio

Sebuah akun Firebase

1. Buat Project Android Studio

Jalankan Android Studio dan membuat proyek baru dengan kegiatan yang
kosong disebut MainActivity .
Untuk mengkonfigurasi proyek untuk menggunakan platform Firebase,
membuka jendela Firebase Assistant dengan mengklik Peralatan>
Firebase .

Sementara menggunakan platform Firebase, biasanya ide yang baik untuk

menambahkan Firebase Analytics untuk proyek. Oleh karena itu, di dalam
jendela Firebase Assistant, pergi ke Analytics bagian dan tekan Masuk
acara Analytics .

Berikutnya, tekan Connect untuk Firebase tombol dan memastikan

bahwa Buat proyek Firebase baru opsi yang dipilih. Setelah sambungan
dibuat, tekan Tambah Analytics untuk aplikasi Anda.
Pada titik ini, proyek Android Studio tidak hanya terintegrasi dengan
Firebase Analytics, juga siap untuk menggunakan semua layanan Firebase
lainnya.

2. Tambahkan Dependensi
buka build.gradle file dari app modul dan tambahkan
berikut compile dependensi untuk itu:

1 compile 'com.android.support:design:23.4.0'
2 compile 'com.firebaseui:firebase-ui:0.6.0'
Tekan Sync Sekarang tombol untuk memperbarui proyek.
3. Tentukan Layouts
The activity_main.xml file, yang sudah terikat MainActivity ,
mendefinisikan isi dari layar awal aplikasi. Dengan kata lain, itu akan
mewakili chat room.

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

Sebuah daftar yang menampilkan semua pesan grup obrolan dalam

urutan kronologis
Field input dimana pengguna dapat mengetikkan pesan baru
Sebuah tombol pengguna dapat menekan untuk mengirim pesan

Oleh karena itu, activity_main.xml harus memiliki ListView ,

sebuah EditText , dan FloatingActionButton . Setelah menempatkan
mereka semua di dalam RelativeLayout widget, tata letak Anda XML akan
terlihat seperti ini:

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

<RelativeLayout 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: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="id.farahclara.firebasechatapp.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 EditText widget di

dalam TextInputLayout widget. Melakukan hal menambahkan label
mengambang ke EditText , yang penting jika Anda ingin mematuhi
pedoman desain material.

Sekarang bahwa tata letak layar awal sudah siap, kita bisa beralih ke
membuat tata letak untuk pesan chat, yang akan menjadi item
dalam ListView . Mulai dengan membuat file layout XML baru yang
disebutmessage.xml , yang unsur akar RelativeLayout .

Tata letak harus memiliki TextView widget untuk menampilkan teks chat
pesan, waktu itu dikirim, dan penulisnya. Anda bebas untuk menempatkan
mereka dalam urutan apapun. Berikut tata letak saya akan menggunakan:

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

<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. Handle Pengguna Otentikasi

Memungkinkan pengguna untuk secara anonim mengirim pesan ke chat
room akan menjadi ide yang sangat buruk. Ini bisa menyebabkan spam,
masalah keamanan, dan kurang dari pengalaman mengobrol ideal untuk
pengguna. Oleh karena itu, mari kita sekarang mengkonfigurasi aplikasi
kita sehingga hanya pengguna terdaftar dapat membaca dan posting
pesan.

Mulailah dengan pergi ke Auth bagian dari Console Firebase dan

memungkinkan Email / Password sebagai penyedia sign-in.
Langkah 1: Menangani Pengguna Sign-In
Begitu aplikasi dimulai, harus memeriksa apakah pengguna masuk.
Jika demikian, aplikasi harus pergi ke depan dan menampilkan isi dari chat
room. Jika tidak, itu harus mengarahkan pengguna ke salah satu layar
masuk, atau layar sign-up. Dengan FirebaseUI, menciptakan layar yang
membutuhkan kode jauh lebih sedikit daripada yang Anda bayangkan.

Di dalam onCreate() metode MainActivity , memeriksa apakah

pengguna sudah masuk dengan memeriksa jika saat FirebaseUser objek
tidak null . Jika null , Anda harus membuat dan
mengkonfigurasi Intent objek yang membuka kegiatan masuk. Untuk
melakukannya, gunakan SignInIntentBuilder kelas. Setelah maksud siap,
Anda harus memulai aktivitas masuk
menggunakan startActivityForResult() metode.

Perhatikan bahwa aktivitas masuk juga memungkinkan pengguna

baru untuk mendaftar. Oleh karena itu, Anda tidak memiliki menulis kode
tambahan untuk menangani pendaftaran pengguna.

Tambahkan kode berikut untuk onCreate() metode:

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();

displayChatMessages();
}

Seperti yang Anda lihat dalam kode di atas, jika pengguna sudah masuk,
pertama kita menampilkan Toast menyambut pengguna, dan kemudian
memanggil metode bernama displayChatMessages . Untuk saat ini, hanya
membuat tulisan rintisan untuk itu. Kita akan menambahkan kode untuk
nanti.
private void displayChatMessages() {

Setelah pengguna telah masuk, MainActivity akan menerima dalam

bentuk Intent . Untuk mengatasinya, Anda harus
menimpa onActivityResult() metode.

Jika kode hasil adalah RESULT_OK , itu berarti pengguna telah masuk
berhasil. Jika demikian, Anda harus
memanggil displayChatMessages() metode lagi. Jika tidak,
panggilan 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();
finish();
}
}
}
Pada titik ini, Anda dapat menjalankan aplikasi dan melihat pada tanda-in
dan sign-up layar.
Langkah 2: Menangani Pengguna Sign-Out
Secara default, FirebaseUI menggunakan Smart Lock untuk
Sandi . Karena itu, setelah pengguna masuk, mereka akan tetap masuk
bahkan jika aplikasi di-restart. Untuk memungkinkan pengguna untuk
keluar, sekarang kita akan menambahkan opsi tanda-keluar ke menu
luapan MainActivity .

Buat file sumber daya menu baru bernama main_menu.xml dan

menambahkan satu item untuk itu, yang title atribut diatur
untuk Keluar . Isi file tersebut akan terlihat seperti ini:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<item android:title="Sign out" app:showAsAction="never"

android:id="@+id/menu_sign_out"/>
</menu>

Instantiate sumber daya menu di dalam MainActivity ,

menimpa onCreateOptionsMenu() metode dan memanggil inflate() metode
dari MenuInflater objek.

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

Berikutnya, menimpa onOptionsItemSelected() metode untuk menangani

klik peristiwa pada item menu. Di dalam metode ini, Anda dapat
memanggil signOut() metode dari AuthUI kelas untuk pengguna
keluar. Karena operasi tanda-out dijalankan asynchronously, kami juga akan
menambahkan OnCompleteListener untuk itu.

@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 telah keluar, aplikasi harus menutup secara
otomatis. Itulah alasan mengapa Anda melihat panggilan
ke finish() metode dalam kode di atas.
5. Buat Model
Untuk menyimpan pesan chat di Firebase basis data real-time, Anda harus
membuat model untuk mereka. Tata letak pesan chat, yang kami buat
sebelumnya dalam tutorial ini, memiliki tiga pandangan. Untuk dapat
mengisi pandangan tersebut, model juga harus memiliki setidaknya tiga
bidang.

Buat kelas Java baru yang disebut ChatMessage.java dan menambahkan

tiga variabel anggota untuk itu: messageText , messageUser ,
dan messageTime . Juga menambahkan konstruktor untuk menginisialisasi
variabel tersebut.

Untuk membuat model kompatibel dengan FirebaseUI, Anda juga harus

menambahkan konstruktor default untuk itu, bersama dengan getter dan
setter untuk semua variabel anggota.

Pada titik ini, ChatMessage kelas akan terlihat seperti ini:

package id.farahclara.firebasechatapp;

import java.util.Date;

/**
* Created by farah on 21/03/2017.
*/

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. Post a Chat Message

Sekarang model siap, kita dapat dengan mudah menambahkan pesan chat
baru ke Firebase basis data real-time.

Untuk mengeposkan pesan baru, pengguna akan

menekan FloatingActionButton . Oleh karena itu, Anda harus
menambahkan OnClickListener untuk itu.

Di dalam pendengar, Anda harus terlebih dahulu

mendapatkan DatabaseReference objek
menggunakan getReference() metode dari FirebaseDatabase kelas. Anda
kemudian dapat memanggil push() dan setValue() metode untuk
menambahkan contoh baru dari ChatMessage kelas ke database real-time.

The ChatMessage contoh harus, tentu saja, diinisialisasi menggunakan

isi EditText dan nama tampilan saat masuk pengguna.

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

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("");
}
});

7. Display the Chat Messages

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

Tambahkan FirebaseListAdapter objek sebagai variabel anggota baru

dari MainActivity

public class MainActivity extends AppCompatActivity {

private static final int SIGN_IN_REQUEST_CODE = 1;

private FirebaseListAdapter<ChatMessage> adapter;

Di dalam displayChatMessages() metode, menginisialisasi adaptor

menggunakan konstruktor, yang mengharapkan argumen berikut:

Sebuah referensi ke Activity

The class objek Anda tertarik
Tata letak daftar item
Sebuah DatabaseReference objek
FirebaseListAdapter adalah kelas abstrak dan memiliki
abstrak populateView() metode, yang harus diganti.

Seperti namanya, populateView() digunakan untuk mengisi pandangan

masing-masing item daftar. Jika Anda sudah familiar
dengan ArrayAdapter kelas, Anda bisa memikirkan populateView() sebagai
alternatif untuk getView() metode.

Di dalam metode ini, Anda harus terlebih dahulu

menggunakan findViewById() untuk mendapatkan referensi untuk
setiap TextView yang hadir dalam message.xml file layout. Anda
kemudian dapat memanggil mereka setText() metode dan mengisi
mereka menggunakan getter dari ChatMessage kelas.

Pada titik ini, isi dari displayChatMessages() metode harus seperti ini:

private void displayChatMessages() {

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());
messageTime.setText(DateFormat.format("dd-MM-yyyy (HH:mm:ss)",
model.getMessageTime()));
}
};

listOfMessages.setAdapter(adapter);