MODUL PELATIHAN PEMBUATAN APLIKASI. Menggunakan. Disusun Oleh: Riza Arifudin

Transkripsi

1 MODUL PELATIHAN PEMBUATAN APLIKASI Menggunakan 2 Disusun Oleh: Riza Arifudin

2

3 Daftar Isi Daftar Isi... 3 Tentang App Inventor Menyiapkan App Inventor... 4 Kebutuhan Sistem... 5 Sistem Operasi dan Hardware yang dibutuhkan:... 5 Browser... 5 Phone or Tablet (or use the on-screen emulator)... 5 Cara Install App Inventor Versi Offline... 6 Mengenal Antamuka AI Mengenal Design View Palette The Viewer Component Media Properties Membuat Music Player Sederhana Membuat Splash Screen Membuat Paket dan Menyebarkan Berbagi source code (.aia) Berbagi aplikasi untuk dipasang pada perangkat android (.apk file) Sumber Bacaan... 26

4 Tentang App Inventor 2 MIT App Inventor adalah tool pemrograman berbasis blok yang memungkinkan semua orang, bahkan pemula, untuk memulai pemrograman dan membangun aplikasi yang berfungsi penuh untuk perangkat Android. Membuat aplikasi Android itu bisa semudah bermain LEGO atau PUZZLE. Kita tidak harus mengerti bahasa pemrograman Android berbasis OOP dan Java yang pada umumnya menggunakan IDE seperti Eclipse atau netbean. Seorang pemula dapat memiliki membuat pertama mereka dengan App Inventor hanya dengan waktu satu jam atau bahkan bisa kurang, dan dapat memprogram aplikasi yang lebih kompleks dengan waktu yang relatif cepat dibanding dengan pemrograman pada umumnya. Bahasa yang digunakan berbasis teks yang lebih tradisional (mudah). Awalnya dikembangkan oleh Profesor Hal Abelson dan timnya dari Google Education pada saat sedang cuti di Google. App Inventor berjalan sebagai layanan Web yang dikelola oleh staf di MIT Center for Mobile Learning - sebuah kolaborasi dari MIT Computer Science and Artificial Intelligence Laboratory (CSAIL) dan MIT Media Lab. MIT App Inventor mendukung komunitas di seluruh dunia hampir dua juta pengguna yang mewakili 195 negara di seluruh dunia. Lebih dari 85 ribu pengguna aktif setiap minggunya. Tool ini telah membuat lebih dari 4,7 juta aplikasi android. Sebuah tool open source untuk pemrograman sekaligus penciptaan aplikasi yang dapat diakses berbagai orang dari seluruh dunia. App inventor sudah mendapat perhatian pada: Pendidik formal dan informal Pemerintah dan masyarakat karyawan dan relawan Desainer dan manajer produk Penggemar dan Pengusaha Menyiapkan App Inventor Untuk versi online, kita harus mempunyai akun Gmail, sedangkan untuk versi offline tidak harus. Anda dapat mengatur App Inventor dan mulai membangun aplikasi dalam hitungan menit. Designer dan Blok Editor dapat dijalankan sepenuhnya dalam browser (cloud-versi Online). Untuk melihat aplikasi Anda pada perangkat Android ketika saat Anda menggunakan App Inventor (juga disebut "Live Test"), Anda harus mengikuti langkah-langkah di bawah ini. Opsi Satu (Membangun aplikasi dengan perangkat Android dan WiFi Connection) Jika Anda memiliki komputer, perangkat Android, dan koneksi WiFi, ini adalah cara termudah untuk menguji aplikasi Anda. Cara ini paling direkomendasikan. Gambar 1. Pengujian menggunakan perangkat andorid dengan koneksi via WiFi Opsi Dua (Tidak memiliki perangkat Android? Gunakan Emulator) Jika Anda tidak memiliki ponsel Android atau tablet yang akan digunakan, Anda masih dapat menggunakan App Inventor, yaitu dengan menggunakan emulator.

