KATA PENGANTAR

Era Digitalisasi pada Industri 4.0 di Indonesia saat ini dihadapkan pada tantangan
hadirnya permintaan dan penawaran talenta digital dalam mendukung perkembangan
ekosistem industri teknologi. Tantangan tersebut perlu dihadapi salah satunya melalui
kegiatan inovasi dan inisiasi dari berbagai pihak dalam memajukan talenta digital Indonesia,
baik dari pemerintah maupun mitra kerja pemerintah yang dapat menyiapkan angkatan kerja
muda sebagai talenta digital Indonesia. Kementerian Komunikasi dan Informatika melalui
Badan Penelitian dan Pengembangan Sumber Daya Manusia sejak tahun 2018-2019, telah
menginisiasi Program Digital Talent Scholarship yang telah berhasil dianugerahkan kepada
26.000 penerima pelatihan di bidang teknologi informasi dan komunikasi. Program Digital
Talent Scholarship ini ditujukan untuk memberikan pelatihan dan sertifikasi tema-tema bidang
teknologi informasi dan komunikasi, diharapkan menjadi bagian untuk memenuhi permintaan
dan penawaran talenta digital Indonesia.

Tahun ini, Program Digital Talent Scholarship menargetkan pelatihan peningkatan

kompetensi bagi 60.000 peserta yang bertujuan untuk meningkatkan keterampilan dan daya
saing SDM bidang teknologi informasi dan komunikasi sebagai bagian dari program
pembangunan prioritas nasional. Program pelatihan DTS 2021 ditujukan untuk meningkatkan
keterampilan, keahlian angkatan kerja muda Indonesia, masyarakat umum dan aparatur sipil
negara di bidang teknologi informasi dan komunikasi sehingga dapat meningkatkan
produktivitas dan daya saing bangsa di era Industri 4.0.

Program DTS 2021 secara garis besar dibagi menjadi Tujuh akademi, yaitu: Fresh
Graduate Academy (FGA), Program pelatihan berbasis kompetensi bersama GlobalTech yang
ditujukan kepada peserta pelatihan bagi lulusan S1 bidang TIK dan MIPA, dan terbuka bagi
penyandang disabilitas; Vocational School Graduate Academy (VSGA), Program pelatihan
berbasis kompetensi nasional yang ditujukan kepada peserta pelatihan bagi lulusan SMK dan
Pendidikan Vokasi bidang TI, Telekomunikasi, Desain, dan Multimedia; Coding Teacher
Academy (CTA), Program pelatihan merupakan program pelatihan pengembangan sumberdaya
manusia yang ditujukan kepada peserta pelatihan bagi Guru setingkat SMA/SMK/MA/SMP/SD
di bidang pemrograman. Online Academy (OA), Program pelatihan OA merupakan program
pelatihan Online di bidang Teknologi Informasi yang ditujukan kepada peserta pelatihan bagi
Masyarakat umum, ASN, mahasiswa, dan pelaku industri; Thematic Academy (TA), Program
pelatihan TA merupakan program pelatihan multisektor bagi pengembangan sumberdaya
manusia yang ditujukan kepada peserta pelatihan dari jenjang dan multidisiplin yang berbeda;
Regional Development Academy (RDA), Program pelatihan RDA merupakan program pelatihan
pengembangan sumberdaya manusia yang ditujukan untuk meningkatkan kompetensi ASN di
Kawasan Prioritas Pariwisata dan 122 Kabupaten Prioritas Pembangunan. Digital
Entrepreneurship Academy (DEA), Program pelatihan DEA merupakan program pelatihan
pengembangan sumberdaya manusia yang ditujukan kepada talenta digital di bidang Usaha
Mikro, Kecil, dan Menengah (UMKM).

Selamat mengikuti Pelatihan Digital Talent Scholarship, mari persiapkan diri kita menjadi
talenta digital Indonesia.

Jakarta, 2021
Kepala Badan Penelitian dan Pengembangan Sumber Daya Manusia
Kementerian Komunikasi dan Informatika Republik Indonesia
Dr. Ir. Basuki Yusuf Iskandar, MA
Pendahuluan

Unit kompetensi ini berhubungan dengan pengetahuan, keterampilan, dan sikap kerja
yang dibutuhkan dalam membuat aplikasi berbasis mobile Android.

A. Tujuan Umum
Setelah mempelajari modul ini peserta latih diharapkan mampu membuat aplikasi
berbasis mobile sederhana.

B. Tujuan Khusus
Adapun tujuan mempelajari unit kompetensi melalui buku informasi Pelatihan Mobile
Programming ini guna memfasilitasi peserta latih sehingga pada akhir pelatihan
diharapkan memiliki kemampuan dalam Merancang Mobile Interface Menggunakan
Pencil.

Latar belakang

Unit kompetensi ini dinilai berdasarkan tingkat kemampuan dalam merancang

