Pembuatan Aplikasi Kord Gitar Berbasis Android

Pada pertemuan ini penulis mencoba untuk melakukan pembahasan terhadap tahap yang diperlukan untuk membangun aplikasi Kord Gitar untuk semua kalangan. berbasis android, dimana tahap tersebut akan dijelaskan pada subbab yang terpisah secara umum. Dimulai dari gambaran umum, rancangan awal tampilan aplikasi, rancangan alur program, penjelasan program, cara menggunakan aplikasi, dan pengimplementasiannya.

3.1              Struktur Navigasi

Struktur navigasi berfungsi untuk menceritakan struktur atau alur cerita dari suatu program. Struktur navigasi yang digunakan untuk membuat aplikasi edukatif ini yaitu struktur navigasi Hirarki. Berikut gambar dari struktur navigasinya :

Gambar 3.1 Struktur Navigasi

3.2              Bagan Alir (Flowchart)

Flowchart ini merupakan langkah awal pembuatan program. Dengan adanya flowchart urutan poses kegiatan menjadi lebih jelas. Jika ada penambahan proses maka dapat dilakukan lebih mudah. Setelah flowchart selesai disusun, selanjutnya pemrogram (programmer) menerjemahkannya ke bentuk program dengan bahasa pemrograman.

Gambar 3.2 Flowchart Kord Gitar

Gambar 3.2 Lanjutan

3.3              Rancangan Input/Output

Aplikasi Kord Gitar adalah sebuah aplikasi yang dibuat dengan dasar pemrograman Java untuk sistem operasi Android. Untuk itu pertama-tama harus dibuat terlebih dahulu rancangan interface tampilan awal untuk aplikasi ini yang terdiri dari perancangan tampilan layar menu, tampilan layar kunci dasar, tampilan layar kunci balok dan tampilan layar petunjuk. Kemudian melakukan pembuatan kode program dengan menggunakan software Eclipse Galileo. Setelah proses pembuatan kode program selesai selanjutnya dilakukan proses kompilasi program dengan menggunakan emulator pada Android SDK.

3.3.1        Layar Menu

Layar Menu merupakan tampilan awal sebelum masuk dalam layar kord gitar. Pada layar Menu ini terdapat beberapa struktur navigasi yang dimaksudkan untuk mempermudah pemain mengakses aplikasi ini. Struktur navigasi tersebut diwakili oleh empat tombol aktif yaitu tombol Kunci Dasar, Kunci Balok, Petunjuk, dan Keluar.

Gambar 3.3 Tampilan Layar Menu

3.3.2    Layar Kunci Dasar

Layar Kunci Dasar merupakan tampilan untuk memasukkan kunci-kunci dasar pada gitar. Pengguna dapat memilih nada major atau minor yang akan di tampilkan pada output. Tombol Kembali dipilih untuk kembali ke layar Menu.

Gambar 3.4 Tampilan Layar Kunci Dasar

3.3.3    Layar Kunci Balok

Sama halnya pada kunci dasar, Layar Kunci Balok merupakan tampilan untuk memasukkan kunci-kunci balok/gantung pada gitar.

Gambar 3.5 Tampilan Layar Kunci Balok

3.3.4    Layar Petunjuk

Layar Petunjuk merupakan sebuah informasi dan petunjuk untuk penggunaan aplikasi Kord Gitar.

Gambar 3.6 Tampilan Layar Petunjuk

3.4              Pembuatan Android Project

Untuk membuat aplikasi kord gitar ini, pertama penulis membuka eclipse terlebih dahulu. Dengan cara klik kanan pada mouse, lalu pilih windows explorer, pilih local disk system, pilih eclipse, dan klik icon eclipse tersebut. 

Gambar 3.7 Tampilan Windows Exlpore

            Kemudian mengisi nama project, memilih target platform versi android yang diinginkan  (pada pembuatan project ini penulis menggunakan android versi 2.2 agar dapat digunakan pada versi lainnya), mengisi nama aplikasi, package, activity, dan versi SDK.

