SlideShare a Scribd company logo
1 of 7
Download to read offline
BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 1
BAB VII - INSTALASI DAN KONFIGURASI APP INVENTOR
Tujuan Pembelajaran:
Setelah mempelajari bab ini siswa diharapkan dapat mampu :
1. Memahami tentang aplikasi App Inventor
2. Menjelaskan bagaimana menyiapkan App Inventor
3. Menerapakan persiapan untuk membangun aplikasi
App Inventor adalah aplikasi berbasis cloud, artinya Anda dapat membangun aplikasi
dengan menggunakan web browser anda. Situs web ini menawarkan semua dukungan
yang Anda perlukan untuk mempelajari cara membuat aplikasi Anda sendiri. Kunjungi
website ai2.appinventor.mit.edu. Selain itu App Inventor juga bisa digunakan dalam
bentuk offline bagi yang tidak mempunya koneksi internet selama bekerja membangun
aplikasi perangkat bergerak Android.
A. Menyiapkan App Inventor
Anda dapat menyiapkan App Inventor dan mulai membangun aplikasi dalam
hitungan menit. Designer dan Block Editor berjalan sepenuhnya di browser (alias
cloud).
Anda memiliki dua opsi untuk menyiapkan App Inventor Anda, diantaranya:
OPSI 1:
Anda menggunakan perangkat bergerak Android atau Komputer dan Anda memiliki
koneksi internet.
Anda dapat mulai membuat aplikasi tanpa mengunduh perangkat lunak apa
pun ke komputer Anda. Anda hanya butuh menginstal App Inventor Companion di
perangkat Anda.
 Hubungkan Ponsel atau Tablet Anda melalui WiFi.
 Anda dapat menggunakan App Inventor tanpa mengunduh apa pun ke komputer
Anda!
 Anda akan mengembangkan aplikasi di situs web: ai2.appinventor.mit.edu.
 Untuk melakukan pengujian langsung pada perangkat Android Anda cukup instal
aplikasi AI Companion di ponsel atau tablet Android Anda.
BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 2
 Setelah Ai Companion diinstal, Anda dapat membuka proyek di App Inventor di
web, buka Companion di perangkat bergerak Anda untuk live testing aplikasi
yang sudah dibuat.
 Dan Anda dapat menjalankan aplikasi Anda saat membangunnya, seperti yang
terlihat pada gambar dibawah ini.
Gambar 2.1. Membangun Aplikasi dengan Perangkat Bergerak Android dan
Koneksi internet
Langkah-langkah berikut akan memandu Anda untuk tahapan instalasi AI
Companion
Langkah 1:
Unduh dan pasang Aplikasi MIT AI2 Companion di ponsel Anda.
 Buka pemindai kode QR perangkat Anda dan pindai kode QR di sebelah kiri di
bawah ini untuk mengunduh Aplikasi Companion dari Play Store.
 Jika Anda tidak dapat menggunakan Play Store, gunakan kode QR di sebelah
kanan untuk mengunduh Aplikasi Companion langsung ke ponsel Anda.
Play Store
Direkomendasi: Otomatis updates
Pindai kode QR ini (atau klik tautan ini)
untuk mendapatkan aplikasi dari Play
Store
APK File
Manual Updates
Pindai kode QR ini (atau klik tautan ini)
untuk mengunduh aplikasi secara
langsung
 Jika Anda membutuhkan pemindai kode QR, Anda bisa mendapatkannya dengan
mengunduh di Play Store (mis., ZXing).
 Setelah mengunduh, ikuti petunjuk untuk menginstal aplikasi Companion pada
perangkat Anda.
BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 3
 Anda hanya perlu menginstal Companion MIT AI2 sekali saja, dan kemudian
meninggalkannya di ponsel atau tablet Anda setiap kali Anda menggunakan App
Inventor.
Keterangan:
1. Jika Anda tidak dapat menggunakan kode QR, Anda masih bisa menginstal
MIT2 AI Companion di ponsel atau tablet Anda. Gunakan browser Web di
perangkat Anda untuk pergi ke Google Play Store, cari MIT2 Companion di
Google Play Store. Setelah Anda menemukan Companion, klik tombol
INSTALL untuk aplikasi Al Companion.
Langkah 2:
Sambungkan komputer dan perangkat bergerak Anda ke Jaringan WiFi yang sama.
Setelah proses intalasi Companion selesai maka App Inventor akan secara otomatis
menampilkan aplikasi yang sedang Anda buat, tetapi hanya jika komputer Anda
(menjalankan App Inventor) dan perangkat bergerak Android Anda (yang
menjalankan Companion) terhubung ke Jaringan WiFi yang sama
Langkah 3:
Buka App Inventor dan buka proyek (atau create a new one -- use Project > Start
New Project dan beri nama proyek Anda).
 Kemudian Pilih "Connect" dan "AI Companion" dari menu atas di browser AI2:
Gambar Menu AI2 di Browser
 Dialog dengan kode QR akan muncul di layar PC Anda. Di perangkat bergerak
Anda, jalankan aplikasi MIT App Companion sama seperti Anda melakukan
aplikasi apa pun. Kemudian klik tombol "Scan QR code" pada Companion atau
dengan memasukkan kode karakter string yang muncul di aplikasi App Inventor
Anda dan pindai kode di jendela App Inventor, seperti yang terlihat pada gambar
dibawah ini :
BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 4
 Dalam beberapa detik, Anda akan melihat aplikasi yang Anda buat di perangkat
