SlideShare une entreprise Scribd logo
1  sur  4
Mengenal App Inventor lebih dalam (2)
Jendela Desainer

Setelah sebelumnya kita mengenal workspace pada App Inventor, selanjutnya kita akan mengenal
beberapa hal penting secara detail pada Jendela Desainer.
    1. Pada jendela Desainer ketika kita memasukkan komponen kedalam Viewer maka ada
       komponen yang akan masuk kedalam layar Viewer (Visible Component) dan ada juga
       komponen yang secara otomatis akan masuk dibawah layar viewer (Non Visual
       Component). Komponen yang termasuk dalam Visible Component berarti akan terlihat pada
       layar aplikasi, sedangkan komponen Non-visible Component tidak akan terlihat pada layar
       ketika aplikasi dijalankan. Pada gambar, tombol Button OK (Button) termasuk Visible
       Component, sedangkan TinyDB1 merupakan Non-visible Component.




                                       Gb1. Visible-Non-Visi




                                                                                     1 Dari 4
Iki Mazadi http://indo-android.blogspot.com
2. Jika ingin mengubah properti dari suatu komponen, maka kita bisa klik pada komponen
      tersebut, dan ubah melalui jendela properties. Misalnya mengubah background warna dari
      tombol (button).




                                              Gb2. Properties

   3. Untuk mengatur tata-letak komponen pada layar, maka digunakan komponen
      ScreenArrangement , terdapat tiga macam pengaturan yaitu :
         a. HorisontalArrangement : Untuk mengatur komponen secara mendatar
         b. TableArrangement         : Untuk mengatur komponen pada sebuah tabel
         c. VerticalArrangement : Untuk mengatur komponen secara tegaklurus
      Kita bisa mengatur lebar dan tinggi dari masing-masing propertisnya, sedangkan khusus
      untuk TableArrangement bisa diatur jumlah kolomnya.




                                       Gb3. ScreenArrangement


                                                                                   2 Dari 4
Iki Mazadi http://indo-android.blogspot.com
4. Terdapat komponen spesial untuk membuat aplikasi yang ditujukan khusus untuk robot
      Lego NXT. Hampir seluruh fungsi robot bisa dikendalikan, dengan komponen-komponen
      ini. Yaitu beberapa sensor, dan Direct Command (Perintah), maupun untuk mengendalikan
      Drive (Arah).




                                          Gb.3 Lego_NXT

   5. Pada menu Package for Phone, terdapat tiga macam pilihan yaitu :
         a. Show Barcode                 : Untuk membuat barcode dari aplikasi yang dibuat
         b. Download to This Computer : Mendownload aplikasi yang dibuat ke dalam
            komputer, kemudian bisa dicopy ke HP Android untuk dicoba.
         c. Download to Connected Computer : Apabila kita mengkoneksikan HP Android
            semenjak awal, maka bisa langsung mencoba menjalankan aplikasi di HP.




                                      Gb.4 Package_Aplikasi


Buat yang belum pernah mengenal App Inventor, App Inventor adalah satu Tool webbased (Cloud)
untuk membuat Aplikasi pada platform Android yang ditujukan untuk semua orang. Memakainya
kita bisa membuat aplikasi android tanpa kode sama sekali.

Untuk menggunakan App Inventor caranya :
   1. Memiliki account gmail



                                                                                   3 Dari 4
Iki Mazadi http://indo-android.blogspot.com
2. Download & Install Java dari link ini http://www.java.com/en/download/manual.jsp pilih
      sesuai dengan sistem operasi anda, misal untuk windows pilih versi untuk windows
   3. Masuk ke http://beta.appinventor.mit.edu dan pilih menu learn > setup > untuk PC dengan
      sistem operasi windows klik pada menu Instructions for Windows dan kemudian
      download installer atau bisa langsung diakses ke
       http://dl.google.com/dl/appinventor/installers/windows/appinventor_setup_installer_v_1_2.exe
      kemudian install installer ini.
   4. Apabila sudah terinstall semua, untuk memulainya silahkan Masuk kembali ke
      http://beta.appinventor.mit.edu

Untuk menguasai App Inventor, ada tiga rumus yang paling penting yaitu pertama berlatih, kedua
berlatih dan ketiga berlatih … 

