GULANGGULING.COM

Cara Membuat Push Notifikasi di Android dengan Firebase Cloud Messaging

Ardhitya Wiedha Irawan

Artikel ini merupakan lanjutan dari artikel Mengenal Push Notifikasi di Android dengan Firebase Cloud Messaging, saya sarankan anda membaca artikel tersebut sebelum meneruskan membaca artikel ini.

***

GULANGGULING.COM | ANDRIOD – Melanjutkan artikel sebelumnya, kali kita akan meng-custom aplikasi tersebut sehingga memiliki fungsi registrasi/mendaftarkan user Android ke server (php + mysql).

Langsung saja ya, jika Anda sudah membaca artikel sebelumnya, maka kita masih akan menggunakan file project yang sama. Namun kali ini saya akan mengganti nama package-nya dari com.google.firebase.quickstart.fcm menjadi com.google.firebase.custom.fcm. Silakan ganti terlebih dahulu nama tersebut, cara untuk mengganti nama package Android dapat dibaca pada artikel ini :  Cara Rename Project di Android Studio (Refactor) 

Setelah berhasil melakukan refactor project, selanjutnya mendaftarkan name package ke Firebase Console, silakan masuk ke firebase kemudian add app dan masukan nama package untuk mendownload file google-services.json (lihat gambar). Letakan file tersebut di dalam folder /app project, lalu lakukan sync atau build pada Android Studio.

Firebase Cloud Messaging Add Project Push Notifications

Selanjutnya kita akan menambahkan perubahan pada project tersebut. Pertama-tama yang akan kita buat adalah sebuah class Constant, isi dari file tersebut adalah untuk menyimpan alamat server.

package com.google.firebase.custom.fcm;
public class Constants {
    //register.php address in your server
    public static final String REGISTER_URL = "http://yourdomain.com/fcm_server/register.php";
}

Selanjutnya kita buat file class activity bernama RegisterActivity.java. Pada class ini kita akan menambahkan fungsi untuk mengirimkan parameter berupa token dan input email dari user ke server php.

Important Noted : Dalam class ini saya menggunakan library Volley untuk proses kirim data ke server.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:24.0.0'
    compile 'com.google.firebase:firebase-messaging:9.4.0'
    compile 'com.mcxiaoke.volley:library:1.0.19'
}
package com.google.firebase.custom.fcm;

import android.app.ProgressDialog;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import com.android.volley.AuthFailureError;
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.android.volley.toolbox.Volley;
import com.google.firebase.iid.FirebaseInstanceId;

import java.util.HashMap;
import java.util.Map;

public class RegisterActivity extends AppCompatActivity {
    private EditText editTextEmail;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.register_layout);
        Button regBtn = (Button) findViewById(R.id.buttonRegister);
        editTextEmail = (EditText) findViewById(R.id.editTextEmail);
        regBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                // Get token
                String token = FirebaseInstanceId.getInstance().getToken();
                //Finally we need to implement a method to store this unique id to our server
                sendIdToServer(token);
            }
        });
    }

    private void sendIdToServer(final String token) {
        //Creating a progress dialog to show while it is storing the data on server
        final ProgressDialog progressDialog = new ProgressDialog(this);
        progressDialog.setMessage("Registering device...");
        progressDialog.show();

        //getting the email entered
        final String email = editTextEmail.getText().toString().trim();

        //Creating a string request
        StringRequest req = new StringRequest(Request.Method.POST, Constants.REGISTER_URL,
                new Response.Listener<String>() {
                    @Override
                    public void onResponse(String response) {
                        //dismissing the progress dialog
                        progressDialog.dismiss();
                        //if the server returned the string success
                        if (response.trim().equalsIgnoreCase("success")) {
                            //Displaying a success toast
                            Toast.makeText(RegisterActivity.this, "Registered successfully", Toast.LENGTH_SHORT).show();

                        } else {
                            Toast.makeText(RegisterActivity.this, "Choose a different email", Toast.LENGTH_SHORT).show();
                        }
                    }
                },
                new Response.ErrorListener() {
                    @Override
                    public void onErrorResponse(VolleyError error) {

                    }
                }) {
            @Override
            protected Map<String, String> getParams() throws AuthFailureError {
                Map<String, String> params = new HashMap<>();
                //adding parameters to post request as we need to send firebase id and email
                params.put("token", token);
                params.put("email", email);
                return params;
            }
        };

        //Adding the request to the queue
        RequestQueue requestQueue = Volley.newRequestQueue(this);
        requestQueue.add(req);
    }

}

