pemrograman web dan perangkat bergerak...pemrograman web dan perangkat bergerak smk/mak kelas xii...

PEMROGRAMAN WEB DAN PERANGKAT

BERGERAK(C3) KELAS XII

Penulis :Hardo Sujatmiko, S.Pd, M.Pd

PT. KUANTUM BUKU SEJAHTERA

PEMROGRAMAN WEB DAN PERANGKAT BERGERAKSMK/MAK Kelas XII

Undang-Undang Republik Indonesia Nomor 19 Tahun 2002 Tentang Hak Cipta Pasal 72 Ketentuan Pidana Sanksi Pelanggaran.1. Barang siapa dengan sengaja dan tanpa hak melakukan

perbuatan sebagaimana dimaksud dalam Pasal 2 ayat (1) atau Pasal 49 ayat (1) dan ayat (2) dipidana dengan pidana masing-masing paling singkat 1 (satu) bulan dan/atau denda paling sedikit Rp1.000.000,00 (satu juta rupiah), atau pidana penjara paling lama 7 (tujuh) tahun dan/atau denda paling banyak Rp5.000.000.000,00 (lima miliar rupiah).

2. Barang siapa dengan sengaja menyiarkan; memamerkan, mengedarkan, atau menjual kepada umum suatu ciptaan atau barang hasil pelanggaran Hak Cipta atau Hak Terkait sebagaimana dimaksud pada ayat (1) dipidana dengan pidana penjara paling lama 5 (lima) tahun dan/atau denda paling banyak Rp500.000.000,00 (lima ratus juta rupiah).

© Hak cipta dilindungi oleh undang-undang. Dilarang menyebarluaskan dalam bentuk apapun

tanpa izin tertulis

Tata letak buku ini menggunakan program Adobe InDesign CS3, Adobe IIustrator CS3, dan Adobe Photoshop CS3. Font isi menggunakan Myriad Pro (10 pt)B5 (17,6 × 25) cmviii + 222 halaman

Penulis : Hardo Sujatmiko, S.Pd, M.PdEditor : Tim Quantum BookPerancang sampul : Tim Quantum BookPerancang letak isi : Tim Quantum BookPenata letak : Tim Quantum BookIlustrator : Tim Quantum BookTahun terbit : 2019ISBN : 978-623-7216-94-0Alamat : Jl. Pondok Blimbing Indah Selatan X N6 No 5 Malang - Jawa Timur

iii

Kata Pengantar

Kata Pengantar

Menyongsong era revolusi industri 4.0 perlu dikembangkan keterampilan 4C abad 21 bagi siswa Indonesia, yaitu keterampilan cara berpikir kritis, kreatif, mampu memecahkan masalah, dan mengambil keputusan serta cara bekerja sama melalui kolaborasi dan komunikasi. Sebuah pendekatan Science, Technology, Engineering, and Mathematics(STEM) diadopsi untuk menguatkan impelementasi Kurikulum 2013. Pendekatan STEM dapat diimplementasikan melalui model pembelajaran berbasis proyek (Project Based Learning) dan Problem Based Learning. Buku Pemrograman Web dan Perangkat Bergerak Jilid III SMK Kelas 12 ini disusun berdasarkan tuntutan paradigma pengajaran dan pembelajaran kurikulum 2013 dan dipakai sebagai sumber belajar siswa karena isinya yang lengkap, padat informasi, dan mudah dipahami. Dalam buku ini dijelaskan teori dan praktik tentang teknologi pengembangan aplikasi mobile, teknik desain aplikasi mobile, teknik desain aplikasi multi window, membuat kode program aplikasi, teknik pengolahan input user, desain aplikasi mobile lanjut, aplikasi basis data mobile, penggunaan library pada aplikasi mobile dan koneksi aplikasi mobile dengan web.

Kami menyadari buku ini masih jauh dari sempurna, untuk itu mohon saran dan kritikan yang bersifat membangun agar kualitas buku ini sesuai dengan harapan pengguna.

Malang, Maret 2019

Penulis

iv Pemrograman WEB dan Perangkat Bergerak Kelas XII untuk SMK/MAK

Daftar Isi

Bab 1 Teknologi Pengembangan Aplikasi Mobile .............................................. 1 A. Kemajuan Teknologi Android ................................................................................. 3 B. Persyaratan Hardware yang Dibutuhkan ........................................................... 7 C. Persiapan Software yang di Butuhkan ................................................................ 7 D. Praktik Instalasi Soffware dan Setting Android Vitual Devide .................... 9 Uji Kompetensi ...................................................................................................................... 23

Bab 2 Teknik Desain Aplikasi Mobile ................................................................... 25 A. Antarmuka Android Studio ..................................................................................... 27 B. Struktur Manajemen File di Android Strudio .................................................... 28 C. Proses Pembuatan Aplikasidi Android Studio .................................................. 33 D. Praktik Menampilkan Tulisan dan Membuat Artikel ...................................... 36 Uji Kompetensi ...................................................................................................................... 47

Bab 3 Teknik Desain Aplikasi Multi Window........................................................ 49 A. Teknik Desain................................................................................................................ 51 B. Intent dan Activity ...................................................................................................... 53 C. Merancang Tampilan Multi Windows .................................................................. 58 D. Praktik Membuat Aplikasi Mediaplayer dan Aplikasi Doa ........................... 58 Uji Kompetensi ...................................................................................................................... 71

Bab 4 Membuat Kode Program Aplikasi .............................................................. 73 A. Alur Program................................................................................................................. 75 B. Konsep Pemrograman Java ..................................................................................... 76 C. Konsep Layouting ....................................................................................................... 78 D. Model View Presenter (MVP) ................................................................................... 79 E. Praktik Membuat Aplikasi Tebah Buah ................................................................ 80 Uji Kompetensi ...................................................................................................................... 93