5 Gambar 2. Pengujian menggunakan emulator Opsi Tiga (Tidak ada WiFi? Membangun aplikasi dengan perangkat Android dan Kabel USB) Beberapa firewall di sekolah-sekolah dan instansi tertentu melarang jenis koneksi WiFi yang dibutuhkan. Jika WiFi tidak bekerja untuk Anda, cobalah USB. Gambar 3. Pengujian menggunakan perangkat andorid dengan koneksi via kabel USB Kebutuhan Sistem Catatan : Tidak bisa menggunakan browser Internet Explorer. Direkomendasikan menggunakan browser Chrome or Firefox. Sistem Operasi dan Hardware yang dibutuhkan: Macintosh (with Intel processor): Mac OS X 10.5 or higher Windows: Windows XP, Windows Vista, Windows 7 GNU/Linux: Ubuntu 8 or higher, Debian 5 or higher - NOTE: GNU/Linux live development is only supported for WiFi connections between computer and Android device. Browser 1. Mozilla Firefox 3.6 or higher 2. Note: If you are using Firefox with the NoScript extension, you'll need to turn the extension off. See the note on the troubleshooting page. 3. Apple Safari 5.0 or higher 4. Google Chrome 4.0 or higher 5. Microsoft Internet Explorer is not supported Phone or Tablet (or use the on-screen emulator) Android Operating System 2.3 ("Gingerbread") or higher

6 Cara Install App Inventor Versi Offline Untuk membuat aplikasi android dengan App Inventor, kita bisa menggunakan 2 cara yaitu Online dan Offline. Untuk membuat aplikasi android secara online dengan App Inventor, caranya cukup mudah, Anda bisa langsung membuka aplikasinya di link berikut Gambar 3. Tampilan App Inventor 2 versi Online Sedangkan untuk yang Offline dapat didapatkan dari M. Hossein Amerkashi yang sudah mengembangkan App Inventor versi Offline dengan nama Ai2LiveComplete. Ada perbedaan versi online dan offline yaitu pada versi online Anda butuh koneksi internet, sedangkan untuk versi Offline Anda tidak perlu untuk koneksi internet. Berikut ini adalah langkah-langkah install App Inventor Versi Offline atau biasa disebut Ai2LiveComplete: 1. Download Ai2LiveComplete! di link berikut Gambar 4. Tampilan untuk mendownload Ai2LiveComplete 2. Setelah download nya selesai, selanjutnya file Ai2LiveComplete.zip di-extract ke direktori C/D Anda.

7 Gambar 5. Tampilan file Ai2LiveComplete dalam bentuk zip Gambar 6. Tampilan folder Ai2LiveComplete hasil ekstrak file 3. Sebelum dilanjutkan kembali, pastikan komputer atau laptop Anda sudah ter-install JDK. kalau belum ada atau belum install, Anda bisa download technetwork/ java/javase/downloads/jdk7-downloads html, kemudian install dulu. 4. Setelah itu, Anda atur environment variable JAVA_HOME untuk menunjuk folder JDK yang sudah ter-install. Caranya adalah dengan klik kanan pada icon My Computer di desktop, lalu klik Properties. 5. Selanjutnya klik Advanced system settings, Gambar 7. Tampilan Advanced system settings 6. Maka akan muncul window System Properties, selanjutnya klik Environment Variables

8 Gambar 8. Tampilan System Properties 7. Maka akan muncul jendela Environment Variables, kemudian klik New seperti gambar dibawah ini Gambar 9. Tampilan Environment Variables 8. Maka akan tampil jendela New User Variable, kemudian isi Variable name : JAVA_HOME

9 Variable value : C:\Program Files\Java\jdk atau alamat dimana JDK Anda terinstalll Lengkapnya seperti gambar dibawah ini Gambar 10. Tampilan dari New User Variable 9. Kembali ke folder Ai2LiveComplete, selanjutnya klik 2 kali pada WinStartAIServer.cmd Gambar 11. Tampilan dari folder Ai2LiveComplete 10. Maka akan muncul jendela cmd yang menandakan bahwa server AiLiveComplete sedang dijalankan seperti gambar dibawah ini (a)

10 (b) Gambar 12. Tampilan dari jendela cmd.exe 11. Selanjutnya silakan buka browser Anda. Lalu ketikan saja di kotak address nya Maka akan tampil seperti dibawah ini. Silakan isi Anda atau langsung aja klik Log In Gambar 13. Tampilan halaman login Gambar 14. Tampilan jendela setelah login berhasil 12. Apabila Anda sudah berhasil Login di App Inventor versi Offline ini. Tampilannya tidak berbeda jauh dengan tampilan App Inventor versi Online.

