Tutorial Create, Read, Update & Delete pada Database Firebase Android Studio

 
Firebase sebagai salah satu MBaaS (Mobile Backend as a Service) mengalami perubahan besar-besaran pada May 2016, dengan versi terakhirnya dinamakan Firebase 3.0. Dibandingkan sebelumnya yang mana fungsi Firebase terbatas pada authentication service dan real-time database saja, kali ini Firebase memiliki hampir seluruh fungsi yang dibutuhkan sebagai backend service dari Mobile Application.


Pada kesempatan kali ini, saya akan memberikan tutorial CRUD (Create, Read, Update dan Delete) pada Aplikasi Android dengan Database Firebase, tutorial ini mulai dari pembuatan database sampai dengan Pembuatan Aplikasi.
Persiapan yang diperlukan :

• Database Firebase
• Android Studio

Langsung saja Ikuti langkah-langkah dibawah ini :

1. Buat Project Android terlebih dahulu di Android Studio, beri nama terserah sobat, kemudian biarkan terbuka seperti itu.

2.  Buka situs resmi Firebase https://firebase.google.com/

3. Pilih GET STARTED

4. Bila Sobat blm buat project sebelumnya, pilih "Add project"

5. Sekarang menambahkan Aplikasi Android kedalam Firebird, kita harus mendaftarkan aplikasi kita terlebih dahulu, pilih menu "+ Add app"

6. Pilih Platform sobat, karena kita menggunakan android, maka pilih android platform

 





7. Pada Register app, masukkan package dari Aplikasi sobat serta nama aplikasi yang dibuat, kemudian pilih "Register app"

8. Selanjutnya kita disuruh untuk mengunduh "google-services.json", unduh kemudian copy ke "nama_project/app/(paste disini)"

9. Sekarang Tambahkan SDK Firebase pada "Gradle Script" di Android Studio, tambahkan code pada gambar di  :

• build.gradle (Project)
• build.gradle (Modul:app)

Kemudian "Sync" untuk menyelaraskan project agar terkoneksi dengan Firebase



10.  Selanjutnya jalankan Aplikasi program pada Android Studio untuk melihat sudah terkoneksi dengan Firebase atau belum. Jika sudah maka tampilan akan berubah seperti gambar dibawah.

11.  Kemudian kita perpindah ke Android Studio, pada "activity_main.xml" ketikan Source Code dibawah ini.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.aoxa.tugasakhirmc.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
      
        <EditText
            android:id="@+id/edtName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/btnSave"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Simpan"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Daftar Pengguna"
            android:layout_marginTop="20px"
            android:layout_marginBottom="20px"
            android:textAppearance="?android:attr/textAppearanceLarge"/>
      
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@android:color/black"/>

        <ListView
            android:id="@+id/listViewUsers"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </ListView>

    </LinearLayout>

</android.support.constraint.ConstraintLayout>

Tampilan activity_main.xml

12.Selanjutnya buat layout baru, beri nama dengan "layout_user_list", beri source code seperti dibawah ini.

<?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">
  
    <TextView
        android:id="@+id/txtName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        />


    <Button
        android:id="@+id/btnUpdate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ubah"/>

    <Button
        android:id="@+id/btnDelete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hapus"/>

</LinearLayout>

Tampilan layout_user_list.xml

13. Setelah activity selesai dibuat, kemudian buat Class Java baru dengan cara, klik kanan package pada java kemudian beri nama "User", setelah itu beri constructor, getter and setter, atau sobat bisa copy-paste code dibawah.

package com.example.aoxa.tugasakhirmc;

public class User {
    private String id;
    private String name;

    public User() {
    }

