Buku Cara Mudah Membuat Aplikasi Seluler Tanpa Kode.pdf

@
BADAN STANDAR, KURIKULUM, DAN ASESMEN PENDIDIKAN
KEMENTERIAN PENDIDIKAN, KEBUDAYAAN, RISET, DAN TEKNOLOGI
CARA MUDAH
MEMBUAT APLIKASI SELULER
TANPA KODE
CARA MUDAH
MEMBUAT APLIKASI SELULER
TANPA KODE

2 | Cara Mudah Membuat Aplikasi Seluler Tanpa Kode
Sedangkan Guru Berbagi merupakan gerakan kolaborasi pemerintah,
guru, komunitas, dan penggerak pendidikan untuk bergotong royong berbagi
ide dan praktik baik melalui Rencana Pelaksanaan Pembelajaran (RPP),
artikel, video pembelajaran, dan aksi webinar.
Baik program Guru Belajar maupun program Guru Berbagi hadir
sebagai fasilitas belajar dan berbagi agar anak-anak Indonesia mendapatkan
pendidikan terbaik dari guru terbaik. Berikut ini adalah program guru belajar
dan berbagi dalam angka.
Sumber : https://gurubelajardanberbagi.kemdikbud.go.id/
Selain Kurikulum Merdeka, Platform Merdeka Mengajar, Guru
Belajar dan berbagi, kemendikbudristek juga menyediakan Akun
Pembelajaran. Akun Pembelajaran diberikan kepada pelajar, Guru, dan
tenaga kependidikan dari berbagai satuan pendidikan, mulai dari PAUD, SD,
SMP, SMA, SMK, SLB, dan Kesetaraan.

Menuju Digitalisasi Sekolah |1
BAB I
PENDAHULUAN
A. Pendahuluan
Pada masa pandemi Covid-19, krisis pembelajaran yang ada
menjadikan pendidikan semakin tertinggal dengan hilangnya pembelajaran
(lost learning) dan meningkatnya kesenjangan pembelajaran antar wilayah dan
antar kelompok sosial-ekonomi. Banyak pihak mengkhawatirkan terjadinya
fenomena generasi yang hilang (lost generation) akibat kurang optimalnya
pelayanan pendidikan anak-anak selama musim pandemi. Fenoman lost
generation merupakan dampak dari hilangnya kesempatan anak memperoleh
pembelajaran yang maksimal.
Untuk memulihkan pembelajaran pasca pandemi,
Kemendikbudristek pada Merdeka belajar episode 15 meluncurkan
Kurikulum Merdeka dan Platform Merdeka Mengajar (PMM).
Kurikulum Merdeka dan Platform Merdeka Mengajar (PMM) hadir untuk
memulihkan pembelajaran. kemedikbudristek mendorong semua pihak
untuk bergerak bersama mewujudkan transformasi pendidikan di Indonesia.
Melalui unduh Platform Merdeka Mengajar untuk dipelajari lebih dalam,
serta mengambil peran untuk menyukseskan Kurikulum Merdeka.
Progam lain yang diluncurkan Oleh Kemendikbudristek adalah Guru
belajar dan Guru berbagi. Guru Belajar merupakan gerakan kolaborasi
pemerintah dengan komunitas dan organisasi yang bergerak dalam bidang
pengembangan GTK untuk menyediakan beragam program belajar yang
relevan dan dapat diikuti guru dan tenaga kependidikan secara daring.
ii | Cara Mudah Membuat Aplikasi Seluler Tanpa Kode
Cara Mudah Membuat Aplikasi Seluler
Tanpa Kode
BADAN STANDAR, KURIKULUM, DAN ASESMEN PENDIDIKAN
KEMENTERIAN PENDIDIKAN, KEBUDAYAAN, RISET DAN TEKNOLOGI
BAB I
PENDAHULUAN
A. Pendahuluan
Menuju Digitalisasi Sekolah |i

CARA MUDAH MEMBUAT APLIKASI SELULER TANPA CODE
Pengarah :
Suhadi
Sekretaris Badan Standar Kurikulum, dan Asesmen Pendidikan
Penulis
Suhadi
Ifan Firmansyah
Sukari
Livya Chairunnisa Ahdiar
Gatot Sulistyo Budi Hutomo
Budi Santoso
Salman Alfarisi Totalia
Cetakan I
Tahun 2022
ISBN :
Penerbit :
Badan Standar Kurikulum, dan Asesmen Pendidikan
Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi
ii | Cara Mudah Membuat Aplikasi Seluler Tanpa Kode
CARA MUDAH MEMBUAT APLIKASI SELULER TANPA KODE
Pengarah :
Suhadi
Sekretaris Badan Standar, Kurikulum, dan Asesmen Pendidikan
Penulis :
Suhadi
Ifan Firmansyah
Sukari
Livya Chairunnisa Ahdiati
Arie Wibowo Khurniawan
Irfan Hadiyuda
Salman Alfarisi Totalia
Cetakan I
Tahun 2022
ISBN :
Penerbit :
Badan Standar, Kurikulum, dan Asesmen Pendidikan
Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi

Menuju Digitalisasi Sekolah |iii
Kata Pengantar
Puji syukur Alhamdulillah kami panjatkan kehadirat Allah. Tuhan
Yang Maha Esa, karena hanya berkat rahmat dan karuniaNya semata, maka
penyusunan Buku Cara Mudah Membuat Aplikasi Seluler Tanpa Kode
dapat terselesaikan.
Kementerian Pendidikan, Kebudayaan, Riset dan Teknologi
mendukung adanya gerakan making Indonesia 4.0 yang telah diluncurkan
dan ditetapkan oleh Bapak Presiden sebagai Agenda Nasional sejak bulan
April tahun 2018. Making Indonesia 4.0 berarti mewujudkan, membangun
Indonesia ke erabaru, yaitu Indonesia 4.0. Salah satu komponen Pendukung
dari making Indonesia 4.0 adalah Sumber Daya manusia (SDM) unggul
melalui pendidikan.
Strategi peningkatan produktivitas SDM adalah dengan
menciptakan pendidikan berkualitas dimulai dari pendidikan usia dini
hingga pendidikan menengah. Perkembangan teknologi yang semakin
canggih, dapat mempengaruhi cara berpikir, belajar, bekerja,
berkomunikasi, berperilaku dan karakter SDM. SDM harus memilikikarakter
dan jati diri bangsa ditengah perubahan global yang bergerak
cepat.elajaan menjadi bermakna dan menyenangkan.
Melalui buku Cara Mudah Membuat Aplikasi Seluler Tanpa Kode,
diharapkan dapat menjadi bahan bagi sekolah dan guru dalam memberikan
layanan pembelajaranmenyenangkan pada peserta didik sesuai zamannya.
Buku ini disadari masih belum sempurna, oleh karena itu, kami
mengharapkan masukan dan saran dari semua pihak untuk penyempurnaan
terhadap buku ini.
Sekretaris Badan,
Suhadi, S.Pd., M.T.
NIP. 196912061992031001
BAB I
PENDAHULUAN
A. Pendahuluan
Menuju Digitalisasi Sekolah |iii

iv| Cara Mudah Membuat Aplikasi Seluler Tanpa Kode

iv | Cara Mudah Membuat Aplikasi Seluler Tanpa Kode
DAFTAR ISI
Kata Pengantar.......................................................................................................... iii
DAFTAR ISI................................................................................................................. v
BAB I........................................................................................................................... 1
PENDAHULUAN.......................................................................................................... 1
A. Pendahuluan ...................................................................................................... 1
B. Deﬁnisi Aplikasi Seluler dan Kode Program. ..................................................... 6
C. Seputar Aplikasi Seluler Tanpa Kode.................................................................. 7
1. App Inventor 8
2. Apps Geyser 9
3. Kodular 10
4. Thunkable 10
5. Siberian 11
6. Appery.io 12
7. Appypie 12
BAB II........................................................................................................................ 14
Mengenal lebih dekat Aplikasi App Inventor........................................................... 14
A. Menda�arkan akun dan membuat Projek...................................................... 14
B. Penjelasan Menu dan Toolbar Aplikasi............................................................ 18
a. Halaman Designer 18
b. Halaman Blocks 25
C. Simulasi Aplikasi menggunakan Emulator Android di PC................................. 31
BAB III....................................................................................................................... 37
MEMBUAT FILE APK MENGGUNAKAN APP INVENTOR ........................................... 37
A. Memulai Membuat File APK. ........................................................................... 37
B. Distribusi, Pasang dan Simulasikan File APK. ................................................... 44
C. Membuat Projek Melalui File AIA pada App Inventor. ....................................51
D. Membuat Projek Melalui Impor File AIA pada PC............................................ 55
BAB I
PENDAHULUAN
A. Pendahuluan
Menuju Digitalisasi Sekolah |v

Menuju Digitalisasi Sekolah |v
E. Membuat Projek Melalui Impor ﬁle AIA dari Repository................................. 58
F. Membuat Media Pembelajaran menggunakan App Inventor. ........................ 61
BAB IV....................................................................................................................... 64
MEMBUAT FILE APK MENGGUNAKAN APPSGEYSER ............................................... 64
A. Membuat File APK Pembaca Buku...................................................................64
B. Membuat File APK Portal Guru Belajar............................................................ 79
C. Membuat File APK Konsultasi Belajar. ............................................................. 89
D. Membuat File APK Seri Sapa GTK..................................................................... 98
E. Membuat File APK Mewarna. ........................................................................ 110
BAB V......................................................................................................................115
MEMBUAT FILE APK MENGGUNAKAN KODULAR.................................................. 115
A. Menda�ar Akun dan Membuat Projek Baru.................................................. 115
B. Penjelasan Menu dan Toolbar Aplikasi.......................................................... 138
BAB VI..................................................................................................................... 140
MEMBUAT FILE APK MENGGUNAKAN THUNKABLE .............................................. 140
A. Menambah Koleksi E-book............................................................................. 140
B. Edit Metadata.................................................................................................154
C. View E-book.................................................................................................... 164
D. Remove books................................................................................................ 170
BAB VII.................................................................................................................... 171
MEMBUAT FILE APK MENGGUNAKAN SIBERIAN................................................... 171
A. Konversi dari PDF ke EPUB............................................................................ 171
B. Konversi dari PDF ke WORD........................................................................... 177
C. Konversi dari HTML ke EPUB.......................................................................... 181
BAB VIII................................................................................................................... 192
PUBLIKASIKAN FILE APK KE PLAY STORE................................................................ 192
A. MENDAFTAR PLAY STORE E............................................................................ 192
B. PENGATURAN PLAY STORE. ........................................................................... 195
C. MEMBUAT APLIKASI PLAY STORE. ................................................................. 211
vi| Cara Mudah Membuat Aplikasi Seluler Tanpa Kode

vi | Cara Mudah Membuat Aplikasi Seluler Tanpa Kode
Da�ar Pustaka........................................................................................................ 221
BAB I
PENDAHULUAN
A. Pendahuluan
Menuju Digitalisasi Sekolah |vii

BAB I
PENDAHULUAN
A. Pendahuluan