bergerak Anda. Ini akan diperbarui saat Anda membuat perubahan pada desain
dan blok Anda, fitur ini yang disebut "live testing".
OPSI 2:
Anda menggunakan perangkat bergerak Android atau Komputer dan Anda tidak
memiliki koneksi internet.
Saat Anda menggunakan App Inventor dengan perangkat bergerak android
atau komputer, perangkat itu berkomunikasi dengan perangkat lunak App Inventor
yang berjalan di jendela browser komputer Anda. Komunikasi ini dikelola oleh
Aplikasi AI Companion yang berjalan di perangkat. Companion dapat berkomunikasi
dengan komputer Anda melalui koneksi internet secara langsung.
Namun, ada beberapa lingkungan di mana koneksi internet tidak berfungsi.
Misal di beberapa hotel, pusat konferensi, dan sekolah, yang mengkonfigurasi
jaringan internet mereka untuk melarang perangkat di jaringan untuk saling
berkomunikasi. Anda harus menginstal perangkat lunak driver android untuk
windows pada komputer Anda sehingga Anda dapat terhubung ke perangkat
bergerak Android Anda melalui USB. Opsi Koneksi USB bisa rumit, terutama pada
Windows. Gunakan ini sebagai pilihan terakhir.
Anda masih dapat menggunakan App Inventor dengan perangkat bergerak
atau komputer walaupun Anda tidak mempunya koneksi internet dengan cara
menghubungkan komputer dengan perangkat bergerak android menggunakan kabel
USB, seperti yang terlihat pada gambar dibawah ini:
BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 5
Gambar 2.2. Membangun Aplikasi dengan Menggunakan USB Perangkat
Bergerak
Menyiapkan koneksi USB, terutama pada mesin Windows akan membutuhkan
perangkat lunak driver khusus untuk terhubung ke perangkat Android. Akibatnya,
Anda mungkin harus mencari di Web untuk menemukan driver yang sesuai untuk
perangkat bergerak Anda.
Berikut adalah langkah-langkah untuk mulai menggunakan App Inventor
dengan kabel USB:
Langkah 1:
Instal Perangkat Lunak JAVA.
App Inventor dikembangkan dengan Bahasa pemrograman JAVA, jadi sangat
penting untuk Anda menginstall Java Development KIT (JDK) terlebih dahulu yang
dapat didownload diwebsite resmi Java dan gratis. Setelah instalasi selesai tahap
berikutnya adalah melakukan konfigurasi setting path JAVA
Langkah 2:
Konfigurasi Setting Path JAVA
Setelah JDK terinstall, langkah berikutnya adalah seting path JAVA nya, langkah-
langkahnya:
1. Control Panel -> System -> Advance System Setting
2. Environment Variabel
3. Pada System Variabel, Klik New dan ketikkan JAVA_HOME pada Variabel Name
4. Pada Variabel Value, Klik dimana file JDK berada. Contoh: "C:Program
FilesJavajdk12.2.0" (tergantung jenis versi JDK yang saudara download)
5. Pada Sstem Variabel. Klik Path dan Klik Edit, pada Variabel Value setelah bagian
“;” dengan mengetik "C:Program FilesJavajdk12.2.0" (tergantung jenis versi
JDK yang saudara download)
6. Klik OK dan restart computer.
BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 6
Langkah 3:
Install App Inventor Ultimate 2 Portable
1. Download software Instalasi App Inventor Ultimate 2 Portable yang
dikembangkan oleh Krupong yang merupakan App Inventor versi Offline di
https://sourceforge.net /projects/ai2u/
2. Pilih AI2U-portable-v4.6-64bit.zip kalau Windows sudah 64bit, atau pilih AI2U-
portable-v4.6-32bit.zip kalau Windows masih 32bit.
3. Ekstrak file yang sudah di download tadi ke salah satu folder sampai semua file
ter-ekstrak
4. Buka file folder hasil Ekstrak file tadi, buat shortcut pada file application-nya (icon
bulat dengan tulisan CD) dengan cara klik kanan mouse “Create shortcut”,
missal taruk di desktop
5. Klik File shortcut yang ber icon bulat dengan tulisan CD tadi sehingga tampil
seperti gambar dibawah ini :
6. Klik All AI2U Server atau DevServer
7. Klik Start Invent
8. Selanjutnya akan muncul Web Browser dan App Inventor akan otomatis aktif
seperti versi onlinenya. Direkomendasikan menggunakan web browser Google
Chrome untuk kompatilitas dan kestabilan sewaktu mendevelop aplikasi
9. Masukkan email Gmail Anda dan password dan klik Login
10. Berikutnya Anda akan masuk pada user Interface App Inventor versi Offline yang
sama dengan Onlinenya.
Anda sekarang siap untuk membangun aplikasi pertama Anda!
BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 7
RANGKUMAN
1. App Inventor adalah aplikasi berbasis cloud, artinya Anda dapat membangun
aplikasi dengan menggunakan web browser anda. Selain itu App Inventor juga
bisa digunakan dalam bentuk offline bagi yang tidak mempunya koneksi internet
selama bekerja membangun aplikasi perangkat bergerak Android.
2. Ada 2 opsi untuk menggunakan App Inventor yaitu :
a. Anda menggunakan perangkat bergerak Android atau Komputer dan Anda
memiliki koneksi internet.
b. Anda menggunakan perangkat bergerak Android atau Komputer dan Anda tidak
memiliki koneksi internet.
3. Untuk melakukan pengujian langsung pada perangkat Android Anda cukup instal
aplikasi AI Companion di ponsel atau tablet Android Anda.
4. Setelah Ai Companion diinstal, Anda dapat membuka proyek di App Inventor di
web, buka Companion di perangkat bergerak Anda untuk live testing aplikasi
yang sudah dibuat.
5. Berikut adalah langkah-langkah untuk mulai menggunakan App Inventor dengan
kabel USB:
a. Install perangkat lunak JDK Java yang bisa didownload dari website
b. Konfigurasi setting path JDK Java yang sudah di install tadi.
c. Install App Inventor Ultimate 2 Portable yang bisa di download dari website
https://sourceforge.net /projects/ai2u/

