Kamis, 19 April 2012

Pembuatan Aplikasi Mobile "Learning Transportation Equipment Berbasis Android"

   Dewasa ini, penggunaan telepon genggam atau handphone semakin pesat. Maraknya penggunaan handphone semakin memicu berkembangnya aplikasi didalam handphone tersebut. Karena berkembangnya aplikasi, jenis handphone smartphone pun sedang marak digandrungi oleh masyarakat. Smartphone merupakan istilah dari handphone (cellular phone) dengan kemampuan multimedia dan komputing yang lebih advance daripada handphone pada umumnya.
    Pada saat ini, sebagian bersar masyarakat menggunakan smartphone yang bersistem operasi Android. Aplikasi-aplikasi di dalam Android relatif mudah digunakan oleh semua kalangan. Karena fitur-fitur yang sangat sederhana sehingga  lebih cepat dalam hal penggunaan. Selain itu, aplikasi Android juga open source (gratis) sehingga banyak orang dapat membuat aplikasi sendiri ataupun mengunduhnya tanpa biaya. Aplikasi Android juga dapat digunakan untuk berinteraksi sesama handphone lainnya dan dapat digunakan sebagai media pembelajaran untuk setiap orang.
     Dengan kemajuan teknologi tersebut, aplikasi android dapat mendukung pendidikan anak-anak. Pendidikan saat ini tidak hanya didapat dari kegiatan sekolah, ekstrakurikuler, maupun dari tempat kursus belajar lainnya. Pendidikan juga dapat diajarkan tidak hanya dari guru maupun mentor tetapi seorang siswa pun dapat belajar sendiri. Untuk itu perlu alat pembelajaran yang khusus, dalam arti dapat digunakan dan dimengerti dengan mudah oleh penggunanya.
     Salah satu caranya adalah “Learning Transportation Equipment”. Aplikasi ini merupakan aplikasi mobile berbasis Android yang berfungsi untuk mengajarkan kepada anak-anak mengenai jenis alat transportasi yang ada di sekitar kita dalam bahasa Inggris. Dengan aplikasi ini, anak-anak dapat mengetahui alat transportasi melalu gambar-gambar yang sudah disediakan, tulisan nama alat transportasi tersebut, serta suara untuk mengeja alat transportasi dalam bahasa Inggris, sehingga anak-anak dapat belajar dengan cara yang lebih santai dan lebih menarik. 



1. Rancangan Input / Output
   Learning Transportation Equipment adalah sebuah aplikasi yang dibuat dengan dasar pemrograman Java pada sebuah sistem operasi Android. Dasar pembuatan aplikasi ini adalah dengan teori-teori yang diambil dari beberapa buku yang memuat tentang dasar-dasar pemrograman berbasis Android dan buku-buku mengenai berbagai macam alat transportasi. Di dalam aplikasi Android terdapat penginstalan emulator Android itu sendiri. Dalam aplikasi ini, terdapat menu – menu standar seperti halnya pada Android lainnya, yaitu Start, About dan Exit.

2. Rancangan Tampilan Menu
     Secara umum aplikasi Learning Transportation Equipment ini hanya menampilkan 3 bagian, yaitu bagian Start, About dan Exit. Rancangan tampilan menu aplikasi adalah sebagai berikut :
3. Rancangan Tampilan Start
    Pada tampilan Start, pengguna akan melihat tampilan bagian utama dari aplikasi ini, yaitu beberapa pilihan Image Button. Dimana nantinya Image Button  tersebut akan terhubung dengan gambar alat transportasi yang disesuaikan dengan gambar button nya. Berikut adalah rancangan tampilan pada button Start :

4.  Rancangan Tampilan About
    Pada tampilan About ini akan digambarkan tampilan berupa kotak teks dari tombol button About. Berikut ini adalah rancangan tampilan teks dari tampilan tombol About