Dengan Akun Pembelajaran, maka fiturnya dapat mengakses
berbagai kebutuhan kegiatan belajar mengajar. Mulai dari mengakses
platform Kemdikbudristek sampai beragam aplikasi yang akan memudahkan
kegiatan belajar mengajar, baik secara tatap muka ataupun jarak jauh.
Dari sisi lainya, hadirnya pandemi Covid-19 menyebabkan angka
pengguna internet di Indonesia meningkat drastis akibat adanya perubahan
dari aktifitas secara luring menjadi daring. Data Survei terbaru "Profil
Internet Indonesia 2022" pada bulan Juni 2022 yang drilis oleh Asosiasi
Penyelenggara Jasa Internet Indonesia (APJII) penetrasi internet Indonesia
sudah mencapai 77,02% pada 2021-2022. Tren penetrasi internet di
Indonesia meningkat dari tahun ke tahun. pada 2018, penetraasi internet di
Tanah Air mencapai 64,8% dan levelnya naik menjadi level 73,7% pada
2019-2020.
Sumber : Data Survei Profil Internet Indonesia 2022 - APPJI rilis Juni 2022
. Data Survei terbaru "Profil Internet Indonesia 2022" menunjukkan
bahwa perangkat yang digunakan berupa Komputer/Laptop sebanyak

0.73%. Menggunakan perangkat Handphone/Tablet sebanyak 89.03% dan
keduanya sebanyak 10.24%.
Dengan capaian penetrasi internet Indonesia sebanyak 77.02%,
persentase penggunaan tertinggi adalah akses sosial media sebanyak 89.15%
dikikuti Chating Online 73,86%, Shopping Online 21,26%, Game Online
14,23% dan Belajar Online 2.81%.
Jika ditelusuri terkait sistem operasi pada semua platform yang
digunakan di Indonesia pada bulan September 2022, maka sistem operasi
Andoid sebanyak 56,95%, Windows 31,94% dan iOS sebanyak 6.5%.

Android Windows iOS OS X Unknown Linux
56.95% 31.94% 6.5% 1.9% 1.82% 0.75%
Sumber : https://gs.statcounter.com/os-market-share/all/indonesia
Sedangkan sistem operasi yang digunakan pada perangkat seluler di
Indonesia pada bulan September 2022, sistem operasi Andoid sebanyak
89,77%, iOS 10,12% dan Samsung sebanyak 0.07%.
Android iOS Samsung Unknown
Nokia
Unknown
Linux
89.77% 10.12% 0.07% 0.01% 0.01% 0%
Sumber : https://gs.statcounter.com/os-market-share/mobile/indonesia
Dari data penetrasi internet di Indonesia tahun 2022 diatas, perangkat
yang digunakan untuk mengakses, sistem operasi serta penggunaannya, maka
disrupsi digital mengalami lompatan dan percepatan. Dengan data perangkat
yang digunakan, sistem operasi dan penggunaan internet tahun 2022, maka
perlu didorong dan diupayakan agar guru dan tenaga kependidikan dapat
menambah konten pembelajaran yang menarik melalui perangkat seluler dan
konten positif yang menjadi referensi belajar siswa.
Dengan berkembangnya perangkat teknologi saat ini, untuk membuat
Apikasi seluler dapat dilakukan dengan mudah dan cepat tanpa kode. Banyak
sekali aplikasi yang memberikan kemudahan dan fasilitas agar guru dapat
dengan mudah membuat media pembelajaran yang menarik dan
menyenangkan. Buku Cara Mudah Membuat Aplikasi Seluler tanpa kode ini
dibuat tahap demi tahap untuk membantu para guru membuat media
pembelajaran menggunakan aplikasi seluler agar para siswa dapat mengkases
dengan mudah melalui perangkat yang dimiliki.

B. Definisi Aplikasi Seluler dan Kode Program.
Menurut Wikipedia, Aplikasi seluler (bahasa Inggris: Mobile app
atau Mobile application) adalah program komputer yang dirancang untuk
berjalan pada peranti bergerak seperti ponsel/tablet atau jam tangan.
Aplikasi mobil sering kali dianggap sebagai kebalikan dari aplikasi desktop
yang berjalan di komputer desktop, dan dengan aplikasi web yang berjalan
di browser web perangkat. (sumber : https://id.wikipedia.org/wiki/
Aplikasi_seluler).
Sedangkan kode sumber (Inggris: source code) atau kode
program adalah suatu rangkaian pernyataan atau deklarasi yang ditulis
dalam bahasa pemrograman komputer yang terbaca manusia. Kode
sumber yang menyusun suatu program biasanya disimpan dalam satu atau
lebih berkas teks, dan dapat pula ditampilkan dalam bentuk cuplikan
kode (code snippet) yang dicetak pada buku atau media lainnya.
Kode sumber sebelum dikonversikan menjadi bentuk berkas yang
dapat dieksekusi komputer harus melalui proses kompilasi terlebih dahulu.
Konversi ini bisa dilakukan oleh suatu kompilator, atau langsung dari
bentuk terbaca manusia dengan bantuan interpreter. sumber :
https://id.wikipedia.org/wiki/Kode_sumber).
Mengingat tidak semua orang memiliki kemampuan untuk
membuat aplikasi dengan kode program, maka pada buku Cara Mudah
membuat apikasi seluler tanpa kode memberikan cara dan tahapan yang
harus dilakukan oleh para guru untuk menentukan aplikasi yang akan
dipergunakan secara mandiri. Para guru tidak perlu lagi mempelajari cara
membuat kode program yang rumit, namun yang perlu dilakukan adalah
cara memahami penggunaan aplikasi agar sesuai dengan kebutuhan yang
diinginkan.

C. Seputar Aplikasi Seluler Tanpa Kode
Sebanyak 89.77% Sistem Operasi yang digunakan pada perangkat
seluler di Indonesia pada bulan September 2022 adalah "Android".
Penguna sistem operasi ini dari waktu ke waktu terus bertambah seiring
banyaknya aplikasi yang dapat dgunakan dan diakses melalui perangkat
seluler.
Dengan semakin bertambahnya pengguna sistem operasi android
dan aplikasi yang dapat di instalasi, membuat para pengembang perusahaan
teknologi berusaha memudahkan para pengguna untuk dapat membuat
aplikasi seluler tanpa penggua memahami bahasa pemrograman tertentu.
Dengan mengetahui dan memahami cara kerja aplikasi yang dibuat serta
dengan fitur drag and drop, maka pengguna dapat membuat aplikasi seluler
tanpa kode.
Apabla ditelusuri dengan mesin pencari di internet, maka akan ada
banyak media yang bisa digunakan untuk membuat aplikasi seluler tanpa
kode dengan sistem operasi android yang bisa digunakan, mulai dari yang
gratis maupun berbayar. Dari banyaknya aplikasi yang bisa digunakan,
beberapa referensi merekomendasikan beberapa Aplikasi yang dapat
digunakan dengan mudah namun memiliki fitur yang sangat luar biasa.
Untuk membuat aplikasi seluler dengan sistem operasi android
tanpa kode itu mudah, hanya perlu perangkat seluler dengan sistem
android, koneksi internet, email/akun google, dan perlu waktu untuk
belajar cara memahami cara kerja dan tahapannya. Diantara layanan aplikasi
berbasis web untuk membuat aplikasi seleluer tanpa kode yang
direkomendasikan adalah ;
1. App Inventor
2. Apps Geyser
3. Appery.io

4. Appypie
5. Siberian
6. Kodular
7. Jagel.id.
Ilustrasi Membuat Aplikasi Seluler Tanpa Kode
Berikut penjelasan membuat aplikasi seluler tanpa kode :
1. App Inventor
App Inventor adalah aplikasi web sumber terbuka yang awalnya
dikembangkan oleh Google, dan saat ini dikelola oleh Massachusetts
Institute of Technology (MIT). App Inventor memungkinkan pengguna
baru untuk memprogram komputer untuk menciptakan aplikasi perangkat
lunak bagi sistem operasi Android.
App Inventor merupakan tool pemrograman berbasis blok yang
memungkinkan semua orang, bahkan pemula, untuk memulai pemrograman
dan membangun aplikasi seluler dengan sistem android. Sebuah tool open
source untuk pemrograman sekaligus pembuatan aplikasi yang dapat diakses
berbagai orang dari seluruh dunia.

Untuk App Inventor dapat diakses di http://appinventor.mit.edu/
2. Apps Geyser
Appsgeyser adalah layanan berbasis web yang dapat diakses secara daring
dan memungkinkan para pengguna membuat Aplikasi Android dengan
mudah dan cepat.
Untuk Apps Geyser dapat di akses di https://appsgeyser.com/

3. Kodular
Kodular merupakan situs web, yang menyediakan alat bantu untuk membuat
aplikasi seluler dengan sistem android dengan konsep drag-drop block
programming. Aplikasi ini mirip dengan App Inventor yang bersifat gratis
untuk semua pengguna apabila ingin membuat aplikasi andorid tanpa harus
pusing tentang bahasa pemrograman. Tidak ada persyaratan dalam
pendaftaran Kodular ini. Saat sudah akses aplikasi basis web, maka lakukan
login dengan memilih beberapa opsi login baik itu login langsung ataupun
login melalui OAuth (Facebook, Github, Gmail).
Aplikasi Kodular dapat diakses melalui : https://www.kodular.io/
4. Thunkable
Thunkable adalah suatu aplikasi untuk membuatatau tools Integrated
Development Environment (IDE) open source seperti App Inventor dan
Kodular. Pembautan aplikasi seluler menggunakan Thunkable memiliki
kemampuan berbagai jenis mobile yakni Android dan iOS dalam keperluan
programmer atau developer Seluler. Saat membuat aplikasi menggunakan
Android, nantiunya juga dapat dipergunakan untuk kebutuhan iOS
demikian juga sebaliknya.
Thunkable ini gratis untuk semua pengguna yang ingin membuat
aplikasi seluler tanpa kode. Tidak ada persyaratan dalam pendaftaran

Thunkable ini. Sebelum melakukan pendaftaran, buka terlbih akun Google
pada browser.
Aplikasi Thunkable dapat diakses melalui : https://thunkable.com/
5. Siberian
Siberian CMS adalah Open Source Content Management System (CMS) yang
membantu lembaga dan individu membangun aplikasi web dan aplikasi
seluler sendiri menggunakan alat desain visual dan template yang dapat
disesuaikan. Lebih dari 150.000 pengguna dan 2.000 klien perusahaan
menggunakan Siberia CMS dari Xtraball untuk membuat aplikasi iOS,
Android, dan web mereka sendiri, semuanya tanpa harus bekerja dalam kode
asli.
Untuk membuat aplikasi seluler tanpa kode dengan menggunakan Siberian
CMS dapat akses malalui : https://www.siberiancms.com/

6. Appery.io
Appery.io adalah platform berbasis cloud yang menyediakan alat
pengembangan User Interface (UI) dan layanan backend terintegrasi. Kelebihan
platform ini tidak perlunya mengunduh, menginstal maupun konfigurasi.
Appery.io memberikan pilihan paket yang dapat digunakan untuk membuat
aplikasi seluler yaitu Starter, Standard, Pro, Premium, dan Enterprise.
Untuk pemula dan ingin mencoba membuat aplikasi seluler tanpa kode,
maka pilihan tepat adalah menggunakan paket ‘Starter’ tanpa biaya apapun
untuk 1 aplikasi.
Akses ke Appery.io adalah https://appery.io/
7. Appypie
Appy Pie adalah Aplikasi berbasis web yang dipergunakan untuk membuat
aplikasi seluler dengan sistem operasi Android tanpa kode. Tidak perlu ada
yang dipasang atau diunduh, cukup dengan drag and drop untuk membuat
aplikasi yang diinginkan. Setelah selesai aplikasi yang dibuat dapat dipublish
ke Play Store. Appy Pie juga dapat digunakan membuat aplikasi seluluer
dengan sistem operasi iOS/Apple dan dapat dipublis di Apple App Store.
Aplikasi Appypie.com dapat diakses melalui : https://www.appypie.com/