More Related Content

What's hot

Memulai coding-android-dengan-android-studio
Memulai coding-android-dengan-android-studioMemulai coding-android-dengan-android-studio
Memulai coding-android-dengan-android-studio
slempase
 
Modul ajar membuat aplikasi mobile multiplatform menggunakan android studio
Modul ajar membuat aplikasi mobile multiplatform menggunakan android studioModul ajar membuat aplikasi mobile multiplatform menggunakan android studio
Modul ajar membuat aplikasi mobile multiplatform menggunakan android studio
Elsa Charming
 

What's hot (19)

Seri 5 : Mengaktifkan dan menggunakan emulator Pada App Inventor
Seri 5 : Mengaktifkan dan menggunakan emulator Pada App InventorSeri 5 : Mengaktifkan dan menggunakan emulator Pada App Inventor
Seri 5 : Mengaktifkan dan menggunakan emulator Pada App Inventor
 
BAB IX - MEMULAI APP INVENTOR
BAB IX - MEMULAI APP INVENTORBAB IX - MEMULAI APP INVENTOR
BAB IX - MEMULAI APP INVENTOR
 
Belajar Android Studio - Membuat Aplikasi Android Sederhana
Belajar Android Studio - Membuat Aplikasi Android SederhanaBelajar Android Studio - Membuat Aplikasi Android Sederhana
Belajar Android Studio - Membuat Aplikasi Android Sederhana
 
Ebook tutorial pemrograman android
Ebook tutorial pemrograman android Ebook tutorial pemrograman android
Ebook tutorial pemrograman android
 
Seri 2 mengenal app inventor lebih dalam 2012
Seri 2 mengenal app inventor lebih dalam 2012Seri 2 mengenal app inventor lebih dalam 2012
Seri 2 mengenal app inventor lebih dalam 2012
 
Seri 7 : Mengakses aplikasi kamera dgn intent pada app inventor
Seri 7 : Mengakses aplikasi kamera dgn intent pada app inventorSeri 7 : Mengakses aplikasi kamera dgn intent pada app inventor
Seri 7 : Mengakses aplikasi kamera dgn intent pada app inventor
 
Pemrograman Mobile - (Pengenalan dan Instalasi Android)
Pemrograman Mobile - (Pengenalan dan Instalasi Android)Pemrograman Mobile - (Pengenalan dan Instalasi Android)
Pemrograman Mobile - (Pengenalan dan Instalasi Android)
 
Pengenalan mit app inventor
Pengenalan mit app inventorPengenalan mit app inventor
Pengenalan mit app inventor
 
Tutorial Android Membuat Aplikasi senter Flash light
Tutorial Android Membuat Aplikasi senter Flash lightTutorial Android Membuat Aplikasi senter Flash light
Tutorial Android Membuat Aplikasi senter Flash light
 
App inventor true offline
App inventor true offlineApp inventor true offline
App inventor true offline
 
Seri 9 : Aplikasi gps dengan app inventor
Seri 9 : Aplikasi gps dengan app inventorSeri 9 : Aplikasi gps dengan app inventor
Seri 9 : Aplikasi gps dengan app inventor
 
Panduan Memulai Firebase Android
Panduan Memulai Firebase AndroidPanduan Memulai Firebase Android
Panduan Memulai Firebase Android
 
Memulai coding-android-dengan-android-studio
Memulai coding-android-dengan-android-studioMemulai coding-android-dengan-android-studio
Memulai coding-android-dengan-android-studio
 
Seri 1 : Welcome back app inventor 2012
Seri 1 : Welcome back app inventor 2012Seri 1 : Welcome back app inventor 2012
Seri 1 : Welcome back app inventor 2012
 
D0215610(muh ikram s)
D0215610(muh ikram s)D0215610(muh ikram s)
D0215610(muh ikram s)
 
Modul ajar membuat aplikasi mobile multiplatform menggunakan android studio
Modul ajar membuat aplikasi mobile multiplatform menggunakan android studioModul ajar membuat aplikasi mobile multiplatform menggunakan android studio
Modul ajar membuat aplikasi mobile multiplatform menggunakan android studio
 
Modul 7 integrasi aplikasi dengan facebook api menggunakan intel xdk
Modul 7   integrasi aplikasi dengan facebook api menggunakan intel xdkModul 7   integrasi aplikasi dengan facebook api menggunakan intel xdk
Modul 7 integrasi aplikasi dengan facebook api menggunakan intel xdk
 
Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 8 - Men-submit Aplikasi ke...
Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 8 - Men-submit Aplikasi ke...Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 8 - Men-submit Aplikasi ke...
Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 8 - Men-submit Aplikasi ke...
 