mobile programming. Adapun penilaian dilakukan dengan menggabungkan
serangkaian metode untuk menilai kemampuan dan penerapan pengetahuan
pendukung penting. Penilaian dilakukan dengan mengacu kepada Kriteria Unjuk
Kerja (KUK) dan dilaksanakan di Tempat Uji Kompetensi (TUK), ruang simulasi atau
workshop dengan cara:
1.1 Lisan
1.2 Wawancara
1.3 Tes tertulis
1.4 Demonstrasi
1.5 Metode lain yang relevan.

Deskripsi Pelatihan

Materi ini berisi penjelasan mengenai cara menentukan tools yang akan digunakan
dalam perancangan antar muka aplikasi berbasis mobile dan memilih informasi yang
akan ditampilkan dalam suatu layar sesuai dengan kebutuhan

Tujuan Pembelajaran
Setelah pertemuan selesai peserta pelatihan mampu :
1. Peserta mampu menjelaskan Tools/alat bantu yang digunakan untuk mendesain
aplikasi berbasis mobile.
2. Peserta mampu menjelaskan Menu-menu dalam tools/alat bantu dijelaskan
sesuai dengan kebutuhan aplikasi.
3. Peserta mampu menjelaskan Fitur-fitur dalam tools/alat bantu dijelaskan sesuai
dengan kebutuhan aplikasi.
4. Peserta mampu membuat Rancangan form dibuat dengan menggunakan fitur-
fitur yang tersedia dalam tools/alat bantu tersebut.
5. Peserta mampu membuat Jumlah rancangan form dipilih sesuai dengan
kebutuhan.
6. Peserta mampu membuat Rancangan form yang berisikan tampilan informasi
dibuat sesuai dengan kebutuhan.

Kompetensi Dasar

Mampu merancang Mobile Interface Menggunakan Pencil.

Indikator Hasil Belajar

1. Peserta mampu menjelaskan Tools/alat bantu yang digunakan untuk mendesain

aplikasi berbasis mobile.
2. Peserta mampu menjelaskan Menu-menu dalam tools/alat bantu dijelaskan
sesuai dengan kebutuhan aplikasi.
3. Peserta mampu menjelaskan Fitur-fitur dalam tools/alat bantu dijelaskan sesuai
dengan kebutuhan aplikasi.
4. Peserta mampu membuat Rancangan form dibuat dengan menggunakan fitur-
fitur yang tersedia dalam tools/alat bantu tersebut.
5. Peserta mampu membuat Jumlah rancangan form dipilih sesuai dengan
kebutuhan.
6. Peserta mampu membuat Rancangan form yang berisikan tampilan informasi
dibuat sesuai dengan kebutuhan.
INFORMASI PELATIHAN

Akademi Vocational School Graduate Academy

Mitra Pelatihan Perguruan Tinggi

Tema Pelatihan Mobile Programmming

Sertifikasi Sertifikasi Kompetensi Junior Mobile Programming

dari BNSP

Persyaratan Sarana Peserta/spesifikasi device Laptop dengan spesifikasi:

Tools/media ajar yang akan digunakan
1. RAM minimal 4 GB (disarankan 8 GB)
2. Laptop dengan 32/64-bit processor
3. Laptop dengan Operating System Windows
7,8,10, Linux, atau MAC OSX
4. Laptop dengan konektivitas WiFi dan memiliki
webcam
Akses Internet Dedicated 126 kbps per peserta per
perangkat

Aplikasi yang akan di gunakan selamat pelatihan 1. JDK (Java Development Kit)
2. Android Studio
3. Pencil
4. Sublime Text
5. XAMPP

Tim Penyusun ● Alif Akbar Fitrawan, S.Pd, M. Kom (Politeknik

Negeri Banyuwangi);
● Anwar, S.Si, MCs. (Politeknik Negeri
Lhokseumawe);
● Eddo Fajar Nugroho (BPPTIK Cikarang);
● Eddy Tungadi, S.T., M.T. (Politeknik Negeri Ujung
Pandang);
● Fitri Wibowo (Politeknik Negeri Pontianak);
● Ghifari Munawar (Politeknik Negeri Bandung);
● Hetty Meileni, S.Kom., M.T. (Politeknik Negeri
 Sriwijaya) ;
