Langsung ke konten utama

Tugas PBKK - Membuat aplikasi android sederhana dengan basis data spreadsheet

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.
Untuk full source code dari aplikasi tersebut bisa di cek disini:

hisamwp/tugas-5-pbkk

Contribute to hisamwp/tugas-5-pbkk development by creating an account on GitHub.

Terima kasih.

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 3 PBKK - Membuat CRUD menggunakan framework CI

Dalam sebuah website, kita pasti memerlukan fungsi CRUD(Create, Read, Update, dan Delete), dimana fungsi tersebut berkaitan dengan data dalam database. Kita membuat data (create), membaca data (read), mengubah data dengan data yang lebih baru (update), dan menghapus data (delete). Langkah-langkah membuat CRUD(Create, Read, Update, dan Delete), dengan menggunakan CodeIgniter adalah sebagai berikut: 1. Pembuatan Database 2. Configurasi CodeIgniter 3. Membuat Model Untuk Tabel 4. Membuat Controller 5. Membuat View 6. Membuat Form Add 7. Membuat Form Edit 8. Membuat Fitur Hapus Data Berikut beberapa foto dari fungsi CRUD dengan menggunakan Codeigniter: Create Read Update Delete Berikut adalah source code dari CRUD diatas: hisamwp/tugas-3-pbkk-CRUD CodeIgniter is an Application Development Framework - a toolkit - for people who build web sites using PHP. Its goal is to enable you to develop projects much faster than ...
Posting Komentar
Baca selengkapnya

Tugas EAS PBKK - Membuat aplikasi bermanfaat yang berhubungan dengan pandemi Covid-19

PBKK - EAS Contribution Based Evaluation A. Latar Belakang Akhir-akhir ini, sedang ada pandemi yang menyebar luas, yaitu virus Covid-19. Penyebarannya yang semakin luas membuat pemerintah mengeluarkan kebijakan PSBB, dimana singkatnya, masyarakat diatur agar tetap dirumah saja dan selalu menjaga jarak antara satu sama lain. Tujuan dari kebijakan ini adalah untuk mengurangi kegiatan di luar rumah, terutama berkumpul dengan orang lain, agar penyebaran virus Covid-19 tidak lebih luas lagi. Disaat kita kesusahan keluar rumah, diperlukan sebuah aplikasi untuk membantu masyarakat yang tetap di rumah saja, terutama aplikasi untuk memenuhi kebutuhan sehari-hari. Oleh karena itu, kelompok kami membuat sebuah aplikasi e-commerce untuk mengurangi kegiatan masyarakat di luar rumah, dimana aplikasi e-commerce kami adalah aplikasi toko obat, tempat jual-beli obat-obatan secara online. Dengan adanya aplikasi ini, masyarakat tidak perlu keluar rumah apabila membutuhkan obat-obatan disaat sakit....
Posting Komentar
Baca selengkapnya

Tugas 1 PBKK - Membuat data diri dengan electron

Membuat aplikasi sederhana dengan electron Electron adalah salah satu framework untuk membuat aplikasi GUI desktop dengan menggunakan teknologi web. Dimana untuk menggunakan electron, dibutuhkan Node JS dan npm. Kali ini, saya membuat sebuah aplikasi desktop sederhana yang berisi data diri saya. Berikut terlampir gambar aplikasi yang saya buat : Source codenya ada di sini: hisamwp/tugas-1-pbkk-electron-profildiri Berikut adalah contoh aplikasi sederhana yang dibuat dengan menggunakan electron. Untuk menjalankan aplikasi, silahkan siapkan nodejs dan npm, lalu install electron dengan npm. npm install electron --save-dev lalu, jalankan program Program akan berjalan, dan menunjukkan profil diri saya. Oleh : Hisam Widi Prayoga 05111740000026 Sumber : https://youtu.be/RL305ldfzm8 Terima Kasih.
Posting Komentar
Baca selengkapnya