372 Dasar Pengenalan Android Programming
372 Dasar Pengenalan Android Programming372 Dasar Pengenalan Android Programming
372 Dasar Pengenalan Android Programming
 

Similar to BAB VII - INSTALASI DAN KONFIGURASI APP INVENTOR

Pengujian keamanan aplikasi mobile - Zaki Akhmad
Pengujian keamanan aplikasi mobile - Zaki AkhmadPengujian keamanan aplikasi mobile - Zaki Akhmad
Pengujian keamanan aplikasi mobile - Zaki Akhmad
idsecconf
 
Live coding #2 maps
Live coding #2   mapsLive coding #2   maps
Live coding #2 maps
Mdeno Akbar
 
97674720 buku-mikrokontroler-atmega8535-dengan-codevisionavr
97674720 buku-mikrokontroler-atmega8535-dengan-codevisionavr97674720 buku-mikrokontroler-atmega8535-dengan-codevisionavr
97674720 buku-mikrokontroler-atmega8535-dengan-codevisionavr
Prayogy Pangestu
 

Similar to BAB VII - INSTALASI DAN KONFIGURASI APP INVENTOR (20)

Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 3 - Pengenalan Intel XDK D...
Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 3 - Pengenalan Intel XDK D...Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 3 - Pengenalan Intel XDK D...
Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 3 - Pengenalan Intel XDK D...
 
Membuat media pembelajaran berbasis android
Membuat media pembelajaran berbasis androidMembuat media pembelajaran berbasis android
Membuat media pembelajaran berbasis android
 
Modul 6 preview aplikasi pada device
Modul 6   preview aplikasi pada deviceModul 6   preview aplikasi pada device
Modul 6 preview aplikasi pada device
 
Fajar baskoro buku
Fajar baskoro bukuFajar baskoro buku
Fajar baskoro buku
 
Pengujian keamanan aplikasi mobile - Zaki Akhmad
Pengujian keamanan aplikasi mobile - Zaki AkhmadPengujian keamanan aplikasi mobile - Zaki Akhmad
Pengujian keamanan aplikasi mobile - Zaki Akhmad
 
Live coding #1
Live coding #1Live coding #1
Live coding #1
 
Pemrograman Mobile Android (Modul II)
Pemrograman Mobile Android (Modul II)Pemrograman Mobile Android (Modul II)
Pemrograman Mobile Android (Modul II)
 
Materi 5. uji coba aplikasi company profile
Materi 5. uji coba aplikasi company profileMateri 5. uji coba aplikasi company profile
Materi 5. uji coba aplikasi company profile
 
Makalah Mobile Programming
Makalah Mobile ProgrammingMakalah Mobile Programming
Makalah Mobile Programming
 
BAB VII - PENGENALAN IDE APP INVENTOR
BAB VII - PENGENALAN IDE APP INVENTORBAB VII - PENGENALAN IDE APP INVENTOR
BAB VII - PENGENALAN IDE APP INVENTOR
 
Materi 5 uji coba aplikasi game
Materi 5   uji coba aplikasi gameMateri 5   uji coba aplikasi game
Materi 5 uji coba aplikasi game
 
Pertemuan1 installasi eclipse
Pertemuan1 installasi eclipsePertemuan1 installasi eclipse
Pertemuan1 installasi eclipse
 
Pengenalan dasar android Programming
Pengenalan dasar android ProgrammingPengenalan dasar android Programming
Pengenalan dasar android Programming
 
Pengenalan dasar android programming
Pengenalan dasar android programming Pengenalan dasar android programming
Pengenalan dasar android programming
 
Live coding #2 maps
Live coding #2   mapsLive coding #2   maps
Live coding #2 maps
 
Membuat Aplikasi Todo dengan IGNSDK
Membuat Aplikasi Todo dengan IGNSDKMembuat Aplikasi Todo dengan IGNSDK
Membuat Aplikasi Todo dengan IGNSDK
 
97674720 buku-mikrokontroler-atmega8535-dengan-codevisionavr
97674720 buku-mikrokontroler-atmega8535-dengan-codevisionavr97674720 buku-mikrokontroler-atmega8535-dengan-codevisionavr
97674720 buku-mikrokontroler-atmega8535-dengan-codevisionavr
 
MudafiqRiyan - Membuat Installer Dari Java Desktop
MudafiqRiyan - Membuat Installer Dari Java DesktopMudafiqRiyan - Membuat Installer Dari Java Desktop
MudafiqRiyan - Membuat Installer Dari Java Desktop
 
Live coding andorid
Live coding andoridLive coding andorid
Live coding andorid
 
Kodular.pptx
Kodular.pptxKodular.pptx
Kodular.pptx
 

More from TeukuMahawira

Bab 5 Menyembah Allah Swt. sebagai Ungkapan Rasa Syukur
Bab 5 Menyembah Allah Swt. sebagai Ungkapan Rasa SyukurBab 5 Menyembah Allah Swt. sebagai Ungkapan Rasa Syukur
Bab 5 Menyembah Allah Swt. sebagai Ungkapan Rasa Syukur
TeukuMahawira
 
BUKU AJAR PEMROGRAMAN WEB DAN PERANGKAT BERGERAK DENGAN APP INVENTOR
BUKU AJAR PEMROGRAMAN WEB DAN PERANGKAT BERGERAK DENGAN APP INVENTORBUKU AJAR PEMROGRAMAN WEB DAN PERANGKAT BERGERAK DENGAN APP INVENTOR
BUKU AJAR PEMROGRAMAN WEB DAN PERANGKAT BERGERAK DENGAN APP INVENTOR
TeukuMahawira
 
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP InventorBahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
TeukuMahawira
 