Iki Mazadi
Founder Indo Android Indonesia http://indo-android.blogspot.com
Founder Gobaksodor Interactive http://www.gobaksodor.com

*Artikel ini dipublikasikan di Tabloid PC Plus 2012




                                                                                                  4 Dari 4
Iki Mazadi http://indo-android.blogspot.com

Contenu connexe

Tendances

Pengenalan mit app inventor
Pengenalan mit app inventorPengenalan mit app inventor
Pengenalan mit app inventorakhmadalimudin
 
Panduan Instalasi Android Studio
Panduan Instalasi Android StudioPanduan Instalasi Android Studio
Panduan Instalasi Android StudioAgus Haryanto
 
Membuat aplikasi-android-menggunakan-mit-app-inventor
Membuat aplikasi-android-menggunakan-mit-app-inventorMembuat aplikasi-android-menggunakan-mit-app-inventor
Membuat aplikasi-android-menggunakan-mit-app-inventorASIM WIGUNA
 
11 presentasi model_bisnis_open_source
11 presentasi model_bisnis_open_source11 presentasi model_bisnis_open_source
11 presentasi model_bisnis_open_sourceRusmanto Maryanto
 
BAB VII - PENGENALAN IDE APP INVENTOR
BAB VII - PENGENALAN IDE APP INVENTORBAB VII - PENGENALAN IDE APP INVENTOR
BAB VII - PENGENALAN IDE APP INVENTORTeukuMahawira
 
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 lightAgus Haryanto
 
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...Muhammad Yusuf
 
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 xdkMuhammad Yusuf
 
372 Dasar Pengenalan Android Programming
372 Dasar Pengenalan Android Programming372 Dasar Pengenalan Android Programming
372 Dasar Pengenalan Android ProgrammingWirat Mojo
 
Membuat sendiri aplikasi android
Membuat sendiri aplikasi androidMembuat sendiri aplikasi android
Membuat sendiri aplikasi androidMdeno Akbar
 
Membuat aplikasi quiz android dengan Intel XDK
Membuat aplikasi quiz android dengan Intel XDKMembuat aplikasi quiz android dengan Intel XDK
Membuat aplikasi quiz android dengan Intel XDKNur Rohman
 
Ebook tutorial pemrograman android
Ebook tutorial pemrograman android Ebook tutorial pemrograman android
Ebook tutorial pemrograman android Candra Adi Putra
 
Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 4 - Pengembangan Aplikasi ...
Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 4 - Pengembangan Aplikasi ...Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 4 - Pengembangan Aplikasi ...
Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 4 - Pengembangan Aplikasi ...Muhammad Yusuf
 
Membuat Aplikasi Android Keren
Membuat Aplikasi Android KerenMembuat Aplikasi Android Keren
Membuat Aplikasi Android KerenHangga Aji Sayekti
 
Modul 5 pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2
Modul 5   pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2Modul 5   pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2
Modul 5 pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2Muhammad Yusuf
 
Modul 6 preview aplikasi pada device
Modul 6   preview aplikasi pada deviceModul 6   preview aplikasi pada device
Modul 6 preview aplikasi pada deviceMuhammad Yusuf
 
BAB IX - MEMULAI APP INVENTOR
BAB IX - MEMULAI APP INVENTORBAB IX - MEMULAI APP INVENTOR
BAB IX - MEMULAI APP INVENTORTeukuMahawira
 
Memulai coding-android-dengan-android-studio
Memulai coding-android-dengan-android-studioMemulai coding-android-dengan-android-studio
Memulai coding-android-dengan-android-studioslempase
 
Google translate api
Google translate apiGoogle translate api
Google translate apipebry
 
Fundamental android application development
Fundamental android application developmentFundamental android application development
Fundamental android application developmentGoogle
 

Tendances (20)

Pengenalan mit app inventor
Pengenalan mit app inventorPengenalan mit app inventor
Pengenalan mit app inventor
 
Panduan Instalasi Android Studio
Panduan Instalasi Android StudioPanduan Instalasi Android Studio
Panduan Instalasi Android Studio
 
Membuat aplikasi-android-menggunakan-mit-app-inventor
Membuat aplikasi-android-menggunakan-mit-app-inventorMembuat aplikasi-android-menggunakan-mit-app-inventor
Membuat aplikasi-android-menggunakan-mit-app-inventor
 