Gambar 3.8 Tampilan New Android Project

3.5       Penggalan Program

Untuk pembuatan kode program disini menggunakan bahasa pemrograman java dengan bantuan aplikasi Eclipse Galileo versi Eclipse IDE untuk Java Developer, dengan langkah-langkah sebagai berikut: 

3.5.1        Pembuatan Splash Screen

Splash screen merupakan tampilan awal aplikasi sebelum masuk pada layar menu, dengan kode program sebagai berikut:

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:gravity="bottom"

    >

    

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:src="@drawable/gitaricon"

    android:layout_gravity="center"

    android:layout_marginBottom="90px"

    />

   

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="Loading ..."

    android:layout_marginBottom="10px"

    android:layout_gravity="center"

    >

  

   android:id="@+id/progg"

   android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    style="?android:attr/progressBarStyleHorizontal"

    />

Pada script "vertical"  menandakan layout yang akan kita buat dengan posisi vertical. Lalu pada "@drawable/gitaricon" kita akan menampilkan gambar yang akan muncul pada Interface Please Wait. Untuk menampilkan gambar tersebut simpan gambar tersebut pada folder drawable yang terdapat pada folder res. Sedangkan android:layout_gravity="center" berfungsi untuk mengatur letak gambar agar berada pada posisi tengah pada layar. Selanjutnya kita akan membuat tulisan pada interface Please Wait dengan mengetikkan script "Loading …". maka akan muncul tulisan “Loading  -” pada interface. Lalu untuk membuat sebuah gambar progress bar berikut ini scriptnya style="android:attr/progressBarStyleHorizontal". Setelah penulisan kode selesai maka akan muncul tampilan seperti ini :

 Gambar 3.9 Tampilan Splash Screen

Setelah selesai Pembuatan Layout Splash Screen, langkah selanjutnya adalah pembuatan kode program Splash Screen.

public class gitar extends Activity{

   private static int progress = 0;

   private int status = 0;

   ProgressBar progressBar;

   Handler handler = new Handler();

