App Sederhana Google Spreadsheet - Tugas 8 PBKK

APLIKASI GOOGLE FRAMEWORK

TUGAS 8 PBKK


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.

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.

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas BLUEJ

Gambar
Tutorial Hello World dan Profil Diri dengan menggunakan app BlueJ        BlueJ adalah IDE khusus yang dibuat sebagai media pengajaran bahasa pemrograman Java. IDE ini dikembangkan oleh Michael Kölling pada tahun 1999 dan terus dikembangkan sampai sekarang berkat dukungan dari Sun Microsystem (sekarang Oracle) dan University of Kent. BlueJ juga merupakan aplikasi open source dibawah lisensi GNU GPL versi 2. BlueJ dipilih karena cukup ringan, mudah dipahami, ada diagram yang menggambarkan hubungan / keterkaitan antar class, sehingga mudah dipahami. Berikut tutorial membuat hello world dan profil diri menggunakan BlueJ : 1.      M embuat Project Baru Buka aplikasi BlueJ, lalu buat project baru dengan cara meng klik Project -> New Project. Lalu memberi nama file dan memilih lokasi file. 2.      Membuat Class Hello World dan Class Profile Diri Tekan tombol New Class  pada bagian kiri atas atau bisa melalui menu Edit -> New Class. Setelah selesai memb
Baca selengkapnya

Java Applet FX

Gambar
Java Applet, Java FX A pplet merupakan salah satu jenis program yang dapat dihasilkan oleh bahasa pemrograman Java selain program aplikasi dekstop dan server. Applet java harus dijalankan melalui web browser, misalnya di Microsoft internet explorer, Mozila Firefox, Google Chrome, atau browser yang lainnya. Applet Java dapat disertakan di dalam dokumen HTML. Dokumen HTML menggunakan tag untuk memberi instruksi ke web browser dan kemudian web browser akan menerjemahkan dan memutuskan bagaimana menampilkan atau memperlakukan konten dari dokumen HTML. import java.awt.*; public class TesApplet extends java.applet.Applet{ public void paint(Graphics g){ Font f = new Font("SansSerif", Font.BOLD, 20); g.setFont(f); g.setColor(Color.BLUE); int xPusat = this.getSize().width/2; int yPusat = this.getSize().height/2; String s = "Selamat Belajar Java Applet"; FontMetrics fm = this.getFontMetrics(f);
Baca selengkapnya

Code Igniter - Tugas 2 PBKK

Gambar
Code Igniter TUGAS 2 PBKK Codeigniter adalah salah satu framework yang digunakan untuk membuat sebuah web app. Framework ini menggunakan metode MVC (Model, View, dan Controller). Untuk menggunakan framework ini, anda memerlukan xampp(windows) atau aplikasi sejenis, untuk menjalankan apache engine. Framework dapat diunduh  disini . Menggunakan framework ini cukup mudah, setelah anda unduh dalam bentuk compressed file, extract file ke direktori htdocs di file xampp, lalu framework siap digunakan. Berikut adalah webpage yang saya buat : Home Page Contact About Untuk Source Code bisa dilihat disini :
Baca selengkapnya