11 Gambar 15. Tampilan antarmuka App Inventor 2 offline 13. Selanjutnya Anda coba buat project baru, klik New Project Gambar 16. Tombol untuk memulai membuat project baru 14. Isikan nama project yang Anda inginkan, misalnya Test Gambar 17. Memberi nama project baru 15. Anda bisa langsung buat aplikasi Android yang Anda inginkan, cukup drag & drop komponennya, lalu drag & drop block events nya.

12 Gambar 18. Contoh menambah komponen pada project 16. Apabila Anda ingin menyimpan atau men-download file.apk dari project aplikasi android yang sudah dibuat. Pertama-tama, Anda klik 2 kali pada file WinStartBuildServerWithHeap.cmd untuk menjalankan server Build nya pada cmd. Gambar 19. Menjalankan file WinStartBuildServerWithHeap.cmd Gambar 19. Tampilan file WinStartBuildServerWithHeap.cmd yang sedang berjalan

13 17. Selanjutnya kembali lagi ke browser yang sudah membuka App Inventor dan menampilkan project Android yang ingin di-download.apk nya Pada Menu Bar, klik Build, lalu pilih App (save.apk to my computer) seperti gambar dibawah ini. Gambar 20. Tampilan untuk menyimpan apk ke komputer. 19. Kemudian akan tampil Progress Bar yang menandakan bahwa project sedang di-build untuk menghasilkan.apk nya. Gambar 21. Tampilan progress bar pada saat menyimpan apk. 20. Apabila Progress Bar sudah menunjukkan 100% maka akan tampil tulisan The APK file will be saved in download folder yang berarti file APK sudah selesai di-build dan siap untuk didownload. Gambar 22. Tampilan progress bar pada saat selesai menyimpan apk. 21. Apabila Anda cek di cmd yang sudah Anda buka sebelumnya, maka terdapat tulisan INFO : BUILD 1 FINISHED yang berarti file APK sudah berhasil dibuat. Gambar 23. Tampilan jendela cmd saat berhasil menyimpan apk.

14 22. Secara otomatis akan langsung men-download seperti gambar di bawah ini. Gambar 24. Tampilan jendela cmd saat berhasil menyimpan apk. 23. Langkah terakhir, coba Anda cek di direktori penyimpanan folder, dimana file Test.apk siap untuk di-install di smartphone Android Anda. Gambar 25. Tampilan file apk di explorer. Selamat Mencoba dan Berkreasi.

15 Mengenal Antamuka AI2 Pada bagian ini Anda akan mulai mendesain dan membuat sebuah program. Sesi Mengenal Antarmuka Ai2 akan dijelaskan secara singkat bagian-bagian dari antarmuka dari App Inventor 2. Ada 2 tampilan pada App Inventor 2 yaitu Design View dan Blocks View. Gambar 26 adalah tampilan dari Design View versi Online, ini tidak berbeda jauh dengan versi offlinenya. Gambar 26. Tampilan antarmuka App Inventor 2 (Design View). Pada tampilan ini (Design View) terdapat kotak besar yang berada di tengah yang kita kenal dengan Viewer. Viewer ini merupakan tampilan kasar dari aplikasi yang kita buat pada android device. Di Viewer Anda bisa melihat baterai, waktu dan jaringan itu semua seperti tampilan yang ada di handphone Anda. Tapi perlu diingat bahwa apa yang anda lihat dalam Design view itu belum tentu seperti apa yang anda lihat dalam handphone Anda. Maka dari itu untuk mendesain atau membuat sebuah aplikasi Android Anda harus menghubungkan Komputer dan App Inventor pada perangkat android Anda yang sebenarnya. Anda harus mengetes aplikasi Anda pada perangkat yang sesungguhnya. Untuk masuk ke dalam tampilan Block Editor tekan tombol blocks yang berada pada sisi kanan atas. Block dalam App Inventor itu seperti sebuah statement atau instruksi yang berada dalam Bahasa pemograman. Jadi dalam membuat aplikasi Android dengan menggunakan App Inventor lebih menyenangkan. Setelah di klik pada tombol blocks maka muncul seperti pada Gambar 27.

