X

Wednesday, October 23, 2019

Cara Membuat Image View Bulat (Circle Image) dengan Glide di Android Studio


Hai sobat Coding Rakitan ! kali ini kami ingin memberikan sebuah tutorial untu membuat Image View berbentuk bulat atau lebih dikenal dengan nama Circle Image. Untuk membuat Circle Image ada banyak cara yang bisa di tempuh mulai dari manipulasi bitmap menggunakan canvas, menggunakan shape drawable, hingga menggunakan library. Cara yang akan kita gunakan disini yaitu menggunakan library, sebab lebih mudah dan praktis. Bagi pemula juga tidak akan ribet menggunakannya.

Library yang akan kita gunakan adalah Glide, library ini tidak hanya untuk menampilkan image tetapi bisa pula membuat Circle Image. Kelebihan lainnya anda bisa menampilkan image online ataupun offline (langsung dari directory project).

Sebelum kita memulai saya akan memberikan beberapa contoh aplikasi yang menerapkan Circle Image.



Selain aplikasi-aplikasi di atas masih banyak lagi yang menggunakan Circle Image. Untuk hasil dari project yang dibuat pada postingan ini nantinya akan sangat sederhana, bisa anda lihat seperti gambar di bawah.



Langkah 1 : Buat project baru.



Langkah 2 : Import libarary glide dengan memasukkan code berikut ke dalam build.grandle (app module).
 
dependencies {
    ...
    implementation 'com.github.bumptech.glide:glide:4.2.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.2.0'
}
 
Langkah 3 : Masukkan gambar percobaan kedalam directory drawable dengan nama gambar.jpg (seuai keinginan anda). Berikut adalah contoh gambar yang akan di tampilkan



Langkah 4 : Edit activity_main.xml seperti berikut.
 
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/darker_gray"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/gambar"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginTop="20dp" />
    </LinearLayout>

</RelativeLayout>
 
Langkah 5 : Edit class MainActivity seperti berikut.

 
public class MainActivity extends AppCompatActivity {

    private ImageView gambar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gambar = findViewById(R.id.gambar);
        Glide.with(this)
                .load(R.drawable.gambar)
                .apply(RequestOptions.circleCropTransform())
                .into(gambar);

    }
}

 
Penjelasan :

Bagian yang menjadi instruksi untuk menggunakan glide terdapat pada kode :

 
Glide.with(this)
                .load(R.drawable.gambar)
                .apply(RequestOptions.circleCropTransform())
                .into(gambar);
 
Kode tersebut menginstruksikan gambar yang terdapada di "R.drawable.gambar" untuk di tampilkan kedalam image view dengan bentuk circle dengan menggunakan method "circleCropTransform()". Selain gambar dari directori anda juga bisa menggunakan gambar online dengan cara menuliskan ".load(URL_GAMBAR)", contohnya :

 
Glide.with(this)
                .load("http://codingrakitan.blogspot.com/")
                .apply(RequestOptions.circleCropTransform())
                .into(gambar);
 



Cara Membuat Aplikasi Kamera Bagian Kedua - Capture Image


Pada postingan pertama dari Cara Membuat Aplikasi Kamera kita sudah membuat aplikasi dan menampilkan kamera preview. Lanjutan dari postingan tersebuat, kita akan membuat tangkapan atau Capture Image.

Aksi yang akan kita masukkan sebagai tambahan adalah Capture Image (tanpa menyimpan gambar), tombol back press yaitu ketika tombol kembali di tekan pada tampilan Capture Image maka camera kembali menampilkan preview, serta tombol Hapus yang fungsinya sama dengan back press.

Selain itu kita akan membuat agar aplikasi nantinya tampil full screen tanpa toolbar.

Tampilan nantinya akan tampak seperti barikut :



Langsung saja ikuti langkah-langkah di bawah ini :

Langkah 1 : Buat dua ikon drawable dengan nama camera dan hapus, anda bisa menggunakan Vector Asset yang disediakan oleh Android Studio. Baca : Cara Menggunakan Icon Vector Asset bawahan Android Studio  

 


Langkah 2 : Edit AndroidManifest.xml dengan kode seperti berikut.
 
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="codingrakitan.blogspot.com.aplikasikamera">

    <uses-permission android:name="android.permission.CAMERA"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Langkah 3 : Edit activity_main.xml dengan kode seperti berikut.
 
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".MainActivity" >

    <FrameLayout
        android:id="@+id/fr_kamera"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black">

    </FrameLayout>

    <ImageView
        android:id="@+id/img"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="30dp"
        android:adjustViewBounds="true"
        android:onClick="onClick"
        android:tint="@android:color/white"
        app:srcCompat="@drawable/camera"
        tools:ignore="VectorDrawableCompat" />

    <LinearLayout
        android:id="@+id/ly"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black"
        android:orientation="vertical"
        android:visibility="gone">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/tampil"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="false"
                app:srcCompat="@drawable/ic_launcher_background"
                tools:ignore="VectorDrawableCompat" />

            <ImageView
                android:id="@+id/hapus"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_gravity="bottom"
                android:layout_margin="20dp"
                android:adjustViewBounds="true"
                android:onClick="onClick"
                android:tint="@android:color/white"
                app:srcCompat="@drawable/delete"
                tools:ignore="VectorDrawableCompat" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:padding="10dp"
                android:text="codingrakitan.blogspot.com"
                android:textColor="@android:color/white"
                android:textSize="12sp" />

        </FrameLayout>

    </LinearLayout>

</FrameLayout>