Pada buku ini akan dibahas 5 aplikasi dari 7 aplikasi yang sering
digunakan oleh para pemula untuk membuat aplikasi seluler tanpa kode.
Aplikasi yang dibahas lebih detail adalah App Inventor, AppsGeyser,
Kodular, Thunkable dan Siberian.

BAB II
Mengenal lebih dekat Aplikasi App Inventor
A. Mendaftarkan akun dan membuat Projek.
Membuat aplikasi seluler tanpa kode dengan sistem android dapat
dilakukan melalui situsnya. Sebelum membuat aplikasi seluler, tahapan yang
harus dilakukan adalah mendaftarkan akun saat membuat projek baru.
Pastikan memiliki email Google.
Agar tampilannya lebih besar dan leluasa dalam membuat aplikasi
seluler yang lebih bagus dan menarik, sebaiknya menggunakan Laptop atau
Komputer. Karena aplikasi berbasis web, sebenarnya diakses melalui
perankat seluler yang dimiliki juga bisa. Berikut tahapan yang harus
dilakukan untuk memulai membuat aplikasi seluler tanpa kode
menggunakan App Inventor dengan mendaftarkan akun dan membuat
projek :
1. Buka aplikasi web browser yang anda miliki, kemudian ketikkan alamat
url http://appinventor.mit.edu/
2. Klik tombol “Create Apps”, dan url situs akan menuju
http://ai2.appinventor.mit.edu/. Proses berikutnya yang dilakukan

adalah mendaftarkan ke akun App Inventor. Pendaftaran bisa
menggunakan email Google baik akun personal maupun akun lembaga.
Pada buku ini contoh yang digunakan adalah menggunakan akun
belajar.id yang sudah dimiliki oleh guru dan siswa jenjang Pendidikan
Dasar dan Menengah. Klik Email Belajar.id (jika belum memailiki
akun pmbelajaran belajar.id dapat login email Google pribadi).
3. Masukkan password akun belajar.id dan kemudian klik
Next/Berikutnya. Setalah memasukkan passwordnya benar, muncul
tampilan syarat dan ketentuan.
4. Setelah membaca syarat dan ketentuan, klik I accept the terms of
service!.

5. Tampilan Selamat Datang pada aplikasi MIT App Inventor, Klik
Continue.
6. Dan selanjutnya klik START BLANK PROJECT.

7. Muncul tampilan Create new App inventor project. Isikan nama pada
project name dan kemudian klik OK.
8. Tampilan awal saat berhasil membuat projek dengan nama
BelajarApp01.
Karena projek yang dibuat masih kosong, maka untuk membuat
aplikasi seluler tanpa kode perlu membaca tutorial cara menggunakan,
membuat projek baru dengan cara import project (.aio), dan memahami menu
aplikasi serta toolbar yang sudah disediakan aplikasi beserta fungsinya.

B. Penjelasan Menu dan Toolbar Aplikasi.
Penjelasan menu dan Toolbar aplikasi pada App Inventor lebih detail
karena pada pada Kodular dan Thunkable hampir sama. Pada Aplikasi App
Inentor terdapat dua halaman utama, yaitu halaman designer dan halaman
blocks. Halaman designer digunakan untuk mendesain tampilan aplikasi
dengan berbagai komponen dan layout yang disediakan sesuai dengan
kebutuhan. Sedangkan halaman blocks digunakan untuk memprogram
jalannya aplikasi seluler sesuai dengan yang dinginkan.
Tampilan Halaman Designer
a. Halaman Designer
Pada halaman designer terdapat beberapa jendela seperti Palette,
Viewer, Components, Media, dan Properties. Tools tersebut berfungsi
untuk mendesain tampilan aplikasi seluler tanpa kode dengan sistem
android sesuai keinginan.
1. Palette merupakan jendela tempat mengambil komponen-
komponen yang dikategorikan dalam beberapa kategori untuk
dimasukkan dalam aplikasi yang dibuat. Terdapat kategori User
Interface, Layout, Media, Drawing and Animation, Maps, Sensors,

Social, Storage, Connectivity, LEGO MINDSTORMS,
Experimental, dan Extension.
2. Viewer merupakan tempat untuk mengatur tampilan komponen
pada aplikasi nantinya.
3. Components merupakan tempat untuk mengatur komponen-
komponen yang telah diletakkan di viewer, seperti misalnya
mengganti nama komponen, dan menghapus komponen.
4. Properties merupakan tempat untuk mengatur properti layar, dan
komponen-komponen yang digunakan pada aplikasi yang sedang
dibuat seperti lebar, tinggi, warna latar, besar huruf, dll.
5. Media merupakan tempat untuk mengunggah gambar untuk
digunakan pada aplikasi yang sedang dibuat.
Pada bagian Palette terdapat komponen penyusun untuk mendesain aplikasi,
berikut adalah komponen penyusunnya:
1. User Interface
SimbolNama Fungsi
Button Dapat mendeteksi ketukan, hold down ketika pengguna
menekan tombol, atau ketika pengguna melepas tombol.
Ketika button mendeteksi salah satu dari hal tersebut, button
akan menjalankan perintah.
Checkbox Dapat mendeteksi ketukan dari pengguna dan mengganti state-
nya menjadi true/false (boolean).
Date Picker Memunculkan kalender untuk memilih tanggal.
Image Memasukkan gambar dalam aplikasi.
Label Menampilkan teks dalam aplikasi.
List Picker Menampilkan list yang dapat dipilih oleh pengguna ketika
pengguna menekan list.

SimbolNama Fungsi
List View Menampilkan list.
Notifier Memunculkan pesan/peringatan pop-up pada aplikasi. Pesan
dapat hilang secara otomatis, atau harus menerima input dari
pengguna terlebih dahulu baru menghilang.
Password
Text Box
Menyediakan textbox yang menyembunyikan teks yang
dimasukkan.
Slider Menyediakan progress bar yang dapat digeser.
Spinner Menampilkan pop-up list dengan elemen yang dapat dipilih
ketika ditekan.
Text Box Menyediakan area untuk mengetik teks.
Time Picker Memunculkan jam untuk memilih waktu.
Web Viewer Menyediakan area yang dapat menampilkan laman web.
2. Layout
SimbolNama Fungsi
Horizontal Arrangement Menyusun komponen secara horizontal.
Horizontal Scroll
Arrangement
Menyusun komponen secara horizontal, namun
jika lebar komponen melebihi lebar komponen ini,
maka dapat digeser (scroll).
Table Arrangement Membuat tabel.
Vertical Arrangement Menyusun komponen secara vertikal.
Vertical Scroll
Arrangement
Menyusun komponen secara vertikal, namun jika
tinggi komponen melebihi tinggi komponen ini,
maka dapat digeser (scroll).

3. Media
SimbolNama Fungsi
Camcorder Mengaktifkan kamera HP dan merekam.
Camera Mengaktifkan kamera HP dan memotret.
Image Picker Menampilkan galeri pada aplikasi. Pengguna dapat memilih
gambar yang akan disimpan dari galeri yang ditampilkan.
Player Memainkan musik/audio dan mengatur vibrasi HP.
Sound Memainkan musik/audio dan mengatur vibrasi HP dalam
interval waktu tertentu.
Sound Recorder Merekam suara.
Speech
Recognizer
Mengkonversi suara menjadi teks menggunakan fitur
speech recognition pada HP.
Text to Speech Mengkonversi teks menjadi suara. Pitch dan kecepatan
pembacaan dapat diatur.
Video Player Memutar video serta menampilkan pengaturannya.
Yandex TranslateMenerjemahkan teks dari satu bahasa ke bahasa yang
lainnya.
4. Drawing and Animation
SimbolNama Fungsi
Ball Sprite bola yang dapat berinteraksi pada sentuhan dan tarikan,
serta berinteraksi dengan sprite lainnya pada kanvas.
Canvas Kanvas tempat sprite berinteraksi dengan pengguna atau dengan
sprite lainnya, atau tempat pengguna menggambar.
Image
Sprite
Sprite gambar yang dapat berinteraksi pada sentuhan dan
tarikan, serta berinteraksi dengan sprite lainnya pada kanvas.

5. Maps
SimbolNama Fungsi
Circle Memvisualisasikan lingkaran dengan radius tertentu (dalam
meter) pada koordinat tertentu. Dapat juga digunakan untuk
menjalankan program ketika pengguna berada di suatu area.
Feature
Collection
Mengelompokkan fitur-fitur Maps. Event yang terjadi pada
salah satu komponen pada kelompok tersebut, akan memicu
event pada komponen-komponen lainnya.
Line String Menggambar garis pada peta.
Map Menampilkan peta pada layar aplikasi.
Marker Memberi tanda pada suatu lokasi di peta.
Polygon Membuat perimeter pada peta.
Rectangle Merupakan polygon dengan garis lintang dan garis bujur untuk
batas utara, selatan, timur, dan barat. Jika sudut segiempat
dipindahkan, maka informasi koordinat akan diperbaharui.
6. Sensors
SimbolNama Fungsi
Accelerometer
Sensor
Mendeteksi goyangan dan percepatan dalam m/s2.
Barcode Scanner Membaca barcode.
Gyroscope Sensor Mengukur kecepatan sudut dalam derajat/detik.
Location Sensor Menyediakan informasi geografis seperti koordinat,
ketinggian, kecepatan, dan alamat. Dapat juga
mengkonversi alamat menjadi koordinat.

SimbolNama Fungsi
Near Field Memungkinkan aplikasi mengaktifkan fitur komunikasi
jarak dekat (NFC).
Orientation Menentukan orientasi HP.
Pedometer Menentukan banyaknya langkah, dan jarak yang
ditempuh.
Proximity Sensor Mengukur jarak antara objek dengan layar HP.
7. Social
SimbolNama Fungsi
Contact Picker Menampilkan list berisi kontak ketika ditekan.
Email Picker Menampilkan list berisi email ketika pengguna
mengetikkan kata kunci ataupun email dari orang yang
dituju.
Phone Call Melakukan panggilan telepon.
Phone Number
Picker
Menampilkan list berisi nomor kontak pada layar HP.
Sharing Memungkinkan pertukaran berkas atau pesan antara
satu aplikasi dengan aplikasi lainnya yang terdapat pada
HP.
Texting Mengirim pesan teks ke suatu nomor kontak.
Twitter Memungkinkan komunikasi dengan Twitter sehingga
pengguna dapat membuat tweet, melihat tweet, dll.