5. Rancangan Tampilan Image Button Alat Transportasi
Gambar 3.4 merupakan gambaran untuk halaman image button alat trasnportasi yang akan terlihat jika kita klik image button alat transportasi tersebut. Misalnya kita memilih button airplane. Maka akan terlihat tampilan gambar airplane/ pesawat dengan tulisan kata “airplane”. Lalu pada bagian bawah terlihat button listen. Dimana fungsi button ini adalah untuk menjalankan suara orang yang mengeja alat tranportasi tersebut. 
6. Langkah - Langkah Pembuatan Aplikasi Learning Transportation Equipment
  Pada bagian ini penulis akan menjelaskan tentang pembuatan aplikasi Learning Transportation Equipment secara garis besar

7. Pembuatan Project Awal
  Untuk membuat project awal Android dibutuhkan Android SDK dan emulator phone. Penulis menggunakan IDE Eclipse sebagai Java development environment sekaligus merupakan interface dengan emulator Android melalui plug-in Android Development Toolkit (ADT). Disini akan dijelaskan tahap dalam pembuatan project untuk pertama kali dan pembuatan AVD (Android Virtual Device) serta menjalankan aplikasi di emulator Tahap pertama adalah membuat project baru, dengan langkah sebagai berikut:

  Pilih File >> New >> Project pada Eclipse untuk membuka project baru. Kemudian pilih Android > Android Project, dan klik Next.
Setelah memilih Project Android maka akan ada jendela seperti ini:

Kemudian Masukan informasi di bawah ini:
Project name               : LearningTransportation
Build Target                : Android 1.6
Application name        : Learning Transportation Equipment
Package name             : com.transportation
Create Activity           : LearningTransportation
Setelah selesai plug-in Android akan membuat project dan default file. Package akan siap di execute. Setelah itu adalah tahap penulisan program dan pengujian dengan menjalankan AVD.
   
   Pada Package Explorer di Eclipse terdapat folder aplikasi Learning Transportation Equipment. Untuk memulai penulisan program aplikasi, buka folder aplikasi Learning Transportation Equipment kemudian buka src >> com.nopha >> LearningTransportationEquipment.java. Untuk membuat interface tampilan pada aplikasi, buka folder res >> layout >> main.xml.

   Setelah selesai melakukan penulisan program langkah selanjutnya adalah menjalankan program aplikasi Android. Klik kanan pada folder aplikasi di Package Explorer window, pilih Run As>Android Application.

8. Pembuatan Activity Diagram
    

9.  Penulisan Kode-kode Pembuatan Aplikasi Learning Transportation Equipment
9.1 Kode Pada Java Dalam Pembuatan Tampilan Menu
package com.transportation;
import android.app.Activity;
import android.os.Bundle;
import android.content.Intent;
import android.view.View;
import android.view.View.OnClickListener;
………………………
Potongan Kode di atas adalah sebagai kamus yang di dalamnya terdapat perintah-perintah yang akan digunakan saat membuat aplikasi Learning Transportation Equipment.

        public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        View enterButton = findViewById(R.id.Button_start);

        enterButton.setOnClickListener(this);
       
        View aboutButton = findViewById(R.id.Button_about);

        aboutButton.setOnClickListener(this);

        View exitButton = findViewById(R.id.Button_exit);

       exitButton.setOnClickListener(this);
       
    }

   
   
                 public void onClick(View v) {
                                 
                       switch (v.getId()) {

                        
                case R.id.Button_start:

                                Intent mainmenu = new Intent(this, start.class);

                            startActivity(mainmenu);

                            break;

                                 
                        case R.id.Button_about:

                           Intent about = new Intent(this, about.class);
                 
                          startActivity(about);

                           break;
                           
                                           
                        case R.id.Button_exit:

                            finish();

                            break;
                            
                       }
                 }
}


Pada kode diatas merupakan bentuk pemanggilan pada Java untuk dapat memanggil tombol-tombol button yang telah dibuat pada bagian layout XML.
Tampilan Menu Utama
9.2  Kode Pada Java Dalam Pembuatan Tampilan Start
              package com.transportation;