16 Gambar 27. Tampilan antarmuka App Inventor 2 (Blocks View). Mengenal Design View Membuat aplikasi Android dengan menggunakan App Inventor terdiri dari dua langkah utama. Yang Pertama ialah menggunakan Design View untuk menambahkan komponenkomponen kedalam projek anda. Beberapa komponen seperti tampilan, tobol-tombol, dan sebuah tempat untuk memasukkan text(text field). Dari tampilan ini kita mendesain User Interface atau bagaimana cara aplikasi ini dapat berinteraksi dengan pengguna. Beberapa macam komponen yang tidak terlihat tapi sangat berguna seperti database dan pengaturan layar. Dalam sesi selanjutnya saya akan mencoba untuk menjelaskan bagaimana cara mendesain sebuah tampilan. Design View terdiri dari lima komponen dasar: o Palette o Viewer o Component o Media o Properties Palette Palette terdiri dari objek (komponen) apa saja yang bisa anda gunakan ke dalam aplikasi android anda. Palette terdiri dari beberapa grup semuanya dikelompokkan kedalam satu grup jika memiliki tema/fungsi yang sama. Contohnya User Interface yang memiliki fungsi digunakan untuk mengatur interaksi aplikasi dengan si pengguna yang terdiri dari button, check box, clock, image, label, dan lain-lain. Cara untuk menampilkan atau menyembunyikan anggota dari suatu kelompok kita perlu mengeklik pada nama kelompok itu.

17 Gambar 28. Tampilan palette pada Design View The Viewer Merupakan tempat kita menempatkan komponen-komponen yang akan ditampilkan pada layar perangkat android kita dan komponen komponen yang bisa di atur posisi layoutnya. Pada viewer, kita juga bisa melihat komponen yang tidak bisa kita lihat dengan handphone.

18 Gambar 29. Tampilan viewer pada Design View Component Terdiri dari daftar komponen apa saja yang telah kita tambahkan ke dalam projek kita baik yang bersifat terlihat maupun tidak terlihat dalam perangkat android kita. Tampilannya berupa susunan atau daftar (seperti root explorer) yang memudahkan kita untuk mengatur komponen atau melihat apasaja yang berbentuk seperti direktori. Gambar 30. Tampilan Componens pada Design View

19 Media Kolom Media terletak di bawah dari kolom Component. Kolom ini digunakan untuk mengatur (menambah dan menghapus) semua media komponen untuk mendukung aplikasi yang telah anda buat. Tipe media yang dapat ditambahkan ke dalam kolom media adalah gambar, clip art, musik, dan film. Anda juga dapat menambahkan media secara langsung kedalam kolom Propertiy. Media yang anda tambahkan ke dalam App Inventor diambil dari computer dan diupload ke dalam App Inventor. Semua media yang anda tambahkan ke dalam sebuah aplikasi Android tidak boleh melebihi 5 MB. Di dalam kolom media anda juga bisa menghapus atau mendownload media yang telah ditambahkan dengan meng-klik nama medianya sehingga nanti akan muncul pilihan delete untuk perintah menghapus atau klik download to my computer untuk perintah mendownload ke komputer. Gambar 30. Tampilan Media pada Design View Properties Setiap komponen yang anda tambahkan ke dalam projek, anda dapat mengatur komponen itu bagaiman dia berinteraksi dengan pengguna maupun dengan komponen lain, atau bagaimana tampilannya. Setiap komponen pada App Inventor memiliki kolom properties yang berbeda-beda. Gambar 30. Tampilan Properties Clock1 pada Design View

20 Membuat Music Player Sederhana Berikut ini tutorial membuat aplikasi player musik sederhana melalui app inventor Akses (online) atau localhost:8888 (offline) Login dengan akun google anda. 2. Pilih Start New Project yang berada di kiri atas layar. Masukkan nama project yang diinginkan, misal "Musik". Lalu piilh OK. Gambar 31. Tampilan memberi nama project baru 3. Desain tampilan aplikasi terlebih dahulu dengan memanfaatkan fitur pada palette. Masukkan komponen dari palette ke viewer dengan cara drag and drop komponen yang diinginkan. Pertama drag and drop komponen Label dari palette User interface, kemudian atur propertiesnya sesuai gambar dibawah Selanjutnya pilih komponen Horizontal Arrangement yang berada di palette Layout Masukan komponen notifier dan masukan tiga buah button dari palette User interface dan letakkan di dalam Horizontal Arrangement. Desain tampilan aplikasi semenarik mungkin. Gambar 32. Tampilan desain dari project player musik sederhana