● I Wayan Candra Winetra, S.Kom., M.Kom
(Politeknik Negeri Bali) ;
● Irkham Huda (Vokasi UGM) ;
● Josseano Amakora Koli Parera, S.Kom., M.T.
(Politeknik Negeri Ambon) ;
● I Komang Sugiartha, S.Kom., MMSI (Universitas
Gunadarma) ;
● Lucia Sri Istiyowati, M.Kom (Institut Perbanas) ;
● Maksy Sendiang,ST,MIT (Politeknik Negeri
Manado) ;
● Medi Noviana (Universitas Gunadarma) ;
● Muhammad Nashrullah (Politeknik Negeri
Batam) ;
● Nat. I Made Wiryana, S.Si., S.Kom., M.Sc.
(Universitas Gunadarma) ;
● Rika Idmayanti, ST, M.Kom (Politeknik Negeri
Padang) ;
● Rizky Yuniar Hakkun (Politeknik Elektronik
Negeri Surabaya) ;
● Robinson A.Wadu,ST.,MT (Politeknik Negeri
Kupang) ;
● Roslina. M.IT (Politeknik Negeri Medan) ;
● Sukamto, SKom., MT. (Politeknik Negeri
Semarang) ;
● Syamsi Dwi Cahya, M.Kom. (Politeknik Negeri
Jakarta) ;
● Syamsul Arifin, S.Kom, M.Cs (Politeknik Negeri
Jember) ;
● Usmanudin (Universitas Gunadarma) ;
● Wandy Alifha Saputra (Politeknik Negeri
Banjarmasin) ;
INFORMASI PEMBELAJARAN

Unit Kompetensi Materi Kegiatan Durasi Rasio Sumber

pembelajaran pembelajaran Pelatihan Praktek : pembelajaran
Teori

Modul dan Slide Daring/Online Live Class 60:40

Kebutuhan dalam dalam 2 JP
membuat aplikasi Merancang LMS 4 JP
berbasis mobile Mobile Interface @ 45 Menit
Android Menggunakan
Pencil

Materi Pokok

Merancang mobile interface

Sub Materi Pokok

Menentukan tools yang akan digunakan dalam perancangan antar muka aplikasi berbasis mobile

MERANCANG MOBILE INTERFACE

A. Pengetahuan yang diperlukan dalam merancang mobile interface

Antarmuka Pengguna (User Interface) Aplikasi

Bentuk tampilan grafis dari aplikasi yang berhubungan langsung dengan
pengguna (user). Antarmuka pengguna berfungsi untuk menghubungkan
antara pengguna dengan sistem aplikasi, sehingga aplikasi tersebut bisa
digunakan.
Pentingnya membuat rancangan antarmuka Aplikasi
 •Memudahkan komunikasi dengan client, client yang minta dibuatkan
aplikasi bisa cepat tahu gambaran awal dari aplikasi yang akan dibuat
sehingga jika ada yang kurang cocok bisa segera diperbaiki. Lebih mudah
memperbaiki pada tahap desain dari pada saat tahap implementasi.
•Pengerjaan antar muka lebih terarah, developer punya panduan dalam
mengimplementasikan antarmuka pengguna aplikasi.
•Pengerjaan aplikasi lebih cepat, karena antarmuka pengguna sudah
disetujui oleh client dan ada panduan desain pengerjaan aplikasi bisa lebih
cepat.

1. Menentukan tools yang akan digunakan dalam perancangan antar

muka aplikasi berbasis mobile
Di pasaran ada banyak tools desain aplikasi, sebagai conto
• Sketch (mac OS) adalah aplikasi grafis yang dapat digunakan
untuk keperluan web desain.
• Adobe XD (Windows, Mac OS) adalah aplikasi khusus untuk
membuat desain aplikasi mobile.
• Balsamiq (Windows, Mac OS) adalah software pembuatan desain
atau prototyping dalam pembuatan user interface pada aplikasi.
• Pencil (Windows, Mac OS, Linux) adalah perangkat lunak open
source yang digunakan untuk membuat user interface (UI).
• Invision (Windows, Mac OS) adalah tools untuk membuat
prototype dari sebuah desain produk.
• Zeplin (Windows, Mac OS) adalah tools kolaborasi yang interaktif
untuk developer dan desainer dalam pengembangan user interface
aplikasi.
• Marvell App (Windows, Mac OS) adalah tools yang
memudahkan para desainer untuk membuat prototype aplikasi
mobile dan proyek web.
• Proto.io (Windows, Mac OS) adalah tools membuat prototype
aplikasi yang hasil akhirnya akan mirip dengan aplikasi yang
seharusnya walaupun masih prototype dan tidak perlu koding.
a. Aplikasi Pencil
Aplikasi pembuatan prototype antarmuka aplikasi yang dikembangkan oleh
Evolus.
▪ Berbasis open source dan gratis.
▪ Dapat dijalankan pada system operasi Windows, Mac OS, dan Linux.
▪ Mendukung pembuatan antar muka aplikasi Desktop dan Mobile
▪ Download di https://pencil.evolus.vn/Downloads.html

Fitur-fitur aplikasi pencil

Pencil menyediakan beragam koleksi bentuk bawaan (Shape) untuk
menggambar berbagai jenis antarmuka pengguna mulai dari desktop
hingga platform mobile.
Ini membuatnya lebih mudah untuk mulai membuat desain aplikasi
dengan instalasi sederhana.
1) Mudah membuat prototype GUI
Pencil telah menyediakan beragam koleksi bentuk bawaan.
Tinggal drag & drop untuk menyusun antarmuka.