import android.app.Activity;
      import android.content.Intent;
      import android.os.Bundle;
      import android.view.View;
      import android.view.View.OnClickListener;
     ………………………………………..
Pengkodean di atas merupakan library dari perintah-perintah yang digunakan pada bagian start.java ini.
              @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.start);

     // Set up click listeners for all the buttons

       
        View enterButton = findViewById(R.id.AirPlane);

        enterButton.setOnClickListener(this);
       
               
        View enter2Button = findViewById(R.id.iconbycicle);

        enter2Button.setOnClickListener(this);
       
       
        View enter3Button = findViewById(R.id.iconbus);

                         enter3Button.setOnClickListener(this);
       
       
     ……………………………………………………………
Potongan-potongan kode di atas merupakan pendeklarasian beberapa Image button yang ada pada start.xml.
    public void onClick(View v) {
                                 
               switch (v.getId()) {

                       
                        case R.id.AirPlane:

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

                            startActivity(airplane);

                            break;
                           
                        case R.id.iconbycicle:
                                Intent iconbycicle = new Intent (this,bicycle.class);
                                startActivity(iconbycicle);
                                break;
                               
                        case R.id.iconbus:
                                Intent iconbus = new Intent (this,bus.class);
                                startActivity(iconbus);
                                break;
      …………………………………………………………………….
Potongan kode di atas merupakan bagian pemanggilan tiap button yang terdapat pada layout start.

Tampilan Menu Start

9.3 Kode Pada Java dalam pembuatan Tampilan About
package com.transportation;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class about extends Activity {
               

private Button backabout;
               
        @Override

        public void onCreate(Bundle savedInstanceState){

        super.onCreate(savedInstanceState);

        setContentView(R.layout.about);
       
        backabout = (Button) findViewById(R.id.backabout);
        }

         public void BackMainMenu(View view){

                                        finish();

                                        }

}

 Pada potongan koding di atas dapat menampilkan layout about dengan cara menghubungkan layout tersebut kepada class About. Serta menghubungkan button back yang ada pada layout tersebut sehingga button back dapat kembali ke menu start.


Tampilan About
9.4 3.4.1        Kode Pada Java dalam Pembuatan Tampilan Image Button Airplane
package com.transportation;

import android.app.Activity;
import android.content.Intent;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class airplane extends Activity implements OnClickListener{
               
                Button play;
                private MediaPlayer player;
                private static final String is = "this is ";
@Override
public void onCreate(Bundle savedInstanceState) {

                super.onCreate(savedInstanceState);

                  setContentView(R.layout.plane);
 

                 play =(Button) this.findViewById(R.id.Buttonairplane);

                                 
                  View enterButtonAirplane = findViewById(R.id.Buttonairplane);

                 enterButtonAirplane.setOnClickListener(this);
   
                View enterButtonBackPlane = findViewById(R.id.backairplane);

                enterButtonBackPlane.setOnClickListener(this);
               
                }

                                public void onClick(View v) {
                               
                                switch (v.getId()) {
                               
                                case R.id.backairplane:
                Intent backairplane = new Intent(this, start.class);
                 startActivity(backairplane);
                 break;
               
                                case R.id.Buttonairplane:
                                                Toast.makeText(this, is+"Air Plane", Toast.LENGTH_LONG).show();
                                                player = MediaPlayer.create(this, R.raw.airplain);
                                                player.start();
        break;
               
                                                 }
};
}
               
   Pada potongan program di atas, terdapat perintah button play. Fungsinya adalah untuk memasukkan suara ke dalam button listen. Button listen pada program di atas dihubungkan kepada file suara yang di R.raw. Sehingga apabila button listen di tekan, akan terdengar suara “airplane” dengan tulisan “this is airplane”. Dan terdapat pula button back yang berfungsi untuk mengembalikan tampilan ke sebelumnya.     
Tampilan Image Button Airplane

            




Tidak ada komentar:

Posting Komentar