Langkah 4 : Edit class MainActivity dengan kode seperti berikut.

 
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private FrameLayout fr_kamera;
    private SurfaceView sv;
    private SurfaceHolder sh;
    private Camera cm;
    private ImageView tampil;
    private LinearLayout ly;
    private int HOME = 1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        fr_kamera = findViewById(R.id.fr_kamera);
        tampil = findViewById(R.id.tampil);
        ly = findViewById(R.id.ly);


        kameraAktif();

    }
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event){
        if (event.getAction() == KeyEvent.ACTION_DOWN) {
            switch (keyCode) {
                case KeyEvent.KEYCODE_BACK:
                    if (HOME==0){
                        ly.setVisibility(View.GONE);
                        HOME=1;
                    }else{
                        finish();
                    }
                    return true;
            }
        }
        return super.onKeyDown(keyCode, event);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.hapus:
                ly.setVisibility(View.GONE);
                break;
            case R.id.img:
                ambilGambar();
                break;
        }

    }

    private void kameraAktif() {
        sv = new SurfaceView(this);
        sh = sv.getHolder();
        sh.addCallback(new SurfaceHolderCallback());
        fr_kamera.addView(sv);

    }

    private void ambilGambar() {
        cm.takePicture(null, null, jpegCallback);
        HOME = 0;
    }
    Camera.PictureCallback jpegCallback = new Camera.PictureCallback() {
        @Override
        public void onPictureTaken(byte[] data, Camera camera) {
            Bitmap bitmap = BitmapFactory.decodeByteArray(data, 0, data.length);
            Matrix matrix = new Matrix();
            matrix.postRotate(90);
            Bitmap rotateBitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight()
            , matrix, true);
            tampil.setImageBitmap(rotateBitmap);
            ly.setVisibility(View.VISIBLE);
            cm.startPreview();
        }
    };



    private class SurfaceHolderCallback implements SurfaceHolder.Callback {
        @Override
        public void surfaceCreated(SurfaceHolder holder) {
            cm = Camera.open();
            Camera.Parameters parameters = cm.getParameters();
            List<Camera.Size> ss = parameters.getSupportedPreviewSizes();
            Camera.Size pictSize = ss.get(0);
            parameters.setPictureSize(pictSize.width, pictSize.height);
            cm.setParameters(parameters);
        }

        @Override
        public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
            try {
                 cm.setDisplayOrientation(90);
                 cm.setPreviewDisplay(sv.getHolder());
                Camera.Parameters parameters = cm.getParameters();
                List<Camera.Size> previewSize = cm.getParameters().getSupportedPreviewSizes();
                Camera.Size pre = previewSize.get(0);
                parameters.setPreviewSize(pre.width, pre.height);

                ViewGroup.LayoutParams lp = new FrameLayout.LayoutParams(
                        ViewGroup.LayoutParams.FILL_PARENT,
                        ViewGroup.LayoutParams.FILL_PARENT);

                sv.setLayoutParams(lp);
                cm.setParameters(parameters);
                cm.startPreview();
            }catch (Exception e){}

        }

        @Override
        public void surfaceDestroyed(SurfaceHolder holder) {
                cm.stopPreview();
                cm.release();
        }
    }
}

 


Sekarang anda tinggal melakukan pengetesan menggunakan emulator atau lebih baiknya menggunakan HP Smartphone langsung, sebab lebih leluasa dalam mengambil gambar.

Lanjut :  Cara Membuat Aplikasi Kamera Bagian Ketiga - Flash Light


Monday, October 21, 2019

Cara Membuat Aplikasi Kamera dengan Android Studio


Pada postingan Cara Membuat Aplikasi Kamera dengan Android Studio ini kita akan membuat aplikasi yang nantinya dapat mengakses perangkat keras android yaitu kamera. Hasil dari aplikasi yang dibuat nantinya akan tampak seperti gambar di bawah.



Aplikasi kamera yang akan dibuat akan sangat sederhana. Hanya akan menampilkan tampilan kamera, dan belum bisa melakukan jepretan gambar. Fungsi jepretan gambar akan di tambahkan pada postingan selanjutnya.

Buat terlebih dahulu project baru dengan format seperti dibawah.



Baca : Cara Membuat Project Baru di Android Studio

Langsung saja untuk membuat aplikasi kamera silahkan ikuti langkah-langkah di bawah ini:

Langkah 1 : Tambah izin menggunakan camera di AndroidManifest.xml

...
<uses-permission android:name="android.permission.CAMERA"/>
...
Langkah 2 : Edit activity_main.xml seperti berikut.
 
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/fr_kamera"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" />
 
Langkah 3 : Edit class MainActivity seperti berikut.

 
public class MainActivity extends AppCompatActivity {

    private FrameLayout fr_kamera;
    private SurfaceView sv;
    private SurfaceHolder sh;
    private Camera cm;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);



        fr_kamera = findViewById(R.id.fr_kamera);
        sv = new SurfaceView(this);
        sh = sv.getHolder();
        sh.addCallback(new SurfaceHolderCallback());
        fr_kamera.addView(sv);
    }

    private class SurfaceHolderCallback implements SurfaceHolder.Callback {
        @Override
        public void surfaceCreated(SurfaceHolder holder) {
            cm = Camera.open();
            Camera.Parameters parameters = cm.getParameters();
            List<Camera.Size> ss = parameters.getSupportedPreviewSizes();
            Camera.Size pictSize = ss.get(0);
            parameters.setPictureSize(pictSize.width, pictSize.height);
            cm.setParameters(parameters);
        }

        @Override
        public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
            try {
                 cm.setDisplayOrientation(90);
                 cm.setPreviewDisplay(sv.getHolder());
                Camera.Parameters parameters = cm.getParameters();
                List<Camera.Size> previewSize = cm.getParameters().getSupportedPreviewSizes();
                Camera.Size pre = previewSize.get(0);
                parameters.setPreviewSize(pre.width, pre.height);

                ViewGroup.LayoutParams lp = new FrameLayout.LayoutParams(
                        ViewGroup.LayoutParams.FILL_PARENT,
                        ViewGroup.LayoutParams.FILL_PARENT);

                sv.setLayoutParams(lp);
                cm.setParameters(parameters);
                cm.startPreview();
            }catch (Exception e){}

        }

        @Override
        public void surfaceDestroyed(SurfaceHolder holder) {
                cm.stopPreview();
                cm.release();
        }
    }
}

 
Jika camera anda orientasinya tidak sesuai dengan yang diharapkan silahkan rubah pada bagian cm.setDisplayOrientation(90); anda bisa menggantinya misalnya 0, 90, 180. Pada bagian tersebut jika tidak sesuai bisa jadi hp anda tegakkan ke atas, tetapi gambar yang tampil malah memanjang ke samping.