    public User(String id, String name) {
        this.id = id;
        this.name = name;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

14. Kemudian buat Class java lagi seperti seblumnya dan beri nama "UserList", ketik kode seperti dibawah ini

package com.example.aoxa.tugasakhirmc;

import android.app.Activity;
import android.content.Context;
import android.support.annotation.NonNull;
import android.text.Layout;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.TextView;

import com.google.firebase.database.DatabaseReference;

import java.util.List;

public class UserList extends ArrayAdapter<User> {

    private Activity context;
    private List<User> users;
    DatabaseReference databaseReference;
    EditText edtName;

    public UserList(@NonNull Activity context, List<User> users, DatabaseReference databaseReference, EditText edtName  ) {
        super(context, R.layout.layout_user_list, users);
        this.context = context;
        this.users = users;
        this.databaseReference = databaseReference;
        this.edtName = edtName;
    }

    public View getView (int pos, View view, ViewGroup parent){
        LayoutInflater inflater = context.getLayoutInflater();
        View lisViewItem =inflater.inflate(R.layout.layout_user_list, null, true);

        TextView txtName = (TextView) lisViewItem.findViewById(R.id.txtName);
        Button btnDelete = (Button) lisViewItem.findViewById(R.id.btnDelete);
        Button btnUpdate = (Button) lisViewItem.findViewById(R.id.btnUpdate);

        final User user = users.get(pos);
        txtName.setText(user.getName());

        btnDelete.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                databaseReference.child(user.getId()).removeValue();
            }
        });

        btnUpdate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                edtName.setText(user.getName());
                MainActivity.userId = user.getId();
            }
        });

        return lisViewItem;

    }

}

15. Lalu pada "MainActivity", implementasikan Source Code di bawah ini, saya rekomendasikan untuk mengetik manual, selain sobat akan paham, juga dapat menghindari error.

package com.example.aoxa.tugasakhirmc;

import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.Toast;

import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.ValueEventListener;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    Button btnSave;
    EditText edtName;
    DatabaseReference databaseReference;
    ListView listViewUsers;
    List<User> users;
    public static String userId;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        users = new ArrayList<User>();
        databaseReference = FirebaseDatabase.getInstance().getReference("users");

        btnSave = (Button) findViewById(R.id.btnSave);
        edtName = (EditText) findViewById(R.id.edtName);
        listViewUsers = (ListView) findViewById(R.id.listViewUsers);

        btnSave.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String name = edtName.getText().toString();

                if(TextUtils.isEmpty(userId)) {
                    //save
                    String id = databaseReference.push().getKey();
                    User user = new User(id, name);
                    databaseReference.child(id).setValue(user);

                    Toast.makeText(MainActivity.this, "Berhasil buat user", Toast.LENGTH_SHORT).show();
                }else {
                    //update
                    databaseReference.child(userId).child("name").setValue(name);

                    Toast.makeText(MainActivity.this, "Berhasil ubah user", Toast.LENGTH_LONG).show();
                }
                edtName.setText(null);
            }
        });

    }

    @Override
    protected void onStart() {
        super.onStart();

        databaseReference.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {
                users.clear();

                for (DataSnapshot postSnapshot: dataSnapshot.getChildren()){
                    User user = postSnapshot.getValue(User.class);
                    users.add(user);
                }

                UserList userAdapter  = new UserList(MainActivity.this, users, databaseReference, edtName);
                listViewUsers.setAdapter(userAdapter);
            }

            @Override
            public void onCancelled(DatabaseError databaseError) {

            }
        });
    }
}

16.Sekarang Jalankan Program dengan cara pilih menu"Run" > "Run app", Aplikasi bisa diintal pada Android sobar, AVD Manager maupun Emulator android : Genymotion, Nox, Memu, dll.


Tampilan Program Setelah Dijalankan

Proses CRUD pada Aplikasi

Realtime Databse pada Firebase langsung Mengeksekusi secara Instant, kurang dari 5 detik

Dengan Menggunakan Database Firebase ini kita mendapat keuntungan lebih daripada menggunakan database lain yaitu :

• Database dilakukan secara Realtime begitu CRUD dilakukan, langsung memberi efek langsung
• Tidak perlu membuat Tabel karena Firebase ini bersifat Parent & Child (Sifat Menurun)
• Banyak Platform yang bisa digunakan yaitu Android, IOS, maupun web.

Sekian Tutorial kali ini kurang lebihnya mohon maaf, bila terdapat pertanyaan bisa sobat tanyakan pada kolom komentar, dan Terima Kasih Banyak.

Continue Reading →

Rancangan Proses Kalkulator

Rancangan Proses Kalkulator untuk aplikasi Mobile Android terdiri dari 3 hal yaitu :