More from TeukuMahawira (20)

Bab4
Bab4Bab4
Bab4
 
Soal tts pai
Soal tts paiSoal tts pai
Soal tts pai
 
Capacity building ict sekolah
Capacity building ict sekolahCapacity building ict sekolah
Capacity building ict sekolah
 
Bab II - Pernyataan Kondisi Bercabang
Bab II  -  Pernyataan Kondisi BercabangBab II  -  Pernyataan Kondisi Bercabang
Bab II - Pernyataan Kondisi Bercabang
 
Bab 5 Menyembah Allah Swt. sebagai Ungkapan Rasa Syukur
Bab 5 Menyembah Allah Swt. sebagai Ungkapan Rasa SyukurBab 5 Menyembah Allah Swt. sebagai Ungkapan Rasa Syukur
Bab 5 Menyembah Allah Swt. sebagai Ungkapan Rasa Syukur
 
Bab 4 Bersatu dalam Keragaman dan Demokrasi
Bab 4 Bersatu dalam Keragaman dan DemokrasiBab 4 Bersatu dalam Keragaman dan Demokrasi
Bab 4 Bersatu dalam Keragaman dan Demokrasi
 
Bab 3 Menghidupkan Nurani dengan Berpikir Kritis
Bab 3 Menghidupkan Nurani dengan Berpikir KritisBab 3 Menghidupkan Nurani dengan Berpikir Kritis
Bab 3 Menghidupkan Nurani dengan Berpikir Kritis
 
KATA PENGANTAR
KATA PENGANTARKATA PENGANTAR
KATA PENGANTAR
 
BAB XI - MEMBUAT APLIKASI LOGIN
BAB XI - MEMBUAT APLIKASI LOGINBAB XI - MEMBUAT APLIKASI LOGIN
BAB XI - MEMBUAT APLIKASI LOGIN
 
BAB X - MEMBUAT APLIKASI HELLO PUSS
BAB X - MEMBUAT APLIKASI HELLO PUSSBAB X - MEMBUAT APLIKASI HELLO PUSS
BAB X - MEMBUAT APLIKASI HELLO PUSS
 
BAB V - FORMAT KAITAN DAN FORMULIR PADA HALAMAN WEB
BAB V - FORMAT KAITAN DAN FORMULIR PADA HALAMAN WEBBAB V - FORMAT KAITAN DAN FORMULIR PADA HALAMAN WEB
BAB V - FORMAT KAITAN DAN FORMULIR PADA HALAMAN WEB
 
BAB IV - FORMAT TABEL DAN HALAMAN WEB
BAB IV - FORMAT TABEL DAN HALAMAN WEBBAB IV - FORMAT TABEL DAN HALAMAN WEB
BAB IV - FORMAT TABEL DAN HALAMAN WEB
 
BAB III - FORMAT TEXT DAN HALAMAN WEB
BAB III - FORMAT TEXT DAN HALAMAN WEBBAB III - FORMAT TEXT DAN HALAMAN WEB
BAB III - FORMAT TEXT DAN HALAMAN WEB
 
Bab2
Bab2Bab2
Bab2
 
BUKU AJAR PEMROGRAMAN WEB DAN PERANGKAT BERGERAK DENGAN APP INVENTOR
BUKU AJAR PEMROGRAMAN WEB DAN PERANGKAT BERGERAK DENGAN APP INVENTORBUKU AJAR PEMROGRAMAN WEB DAN PERANGKAT BERGERAK DENGAN APP INVENTOR
BUKU AJAR PEMROGRAMAN WEB DAN PERANGKAT BERGERAK DENGAN APP INVENTOR
 
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP InventorBahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
 
Topologi
TopologiTopologi
Topologi
 
Setting Dasar Mikrotik
Setting Dasar MikrotikSetting Dasar Mikrotik
Setting Dasar Mikrotik
 
Pemograman PHP Dasar
Pemograman PHP DasarPemograman PHP Dasar
Pemograman PHP Dasar
 
Apa itu html
Apa itu htmlApa itu html
Apa itu html
 

Recently uploaded