21 Tambahkan komponen Player dari Palette Media. Pilih salah satu file musik melalui properties Source dari komponen player dengan cara klik pada none.. Gambar 33. Properties dari Player untuk memilih file musik 4. Setelah mendesain tampilan screen, saatnya masuk ke menu Blocks dan lakukan program berdasarkan logika logika yang diinginkan. Gambar 34. Block Code dari aplikasi player musik 5. Setelah selesai memprogram. Jadikan project tersebut menjadi sebuah file.apk dengan cara klik Build dan disimpan pada my computer. Kemudian kirim file apk tadi ke smartphone android, install, dan jalankan. Gambar 35. Tampilan player musik pada android

22 Membuat Splash Screen 1. Akses (online) atau localhost:8888 (offline) Login dengan akun google anda. 2. Pilih Start New Project yang berada di kiri atas layar. Masukkan nama project yang diinginkan, misal "SplashScreen". Lalu piilh OK. Gambar 36. Tampilan memberi nama project Splash Screen 3. Desain tampilan aplikasi terlebih dahulu dengan memanfaatkan fitur pada palette. Masukkan Komponen dari palette ke viewer dengan cara drag and drop komponen yang diinginkan. Pertama drag and drop komponen Image dari palette User interface, kemudian atur propertiesnya sesuai gambar dibawah Gambar 37. Desain tampilan project SplashScreen Gambar 38. Properties pada komponen Image1

23 Selanjutnya pilih komponen clock yang berada di palette Sensor. Atur propertiesnya seperti gambar. Gambar 39. Properties pada komponen Clock1 4. Add new screen sebagai contoh saya beri nama Screen2 Gambar 40. Menambah Screen baru dengan nama Screen2 5. Kemudian ke Screen1, buat block code seperti seperti berikut. Gambar 41. Block Code pada Screen1

24 Membuat Paket dan Menyebarkan Anda dapat menyebarkan aplikasi yang sudah dibuat dalam bentuk executable (.apk) sehingga bisa dipasang pada perangkat android. Anda juga dapat berbagi source code-nya dalam bentuk file berekstensi.aia sehingga bisa dibuka dikomputer lain pada akun gmail yang berbeda, sehingga kita bisa merubah dan mengeditnya. Untuk mendistribusikan aplikasi yang sudah dibuat, pada umumnya di tarud di Google Play Store. Berbagi source code (.aia) Pastikan Anda melihat semua daftar dari project-project Anda (Jika tidak, pilih Project My Projects). Pilih project yang Anda inginkan untuk di simpan dengan cara memberi centang (v) pada check box-nya. Pilih Project Export selected project (.aia) to my computer untuk menyimpan (export) source code (blocks) dari project anda. Source code tersimpan dalam bentuk file berekstensi.aia. Gambar 31. Cara mengekspor source code dari suatu project Untuk membuka (import) kembali file.aia ke akun lain atau komputer lain caranya dengan klik Project Import project (.aia) from my computer. Gambar 32. Cara mengimpor source code dari suatu project

25 Berbagi aplikasi untuk dipasang pada perangkat android (.apk file) Untuk membangun (build) paket aplikasi (file.apk) dari project yang sudah dibuat caranya dengan meng-klik pada menu "Build" pada toolbar App Inventor. Gambar 33. Tampilan untuk membuat file.apk Pilih "App (save.apk to my computer)" apabila anda ingin menyimpan langsung file apknya ke komputer Anda. Setelah dipilih akan muncul kotak pop-up box yang menandakan bahwa file.apk sedang dalam proses kompilasi dan dilanjutnya proses download. Sedangkan untuk pilihan provide QR code for.apk akan menampilkan jendela QR code yang harus discan menggunakan perangkat android kita sehingga aplikasi akan langsung terpasang pada perangkat android kita. Gambar 33. Tampilan Progress Bar pada saat membuat file.apk File.apk yang sudah dibuat dapat anda distribusikan melalui ke teman anda, atau bisa anda taruh di website anda sehingga banyak orang bisa mendownloadnya. Anda juga dapat mendistribusikan aplikasi yang sudah anda buat melalui Google Play Store. Untuk memasang file.apk langsung dari komputer pastikan setting perangkat android anda untuk membolehkan memasang aplikasi selain dari Google Play Store sudah tercentang, yaitu untuk Android 4 atau lebih tinggi pada "Settings > Applications" dan kemudian beri tanda cek pada chek box "Unknown Sources". Untuk perangkat Android 4.0 atau dibawahnya, melalui "Settings > Security" atau "Settings > Security & Screen Lock" dan kemudian beri tanda cek pada chek box "Unknown Sources" dan konfirmasi pemilihan anda..

26 Sumber Bacaan o o o o