Selanjutnya kita buat file layout untuk class diatas. Layout ini kita beri nama register_layout.xml . Pada layout ini kita tambahkan input berupa email dan tombol register untuk aksi mengirim data ke server.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/firebase_lockup_400" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:ems="10"
        android:layout_marginTop="40dp"
        android:hint="enter email"
        android:id="@+id/editTextEmail"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAllCaps="false"
        android:text="Register"
        android:id="@+id/buttonRegister"
        android:layout_below="@+id/editTextEmail"
        android:layout_centerHorizontal="true" />

</LinearLayout>

Setelah membuat kedua file diatas, selanjutnya mendaftarkan RegisterActivity ke Manifest.xml dan jadikan file tersebut menjadi main intent.

<activity
	android:name="com.google.firebase.custom.fcm.RegisterActivity"
	android:label="@string/app_name">
	<intent-filter>
	    <action android:name="android.intent.action.MAIN"/>
	    <category android:name="android.intent.category.LAUNCHER"/>
	</intent-filter>
</activity>

Setelah semua langkah diatas dilakukan, selanjutnya silakan build project. Pastikan tidak ada error yang muncul disana. Jika masih ada error maka silakan diperbaiki, error yang muncul biasanya soal library.

Aplikasi Android Register FCM

Sampai disini kita sudah membuat custom dari project push notifikasi dengan firebase cloud messaging. Jika semua sudah tak ada error, maka kita sudah bisa menjalankannya. Silakan run di emulator atau pada device, Jangan buru-buru untuk mencoba aplikasi ini, fungsi register belum bisa berjalan karena kita belum membuat server side (php) untuk penyimpanan data tersebut ke database (mysql).

Server Side (PHP + MYSQL)

Selanjutnya kita akan membuat database dan file server (php) untuk menerima proses register dari aplikasi Android. Pertama-tama buat database -nya.

CREATE DATABASE /*!32312 IF NOT EXISTS*/`fcm` /*!40100 DEFAULT CHARACTER SET latin1 */;
/*Table structure for table `users` */
DROP TABLE IF EXISTS `users`;

CREATE TABLE `users` (
  `id` int(20) NOT NULL AUTO_INCREMENT,
  `token` varchar(200) NOT NULL,
  `email` varchar(200) DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `Token` (`token`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;

Setelah membuat databasenya, selanjutnya membuat file php untuk menerima kiriman data dari aplikasi Android. File ini bernama register.php :

<?php 
	if (isset($_POST["token"])) {
		   $_token=$_POST["token"];
		   $_email=$_POST["email"];
		   $conn = mysqli_connect("localhost","root","","fcm") or die("Error connecting");
		   $sql="INSERT INTO users (token,email) VALUES ( '$_token','$_email') ON DUPLICATE KEY UPDATE token = '$_token';";
           
	
	//executing the query to the database 
	if(mysqli_query($conn,$sql)){
		echo 'success';
	}else{
		echo 'failure';
	}
      mysqli_close($conn);

	}


 ?>
Form Register untuk FCM

Sampai langkah ini kita sudah berhasil membuat aplikasi Android yang memiliki fungsi penyimpanan data token Firebase ke server (php+MySql). Selanjutnya, saya akan menjelaskan tentang bagaimana cara mengirimkan push notifikasi Android dengan php, tentunya bersambung ke artikel lainnya disini : Cara Mengirim Push Notifikasi ke Android dengan PHP 

Download Source Code