TK Jl Srijaya Negara Bukit Besar Palembang 30139, Telpon : +62711-353414 PROGRAM STUDI D3 JURUSAN TEKNIK KOMPUTER POLITEKNIK NEGERI SRIWIJAYA PALEMBANG Pemrograman Berorientasi Objek 3 (Mobile And Web Programming) Hand On Lab 2 Membuat Project Android 150 menit/ 3 jam Lecturer : M. Miftakul Amin, S. Kom., M. Eng. Website : http://mafisamin.web.ugm.ac.id Tujuan : 1. Mahasiswa dapat mendesain layout 2. Mahasiswa dapat mengakses komponen dalam layout Perlengkapan : - Eclipse with ADT - Android SDK Level API 16 1. Pendahuluan Pada praktikum ini akan dibuat sebuah aplikasi untuk menggunakan beberapa lingkungan kerja yang ada di IDE Eclipse dan mengakses komponen yang ada di dalam Resources. Untuk perlengkapan pembuatan aplikasi serta tertib dalam penyimpanan project, silahkan buat folder dengan nama depan masing-masing di Drive D. Sebagai contoh nama depan Akbar, maka dapat dilakukan langkah-langkah berikut: 1) Buat folder Akbar di D. Folder yang telah dibuat 2) Set Lokasi Workspace di Alamat folder yang telah dibuat sebelumnya. Dari menu File Switch Workspace Other. 1 H a l a m a n
3) Sesaat kemudian akan ditampilkan window Workspace Launcher seperti gambar berikut. Pilih Workspace di alamat folder yang telah dibuat sebelumnya yaitu D:/Akbar. Setelah itu klik tombol OK. Maka Eclipse secara otomatis akan restart dan menyimpan setting dari folder kerja. Catatan: Langkah pemilihan direktori kerja ini cukup dilakukan sekali saja, selama praktikum berlangsung kecuali ada pengaturan baru yang diinstruksikan. 2. Membuat Project Pada project pertama Android akan dibuat program untuk menyapa programmer berdasarkan input data yang digunakan. Untuk itu ikuti tahapan berikut: 1) Buat project dari menu File New Android Application Project. 2) Buat project dengan nama depan+project1, sebagai contoh nama depan adalah Akbar maka nama projectnya adalah AkbarProject1. Kemudian pada bagian package name ubah menjadi com.akbar.project1 Pada pilihan Minimun Required SDK API 14, pada Target SDK API 16, pada Compile With API 16, dan Theme Holo Light With Dark Action Bar. Perhatikan tampilan berikut. Klik tombol Next dan tunggu sampai proses pembuatan project selesai dilakukan. 2 H a l a m a n
3) Untuk memastikan tidak terjadi Error, klik kanan pada Project yang telah terbentuk kemudian pilih Properties. Pada panel sebelah kiri (a) pilih Java Build Path, kemudian pada Tab pilih (b) Order and Export. Setelah itu (c) centang Android 4.1.2 dan klik tombol OK. (b) (a) (c) 4) Setelah itu pilih menu (a) Project hilangkan centang Build Automatically (hal ini dimaksudkan untuk mengaktifkan Build Project secara manual). Kemudian (b) dari menu Project pilih Build Project (pilihan ini otomatis aktif jika Build Automatically dinonaktifkan). Kemudian terakhir (c) pilih Project Clean (pilihan ini dilakukan untuk membersihkan error yang terjadi). (b) (c) (a) 5) Tampilan dari pembersihan project setelah menekan menu Project Clean dapat dilihat pada Gambar berikut. Dengan mengklik tombol OK, maka proses telah selesai. 3 H a l a m a n
6) Sampai tahapan ini seharusnya project telah terbuat sempurna dan tidak ada pesan/notifikasi error yang terjadi. 3. Mendesain Layout Setelah proses pembuatan Project selesai, secara otomatis di dalam Eclipse akan dibuka 2 buah file yaitu MainActivity.java serta activity_main.xml. file yang pertama berisi kode program java sebagai logic dari aplikasi, sedangkan activity_main.xml merupakan file layout untuk mendesain display/tampilan dari form aplikasi yang akan dibuat. Tampilan berikut merupakan Gambar project setelah selesai dibuat. 4 H a l a m a n
Selanjutnya dalam praktikum ini akan dibuat activity untuk menyapa programmer dengan menggunakan kontrol standar. Ikuti langkah-langkah dalam tahapan berikut: 1) Buka file string.xml yang ada di folder /res/values/strings.xml di dalam folder project, dapat dilakukan dengan double klik. Selanjutnya klik tombol Add untuk menambahkan sebuah pasangan name dan value seperti gambar berikut. Setelah mengisikan nilai seperti gambar berikut, selanjutnya simpan dengan menekan Ctrls+S melalui keyboard untuk menyimpan isian yang telah dilakukan. 2) Selanjutnya dengan cara yang sama pada langkah sebelumnya, tambahkan 2 buah pasangan nilai string seperti berikut: Variabel String s_tvnama s_btntampil Nilai Masukkan Nama Anda = Tampilkan Nama Jika file strings.xml dipilih dalam mode kode program, maka isi dari file tersebut seperti Gambar berikut. 5 H a l a m a n
3) Tahapan selanjutnya yang perlu dilakukan adalah mendesain graphical user interface (GUI) dengan membuka file di dalam folder /res/layout/activity_main.xml dalam project folder. Pada bagian Palette di FormWidgets tambahkan TextView, Button dan EditText drag dan tarik letakkan ke dalam form seperti Gambar berikut. 4) Kemudian pilih object TextView, klik id pada Properties window. Kemudian ubah properties dengan nama seperti berikut: Komponen Property Nilai TextView Id tvnama EditText Id txtnama Button Id btntampil 6 H a l a m a n
5) Secara otomatis dalam mode kode program, file activity_main.xml terbentuk kode program seperti berikut: 6) Selanjutnya atur property Text, untuk memilih resource editor seperti pada Gambar berikut. 7 H a l a m a n
Komponen Property Nilai TextView Text s_tvnama Button Text s_btntampil Sehingga tampilan desain program menjadi seperti berikut. 8 H a l a m a n
4. Mengetikkan Kode Program Selanjutnya buka program MainActivity.java di folder /src/com.akbar.project1/mainactivity.java (sesuaikan dengan pembuatah package di awal project). Kemudian simpan program tersebut, dan siap untuk dijalankan. Bagian yang diberi kotak merupakan bagian yang ditambahkan dalam kode program, sedangkan bagian yang di beri lingkaran bagian yang diedit saja dengan menambahkan notasi tersebut. 9 H a l a m a n
5. Menjalankan Program untuk menjalankan program klik kanan Project pilih Run As Run Confgurations. Pilih panel kiri AkbarProject1 (sesuaikan nama project). Pada Tab Target pilih Always Prompt to pick device, kemudian Run/Close. Berikut hasil eksekusi program yang telah berhasil dilakukan. 10 H a l a m a n
Tugas Praktikum : 1) Buat Project dengan nama AkbarTugas1 nama Paket com.akbar.tugas1 (sesuaikan dengan nama depan masing-masing), sesuaikan proses pembuatan project seperti langkah sebelumnya. 2) Desain Layout seperti Gambar berikut (Nama file /res/layout/activity_main.xml): textview1 edittext1 textview2 autocompletetextview1 textview2 multiautocompletetextview1 3) Kode Program di /src/<nama Package>/MainActivity.java bagian kotak merupakan kode program yang ditambahkan. 11 H a l a m a n
4) Jalankan Program. Diperiksa tanggal : Dosen Pengampu: Nama Laboratorium : Nomor Komputer : (M. Miftakul Amin, S. Kom., M. Eng.) NIP. 197912172012121001 Sumber referensi: Sanjay Shah; Khirulnizam Abd Rahman. 2013. Android Development Tools for Eclipse. New York: Packt Publishing, Chapter 3 12 H a l a m a n