8. Storage
SimbolNama Fungsi
File Menerima atau mengirim berkas. Dapat juga digunakan
untuk membaca atau menulis berkas.
Fusiontables
Control
Memungkinkan komunikasi dengan Google Fusion Table.
Google Fusion Table dapat menyimpan, membagikan,
query, dan memvisualisasikan tabel data.
TinyDB Menyimpan data untuk aplikasi sehingga ketika aplikasi
ditutup, dan kemudian dibuka kembali, data masih
tersimpan.
TinyWebDB Menyimpan data pada web.
9. Connectivity
SimbolNama Fungsi
Activity Starter Memanggil aplikasi lain.
Bluetooth
Client
Membuat aplikasi sebagai Bluetooth client.
Bluetooth
Server
Membuat aplikasi sebagai Bluetooth server.
Web Memungkinkan aplikasi untuk berinteraksi dengan web
dan menyediakan fungsi untuk HTTP GET, POST,
PUT, dan DELETE.
10. Experimental
Simbol Nama Fungsi
CloudDB Memungkinkan pengguna aplikasi untuk saling bertukar
data pada database dengan software Redis.

Simbol Nama Fungsi
FirebaseDB Memungkinkan pengguna aplikasi untuk saling bertukar
data pada database dengan Firebase.
Tampilan Halaman Block
b. Halaman Blocks
Pada halaman blocks terdapat beberapa codeblock yang berfungsi untuk
membuat applikasi seluler tanpa kode sesuai yang diinginkan. Pada halaman block
terdapat beberapa komponen seperti Control, Logic, Math, Text, Lists, Colors,
Variables, dan Procedures. Berikut adalah komponen yang terdapat pada halaman
blocks:
1. Control
Blok Kode Fungsi
If kondisional. Jika “if” memenuhi syarat,
maka blok yang ada setelah “then” dieksekusi.

Blok Kode Fungsi
Looping dari angka pertama hingga angka
terakhir dengan suatu interval. Maka gambar
disamping berarti loop dari angka 1 hingga 5
dengan interval 1: 1, 2, 3, 4, 5.
For bertingkat. Untuk setiap objek dalam list,
dilakukan looping.
Jika nilai test true, maka loop while berjalan.
2. Logic
Blok Kode Fungsi
Boolean true/false.
Jika dipasangkan dengan true/false maka true
menjadi false, dan false menjadi true.
Memeriksa apakah satu objek sama dengan/tidak
sama dengan objek di kanan. Jika sesuai kriteria,
maka blok akan bernilai true, dan false jika tidak
sesuai.
Pada logika and jika kedua syarat terpenuhi, maka
nilainya menjadi true. Sedangkan pada logika or, jika
salah satu syarat atau keduanya terpenuhi, maka
nilainya menjadi true.

3. Math
Blok Kode Fungsi
Digunakan untuk menginput
angka.
Digunakan untuk
membandingkan dua angka.
Perbandingan dapat berupa
sama dengan, tidak sama
dengan, lebih dari, kurang dari,
lebih dari sama dengan, dan
kurang dari sama dengan.
Operasi matematika dasar, yaitu
tambah, kurang, kali, bagi,
pangkat, dan modulus.
Mengambil nilai integer secara
acak dari range yang
ditentukan.
Operasi trigonometri sin, cos,
tan.

4. Text
Blok Kode Fungsi
Teks kosong.
Menggabungkan dua atau lebih teks.
Memeriksa jika teks kosong atau tidak.
Memeriksa apakah ada bagian tertentu
dalam suatu teks.
Memisahkan teks pada penanda tertentu dan
membuatnya menjadi list.
5. List
Blok Kode Fungsi
Membuat list kosong.
Membuat list.
Menambahkan elemen pada list.

Blok Kode Fungsi
Memeriksa apakah ada elemen tertentu pada
list.
Memeriksa banyaknya elemen pada list.
Memeriksa apakah list kosong atau tidak.
Mengambil elemen dari suatu list.
Menghapus elemen dari suatu list.
6. Colors
Blok Kode Fungsi
Pilihan warna yang disediakan MIT AI.
Membuat warna sendiri dengan menggunakan kode
RGB warna.

7. Variables
Blok Kode Fungsi
Membuat suatu variabel global.
Mengambil variabel global.
Memodifikasi isi dari variabel global.
8. Procedure
Blok Kode Fungsi
Membuat suatu prosedur.
Membuat suatu fungsi yang
mengembalikan hasil tertentu.

C. Simulasi Aplikasi menggunakan Emulator Android di PC.
Saat membuat aplikasi seluler tanpa kode dengan sistem android
perlu adanya simulasi dan tes aplikasi sebelum dipublikasi. Pada Aplikasi
App Inventor sudah disediakan 3 cara untuk terhubung (connect). 3 cara yang
disediakan meliputi AI Companion, Emulator dan USB. Pada buku ini,
Emulator untuk simulasi aplikasi menggunakan Bluestacks. Bluestacks
merupakan emulator yang banyak digunakan masyarakat dunia karena cepat
dan ringan.
Untuk mendapaatkan aplikasi dan pemasangan emulator
menggunakan Bluestacks 5, ikuti tahapan berikut ini :
url https://www.bluestacks.com/id/index.html
2. Selanjutnya klik Unduh Bluestacks 5. Klik Keep untuk melanjutkn
proses unduh.

3. Unduh telah berhasil, dan selanjutnya klik untuk proses instalasi.
Tunggu beberapa saat untuk konfirmasi proses pemasangan dan klik
Yes.
4. Proses instalasi siap dilakukan, namun standar lokasi file ada di system
adalah Drive C. untuk merubah ke drive lain, klik Customize
instalation.

5. Lakukan perubahan lokasi drive dengan klik Change Folder. Jika
sudah sesuai harapan, klik Install Now.
6. Tunggu proses download aplikasi.
7. Saat proses download aplikasi, ada beberapa tampilan layar secara
bergantian memberikan informasi terkait keunggulan Emulator
menggunakan BlueStaks 5.

8. Setelah proses download, tahap berikunya adalah melakukan
pengecekan terhadap persyaratan minimal aplikasi emulator yang harus
dipenuhi agar BlueStack 5 dapat berjalan dengan baik.
9. Jika sudah selesaih proses Checking system requirements, selanjutnnya
proses penyiapan akhir sebelum aplikasi BlueStacks 5 dapat digunakan.

10. Tampilan awal aplikasi BlueStack setelah berhasil dilakukan pemasangan
di PC.
11. Lakukan pengaturan Layar/Display. Pada menu Display, lakukan
perubahan pada Diplay Resolution dari Landscape menjadi Potrait dan
tentukan ukuran sesuai dengan kebutuhan.

12. Perubahan tampilan layar dari Landscape ke Portrait.

BAB III
MEMBUAT FILE APK MENGGUNAKAN APP INVENTOR
A. Memulai Membuat File APK.
Pada BAB sebelumnya telah dibahas cara mendaftarkan akun dan
membuat projek baru. Projek baru yang buat masih kosong dan belum
mamanfaatkan fitur yang ada di Jendela Pallete. Bagian penyusun aplikasi
pada jendela Pallete – User Interface yang bisa dimanfaatkan adalah Web
Viewer. Web Viewer menyediakan area yang dapat menampilkan laman web.
Jika lembaga atau guru memiliki konten pembelajaran berbasis web, maka
fitur ini dapat dipergunakan dan di distribusikan.
Pada tahap awal membuat file APK pada App Inventor dengan
menggunakan Web Viewer. File APK merupakan file Android Package yang
digunakan untuk mendistribusikan aplikasi pada sistem operasi Google
Android. Untuk membuat file APK tersebut, ikuti tahapan berikut ini :
1. Pastikan projek yang telah dibuat sebelumnya sudah terbuka.
2. Pada menu Pallete – User Interface, gunakan WebViewer untuk
menyediakan area yang dapat menampilkan web.

3. Drag WebViewer ke area Viewer.
4. Pada jendela Components, klik webviewer1. Isikan pada HomeUrl
alamat website terkait pembelajaran yang akan di bagikan dalam bentuk
file APK.
5. Tampilan HomeUrl yang sudah ada alamat website.

6. Setelah mengisikan HomeUrl, pada Viewer ada Screen1 yang ingin
dihilangkan atau di sembunyikan.
7. Untuk menghilangkan/menyembunyikan Screen1, klik Screen1 pada
Component.

8. Geser scroolbar ke bawah untuk dan hilangkan centang pada
TitleVisible.
9. Tampilan Screen1 sudah tidak tampil Viewer.
10. Tahapan berikutnya, lakukan perubahan pada Icon Aplikasi. Icon ada
di menu Screen1.

11. Upload File pada menu Icon.
12. Klik Choose File. Siapkan file yang akan di Upload.
13. Pilih file yang akan digunakan menjadi icon, kemudian klik Open.

14. Klik Ok untuk Upload File.
15. File untuk Icon sudah berhasil di Upload.
16. Tahap berikutnya adalah membuat file menjadi apk. Yang harus
dilakukan adalah klik menu Build - Build Android App (apk).
17. Tunggu beberapa saat untuk proses Build menjadi file apk.

18. Tampilan kotak dialog proses build file apk yang sudah berhasil. Ada 2
pilihan, Download apk ke dalam kmputer dan QR Code yang dapat di
download dari perangkat seluler. Untuk saat ini, klik Dowload apk now.
19. Tunggu proses download. Dan file ini nanti akan di copykan pada
Emulator yang sudah di pasang sebelumnya.

B. Distribusi, Pasang dan Simulasikan File APK.
Pada pembahasan distribusi, pasang dan simulasikan file apk
diberikan 2 contoh cara yang dapat dilakukan. Cara Pertama dengan
menggunakan emulator BlueStacks 5 yang telah dipasang sebelumnya dan
cara kedua menggunakan HP Android.
Untuk cara pertama dengan menggunakan emulator Bluestacks 5, dan
ikuti langkah berikut ini :
1. Buka dua jendela berdampingan. jendela pertama adalah menampilkan
file apk yang sudah berhasil di unduh, dan jendela disampingnya adalah
emulator Bluestacks 5 yang sudah dijalankan.
2. Pilih file BelajarApp01.apk kemudian drag ke jendela emulator
BlueStacks 5.

3. Tunggu beberapa saat untuk proses copy file apk dan pemasangannya.
Dan berikut ini tampilan file apk yang sudah berhasil di pasang di
emulator BlueStacks 5.
4. Selanjutnya jalankan BelajarApp1.apk pada emulator BlueStacks 5.
Berikut ini tampilan file apk dengan menggunakan Webview pada App
Inventor.

Untuk cara kedua mendistribusikan, pasang dan simulasikan apk adalah
dengan menggunakan HP Android.
1. Pastikan playstore sudah dijalankan pada HP Andorid, kemudian buka
Pembaca QR dan Kode Batang untuk memindai QR hasil dari Build
APK pada App Inventor. Setelah dipindah, maka akan muncul Url App
Inventor yang dapat dibuka dengan Browser untuk di Dwonload,
dibagikan dan di salin.
2. Jika ingin dibagikan langsung, maka fitur bagikan ini sangat membantu,
namun untuk simulasi, klik browser, pilih Browser atau peramban yang
akan digunakan. Gunakan Google Chrome, dan muncul
notifikasi/pesan bahwa aplikasi yang akan di download adalah
berbahaya. Apakah di batalkan atau tetap download. Untuk
mendapatkan file APK ini Klik Tetep download, karena diketehui
bahwa memang file yang akan didwonload adalah masih proses untuk
disimulasikan. Termasuk nanti saat instal juga perlu pengaturan khusus.

3. Gunakan lokasi download anda mengetahui, karena file nanti akan
dijalankan kembali setelah proses pengaturan hak akses.

4. Setelah proses download selesai dan klik buka, maka pemasangan
dicekal. Selanjutnnya klik Setelan.
5. Masih ada peringatan bahaya dan klik OK. Dan kemudian aktifkan
Sumber tidak dikenal.