Selanjutka kita akan membuat tombol untuk menangkap tangkapan kamera, lanjut di postingan Cara Membuat Aplikasi Kamera Bagian Kedua - Capture Image.


Belajar Dasar C++ - Membuat Input dan Output



Input merupakan proses memasukkan data, sedangkan output adalah proses menampilkan data. Dalam pemrograman input dan output inilah yang menjadi aktivitas utama selain dari proses data.

Dalam C++ kita bisa menggunakan perintah "cout" untuk menampilkan data (output). Sedangkan untuk menampilkan data digunakan perintah "cin". Agar dapat digunakan baik cin ataupun cout diperlukan file header yaitu "<iostream>".

Agar anda tidak pusing ada baiknya kita lakukan langsung dengan cara Praktek.

Pertama : Buat project baru dengan nama coba.cpp  


Kedua : Isi dengan kode seperti berikut.

 

 
    #include <iostream>
    using namespace std;
   
  int main() {
   
      string nama;
      string alamat;
      int stambuk;
      string nomor_hp;
   
      cout << "Input Nama : ";
      cin >> nama;
      
      cout << "Input Alamat : ";
      cin >> alamat;
      
   
      cout << "Input Stambuk : ";
      cin >> stambuk;
      
      cout << "Input Nomor HP : ";
      cin >> nomor_hp;
   
      cout << endl;
   
      cout << "Nama : " << nama << endl;
      cout << "Alamat : " << alamat << endl;
      cout << "Stambuk : " << stambuk << endl;
      cout << "Nomor HP : " << nomor_hp << endl;
   
      return 0;
  }
 
Penjelasan Kode :

Pada bagian atas akan di panggil terlebih dahulu file heade yaitu "  #include <iostream>" agar fungsi cout dan cin dapat dijalankan dalam program.

Kemudian di dalam kode main pertama-tama yang harus di lakukan adalah mendeklarasikan variabel seperti di bawah ini :
 
   string nama;
   string alamat;
   int stambuk;
   string nomor_hp;
 
Variabel-variabel tersebut ditujukan untuk menampung data yang di input nantinya, misalnya inputan nama yang anda masukkan akan di tampung kedalam variabel nama bertipe data String.

Kode selanjutnya yaitu :
 
  cout << "Input Nama : ";
      cin >> nama;
      
      cout << "Input Alamat : ";
      cin >> alamat;
      
   
      cout << "Input Stambuk : ";
      cin >> stambuk;
      
      cout << "Input Nomor HP : ";
      cin >> nomor_hp;
 

Kode ini berfungsi menampilkan kata kemudian di ikuti fungsi menginput data sehingga nantinya akan tampak seperti gambar di bawah ini :


Kemudian terdapat kode cout << endl; dimana kode ini berfungsi untuk melakukan enter.

Kode terakhir yaitu :
 
  cout << "Nama : " << nama << endl;
  cout << "Alamat : " << alamat << endl;
  cout << "Stambuk : " << stambuk << endl;
  cout << "Nomor HP : " << nomor_hp << endl;
 
Berfungi untuk menampilkan semua inputan yang telah di input kedalam variabel tadi. Sehingga akhirnya di dapatkan tampilan seperti berikut.





Sunday, October 20, 2019

Apa itu Data GET dan POST dalam Dunia WEB

Didalam dunia pemrograman WEB dikenal dua jenis data yang dapat dikirim dari client ke server. Kedua data tersebut adalah GET dan POST.

Perbedaan keduanya cukup mencolok. Jika data GET dikirim dengan mendeklarasikannya kedalam URL seperti "http://codingrakitan.blogspot.com/?data=GET" sedangkan untuk data POST dapat dikirim dengan menggunakan TAG "<form action="url_aksi" method="POST"><input name="data_post" type="input" /></form> " dalam html.

Pengiriman data menggunakan POST inilah yang seringkali di jumpai pada halaman Login. Sedangkan data komunikasi GET biasanya digunakan untuk berpindah alamat.

Untuk mengambil data ini pada bagian server, juga berbeda-beda tergantung bahasa server yang digunakan. Pada PHP instruksi yang digunakan seperti berikut.

POST
 
  $data = $_POST['data_post'];
 
GET
 
  $data = $_GET['data'];
 


Sedangkan pada server menggunakan Node js dengan Express seperti berikut.
POST
 
  app.post('url', function (req, res){
   var data = req.body.data_post;
  })
 
GET
 
  app.get('url', function (req, res){
   var data = req.query.data;
  })
 

Cara Menampilkan Gambar dari URL Menggunakan FAN (Fast Android Networking) di Android Studio


FAN sigkatan dari Fast Android Networking merupakan sebuah library yang memungkinkan untuk melakukan aktifitas jaringan dalam Aplikasi Android. FAN di buat di atas lapisan Jaringan OkHttp, dimana library ini bisa melakukan hal seperti mengirim data berupa "GET", "POST", atau bahkan gambar ke Internet. Tidak hanya mengirim FAN juga dapat mengambil data dari Internet.

Jika kalian pernah menggunakan library Volley maka kurang lebih fungsi FAN seperti itu. Hanya saja menurut saya FAN lebih unggul dalam hal mengirim gambar ke Internet atau Web.