2) Built-in Shape Collections

Pensil memiliki banyak koleksi bentuk yang disertakan secara
default. Daftar koleksi bawaan sekarang termasuk bentuk umum
 (common shapes), elemen flowchart, bentuk desktop / web UI,
bentuk GUI Android dan iOS.
Daftar koleksi bawaan :
• Bentuk umum (common shapes)
• Elemen flowchart
• Bentuk desktop
• Elemen web,
• UI Android dan iOS

3) Mendukung Menggambar Diagram

Pencil sekarang mendukung konektor yang dapat digunakan
untuk menghubungkan beberapa bentuk (Shape) dalam suatu
diagram. Koleksi bentuk (Shape) diagram alur juga tersedia
untuk menggambar diagram
4) Export ke berbagai format output
Projek Pencil dapat di export ke berbagai format yang
dibutuhkan seperti Rasterized graphics PNG File, Halaman
web, PDF File, Print, SVG File, maupun Dokumeb Open office
(ODT File).

5) Mudah mendapatkan clipart dari Internet

Pencil memiliki alat peramban clipart yang terintegrasi dengan
OpenClipart.org untuk memudahkan pengguna menemukan
cliparts dengan kata kunci dan menambahkannya ke dalam
 gambar dengan operasi drag-and-drop sederhana. Clipart yang
tersedia dalam format vector.

6) Menghubungkan antar halaman

Elemen dalam gambar dapat ditautkan ke halaman tertentu dalam
dokumen yang sama. Ini membantu pengguna menentukan aliran
UI saat membuat aplikasi atau maket situs web.
Tautan yang didefinisikan dalam suatu dokumen dikonversi
menjadi tautan hyper-HTML ketika dokumen tersebut di export ke
dalam format web. Proses ini membuat versi interaktif dari
mockup di mana pemirsa dapat melihat aliran yang disimulasikan
ketika mengklik pada elemen UI.

Menu-menu Aplikasi Pencil

Menu pada aplikasi pencil:
1) Menu utama: Document, Edit, View, Shape, Tool, Help
- Document: new document, open document, save document,
export document, recent document, print document
- Edit: copy, cut, paste elemen desain
- View: zoom in, zoom put, actual size
- Shape: Pilih collections
- Tools: manage collection, manage template, manage fonts,
developer tools
- Help: help, about

2) Collections: Untuk memilih komponen bentuk (Shape) desain

antarmuka, bisa pilih kategori lalu drag & drop ke canvas.
Collections terdiri dari:
▪ Shape filter (cari bentuk yang diinginkan)
▪ Shape category, terdiri dari
o Common shapes: bentuk-bentuk biasa seperti kotak,
segitiga, trapezium, diamond, dll
o Basic web element: elemen-elemen dari desain
website html (h1, h2, hyperlink, table, dll)
o Desktop: elemen penyusun desain aplikasi desktop (
label, button, textbox, panel, progress bar, dll)
 o Flowchart: elemen flowchart seperti process,
terminal, konektor, decision, dll
o Mobile: elemen aplikasi mobile platform android dan
ios (phone, tablet, status bar, navigation bar, dll)

Collections Shape Mobile Android

beberapa koleksi bentuk (Shape) yang telah tersedia di
aplikasi Pencil.
 3) Canvas
Canvas digunakan untuk menyusun desain rancangan aplikasi

b. Praktik Desain Aplikasi dengan Pencil

Untuk membuat projek desain pada Pencil, yang dilakukan adalah:
1) drag & drop komponen Shape ke kanvas.

2) Resize canvas sesuai komponen UI yang dipilih, dengan cara Klik

kanan pada tampilan dasar android

3) Pilih tema dark atau light.

Dalam sebuah aplikasi terdapat 2 tema yaitu Dark (gelap) dan Light
(terang). Pengguna dapat memilih salah satu dari kedua tema
tersebut.
Caranya klik kanan pada komponen, arahkan pada bagian Theme,
pilih tema gelap atau terang.
4) Tambahkan status bar, Pilih status bar pada Collection, drag & drop
ke atas canvas, lalu sesuaikan ukurannya. Setiap komponen baru akan
otomatis menimpa komponen lama.

5) Tambahkan background dasar aplikasi dengan drag & drop kotak

(rectangle) dari common shape
6) Ubah warna background dan border sesuai yang diinginkan.

7) Tambahkan gambar dan masukkan file gambar (Load Linked Image)

▪ Menambahkan gambar dari Common Shape
▪ klik kanan pada komponen
▪ pilih Load Linked Image
▪ cari dan pilih file gambar yang diinginkan.

8) Tambahkan rectangle baru, atur warna rectangle dan border sesuai

yang diinginkan.
9) Tambahkan Text label dan edit Text menjadi Username dan
Password.
▪ Tambahkan 2 Text label.
▪ Klik 2 kali untuk mengubah text.
▪ Ubah text menjadi Username dan Password
▪ Text Label berfungsi menampilkan sebuah kalimat atau teks.