Asimilasi Masyarakat Cina Dengan Orang Melayu di Kelantan (Cina Peranakan Kel...
Asimilasi Masyarakat Cina Dengan Orang Melayu di Kelantan (Cina Peranakan Kel...Asimilasi Masyarakat Cina Dengan Orang Melayu di Kelantan (Cina Peranakan Kel...
Asimilasi Masyarakat Cina Dengan Orang Melayu di Kelantan (Cina Peranakan Kel...
luqmanhakimkhairudin
 

Recently uploaded (20)

MESYUARAT KURIKULUM BIL 1/2024 SEKOLAH KEBANGSAAN SRI SERDANG
MESYUARAT KURIKULUM BIL 1/2024 SEKOLAH KEBANGSAAN SRI SERDANGMESYUARAT KURIKULUM BIL 1/2024 SEKOLAH KEBANGSAAN SRI SERDANG
MESYUARAT KURIKULUM BIL 1/2024 SEKOLAH KEBANGSAAN SRI SERDANG
 
MODUL AJAR BAHASA INDONESIA KELAS 5 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INDONESIA KELAS 5 KURIKULUM MERDEKA.pdfMODUL AJAR BAHASA INDONESIA KELAS 5 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INDONESIA KELAS 5 KURIKULUM MERDEKA.pdf
 
RENCANA + Link2 MATERI Training _"SISTEM MANAJEMEN MUTU (ISO 9001_2015)".
RENCANA + Link2 MATERI Training _"SISTEM MANAJEMEN MUTU (ISO 9001_2015)".RENCANA + Link2 MATERI Training _"SISTEM MANAJEMEN MUTU (ISO 9001_2015)".
RENCANA + Link2 MATERI Training _"SISTEM MANAJEMEN MUTU (ISO 9001_2015)".
 
MODUL AJAR IPAS KELAS 5 KURIKULUM MERDEKA.pdf
MODUL AJAR IPAS KELAS 5 KURIKULUM MERDEKA.pdfMODUL AJAR IPAS KELAS 5 KURIKULUM MERDEKA.pdf
MODUL AJAR IPAS KELAS 5 KURIKULUM MERDEKA.pdf
 
Materi Bab 6 Algoritma dan bahasa Pemrograman
Materi Bab 6 Algoritma dan bahasa  PemrogramanMateri Bab 6 Algoritma dan bahasa  Pemrograman
Materi Bab 6 Algoritma dan bahasa Pemrograman
 
MODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdfMODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INGGRIS KELAS 6 KURIKULUM MERDEKA.pdf
 
Asimilasi Masyarakat Cina Dengan Orang Melayu di Kelantan (Cina Peranakan Kel...
Asimilasi Masyarakat Cina Dengan Orang Melayu di Kelantan (Cina Peranakan Kel...Asimilasi Masyarakat Cina Dengan Orang Melayu di Kelantan (Cina Peranakan Kel...
Asimilasi Masyarakat Cina Dengan Orang Melayu di Kelantan (Cina Peranakan Kel...
 
Skenario Lokakarya 2 Pendidikan Guru Penggerak
Skenario Lokakarya 2 Pendidikan Guru PenggerakSkenario Lokakarya 2 Pendidikan Guru Penggerak
Skenario Lokakarya 2 Pendidikan Guru Penggerak
 
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdfProv.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
 
BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024
BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024
BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024
 
PPT BAHASA INDONESIA KELAS 1 SEKOLAH DASAR
PPT BAHASA INDONESIA KELAS 1 SEKOLAH DASARPPT BAHASA INDONESIA KELAS 1 SEKOLAH DASAR
PPT BAHASA INDONESIA KELAS 1 SEKOLAH DASAR
 
SISTEM SARAF OTONOM_.SISTEM SARAF OTONOM
SISTEM SARAF OTONOM_.SISTEM SARAF OTONOMSISTEM SARAF OTONOM_.SISTEM SARAF OTONOM
SISTEM SARAF OTONOM_.SISTEM SARAF OTONOM
 
Sudut-sudut Berelasi Trigonometri - Sudut-sudut Berelasi Trigonometri
Sudut-sudut Berelasi Trigonometri - Sudut-sudut Berelasi TrigonometriSudut-sudut Berelasi Trigonometri - Sudut-sudut Berelasi Trigonometri
Sudut-sudut Berelasi Trigonometri - Sudut-sudut Berelasi Trigonometri
 
Webinar 1_Pendidikan Berjenjang Pendidikan Inklusif.pdf
Webinar 1_Pendidikan Berjenjang Pendidikan Inklusif.pdfWebinar 1_Pendidikan Berjenjang Pendidikan Inklusif.pdf
Webinar 1_Pendidikan Berjenjang Pendidikan Inklusif.pdf
 
PPT kerajaan islam Maluku Utara PPT sejarah kelas XI
PPT kerajaan islam Maluku Utara PPT sejarah kelas XIPPT kerajaan islam Maluku Utara PPT sejarah kelas XI
PPT kerajaan islam Maluku Utara PPT sejarah kelas XI
 
AKSI NYATA Numerasi Meningkatkan Kompetensi Murid_compressed (1) (1).pptx
AKSI NYATA  Numerasi  Meningkatkan Kompetensi Murid_compressed (1) (1).pptxAKSI NYATA  Numerasi  Meningkatkan Kompetensi Murid_compressed (1) (1).pptx
AKSI NYATA Numerasi Meningkatkan Kompetensi Murid_compressed (1) (1).pptx
 
Informatika Latihan Soal Kelas Tujuh.pptx
Informatika Latihan Soal Kelas Tujuh.pptxInformatika Latihan Soal Kelas Tujuh.pptx
Informatika Latihan Soal Kelas Tujuh.pptx
 
Aksi Nyata profil pelajar pancasila.pptx
Aksi Nyata profil pelajar pancasila.pptxAksi Nyata profil pelajar pancasila.pptx
Aksi Nyata profil pelajar pancasila.pptx
 
Kegiatan Komunitas Belajar dalam sekolah .pptx
Kegiatan Komunitas Belajar dalam sekolah .pptxKegiatan Komunitas Belajar dalam sekolah .pptx
Kegiatan Komunitas Belajar dalam sekolah .pptx
 
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
 

BAB VII - INSTALASI DAN KONFIGURASI APP INVENTOR

  • 1. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 1 BAB VII - INSTALASI DAN KONFIGURASI APP INVENTOR Tujuan Pembelajaran: Setelah mempelajari bab ini siswa diharapkan dapat mampu : 1. Memahami tentang aplikasi App Inventor 2. Menjelaskan bagaimana menyiapkan App Inventor 3. Menerapakan persiapan untuk membangun aplikasi App Inventor adalah aplikasi berbasis cloud, artinya Anda dapat membangun aplikasi dengan menggunakan web browser anda. Situs web ini menawarkan semua dukungan yang Anda perlukan untuk mempelajari cara membuat aplikasi Anda sendiri. Kunjungi website ai2.appinventor.mit.edu. Selain itu App Inventor juga bisa digunakan dalam bentuk offline bagi yang tidak mempunya koneksi internet selama bekerja membangun aplikasi perangkat bergerak Android. A. Menyiapkan App Inventor Anda dapat menyiapkan App Inventor dan mulai membangun aplikasi dalam hitungan menit. Designer dan Block Editor berjalan sepenuhnya di browser (alias cloud). Anda memiliki dua opsi untuk menyiapkan App Inventor Anda, diantaranya: OPSI 1: Anda menggunakan perangkat bergerak Android atau Komputer dan Anda memiliki koneksi internet. Anda dapat mulai membuat aplikasi tanpa mengunduh perangkat lunak apa pun ke komputer Anda. Anda hanya butuh menginstal App Inventor Companion di perangkat Anda.  Hubungkan Ponsel atau Tablet Anda melalui WiFi.  Anda dapat menggunakan App Inventor tanpa mengunduh apa pun ke komputer Anda!  Anda akan mengembangkan aplikasi di situs web: ai2.appinventor.mit.edu.  Untuk melakukan pengujian langsung pada perangkat Android Anda cukup instal aplikasi AI Companion di ponsel atau tablet Android Anda.
  • 2. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 2  Setelah Ai Companion diinstal, Anda dapat membuka proyek di App Inventor di web, buka Companion di perangkat bergerak Anda untuk live testing aplikasi yang sudah dibuat.  Dan Anda dapat menjalankan aplikasi Anda saat membangunnya, seperti yang terlihat pada gambar dibawah ini. Gambar 2.1. Membangun Aplikasi dengan Perangkat Bergerak Android dan Koneksi internet Langkah-langkah berikut akan memandu Anda untuk tahapan instalasi AI Companion Langkah 1: Unduh dan pasang Aplikasi MIT AI2 Companion di ponsel Anda.  Buka pemindai kode QR perangkat Anda dan pindai kode QR di sebelah kiri di bawah ini untuk mengunduh Aplikasi Companion dari Play Store.  Jika Anda tidak dapat menggunakan Play Store, gunakan kode QR di sebelah kanan untuk mengunduh Aplikasi Companion langsung ke ponsel Anda. Play Store Direkomendasi: Otomatis updates Pindai kode QR ini (atau klik tautan ini) untuk mendapatkan aplikasi dari Play Store APK File Manual Updates Pindai kode QR ini (atau klik tautan ini) untuk mengunduh aplikasi secara langsung  Jika Anda membutuhkan pemindai kode QR, Anda bisa mendapatkannya dengan mengunduh di Play Store (mis., ZXing).  Setelah mengunduh, ikuti petunjuk untuk menginstal aplikasi Companion pada perangkat Anda.
  • 3. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 3  Anda hanya perlu menginstal Companion MIT AI2 sekali saja, dan kemudian meninggalkannya di ponsel atau tablet Anda setiap kali Anda menggunakan App Inventor. Keterangan: 1. Jika Anda tidak dapat menggunakan kode QR, Anda masih bisa menginstal MIT2 AI Companion di ponsel atau tablet Anda. Gunakan browser Web di perangkat Anda untuk pergi ke Google Play Store, cari MIT2 Companion di Google Play Store. Setelah Anda menemukan Companion, klik tombol INSTALL untuk aplikasi Al Companion. Langkah 2: Sambungkan komputer dan perangkat bergerak Anda ke Jaringan WiFi yang sama. Setelah proses intalasi Companion selesai maka App Inventor akan secara otomatis menampilkan aplikasi yang sedang Anda buat, tetapi hanya jika komputer Anda (menjalankan App Inventor) dan perangkat bergerak Android Anda (yang menjalankan Companion) terhubung ke Jaringan WiFi yang sama Langkah 3: Buka App Inventor dan buka proyek (atau create a new one -- use Project > Start New Project dan beri nama proyek Anda).  Kemudian Pilih "Connect" dan "AI Companion" dari menu atas di browser AI2: Gambar Menu AI2 di Browser  Dialog dengan kode QR akan muncul di layar PC Anda. Di perangkat bergerak Anda, jalankan aplikasi MIT App Companion sama seperti Anda melakukan aplikasi apa pun. Kemudian klik tombol "Scan QR code" pada Companion atau dengan memasukkan kode karakter string yang muncul di aplikasi App Inventor Anda dan pindai kode di jendela App Inventor, seperti yang terlihat pada gambar dibawah ini :
  • 4. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 4  Dalam beberapa detik, Anda akan melihat aplikasi yang Anda buat di perangkat bergerak Anda. Ini akan diperbarui saat Anda membuat perubahan pada desain dan blok Anda, fitur ini yang disebut "live testing". OPSI 2: Anda menggunakan perangkat bergerak Android atau Komputer dan Anda tidak memiliki koneksi internet. Saat Anda menggunakan App Inventor dengan perangkat bergerak android atau komputer, perangkat itu berkomunikasi dengan perangkat lunak App Inventor yang berjalan di jendela browser komputer Anda. Komunikasi ini dikelola oleh Aplikasi AI Companion yang berjalan di perangkat. Companion dapat berkomunikasi dengan komputer Anda melalui koneksi internet secara langsung. Namun, ada beberapa lingkungan di mana koneksi internet tidak berfungsi. Misal di beberapa hotel, pusat konferensi, dan sekolah, yang mengkonfigurasi jaringan internet mereka untuk melarang perangkat di jaringan untuk saling berkomunikasi. Anda harus menginstal perangkat lunak driver android untuk windows pada komputer Anda sehingga Anda dapat terhubung ke perangkat bergerak Android Anda melalui USB. Opsi Koneksi USB bisa rumit, terutama pada Windows. Gunakan ini sebagai pilihan terakhir. Anda masih dapat menggunakan App Inventor dengan perangkat bergerak atau komputer walaupun Anda tidak mempunya koneksi internet dengan cara menghubungkan komputer dengan perangkat bergerak android menggunakan kabel USB, seperti yang terlihat pada gambar dibawah ini:
  • 5. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 5 Gambar 2.2. Membangun Aplikasi dengan Menggunakan USB Perangkat Bergerak Menyiapkan koneksi USB, terutama pada mesin Windows akan membutuhkan perangkat lunak driver khusus untuk terhubung ke perangkat Android. Akibatnya, Anda mungkin harus mencari di Web untuk menemukan driver yang sesuai untuk perangkat bergerak Anda. Berikut adalah langkah-langkah untuk mulai menggunakan App Inventor dengan kabel USB: Langkah 1: Instal Perangkat Lunak JAVA. App Inventor dikembangkan dengan Bahasa pemrograman JAVA, jadi sangat penting untuk Anda menginstall Java Development KIT (JDK) terlebih dahulu yang dapat didownload diwebsite resmi Java dan gratis. Setelah instalasi selesai tahap berikutnya adalah melakukan konfigurasi setting path JAVA Langkah 2: Konfigurasi Setting Path JAVA Setelah JDK terinstall, langkah berikutnya adalah seting path JAVA nya, langkah- langkahnya: 1. Control Panel -> System -> Advance System Setting 2. Environment Variabel 3. Pada System Variabel, Klik New dan ketikkan JAVA_HOME pada Variabel Name 4. Pada Variabel Value, Klik dimana file JDK berada. Contoh: "C:Program FilesJavajdk12.2.0" (tergantung jenis versi JDK yang saudara download) 5. Pada Sstem Variabel. Klik Path dan Klik Edit, pada Variabel Value setelah bagian “;” dengan mengetik "C:Program FilesJavajdk12.2.0" (tergantung jenis versi JDK yang saudara download) 6. Klik OK dan restart computer.
  • 6. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 6 Langkah 3: Install App Inventor Ultimate 2 Portable 1. Download software Instalasi App Inventor Ultimate 2 Portable yang dikembangkan oleh Krupong yang merupakan App Inventor versi Offline di https://sourceforge.net /projects/ai2u/ 2. Pilih AI2U-portable-v4.6-64bit.zip kalau Windows sudah 64bit, atau pilih AI2U- portable-v4.6-32bit.zip kalau Windows masih 32bit. 3. Ekstrak file yang sudah di download tadi ke salah satu folder sampai semua file ter-ekstrak 4. Buka file folder hasil Ekstrak file tadi, buat shortcut pada file application-nya (icon bulat dengan tulisan CD) dengan cara klik kanan mouse “Create shortcut”, missal taruk di desktop 5. Klik File shortcut yang ber icon bulat dengan tulisan CD tadi sehingga tampil seperti gambar dibawah ini : 6. Klik All AI2U Server atau DevServer 7. Klik Start Invent 8. Selanjutnya akan muncul Web Browser dan App Inventor akan otomatis aktif seperti versi onlinenya. Direkomendasikan menggunakan web browser Google Chrome untuk kompatilitas dan kestabilan sewaktu mendevelop aplikasi 9. Masukkan email Gmail Anda dan password dan klik Login 10. Berikutnya Anda akan masuk pada user Interface App Inventor versi Offline yang sama dengan Onlinenya. Anda sekarang siap untuk membangun aplikasi pertama Anda!
  • 7. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 7 RANGKUMAN 1. App Inventor adalah aplikasi berbasis cloud, artinya Anda dapat membangun aplikasi dengan menggunakan web browser anda. Selain itu App Inventor juga bisa digunakan dalam bentuk offline bagi yang tidak mempunya koneksi internet selama bekerja membangun aplikasi perangkat bergerak Android. 2. Ada 2 opsi untuk menggunakan App Inventor yaitu : a. Anda menggunakan perangkat bergerak Android atau Komputer dan Anda memiliki koneksi internet. b. Anda menggunakan perangkat bergerak Android atau Komputer dan Anda tidak memiliki koneksi internet. 3. Untuk melakukan pengujian langsung pada perangkat Android Anda cukup instal aplikasi AI Companion di ponsel atau tablet Android Anda. 4. Setelah Ai Companion diinstal, Anda dapat membuka proyek di App Inventor di web, buka Companion di perangkat bergerak Anda untuk live testing aplikasi yang sudah dibuat. 5. Berikut adalah langkah-langkah untuk mulai menggunakan App Inventor dengan kabel USB: a. Install perangkat lunak JDK Java yang bisa didownload dari website b. Konfigurasi setting path JDK Java yang sudah di install tadi. c. Install App Inventor Ultimate 2 Portable yang bisa di download dari website https://sourceforge.net /projects/ai2u/