6. Saat ini pada pengaturan, Sumber tidak dikenal sudah Aktif, cari file
APK yang sudah pernah di download. Dan kemudian jalankan lagi.
7. Klik PASANG dan proses pemasangan aplikasi berlangsung pada
perangkat anda..

8. Pada notifikasi/pesan diblokir oleh Play Protect, klik Tetap Instal.
Dan BelajarApp01 sudah berhasil dipasang, kemudian klik Buka.
9. Dan berikut ini adalah tampilan AppBelajar01.apk yang siap untuk di
uji/simulasikan, apakah masih ada yang perlu diperbaiki dst.

C. Membuat Projek Melalui File AIA pada App Inventor.
Jika pada pembahasan sebelumnya membuat aplikasi seluler dengan
projek kosong, App Inventor menyediakan file dengan ektension AIA untuk
dapat dipergunakan membuat projek baru. Apa itu file ekstension AIA?,
AIA adalah File Kode Sumber Inventor Aplikasi MIT.
File kode sumber dibuat dan digunakan oleh App Inventor, program
web yang digunakan oleh pengembang pemula untuk membuat aplikasi
untuk perangkat Seluler dengan sistem operasi Android; berisi blok kode
sumber proyek aplikasi yang sedang dikembangkan.
Untuk mendapatkan file AIA, dan kemudian dapat dipergunakan
sebagai referensi belajar, ikuti langkah berikut ini :
1. Pada projek yang sudah terbuka yaitu BelajarApp01, klik Project dan
kemudian pilih My project.
2. Untuk mendapatkan file ekstension aia, klik Login to Galery.
3. Bagi yang belum pernah masuk ke Galery, maka perlu di isikan email,
nama depan dan nama belakang. Kemudian klik Submit.

4. Tampilan MIP App Inventor Gallery setelah berhasil Submit.
5. Geser scroolbar ke bawah untuk mencari contoh file aia yang
dibutuhkan.
6. Mengingat file aia yang sangat banyak, ada fitur pencarian yang dapat
dimanfaatkan file aia sesuai dengan kata kunci, kemudian klik Search.

7. Muncul banyak sekali Quiz yang tampil dan cari yang sesuai.
8. Untuk menambahkan file aia kedalam projek, maka cukup klik Load
App Into MIT App Inventor.
9. Tunggu beberapa saat, dan KIDS_QUIZ, sudah berhasil ditambahkan.

10. Pada Viewer ada Screen1 dan Screen2. Pada Component ada beberapa
kebutuhann User Interface sudah ditambahkan.
11. Untuk melihat kode blok, klik Bloks, maka akan muncul kode blok
program yang sudah ada.
12. Geser Scroolbar ke bawah untuk melihat kode blok program yang
lainnya.

13. Dengan melihat projek baru dari file aia maka tampilan halaman
Designer dan halaman Bloks untuk dapat dijadikan referensi dan Belajar.
Untuk melihat projek yang sudah dimiliki, klik Project – My project.
Projek masih ada 2 yaitu BelajarApp01 dan KIDS_QUIZ.
D. Membuat Projek Melalui Impor File AIA pada PC.
Cara lain untuk membuat projek baru dapat dilakukan dengan impor
file aia dari komputer. File aia ini dapat di unduh melalui laman resmi MIT
App Inventor Gallery atau dari laman web yang menyediakan file aia secara
gratis.
Untuk dapat membuat projek baru dari import file aia dari komputer,
ikuti tahapannya sebagai berikut :
1. Pada projek yang sudah terbuka saat ini, klik Project dan kemudian klik
Import project (aia) from my computer..

2. Pada kotak dialog Import Project, klik Choose File.
3. Telusuri pada folder yang memiliki file dengan ekstention aia. Jika sudah
ketemu, maka pilih salah satu file yang akan ditambahkan ke projek baru.
Contoh file yang akan ditambahkan adalah VideoWall.aia, pilih file
tersebut dan kemudian klik Open.
4. Pada kotak dialog Import Project, file VideoWall.aia sudah siap di
import dan klik OK.

5. Tampilan Halaman Designer pada projek VideoWall
6. Sedangkan tampilan pada halaman Bloks VideoWall sebagai berikut..
Dari File projek baru dengan nama VideoWall dapat dipelajari
komponen pada halaman Designer dan kode Blok program yang sudah ada.

E. Membuat Projek Melalui Impor file AIA dari Repository.
Selain membuat projek baru dapat dilakukan dengan impor file aia
dari komputer, pengguna App Inventor juga dapat membuat projek melalui
impor dari repository yang disediakan oleh MIT App Inventor.
Untuk dapat membuat projek baru dari import file aia melalui import
project (aia) from repository, ikuti tahapannya berikut ini :
Import project (aia) from a repository.
2. Pada kotak dialog Create a Project from a Template, Tersedia banyak
sekali template yang disediakan.

3. Geser scroolbar ke bawah untuk melihat template yaang disediakan di
repository.
4. Geser ke atas lagi dan pilih salah satu template dan klik OK.
5. Tampilan Halaman Designer pada projek baru DIYBookClub2.

6. Jika ingin melihat projek yang di buat di App Inventor, cukup klik menu
Project - My Project. Tampilan projek yang sudah dibuat ada 5 buah,
mulai dari Projek kosong sampai pada import file aia.
Dengan banyaknya pilihan membuat projek pada App
Inventor, maka pengguna dapat menentukan apakah membuat projek
dimulai dengan halaman kosong atau mengambil dari template yang
sudah disediakan dengan malakukan perubahan dan penyesuaian sesuai
dengan kebutuhan.

F. Membuat Media Pembelajaran menggunakan App
Inventor.
Selain membuat projek baru dapat dilakukan dengan impor file aia
dari komputer, pengguna App Inventor juga dapat membuat projek melalui
import daru repository yang disediakan oleh MIT App Inventor.
Untuk dapat membuat projek baru dari import file aia melalui import
(aia) dari Repository, ikuti tahapannya berikut ini :
Import project (aia) from a repository.
2. Pada kotak dialog Create a Project from a Template, Tersedia banyak
sekali template yang disediakan.

3. Geser scroolbar ke bawah untuk melihat templalte yaang disediakan di
repository.
4. Geser ke atas lagi dan pilih salah satu template dan klik OK.

5. Tampilan Halaman Designer pada projek baru DIYBookClub2.

BAB IV
MEMBUAT FILE APK MENGGUNAKAN APPSGEYSER
A. Membuat File APK Pembaca Buku
Membuat aplikasi seluler tanpa kode yang akan dicontohkan pada
buku ini adalah menggunakan AppsGeyser. Tahapan awal yang harus
dilakukan adalah Login untuk mendaftarkan akun ke situs appsGeyser dan
kemudian baru melangkah untuk membuat aplikasinya. Jika membuat
aplikasi seluler di AppsGesyer tanpa login pun bisa, namun untuk dapat
melakukan perubahan dan pengaturan lebih lanjut disarankan untuk dapat
mendaftar terlebih dahulu.
Contoh pertama pada pembuatan aplikasi seluler tanpa kode
menggunakan AppsGeyser ini adalah membuat aplikasi Pembaca Buku.
Mengingat banyak sekali file PDF buku terkait dengan Kurikulum Merdeka,
baik Buku Pedoman Guru dan siswa, maka perlu dibuatkan file APK untuk
memudahkan akses dan membacanya. Tahapan untuk membuat file apk ini
adalah sebagai berikut :
url https://appsgeyser.com/

2. Kebutuhan untuk Login adalah pembuatan aplikasi dapat tersimpan
dengan baik dan dapat dilakukan donwlooad ulang bila dibutuhkan.
3. Karena belum pernah bergabung, pilih Continue with Google.
4. Klik kembali Continue with Google. Untuk mendaftar.
5. Klik Email yang aktif saat ini, jika belum pernah login, masukkan email
yang dimiliki kemudian masukkan password.

6. Tampilan awal setelah berhasil Login. Belum ada aplikasi yang dibuat.
klik Create Now untuk membuat aplikasi.
7. Pilihan Menu ada POPULAR, BUSINESS dan INDIVIDUAL.
8. Untuk saat ini, pilih menu INDIVIDUAL. Karena contoh aplikasi
pertama ini adalah pembaca buku, maka gunakan Book Reader.

9. Geser scroolbar ke bawah dan klik Book Reader.
10. Muncul Template Description Create Book Reader app for
Android, dan kemudian klik Next.
11. Pada Book library berikan judul buku pada Book Title dan klik tab
Upload PDF file.

12. Pastikan file yang akan di upload pada tab Upload PDF file tidak lebih
dari 20Mb.
13. Klik Upload file kemudian pilih file yang akan di upload. klik Open.

14. Tampilan file yang sudah berhasil di upload dan berikan Book Title pada
file tersebut.
15. Lakukan untuk file PDF yang lainnya. Dan berikan judul pada setiap file
yang diupload.
16. Contoh 2 File PDF lainnya yang berhasil di upload, lakukan pada file
lainnya.

17. Jika file PDF sudah di upload semua, geser scrool ke bawah, klik Next.
18. Berikan nama aplikasi : BG Kelas VII, kemudian klik Next.
19. Tahap berikutnya, tentukan Icon aplikasi, dengan memilih Custom
Icon.

20. Klik Upload 512x512.
21. Pilih file dengan ukuran 512x512 untuk dijadikan icon aplikasi.
Kemudian klik Open.
22. Jika gambarnya sudah sesuai ukuran, klik Crop.

23. Tampilan Icon sudah berubah sesuai dengan gambar yang sudah
ditambahkan, klik Next.
24. Selanjutnya klik CREATE , untuk membuat aplikasi dan tunggu
beberapa saat untuk dapat di download file APK nya.

25. Klik menu Download untuk mendapatkan aplikasi yang dibuat, bisa
dikirim melalui email, download file apk langsung dan dapat
menggunakan link serta QR Code. Coba klik SEND APP TO EMAIL.
26. Untuk memastikan aplikasi sudah terkirim, buka email yang sudah
didaftarkan. Dan klik kiriman dari AppsGeyser – Download your App
– BG Kelas VII.
27. Setelah email dibuka, ada 2 pilihan file yang bisa di unduh, pertama file
jenis APK dan AAB. Klik unduh file APK untuk dapat disimulasikan
pada emulator BlueStacks 5.

28. Untuk Download file APK juga dapat melalui klik apk (Android
package)
29. Tunggu beberapa saat untuk proses Build aplikasi.
30. Proses Download sedang berlansung.
31. Pada saat proses download, muncul informasi terkait dengan install
Blocked.

32. Lakukan pengaturan agar aplikasi yang sudah dibuat dapat di instal atau
di pasang pada HP Android.
33. Proses download sudah selesai, selanjutnya buka Folder tempat
penyimpanan file APK. Buka pula aplikasi emulator BlueStacks 5.

34. Pilih file yang akan dipasang pada emulator dan Drag file tersebut ke
emulator dijendela sampingnya.
35. Tampilan aplikasi pembaca buku atau Book Reader dengan nama BG
Kelas VII sudah berhasil terpasan.
36. Buka file BG Kelas VII dan berikan izin pada foto media dan device.
Tunggu beberapa saat untuk proses download file.