Bab 5 Teknik Pengolahan Input user ................................................................... 97 A. Macam-Macam Data Input ...................................................................................... 99 B. Teknik Pengolahan Input ......................................................................................... 107 C. Widgets di Android Studio ...................................................................................... 107 D. Praktik Membuat Aplikasi Form Mahasiswa ..................................................... 109 Uji Kompetensi ...................................................................................................................... 116

Bab 6 Desain Aplikasi Mobile Lanjutan ............................................................... 119 A. Menu Navigasi Bar ...................................................................................................... 121 B. Menu Sliding Tab ......................................................................................................... 124 C. Menu Drawer ................................................................................................................ 129 D. Praktik Membuat Form Login ................................................................................. 138 Uji Kompetensi ...................................................................................................................... 142

vDaftar Gambar

Bab 7 Aplikasi Basis Data Mobile ......................................................................... 145 A. Structure Quaery Languge (SQL) .......................................................................... 147 B. CRUD dengan MySQL Phpmyadmin.................................................................... 148 C. Aplikasi Database dengan SpreadSheet (Excell Online) ............................... 173 Uji Kompetensi ...................................................................................................................... 182 Bab 8 Penggunaan Library pada Aplikasi Mobile ............................................... 183 A. Library pada Aplikasi Mobile .................................................................................. 185 B. Penerapan Library pada Aplikasi Mobile ............................................................ 190 C. Praktik Membuat Penampil Data dengan Library RecyclerView ............... 192 Uji Kompetensi ...................................................................................................................... 203

Bab 9 Konektivitas Aplikasi Mobile dengan Web ............................................... 205 A. Konsep Konekifitas Mobile dengan Web ........................................................... 207 B. Me-monitize Aplikasi Mobile .................................................................................. 209 C. Praktik Membuat APK dan publish ke Playstore .............................................. 209 Uji Kompetensi ...................................................................................................................... 216

Daftar Pustaka .......................................................................................................... 218Indeks ............................................................................................................... 219Biodata Penulis .......................................................................................................... 222

vi Pemrograman WEB dan Perangkat Bergerak Kelas XII untuk SMK/MAK

Daftar Gambar

Bab 1 Teknologi Pengembangan Aplikasi Mobile ............................................................................................................ 1 Gambar 1.1 Contoh Smartphone Android ........................................................................................................................................ 3 Gambar 1.2 Android Studio Versi 3.0 ................................................................................................................................................... 3 Gambar 1.3 Versi Android 1 sampai 9 ................................................................................................................................................. 6 Gambar 1.4 Software yang di install .................................................................................................................................................... 7 Gambar 1.5 Java SE Development Kit ................................................................................................................................................. 8 Gambar 1.6 Android Studio IDE resmi untuk Android. ................................................................................................................. 8 Gambar 1.7 Mendaftar account Genymontion ................................................................................................................................ 8 Gambar 1.8 Halaman welcome Jawa ................................................................................................................................................... 9 Gambar 1.9 Folder Jawa ........................................................................................................................................................................... 10 Gambar 1.10 Tampilan instal selesai ...................................................................................................................................................... 10 Gambar 1.11 Tampilan window Programs ........................................................................................................................................... 10 Gambar 1.12 Tampilan halaman Jawa ................................................................................................................................................... 11 Gambar 1.13 Tampilan Java control panel ........................................................................................................................................... 11 Gambar 1.14 Tampilan Network Setting............................................................................................................................................... 11 Gambar 1.15 Tampilan menu update .................................................................................................................................................... 12 Gambar 1.16 Tampilan Welcome Android Studio Setup ................................................................................................................ 12 Gambar 1.17 Tampilan Choose Component ....................................................................................................................................... 13 Gambar 1.18 Tampilan Instalation Complete ..................................................................................................................................... 13 Gambar 1.19 Tampilan Welcome Android Studio versi 3.0 ............................................................................................................ 13 Gambar 1.20 Tampilan control panel ..................................................................................................................................................... 14 Gambar 1.21 Tampilan lokasi instal ........................................................................................................................................................ 14 Gambar 1.22 Tampilan virtualbox ........................................................................................................................................................... 15 Gambar 1.23 Tampilan instal selesai ...................................................................................................................................................... 15 Gambar 1.24 Tampilan membuka Genymontion .............................................................................................................................. 15 Gambar 1.25 Tampilan menambahkan perangkat ........................................................................................................................... 16 Gambar 1.26 Tampilan proses download ............................................................................................................................................. 16 Gambar 1.27 Tampilan perangkat yang sudah berhasil ditambahkan ..................................................................................... 16 Gambar 1.28 Tampilan 3 jenis emulator ............................................................................................................................................... 17 Gambar 1.29 Tampilan Virtual device .................................................................................................................................................... 17 Gambar 1.30 Tampilan virtual device configuration ........................................................................................................................ 18 Gambar 1.31 Tampilan system image .................................................................................................................................................... 18 Gambar 1.32 Tampilan verity confoguration ...................................................................................................................................... 19 Gambar 1.33 Tampilan Select Deployment target ............................................................................................................................ 19 Gambar 1.34 Tampilan setting plugin genymontion ....................................................................................................................... 19 Gambar 1.35 Tampilan instal plugin repositories .............................................................................................................................. 20 Gambar 1.36 Tampilan start genymontion .......................................................................................................................................... 20 Gambar 1.37 Tampilan target genymontion ....................................................................................................................................... 20 Gambar 1.38 Tampilan akhir genymontion ......................................................................................................................................... 21 Gambar 1.39 Tampilan Hp Oppo CPH1605 ......................................................................................................................................... 21 Gambar 1.40 Pemilihan HP Oppo CPH1606 sebagai target emulator ....................................................................................... 22 Gambar 1.41 Contoh aplikasi di tampilan HP Oppo CPH1606 ..................................................................................................... 22