Pada postingan kali ini kita akan belajar Cara Menampilkan Gambar dari URL Menggunakan FAN (Fast Android Network) di Android Studio.

Langkah 1 : Tambah library FAN kedalam dependencies build.grandle (Module:app).
 
  dependencies {
      ...
      implementasi ' com.amitshekhar.android:android-networking:1.0.2 '
  }
 


Langkah 2 : Tambahkan widget ANImageView di layout anda, kode widgetnya seperti di bawah.

 
<com.androidnetworking.widget.ANImageView
        android:id="@+id/gambar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
 


Langkah 3 : Buat deklarasi string url dan widget ANImageView pada class anda.
 
  public class MainActivity extends AppCompatActivity {

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

          String url_gambar = "http://URL_GAMBAR_YANG_AKAN_DITAMPILKAN";
          ANImageView img = ly.findViewById(R.id.gambar);
      }

 


Langkah 4 : Tampilkan gambar pada widget.
 
  img.setImageUrl(url_gambar);
 
Langkah 5 : Pastikan izin menggunakan Internet di AndroidManifest.xml.
 
  <uses-permission android:name="android.permission.INTERNET"/>


Untuk contoh penerapan FAN ini pada aplikasi dapat anda lihat pada postingan Membuat Card View Seperti Facebook dengan Android Studio

Friday, October 18, 2019

Membuat Tampilan Notifikasi Toolbar di Android Studio


Pada postingan kali ini kita akan membuat ikon vector asset akan menampilkan jumlah notifikasi pada sudut kanannya. Hasil dari tampilan yang akan kita buat nantinya akan tampak seperti gambar di bawah ini.



Untuk membuat tampilan seperti di atas bisa dilakukan dengan memanipulasi layout. Terdapat layout atau widget nantinya yang akan tumpah tindi.

Silahkan buat project baru atau buka project lama yang ingin anda tambahkan notifikasi pada toolbarnya. Saya sendiri membuat project baru dengan konfigurasi seperti pada gambar di bawah ini.



Sebelum membuat tampilan dan koding pada MainActivity terlebih dahulu silahkan buat 2 icon Vector Asset yaitu more, dan notif. Bagi yang belum tahu caranya silahkan baca Cara Menggunakan Icon Vector Asset bawahan Android Studio



 
Setelah itu lanjut ke tahap pengkodean. Silahkan edit file-file dibawah ini sesuai dengan kode di bawahnya.

1. AndroidManifest.xml
 
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="codingrakitan.blogspot.com.notifikasitoolbar">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
 

Pada kode di atas yang diganti adalah tema dari AppTheme menjadi Theme.AppCompat.Light.NoActionBar. Hal ini di maksudkan agar nantinya tidak akan muncul toolbar bawahan dari tema.

2. activity_main.xml

 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/toolbar"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:contentInsetStart="0dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:padding="10dp">

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Coding Rakitan"
                android:textColor="@android:color/white"
                android:textSize="18sp" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <FrameLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:minWidth="35dp">

                    <ImageView
                        android:id="@+id/imageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="right"
                        android:tint="@android:color/white"
                        app:srcCompat="@drawable/notif"
                        tools:ignore="VectorDrawableCompat" />

                    <LinearLayout
                        android:id="@+id/ly_notif"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="@android:color/holo_red_dark"
                        android:orientation="vertical"
                        android:paddingLeft="5dp"
                        android:paddingTop="3dp"
                        android:paddingRight="5dp"
                        android:paddingBottom="3dp"
                        android:visibility="gone">

                        <TextView
                            android:id="@+id/tv_notif"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="1"
                            android:textColor="@android:color/white"
                            android:textSize="10sp"
                            android:textStyle="bold" />
                    </LinearLayout>
                </FrameLayout>

            </LinearLayout>

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:tint="@android:color/white"
                app:srcCompat="@drawable/more"
                tools:ignore="VectorDrawableCompat" />

        </LinearLayout>
    </android.support.v7.widget.Toolbar>

</LinearLayout>
 

3. MainActivity.java


 
public class MainActivity extends AppCompatActivity {

    private LinearLayout ly_notif;
    private TextView tv_notif;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
//        jumlah notifikasi
        int jumlah = 0;
//        tmpilkan jumlah kedalam notifikasi
        tampilNotif(jumlah);
    }

    private void tampilNotif(int i) {
        ly_notif = findViewById(R.id.ly_notif);
        tv_notif = findViewById(R.id.tv_notif);
        if (i>0){
            ly_notif.setVisibility(View.VISIBLE);
            tv_notif.setText(""+i);
        }else{
            ly_notif.setVisibility(View.GONE);
            tv_notif.setText(""+i);
        }
    }
}
 

Pada bagian tampilNotif(jumlah); berfungsi untuk menjalankan method dan mengirim jumlah angka yang akan di tampilkan pada notifikasi. Jika anda mengisinya dengan angka 0 maka notifikasi tidak akan tampil.

4. color.xml
 
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="toolbar">#080064</color>
</resources>

 

Jika sudah selesai melakukan pengeditan silahkan jalankan aplikasi menggunakan emulator atau build langsung ke Smartphone anda menggunakan USB, bila sukses maka anda bisa melihat tampilannya seperti berikut.

Thursday, October 17, 2019

Mengenal Apa itu Front End Development, Back End Development, dan Full Stack Development


Bekerja di dunia pemrograman memang sangat menjanjikan. Tidak hanya karena banyaknya perusahaan yang membutuhkan jasa programer, akan tetapi seorang programer juga bisa membangun startup sendiri.

Sebagai seorang pemula dalam dunia pemrograman ada baiknya anda mengetahui 3 jenis pembagian berdasarkan spesialisnya.

Apa saja itu ?

Tiga spesialis yang dimaksud tersebut adalah Front End Development, Back End Development, dan Full Stack Development. Anda bisa memilih spesialis mana yang ingin digeluti.