1. Algoritma
2. Flow Chart
3. Pseudo Code 

1. Algoritma

• Algoritma kalkulator dengan menghitung 2 buah bilangan dengan perintah ( + ), ( – ), ( / ), ( x )
• Running Program String = "" (Kosong)
• Bilangan 1 : Float (variabel bilangan pertama)
• Bilangan 2 : Float (variabel bilangan kedua)
• Operator Karakter dengan Berdaasarkan "q"

• Button Clear mengambil data dari method "reset()"
• Perform Button pada angka mengambil data dari "btnClicked(View v)"
• Proses Hitung dilakukan pada method "calculate()" bila input terjadi
• Bila yang diketik selain angka, tidak akan berpengaruh, proses tersebut dilakukan pada method "calculateNoShow()"
• Cetak hasil pada "showHasil" bila semua syarat terpenuhi pada proses "calculate()"

Garis Besar Program

1. Inisialisaikan num1, num2, oprs, hasil 
2. Input nilai X dan Y
3. Pilih salah satu operasi dari (+),(-),(x),(:)
4. Jika anda memilih operasi (+), maka hasil = a + b
5. Jika anda memilih operasi (-), maka hasil = a – b
6. Jika anda memilih operasi (x), maka hasil = a * b
7. Jika anda memilih operasi (:), maka hasil = a / b
8. Cetak Hasil

2. Flow Chart

3. Pseudo Code
MainActivity.Java

package com.example.aoxa.kalkulator;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

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


public class MainActivity extends AppCompatActivity {

    public String str ="";
    Character op = 'q';
    float i,num1,num2;
    EditText showHasil;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        showHasil = (EditText)findViewById(R.id.tv_hasil);

    }
    public void btn1Clicked(View v){
        insert(1);

    }

    public void btn2Clicked(View v){
        insert(2);

    }
    public void btn3Clicked(View v){
        insert(3);

    }
    public void btn4Clicked(View v){
        insert(4);

    }
    public void btn5Clicked(View v){
        insert(5);

    }
    public void btn6Clicked(View v){
        insert(6);
    }
    public void btn7Clicked(View v){
        insert(7);

    }
    public void btn8Clicked(View v){
        insert(8);

    }
    public void btn9Clicked(View v){
        insert(9);

    }
    public void btntambahClicked(View v){
        perform();
        op = '+';

    }

    public void btnkurangClicked(View v){
        perform();
        op = '-';

    }
    public void btnbagiClicked(View v){
        perform();
        op = '/';

    }
    public void btnkaliClicked(View v){
        perform();
        op = '*';

    }
    public void btnprosesClicked(View v){
        calculate();

    }

    public void btnclearClicked(View v){
        reset();
    }
    private void reset() {
        str ="";
        op ='q';
        num1 = 0;
        num2 = 0;
        showHasil.setText("");
    }
    private void insert(int j) {
        str = str+Integer.toString(j);
        num1 = Integer.valueOf(str).intValue();
        showHasil.setText(str);

    }
    private void perform() {
        str = "";
        calculateNoShow();
        num2 = num1;

    }
    private void calculate() {
        if(op == '+')
            num1 = num2+num1;
        else if(op == '-')
            num1 = num2-num1;
        else if(op == '/')
            num1 = num2/num1;
        else if(op == '*')
            num1 = num2*num1;
        showHasil.setText(""+num1);
    }

    private void calculateNoShow() {
        if(op == '+')
            num1 = num2+num1;
        else if(op == '-')
            num1 = num2-num1;
        else if(op == '/')
            num1 = num2/num1;
        else if(op == '*')
            num1 = num2*num1;
    }
}

activity_main.Java 