37. Aplikasi BG Kelas VII sudah berhasil tampil dengan beberapa buku
yang sudah diupload sebelumnya. Kemudian buka salah satu buku.
38. Klik Read untuk membaca buku yang sudah dibuka.

39. Klik tombol Back untuk keluar dari aplikasi pembaca buku.
File APK pertama dengan nama BG Kelas VII sudah berhasil
dibuat dengan menggunakan aplikasi AppsGesyser.

B. Membuat File APK Portal Guru Belajar.
Membuat File APK Portal Guru belajar dapat dilakukan juga
menggunakan aplikasi AppsGeyser. Untuk membuat portal Guru Belajar
menggunakan AppsGeyser dapat menggunakan Menu INDIVIDUAL
kemudian pilih Browser.
Ikuti Tahapan berikut ini ntuk membuat file apk Portal Guru belajar :
1. Pada saat aplikasi AppsGeyser masih aktif digunakan, maka langsung
saja klik CREATE APP.
2. Pilih menu INDIVIDUAL.
3. Geser Scroolbar ke bawah dan cari fitur Browser untuk membuat
aplikasi Portal Guru Belajar.

4. Muncul tampilan Template Description.
5. Geser scroolbar ke bawah dan klik Next.
6. Pada tahap ADD BOOKMARKS, berikan Title dan Links yang
nantinya akan ditambahkan pada Portal Guru Belajar. Tambahkan 5
sampai 6 Title dan Links yang membantu guru untuk belajar dalam satu
aplikasi.

7. Berikut ini contoh isian Title dan Links yang sudah ditambahkan. Jika
ada icon akan lebih baik (optional).
8. Tambahkan Backgroud image untuk latar belakang aplikasi Portal
Guru Belajar.
9. Klik Background image dan jika sudah ada filenya pilih dan kemudian
klik Open.

10. Klik Crop jika tampilan gambar sudah sesuai yang ditambahkan.
11. Tahap berikutnya, klik Next.
12. Pilih Widget yang diinginkan dan pengaturan lainnya.

13. Geser scroolbar ke bawah, jika tidak ada perubahan lain, klik Next.
14. Pada tahap berikutnya, lakukan pengaturan pada APPEARANCE
SETTING. Sesuaikan dengan penampilan yang diinginkan.
15. Geser scroolbar ke bawah lagi, lakukan pengaturan lainnya jika
dibutuhkan, jika ingin standar, klik Next lagi.

16. Berikan nama aplikasi : Portal Guru Belajar dan kemudian Next.
17. Lakukan perubahan Icon dengan memilih Custom Icon. Upload
512x512 untuk mengganti icon standar dari AppsGeyser.
18. Pilih file yang disediakan dan kemudian klik Open.

19. Klik Crop untuk menambahkan gambar pada custom Icon.
20. Custom Icon sudah berubah sesuai dengan gambar yang diinginkan.
Selanjutnya klik Next.

21. Klik CREATE untuk membuat file APK Portal Guru Belajar.
22. Tunggu beberapa saat, dan aplikasi APK siap untuk di Download. Klik
tombol Download sebelah nama aplikasi Portal Guru Belajar.
23. Klik File apk (Android package) untuk dapat di download.
24. Proses Build File APK Portal Guru Belajar membutuhkan beberapa
waktu.

25. Proses download secata otomatis, dan tunggu sampai dengan selesai.
26. File APK Portal Guru Belajar sudah berhasil didownload. Pastikan
emulator berada disamping jendela file apk untuk mudah di drag and
drop.
27. Pilih File APK dan Drag ke dalam emulator Bluestacks 5.

28. Tunggu beberapa saat untuk proses copy dan pemasangan. Jika sudah
berhasil dipasang. Jalankan aplikasi Portal Guru Belajar dan aplikasi
siap untuk dibuka.
29. Buka salah satu laman guru belajar. Dan tampilan sudah sesuai yang
diharapkan.

C. Membuat File APK Konsultasi Belajar.
File APK berikutnya yang akan dibuat dengan menggunakan
AppsGeyser adalah APK Konsultasi belajar. APK Konsultasi Belajar ini
menggunakan menu POPULER kemudian pilih Video Calls And Chats.
Untuk membuat aplikasi Konsultasi Belajar, ikuti tahapan berikut ini :
1. Pada POPULER, klik Video Calls and Chats.
2. Selanjutnya muncul Template Description, kemudian klik Next.
3. Pengaturan selanjutnya adalah pada APP Setting.

4. Jika tidak ada perubahan pada Color Themes, klik Next.
5. Berikan nama aplikasi : Konsultasi Belajar. Kemudian klik Next..
6. Lakukan penngaturan pada Custom icon. Klik Upload 512x512.
7. Pilih Icon Konsultasi Belajar. Kemudian klik Open.

8. Klik Crop jika tampilannya gambarnya sudah sesuai.
9. Gambar pada Custom icon sudah sesuai yang diinginkan, selanjutnnya
klik Next.
10. Klik CREATE, untuk membuat aplikasi Konsultasi Belajar.

11. Aplikasi Konsultasi Belajar siap untuk di Download.
12. Pada menu DOWNLOAD, klik apk (Android Package).
13. Tunggu beberapa saat untuk proses Build Aplikasi Konsultasi Belajar.

14. File APK Konsulasi Belajar siap untuk di simulasikan di emulator
BlueStacks 5.
15. Buka Folder APK yang akan disimulasikan dan Emulator BlueStacks 5.
16. Pilih File APK Konsultasi belajar Drag dan Drop ke Emulator
BlueStacks 5.

17. Proses Copy file dan pemasangan. Dan setelah berhasil pemasangn apk
Konsultasi Belajar, jalankan dan klik Continue.
18. Berikan izin hak akses aplikasi Konsultasi Belajar pada Contact.
19. Berikan hak akses pada media and files, serta mange phone Calls.

20. Lakukan pengaturan pada nomor telepon yang akan digunakan untuk
konsultasi.

21. Lakukan proses verifikasi nomor telepon.
22. Tenntukan PIN dan Profil Pengguna pada aplikasi.
23. Aplikasi Konsultasi Belajar siap digunakan dan buat Group baru untuk
kelompok belajar.

24. Tambahkan anggota group untuk membuat group baru. Dan Group
Belajar Informatika pada aplikasi Konsultasi Belajar siap untuk
digunakan.

D. Membuat File APK Seri Sapa GTK.
File APK yang akan dibuat dengan menggunakan AppsGeyser
berikutnya adalah APK Seri Sapa GTK. Untuk membuat APK ini
menggunakan menu Business kemudian pilih Youtube. Selanjutnya, untuk
membuat aplikasi Seri Sapa GTK, ikuti tahapan berikut ini :
1. Pada Dashboard, klik CRETE APP.
2. POPULER, cari aplikasi Youtube.
3. Geser Scroolbar ke bawah, dan klik Youtube.

4. Selanjutnya muncul Template Description pada Create Youtube
Channel app for Android. Kemudian klik Next.
5. Pengaturan selanjutnya adalah pada APP Setting.
Pada Select input type ubah menjadi YouTube playlist url
6. Cari playlist Sapa GTk Kemdikbuk. Tampilan di Youtube Playlist Sapa
GTK Kemdikbud.

7. Dan pada Enter channel url or name:* isikan playlist Sapa GTK :
https://www.youtube.com/playlist?list=PLwky2N_ChiWbTgjh-
ZSzmIa9ZI2DOXu4v
8. Untuk mendapatkan Youtube API key. Tahapan untuk mendapatkan
Youtube API key, klik kanan Open link ini new tab. Untuk
mendapatkan panduannya.
9. Ikuti tahap demi tahap untuk mendapatkan API keys

10. Akses ke alamat https://console.developers.google.com/project ,
selanjutnya klik CREATE PROJECT.
11. Berikan nama pada projek sesuai dengan kebutuhan kemudian klik
CREATE.
12. Tunggu beberapa saat untuk pembuatan project baru.
13. Project SapaGTK sudah berhasil di buat, kemudian SELECT
PROJECT.

14. Tampilan Dashboard pada project baru SapaGTK
15. Klik pada menu APIs & Services – Library.
16. Tampilan API library pada Google Cloud.

17. Cari Library Youtube Data API v3. Jika sudah ketemu klik untuk bisa
diaktifkan.
18. Selanjutnya klik ENABLE.
19. Selanjutnya CREATE CREDENTIALS.

20. Pilih Public Data. Kemudian klik Done.
21. Klik menu Credentials.
22. Selanjutnya Klik API key.

23. API key sudah dibuat. Kemudian copy API keys. Untuk nanti
ditambahkan pada AppGeyser
24. Tampilan API keys yang sewaktu waktu bisa dibuka kembali.
25. Paste API keys pada APP Setting. Selanjutnya klik Next.
26. Berikan nama aplikasi : Seri Sapa GTK. Kemudian klik Next.

27. Lakukan pengaturan pada Custom icon. Klik Upload 512x512.
28. Pilih Icon Seri Sapa GTK. Kemudian klik Open.

30. Gambar pada Custom icon sudah sesuai yang diinginkan, selanjutnya
klik Next.
31. Klik CREATE, untuk membuat aplikasi Seri Sapa GTK.
32. Aplikasi Seri Sapa GTK siap untuk di Download.
33. Klik apk (Android Package) untuk download file APK. Seri Sapa GTK.
34. Tunggu beberapa saat untuk proses Build Aplikasi Seri Sapa GTK.

35. File APK Seri Sapa GTK siap untuk di simulasikan di emulator
BlueStacks 5.
37. Pilih File Seri Sapa GTK Drag dan Drop ke Emulator BlueStacks 5.
Seri Sapa GTK, jalankan apllikasinya.

39. Tampilan Aplikasi Seri Sapa GTK.

E. Membuat File APK Mewarna.
File APK yang akan dibuat dengan menggunakan AppsGeyser
berikutnya adalah APK Mewarna. Untuk membuat APK ini menggunakan
Menu INDIIDUAL kemudian pilih Coloring. Selanjutnya, untuk
membuat aplikasi Mewarna, ikuti tahapan berikut ini :
1. Pada Dashboard, klik CRETE APP.
2. INDIVIDUAL, cari aplikasi Coloring.
3. Geser Scroolbar ke bawah, dan klik Coloring.

4. Selanjutnya muncul Template Description pada Create Coloring
Game app for Android. Kemudian klik + Attach image.
5. Tambahkan gambar yang nanti akan diwarnai. Kemudian klik Next.
6. Berikan nama aplikasi : Mewarna. Kemudian klik Next.
7. Lakukan pengaturan pada Custom icon. Klik Upload 512x512.

8. Pilih Icon Mewarna. Kemudian klik Open.
10. Gambar pada Custom icon sudah sesuai yang diinginkan, selanjutnnya
klik Next.
11. Klik CREATE, untuk membuat aplikasi Mewarna.

12. Aplikasi Mewarna siap untuk di Download.
13. Klik apk (Android Package) untuk download file APK. Mewarna.
14. Tunggu beberapa saat untuk proses Build Aplikasi Mewarna.
15. File APK Mewarna siap untuk di simulasikan di emulator BlueStacks 5.

17. Pilih File APK Mewarna Drag dan Drop ke Emulator BlueStacks 5.
Mewarna, jalankan apllikasinya.