   public void onCreate(Bundle savedInstanceState){

      super.onCreate(savedInstanceState);

      setContentView(R.layout.main);

     

      progressBar = (ProgressBar) findViewById(R.id.progg);

     

      new Thread(new Runnable() {

         @Override

         public void run() {

            // TODO Auto-generated method stub

            while(status < 100){

               status = loading();

               handler.post(new Runnable() {

                 

                  @Override

                  public void run() {

                     // TODO Auto-generated method stub

                  progressBar.setProgress(status);  

                  }

               });     

            }

            handler.post(new Runnable() {

              

               @Override

               public void run() {

                  // TODO Auto-generated method stub

               Intent inten = new Intent(gitar.this, Menu.class);

                  gitar.this.startActivity(inten);

                  gitar.this.finish();

                 

Pada penggalan script terakhir public void run di sini kita membuat sebuah inten baru, dimana setelah splash screen ini. Otomatis akan membuka class java baru, sedangkan splash screen sendiri otomatis akan berakhir.

3.5.2        Pembuatan Menu

Selanjutnya pembuatan layar menu, dengan kode program sebagai berikut:

   xmlns:android="http://schemas.android.com/apk/res/android"

   android:layout_height="fill_parent"

   android:layout_width="fill_parent"

   android:padding="60dip"

   android:orientation="horizontal"

   android:background="@drawable/slash"

   android:gravity="center_vertical">

  

      android:orientation="vertical"

      android:layout_height="wrap_content"

      android:layout_width="fill_parent"

      android:layout_gravity="center">

     

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="MENU"

    android:layout_marginBottom="10px"

    android:layout_gravity="center"

    >

android:id="@+id/button_dasar"

android:src="@drawable/mulai"

android:layout_gravity="center"

android:layout_width="165px"

android:layout_height="55px">

android:id="@+id/button_balok"

android:src="@drawable/mulaii"

android:layout_gravity="center"

android:layout_width="165px"

android:layout_height="55px">

android:id="@+id/button_petunjuk"

android:src="@drawable/petunjuk"

android:layout_gravity="center"

android:layout_width="165px"

android:layout_height="55px">

android:id="@+id/button_keluar"

android:src="@drawable/exit"

android:layout_gravity="center"

android:layout_width="165px"

android:layout_height="55px">

Pada script kita memberikan variabel button_dasar pada widget button ini. Lalu script android:src="@drawable/mulai” untuk memanggil gambar dengan nama “mulai” pada button, sama halnya dengan button yang lain. Setelah selesai maka akan muncul tampilan seperti ini:

Gambar 3.10 Tampilan Menu

           

Pada menu.java ini kita mencoba untuk menjalankan interface yang telah kita buat pada main.xml, dengan mengetikkan script berikut ini:

package com.dhindhin;

import android.app.Activity;

import android.os.Bundle;

import android.content.Intent;

import android.view.View;

import android.view.View.OnClickListener;

public class Menu extends Activity implements OnClickListener {

      /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.menu);

     // Set up click listeners for all the buttons

        View dasarButton = findViewById(R.id.button_dasar);

        dasarButton.setOnClickListener(this);

        View balokButton = findViewById(R.id.button_balok);

        balokButton.setOnClickListener(this);

        View petunjukButton = findViewById(R.id.button_petunjuk);

        petunjukButton.setOnClickListener(this);

        View keluarButton = findViewById(R.id.button_keluar);

        keluarButton.setOnClickListener(this);

    }

Pada menu.java ini kita menggunakan interface main.xml setContentView(R.layout.main); lalu kita deklarasikan widget – widget yang telah kita buat di file xml yakni, dasarButton akan mendeklarasikan variabel button_dasar pada file xml. Begitu juga dengan balokButton, petunjukButton dan keluarButton akan mendeklarasikan variabel button_balok, button_petunjuk dan button_keluar pada file xml.

    public void onClick(View v) {

       switch (v.getId()) {

        case R.id.button_dasar:

            Intent dasar = new Intent(this, dasar.class);

            startActivity(dasar);

            break;

                

        case R.id.button_balok:

           Intent balok = new Intent(this, balok.class);

          startActivity(balok);

           break;

        case R.id.button_petunjuk:

            Intent tentang = new Intent(this, tentang.class); 

           startActivity(tentang);

            break;

          

        case R.id.button_keluar:

            finish();

            break; 

        }

    }

}

Disini penulis menggunakan kendali proses dengan menggunakan statement switch yang berfungsi sebagai pilihan. Disini penulis membuat empat buah pilihan yakni dasar, balok, petunjuk dan keluar. Jika kita memilih dasar maka kita akan masuk ke kelas java baru dengan nama dasar.class. Sedangkan jika kita memilih balok maka kita akan masuk ke kelas java baru yakni balok.class. Jika kita memilih keluar maka kita akan keluar dari aplikasi ini.

3.5.3        Pembuatan Kunci Dasar

Kode program pembuatan kunci dasar sebagai berikut:

android:id="@+id/widget0"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@drawable/slash"

xmlns:android="http://schemas.android.com/apk/res/android"

> 

android:id="@+id/txtinput"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:textSize="18sp"

>

android:id="@+id/widget36"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

android:layout_x="1px"

android:layout_y="50px"

> 

android:id="@+id/radio_mayor"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Major"

> 

android:id="@+id/radio_minor"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Minor"

> 

android:id="@+id/button_konversi"

android:layout_width="75px"

android:layout_height="70px"

android:text="Klik"

android:layout_x="30px"

android:layout_y="215px"

>

android:id="@+id/btnKembali"

android:text="Kembali"

android:layout_gravity="center_horizontal"

android:layout_width="75px"

android:layout_height="70px"

android:onClick="BackMainMenu"

android:layout_x="140px"

android:layout_y="215px"

>

Pada widget EditText di atas berfungsi untuk menginput data yang dimasukkan oleh pengguna. EditText tersebut kita beri variabel dengan nama  txtinput. Pada Interface ini kita membuat dua buah RadioButton dengan nama Major dan Minor. Dan dengan nama variabel radio_mayor dan radio_minor.

Fungsi dari RadioGroup untuk mengelompokkan kedua RadioButton yang sudah dibuat kedalam satu kelompok. Artinya kita hanya memilih salah satu dari kedua RadioButton. Sedangkan RadioButton yang lain akan false. Pada RadioGroup terdapat script android:orientation="vertical" yang berfungsi untuk mengatur letak RadioButton secara vertical. Maka kedua RadioButton akan berderet dari atas ke bawah. Sedangkan script android:layout_x="1px" dan android:layout_y="50px" untuk mengatur posisi kedua RadioButton pada layout secara horizontal dengan nilai x=1 dan vertical dengan nilai y=50

            Sedangkan pada Button terdapat script android:layout_width="75px" android:layout_height="70px" untuk mengatur ukuran Button, seperti di bawah ini:

Gambar 3.11 Tampilan Kunci Dasar

Setelah selesai pembuatan Layout Kunci Dasar, langkah selanjutnya adalah pembuatan kode programnya, pembuatan kode program ini dibuat agar tampilan layout Kunci Dasar yang telah dibuat dapat dijalankan dengan source code sebagai berikut:

package com.dhindhin;

import android.app.Activity;

import android.database.Cursor;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.EditText;

import android.widget.ImageView;

import android.widget.RadioButton;

import android.widget.Toast;

public class dasar extends Activity implements OnClickListener{

    private EditText txtinput;

    RadioButton radio_mayor;

       RadioButton radio_minor;

       

       Button button_konversi;

       Button btnKembali;

     /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        

        setContentView(R.layout.dasar);

        txtinput = (EditText) findViewById(R.id.txtinput);

        radio_mayor = (RadioButton)this.findViewById(R.id.radio_mayor);

        radio_mayor.setChecked(true);

        radio_minor = (RadioButton)this.findViewById(R.id.radio_minor);

        button_konversi = (Button)this.findViewById(R.id.button_konversi);

        button_konversi.setOnClickListener(this);

    }

        public void onClick(View v) {

            if (radio_mayor.isChecked()) {

                  mayor();

            }

            if (radio_minor.isChecked()) {

                  minor();

            }

        }

Disini penulis menggunakan sebuah gambar. Lalu penulis juga membuat dua buah radio button dengan nama Major dan Minor. Major kita buat secara default bernilai true pada saat aplikasi ini dijalankan sedangkan radio button yang lain akan false.

        protected void mayor() {

            try {

                  String kunci = txtinput.getText().toString();

                  if (kunci.equals("A")){

                      Toast toastGambar = new Toast(this);

                      ImageView iv = new ImageView(this);

                      iv.setImageResource(R.drawable.amajor);

                      toastGambar.setView(iv);

                      toastGambar.show();}

                        else if (kunci.equals("C")){

                        Toast toastGambar = new Toast(this);

                          ImageView iv = new ImageView(this);

                          iv.setImageResource(R.drawable.cmajor);

                          toastGambar.setView(iv);

                          toastGambar.show();}

                      . . . . .    

                        else {           

                              Toast.makeText(getBaseContext(), "andak salah menginput", Toast.LENGTH_SHORT).show();    }

            }catch (Exception e) {

                e.printStackTrace();}}

Penulis akan membuat variable baru dengan nama kunci bertipe string. Nilai variabel kunci di dapat dari txtkunci. Kemudian penulis menggunakan statement if-else untuk percabangan untuk mengecek variabel kunci.

3.5.4        Pembuatan Kunci Balok

Kode program pada pembuatan kunci balok sama dengan pembuatan kunci dasar yang membedakan hanya pada tampilan kunci gitarnya saja, dengan kode program sebagai berikut:

android:id="@+id/widget0"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@drawable/slash"

xmlns:android="http://schemas.android.com/apk/res/android"

> 

android:id="@+id/txtinput"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:textSize="18sp"

>

android:id="@+id/widget36"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

android:layout_x="1px"

android:layout_y="50px"

> 

android:id="@+id/radio_mayor"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Major"

> 

android:id="@+id/radio_minor"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Minor"

> 

android:id="@+id/button_konversi"

android:layout_width="75px"

android:layout_height="70px"

android:text="Klik"

android:layout_x="30px"

android:layout_y="215px"

>

android:id="@+id/btnKembali"

android:text="Kembali"

android:layout_gravity="center_horizontal"

android:layout_width="75px"

android:layout_height="70px"

android:onClick="BackMainMenu"

android:layout_x="140px"

android:layout_y="215px"

>

Pada widget EditText di atas berfungsi untuk menginput data yang dimasukkan oleh pengguna. EditText tersebut kita beri variabel dengan nama  txtinput. Pada Interface ini kita membuat dua buah RadioButton dengan nama Major dan Minor. Dan dengan nama variabel radio_mayor dan radio_minor.

Fungsi dari RadioGroup untuk mengelompokkan kedua RadioButton yang sudah dibuat kedalam satu kelompok. Artinya kita hanya memilih salah satu dari kedua RadioButton. Sedangkan RadioButton yang lain akan false. Pada RadioGroup terdapat script android:orientation="vertical" yang berfungsi untuk mengatur letak RadioButton secara vertical. Maka kedua RadioButton akan berderet dari atas ke bawah. Sedangkan script android:layout_x="1px" dan android:layout_y="50px" untuk mengatur posisi kedua RadioButton pada layout secara horizontal dengan nilai x=1 dan vertical dengan nilai y=50

            Sedangkan pada Button terdapat script android:layout_width="75px" android: layout_height= "70px" untuk mengatur ukuran Button. Setelah selesai maka akan tampil layout seperti ini:

Gambar 3.12 Tampilan Kunci Balok

Selanjutnya membuat kode program java untuk memroses inputan, dengan kode program sebagai berikut:

package com.dhindhin;

import android.app.Activity;

import android.database.Cursor;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.EditText;

import android.widget.ImageView;

import android.widget.RadioButton;

import android.widget.Toast;

public class balok extends Activity implements OnClickListener{

    private EditText txtinput;

    RadioButton radio_mayor;

       RadioButton radio_minor;

       Button button_konversi;

       Button btnKembali;

   

     /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.balok);

        txtinput = (EditText) findViewById(R.id.txtinput);

        radio_mayor = (RadioButton)this.findViewById(R.id.radio_mayor);

        radio_mayor.setChecked(true);

        radio_minor = (RadioButton)this.findViewById(R.id.radio_minor);

        button_konversi = (Button)this.findViewById(R.id.button_konversi);

        button_konversi.setOnClickListener(this); }

        public void onClick(View v) {

            if (radio_mayor.isChecked()) {

                  mayor();

            }

            if (radio_minor.isChecked()) {

                  minor();

            } }

Disini penulis menggunakan sebuah gambar. Lalu penulis juga membuat dua buah radio button dengan nama Major dan Minor. Major kita buat secara default bernilai true pada saat aplikasi ini dijalankan sedangkan radio button yang lain akan false.

        protected void mayor() {

            try {

                  String kunci = txtinput.getText().toString();

                  if (kunci.equals("A")){

                      Toast toastGambar = new Toast(this);

                      ImageView iv = new ImageView(this);

                      iv.setImageResource(R.drawable.a);

                      toastGambar.setView(iv);

                      toastGambar.show();}

                        else if (kunci.equals("B")){

                        Toast toastGambar = new Toast(this);

                          ImageView iv = new ImageView(this);

                          iv.setImageResource(R.drawable.b);

                          toastGambar.setView(iv);

                          toastGambar.show();}

                        else if (kunci.equals("C")){

                              Toast toastGambar = new Toast(this);

                                ImageView iv = new ImageView(this);

                                iv.setImageResource(R.drawable.c);

                                toastGambar.setView(iv);

                                toastGambar.show();}

. . . .

                        else {

                               Toast.makeText(getBaseContext(), "andak salah menginput", Toast.LENGTH_SHORT).show();

                          }

            }catch (Exception e) {

                e.printStackTrace();              }

        }

Penulis akan membuat variable baru dengan nama kunci bertipe string. Nilai variabel kunci di dapat dari txtkunci. Kemudian penulis menggunakan statement if-else untuk percabangan untuk mengecek variabel kunci.

3.5.5        Pembuatan Petunjuk

Agar memudahkan pengguna dalam menggunakan aplikasi ini, maka di buat menu petunjuk pada layar menu yang berisikan petunjuk dan informasi pada aplikasi ini. Dengan kode program sebagai berikut:

  xmlns:android="http://schemas.android.com/apk/res/android"

  android:orientation="vertical"

  android:layout_width="fill_parent"

  android:layout_height="fill_parent"

  android:background="@drawable/cara"

   >

Setelah mengetikkan kode program tersebut maka akan muncul layar sebagai berikut:

Gambar 3.13 Tampilan Petunjuk

Setelah membuat tampilan layout petunjuk, maka langkah selanjutnya adalah membuat tombol kembali pada program java dengan kode program sebagai berikut:

package com.dhindhin;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

public class tentang extends Activity {

      private Button btnKembali;

     

      @Override

      public void onCreate(Bundle savedInstanceState){

      super.onCreate(savedInstanceState);

      setContentView(R.layout.tentang);

      btnKembali = (Button) findViewById(R.id.btnKembali);

      }

       public void BackMainMenu(View view){

                  finish();

                  }

      }

3.6       Uji Coba Aplikasi

Setelah proses pembuatan aplikasi selesai, langkah terakhir yang harus dilakukan adalah uji coba aplikasi pada komputer. Sebelum melakukan uji coba, penulis memastikan terlebih dahulu apakah program tersebut terdapat kesalahan atau tidak. Jika semua coding sudah benar, maka siap untuk dilakukan uji coba.

Pilih package ChordGitar yang ada pada workspace, kemudian klik kanan, pilih run as, Android Application.

Gambar 3.14 Tampilan menu Run As Application

Setelah proses kompilasi program berhasil maka akan muncul emulator untuk menampilkan aplikasi yang telah dibuat.

Gambar 3.15 Tampilan Menu Emulator

3.7       Implementasi Aplikasi

Setelah proses kompilasi berhasil dan aplikasi dapat berjalan pada emulator Android, yang dilakukan selanjutnya adalah mengimplementasikan aplikasi ini pada ponsel yang memiliki sistem operasi android dengan versi Android 2.2 (Froyo). Langkah pertama adalah instal software APKInstaller pada komputer, lalu hubungkan ponsel android dengan komputer. Kemudian salin ke dalam ponsel file Kord Gitar.apk yang terdapat pada folder bin di dalam folder aplikasi yang terletak pada workspace Eclipse di komputer.

Gambar 3.16 File Kord Gitar.apk

Setelah disalin, proses selanjutnya adalah pilih tombol Install pada jendela APKInstaller yang muncul.

Gambar 3.17 Proses Instalasi Aplikasi ke Ponsel Android

Kemudian tunggu sampai proses instalasi selesai dan aplikasi Kord Gitar telah dapat digunakan pada ponsel android.

Gambar 3.19 Aplikasi Kord Gitar Pada Ponsel Android