Bab 2 Teknik Desain Aplikasi Mobile ................................................................................................................................. 25 Gambar 2.1 Tampilan antarmuka Android Studio versi 3.0 ......................................................................................................... 27 Gambar 2.2 Contoh stuktur file aplikasi pada Android Studio ................................................................................................... 28 Gambar 2.3 Konsep dasar aplikasi Android ...................................................................................................................................... 31 Gambar 2.4 Tahapan proses pembuatan aplikasi Android ......................................................................................................... 33 Gambar 2.5 Tampilan desain dan koding .......................................................................................................................................... 34 Gambar 2.6 Tampilan palette ................................................................................................................................................................. 35 Gambar 2.7 Tampilan file MainActivity.java ...................................................................................................................................... 35 Gambar 2.8 Tampilan file AndroidManifest....................................................................................................................................... 36 Gambar 2.9 Tampilan project:praktik3 ................................................................................................................................................ 37 Gambar 2.10 Tampilan Target Android Device ................................................................................................................................... 37 Gambar 2.11 Tampilan Add activity to Mobile ................................................................................................................................... 38 Gambar 2.12 Tampilan Configure Activity ........................................................................................................................................... 38 Gambar 2.13 Tampilan Desain dan Text “Hello World” ..................................................................................................................... 39 Gambar 2.14 Tampilan hasil praktik3 pada emulator ...................................................................................................................... 41 Gambar 2.15 Create Android Project praktik4_artikeltext ............................................................................................................. 42 Gambar 2.16 Tampilan koding file activity_main.xml ..................................................................................................................... 43 Gambar 2.17 Tampilan posisi file strings.xml ...................................................................................................................................... 44 Gambar 2.18 Tampilan artikel di file strings.xml ................................................................................................................................ 44 Gambar 2.19 Tampilan tombol PESAN .................................................................................................................................................. 45 Gambar 2.20 Tampilan file MainActivity.java ...................................................................................................................................... 45 Gambar 2.21 Hasil project:praktik4artikeltext fisilitas scrollview ................................................................................................ 46

Teknik Desain Aplikasi Mobile vii

Bab 3 Teknik Desain Aplikasi Multi Window ..................................................................................................................... 49 Gambar 3.1 Contoh tampilan LinierLayout ....................................................................................................................................... 52 Gambar 3.2 Contoh tampilan code RelativeLayout ....................................................................................................................... 53 Gambar 3.3 Ilustrasi intent antar activity ........................................................................................................................................... 54 Gambar 3.4 Contoh tampilan code RelativeLayout ....................................................................................................................... 54 Gambar 3.5 Contoh tampilan Fullscreen Activity ........................................................................................................................... 54 Gambar 3.6 Contoh tampilan Google Maps Activity ..................................................................................................................... 55 Gambar 3.7 Contoh tampilan login Activity ..................................................................................................................................... 55 Gambar 3.8 Contoh tampilan Navigation Drawer Activity .......................................................................................................... 55 Gambar 3.9 Mengirim data ke activity ................................................................................................................................................ 57 Gambar 3.10 Folder Manifests Java dan Res ....................................................................................................................................... 58 Gambar 3.11 Membuat folder raw .......................................................................................................................................................... 59 Gambar 3.12 Menyalin file musik/suara ................................................................................................................................................ 59 Gambar 3.13 File musik/suara di folder raw ........................................................................................................................................ 59 Gambar 3.14 Tampilan file build.gradle dan dependencies .......................................................................................................... 63 Gambar 3.15 Tampilan hasil praktik 5 .................................................................................................................................................... 63 Gambar 3.16 Perencanaan aplikasidoa ................................................................................................................................................. 64 Gambar 3.17 Membuat project baru aplikasidoa .............................................................................................................................. 64 Gambar 3.18 Gambar yang disalin di folder drawable .................................................................................................................... 64 Gambar 3.19 Membuka file Man_Activity ............................................................................................................................................ 66 Gambar 3.20 Struktur project aplikasidoa secara keseluruhan .................................................................................................... 67 Gambar 3.21 Membuat activity baru ..................................................................................................................................................... 67 Gambar 3.22 Activity Name: sebelumtidur .......................................................................................................................................... 68 Gambar 3.23 Membuka file sebelum tidur,java ................................................................................................................................. 69 Gambar 3.24 Hasil desain sebelumtidur .............................................................................................................................................. 69 Gambar 3.25 Hasil aplikasidoa pada emulator Genymontion ...................................................................................................... 70Bab 4 Membuat Kode Program Aplikasi ............................................................................................................................ 73 Gambar 4.1 Programmer sebuah pekerjaan berkelas ................................................................................................................... 76 Gambar 4.2 Bagian-bagian pada Element XML ............................................................................................................................... 78 Gambar 4.3 Viewgroup dan View .......................................................................................................................................................... 79 Gambar 4.4 Model View Controller dan Model View Presenter ................................................................................................. 80 Gambar 4.5 Alur program aplikasi tebak buah ................................................................................................................................ 81 Gambar 4.6 Nama aplikasi tebakbuah ................................................................................................................................................ 81 Gambar 4.7 Tampila EmptyActivity ...................................................................................................................................................... 82 Gambar 4.8 Tampilan Confogure Activity .......................................................................................................................................... 82 Gambar 4.9 Salin file gambar ke folder drawable ........................................................................................................................... 83 Gambar 4.10 Hasil desain file activity_main.xml ............................................................................................................................... 85 Gambar 4.11 Struktur file aplikasi tebak buah.................................................................................................................................... 86 Gambar 4.12 Tampilan file activity_apel.xml ...................................................................................................................................... 88 Gambar 4.13 Hasil desain file activity_splash_screen.xml ............................................................................................................. 90 Gambar 4.14 Pilih emulator yang digunakan ..................................................................................................................................... 92 Gambar 4.15 Hasil aplikasi tebak buah ................................................................................................................................................. 92Bab 5 Teknik Pengolahan Input user ................................................................................................................................. 97 Gambar 5.1 Tambol dari widget Button ............................................................................................................................................. 99 Gambar 5.2 Gambar Sebagai Tombol.................................................................................................................................................. 100 Gambar 5.3 Tombol Floating Action Button (tombol melayang) .............................................................................................. 100 Gambar 5.4 Tampilan contoh EditText ................................................................................................................................................ 102 Gambar 5.5 RadioButton jenis kelamin .............................................................................................................................................. 105 Gambar 5.6 Bagian Pallete di Android Studio .................................................................................................................................. 108 Gambar 5.7 Hasil aplikasi form Mahasiswa ....................................................................................................................................... 115Bab 6 Desain Aplikasi Mobile Lanjutan ............................................................................................................................. 119 Gambar 6.1 Contoh Menu Bar ................................................................................................................................................................ 121 Gambar 6.2 Hasil MenuBar ...................................................................................................................................................................... 123 Gambar 6.3 Membuat folder color ....................................................................................................................................................... 124 Gambar 6.4 File tab_selector.xml .......................................................................................................................................................... 124 Gambar 6.5 Membuat file color.xml ..................................................................................................................................................... 125 Gambar 6.6 Membuat tiga fragment ................................................................................................................................................... 125 Gambar 6.7 Membuat file first fragment.java ................................................................................................................................... 126 Gambar 6.8 Menu Sliding Tab ................................................................................................................................................................ 128 Gambar 6.9 Membuat Project Baru MenuDrawer3 ........................................................................................................................ 129 Gambar 6.10 Tampilan Target Android Device ................................................................................................................................... 129 Gambar 6.11 Pilih navigation Drawer Activity .................................................................................................................................... 130 Gambar 6.12 Tampilan Configure Activity ........................................................................................................................................... 130 Gambar 6.13 Tampilan Struktur File Template Menu Drawer ....................................................................................................... 131 Gambar 6.14 Tampilan menu Drawer yang belum di modif ......................................................................................................... 132 Gambar 6.15 Tampilan nav_header_main.xml belum dimodif .................................................................................................... 133 Gambar 6.16 Tampilan activity_main_drawer.xml ........................................................................................................................... 134 Gambar 6.17 Ikon yang dimasukkan ke folder drawable ............................................................................................................... 135 Gambar 6.18 Posisi file icon di drawable-v21 ..................................................................................................................................... 135 Gambar 6.19 Gambar ikon sudah masuk ke folder drawable ....................................................................................................... 135 Gambar 6.20 Hasil tampilan modif file nav_header_main.xml .................................................................................................... 136 Gambar 6.21 Tampilan modif menu Drawer ....................................................................................................................................... 137 Gambar 6.22 Hasil praktik form login .................................................................................................................................................... 141