<?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=".MainActivity">

    <EditText
        android:id="@+id/tv_hasil"
        android:layout_width="match_parent"
        android:layout_height="70dp" />

    <Button
        android:id="@+id/Btn7"
        android:layout_width="70dp"
        android:layout_height="60dp"
        android:layout_below="@id/tv_hasil"
        android:onClick="btn7Clicked"
        android:text="7" />

    <Button
        android:id="@+id/Btn8"
        android:layout_width="70dp"
        android:layout_height="60dp"
        android:layout_below="@id/tv_hasil"
        android:layout_toRightOf="@id/Btn7"
        android:onClick="btn8Clicked"
        android:text="8" />

    <Button
        android:id="@+id/Btnclear"
        android:layout_width="90dp"
        android:layout_height="60dp"
        android:layout_below="@id/tv_hasil"
        android:layout_toRightOf="@id/Btn9"
        android:onClick="btnclearClicked"
        android:text="clear" />

    <Button
        android:id="@+id/Btn4"
        android:layout_width="70dp"
        android:layout_height="60dp"
        android:layout_below="@id/Btn7"
        android:onClick="btn4Clicked"
        android:text="4" />

    <Button
        android:id="@+id/Btn5"
        android:layout_width="70dp"
        android:layout_height="60dp"
        android:layout_below="@id/Btn8"
        android:layout_toRightOf="@id/Btn4"
        android:onClick="btn5Clicked"
        android:text="5" />

    <Button
        android:id="@+id/Btn6"
        android:layout_width="70dp"
        android:layout_height="60dp"
        android:layout_below="@id/Btn9"
        android:layout_toRightOf="@id/Btn5"
        android:onClick="btn6Clicked"
        android:text="6" />

    <Button
        android:id="@+id/Btntambah"
        android:layout_width="90dp"
        android:layout_height="60dp"
        android:layout_below="@id/Btnclear"
        android:layout_toRightOf="@id/Btn6"
        android:onClick="btntambahClicked"
        android:text="+" />

    <Button
        android:id="@+id/Btn1"
        android:layout_width="70dp"
        android:layout_height="60dp"
        android:layout_below="@id/Btn4"
        android:onClick="btn1Clicked"
        android:text="1" />

    <Button
        android:id="@+id/Btn2"
        android:layout_width="70dp"
        android:layout_height="60dp"
        android:layout_below="@id/Btn5"
        android:layout_toRightOf="@id/Btn1"
        android:onClick="btn2Clicked"
        android:text="2" />

    <Button
        android:id="@+id/Btn3"
        android:layout_width="70dp"
        android:layout_height="60dp"
        android:layout_below="@id/Btn6"
        android:layout_toRightOf="@id/Btn2"
        android:onClick="btn3Clicked"
        android:text="3" />

    <Button
        android:id="@+id/Btnkurang"
        android:layout_width="90dp"
        android:layout_height="60dp"
        android:layout_below="@id/Btntambah"
        android:layout_toRightOf="@id/Btn3"
        android:onClick="btnkurangClicked"
        android:text="-" />

    <Button
        android:id="@+id/Btnproses"
        android:layout_width="110dp"
        android:layout_height="60dp"
        android:layout_below="@id/Btn1"
        android:onClick="btnprosesClicked"
        android:text="=" />

    <Button
        android:id="@+id/Btnbagi"
        android:layout_width="90dp"
        android:layout_height="60dp"
        android:layout_below="@id/Btn1"
        android:layout_toRightOf="@id/Btnproses"
        android:onClick="btnbagiClicked"
        android:text="/" />

    <Button
        android:id="@+id/Btnkali"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:layout_below="@id/Btnkurang"
        android:layout_toRightOf="@id/Btnbagi"
        android:onClick="btnkaliClicked"
        android:text="*" />

    <Button
        android:id="@+id/Btn9"
        android:layout_width="70dp"
        android:layout_height="60dp"
        android:onClick="btn9Clicked"
        android:text="9"
        android:layout_alignBottom="@+id/Btn8"
        android:layout_toEndOf="@+id/Btn8"
        android:layout_below="@+id/tv_hasil" />

</RelativeLayout>

Hasil Running Program 

Continue Reading →

Gantungan Kunci Unik

Continue Reading →

Joystick PS2 Original

Continue Reading →

Jam Harddisk, HDD Clock

Continue Reading →

Mouse Kabel Votre

Continue Reading →

Kabel USB Hippo

Continue Reading →

Robotic Mouse

Continue Reading →

Joystick USB Komputer

Continue Reading →

Convertor PC Laptop

Continue Reading →