Front End Development

Front End Development merupakan sebutan bagi mereka yang spesialisnya membangun aplikasi bagian depan atau tampilan yang nantinya akan di lihat oleh User. Bagian ini sangat sensitif dikarenakan user sekarang ini kebanyakan menilai aplikasi dari tampilannya saja.

Semakin cantik tampilan depan maka semakin banyak pula pelanggan yang akan memakai aplikasi anda. Apalagi jika aplikasi yang dibuat ditujukan untuk konsumen yang tidak mengerti pemrograman.

Seorang Front End Development juga harus menguasai bahasa pemrograman. Contohnya dalam dunia pemrograman web, Front End Development harus bisa mengusai html (bahasa untuk membuat kerangka), css (untuk membuat tema tampilan), serta Javascript (untuk membuat tampilan makin hidup).

Back End Development

Back End Development adalah sebutan untuk mereka yang spesialis pada bagian belakang aplikasi. Bagian ini mungkin tidak bisa di nampakkan seperti Front End Development namun menjadi bagian utama untuk menjalankan aplikasi.

Contohnya sederhananya adalah ketika anda melakukan proses login kedalam halaman website, kita tidak akan melihat proses apa yang terjadi hingga kita bisa sampai pada halaman Profile. Di bagian belakang tersebut ada kode dari Back End Development yang menentukan apakah akun kita terdaftar atau tidak, serta mengambil data-data yang akan di tampilkan pada halaman profile.

Seorang Back End Development dalam pemrograman berbasis web harus mampu menguasai bahasa yang berjalan di sisi server contohnya PHP (Hypertext Preprocessor), Javascript. Selain itu mereka haru bisa menguasai database seperti MySQL, MariaDB, MongoDB, dll.

Perusahaan-perusahaan sekarang ini juga menuntut para Back End Development untuk mampu menguasai Framework, hal ini sudah menjadi standar di banyak perusahaan. Salah satu alasannya dikarenakan perkembangan Framework yang terus-menerus, serta unggul dalam segi keamanan.

Full Stack Development

Full Stack Development, dari namanya mungkin kita sudah tahu artinya. Full Stack Development merupakan istilah untuk meraka yang membangun aplikasi dari bagian depan (Front End Development) ataupun bagian belakang (Back End Development).

Jadi Full Stack Development ini bisa di katakan sebagai gabungan dari Front End Development dan Back End Development. Salah satu keuntungan menjadi Full Stack Development adalah anda dapat memabangun aplikasi sendiri tanpa bantuan tim meskipun ini tentunya akan lebih berat untuk sebagian orang.

Wednesday, October 16, 2019

Mengenal Apa itu Android Studio


Android Studio merupakan tools IDE (Integrated Development Environment) yang digunakan untuk membuat aplikasi android. Fungsi utamanya adalah sebagai editor yang menyediakan berbagai kebutuhan dalam membangun aplikasi android seperti widget, library, dll.

Android Studio versi terbaru telah mendukung 2 bahasa pemrograman yaitu Java dan Kotlin. Sebelumnya hanya mendukung bahasa Java.

Android Studio hadir sebagai pengganti Eclipse ADT (Android Development Tools) yaitu tools utama sebelumnya. Tools Android Studio ini dibangun di atas aplikasi yang sudah populer sebagai editor programer yaitu JetBrains IntelliJ IDE. Selain itu Android Studio di lengkapi dengan Emulator sendiri.

Sama halnya seperti Eclipse, Android Studio juga memerlukan SDK (Software Development Kit) untuk membangun aplikasi android. Bedanya Android Studio didukung penuh oleh Google sebagai pengembangnya serta menggunakan grandle dalam melakukan build.

Baca juga : Perbedaan Membuat Aplikasi Android Menggunakan Eclipse dengan Android Studio

Tools ini di umumkan pertama kali pada tanggal 16 Mei 2013 di Google I/O conference, dimana pada saat itu masih dalam tahap review versi 0.1. Sedangkan versi betanya yaitu versi 0.8 baru dirilis pada Juni 2014.

Untuk versi stabilnya sendiri yaitu versi 1.0 dirilis pada Desember 2014. Google bersama dengan JetBrains sebagai pengembang Android Studio tidak hentinya melakukan update pada Android Studio, semua itu untuk semakin mempermudah para development android studio dalam membuat aplikasi android. Terbukti dengan rajinnya update pada Android Studio baik pada komponen-komponen pendukung, hingga pada tools itu sendiri. Sampai tulisan ini dibuat versi terbaru dari Android Studio adalah versi 3.5.1.


Struktur Android Studio

Android Studio memiliki 3 struktur utama yang harus diketahui oleh pengguna baru. Tiga struktur utama itu adalah manifests, java, dan res.

Manifests : Berisi file AndroidManifest.xml dimana dalam file ini diataur perizinan untuk mengakses perangkat pada android seperti camera, internet, memory, dan lain-lain. Selain itu manifets juga mengatur class activity mana yang pertama kali akan di eksekusi saat aplikasi di buka.

Java : Berisi file java yang merupakan kode sumber yang akan di eksekusi oleh program android. Disinilah diatur layout apa yang akan di tampilkan, serta activity apa yang akan dijalankan.

Res: Berisi semua source non-kode seperti layout, ikon, color, dan gambar bitmap.

Tuesday, October 15, 2019

Cara Membuat Pop Up View Seperti Whatsapp di Android Studio


Hai sobat Coding Rakitan, kali ini saya ingin berbagi Cara Membuat Pop Up View Seperti Whatsapp di Android Studio. Hasil dari pembuatan nantinya akan tampak seperti gambar di bawah.



Cara kerjanya, ketika button di klik maka muncul pop up. Terlebih dahulu silahkan buat project baru atau buka project lama yang sudah pernah dibuat.