viii Pemrograman WEB dan Perangkat Bergerak Kelas XII untuk SMK/MAK

Daftar TabelTabel 2.1 Kompenen-komponen dalam Basic View ............................................................................................................................................ 32Tabel 3.1 Activity dan aktivitasnya ............................................................................................................................................................................ 56Tabel 4.1 Simbol dan arti flowchart .......................................................................................................................................................................... 76Tabel 5.1 Interface dan fungsinya .............................................................................................................................................................................. 108

Bab 7 Aplikasi Basis Data Mobile ....................................................................................................................................... 145 Gambar 7.1 File di sisi client dan sisi server ....................................................................................................................................... 148 Gambar 7.2 Mengaktifkan XAMPP ....................................................................................................................................................... 149 Gambar 7.3 Membuat database anggota1 dan tabel member ................................................................................................. 149 Gambar 7.4 Membuat project di Android Studio ........................................................................................................................... 153 Gambar 7.5 Hasil file halaman_utama.xml ........................................................................................................................................ 159 Gambar 7.6 Membuat file semua_anggota.xml .............................................................................................................................. 161 Gambar 7.7 Hasil desain file edit_anggota.xml ............................................................................................................................... 164 Gambar 7.8 Hasil desain file tambah_anggota.xml ....................................................................................................................... 165 Gambar 7.9 Membuat class semuaAnggotaActivity ..................................................................................................................... 166 Gambar 7.10 Google Sheet ........................................................................................................................................................................ 174 Gambar 7.11 Account Google sheet ...................................................................................................................................................... 174 Gambar 7.12 Tabel data_siswa dan database sekolahku ............................................................................................................... 175 Gambar 7.13 Mengunggah foto .............................................................................................................................................................. 175 Gambar 7.14 Share foto membuat link ................................................................................................................................................. 176 Gambar 7.15 Link gambar berhasil dibuat ........................................................................................................................................... 176 Gambar 7.16 Mengatur Link Share ......................................................................................................................................................... 177 Gambar 7.17 Membuat project Sekolahku .......................................................................................................................................... 178

Bab 8 Penggunaan Library pada Aplikasi Mobile ............................................................................................................. 183 Gambar 8.1 Contoh tampilan library navigator Drawer ............................................................................................................... 185 Gambar 8.2 Contoh tampilan library MP Android Chart .............................................................................................................. 186 Gambar 8.3 Contoh tampilan library Alerter .................................................................................................................................... 186 Gambar 8.4 Contoh tampilan library Lottie ...................................................................................................................................... 187 Gambar 8.5 Salin library ke bagian dependencies ......................................................................................................................... 188 Gambar 8.6 Posisi folder libs ................................................................................................................................................................... 188 Gambar 8.7 Tampilan Open Module Setting .................................................................................................................................... 189 Gambar 8.8 Tampilan project structure .............................................................................................................................................. 189 Gambar 8 9 Tampilan chose library ...................................................................................................................................................... 190 Gambar 8.10 Contoh Link untuk download library .......................................................................................................................... 190 Gambar 8.11 Drawable ............................................................................................................................................................................... 193 Gambar 8.12 Ikon yang digunakan ........................................................................................................................................................ 193 Gambar 8.13 Membuat Project baru VideoView ............................................................................................................................... 198 Gambar 8.14 Membuat folder res ........................................................................................................................................................... 198 Gambar 8.15 Configure Component ...................................................................................................................................................... 199 Gambar 8.16 Memasukkan file video ke folder raw ......................................................................................................................... 199 Gambar 8.17 Tampilan pemutar video .................................................................................................................................................. 200 Gambar 8.18 Penulisan koding pada file Main Activity.Java ......................................................................................................... 201 Gambar 8.19 Format de perdecies .......................................................................................................................................................... 201 Gambar 8.20 Tampilan hasil praktik VideoView ................................................................................................................................. 202