10) Ganti warna, style, dan font text

11)Tambahkan Text Field dan mengubah hint pada komponen tersebut.

Text Field berfungsi untuk pengguna dapat menyisipkan sebuah teks.
 Ubah hint pada Text Field. Hint hanya sebagai petunjuk bagi
pengguna bukan sebuah isi teks.

12)Tambahkan Icon dan ubah Icon

▪ Tambahkan Icon pada Mobile – Android ICS.
▪ Drag & drop ke canvas.
▪ Klik kanan pada Icon.
▪ Pilih Type dan pilih gambar icon yang diinginkan.

13)Tambahkan Tombol (Button) dan edit teks tombol tersebut.

▪ Tambahkan Button pada Mobile – Android ICS.
▪ Drag & drop ke canvas .
▪ Klik 2 kali pada Button untuk mengubah teks Button tersebut.
14)Tambahkan page baru Main menu dan Sign Up
Tambahkan 2 page baru dengan cara:
▪ tekan tombol Add page +
▪ Ubah Page Title menjadi Main Menu dan Sign Up.
▪ Jika sudah, klik Create.

15)Menambahkan link antar halaman pada tombol (Button)

Menambah link antar halaman pada komponen button. Fungsinya
jika button tersebut ditekan makan akan pindah ke page yang dituju.
• Klik kanan pada komponen button
• Pilih bagian Link To, pilih page yang ingin di tuju.
16)Menambahkan link antar halaman pada text register sekarang
▪ Tambahkan komponen Text terlebih dahulu.
▪ Klik 2 kali untuk mengubah teksnya.
▪ Jika sudah, klik kanan pada komponen Text
▪ Pilih bagian Link To, pilih page yang ingin di tuju.

17)Menambahkan Action Bar dan title dengan Text pada halaman Sign
Up
▪ Tambahkan Action Bar pada Mobile – Android ICS
▪ Drag & drop ke canvas
▪ Sesuaikan ukurannya
▪ Selanjutnya tambahkan title denga cara menambahkan Text
label.
 ▪ Drag & drop ke canvas
▪ Klik 2 kali untuk mengubah teksnya

18)Menambahkan Text Label dan Text Field pada halaman Sign Up.
▪ Tambahkan Text Label, ubah teksnya menjadi Nama Lengkap,
Username, dan Password
▪ Tambahkan Text Field, letakkan dibawah masing-masing Text
Label. Ubah hint pada Text Field tersebut.
19)Menambahkan Combo Box untuk field yang perlu pilihan.
Combo box berfungsi untuk field yang isinya sudah pasti, seperti jenis
kelamin.
▪ Tambahkan terlebih dahulu Text Label, ubah teksnya menjadi
Jenis Kelamin.
▪ Selanjutnya tambahkan komponen Combo Box
▪ Ubah isian Combo Box menjadi Laki-laki dan Perempuan
20)Menambahkan Check Box.
Tambahkan komponen Check Box, lalu ubah teksnya.

21)Menambahkan Tombol Sign Up dan Tombol Back dengan icon pada

Action Bar
22)Tambahkan Link tombol Back dengan tujuan Halaman Login
Tambahkan link pada Icon Back dengan tujuan halaman Login.
• Caranya klik kanan pada Icon Back.
• Pilih bagian Link To.
• Pilih tujuan Login Page.
23)Export antar muka ke format html
Langkah-langkah:
• Klik menu Document
• Pilih Export
• Pilih halaman yang akan di export atau ceklis semua halaman.
• pilih tipe output, yaitu pilih Single web page
• pilih template, yaitu Default HTML Template
• Ceklis bagian Copy links from background pages
• klik tombol Export
24)Tampilkan hasil export file html dan uji coba link pada tombol.
Setelah projek berhasil di export menjadi file HTML, buka file
tersebut dengan browser. Maka akan menampilkan prototype desain
aplikasi yang sudah dibuat. Cek berbagai fungsinya apakah terdapat
kesalahan atau tidak.
Memilih informasi yang akan ditampilkan dalam suatu layar sesuai
dengan kebutuhan
a. Pengenalan Model-View-Presenter pattern
Model-View-Presenter (MVP) adalah salah satu pendekatan
pengembangan program yang membagi pengembangan menjadi 3
kelompok utama yaitu Model, View dan Presenter. Konsep ini umum
digunakan dalam pemrograman mobile dengan mengunakan Android
Studio. Konsep ini mirip dengan konesp MVC pada OOP. 3 kelompok
resource dalam MVP tersebut adalah:

● View
View adalah elemen user interface yang menampilkan data dan dan
dapat melakukan respon terhadap aksi yang dilakukan oleh user.
● Presenters,
adalah resource yag menghubungkan antara view dan model, dimana
presenter ini dapat memberikan data yang dispesifikasi oleh model
kepada view, dan sebaliknya memberikan data yang diinputkan ke
view oleh user kepada model.
● Model,
adalah sfesifikasi dari struktur data dari sebuah aplikasi dimana
model juga dapat berisi perintah untuk mengakses dan memanipulasi
data tersebut
1) View
User interface pada pemrograman android terdiri dari hirarki object
yang diberi nama view. Class View merepresentasikan blok dasar dari
semua komponen UI yang akan dipasang. View memiliki lokasi
penempatan yang diterjemahkan kedalam pasangan koordinat left dan
top (titik kiri dan atas layer tampilan) dan dengan bentuk 2(dua)
dimensi yang diwakili oleh width dan height (Panjang dan tinggi) dari
view tersebut. Satuan yang digunakan dalam penentuan lokasi dan
dimensi ini biasanya adlah device-independent pixel (dp).

Sistem Android menyediakan banyak class view yang sudah

didefinisikan, diantaranya:
• Text, (TextView)
• Fields, untuk input dan editing text (EditText)
• Buttons, dimana user dapat melakukan tap (Button) dan
komponen interactive lainnya
• Scrollable text (ScrollView)
• Scrollable items (RecyclerView)
• Images (ImageView)
• Dan yang lainnya

2) Group View
 Views dapat dikelompokkan kedalam sebuah view group (ViewGroup)
yang berperan sebagai sebuah container dari views (container adalah
sebuah kotak penampung view). Hubugan dari view dalam container
adalah parent-child (bapak-anak atau kelompok besar yang terdiri dari
bagian kecil) dimana bapak adalah view group dan anak adalah view
atau dapat juga berupa group view lainnya yang memiliki bagian anak
lagi.

Bentuk ViewGroup yang umum adalah:

• ScrollView: adalah group yang terdiri dari satu atau lebih child
view yang dapat di scrolling ke atas atau bawah
• RecyclerView : Adalah group yang terdiri dari list view lain atau
group view yang dapat di scrolling dan juga dapat di tambahkan
view baru atau menghapus view yang sudah ada secara dinamis
3) Layout Group View

Keterangan
1. Root view group (view group paling utama)
2. View Group atau view yang merupakan anak dari viewgroup root
b. Pengenalan Layout dan Merancang Layout
Beberapa jenis layout pada Android Studio yaitu:
1) Linear Layout
Linear Layout adalah group dari child view yang diposisikan
menurut align horizontal (dari kiri ke kanan) atau vertical (dari atas
ke bawah)

2) Relative Layout
Relative Layout adalah group dari child view yang posisi align
relative terhadap group view atau view lainnya yang berada pada
group view yang sama
3) Constraint Layout
Constraint Layout adalah group dari child view yang mengunakan
anchor points, edges dan guidelines untuk mengontrol bagaimana
view di posisikan secara relative dengan elemen lainnya pada layout.
Constraint layout ini sangat mirip dengan relative layout kecuali
pada penambahan jarak, sudut dan guid line yang telah ditentukan
dari masing-masing komponen secara relative terhadap komponen
lainnya

4) Table Layout
Table Layout adalah pengaturan posisi tampilan yang dirancang
kedalam bentuk baris dan kolom.
Komponen yang terpasang dalam bentuk baris dan kolom biasanya
memiliki ukuran yang sama antara lebar atau tinggi dari masing-
masing komponen
Table Layout

5) Absolute Layout
Absolute Layout adalah group layout yang membebaskan kita
meletakkan sebuah komponen secara absolute pada suatu titik x dan
y di layar tampilan.
6) Frame Layout
Frame Layout adalah pengaturan posisi tampilan daalm bentuk
tumpukan atau stack yang berfungsi untuk memblok suatu area
pada layar untuk menampikan sebuah view.

7) Grid Layout
Grid Layout adalah pengaturan posisi komponen dalam bentuk
kotak grid yang dapat di scroll. Mirip dengan Table Layout, tetapi
dapat di scroll sesuai kebutuhan
 8) List View
List View adalah pengaturan posisi komponen dalam bentuk list
atau deretan komponen yang tersusun dari atas ke bawah, biasanya
digunakan untuk menampilan data seperti kontak atau list pesan

c. Merancang Tampilan
Beberapa hal yang perlu diperhatikan dalam merancang tampilan
diantaranya:
• Komposisi peletakan komponen
• Efektifitas pemakaian komponen (misalnya kapan mengunakan
check box atau combo)
• Pemilihan warna yang baik (misalnya tidak menganggu pengelihatan
ex: banyak warna merah)
 • Penggunaan gambar dan icon yang baik dan tidak mengganggu
tujuan utama dari sebuah tampilan
• Pemilihan menu dan atau tombol yang sesuai dengan kebutuhan
system
• Jumlah penggunaan frame yang efektif

Ketika ingin menggunakan gambar atau icon direkomendasikan:

● Jika kita ingin menggunakan icon sendiri, maka kita harus
memakai gambar yang extensionnya .ico agar tidak mengatur 2
kali
● Dan misalkan kita ingin menyisipkan gambar, maka
direkomendasikan menggunakan gambar dengan extension .png
yang tidak mempunyai background, karena aplikasi kita sudah
terdapat background. Agar tidak terjadi tumpeng tindih warna di
background

Membuat aksi-aksi atau design yang estetis yang ada dalam suatu layar
sesuai dengan kebutuhan

a. Menambahkan Komponen Tombol Pada Tampilan

Tombol / Button adalah sebuah komponen interface yang sangat penting
untuk melakukan suatu aksi pada aplikasi, dimana dengan button user
dapat melakukan interaksi dengan aplikasi
Beberapa komponen yang termasuk kedalam group buttons pada adroid
yaitu:
1) Button (adalah komponen tombol biasa)

2) Image Button (tombol dengan gambar)

 3) Check Box (check box untuk membuat pilihan misalnya true atau false
dengan bentuk kotak tercentang)

4) Radio Button (tombol yang berbentuk bulat yang kalua dipilih akan
berwarna hitam)

5) Radio Group (group dari radio button dimana kalua salah satu
radio button dipilih maka otomatis radio button yang lain di group
tidak akan terpilih)

6) Switch (Tombol yang berbentuk seperti saklar on and of)

a. Menambahkan Komponen Tombol

1) Buat sebuah project dengan nama HelooWorld. Jika kita belum pernah
membuat sebuah project maka kita bisa memilih menu “Start a new
Android Studio Project” yang ada di kotak merah
 Buka Android Studio, Pilih menu:
File ฀ New ฀ New Project

2) Pada jendela New Project, berikan aplikasi Anda Application Name,

seperti "Hello World".
● Verifikasi lokasi Proyek, atau pilih direktori yang berbeda untuk
menyimpan proyek.
● Pilih Company Domain yang unik.

Aplikasi yang dipublikasikan di Google Play Store harus memiliki nama

paket yang unik. Jika tidak berencana mempublikasikan aplikasi, maka
biarkan domain contoh default. Perhatikan bahwa mengubah nama paket
aplikasi di kemudian hari berarti melakukan pekerjaan ekstra. Verifikasi
bahwa Project Location default adalah tempat menyimpan aplikasi Hello
World dan proyek Android Studio lainnya, atau ubah lokasi ke direktori
yang diinginkan. Klik Next.
3) Jika proyek Anda memerlukan komponen tambahan untuk SDK target
terpilih, Android Studio akan memasangnya secara otomatis. Klik Next.

Jendela Target Android Device.

4) Setiap aplikasi membutuhkan paling tidak satu aktivitas. Aktivitas

mewakili satu layar dengan satu antarmuka pengguna

Jendela Customize the Activity.

5) Tunggu sampai proses selesai. Proses akan membangun modul-modul
yang dibutuhkan oleh project termasuk memperbaharui dan
mendownload beberapa gradle jika diperlukan

6) Jika proses pembuatan project berhasil, maka akan muncul tampilan

layout project seperti pada gambar (Klik pada tab activity_main.xml)
7) Hapus text dengan tulisan “Hello World” dengan cara mengklik pada
komponen text tersebut kemudian tekan tombol delete pada keyboard
Maka Tampilan akan menjadi seperti berikut
8) Untuk menambahkan tombol lain dapat dilakukan dengan cara
mengulangi langkah sebelumnya,
Tombol dapat diletakkan dimana saja karena menggunakan layout
relative dan absolute

9) Ubah id dari tombol yang akan kita beri aksi

ID ini sangat penting untuk mengingat tombol yang akan kita beri
perintah, karena pada classnya, tombol ini akan dikenali melalui ID nya
Ubahlah id dari button OK dengan mengetikkan ok pada kotak ID
10)Jika kita telah menguasai XML maka tampilan boleh dikoreksi dengan
memodifikasi xml tersebut

11)Langkah selanjutnya adalah memodifikasi kode program pada class main

(yang ditulis dalam Bahasa pemrograman java)
Klik pada tree view MainActivity (1) atau pada tab MainActivity (2) maka
jendela akan pindah ke kode program java
12)Menjalankan Program
a. Menambahkan Komponen Menu
Menu atau option menu biasanya ditampilkan pada sisi kanan aplikasi
android dengan lambing garis atau titik sebanyak tiga buah. Ketika di klik
maka akan muncul menu drop down dengan beberapa list menu

1) Buatlah sebuah project baru dengan nama “ProjectMenu”

2) Buatlah folder menu di dalam folder “res”

3) Buat folder menu

4) Buatlah Menu Resource File

5) Buatlah Menu Resource File

6) Buatlah Menu Resource File

7) Menambahkan menu option

8) Menampilkan menu option

9) Menampilkan menu option\

 10)Menampilkan menu option