BAB V
MEMBUAT FILE APK MENGGUNAKAN KODULAR
A. Mendaftar Akun dan Membuat Projek Baru.
Membuat aplikasi seluler tanpa kode dengan sistem operasi android
dapat dilakukan menggunakan Kodular. Kodular merupakan sebuah
platfrom online yang dikhususkan untuk membuat aplikasi android, kodular
dikembangkan berdasarkan app inventor sehingga fungsinya tidak jauh
berbeda. Kelebihan dari kudolar ini adalah tampilan interface yang menarik.
Sebelum membuat aplikasi baru, tahapan yang harus dilakukan
adalah membuat akun terlebih dahulu. Untuk mendaftar akun pada Kodular,
ikuti langkah sebagai berikut :
1. Buka aplikasi web browser yang Anda miliki, kemudian ketikkan alamat
url https://www.kodular.io/creator
2. Klik tombol “CREATE APPS”, dan akan diarahkan menuju halaman
Login Kodular, Jika belum memiliki akun di Kodular, maka lakukan
pendaftarn terlebih dahulu dengan klik Create account. Akun yang
digunakan dapat melalui Google, Github dan Twitter

3. Untuk contoh saat ini gunakan email Google, klik Logo Google untuk
melakukan otentifikasi lebih lanjut.
4. Pilih email Google yang sudah melakukan login pada Browser Anda.
5. Klik Authorize untuk melanjutkan tahap berikutnya.

6. Setelah itu muncul Syarat dan Ketentuan, Klik I Accept the Terms of
Service.
7. Pembuatan akun berhasil di lakukan, selanjutya klik Lets Go.
8. Muncul tampilan Welcome to Kodular.

9. Untuk melihat lebih jauh terkait profil akun yang telah dibuat. Klik
pojok kanan atas, klik Account.
10. Klik My account.
11. Akan muncul tampilan My Kodular. Ada menu Home, Profile, Project,
Payouts, Premium, Community, Status dan Support.

12. Pada menu Profil, ada beberapa pengaturan yang bisa dilakukan
perubahan, mulai dari Nama, Bahasa dan penghapusan akun.
13. Selanjutnya klik menu Premium, untuk mengatahui perbandingan
antara Free dan Premium.
Setelah membuat akun ke Kodular selesai, langkah berikutnya adalah
membuat projek baru di Kodular.
1. Pada tampilan Welcome to Kodular, seperti tampilan pada gambar
dibawah ini, kemudian kllik Create project.

2. Pada Create new project, tentukan project name.
3. Setelah diberikan nama, otomatis tombol Next akan aktif. Klik Next
untuk melanjutkan.
4. Lakukan pengaturan pada project yang sudah dibuat. Pada App name,
Theme, Minimum SDK Level.

5. Setelah Theme juga dilakukan perubahan dari Default. Klik Finish.
6. Tunggu beberapa saat untuk pembuatan projek baru.
7. Ada Tampilan Pop Up, What’s New in Kodular. Untuk sementara klik
Close.

8. Tampilan awal projek baru pada aplikasi Kodular.
9. Pada Viewer, beberapa pilihan tampilan yang bisa digunakan untuk
membuat projek baru. Lakukan penyesuaian sesuai perangkat seluler
yang akan dibuat.
10. Tahap berikutnya, lakukan pengaturan pada All Component - Screen1.

11. Geser scroolbar ke bawah untuk menampilkan property lain dari
Screen1
12. Lakukan penambahan gambar pada backgroud. Pada menu Backgroud
image, klik Upload.
13. Pada saat klik Upload File, tampilan yang muncul adalah Assets
Manager. Pada Assets Manager inilah silakan upload media yang akan
digunakan dalam membuat aplikasi. Mulai dari icon, backgroud dan
tombol navigasi. Klik Upload Asset.

14. Tambahkan file untuk backgroud. Contoh pada pembahan asset ini
adalah nama file Screen1. Pilih file kemudian klik Open.
15. Lakukan cara yang sama untuk file lainnya.

16. Jika file untuk membuat aplikasi sudah selesai, tutup kotak dialog Assets
Manager.
17. Untuk menambahkan gambar yang sudah di upload di Assets Manager,
klik anak panah ke bawah, tentukan file yang akan dijadikan
background.
18. Lakukan pengaturan pada Open Screen Animation. Pengaturan awal
adalah Default. Ubahlah menjadi Slide Horizontal atau pilihan lainnya
sesuai kebutuhan.

19. Geser scroolbar ke bawah untuk melihat pada pengaturan Screen1.
Lepaskan centang pada Show Option Menu, Show Status Bar da Title
Visible.
20. Tampilan pada Screen1. Setelah Show Option Menu, Show Status Bar
da Title Visible centangnya dillepas.
21. Langkah berikutnya adalah membuat tombol Masuk pada Screen1.
Untuk membuat tombol Masuk, buat terlebih dahulu tempat layoutnya.

22. Klik General – Vertical Arrangement.
23. Drag Vertical Arrangement ke Screen1.
24. Tampilan Vertical Arrangement yang sudah berhasil ditambahkan.
25. Lakukan pengaturan agar pada Vertical Arrangement bisa transparant.
Pilih pada object Vertical Arragement, klik Backgroud Color. Pilih
warnanya transparant kemudian klik Set

26. Warna pada Vertical Arrangement sudah berubah menjadi transparant.
27. Lakukan pengaturan pada Align Horizontal dan Align Vertical sesuai
dengan kebutuhan. Contoh pada Align Vertical ada pilihan Top ; 1
Center : 2 dan Bottom : 3
28. Berikutnya tambahkan tombol pada Vertical Arrangement1. Cukup
lakukan drag dan drop Button.

29. Posisi Button masih berada di tengah, karena pada Align Vertical ada
di Center.
30. Lakukan perubahan pada Vertical_Arrangement1 dari Center : 2
menjadi Bottom : 3.
31. Tampilan Perubahan dari posisi Button di tengah menjadi di bawah.

32. Karena font nya kecil sekali, perlu dilakukan perubahan pada Font Size.
33. Hasil dari preubahan Font Size yang telah dilakukan perubahan.
34. Pada Button, tentukan pula ukuran tinggi dan lebarnya, melalui
Button_1 properties (Height dan Width), tentunya untuk perubahan
ukuran ini juga akan menyesuaikan dengan Text untuk Button yang
diinginkan

35. Setelah Text for Button1 dirubah menjadi Mulai, maka ukuran lebar
dan tinggi akan berubah. Lakukan perubahan agar menjadi lebih bagus
tampilannya.
36. Setelah menambahkan Button, selanjutnya adalah menambahkan
Screen2. Screen1 untuk menambahkan halaman awal, setelah di klik
Masuk, makan tombol masuk ke screen2 (halaman 2).

37. Klik Add Screen, kemudian klik Create.
38. Tampilan awal Screen2 beserta Screen Properties.
39. Pada Backgroud image, gantilah gambarnya menjadi Screen2.png.

40. Seperti pada Screen1,hilangkan juga cek list Show Options Menu dan
Show Status Bar.
41. Hilangkan juga centang pada Title Visible.
42. Tampilan Screen2 setelah Show Options Menu dan Show Status Bar
serta Title Visible centangnya dihilangkan.
43. Untuk gunakan fitur vertical Arrangement atau fitur lainnya, bisa
menggunakan Search.

44. Dengan menggunakan fitur Search, maka menu akan tampil sesuai
dengan kebutuan yang dingin digunakan, contoh pada fitur Search
dituliskan verti, maka ada 2 menu yang tampil sesuai dengan kata kunci
yang dimasukkan. Jika sudah ketemu, klik drag dan drop Vertical
Arrangement.
45. Lakukan perubahan pada tinggi dan lebarnya dengan memilih Fill
Percent. Sehingga tampilan Vertical Arrangement menjadi Full Screen2.
Lakukan pula untuk perubahan warna pada Backgroud Color.
46. Lakukan perubahan pada Backgroud Color menjadi transparent. Klik
transparent dan kemudian klik Set.

47. Tampilan Vertical_Arrangement1 sudah berubah menjadi transparant.
Selanjutnya tambahkan Horizontal Arrangement.
48. Lakukan pengaturan lebih lanjut pada Horizontal Arrangement untuk
menyediakan tempat untuk gambar yang menjadi icon menuju ke Screen
atau halaman berikutnya.

49. Tambahkan lagi Horizontal Arrangement dibawah PILIH YANG
MANA ? dan pada Horizontal masukkan kemarin Horizontal
Arrangement untuk menjadi 3 bagian.
50. Tampilan Horizontal Arrangemt yang nantinya bisa ditambahkan
image/gambar yang bisa diatur tata letaknya.
51. Tampilan berikut ini adalah tata letak yang dibuat untuk dapat
ditambahkan gambar sesuai dengan icon yang nanti akan di tambahkan.

52. Setelah tata letak sudah disiapkan, berikutnya adalah menambahkan
image kedalam Horizontal Arrangement.
53. Cukup lakukan drag dan drop pada area Horizontal Arrangement yang
dinignkn/
54. Contoh tamplan image yang sudah ditambahan.

55. Tahap berikutnya adalah melakukan pengaturan pada Image1
Properties.
56. Pada Clickable pilih centang. Sedangkan untuk tinggi berikan 80px,
lebarnya 80px dan tentukan gambar yang akan ditambahkan. Dan
berikut ini adalah contoh tampilan pengaturan pada Image1. Lakukan
pula pada image lainnya.
57. Contoh tampilan dengan 3 gambar yang sudah dimasukkan termasuk
pada pengutaran image propertiesnya.

58. Tampilan semua gambar sudah dimasukkan pada area Horizontal
Arragement yang sudah disediakan.
B. Menambahkan Blok kode dan Simulasikan File APK.
Untuk 2 Screen yang telah dibuat di atas, belum bisa saling terhubung,
karena belum ada kode program yang menhubungkan keduanya.

Untuk menambahkan kode program, gunakan kode Bloks yang ada
di Kodular. Untuk menambakan kode program agar halaman yang dibuat bisa
saling terhubung, ikuti langkah berikut ini :
1. Gdsga
2. Gsdaga
3. Gsgsa
4. Gsgdsa

5. Gsagas
6. Gsagdsa
7. Gsagas
8. Gsagsa

9. Gdsag
10. Gsag
11. Gsa

12. Gsa
13. Gasg
14. Gsaga
15. Gasg
16. Gsa

17. Gsag
18. Gdsa
19. Gdsagda

20. G
21. Gdsa

22. gsa
23.
aplikasi seluler tanpa kode menggunakan kodular ini, maka perlu
ditambahkan blok kode agar saat tampilan awal muncul dan ada tombol
masuk bisa berfungsi, maka perlu ditambahkan blok kode pada halaman
Bloks.
Pada App Inventor terdapat dua halaman utama, yaitu halaman
designer dan halaman blocks. Halaman designer digunakan untuk
mendesain tampilan aplikasi dengan berbagai komponen dan layout yang
disediakan sesuai dengan kebutuhan. Sedangkan halaman blocks digunakan
untuk memprogram jalannya aplikasi seluler sesuai dengan yang dinginkan.
Tampilan Halaman Designer
Pada halaman designer terdapat beberapa jendela seperti Palette,
Viewer, Components, Media, dan Properties. Tools tersebut berfungsi
untuk mendesain tampilan aplikasi seluler tanpa kode dengan sistem
android sesuai keinginan.
6. Palette merupakan jendela tempat mengambil komponen-
komponen yang dikategorikan dalam beberapa kategori untuk
dimasukkan dalam aplikasi yang dibuat. Terdapat kategori User
Interface, Layout, Media, Drawing and Animation, Maps, Sensors,

