App Inventor -...

32
App Inventor Karka Dwintaputri S, ST., MMSI

Transcript of App Inventor -...

Page 1: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

App Inventor

Kartika Dwintaputri S, ST., MMSI

Page 2: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Apa itu MIT App Inventor?

● MIT App Inventor adalah aplikasi inovatif yangdikembangan Google dan MIT untukmengenalkan dan mengembangkanpemrograman android denganmentrasformasikan bahasa pemrograman yangkompleks berbasis teks menjadi berbasis visual(drag and drop) berbentuk blok-blok.

Page 3: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Membuat Projek Baru

http://appinventor.mit.edu/

Page 4: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Membuat Projek Baru

Page 5: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

● Login ke dalam akun gmail

● Pilih “I Accept the Term of Services”

Membuat Projek Baru

Page 6: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Membuat Projek Baru

Page 7: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Membuat Projek Baru

Page 8: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Membuat Projek Baru

Page 9: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Membuat Projek Baru

Page 10: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Design View terdiri dari lima komponen dasar:

● Palette

● Viewer

● Component

● Media

● Properties

Mengenal Design View

Page 11: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Pallete

Palette terdiri dari objek apasaja yang bisa andagunakan ke dalam aplikasianda. Palette terdiri daribeberapa grup, semuanyadikelompokkan ke dalamsatu grup jika memilikitema/fungsi yang sama.

Mengenal Design View

Page 12: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Viewer

Terdiri dari tampilantelepon selular dankomponen–komponenyang bisa di klik.

Mengenal Design View

Page 13: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Component

● Terdiri dari daftarkomponen apa saja yangtelah ditambahkan kedalam projek.

● Tampilannya berupasusunan atau daftar yangmemudahkan kita untukmengatur komponen ataumelihat apa saja yangberbentuk seperti direktori.

Mengenal Design View

Page 14: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Media

● Terletak di bawah darikolom Component.

● Digunakan untuk mengatursemua media komponenuntuk mendukung aplikasi.

● Gambar, clip art, musik,dan video.

● Tidak boleh melebihi 5 MB

Mengenal Design View

Page 15: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Property

● Mengatur komponenbagaimana diaberinteraksi denganpengguna maupun dengankomponen lain, ataubagaimana tampilannya.

● Setiap komponen memilikikolom properties yangberbeda-beda.

Mengenal Design View

Page 16: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Code block pada App Inventor digunakan untukmelakukan atau mengatur jalannya program. Code blockterdiri dari beberapa grup yang memilki fungsi berbeda-beda. Grup yang ada pada Code block Antara lain:

● Control blocks

● Logic blocks

● Math blocks

● Text blocks

● List blocks

Mengenal Code Blocks

● Colors blocks

● Variables blocks

● Procedure blocks

Page 17: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Mengenal Code Blocks

Page 18: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Mengenal Code Blocks

Page 19: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Control Blocks

● Code blocks padapada grup inidigunakan untukmengatur bagaimanaalur aplikasi yang kitabuat itu berjalan.

Mengenal Code Blocks

Page 20: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Logic Blocks

● Nilai boolean. Biasanyadigunakan untukmenentukan kondisi

● Operator. Digunakan untukmemanipulasi nilai boolean.

● Jadi logic block biasanyaberhubungan dengan if elsedan while yang beradadalam control blocks.

Mengenal Code Blocks

Page 21: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Math Blocks

● Block ini digunakanuntuk memanipulasiangka dan memasuk-kan angka.

Mengenal Code Blocks

Page 22: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Text Blocks

● Block yang beradadalam grup inidigunakan untukmemanipulasi,mengolah, danmenyeleksi argumendalam bentuk text.

Mengenal Code Blocks

Page 23: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

List Blocks

● Block yang beradadalam grup ini di-gunakan untuk me-manipulasi, meng-olah, dan menyeleksilist atau kumpulandari nilai (variabel).

Mengenal Code Blocks

Page 24: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Colors Blocks

● Block yang beradadalam grup inidigunakan untukmemanipulasi danmengolah warna.

Mengenal Code Blocks

Page 25: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Variable Blocks

● Block yang beradadalam grup inidigunakan untukmemanipulasi danmengolah variabel.

Mengenal Code Blocks

Page 26: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Procedure Blocks

● Block yang beradadalam grup inidigunakan untukmembuat danmemanggilprocedure, jadi kitatidak akan menulisulang kode yangsama.

Mengenal Code Blocks

Page 27: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

Instalasi/Ekspor Aplikasi

Page 28: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

● Testing– AI Companion

– Emulator

– USB

● Building– Download APK

Instalasi/Ekspor Aplikasi

Page 29: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Testing: AI Companion

● Requirement– Komputer

– Perangkat Android

– Koneksi Wi-Fi

● Tahap– Instal aplikasi “MIT AI2 Companion” di PlayStore

– Koneksikan perangkat android dan komputer pada Wi-fi yang sama

– Pada aplikasi App Inventor, pilih menu Connect – AI Companion

– Scan QRCode dengan menggunakan perangkat Android

Instalasi/Ekspor Aplikasi

Page 30: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Testing: Emulator

● Requirement– Komputer

● Tahap– Instal aplikasi desktop App Inventor

– Jalankan aplikasi desktop App Inventor

– Pada aplikasi web App Inventor, pilih menuConnect – Emulator

Instalasi/Ekspor Aplikasi

Page 31: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Testing: USB

● Requirement– Komputer

– Perangkat Android

– Kabel USB

● Tahap– Instal aplikasi desktop App Inventor

– Jalankan aplikasi desktop App Inventor

– Atur pengaturan USB pada perangkat Android “USB Debugging ON”

– Pada aplikasi web App Inventor, pilih menu Connect – USB

Instalasi/Ekspor Aplikasi

Page 32: App Inventor - kartika_ds.staff.gunadarma.ac.idkartika_ds.staff.gunadarma.ac.id/Downloads/files/49134/Pengenalan+App... · Terdiri dari daftar komponen apa saja yang telah ditambahkan

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id

Building: Scan QRCode

● APK dapat didownload dengan memindai QRCodeyang telah disediakan ketika memilih menuBuild – Provide QRCode for Apk

Building: Simpan ke komputer

● APK dapat disimpan ke dalam komputer Anda denganmemilih menu Build – Save .apk to My Computer

Instalasi/Ekspor Aplikasi