Setelah project terbuka, langkah pertama adalah menyiapkan ikon vector yang nantinya akan digunakan silahkan lihat gambar dibawah. Bagi yang belum tahu cara menambah ikon vector silahkan baca Cara Menggunakan Icon Vector Asset bawahan Android Studio.



Anda bisa menyesuaikan dengan ikon yang ingin anda tampilkan. Selain ikon vector, masukkan pula gambar yang akan di uji coba pada pop up ke directory drawable. Nantinya directory drawable akan menampung gambar dan icon seperti berikut.



Langkah-langkah Membuat Pop Up View Seperti Whatsapp


  • Isi value -> colors.xml seperti kode berikut.
  • <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="colorPrimary">#008577</color>
        <color name="colorPrimaryDark">#00574B</color>
        <color name="colorAccent">#D81B60</color>
        <color name="transparan">#9C000000</color>
        <color name="transparan2">#81000000</color>
        <color name="hijau">#009022</color>
        <color name="biru">#0A016A</color>
    </resources>

  • Edit layout activity_main.xml dengan code seperti berikut.

  • <?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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="vertical">
    
                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="300dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginBottom="20dp"
                    android:gravity="center"
                    android:text="Silahkan klik tombol di bawah ini untuk menampilkan pop up view"
                    android:textColor="@android:color/holo_green_dark" />
    
                <Button
                    android:id="@+id/button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="Pop Up" />
            </LinearLayout>
    
        </FrameLayout>
    </RelativeLayout>

    • Buat layout baru dengan nama pop_up_view.xml lalu copy kode dibawah ini kedalam file tersebut.

    • <?xml version="1.0" encoding="utf-8"?>
      <LinearLayout 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"
          android:background="@color/transparan">
      
          <FrameLayout
              android:layout_width="match_parent"
              android:layout_height="match_parent">
      
              <LinearLayout
                  android:id="@+id/ly_batal"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:orientation="vertical"></LinearLayout>
      
              <LinearLayout
                  android:id="@+id/ly_pop_up"
                  android:layout_width="310dp"
                  android:layout_height="wrap_content"
                  android:layout_gravity="center_horizontal|top"
                  android:layout_margin="30dp"
                  android:orientation="vertical">
      
                  <LinearLayout
                      android:layout_width="match_parent"
                      android:layout_height="match_parent"
                      android:background="@android:color/white"
                      android:orientation="vertical">
      
                      <FrameLayout
                          android:layout_width="match_parent"
                          android:layout_height="300dp">
      
                          <ImageView
                              android:id="@+id/imageView5"
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:scaleType="fitXY"
                              app:srcCompat="@drawable/gambar_coba" />
      
                          <LinearLayout
                              android:layout_width="match_parent"
                              android:layout_height="wrap_content"
                              android:background="@color/transparan2"
                              android:orientation="vertical"
                              android:paddingLeft="5dp"
                              android:paddingTop="10dp"
                              android:paddingBottom="10dp">
      
                              <TextView
                                  android:id="@+id/textView"
                                  android:layout_width="match_parent"
                                  android:layout_height="wrap_content"
                                  android:text="Coding Rakitan"
                                  android:textColor="@android:color/white" />
                          </LinearLayout>
                      </FrameLayout>
      
                      <LinearLayout
                          android:layout_width="match_parent"
                          android:layout_height="match_parent"
                          android:background="@android:color/white"
                          android:orientation="horizontal"
                          android:padding="10dp">
      
                          <ImageView
                              android:id="@+id/chat"
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:layout_weight="1"
                              android:tint="@color/hijau"
                              app:srcCompat="@drawable/chat"
                              tools:ignore="VectorDrawableCompat" />
      
                          <ImageView
                              android:id="@+id/call"
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:layout_weight="1"
                              android:tint="@color/hijau"
                              app:srcCompat="@drawable/phone"
                              tools:ignore="VectorDrawableCompat" />
      
                          <ImageView
                              android:id="@+id/video"
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:layout_weight="1"
                              android:tint="@color/hijau"
                              app:srcCompat="@drawable/video"
                              tools:ignore="VectorDrawableCompat" />
      
                          <ImageView
                              android:id="@+id/info"
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:layout_weight="1"
                              android:tint="@color/hijau"
                              app:srcCompat="@drawable/info"
                              tools:ignore="VectorDrawableCompat" />
      
                      </LinearLayout>
                  </LinearLayout>
              </LinearLayout>
          </FrameLayout>
      
      </LinearLayout>
      

    • Buat Class baru dengan nama PopUp.java. Lalu isi dengan kode di bawah ini.

    • class PopUp implements View.OnClickListener {
          private LayoutInflater inf;
          private Context context;
          private Boolean POP_BATAL = true;
      
          public PopUp(Context context, LayoutInflater inf) {
              this.context = context;
              this.inf = inf;
          }
      
          public void tampilPopUp(final FrameLayout content) {
              final View v = inf.inflate(R.layout.pop_up_view, null);
              content.addView(v);
              LinearLayout batal = v.findViewById(R.id.ly_batal);
              LinearLayout ly = v.findViewById(R.id.ly_pop_up);
      
              ImageView chat = v.findViewById(R.id.chat);
              ImageView call = v.findViewById(R.id.call);
              ImageView video = v.findViewById(R.id.video);
              ImageView info = v.findViewById(R.id.info);
      
              batal.setOnClickListener(new View.OnClickListener() {
                  @Override
                  public void onClick(View vv) {
                      if (POP_BATAL == true){
                          Log.d("batal", "klik");
                          content.removeView(v);
                      }else{
                          POP_BATAL = true;
                      }
                  }
              });
              ly.setOnClickListener(new View.OnClickListener() {
                  @Override
                  public void onClick(View vv) {
                      POP_BATAL = false;
                  }
              });
              chat.setOnClickListener(this);
      
          }
      
          @Override
          public void onClick(View v) {
              switch (v.getId()){
                  case R.id.chat:
      //              aksi ketika tombol chat di klik
                      Log.d("klik", "chat");
                      break;
                  case R.id.call:
      //              aksi ketika tombol call di klik
                      Log.d("klik", "call");
                      break;
                  case R.id.video:
      //              aksi ketika tombol video di klik
                      Log.d("klik", "video");
                      break;
                  case R.id.info:
      //              aksi ketika tombol info di klik
                      Log.d("klik", "info");
                      break;
              }
          }
      }
      

    • Lanjut ke tahap menampilkan Pop Up ketika tombol button di klik. Caranya edit class MainActivity anda seperti berikut.
    • public class MainActivity extends AppCompatActivity {
      
          private FrameLayout content;
          private Button bt;
          private Context context;
          private LayoutInflater inf;
          private PopUp popUp;
          @Override
          protected void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.activity_main);
      
              content = findViewById(R.id.content);
              bt = findViewById(R.id.button);
              context = this;
              inf = (LayoutInflater) getSystemService(this.LAYOUT_INFLATER_SERVICE);
               popUp = new PopUp(context, inf);
      
              bt.setOnClickListener(new View.OnClickListener() {
                  @Override
                  public void onClick(View v) {
                      popUp.tampilPopUp(content);
                  }
              });
      
      
          }
      
      }
      

    • Terakhir silahkan jalankan dengan emulator atau USB debug untuk melihat hasilnya.

    Sunday, October 13, 2019

    Macam-macam Tools atau Framework untuk Membangun Aplikasi Android


    Android merupakan salah satu OS smartphone yang sangat terkenal saat ini. Android bersaing dengan iOS dalam urusan Sistem Operasi mobile.

    Salah satu hal yang menyebabkan Android terkenal dikarenakan, OS ini memiliki banyak aplikasi yang dapat diunduh secara cuma-cuma alias gratis.

    Besarnya peluang dalam dunia aplikasi Android mendorong munculnya developer muda. Jika anda tertarik menjadi salah satu di antara banyaknya developer aplikasi Android, terlebih dahulu anda harus mengetahui macam-macam tools atau framework yang di gunakan untuk membangun aplikasi android. Berikut kami telah merangkum beberapa framework yang sering digunakan Developer Android.

    Android Studio


    Android Studio merupakan tools yang dikhususkan untuk membangun aplikasi Android. Tools ini adalah perangkat resmi dari google, sehingga Android Studio selalu mengikuti perkembangan Android. Dengan Android Studio Developer dapat membangun aplikasi android dari Android pertama, hingga Android versi terbaru.

    Selain itu Android Studio di dukung IDE (Integrated Development Environment) yang memudahkan dalam mendesain layout aplikasi. Android Studio versi terbaru telah mendukung dua versi bahasa pemrograman yaitu Kotlin dan Java. Selain membuat aplikasi untuk smarthphone, Android studio juga memungkinkan pembuatan aplikasi untuk smartwatch yang mendukung Android. Untuk membuat aplikasi dengan Android Studio sebaiknya terhubung dengan koneksi internet dikarenakan biasanya ada beberapa library atau fitur yang harus di download.

    Eclipse


    Eclipse mungkin tidak asing lagi di dunia pemrograman khususnya pengembang aplikasi, sebab Eclipse tidak hanya diperuntukkan untuk membangun aplikasi Android, tetapi juga bisa untuk membangun aplikasi desktop. Untuk membuat aplikasi Android menggunakan Eclipse diperlukan beberapa konfigurasi dengan Android SDK.

    Sama halnya seperti Android Studio, Eclipse juga merupakan IDE (Integrated Development Environment) yang memungkinkan untuk melakukan perancangan layout tanpa koding. Meskipun IDE terbilang belum selengkap dengan Android Studio, namun dengan Eclipse anda bisa melakukan pembuatan aplikasi dalam keadaan offline.

    Ionic


    Ionic merupakan Framework yang mampu membangun aplikasi dari iOS, Android, serta Windows Phone. Dengan membangun satu aplikasi anda sudah bisa menkonfersinya ke tiga OS tersebut. Lebih hebatnya lagi bahasa pemrograman yang digunakan adalah bahasa pemrograman berabasis Web.

    Selain itu Ioni tidak memerlukan emulator dalam melakukan testing, cukup dengan browser internet seperti Mozilla Firefox, Chrome , atau semacamnya, testing sudah bisa di lakukan. Untuk para penggunanya Ionic menyediakan Ionic UI yang memudahkan dalam membangun aplikasi. Dengan Ionic UI ini, membuat framework Ionic semakin diminati bahkan banyak aplikasi-aplikasi besar yang sudah beralih ke Ionic.

    Flutter


    Flutter bisa dikatakan sebagai saingan dari Ionic, dikarenakan aplikasi yang dibangun dengan Flutter dapat dikonversi ke Android atau iOS. Framework yang dikembangkan oleh Google ini juga tidak memerlukan emulator dan dapat dijalankan di Browser, sebab menggunakan bahasa pemrograman berbasis web.

    Tidak hanya untuk membangun aplikasi mobile, flutter juga dapat membangun aplikasi desktop serta web. Selain itu Flutter dapat di kombinasikan dengan Android Studio.


    Unity


    Unity merupakan tools yang dapat digunakan untuk membangun aplikasi Android. Meskipun pada dasarnya Unity dikhususkan untuk pemuatan Game. Selain Android, Unity dapat pula di build ke iOS, Windows Phone, dan Windows Desktop.

    Di playstore sendiri sudah banyak bertebaan game-game yang menggunakan Unity. Banyak developer yang menyukai Unity dikarenakan Unity dapat membangun aplikasi game 2D ataupun 3D. Untuk pembangunan game 3D, sudah banyak disediakan component-component seperti pohon, controller, rumput, dan masih banyak lagi.

    Xamarin


    Xamarin merupakan tools yang di buat oleh Xamarin Inc yaitu anak perusahaan Microsoft. Dengan Xamarin developer dapat memabangun aplikasi Android, iOS, dan Windows.

    tools ini menggunakan bahasa C# sebagai basis kodenya. Untuk memaksimalkan pengalaman dalam membuat aplikasi Xamarin dapat di Integrasikan dengan Visual Studio yang sudah sangat populer di kalangan programer. Selain itu Xamarin juga dapat di akses dengan Xamarin Studio.

    App Inventor


    App Inventor merupakan tools yang bisa di akses secara online melalui web browser di https://appinventor.mit.edu/. Selain itu anda juga bisa menginstall tools ini di Windows.

    Awalnya tools ini dikembangkan oleh Google, namun sekarang dikelola oleh Massachusetts Institute of Technology (MIT) yaitu Universitas asal Cambridge, Boston, Amerika Serikat. Tools ini menyediakan antar muka grafis, serupa dengan antarmuka pada aplikasi Scratch. Pengguna akan lebih banyak melakukan drag-and-drop untuk membangun aplikasi Android. App Inventor sangat cocok untuk pemula yang belum menguasai bahas pemrograman.


    Friday, October 11, 2019

    Cara Membuat dan Menghubungkan Firebase dengan Project Android Studio


    Firebase merupakan sebuah fitur penyedia database yang disediakan oleh google untuk para developer baik web atau mobile. Kelebihan menggunakan database ini salah satunya adalah dukungan fitur real time, dimana data yang dirubah di database akan otomatis merubah data yang sudah ditampilkan di client.

    Untuk membuat project baru di Firebase, anda bisa mengikuti langkah-langkah dibawah ini.

    1. Login ke akun google anda

    2. Masuk ke alamat console firebase.

    3. Halaman pertama yang akan anda temui terlihat seperti gambar berikut. Silahkan klik Buat project untuk memulai.



    4. Masukkan nama project anda misalnya disini saya membuat project Coding Rakitan dan jangan lupa centang Saya menyetujui, lalu klik lanjutkan.



    5. Langkah selanjutnya klik Lanjutkan.



    6. Selanjutnya konfigurasi google analytics, silahkan pilih lokasi analytics dengan Indonesia, kemudian centang semua checkbox seperti gambar dibawah lalu tekan Buat project.



    7. Selanjutnya anda akan melihat proses pembuatan project. Silahkan tunggu hingga proses selesai lalu tekan Lanjutkan.



    8. Anda akan di arahkan ke halaman dashboard project firebase anda.



    Setelah project baru anda selesai, selanjutnya adalah memulai menambahkan aplikasi yang nantinya akan dikonfigurasikan dengan Firebase.

    Menambahkan Firebase kedalam Project Android Studio Cara 1

    • Ada tiga aplikasi yang bisa anda pilih yaitu iOS, Android, Web, dan Unity. Karena kita akan membuat Firebase untuk Android jadi silahkan pilih Android.


    • Di halaman selanjutnya isi nama paket android dengan aplikasi yang anda buat. Sedangkan untuk sertifikat penandatanganan debug SHA-1 silahkan anda isi dengan sertifikat aplikasi yang anda buat. Baca Cara Melihat Sertifikat Penandatanganan debug SHA-1 di Project Android Studio.



    • Setelah mengklik Daftarkan aplikasi. Selanjutnya anda akan diminta untuk mendownload file konfigurasi dan memasukkannya kedalam project Android Studio anda. Silahkan download file tersebut.



    • Copy dan pastekan file google-services.json tersebut kedalam project android studio. Pilih tampilan direktori project pada bagian atas kemudian klik kanan pada app -> paste atau langsung klik ctrl+v pada direktori app.



    • Jika berhasil akan muncul file google-services.json di dalam direktori app.



    • Kembali ke halaman firebase, klik Berikutnya.

    • Selanutnya lakukan konfigurasi build.grandle seperti yang di instruksikan.


      Dibawah ini adalah tambahan yang saya masukkan kedalam build.grandle (Project)


      Dibawah ini adalah tambahan yang saya masukkan kedalam build.grandle (Module:app)



    • Kembali ke halaman Firebase, klik Berikutnya.

    • Pada tahapan selanjutnya, kita akan melakukan pengetesan apakah firebase sudah terhubung dengan aplikasi atau belum. Jalankan aplikasi yang dibuat dengan emulator atau USB debug. Jika muncul pemberitahuan seperti pada gambar, artinya aplikasi berhasil terhubung dengan Firebase.




      Anda juga bisa mengklik Lewati langkah ini jika tidak ingin melakukakan pengetesan.

    Menambahkan Firebase kedalam Project Android Studio Cara 2

    Selain menggunakan cara pertama di atas, ada cara yang lebih simpel. Android Studio versi terbaru sudah menyediakan menu untuk menambahkan firebase kedalam project. Caranya adalah sebagai berikut.

    • Buka project Android Studio anda.
    • Klik menu Tools -> Firebase

    • Pilih Reltime Database -> Save and retrieve data

    • Pertama klik Connect to firebase. Akan terbuka halaman login google di browser anda, silahkan login.


    • Setelah itu muncul halaman baru untuk meminta izin mengakses firebase. Klik izinkan.



    • Kembali ke project Android Studio akan muncul notifikasi bila berhasil terhubung ke Firebase. Selanjutnya klik Sync

    • Langkah selanjutnya klik Add the Realtime Database to your app.
    • gambar

      Akan muncul dialog seperti pada gambar, silahkan klik Accept Changes


    • Hingga tahap ini project sudah terhubung dengan Firebase

    Sekarang anda hanya tinggal berkreasi sebaik mungkin untuk membuat aplikasi keren menggunkan Firebase.