membuat aplikasi android dengan app inventor 2
TRANSCRIPT
![Page 1: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/1.jpg)
Membuat Aplikasi Android Sendiridengan App Inventor 2
Rusmanto ([email protected]) Asosiasi Open Source Indonesia
Sekolah Tinggi Teknologi Terpadu NFwww.aosi.or.id – www.unf.ac.id Referensi: appinventor.mit.edu
![Page 2: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/2.jpg)
Topik Utama
● Sekilas Open Source● Mengapa Profesi IT masih Menarik?● Mengapa Belajar Membuat Aplikasi?● Mengapa Membuat Aplikasi Android?● App Inventor 2 (AI2)● Demo Membuat Aplikasi dengan AI2
![Page 3: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/3.jpg)
Arti Open Source (Software)
● Software yang dibuat dan didistribusikan tanpa biaya royalti dan tidak merahasiakan kode sumbernya (source code disediakan), agar berkembang cepat.
● Contoh Sistem Operasi: Linux, Android, dll.● Contoh Aplikasi (Apps): Firefox, LibreOffice, dll.● Contoh Middleware/Server: Apache, Tomcat, dll.● Contoh Pemrograman (tools): Java, PHP, dll.
![Page 4: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/4.jpg)
Lisensi Open Source
● Pengembang (pemilik hak cipta) suatu software mengizinkan orang lain untuk menggunakan, mempelajari cara kerjanya (source code tersedia), memodifikasi, dan menyebarluaskan karya ciptanya.
● Contoh: GPL (General Public License), Apache License, BSD License, dll.
![Page 5: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/5.jpg)
Bisnis Open Source
● Cara bisnis (misal software) yang tidak menjual lisensi software Open Source, tapi menjual jasa (system integrator, technical support/maintenance, training), atau menjual hardware berisi software (misal vendor HP/Tablet Android), dll.
● Contoh: Membuat aplikasi Android untuk disebarluaskan secara gratis dengan menyediakan kode sumber, uang diperoleh dari iklan/sponsor.
![Page 6: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/6.jpg)
Mengapa Profesi IT Menarik? (1)
● Hasil riset Kelly Services, Inc tentang gaji karyawan profesional di Indonesia menunjukkan gaji karyawan di bidang TI setara/lebih besar dari bidang Bank, untuk pendidikan dan lama kerja yang sama.
Karyawan Menengah-Bawah:● Bank CS Officer: Rp 3 juta s.d. 6 juta ● IT Helpdesk: Rp 3,25 juta s.d. 6,25 juta.
![Page 7: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/7.jpg)
Mengapa Profesi IT Menarik? (2)
Karyawan Menengah di Bank:● Bank Auditor: Rp 3,5 juta s.d. 5,5 juta ● IT Auditor: Rp 3,5 juta s.d. 8,5 juta ● Bank - Tax Accountant: Rp 4 juta s.d. 10 juta
Karyawan Menengah di bidang TI:● Software Engineer: Rp 3 juta s.d. 7 juta● IT Sys/Network Admin: Rp 5 juta s.d. 9 juta● IT Security Consultant: Rp 7 juta s.d. 11 juta
![Page 8: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/8.jpg)
Mengapa Belajar Membuat Aplikasi?
Sumber: code.org
![Page 9: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/9.jpg)
Mengapa Membuat Aplikasi Android?
![Page 10: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/10.jpg)
App Inventor 2 (AI2)
● Membuat aplikasi Android tanpa harus membuat kode atau perintah bahasa pemrograman.
● Langkah awal belajar bahasa program Java, dll.● Meningkatkan skill praktis komputasi mobile dengan
ilmu internet (web), matematika, dan media (suara, gambar, video).
● Mengasah kreativitas, inovasi, entrepreneurship, dan skill pemecahan masalah (problem solving).
● Dapat ikut mengubah dunia!
![Page 11: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/11.jpg)
Apa yang dapat dibuat dengan AI2?
Games
Text Processing Apps
Location Aware Apps Web Enabled Apps
Quizzes
Other purpose Apps
Education Apps
![Page 12: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/12.jpg)
![Page 13: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/13.jpg)
Mengenal AI2
● App Inventor 2 awalnya dikembangkan oleh Google, kemudian diserahkan kepada MIT (Massachusetts Institute of Technology): MIT App Inventor 2.
● Pembuatan aplikasi Android dengan AI2 tidak berupa perintah-perintah teks, tapi menata kotak-kotak, sehingga disebut Blocks Programming.
● AI2 berguna untuk mendesain program, menyimpan kode program plus asset/kelengkapannya, dan mengubah menjadi sebuah file siap install .APK.
● Alamat server http://ai2.appinventor.mit.edu
![Page 14: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/14.jpg)
Menyiapkan Perangkat
![Page 15: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/15.jpg)
![Page 16: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/16.jpg)
![Page 17: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/17.jpg)
Laptop/PC dan HP/Tablet Terhubung dalam Wifi yang sama
![Page 18: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/18.jpg)
Laptop/PC dan HP/Tablet Terhubung dengan USB
![Page 19: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/19.jpg)
Laptop/PC dengan EmulatorTidak perlu HP/Tablet
![Page 20: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/20.jpg)
Demo http://ai2.appinventor.mit.edu
![Page 21: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/21.jpg)
Login dengan email Google
![Page 22: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/22.jpg)
Halaman Pertama (Kosong)
![Page 23: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/23.jpg)
New Project atau Import Project
![Page 24: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/24.jpg)
Hasil Import Project HelloPurr
![Page 25: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/25.jpg)
Screen, Designer, Block
● Screen – Add Screen – Remove Screen digunakan untuk menentukan layar yang akan muncul di aplikasi, dengan jumlah layar satu atau lebih untuk sebuah aplikasi.
● Mode Designer digunakan untuk membuat desain antar muka aplikasi.
● Mode Blocks digunakan untuk menggambarkan apa saja yang akan dijalankan oleh aplikasi.
![Page 26: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/26.jpg)
Export selected project to my computer
![Page 27: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/27.jpg)
Mode Designer
![Page 28: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/28.jpg)
Mode Block
![Page 29: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/29.jpg)
Projects > Start new project
![Page 30: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/30.jpg)
Proyek_Baru
![Page 31: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/31.jpg)
Mode Designer: Pallete
Pallete: komponen dan sub komponen yang disediakan AI2, semacam modul atau sub-modul program untuk membuat aplikasi, terdiri atas User Interface, Layout, Media, Drawing and Animation, Sensors, Social, Storage, Connectivity, dan Lego Mindstorms.
![Page 32: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/32.jpg)
Mode Designer: Viewer
Viewer: dalam mode Designer ini Viewer sebagai tempat meletakkan komponen Pallete (misal User Interface berupa button/tombol), dengan cara click-drag-and-drop.
![Page 33: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/33.jpg)
Mode Designer: Component
Components: daftar komponen yang telah ada dalam Viewer. Kolom ini juga berguna untuk mengganti nama (rename) atau menghapus (delete) komponen.
![Page 34: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/34.jpg)
Mode Designer: Media
Media: di bawah kolom Components, untuk mengupload file multimedia seperti suara dan video.
![Page 35: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/35.jpg)
Mode Designer: Properties
Properties: properti atau atribut/sifat untuk setiap komponen, misal lebar, tinggi, warna, teks judul, teks penjelasan, file suara, file video, dan lain-lain.
![Page 36: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/36.jpg)
Contoh Pallete dan Media HelloPurr
Contoh Pallete berupa User Interface adalah Button (tombol).
Contoh Pallete berupa Media adalah Sound (suara).
![Page 37: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/37.jpg)
Proyek Baru (Teks ke Suara)
![Page 38: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/38.jpg)
Pallete dan Media Teks ke Suara
Contoh Pallete berupa User Interface adalah Button (tombol) dan TextBox.
Contoh Pallete berupa Media adalah TextToSpeech (suara).
Catatan: Button termasuk komponen terlihat di aplikasi (visible components), sedangkan TextToSpeech tidak terlihat (Non-visible components).
![Page 39: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/39.jpg)
Projects > Start new project
![Page 40: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/40.jpg)
Menguji Coba di HP/Tabletdengan Install AI2 Companion
● Instal MIT AI2 Companion di HP/Tablet Android. ● Buka proyek, kemudian tampilkan di AI Companion
dengan klik Connect > AI2 Companion. ● Pastikan HP/Tablet Android dan komputer dalam
satu jaringan wifi, kemudian jalankan AI Companion untuk disambungkan dengan aplikasi web AI2. Gunakan kamera untuk Scan barcode sehingga langsung tersambung, atau masukkan kode di layar monitor komputer ke AI Companion HP/Tablet lalu klik Connect with code.
![Page 41: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/41.jpg)
Menguji Coba di HP/Tabletdengan Install file .APK
![Page 42: Membuat Aplikasi Android dengan App Inventor 2](https://reader034.vdocuments.pub/reader034/viewer/2022042422/58f2f6e61a28aba5368b45a3/html5/thumbnails/42.jpg)
Selamat Belajar dan Berkarya
Email: [email protected]
FB #rusmanto.maryanto
Google +RusmantoM
Twitter @ruslinux