Membuat aplikasi android sederhana dengan basis data spreadsheet
Dalam membuat suatu aplikasi, kadang kita memerlukan suatu basis data untuk menyimpan data yang berasal dari aplikasi. Ada banyak cara menyimpan data tersebut, salah satunya dengan menyimpan data tersebut dalam spreadsheet. Kali ini saya akan membuat suatu aplikasi sederhana, untuk menyimpan produk/barang beserta jumlah dan tanggal penambahannya. Berikut sedikit foto dari aplikasinya:
Sebelum memulai pembuatan aplikasi, saya siapkan terlebih dahulu akun google, untuk mengakses google drive dan membuat spreadsheetnya. Selain menggunakan spreadsheet, kita juga akan menggunakan Google Apps Script untuk membuat APInya (yang menghubungkan antara aplikasi android dan spreadsheet google).
Hal-hal yang perlu disiapkan:
1. Akun google
2. Android Studio
3. java jdk
Berikut tutorial pembuatan aplikasinya:
- Pembuatan aplikasi android
- Setelah melakukan instalasi android studio dan jdk, mari kita mulai membuat aplikasinya. Buat sebuah project baru di android studio, lalu pilih empty activity.
- Setelah itu beri nama project anda, dan pilih minimum SDK. Kali ini saya menggunakan SDK dengan API 16.
- Setelah itu, tambahkan library baru di build.gradle, dengan cara menambahkan kodingan seperti berikut:
implementation 'com.android.volley:volley:1.1.0'
- Library yang ditambahkan tersebut adalah volley, dimana dengan library itu kita dapat melakukan pemanggilan method pada sebuah webapps.
- Project baru telah berhasil dibuat. Lalu buat file xml baru bernama add_item.xml. Isikan kode berikut:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:text="Nama Barang"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="Merek"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/et_item_name" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:text="Jumlah barang"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/et_brand" />
<EditText
android:id="@+id/et_item_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="10dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />
<EditText
android:id="@+id/et_brand"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="10dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView2" />
<EditText
android:id="@+id/et_count"
android:layout_width="70dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="24dp"
android:ems="10"
android:inputType="number"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView3" />
<Button
android:id="@+id/btn_add_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="Tambah"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/et_count" />
</androidx.constraintlayout.widget.ConstraintLayout>
- Setelah itu buat class baru, dengan nama addItem.java. Dimana nantinya disini akan ada pemanggilan API yang akan kita buat di Google Apps Script. Isikan kode berikut:
package com.example.cobadbspreadsheet;
import android.app.ProgressDialog;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import com.android.volley.AuthFailureError;
import com.android.volley.DefaultRetryPolicy;
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.RetryPolicy;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.android.volley.toolbox.Volley;
import java.util.HashMap;
import java.util.Map;
public class AddItem extends AppCompatActivity implements View.OnClickListener {
EditText editTextItemName,editTextBrand, editTextCount;
Button buttonAddItem;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.add_item);
editTextItemName = findViewById(R.id.et_item_name);
editTextBrand = findViewById(R.id.et_brand);
editTextCount = findViewById(R.id.et_count);
buttonAddItem = findViewById(R.id.btn_add_item);
buttonAddItem.setOnClickListener(this);
}
//Ini adalah fungsi dimana data akan ditransfer dari android ke sheet menggunakan http REST API calls
private void addItemToSheet() {
final ProgressDialog loading = ProgressDialog.show(this,"Adding Item","Please wait");
final String name = editTextItemName.getText().toString().trim();
final String brand = editTextBrand.getText().toString().trim();
final String count = editTextCount.getText().toString().trim();
StringRequest stringRequest = new StringRequest(Request.Method.POST,
"URL-webapps-setelah-deploy",
new Response.Listener<String>() {
@Override
public void onResponse(String response) {
loading.dismiss();
Toast.makeText(AddItem.this,response,Toast.LENGTH_LONG).show();
Intent intent = new Intent(getApplicationContext(),MainActivity.class);
startActivity(intent);
}
},
new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
}
}
) {
@Override
protected Map<String, String> getParams() {
Map<String, String> params = new HashMap<>();
//passing parameter
params.put("action","addItem");
params.put("itemName",name);
params.put("brand",brand);
params.put("count", count);
return params;
}
};
int socketTimeOut = 50000;// u can change this .. here it is 50 seconds
RetryPolicy retryPolicy = new DefaultRetryPolicy(socketTimeOut, 0, DefaultRetryPolicy.DEFAULT_BACKOFF_MULT);
stringRequest.setRetryPolicy(retryPolicy);
RequestQueue queue = Volley.newRequestQueue(this);
queue.add(stringRequest);
}
//Menentukan action apabila button telah diclick
@Override
public void onClick(View v) {
if(v==buttonAddItem){
addItemToSheet();
}
}
}
- Setelah membuat dua file tersebut, lalu kita buat menu utama dari aplikasinya. Isikan kode berikut ke file activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity">
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="200dp"
android:text="Tambahkan produk masuk"
android:textSize="36sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:textAlignment="center"
android:gravity="center"
android:textColor="#000000"
android:textStyle="bold"
/>
<Button
android:id="@+id/btn_add_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="240dp"
android:text="Tambah Produk"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
- Lalu isikan MainActivity.java dengan kode berikut:
package com.example.cobadbspreadsheet;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
Button buttonAddItem;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
buttonAddItem = findViewById(R.id.btn_add_item);
buttonAddItem.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(getApplicationContext(),AddItem.class);
startActivity(intent);
}
});
}
}
- Lalu, tambahkan activity AddItem di AndroidManifest.xml. Serta tambahkan permission internet:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.cobadbspreadsheet">
<uses-permission android:name="android.permission.INTERNET"/>
<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/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".AddItem"/>
</application>
</manifest>
- Aplikasi android telah selesai dibuat
- Pembuatan webapps sebagai API
- Buatlah sebuah spreadsheet baru, dengan 5 kolom: Tanggal, Id, Nama Barang, Merek, dan Jumlah barang
- Lalu buat Appscript baru, lalu isikan kode berikut ini:
var ss = SpreadsheetApp.openByUrl("URL-spreadsheet");
var sheet = ss.getSheetByName('Barang'); // be very careful ... it is the sheet name .. so it should match
function doPost(e){
var action = e.parameter.action;
if(action == 'addItem'){
return addItem(e);
}
}
function addItem(e){
var date = new Date();
var id = "Item"+sheet.getLastRow(); // Item1
var itemName = e.parameter.itemName;
var brand = e.parameter.brand;
var count = e.parameter.count;
sheet.appendRow([date,id,itemName,brand,count]);
return ContentService.createTextOutput("Success").setMimeType(ContentService.MimeType.TEXT);
}
- ada yang perlu diperhatikan, link URL di appscript adalah url dari spreadsheet, dan nama parameter harus sama dengan yang kita buat di androidnya (di class AddItem.java)
- Setelah selesai, kita deploy appscript tersebut sebagai webapps.
- Lalu kalian akan mendapatkan URL lagi, URL inilah yang akan kita gunakan di android tadi sebagai REST API
- Aplikasi telah berhasil dibuat, silahkan dicoba.
hisamwp/tugas-5-pbkk
Contribute to hisamwp/tugas-5-pbkk development by creating an account on GitHub.
Terima kasih.
Komentar
Posting Komentar