Social, Storage, Connectivity, LEGO MINDSTORMS,
Experimental, dan Extension.
7. Viewer merupakan tempat untuk mengatur tampilan komponen
pada aplikasi nantinya.
8. Components merupakan tempat untuk mengatur komponen-
komponen yang telah diletakkan di viewer, seperti misalnya
mengganti nama komponen, dan menghapus komponen.
9. Properties merupakan tempat untuk mengatur properti layar, dan
komponen-komponen yang digunakan pada aplikasi yang sedang
dibuat seperti lebar, tinggi, warna latar, besar huruf, dll.
10. Media merupakan tempat untuk mengunggah gambar untuk
digunakan pada aplikasi yang sedang dibuat.
Pada bagian Palette terdapat komponen penyusun untuk mendesain aplikasi,
berikut adalah komponen penyusunnya:
▪ Filtering buku.
▪ Dapat memindahkan e-book ke Perangkat smartphone/tablet melalui
browser/http (bekerja sebagai web server).
C. Membuat Projek Baru melalui Impor File AIA.

BAB VI
MEMBUAT FILE APK MENGGUNAKAN THUNKABLE
A. Menambah Koleksi E-book
1. Penambahkan E-book melalui Add books.
Salah satu fitur dari aplikasi Calibre adalah pengelolaan
perpustakaan maya. Apabila sudah memilikikumpulan BukuSekolah
Elektronik (BSE) dari Kemdikbud atau buku lain sebagai referensi,
maka file e-book yang sudah ada bisa dengan mudah untuk
dimasukkan kedalam aplikasi Calibre. Cara untuk menambahkan
koleksi e-book yang adalah sebagai berikut :
1. Jalankan aplikasi Calibre, kemudian klik Dropdown yang ada di
Add books yang ada di Toolbar.
2. Ada banyak pilihan untuk menambahkan e-book dalam aplikasi
Calibre. Salah satunya adalah menambahkan buku pada Folder
yang memiliki banyak subfolder. Klik Add books from
directories, including sub-directories (Multiple books per
directory, assumes every ebook file is a different book).
Penambahan buku dari beberapa direktori termasuk
subdirektori, asumsi setiap file buku berbeda beberapa buku per
direktori.

3. Untukcontoh saat ini adalah pilih folderBSERev 2017 (kumpulan
BSE revisi 2017 untuk kelas X dan XI Kurikulum 2013). Setelah
dipilih folder kemudian Select Folder.
4. Proses menambahkan buku ke dalam aplikasi Calibre.
5. Pada statusbar muncul versi Calibre, Pembuat aplikasi Calibre
dan jumlah buku yang ada dan tersedia di aplikasi Calibre.

6. Dan berikut ini adalah tampilan Daftar buku yang sudah
ditambahkan setelah memilih Folder BSE Rev 2017.
7. Dan Jika ingin mengetahui detail format buku, maka terdapat
informasi ada 1 EPUB dan 48 PDF.
8. Jika masih memiliki koleksi buku dalam bentuk file PDF atau
Koleksi buku yang lain dalam bentuk atau format EPUB, lakukan
langkah yang sama seperti langkah di atas. Setelah memiliki

koleksi buku yang sudah banyak, maka saatnya untuk
melakukan pengaturan pada Layout sesuai dengan kebutuhan.
9. Jika pada layout yang dipilih adalah Cover browser, maka
tampilan yang muncul adalah sebagai berikut :
10. Lakukan pengecekan pada Cover Browser dan Cover Grid, dan
bedakan tampilannya.
11. Berikut ini adalah tampilan untuk Layout – Cover Grid.

12. Geser scrollbar ke bawah untuk melihat hasil dari buku buku lain
yang telah ditambahkan dengan tampilan Cover Grid.
Penambahan buku selain menggunak Fitur Add Books
dengan memilik lokasi folder yang ada di perangkat Laptop atau
Komputer, pada Calibre tersedia Penambahan koleksi buku dengan
memberikan Kode ISBN. Langkah yang harus dilakukan adalah :
1. Klik anak panah ke bawah pada Add Books.

2. Kemudian klik Add from ISBN.
3. Akan muncul kotak dialog Add books by ISBN. Masukkan contoh
1 ISBN 978-602-51324-2-1 kemudian klik OK.
4. Setelah itu klik Download both.
5. Klik Yes dan tunggu beberapa saat.

6. Akan muncul Cover buku Kerangka Literasi Digital Indonesia.
7. Pada book detail akan secara otomatis tampil nama penulis, Ids,
dan lokasi penyimpanan file. Namun Buku ini tidak bisa dibuka
lebih detail karena yang didownload hanya cover dan
metadatanya saja.

2. Penambahan E-book melalui Drag and drop dari Folder.
Selain menambahkan e-book yang sudah dimiliki melalui
fitur Add books, pada aplikasi Calibre dapat digunakan drag
anddrop e-booklangsung darifolder. Berikut ini tahapan untuk
menambahkan e-book dengan drag and drop :
1. Buka folder yang berisi e-book yang akan dimasukkan ke
dalam aplikasi Calibre.
2. Pilih file e-book yang akan ditambahkan ke dalam aplikasi
Calibre. Dan tampilan jendela folder yang berisi file e-book
di atas aplikasi Calibre sebagaimana tampilan di bawah ini.

3. Lakukan drag and drop pada beberapa e-book lansung ke
Aplikasi Calibre.
4. Proses penambahan e-book sebanyak 8 buku ke dalam
aplikasi Calibre.
5. Proses penambahan e-book telah behasil.

6. Setelah di cek, ternyata ada buku yang ganda. 1
menggunakan tambah e-book dengan menggunakan by
ISBN dan 1 buku menggunakan drag and drop.
7. Tampilan hasil menambahkan e-book dengan meng-
gunakan drag and drop file . Untuk file hasil drag and drop
ini sudah bisa dibuka dengan book reader.
8. Tampilan hasil menambahkan e-book dengan Add books
by ISBN. Namun e-book ini tidak bisa dibuka dengan book
reader.

3. Penambahan E-book dari Get Books.
Penambahan e-book yang ada di Calibre juga dapat
dilakukan melalui fitur Get Books. Banyak sekali toko/store
online penyedia e-book, baik yang berbayar maupun gratis.
Berikut ini adalah cara mencari buku dan menambahkan
ke dalam Calibre Library :

1. Klik pada drop down yang ada di Get books, kemudian klik
Search for e-books.
2. folder yang berisi e-book yang akan dimasukkan ke dalam
aplikasi Calibre.
3. Pilih file e-book yang akan ditambahkan ke dalam aplikasi
Calibre. Dan tampilan jendela folder yang berisi file e-book
di atas aplikasi Calibre sebagaimana tampilan di bawah ini.

4. Lakukan drag and drop pada beberapa e-book lansung ke
Aplikasi Calibre.
5. Proses penambahan e-book sebanyak 8 buku ke dalam
aplikasi Calibre.

6. Gdsa
7. Gas
8. Gsa

9. gsa
B. Edit Metadata
Edit Metadata merupakan fitur di Calibre untuk memberikan
identitas E-book. Pengisiaan identitas dengan benar merupakan
upaya untuk memudahkan pencarian e-book pada perpustakaan
maya yang kita miliki.
Dari Perpustakaan Maya, dijumpai proses penambahan buku
dengan menggunakan Drag and drop pada kolom detail buku
mengalami kesalahan dan perlu dilakukan pengisiaan identitas e-

book dengan benar. Pengisian atau perbaikan pada Identitas e-book
dengan menggunakan Edit Metadata dapat dilakukan dengan 2 cara,
yaitu Manual dan otomatis. Jika proses edit metadata dilakukan
secara manual, maka sebaiknya e-book yang akan diisi metadatanya
dibuka terlebih dahulu dengan e-book reader. Berikut ini adalah
tampilan buku dengan Judul Kerangka Literasi Digital.
Pada Identitas e-book diatas, Judul buku dan Penulis sudah tidak
benar. Untuk melakukan edit metadata, berikut ini informasi yang
harus diketahui pada edit metadata :
Title : Judul Tags : kata kunci untuk
memudahkan pencarian
buku
Author(s) : Penulis Series : Seri- khusus untuk buku
yang terbitkan secara
berseri
Publisher : Penerbit
buku
Date : Tanggal- waktu pencatatan
identitas buku)

Rating : Tingkat
penilaian
sebuah
buku)
Published : Waktu penerbitan yang
tercatat di halaman awal
buku)
Ids : Identitas
yang
dicirikan
oleh ISBN
Languages (Bahasa yang digunakan
dalam buku)
Setelah mengetahui informasi pada kotak dialog edit metadata,
lakukan edit metadata sesuai dengan informasi pada e-book yang
sudah dibuka sebelumnya.
Jika ragu dengan informasi identitas pada e-book yang sudah
dibuka, maka sebaiknya pengisian edit metadata dilakukan secara
otomatis. Syarat pengisian edit metadata secara otomatis adalah
Komputer atau Laptop yang terinstall aplikasi Calibre terkoneksi ke

internet. Berikut ini adalah tahapan yang harus dilakukan untuk edit
metadata secara otomatis.
1. Pilih dulu e-book yang akan dilakukan edit metadata. Kemudian
klik drop down pada Edit Metadata, pilih Edit metadata
individually.
2. Mengingat informasi Identitas e-book masih belum sesuai, maka
lakukan perubahan sesuai dengan judul buku sebenarnya.
3. Pada Title sebelumnya : Seri buku Literasi Digital dirubah
menjadi Kerangka Literasi Digital. Jika sudah benar, klik anak
panah ke kanan, agar sort Title menjadi sama dengan Titlenya.
Untuk Author(s) dan sort Author dihapus dulu saja.

4. Jika sudah, maka klik Download metada. Dan tunggu beberapa
saat.
5. Pada proses pencarian metadata, membutuhkan waktu untuk
mencari informasi Judul buku yang ada di Google books dan
Amazon. Beberapa kali mencoba file E-book dengan
menggunakan Download metadata kurang berhasil, namun
untuk judul buku Kerangka Literasi Digital ditemukan
metadatanya. Kemudian klik OK untuk melanjutkan.

6. Pada Download metadata, proses pencarian cover sesuai
dengan judul buku dilakukan. Pilih sesuai dengan pilihan yang
diinginkan. Kemudian klik OK.

7. Tampilan Identitas buku Kerangka Literasi digital sudah
lengkap. Kemudian Klik OK lagi.
8. Tampilan buku dengan identitas yang sudah lengkap tampil di
Calibre Library.
9. Dengan Langkah yang sama untuk judul buku Kita Bikin
Infogragis Keren juga berhasil dengan tampilan sebagai berikut :

Buku Cara Mudah Membuat Aplikasi Seluler Tanpa Kode.pdf

Buku Cara Mudah Membuat Aplikasi Seluler Tanpa Kode.pdf

Recommended

Recommended

More Related Content

Similar to Buku Cara Mudah Membuat Aplikasi Seluler Tanpa Kode.pdf

Similar to Buku Cara Mudah Membuat Aplikasi Seluler Tanpa Kode.pdf (20)

Recently uploaded

Recently uploaded (20)

Buku Cara Mudah Membuat Aplikasi Seluler Tanpa Kode.pdf