11)Jalankan program, maka option menu akan muncul pada pojok kanan
atas aplikasi

b. Memberi Perintah atau Aksi pada Tombol dan Menu

Tambahkan 3 buah activity baru
1) Tambahkan 3 buah activity baru

2) Tambahkan text dengan tulisan “Menu 1” dan ukuran font 38

3) Dengan langkah yang sama, tambahkan 2 buah activity baru, sehingga

akan ada 3 buah activity dengan nama “Menu1”, “Menu2” dan “Menu3”
4) Untuk memberi perintah pada option menu, bukalah MainActivity.class
kemudian ubahlah kode programnya menjadi

5) Jalankan Program

6) Memberi caption/tittle pada setiap menu yang ditampilkan,

tambahkanlah label pada “AndroidManifest.xml” tepat disebelah menu1,
menu2, dan menu3 menjadi seperti berikut:
 7) Memberi caption/tittle pada setiap menu yang ditampilkan,
tambahkanlah label pada “AndroidManifest.xml” tepat disebelah menu1,
menu2, dan menu3 menjadi seperti berikut:

A. Ketrampilan yang diperlukan dalam merancang mobile interface

1. Membaca, meneliti, menggali dan mengolah data informasi
2. Berkomunikasi dengan para pihak

B. Sikap yang diperlukan dalam merancang mobile interface

1. Ketelitian
2. Kesabaran
3. Sopan

Tugas Dan Proyek Pelatihan

1. Kuis 3 dan 4 Mobile Programming

Link Referensi Modul Pertama

1. Video Pembelajaran
2. E-book
3. Link Youtube/Website rujukan

Link Pertanyaan Modul Petama

https://app.sli.do/ (bisa mengunakan aplikasi ini)

Bahan Tayang

Bisa berupa Link/ Screen Capture Slide pelatihan

Link room Pelatihan dan Jadwal live sesi bersama instruktur

Zoom, Blue Jeans, Meets

Penilaian

Komposisi penilaian Kuis 3 Mobile Programming: Nilai 10 (Range 0 -10)

Komposisi penilaian Kuis 4 Mobile Programming: Nilai 10 (Range 0 -10)

Target Penyelesaian Modul Pertama

1hari/sampai 6JP
 REFERENSI

1. Dhingra, M. et al, Wireless Network Security Threats and Their Solutions: a short
study, International Journal of Smart Sensors and Ad Hoc Networks (IJSSAN),
ISSN No. 2248-9738 (Print), Vol-2, Iss-1,2, 2012
2. Efraim Turban, D. K.-P. (2012). Electronic commerce (Seventh Edition ed.).
Pearson.
3. Gottapu Sasibhushana Rao, 2013. Mobile Cellular Communication (First Edition
). Pearson.
4. Guowang Miao, Jens Zander, Ki Won Sung, and Ben Slimane, Fundamentals of
Mobile Data Networks, Cambridge University Press, ISBN 1107143217, 2016.
5. Herbert Schildt, Java2 : A beginner’s Guide, Second Edition, McGraw-
Hill/Osborne
6. Larsson, J. and Waller, Ida. Security in wireless networks: V ulnerabilities and
countermeasures, Department of Software Engineering and Computer Science
Blekinge Institute of Technology, Springer, 2003
7. Matthew Mathias, Swift Programming, 2nd edition, Big Nerd Ranch
8. https://developer.android.com/reference/android/os/Environment.html

9. https://developer.android.com/reference/java/io/File.html

10. https://developer.android.com/guide/topics/data/data-storage?hl=id

11. https://developer.android.com/training/data-
storage/files#InternalVsExternalStorage
12. Owens, Michael (2006). The Definitive Guide to SQLite.
https://www.sqlite.org/chronology.html
13. https://developer.android.com
14. https://www.quora.com/How-does-the-algorithm-of-Google-Maps-work
15. https://tips-droid.blogspot.com/2013/07/mengenal-android-sensor.html>
16. https://mainthebest.com/smartphones/sensor-smartphone-
android/#accelerometer
17. PROFESSIONAL Android™ Sensor Programming Greg Milette Adam Strou
18. Irwanto, A. (2013, September 7). area teknik. Retrieved Oktober 25, 2017, from
http://area-teknik.blogspot.co.id/2013/09/perbedaan-teknologi-1g-2g-25g-3g-
35g-4g.html
19. Wulan. (2015, November 2015). Srydari. Retrieved Oktober 25, 2017, from
http://srydari.blogspot.co.id/2015/11/perkembangan-teknologi-dari-1g-
sampai-5g.html
20. “ “, Java TM Programming Language, Oracle America
21. https://developer.apple.com/library/archive/referencelibrary/GettingStarted/
DevelopiOSAppsSwift/index.html/
22. https://developer.android.com/topic/libraries/architecture
23. https://www.oracle.com/technetwork/java/javase/overview/index.html
24. Android Cook Book, McGraw-Hill/Osborne, 2013