Bab 9 Konektivitas Aplikasi Mobile dengan Web ............................................................................................................. 205 Gambar 9.1 Gambar konekvitas client – server ............................................................................................................................... 207 Gambar 9.2 Konsep Get dan Post database ...................................................................................................................................... 208 Gambar 9.3 Build-Generate Signed APK ............................................................................................................................................ 210 Gambar 9.4 Isi form New Key Store ...................................................................................................................................................... 210 Gambar 9.5 Memilih project di choose keystore file...................................................................................................................... 211 Gambar 9.6 Tampilan Generate Signed APK ..................................................................................................................................... 211 Gambar 9.7 Folder destination project ............................................................................................................................................... 212 Gambar 9.8 Info APK sudah berhasil dibuat ..................................................................................................................................... 212 Gambar 9.9 Posisi file APK ....................................................................................................................................................................... 212 Gambar 9.10 Selamat datang account Google Play ......................................................................................................................... 213 Gambar 9.11 Tampilan direktori toko .................................................................................................................................................... 213 Gambar 9.12 Tampilan kelola produksi ................................................................................................................................................. 214 Gambar 9.13 Tampilan rilis aplikasi ........................................................................................................................................................ 214

Teknologi Pengembangan Aplikasi Mobile 1

3.25 Memahami teknologi pengembangan aplikasi mobile.4.25 Mempresentasikan teknologi pengembangan aplikasi mobile.

Kompetensi Dasar

Teknologi Pengembangan Aplikasi Mobile

1BAB

Pemrograman WEB dan Perangkat Bergerak Kelas XII untuk SMK/MAK2

Peta Konsep

Setelah mempelajari materi pada bab ini, siswa diharapkan mampu:1. memahami kemajuan teknologi android,2. memahami persyaratan hardware yang dibutuhkan,3. memahami persiapan software yang dibutuhkan,4. menerapkan pengebangan aplikasi mobile, serta5. mempresentasikan hasil pembuatan aplikasi mobile.

Tujuan Pembelajaran

Kemajuan Teknologi Android

Persyaratan hardware yang

dibutuhkan

Persiapan software yang dibutuhkan

Praktik Sofware dan Setting Android Virtual Devide

Teknologi Pengembangan Aplikasi Mobile


A. Kemajuan Teknologi Android

Android adalah sistem operasi untuk

Gambar 1.1 Contoh smartphone androidSumber: httpanalogindex.comnewswindows-10-mobile-a-new-concept-shows-the-windows-phone-system-of-dreams-_270453.html

telepon seluler berbasis linux sebagai kernelnya. Saat ini Android dapat disebut raja dari smartphone . Android mengalami perkembangan yang sangat pesat karena Android menyediakan platform terbuka (Open Source) bagi para pengembang untuk menciptakan aplikasi mereka sendiri. Awalnya, perusahaan search engine terbesar saat ini, yaitu Google Inc. membeli Android Inc., pendatang baru yang membuat peranti lunak untuk ponsel. Android, Inc. didirikan oleh Andy Rubin, Rich Milner, Nick Sears dan Chris White pada tahun 2003. Pada Agustus 2005 Google membeli Android Inc. Kemudian untuk mengembangkan Android dibentuklah Open Handset Alliance konsorsium dari 34 perusahaan hardware, software, dan telekomunikasi, termasuk Google, HTC, Intel, Motorola, Qualqomm, T-Mobile dan Nividia. Di buku ini software yang digunakan adalah

Gambar 1.2 Android Studio Versi 3.0Sumber: https://developer.android.com/

Android Studio versi 3.0. Android Studio menurut IntelliJ IDEA adalah lingkungan untuk pengembangan aplikasi Android, merupakan editor kode dan alat pengembang yang berdaya guna. Android Studio menawarkan fitur lebih banyak untuk meningkatkan produktivitas saat membuat aplikasi Android, misalnya sebagai berikut.1. Sistem versi berbasis Gradle yang fleksibel.2. Emulator yang cepat dan kaya fitur.3. Lingkungan yang menyatu untuk pengembangan bagi semua perangkat Android.4. Instant Run untuk mendorong perubahan ke aplikasi yang berjalan tanpa membuat

APK baru.5. Template kode dan integrasi GitHub untuk membuat fitur aplikasi yang sama dan

mengimpor contoh kode.6. Alat pengujian dan kerangka kerja yang ekstensif.7. Alat Lint untuk meningkatkan kinerja, kegunaan, kompatibilitas versi, dan masalah-

masalah lain.8. Dukungan C++ dan NDK.

Materi Pembelajaran


Adapun versi-versi Android yang pernah dirilis adalah sebagai berikut:

1. Android versi 1.1 Pada tanggal 9 Maret 2009, Google merilis Android versi 1.1 Android versi ini

dilengkapi dengan pembaruan estetis pada aplikasi, jam, alarm, voice search (pencarian suara), pengiriman pesan dengan Gmail, dan pemberitahuan e-mail.

2. Android versi 1.5 (Cupcake) Pada pertengahan bulan Mei 2009, Google kembali merilis telepon seluler dengan

