Cara Membuat Aplikasi Android – Melanjutkan artikel sebelumnya dimana kita sudah membuat web service atau api menggunakan framework laravel (https://soft-gain.com/2020/06/13/tutorial-laravel-membuat-aplikasi-web-service/), maka kali ini kita akan mencoba membahas cara membuat aplikasi berbasis android dengan maksud meng-implementasikan web service yang sudah dibuat sebelumnya. Sebelum masuk pada pembahasan, jika ingin membaca mengenai dasar pembuatan aplikasi berbasis android bisa di temukan pada artikel ini (https://soft-gain.com/2020/06/15/cara-membuat-aplikasi-android-hello-world-android-studio/).
Tujuan – Mampu Membuat Aplikasi Android Yang Terintegrasi Dengan Web Service
Artikel ini dibuat dengan harapan kita mampu membuat aplikasi berbasis android dan meng-integrasi-kan nya dengan sebuah web service, pembahasan pada tutorial ini akan dibagi menjadi beberapa artikel yang meliputi dasar-dasar dari pemrograman aplikasi android yang bersifat umum seperti membuat list data, membuat form berserta dengan metode olah datanya (CRUD), pengetahuan dasar tentang activity, fragment, manifest, gradle dan lain-lain.
Materi Pembahasan
Untuk membuat aplikasi kita dapat menggunakan web service yang sudah dibuat sebelumnya, kita perlu meng-install library bernama retrofit (https://square.github.io/retrofit/), retrofit sendiri adalah sebuah REST client HTTP untuk java atau android yang digunakan untuk membuat HTTP request dan memproses HTTP response dari web service sehingga dapat di gunakan pada aplikasi berbasis android. Untuk meng-install library ini pada aplikasi kita, buka file build.gradle dan tambahkan code di bawah ini pada bagian dependencies :
implementation 'com.google.code.gson:gson:2.6.2'
implementation 'com.squareup.retrofit2:converter-gson:2.0.2'
implementation 'com.squareup.retrofit2:retrofit:2.0.2'Setelah ditambahkan jangan lupa untuk menekan tombol sync now dan pastikan anda terhubung dengan internet.
Selain retrofit, kita juga meng-install gson, gson sendiri adalah library buatan Google yang di gunakan untuk meng-konvert json menjadi java object atau pun sebaliknya.
Selanjutnya kita akan menambahkan package baru dengan nama Api, di dalamnya kita akan membuat dua file, client.java dan interface.java. Kurang lebih seperti ini tampilan dari struktur direktori nya :
Class client.java berisi koneksi antara client dengan server, di dalam file ini juga kita akan mendeklarasikan end point api kita, kita akan men-deklarasikannya dalam atribut BASE_URL, silahkan diganti dan di sesuaikan dengan end point api masing-masing (dalam case saya end point yang saya pakai adalah http://192.168.43.12:8080/belajar-laravel/public/api/, dimana 192.168.43.12 adalah ip local pc saya), isi dari client.java seperti ini :
package com.soft_gain.myinventory.Api;
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;
public class Client {
public static final String BASE_URL = "http://end-point-api-anda/";
private static Retrofit retrofit = null;
public static Retrofit getClient() {
if (retrofit==null) {
retrofit = new Retrofit.Builder()
.baseUrl(BASE_URL)
.addConverterFactory(GsonConverterFactory.create())
.build();
}
return retrofit;
}
}Class interface.java sendiri berisi metode yang akan di gunakan untuk melakukan pertukaran data antara client dan server, isi dari interface.java kurang lebih seperti ini :
package com.soft_gain.myinventory.Api;
import retrofit2.Call;
import retrofit2.http.Field;
import retrofit2.http.FormUrlEncoded;
import retrofit2.http.GET;
import retrofit2.http.HTTP;
import retrofit2.http.POST;
import retrofit2.http.PUT;
import com.soft_gain.myinventory.Model.Auth.Login;
public interface Interface {
@FormUrlEncoded
@POST("login")
Call<Login> postLogin(@Field("email") String email,
@Field("password") String password);
}Berikutnya kita akan membuat model, pertama buatlah package baru dengan nama Model, lalu buat lagi package baru di dalam Model dengan nama Auth, lalu di dalam package Auth tambahkan dua file Login.java dan Token.java, kurang lebih seperti ini strukturnya :
Isi dari Login.java seperti ini :
package com.soft_gain.myinventory.Model.Auth;
import com.google.gson.annotations.Expose;
import com.google.gson.annotations.SerializedName;
public class Login {
@SerializedName("success")
@Expose
private Token success;
public Token getSuccess() {
return success;
}
}Dan Token.java seperti ini :
package com.soft_gain.myinventory.Model.Auth;
import com.google.gson.annotations.Expose;
import com.google.gson.annotations.SerializedName;
public class Token {
@SerializedName("token")
@Expose
private String token;
public String getToken() {
return token;
}
}Berikutnya kita akan menambahkan LoginActivity.java, class ini berfungsi untuk menghandle otentikasi user yang akan kita implementasikan pada aplikasi kita, isinya kurang lebih seperti ini :
package com.soft_gain.myinventory;
import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import com.soft_gain.myinventory.Model.Auth.Login;
import com.soft_gain.myinventory.Api.Client;
import com.soft_gain.myinventory.Api.Interface;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
public class LoginActivity extends Activity {
Button b1,b2;
EditText ed1,ed2;
Interface mApiInterface;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
b1 = (Button)findViewById(R.id.button);
b2 = (Button)findViewById(R.id.button2);
ed1 = (EditText)findViewById(R.id.editText);
ed2 = (EditText)findViewById(R.id.editText2);
mApiInterface = Client.getClient().create(Interface.class);
b1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Call<Login> postLoginExe = mApiInterface.postLogin(ed1.getText().toString(), ed2.getText().toString());
postLoginExe.enqueue(new Callback<Login>() {
@Override
public void onResponse(Call<Login> call, Response<Login> response) {
if(response.isSuccessful()){
/*Log.v("log softgain : ", String.valueOf(response.body().getSuccess().getToken()));*/
Toast.makeText(getApplicationContext(),
"Login berhasil",Toast.LENGTH_SHORT).show();
SharedPreferences sgSharedPref = getApplicationContext().getSharedPreferences("sg_shared_pref", getApplicationContext().MODE_PRIVATE);
SharedPreferences.Editor editor = sgSharedPref.edit();
String token = String.valueOf(response.body().getSuccess().getToken());
editor.putString("token", token);
editor.apply();
startActivity(new Intent(LoginActivity.this, MainActivity.class));
}else{
Toast.makeText(getApplicationContext() ,"Login gagal",Toast.LENGTH_SHORT).show();
}
}
@Override
public void onFailure(Call<Login> call, Throwable t) {
/*Log.v("log softgain : ", String.valueOf(t));*/
Toast.makeText(getApplicationContext(), "Error", Toast.LENGTH_LONG).show();
}
});
}
});
b2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
}
}Perhatikan di atas, kita menambahkan sebuah on click event pada button login atau yang saya deklarasikan sebagai b1, yang mana didalamnya kita memanggil api interface yang sudah kita buat sebelumnya. Kita akan mencoba meng-handle response yang kita terima melalui method onResponse, di dalam onResponse kita memiliki if statement response.isSuccessful() yang kita gunakan untuk do event berikutnya bila proses otentikasi user berhasil. Perlu di perhatikan jika proses otentikasi user berhasil maka kita akan menyimpan token yang kita peroleh dari response server ke dalam shared preferences, penyimpanan informasi token ke shared preferences ada pada bagian ini :
SharedPreferences sgSharedPref = getApplicationContext().getSharedPreferences("sg_shared_pref", getApplicationContext().MODE_PRIVATE);
SharedPreferences.Editor editor = sgSharedPref.edit();
String token = String.valueOf(response.body().getSuccess().getToken());
editor.putString("token", token);
editor.apply();Untuk detail mengenai shared preferences akan di bahas pada artikel yang berbeda.
Lalu kita juga akan membuka activity baru yaitu MainActivity, proses untuk membuka activity baru ada pada bagian ini :
startActivity(new Intent(LoginActivity.this, MainActivity.class));Berikutnya kita tambahkan layout baru yaitu activity_login.xml, ini adalah tampilan yang akan di lihat oleh user sebagai halaman login, isi nya kurang lebih seperti ini :
<?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" tools:context = ".LoginActivity">
<TextView android:text = "Login" android:layout_width="wrap_content"
android:layout_height = "wrap_content"
android:id = "@+id/textview"
android:textSize = "35dp"
android:layout_alignParentTop = "true"
android:layout_centerHorizontal = "true" />
<TextView android:text = "@string/app_name" android:layout_width="wrap_content"
android:layout_height = "wrap_content"
android:id = "@+id/textview2"
android:textSize = "35dp"
android:layout_below="@+id/textview"
android:layout_centerHorizontal = "true" />
<EditText
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:id = "@+id/editText"
android:hint = "Email"
android:focusable = "true"
android:textColorHighlight = "#ff7eff15"
android:textColorHint = "#ff2937"
android:layout_alignParentLeft = "true"
android:layout_alignParentStart = "true"
android:layout_alignParentRight = "true"
android:layout_alignParentEnd = "true"
android:layout_centerInParent="true" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:id="@+id/editText2"
android:layout_below="@+id/editText"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="@+id/editText"
android:layout_alignEnd="@+id/editText"
android:textColorHint="#ff2937"
android:hint="Password" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="login"
android:id="@+id/button"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="@+id/textview"
android:layout_toStartOf="@+id/textview"
style="@style/Widget.AppCompat.Button.Colored"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel"
android:id="@+id/button2"
android:layout_alignParentBottom="true"
android:layout_toRightOf="@+id/textview"
android:layout_toEndOf="@+id/textview"
style="@style/Widget.AppCompat.Button.Colored"/>
</RelativeLayout>
Selanjutnya kita juga akan melakukan sedikit modifikasi pada MainActivity.java, kurang lebih jadi seperti ini :
package com.soft_gain.myinventory;
import android.annotation.SuppressLint;
import android.content.Intent;
import android.content.SharedPreferences;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
SharedPreferences sharedPrefs = getSharedPreferences("sg_shared_pref", MODE_PRIVATE);
SharedPreferences.Editor ed;
if(!sharedPrefs.contains("token")){
startActivity(new Intent(MainActivity.this, LoginActivity.class));
}
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@SuppressLint("ResourceType")
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.layout.top_menu, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_logout) {
logout();
return true;
}
return super.onOptionsItemSelected(item);
}
private void logout() {
SharedPreferences sgSharedPref = getApplicationContext().getSharedPreferences("sg_shared_pref", getApplicationContext().MODE_PRIVATE);
sgSharedPref.edit().clear().commit();
startActivity(new Intent(MainActivity.this, LoginActivity.class));
}
}
Perhatikan di atas, dimana kita menambahkan method baru yaitu logout, yang berisikan penghapusan shared preferences berisi informasi token dan pemindahan user kembali ke activity LoginActivity, on click event dari method logout ini sendiri kita trigger melalui interface pada top menu yang di presentasikan melalui top_menu.xml (detail pembuatannya akan dibahas pada artikel yang berbeda). Pada bagian onCreate juga kita menambahkan if statement (pengecekan token pada shared preferences) untuk memastikan hanya user yang memiliki token saja yang bisa mengakses MainActivity.
Penutup
Demikian lah pembahasan kali ini, untuk full source nya bisa di ambil di repo saya (https://github.com/ImmanuelJL/myinventory.git), terima kasih.
Update :
Pak/Bu itu memakai php nggk,apa langsung full android gtu
Halo, saya pakai PHP laravel untuk web service nya. Terima kasih