Pada kali ini kita akan membahas lebih dalam mengenai pembuatan Aplikasi Game Memory Face dengan Eclipse menggunakan SDK android untuk menjadi emulatornya. Dalam proses perancangan pembuatan Aplikasi Game Memory Face ini terdiri dari beberapa tahap, yaitu tahap rancangan tampilan program dan tahap pembuatannya(source code).
Pada tahap Analisa Program akan menjelaskan gambaran umum dari aplikasi game Memory Face yang dibuat yang mencakup didalamnya adalah 5W dan 1H. Selanjutnya tahap Pembahasan Masalah akan dijelaskan tujuan dari penulisan yang dibuat oleh penulis dan semua perancangan yang telah dibuat dengan UML dan desain interfacenya. Dan dilanjutkan tahap Pembuatan Aplikasi yaitu dengan membuat codding dan sesuaikan dengan mengimplementasikan rancangan yang telah dibuat sebelumnya menjadi aplikasi yang dapat digunakan pada media komunikasi bergerak pada khususnya telephone selular, yaitu telephone selular yang berbasiskan android sebagai sistem operasinya, sesuai dengan versi yang compitable dengan versi yang dibuat pada aplikasi ini. Tahap terakhir adalah tahap Pengujian Game, disini penulis mengujinya pada emulator android sebelum langsung diinstal pada telephone yang bersistem operasi android. Dibawah ini adalah gambaran jelas tahap-tahap yang akan dibuat.
Gambar 2.1 Tahap Pembuatan Aplikasi Game Memory Face
1. Analisa Program
Kita akan membuat sebuah aplikasi game yang dapat digunakan pada telphone selular yaitu Memory Face. Cara menggunakannya adalah pengguna aplikasi ini akan melakukan pilihan pada mode permainan. Pada Memory Face tersebut terdapat 21 wajah teman-teman dari penulis untuk dijadikan media pengingat pada game ini. Game Memory Face ini pun sangat mudah untuk dimainkan yaitu, pemain hanya mencocokan semua wajah yang ada dalam permainan ini apabila salah maka skor pada akan bertambah dan itu menunjukan bahwa daya ingat pemain kurang semakin banyak point semakin buruk daya ingat pemain. Jika berhasil dan cocok wajah yang dipilih maka akan hilang dan menyisakan kartu yang harus ditebak dalam permainan ini hingga habis tidak menyisakan satu kartu pun yang ada dalam papan permainan.
Pembuatan aplikasi game Memory Face ini bertujuan untuk media hiburan pada mobile ponsel Android dan dalam pembuatan game ini memiliki unsur 5W dan 1H yaitu :
· Aplikasi game ini hanya ditujukan kepada pemakai mobile ponsel Android dan lebih mendasar kepada pemakai yang menyukai game sederhana dan unik.
· Pembuatan aplikasi dibuat disaat banyaknya pemakai mobile ponsel Android yang sekarang telah menjamur dan menjadi revolusi ponsel sebelumnya. Dikarenakan mudahnya pembuatan aplikasi ini dan tentunya tidak berbayar (open source).
· Aplikasi game ini hanya dapat dimainkan di mobile ponsel Android.
· Karena pengembangan aplikasi pada mobile Android berbasiskan open source (gratis), maka penulis membuat suatu aplikasi game untuk ponsel Android.
· Aplikasi game ini dibuat pada sdk android dan semua coding program dibuat pada eclipse yang berbasiskan dengan java. Dan diuji coba pada emulator.
2. Pembahasan Masalah
Pada pembahasan sub ini akan dibuat rancangan aplikasi dengan menggunakan UML (Unified Modeling Language). Rancangan menggunakan UML ini dimaksudkan agar memudahkan dalam membuat model untuk semua jenis aplikasi perangkat lunak, khususnya aplikasi yang ditulis menggunakan bahasa pemrograman yang berorientasi objek, namun bisa digunakan untuk modeling aplikasi prosedural. UML yang akan di gunakan dalam perancangan game ini ada 4, yaitu : Use Case Diagram, Class Diagram, Activity Diagram dan Sequence Diagram.
2.1 Use Case Diagram
Use Case merupakan skenario (serangkain langkah yang menggambarkan interaksi antar user dan system) yang terikat bersama oleh suatu tujuan yang sama dengan pengguna. USE Case menggambarkan pola prilaku software aplikasi, termasuk adanya urutan interaksi antar actor dengan software aplikasi tersebut. USE Case digunakan utnuk menunjukan hubungan (relationship) antar actor sebagai pengguna system dengan USE Case yang digunakan. USE Case dilakukan setidak-tidaknya oleh satu actor yang dipresentasikan dengan simbol orang yang dihubungkan dengan garis yang menunjukan hubungan komunikasi. Setiap USE Case harus diberinama yang menyatakan apa hal yang dicapai dari hasil interaksi dengan Actor. Nama USE Case boleh terdiri dari beberapa kata dan tidah boleh ada USE Case yang memiliki nama yang sama.
Gambar 2.2 Use Case Diagram Game Memory Face
Use Case yang digunakan untuk Game Memory Face terbagi tujuh use case yang digunakan oleh Pemain. Ketujuh use case tersebut adalah Tampilan awal, New Game, pilihan 4x4, pilihan 4x5, pilihan 4x6, pilihan 5x6 dan pilihan 6x6 . Use Case yang pertama adalah use case Tampilan Awal pemain bisa melihat tampilan awal yang berisi credit / website dari perancang game. Use case yang kedua yaitu New Game, pemain dapat memilih langsung bermain game Memori Face dengan banyak pilihan. Ketiga yaitu use case 4x4, pemain bisa langsung memainkan menu ini, yang terdiri dari empat baris dan empat kolom. Keempat yaitu use case 4x5, pemain bisa langsung memainkan menu pilihan ini, yang terdiri dari empat baris dan lima kolom kartu Memory Face. Kelima yaitu use case 4x6, yang terdiri dari empat baris dan enam kolom. Keenam yaitu use case 5x6, yang terdiri dari lima baris dan enam kolom. Dan terakhir adalah use case 6x6, yang terdiri dari 6 kolom dan enam baris kartu memory face.
2.2 Class Diagram
Diagram kelas menggambarkan tipe-tipe objek dalam system dan berbagai jenis hubungan atau relasi statis yang ada diantara mereka. Diagram ini memberikan gambaran umum dari sistem. Seperti tipe-tipe dari objek dengan menunjukan kelasnya dan relationship yang diantara mereka, serat penjelasan detail tiap-tiap kelas ke dalam model suatu system. Class diagram bersifat static (tidak berubah) yang akan menunjukan apa itu interaksi tapi tidak menjelaskan apa yang terjadi ketika mereka melakukan interaksi.Diagram ini memberikan gambaran umum dari system. Berikut ini adalah class diagram dari game MemoryFace :
Gambar 2.3 Class Diagram Game memory Face
Pada gambar class diagram diatas, bisa dilihat bahwa terdapat lima buah class dan package. Kelima class diatas adalah class Tampilan Menu, class Memory Face, class GamePlay, class Player dan class Optional. Sedangkan package atau modul yang digunakan adalah modul Eclipse. Class Memory Face, class GamePlay, class Player, ketiga class tersebut memiliki keterhubungan, hal ini dapat dilihat pada diagram diatas bahwa class Tampilan awal memiliki hubungan dengan class Memory Face, class Memory Face memiliki hubungan dengan class GamePlay, class GamePlay memiliki hubungan dengan class optional. Selain keterhubungan link, class tersebut juga ada hubungan generalisasi antara ketiga class dengan package Eclipse pada class diagram diatas. Ketiga class yang memiliki keterhubungan dengan package eclipse adalah class class memory face, class GamePlay, class Player.
2.3 Activity Diagram
Activity diagram memodelkan alur kerja (work flow) dan bisa di sebut juga dengan tekhnik untuk mendeskripsikan logika procedural dan urutan aktifitas dalam suatu proses
Gambar 2.4 Activity Diagram Game memory Face
Acivity diagram memodelkan alur kerja (work flow) dan bisa disebut juga teknik untuk mendeskripsikan logika procedural dan urutan aktifitas dalam suatu proses. Pada activity diagram di atas, pada saat status insial awal program akan menampilkan tampilan menu yang bisa melakukan dua action pilihan menu yaitu New Game dan Exit. Jika memilih Exit maka aktifitas berkakhir dan aplikasi akan keluar dengan sendirinya. Pilihan menu yang New Game, pada menu ini pemain bisa memilih pilihan model permainan Memory Face, apabila memilih salah satu dari kategori tersebut akan langsung memainkan game sesuai dengan kategori yaitu, kategori 4x4, 4x5, 4x6, 5x6, 6x6. Setelah memilih kategori teersebut akan langsung bermain dan kemudian apabila permainan telah berkhir akan ada kondisi yaitu, exit atau new game. Jika memilih new game akan kembali lagi dalam permaianan dan ketika memilih exit akan langsung mengakhiri permainan tesebut dan tidak ada lagi aktifitas.
2.4 Sequence Diagram
Diagram sequence merupakan gambaran interaksi antar objek di dalam dan di sekitar sistem berupa massage yang digambarkan terhadap waktu. Diagram ini secara khusus berasosiasi dengan use Case. Diagram sequence juga digunakan untuk menggambarkan skenario atau rangkain langkah-langkah apa yang seharusnya terjadi sebagai respons dari sebuah event untuk menghasilkan sesuatu didalam Use case sebagai output. Untuk massage digambarkan sebagai garis berpanah dari satu objek ke objek lainnya. Pada fase desain berikutnya, message dipetakan menjadi operasi/metode dari class. Activation bar menunjukan lamanya eksekusi sebuat proses, biasanya diawali dengan sebuah message. Berikut ini adalah sequence diagram Memory Face.
Gambar 2.5 Sequence Diagram Game memory Face
Pada sequence diagram diatas, terdapat interaksi antar objek satu terhadap objek lainnya berupa massage yang di jelaskan pada anak panah tersebut.
2.5 Perancangan User Interface I/O
Gambar 2.6 Desain I/O
Dari gambar 2.6 dapat dilihat tampilan desain I/O dari permainan ini, berikut adalah penjelasannya:
1. Judul Game
2. Menu option 4x4
3. Menu option 4x5
4. Menu option 4x6
5. Menu option 5x6
6. Menu option 6x6
2.6 Rancangan Menu Option 4x4
Gambar 2.7 Tampilan Menu Option 4x4
Dari gambar 2.7 dapat dilihat tampilan desain I/O dari permainan ini, berikut adalah penjelasannya:
- Card (kartu) yang digunakan untuk bermain, yang berisikan face (wajah).
- Menu tries (percobaan) berapa kali mencoba membuka kartu yang ditutup.
- Menu bar untuk New Game dan optional permainan.
2.7 Rancangan Menu Option 4x5
Gambar 2.8 Tampilan Menu Option 4x5
Dari gambar 2.8 dapat dilihat tampilan desain I/O dari permainan ini, berikut adalah penjelasannya:
- Card (kartu) yang digunakan untuk bermain, yang berisikan face (wajah).
- Menu tries (percobaan) berapa kali mencoba membuka kartu yang ditutup.
- Menu bar untuk New Game dan optional permainan.
2.8 Rancangan Menu Option 4x6
Gambar 2.9 Tampilan Menu Option 4x6
Dari gambar 2.9 dapat dilihat tampilan desain I/O dari permainan ini, berikut adalah penjelasannya:
- Card (kartu) yang digunakan untuk bermain, yang berisikan face (wajah).
- Menu tries (percobaan) berapa kali mencoba membuka kartu yang ditutup.
- Menu bar untuk New Game dan optional permainan.
2.9 Rancangan Menu Option 5x6
Gambar 2.10 Tampilan Menu Option 5x6
Dari gambar 2.10 dapat dilihat tampilan desain I/O dari permainan ini, berikut adalah penjelasannya:
- Card (kartu) yang digunakan untuk bermain, yang berisikan face (wajah).
- Menu tries (percobaan) berapa kali mencoba membuka kartu yang ditutup.
- Menu bar untuk New Game dan optional permainan.
2.10 Rancangan Menu Option 6x6
Gambar 2.11 Tampilan Menu Option 6x6
Dari gambar 2.11 dapat dilihat tampilan desain I/O dari permainan ini, berikut adalah penjelasannya:
- Card (kartu) yang digunakan untuk bermain, yang berisikan face (wajah).
- Menu tries (percobaan) berapa kali mencoba membuka kartu yang ditutup.
- Menu bar untuk New Game dan optional permainan.
3.1 Hardware dan Software yang digunakan
Peralatan pendukung yang penulis gunakan untuk membuat aplikasi “Game memory face pada Android” ini adalah sebuah PC (Personal Computer) yang terdiri atas hardware dan software.
Hardware yang digunakan adalah sebagai berikut:
· Processor Intel Pentium IV 3.0 GHz
· Monitor 14’’
· RAM 1024 MB
· 2048 MB sisa kapasitas harddisk
· Keyboard, mouse.
Software yang digunakan adalah sebagai berikut:
· Microsoft Windows xp sebagai sistem operasi
· jdk-6u24-windows-i586
· Installer_r10-windows (SDK Android)
· Eclipse-java-galileo-SR2-win32
· ADT-10.0.0
3.2 Pembuatan Game
1. Langkah-langkah pembuatan aplikasi game “Memory Face” pertama-tama diawali dengan meng-instal jdk-6u24-windows-i586 karena di perlukan library pada update java terbaru , Proses peng-instal-an ini dilakukan pada sistem operasi Microsoft windows, jika software ini belum ada pada komputer yang digunakan untuk mengompile skrip coding yang dibuat.
a. Software jdk-6u24-windows-i586 bisa didapatkan dengan cara men-download atau membeli cd aslinya. Namun pada kesempatan ini penulis men-download website
www.oracle.com/technetwork/java/javase/downloads/index.html. Setelah itu jdk 6 akan tersimpan di drive c:/
b. Jika proses instalasi selesai dan berhasil, maka akan terdapat folder JDK dan JRE pada C:\Program Files\Java.
Gambar 2.12 Tempat instalisasi JDK
c. Selanjutnya adalah Setting PATH Java, yaitu dari Control Panel>System>Advanced>Environment Variables, isi nama variabel : PATH dan variabel value :
C:\Program Files\Java\jdk1.6.0_16\bin (menunjuk pada folder \bin JDK).
Gambar 2.13 Setting Path JDK
2. meng-instal Installer_r10-windows (SDK Android), software utama membuat emulator android apabila tidak memiliki handphone android. Proses instalisasinya adalah :
Installer_r10-windows dapat di download di
http://developer.android.com/sdk/index.html file sizenya hanya 32MB setelah di download lalu instal langsung muncul tampilan instal biasa. Disini file akan otomatis terinstal dan melakukan update langsung dari developer. Disini pengguna diwajibkan memiliki koneksi internet yang lumayan cepat di karenakan file yang akan di download sebesar 1.9GB.
Gambar 2.14 Proses instalisasi Installer_r10-windows
3. Setelah menunggu sekian lama akan muncul file instaler yang otomatis akan mengupdate dengan sendrinya ke dalam komputer.
Gambar 2.15 Proses Download dari web resmi android
4. lihat gambar 2.15 ada icon android SDK Tools dan SDK Platfrom-Tools ini akan menambah banyak seiring perkembangan update yang ada di Android development, proses instal ini memerlukan waktu yang lumayan cukup lama. Setelah semuanya sudah selesai akan muncul tampilan seperti ini
Gambar 2.16 Proses Instalisasi selesai
5. SDK android menyediakan virtual device yang berguna pada untuk membuat simulasi android.
Gambar 2.17 Menu Utama Virtual Device
6. Meng-instal Eclipse Galileo, ini adalah software dimana tempat membuat aplikasi game “Memory Face” yang berupa gabungan coding script berbasis java, cara instalisasinya adalah Eclipse Galileo dapat di download di
http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/galileo/SR2/eclipse-java-galileo-SR2-win32.zip. Setelah file berhasil download file lalu extract. Jalankan Eclipse.exe. Ketika dijalankan, Eclipse akan membutuhkan tempat (Workspace) untuk project2 yang akan dibuat. (Eclipse tidak membutuhkan proses instalasi)
Gambar 2.18 Tampilan awal Eclipse
7. Setelah memilih workspace akan terlihat tampilan awal pada Eclipse, Untuk memulai menggunakan Eclipse, klik ikon Workbench yang terletak pada ujung sebelah kanan maka akan membuka menu utama dari Eclipse
Gambar 2.19 Tampilan awal pada Ecplise
Gambar 2.20 Menu Utama Eclipse
8. Meng- instal ADT 10.0.0, adalah plugins untuk Eclipse yang terintegrasi dengan seluruh perangkat untuk membangun aplikasi Android. Jalankan Eclipse, pilih help > instal software
Gambar 2.21 Tampilan Menu Help pada eclipse
9. Klik Add, sehingga muncul jendela Add Site. Pada Name, isi dengan ADT. Kemudian klik pada tombol Archieve, dan cari folder dimana file ADT akan ditempatkan. Kemudian OK.
Gambar2.22 Tampilan Pencarian file ADT
10. Setelah itu akan terlihat pada jendela Available Software, pilih checklist pada Developer Tools sehingga semua checklist terpilih. Klik Next. Akan terlihat jendela dialog Install Detail, Klik Next. Kemudian muncul jendela licence agreement, pilih I accept the Klik Finish. Restart Eclipse. Jika instalasi ADT sukses, maka akan terlihat Menu baru Android SDK and AVD Manager pada Menu Windows.
Gambar 2.23 File ADT terbaca oleh Eclipse
11. Konfigurasi Eclipse & ADT, klik pada Menu Windows> Preference, pilih Android, kemudian Browse pada SDK Location sesuai dengan Folder dimana SDK ditempatkan. Klik Apply, tunggu sebentar hingga muncul list SDK. Klik OK.
Gambar 2.24 Tampilan Preference Eclipse dengan SDK Android
12. Kembali ke Menu utama, kemudian pilih Windows>Android SDK and AVD Manager. Pilih AVD1 (Android Virtual Device). Klik Start.
Gambar 2.25 Tampilan Menu Eclipse & ADT telah terkonfigurasi
13. Berikut langkah-langkah pembuatan aplikasi Game Memory Face menggunakan Eclipse. Buat Project dengan nama Memory Face
Gambar 2.26 Tampilan New Project pada Eclipse
14. Setelah project ter-create maka secara otomatis android membentuk 3 file yaitu :
- main.xml
- string.xml
- card.java
- Manager.java
Gambar 2.27 Isi dari project yang akan dibuat
15. untuk memudahkan pembuatan aplikasi ini, penulis memisahkan program dalam beberapa modul.
· Membuat modul tampilan game memory face membuat desain interface memory face dengan cara drag and drop pada eclipse
2.28 Gambar interface pertama game
Disini akan terlihat coding yg digunakan untuk menampilkan interface diatas, berikut penggalannya
16. Game Memory Face android akan lebih menarik apabila disertai dengan icon, pada directory res buat directory drawable letakkan icon-icon yang akan digunakan pada tab di directory tersebut, masing terdiri dari 22 icon.
Gambar 2.29 Tampilan icon Menu game Memory Face
Langkah terakhir adalah merubah file AndroidManifest.xml, buka file tersebut kemudian isikan dengan program berikut