menggunakan Android dan SDK(Software Development Kit) dengan versi 1.5 (Cupcake). Terdapat beberapa pembaruan termasuk juga penambahan fitur dalam seluler versi ini yakni kemampuan merekam dan menonton video dengan modus kamera, meng-upload video ke Youtube dan gambar ke Picasa langsung dari telepon, dukungan Bluetooth A2DP, kemampuan terhubung secara otomatis ke headset Bluetooth, animasi layer, dan keyboard pada layer yang didapat disesuaikan dengan sistem.

3. Android versi 1.6 (Donut) Donut (versi 1.6) dirilis pada bulan September dengan menampilkan proses

pencarian yang lebih baik dibanding sebelumnya, penggunaan baterai indikator dan kontrol applet VPN. Fitur lainnya adalah galeri memungkinkan pengguna untuk memilih foto yang akan dihapus, kamera, camcorder dan galeri yang diintegrasikan, CDMA/EVDO, 802.1x, VPN, Gestures, dan Text-to-speech engine, kemampuan dial kontak, teknologi text to change speech (tidak tersedia pada semua ponsel, pengadaan resolusi VWGA).

4. Android versi 2.0/2.1 (Éclair) Pada tanggal 3 Desember 2009 kembali diluncurkan ponsel Android dengan versi

2.0/2.1 (Éclair), perubahan yang dilakukan adalah pengoptimalan hardware, peningkatan Google Maps 3.12, perubahan UI dengan browser baru dan dukungan HTML5, daftar kontak yang baru, dukungan flash untuk kamera 3,2 MP, digital Zoom, dan Bluetooth 2.1.

5. Android versi 2.2 (Froyo:Frozen Yoghurt) Pada bulan Mei 2010 Android versi 2.2 Rev 1 diluncurkan. Android inilah yang

sekarang sangat banyak beredar dipasaran, salah satunya adalah aplikasi di Samsung FX tab yang sudah ada dipasaran. Fitur yang tersedia di Android versi ini sudah kompleks di antaranya adalah sebagai berikut.a. Aplikasi memungkinkan pengguna dan penghapusan komponen yang tersedia.b. Dalvik Virtual Machine dioptimalkan untuk perangkat mobile.c. Grafik : grafik di 2D dan grafis 3D berdasarkan libraries OpenGL.d. SQLite : untuk penyimpanan data.e. Mendukung media : audio, video, dan berbagai format gambar (MPEG4, H.264,

MP3, AAC, AMR, JPG, PNG (GIF)f. GSM, Bluetooth, EDGE, 3G, dan Wifi (hardware independent)g. Kamera, Global Position System (GPS), kompas, dan accelerometer (tergantung

hardware).

6. Android versi 2.3 (Gingerbread) Android versi 2.3 diluncurkan pada bulan Desember 2010, hal-hal yang direvisi

dari versi sebelumnya adalah kemampuan seperti berikut:a. SIP-based VoIP.


b. Near Field Communications (NFC).c. Gyroscope dan sensor.d. Multiple cameras support.e. Mixable audio effects.f. Download manager.

7. Android versi 3.0 (Honeycomb) Dirilis pada bulan Februari 2011 sebagai android 3.0 revisi 1 serta android versi 3.0

revision 2 telah dirilis pada Juli 2011.

8. Android versi 3.1 dirilis Mei 2011, sedangkan android 3.1 revisi 2 juga dirilis mei 2011, serta android 3.1 revision 3 dirilis pada juli 2011.

9. Android versi 3.2 dirilis Juli 2011.

10. Android versi 4.0 (ICS : Ice Cream Sandwich) Diumumkan pada tanggal 19 Oktober 2011, membawa fitur Honeycomb untuk

smartphone dan menambahkan fitur baru termasuk membuka kunci dengan pengenalan wajah, data pemantauan penggunaan dan kontrol, terpadu kontak jaringan sosial, perangkat tambahan fotografi, mencari e-mail secara offline, dan berbagai informasi dengan menggunakan NFC. Ponsel pertama yang menggunakan NFC. Ponsel pertama yang menggunakan sistem operasi ini adalah Samsung Galaxy Nexus.

11. Android versi 4.1 (Jelly Bean) Android Jelly Bean yang diluncurkan pada acara Google I/O lalu membawa sejumlah

keunggulan dan fitur baru. Penambahan baru di antaranya meningkatkan input keyboard, desain baru fitur pencarian, UI yang baru dan pencarian melalui Voice Search yang lebih cepat. Tak ketinggalan Google Now juga menjadi bagian yang diperbaharui. Google Now memberikan informasi yang tepat pada waktu yang tepat pula. Salah satu kemampuannya adalah dapat mengetahui cuaca, lalu-lintas, ataupun hasil pertandingan olahraga. Sistem Android Jelly Bean 4.1 muncul pertama kali dalam produk tablet Asus, yakni Google Nexus 7.

12. Android versi 4.2 (Jelly Bean) Fitur photo sphere untuk panaroma, daydream sebagai screensaver, power control,

lock screen widget, menjalankan banyak user (dalam tablet saja), widget terbaru. Android 4.2 Pertama kali dikenalkan melalui LG, yakni Google Nexus 4.

13. Android 5 (Lollipop) Versi 5 Lollipop dirilis pada tahun 2014, versi 5.0 pada bulan Oktober 2014 sedangkan

versi 5.1 dirilis pada bulan Maret 2015. Sedangkan versi 5.1.1 terbaru dari versi ini dirilis pada bulan April 2015. Jika dibandingkan dari versi sebelumnya ( Jelly Bean dan KitKat) versi Lollipop menawarkan beberapa pembaharuan dan fitur unggulan, antara lain 1) desain material terbaru 2)peningkatan kecepatan kinerja dan 3) peningkatan konsumsi baterai, 4) peningkatan Bug.