11 presentasi model_bisnis_open_source
11 presentasi model_bisnis_open_source11 presentasi model_bisnis_open_source
11 presentasi model_bisnis_open_source
 
BAB VII - PENGENALAN IDE APP INVENTOR
BAB VII - PENGENALAN IDE APP INVENTORBAB VII - PENGENALAN IDE APP INVENTOR
BAB VII - PENGENALAN IDE 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
 
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...
 
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
 
372 Dasar Pengenalan Android Programming
372 Dasar Pengenalan Android Programming372 Dasar Pengenalan Android Programming
372 Dasar Pengenalan Android Programming
 
Membuat sendiri aplikasi android
Membuat sendiri aplikasi androidMembuat sendiri aplikasi android
Membuat sendiri aplikasi android
 
Membuat aplikasi quiz android dengan Intel XDK
Membuat aplikasi quiz android dengan Intel XDKMembuat aplikasi quiz android dengan Intel XDK
Membuat aplikasi quiz android dengan Intel XDK
 
Ebook tutorial pemrograman android
Ebook tutorial pemrograman android Ebook tutorial pemrograman android
Ebook tutorial pemrograman android
 
Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 4 - Pengembangan Aplikasi ...
Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 4 - Pengembangan Aplikasi ...Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 4 - Pengembangan Aplikasi ...
Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 4 - Pengembangan Aplikasi ...
 
Membuat Aplikasi Android Keren
Membuat Aplikasi Android KerenMembuat Aplikasi Android Keren
Membuat Aplikasi Android Keren
 
Modul 5 pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2
Modul 5   pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2Modul 5   pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2
Modul 5 pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2
 
Modul 6 preview aplikasi pada device
Modul 6   preview aplikasi pada deviceModul 6   preview aplikasi pada device
Modul 6 preview aplikasi pada device
 
BAB IX - MEMULAI APP INVENTOR
BAB IX - MEMULAI APP INVENTORBAB IX - MEMULAI APP INVENTOR
BAB IX - MEMULAI APP INVENTOR
 
Memulai coding-android-dengan-android-studio
Memulai coding-android-dengan-android-studioMemulai coding-android-dengan-android-studio
Memulai coding-android-dengan-android-studio
 
Google translate api
Google translate apiGoogle translate api
Google translate api
 
Fundamental android application development
Fundamental android application developmentFundamental android application development
Fundamental android application development
 

Similaire à MENYELAMI APPI

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...Muhammad Yusuf
 
Study Jam Mobile 4 - Introduction to Flutter.pdf
Study Jam Mobile 4 - Introduction to Flutter.pdfStudy Jam Mobile 4 - Introduction to Flutter.pdf
Study Jam Mobile 4 - Introduction to Flutter.pdfanjarmath
 
Surya univ appinventor-bagi-pemula-by-ahmad-fajar-prasetiyo
Surya univ appinventor-bagi-pemula-by-ahmad-fajar-prasetiyoSurya univ appinventor-bagi-pemula-by-ahmad-fajar-prasetiyo
Surya univ appinventor-bagi-pemula-by-ahmad-fajar-prasetiyoArian Bayu Sugianto
 
BAB VII - INSTALASI DAN KONFIGURASI APP INVENTOR
BAB VII - INSTALASI DAN KONFIGURASI APP INVENTORBAB VII - INSTALASI DAN KONFIGURASI APP INVENTOR
BAB VII - INSTALASI DAN KONFIGURASI APP INVENTORTeukuMahawira
 
Live coding andorid
Live coding andoridLive coding andorid
Live coding andoridArif Huda
 
Pertemuan 7 camera
Pertemuan 7 cameraPertemuan 7 camera
Pertemuan 7 cameraheriakj
 
BAB VI - PENGENALAN APPINVENTOR
BAB VI - PENGENALAN APPINVENTORBAB VI - PENGENALAN APPINVENTOR
BAB VI - PENGENALAN APPINVENTORTeukuMahawira
 
App inventor true offline
App inventor true offlineApp inventor true offline
App inventor true offlineIki Mazadi
 
