Anda di halaman 1dari 23

PEMROGRAMAN

WEB DAN PERANGKAT


BERGERAK
(C3) KELAS XII

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

PT. KUANTUM BUKU SEJAHTERA


PEMROGRAMAN WEB DAN
PERANGKAT BERGERAK
SMK/MAK Kelas XII
Penulis : Hardo Sujatmiko, S.Pd, M.Pd
Editor : Tim Quantum Book
Perancang sampul : Tim Quantum Book
Perancang letak isi : Tim Quantum Book
Penata letak : Tim Quantum Book
Ilustrator : Tim Quantum Book
Tahun terbit : 2019
ISBN : 978-623-7216-94-0
Alamat : Jl. Pondok Blimbing Indah Selatan X N6 No 5 Malang - Jawa Timur

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) cm
viii + 222 halaman
© Hak cipta dilindungi oleh undang-undang.
Dilarang menyebarluaskan dalam bentuk apapun
tanpa izin tertulis

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).
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

Kata Pengantar
iii
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

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


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 ........................................................................................................... 218


Indeks ................................................................................................................ 219
Biodata Penulis........................................................................................................... 222

Daftar Gambar v
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

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


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....................................................................................................... 70
Bab 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.................................................................................................................................................. 92
Bab 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........................................................................................................................................ 115
Bab 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

Teknik Desain Aplikasi Mobile vii


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

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

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

1 Teknologi
Pengembangan
Aplikasi Mobile

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

Teknologi Pengembangan Aplikasi Mobile 1


Tujuan Pembelajaran
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, serta
5. mempresentasikan hasil pembuatan aplikasi mobile.

Peta Konsep

Teknologi Pengembangan
Aplikasi Mobile

Persyaratan Praktik Sofware dan


Kemajuan Teknologi Persiapan software
hardware yang Setting Android
Android yang dibutuhkan
dibutuhkan Virtual Devide

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


Materi Pembelajaran

A. Kemajuan Teknologi Android

Android adalah sistem operasi untuk


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,
Gambar 1.1 Contoh smartphone android
yaitu Google Inc. membeli Android Inc., Sumber: httpanalogindex.comnewswindows-10-mobile-a-
pendatang baru yang membuat peranti lunak new-concept-shows-the-windows-phone-system-of-dreams-
untuk ponsel. Android, Inc. didirikan oleh Andy _270453.html
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
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 Gambar 1.2 Android Studio Versi 3.0
berikut. Sumber: https://developer.android.com/

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.

Teknologi Pengembangan Aplikasi Mobile 3


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.

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


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.

Teknologi Pengembangan Aplikasi Mobile 5


15. Android 7 : Nougat
Beberapa 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 2.2 Froyo.png Android 2.3 Gingerbread.png Android 3.0 Honeycomb.png

Android 4.0 Ice-cream sandwich.png Android 4.1 Jellybean.png Android 4.4 Kitkat.png Android 5.0 Lollipop.png Android 5.0.png

Gambar 1.3 Versi Android 1 sampai 9


(Sumber: https://developer.android.com)

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


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 install


Sumber: dokumen pribadi

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

Teknologi Pengembangan Aplikasi Mobile 7


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 Kit
Sumber: 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 Genymontion
Sumber: https://www.genymotion.com

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


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 Jawa
Sumber: 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.

Teknologi Pengembangan Aplikasi Mobile 9



Gambar 1.9 Folder Jawa
Sumber: 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 selesai
Sumber: 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 programs
Sumber: Dokumen pribadi

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


2) Pilih Java dan klik 2 kali


Gambar 1.12 Tampilan halaman Jawa
Sumber: Dokumen pribadi
3) Selanjutnya tampil Java Control Panel, pada menu General, pilih Network
Settings


Gambar 1.13 Tampilan Java control panel
Sumber: 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 setting
Sumber: Dokumen pribadi

Teknologi Pengembangan Aplikasi Mobile 11


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


Gambar 1.15 Tampilan menu update
Sumber: 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 Setup
Sumber: Dokumen pribadi

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


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


Gambar 1.17 Tampilan Choose Component
Sumber: Dokumen pribadi
3) Proses install berjalan tunggu sampai selesai, tampil halaman Instalation
Complate, tekan tombol Next.


Gambar 1.18 Tampilan Instalation Complete
Sumber: 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.0
Sumber: Dokumen pribadi

Teknologi Pengembangan Aplikasi Mobile 13


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 panel
Sumber: Dokumen pribadi
2) Tampil Welcome to the Genymontion Setup Wizard, pilih Next
3) Tampil Select Destination Location, tekan tombol Next.


Gambar 1.21 Tampilan lokasi instal
Sumber: Dokumen pribadi
4) Tampil Ready to Install, klik Install
5) 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.

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



Gambar 1.22 Tampilan virtualbox
Sumber: Dokumen pribadi
7) Jika sudah selesai proses install, tampil sebagai berikut. Klik Finish.


Gambar 1.23 Tampilan instal selesai
Sumber: 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 Genymontion
Sumber: Dokumen pribadi

Teknologi Pengembangan Aplikasi Mobile 15

Anda mungkin juga menyukai