14. Android 6: Marshmallow (Android M) Dari sisi desain tidak berubah banyak dari versi sebelumnya. Ada fitur penghemat

baterai dengan sistem Doze hingga 40%. Versi 6 ini juga menawarkan segi keamanan yang lebih baik dari versi sebelumnya.


15. Android 7 : NougatBeberapa kelebihan yang ditawarkan pada versi 7 antara lain sebagai berikut.a. Banyak fitur tambahan.b. Musah untuk update aplikasi.c. Hemat batrai.d. Multitasking.e. Hemat paket data internet.f. Keamanan yang lebih baik.g. Notifikasi baru.

16. Android 8 : (Oreo) Versi ini dirilis bertepat dengan terjadinya Gerhana Matahari Total pada tanggal

21 Agustus 2017. Juga dikenal dengan istilah Android O. Versi 8 Oreo ini memberikan beberapa vitur kelebihan antara lain (1) Backgroud limit untuk enghemat batarai dan data. (2) Notification chanel dan dots untuk mempermudah akses ke hal-hal penting. (3) picture in picture untuk menunjang produktivitas dengan dua aplikasi pada satu waktu (4) Segi keamanan yang lebih kuat.

17. Android 9: (Pie) Android versi kesembilan ini secara resmi dirilis pada tanggal 6 Agustus 2018,

Android ini di kenal dengan nama “Android Pie. OS terbaru Android ini pertama kali di rilis untuk perangkat atau smartphone Google pixel. Android Pie sudah didukung kemampuan kecerdasan buatan atau Artificial Intelligence(AI).

Cupcake Android 1.5 Android 1.0 Apple pie.png Android 1.1 Banana bread.png Android 1.1 Battenberg.png

Android 1.6 Donut.png Android 2.0 Eclair.png

Android 4.1 Jellybean.png Android 4.4 Kitkat.png Android 5.0 Lollipop.png Android 5.0.png

Android 2.2 Froyo.png Android 2.3 Gingerbread.png Android 3.0 Honeycomb.png

Android 4.0 Ice-cream sandwich.png

Gambar 1.3 Versi Android 1 sampai 9(Sumber: https://developer.android.com)


Android versi 3.0 ke atas adalah generasi platform yang digunakan untuk tablet PC. Sementara versi 4.0 sudah merupakan platform yang dapat digunakan di smartphone dan tablet PC. Banyak cara untuk membuat aplikasi Android, salah satu sofware yang dapat digunakan membuat aplikasi Android adalah Android Studio. Beberapa kelebihan software Android Studio adalah sebagai berikut.1. Instant Run, fitur ini dapat berjalan jika menggunakan versi Gradle 2.0 ke atas dan versi

SDK 15 atau lebih.2. Auto Completion, yaitu fitur cerdas karena secara otomatis menampilkan saran kode

yang ingin di tulis.3. Sistem build yang fleksibel, fitur ini menjalankan dan membentuk file APK secara

otomatis.4. Mampu membuat aplikasi untuk semua perangkat android, seperti handphoe,

Smartwatch, tablet, TV Android bahkan Auto Android.

B. Persyaratan Hardware yang Dibutuhkan

Spesifikasi komputer yang dibutuhkan untuk melakukan praktik membuat aplikasi Android dengan Android Studio sebagai berikut:1. OS Microsoft Window/7/8/Vista/10 dengan sistem 32 atau 64 bit.2. 2 Gb RAM atau 4 Gb RAM yang direkomendasikan.3. 1 Gb space hard disk yang tersisa untuk SDK dan Emulator.4. Monitor dengan resolusi 1280 x 800.5. Intel Prosesor, jika memakai prosesor AMD tidak dapat menjalankan emulator sehingga

disarankan menggunakan emulator Genymontion (dibahas selanjutnya).

C. Persiapan Software yang di Butuhkan

Android Studio menyediakan alat untuk pengujian, dan mempublikasikan tahap proses development, serta lingkungan development terpadu untuk membuat aplikasi bagi semua perangkat Android. Lingkungan development menyertakan kode template dengan kode contoh untuk fitur aplikasi umum, alat pengujian dan kerangka kerja yang banyak, dan sistem pembangunan yang fleksibel.

Gambar 1.4 Software yang di installSumber: dokumen pribadi

Sebelum praktik menggunakan Android Studio, yang perlu dilakukan adalah instal software yang dibutuhkan. Tools yang digunakan dalam instal antara lain sebagai berikut.


1. JDK (Java Development Kit) Versi 7 ke Atas Dapat di download di: http://www.oracle.com/technetwork/java/javase/downloads/

Gambar 1.5 Java SE Development KitSumber: Jawa.com

Download sesuai dengan sistem komputer yang dimiliki, 32 bit atau 64 bit.

2. Android Studio (Versi 3.0) Android studio (versi 3.0) dapat di-download di:

Gambar 1.6 Android Studio IDE resmi untuk Android.Sumber: https://developer.android.com

Melalui link tersebut kita dapat men-download software Android Studio dengan versi terbaru. Tutorial dan pengembangan Android Studio secara lengkap disajikan di alamat website tersebut. Kita dapat mengubah tampilan website ke Bahasa Indonesia.

3. Genymontion Alamat website Genymontin yaitu https://www.genymotion.com kita disarankan

untuk mendaftar dan membuat account, karena username dan password dari account digunakan saat menambahkan perangkat dalam genymontion.

Gambar 1.7 Mendaftar account GenymontionSumber: https://www.genymotion.com


Setelah memiliki account kita dapat mendownload Genymontion baik software maupun perangkat-perangkat yang dibutuhkan sebagai emulator.

D. Praktik Instalasi Software dan Setting Android Virtual Devide

1. Instalasi Software Cara menginstal software sebagai berikut:

a. Instalasi Java Development Kit (JDK) Android merupakan aplikasi yang dikembangkan dengan java. Supaya dapat

melakukan pemrograman berbasis Android, langkah awal yang harus dilakukan adalah menginstal program java.

Java Development Kit atau yang disingkat dengan JDK merupakan program yang digunakan untuk membantu para pengembang aplikasi dalam merancang dan membuat program.

Langkah-langkah untuk menginstal Java Development Kit (JDK) sebagai berikut.1) Buka file JDK yang sudah di-download, Klik 2 kali dan proses install dimulai.