Aplikasi pengenalan sio hewan menggunakan metaio creator berbasis augmented r...
Aplikasi pengenalan sio hewan menggunakan metaio creator berbasis augmented r...Aplikasi pengenalan sio hewan menggunakan metaio creator berbasis augmented r...
Aplikasi pengenalan sio hewan menggunakan metaio creator berbasis augmented r...Olbers Letfaar
 
Module Delphi
Module DelphiModule Delphi
Module Delphiborncb
 
Laporan tugas akhir
Laporan tugas akhirLaporan tugas akhir
Laporan tugas akhirahmadranddy
 
Laporan tugas akhir
Laporan tugas akhirLaporan tugas akhir
Laporan tugas akhirahmadranddy
 
ModulFlutter-1.pptx
ModulFlutter-1.pptxModulFlutter-1.pptx
ModulFlutter-1.pptxhanadi40
 
Laporan pemrograman visual
Laporan pemrograman visualLaporan pemrograman visual
Laporan pemrograman visualFenty Hidayati
 
Dasar pemrograman-visual-basic1
Dasar pemrograman-visual-basic1Dasar pemrograman-visual-basic1
Dasar pemrograman-visual-basic1hasznud89
 

Similaire à MENYELAMI APPI (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...
 
Study Jam Mobile 4 - Introduction to Flutter.pdf
Study Jam Mobile 4 - Introduction to Flutter.pdfStudy Jam Mobile 4 - Introduction to Flutter.pdf
Study Jam Mobile 4 - Introduction to Flutter.pdf
 
Surya univ appinventor-bagi-pemula-by-ahmad-fajar-prasetiyo
Surya univ appinventor-bagi-pemula-by-ahmad-fajar-prasetiyoSurya univ appinventor-bagi-pemula-by-ahmad-fajar-prasetiyo
Surya univ appinventor-bagi-pemula-by-ahmad-fajar-prasetiyo
 
Live coding #1
Live coding #1Live coding #1
Live coding #1
 
BAB VII - INSTALASI DAN KONFIGURASI APP INVENTOR
BAB VII - INSTALASI DAN KONFIGURASI APP INVENTORBAB VII - INSTALASI DAN KONFIGURASI APP INVENTOR
BAB VII - INSTALASI DAN KONFIGURASI APP INVENTOR
 
D0215610(muh ikram s)
D0215610(muh ikram s)D0215610(muh ikram s)
D0215610(muh ikram s)
 
Live coding andorid
Live coding andoridLive coding andorid
Live coding andorid
 
Pertemuan 7 camera
Pertemuan 7 cameraPertemuan 7 camera
Pertemuan 7 camera
 
BAB VI - PENGENALAN APPINVENTOR
BAB VI - PENGENALAN APPINVENTORBAB VI - PENGENALAN APPINVENTOR
BAB VI - PENGENALAN APPINVENTOR
 
20110323 modul1 vb
20110323 modul1 vb20110323 modul1 vb
20110323 modul1 vb
 
App inventor true offline
App inventor true offlineApp inventor true offline
App inventor true offline
 
Aplikasi pengenalan sio hewan menggunakan metaio creator berbasis augmented r...
Aplikasi pengenalan sio hewan menggunakan metaio creator berbasis augmented r...Aplikasi pengenalan sio hewan menggunakan metaio creator berbasis augmented r...
Aplikasi pengenalan sio hewan menggunakan metaio creator berbasis augmented r...
 
Module Delphi
Module DelphiModule Delphi
Module Delphi
 
Laporan tugas akhir
Laporan tugas akhirLaporan tugas akhir
Laporan tugas akhir
 
Laporan tugas akhir
Laporan tugas akhirLaporan tugas akhir
Laporan tugas akhir
 
ModulFlutter-1.pptx
ModulFlutter-1.pptxModulFlutter-1.pptx
ModulFlutter-1.pptx
 
Laporan pemrograman visual
Laporan pemrograman visualLaporan pemrograman visual
Laporan pemrograman visual
 
Fajar baskoro buku
Fajar baskoro bukuFajar baskoro buku
Fajar baskoro buku
 
Dasar pemrograman-visual-basic1
Dasar pemrograman-visual-basic1Dasar pemrograman-visual-basic1
Dasar pemrograman-visual-basic1
 
Pemrograman android
Pemrograman androidPemrograman android
Pemrograman android
 

MENYELAMI APPI

  • 1. Mengenal App Inventor lebih dalam (2) Jendela Desainer Setelah sebelumnya kita mengenal workspace pada App Inventor, selanjutnya kita akan mengenal beberapa hal penting secara detail pada Jendela Desainer. 1. Pada jendela Desainer ketika kita memasukkan komponen kedalam Viewer maka ada komponen yang akan masuk kedalam layar Viewer (Visible Component) dan ada juga komponen yang secara otomatis akan masuk dibawah layar viewer (Non Visual Component). Komponen yang termasuk dalam Visible Component berarti akan terlihat pada layar aplikasi, sedangkan komponen Non-visible Component tidak akan terlihat pada layar ketika aplikasi dijalankan. Pada gambar, tombol Button OK (Button) termasuk Visible Component, sedangkan TinyDB1 merupakan Non-visible Component. Gb1. Visible-Non-Visi 1 Dari 4 Iki Mazadi http://indo-android.blogspot.com
  • 2. 2. Jika ingin mengubah properti dari suatu komponen, maka kita bisa klik pada komponen tersebut, dan ubah melalui jendela properties. Misalnya mengubah background warna dari tombol (button). Gb2. Properties 3. Untuk mengatur tata-letak komponen pada layar, maka digunakan komponen ScreenArrangement , terdapat tiga macam pengaturan yaitu : a. HorisontalArrangement : Untuk mengatur komponen secara mendatar b. TableArrangement : Untuk mengatur komponen pada sebuah tabel c. VerticalArrangement : Untuk mengatur komponen secara tegaklurus Kita bisa mengatur lebar dan tinggi dari masing-masing propertisnya, sedangkan khusus untuk TableArrangement bisa diatur jumlah kolomnya. Gb3. ScreenArrangement 2 Dari 4 Iki Mazadi http://indo-android.blogspot.com
  • 3. 4. Terdapat komponen spesial untuk membuat aplikasi yang ditujukan khusus untuk robot Lego NXT. Hampir seluruh fungsi robot bisa dikendalikan, dengan komponen-komponen ini. Yaitu beberapa sensor, dan Direct Command (Perintah), maupun untuk mengendalikan Drive (Arah). Gb.3 Lego_NXT 5. Pada menu Package for Phone, terdapat tiga macam pilihan yaitu : a. Show Barcode : Untuk membuat barcode dari aplikasi yang dibuat b. Download to This Computer : Mendownload aplikasi yang dibuat ke dalam komputer, kemudian bisa dicopy ke HP Android untuk dicoba. c. Download to Connected Computer : Apabila kita mengkoneksikan HP Android semenjak awal, maka bisa langsung mencoba menjalankan aplikasi di HP. Gb.4 Package_Aplikasi Buat yang belum pernah mengenal App Inventor, App Inventor adalah satu Tool webbased (Cloud) untuk membuat Aplikasi pada platform Android yang ditujukan untuk semua orang. Memakainya kita bisa membuat aplikasi android tanpa kode sama sekali. Untuk menggunakan App Inventor caranya : 1. Memiliki account gmail 3 Dari 4 Iki Mazadi http://indo-android.blogspot.com
  • 4. 2. Download & Install Java dari link ini http://www.java.com/en/download/manual.jsp pilih sesuai dengan sistem operasi anda, misal untuk windows pilih versi untuk windows 3. Masuk ke http://beta.appinventor.mit.edu dan pilih menu learn > setup > untuk PC dengan sistem operasi windows klik pada menu Instructions for Windows dan kemudian download installer atau bisa langsung diakses ke http://dl.google.com/dl/appinventor/installers/windows/appinventor_setup_installer_v_1_2.exe kemudian install installer ini. 4. Apabila sudah terinstall semua, untuk memulainya silahkan Masuk kembali ke http://beta.appinventor.mit.edu Untuk menguasai App Inventor, ada tiga rumus yang paling penting yaitu pertama berlatih, kedua berlatih dan ketiga berlatih …  Iki Mazadi Founder Indo Android Indonesia http://indo-android.blogspot.com Founder Gobaksodor Interactive http://www.gobaksodor.com *Artikel ini dipublikasikan di Tabloid PC Plus 2012 4 Dari 4 Iki Mazadi http://indo-android.blogspot.com