(sesuaikan sistem komputer 32 bit atau 64 bit).2) Kemudian akan tampil Java™ SE Development Kit 7 – Setup, kemudian pilih

Next.

Gambar 1.8 Halaman welcome JawaSumber: Dokumen pribadi

3) Pilih lokasi tempat JDK tersebut di install, dapat menggunakan folder defaultnya di C:\Program Files\Java\Jdk 1.7.0. tekan tombol Change jika ingin melakukan perubahan lokasi penginstalan.Kemudian klik tombol Next.


Gambar 1.9 Folder JawaSumber: Dokumen pribadi

4) Tunggulah beberapa saat hingga proses instalasi selesai dilakukan. 5) Apabila proses instalasi selesai, maka akan muncul tampilan Java ™ SE

Development Kit 7 – Complete, Klik Finish.

Gambar 1.10 Tampilan instal selesaiSumber: Dokumen pribadi

b. Pengaturan Java di Windows Agar dalam pembuatan aplikasi dapat berjalan dengan baik, khususnya

aplikasi yang menggunakan browser, perlu dilakukan pengaturan java terlebih dahulu dengan langkah-langkahnya sebagai berikut:1) Buka control paneldi komputer, pilih dan klik 2 kali Programs

Gambar 1.11 Tampilan window programsSumber: Dokumen pribadi


2) Pilih Java dan klik 2 kali

Gambar 1.12 Tampilan halaman JawaSumber: Dokumen pribadi

3) Selanjutnya tampil Java Control Panel, pada menu General, pilih Network Settings

Gambar 1.13 Tampilan Java control panelSumber: Dokumen pribadi

4) Tampil Network Settings dan pilih opsi: Direct connection, ini berguna untuk mengatur akses internet melalui java dan pengaturan paling kompatibel. Selanjutnya pilih tombol OK.

Gambar 1.14 Tampilan network settingSumber: Dokumen pribadi


5) Selanjutnya pilih menu Update, hilangkan centang (√) Check for Updates Automatically. Jika Anda tampilan konfirmasi, pilih Do Not check

Gambar 1.15 Tampilan menu updateSumber: Dokumen pribadi

6) Klik menu Advenced, Default Java for Browser: pilih Mozilla Family, Miscellaneous pilih (√): Place java icon in system tray.

c. Instal Android Studio Praktik melakukan install Android Studio, langkah-langkahnya sebagai berikut:

1) Klik 2 kali file Android Studio hasil download, proses instal berjalan dan tunggu selanjutnya tampil halaman Welcome, tekan tombol Next.

Gambar 1.16 Tampilan welcome android Studio SetupSumber: Dokumen pribadi


2) Beri tanda centang (√) pada Android Virtual Device di halaman Choose Components, selanjutnya tekan tombol Next.

Gambar 1.17 Tampilan Choose ComponentSumber: Dokumen pribadi

3) Proses install berjalan tunggu sampai selesai, tampil halaman Instalation Complate, tekan tombol Next.

Gambar 1.18 Tampilan Instalation CompleteSumber: Dokumen pribadi

4) Tunggu beberapa saat, hingga tampil halaman Welcome to Android Studio (versi 3.0). Sampai langkah ini proses install sudah selesai. Selanjutnya pilih Start a new Android Studio project, jika ingin membuat project di Android Studio.

Gambar 1.19 Tampilan Welcome Android Studio versi 3.0Sumber: Dokumen pribadi


d. Instal Emulator Genymontion Praktik instal Genymontain ini adalah pilihan, maksudnya jika menggunakan

emulator bawaan Android Studio, membutuhkan memori besar (sekitar 1 Gb dibutuhkan untuk emulator bawaan Android Studio) maka jika menggunakan emulator Genymontion hanya membutuhkan memori sekitar 400Mb. Langkah-langkah menginstal Genymontion sebagai berikut:1) Klik 2 kali software Genymontion hasil download, tampil pemilihan Bahasa,

pilih Bahasa dan klik Ok

Gambar 1.20 Tampilan control panelSumber: Dokumen pribadi

2) Tampil Welcome to the Genymontion Setup Wizard, pilih Next3) Tampil Select Destination Location, tekan tombol Next.

Gambar 1.21 Tampilan lokasi instalSumber: Dokumen pribadi

4) Tampil Ready to Install, klik Install5) Tunggu proses install sedang berjalan, tunggu hingga selesai. Selanjutnya

akan tampil VirtualBox. 6) Tampil welcome to Oracle VB VirtualBox 5.0.4 Setup Wizard, klik tombol

Next.


Gambar 1.22 Tampilan virtualboxSumber: Dokumen pribadi

7) Jika sudah selesai proses install, tampil sebagai berikut. Klik Finish.

Gambar 1.23 Tampilan instal selesaiSumber: Dokumen pribadi

Menambahkan perangkat emulator di Genymontion: Sebelum digunakan, Genymontion harus ditambahkan perangkat yang

berfungsi sebagai emulator. Cara menambahkan perangkah ke Genymontion ikuti langkah-langkah berikut:1) Buka Genymontion yang sudah berhasil di instal, seperti gambar di bawah ini.

Gambar 1.24 Tampilan membuka GenymontionSumber: Dokumen pribadi

pemrograman web dan perangkat bergerak...pemrograman web dan perangkat bergerak smk/mak kelas xii...

Documents