{"id":1178,"date":"2024-02-01T22:25:15","date_gmt":"2024-02-01T15:25:15","guid":{"rendered":"https:\/\/delta-electronic.com\/Design\/Hardwares\/?p=1178"},"modified":"2024-02-01T22:25:15","modified_gmt":"2024-02-01T15:25:15","slug":"mengenal-app-inventor","status":"publish","type":"post","link":"https:\/\/delta-electronic.com\/Design\/Hardwares\/mengenal-app-inventor\/","title":{"rendered":"Mengenal App Inventor"},"content":{"rendered":"<p>App Inventor adalah aplikasi berbasis web untuk membangun source code mobile application\u00a0 yang awalnya dikembangkan oleh Google, dan saat ini dikelola oleh Massachusetts Institute of Technology (MIT).<\/p>\n<p>Dengan menggunakan App Inventor ini pengguna yang belum mengenal bahasa pemrograman dan bahkan anak-anakpun bisa menciptakan sebuah mobile application baik dalam Android. Hal ini disebabkan adanya graphic user interface seperti user interface pada Scratch dan StarLogo TNG yang memungkinkan pengguna untuk drag and drop obyek visual untuk menciptakan aplikasi yang akan dijalankan di mobile phone.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Persiapan untuk menggunakan App Inventor<\/strong><\/p>\n<p>IDE dari App Inventor ini tidak terinstal di dalam PC \/ Laptop kita, melainkan berada di server pada link berikut <a href=\"http:\/\/ai2.appinventor.mit.edu\">http:\/\/ai2.appinventor.mit.edu<\/a> sehingga memerlukan koneksi internet dan gmail account. Untuk menggunakan App Inventor maka berikut ini adalah apa saja yang perlu dipersiapkan<\/p>\n<ul>\n<li>Mac atau Windows computer dengan system requirement seperti pada <a href=\"http:\/\/appinventor.mit.edu\/explore\/content\/system-requirements.html\">link berikut<\/a><\/li>\n<li>Koneksi Wifi<\/li>\n<li>Browser (Chrome, Firefox, Safari) disarankan tidak menggunakan Internet Explorer<\/li>\n<\/ul>\n<p>Langkah-langkah yang dibutuhkan adalah sebagai berikut:<\/p>\n<ol>\n<li>Tentukan bagaimana nanti anda akan mencoba aplikasi yang anda buat\n<ul>\n<li><a href=\"https:\/\/appinventor.mit.edu\/explore\/ai2\/setup-device-wifi.html\">Menggunakan Android atau IOS dengan koneksi Wifi<\/a><\/li>\n<li><a href=\"https:\/\/appinventor.mit.edu\/support\/chromebooks\">Menggunakan Chromebook<\/a><\/li>\n<li><a href=\"https:\/\/appinventor.mit.edu\/explore\/ai2\/setup-device-usb.html\">Menggunakan Android dan kabel USB<\/a><\/li>\n<li><a href=\"https:\/\/appinventor.mit.edu\/explore\/ai2\/setup-emulator.html\">Menggunakan On Screen Emulator<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Daftarkan akun gmail anda atau bisa juga memilih untuk tidak menggunakan akun<\/li>\n<\/ol>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-1179\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/02\/register.png\" alt=\"Registrasi App Inventor\" width=\"591\" height=\"496\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/02\/register.png 591w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/02\/register-300x252.png 300w\" sizes=\"(max-width: 591px) 100vw, 591px\" \/><\/p>\n<p style=\"padding-left: 40px;\">Apabila anda memilih tidak menggunakan akun maka anda akan terkoneksi di server yang berbeda yaitu di <a href=\"http:\/\/code.appinventor.mit.edu\">http:\/\/code.appinventor.mit.edu<\/a> dan kode kunjungan ulang yang secara acak akan ditampilkan. Kode ini dapat disimpan di dalam file atau dicatat agar saat anda kembali melanjutkan pembuatan aplikasi yang belum selesai.<\/p>\n<p><strong>Membuat aplikasi Hello Codi<\/strong><\/p>\n<p>Hello Codi adalah salah satu contoh aplikasi sederhana yang disediakan oleh App Inventor yang berfungsi mengaktifkan suara BUZZZ dan menggetarkan perangkat kita saat gambar lebah (Bee) disentuh.<\/p>\n<p>Dalam App Inventor terdapat dua bagian utama yaitu Designer dan Block Editor. Bagian Designer adalah bagian di mana kita akan meletakkan komponen-komponen<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/designer.png\" \/><\/p>\n<p>dan Bagian Block Editor tempat kita merancang kode.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/blockseditor.png\" \/><\/p>\n<p>Kita dapat berpindah dari Bagian Designer ke Block melalui tombol pada gambar di bawah ini.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/toggle.png\" \/><\/p>\n<p>Pada Bagian Designer terdapat lima bagian yaitu Bagian Palette, Bagian Viewer, Bagian Components, Bagian Media dan Bagian Properties.<\/p>\n<p>Bagian Palette adalah bagian di mana kita dapat melakukan drag and drop komponen dan meletakkannya di Bagian Viewer<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/palette.png\" \/><\/p>\n<p>Bagian Viewer adalah bagian di mana kita nanti akan melihat bagaimana tampilan aplikasi nanti<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/viewer.png\" \/><\/p>\n<p>Bagian Components yang menampilkan komponen apa saja yang sudah kita ambil<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/components.png\" \/><\/p>\n<p>Bagian media yang menampilkan media file apa saja yang sudah kita upload<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/properties.png\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Ambil button dari bagian User Interface di Bagian Palette dan drop ke Bagian Viewer<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/dragDropButton.gif\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Ambil Label dari Bagian User Interface di Bagian Palette dan letakkan di Bagian Viewer di bawah Button<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/add_label.gif\" \/><\/p>\n<p>Ambil Sound dari Bagian Media di Bagian Palette dan letakkan di Bagian Viewer<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/dragDropSound.gif\" \/><\/p>\n<p>Karena bagian ini merupakan bagian yang tidak nampak atau non visible maka bagian ini akan turun dan tampil di bagian bawah di bagian non visible components<\/p>\n<p>Kemudian pada Bagian Components, klik button dan perhatikan Bagian Properties<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/button-properties.gif\" \/><\/p>\n<p>Atur height property ke automatic dan width property ke fill parents sehingga aplikasi yang kita buat nanti akan seluas layar yang kita gunakan.<\/p>\n<p>Atur image property dengan file codi.jpg dan hapus tulisan di bagian body text sehingga tulisan pada tombol di Bagian Viewer juga hilang<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/buttonproperties.png\" \/><\/p>\n<p>Klik Bagian Label sehingga Bagian Properties akan tampil seperti berikut<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/label-properties.gif\" \/><\/p>\n<p>Atur <strong>BackgroundColor<\/strong> property dengan warna yang anda inginkan dan atur <strong>Font Size<\/strong> property dengan 30 lalu isi <strong>Text<\/strong> property dengan &#8220;Touch the Bee!&#8221;. Atur <strong>TextColor<\/strong> property dengan warna yang anda inginkan dan sebaiknya kontras dengan <strong>BackgroundColor<\/strong>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/labelproperties.png\" \/><\/p>\n<p>Pada bagian ini Aplikasi Codi mulai dapat kita lihat layoutnya dan dapat dicoba dilihat tampilannya. Langkah berikut ini adalah untuk mencoba aplikasi. Bila kita memiliki Android atau IOS yang bisa dicoba maka pilih AI Companion pada Bagian Connect<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-1182\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/02\/ai-companion.png\" alt=\"AI Companion\" width=\"689\" height=\"463\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/02\/ai-companion.png 689w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/02\/ai-companion-300x202.png 300w\" sizes=\"(max-width: 689px) 100vw, 689px\" \/><\/p>\n<p>Lalu lakukan scan QR Code pada perangkat Android atau IOS anda dan lay out akan tampil pada perangkat anda.<\/p>\n<p>Berikutnya kita dapat mengatur suara yang akan diperdengarkan saat tombol ditekan dengan mengatur field source pada Bagian Properties saat komponen Sound di Bagian Components di klik.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/soundproperties.gif\" \/><\/p>\n<p>Pilih Bee_sound.mp3 dan klik OK.<\/p>\n<p>Selanjutnya kita dapat mulai menuliskan kode di Bagian Blocks Editor dengan diawali menekan tombol Block.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/toggle.png\" \/><\/p>\n<p>Di sana terdapat tiga bagian yaitu Bagian Block, Bagian Media dan Bagian Viewer. Bagian Media sama seperti pada Bagian Media di Bagian Designer yaitu menampilkan file-file yang kita upload.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/blocks-editor-media.png\" \/><\/p>\n<p>Bagian Block yang merupakan palette berisi block-block yang dapat kita gunakan. Di sini terdapat tiga bagian yaitu Bagian Built In Block, Bagian Components Block (bagian yang menampilkan komponen yang sedang digunakan di aplikasi) dan Bagian Any Components Block.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/blocks-editor-blocks.png\" \/><\/p>\n<p>Bagian Viewer adalah bagian tempat kita meletakkan block-block untuk membangun kode yang kita rancang<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/blocks-editor-viewer.png\" \/><\/p>\n<p>Pada bagian ini, kita awali dengan menambahkan event saat tombol ditekan. Ini dapat dilakukan dengan klik blok button1 dan pilih &#8220;when button1 click do&#8221;<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/button-click.gif\" \/><\/p>\n<p>Kemudian klik bagian blok sound1 di Components Block dan pilih call sound1 play serta letakkan di when button1 click seperti berikut<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/sound-blocks.gif\" \/><\/p>\n<p>Juga drag and drop call sound1.vibrate seperti pada gambar di atas. Bagian ini berfungsi untuk menggetarkan perangkat saat tombol ditekan. Untuk menentukan bagaimana getarannya kita dapat memberikan nilai numerik ke bagian milisecond dengan menggunakan komponen math di Bagian built in components seperti pada gambar berikut<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/insert-zero.gif\" \/><\/p>\n<p>Kemudian dengan asumsi koneksi dengan perangkat Android\u00a0 masih terhubung kita dapat langsung mencoba menekan pada gambar Bee. Namun apabila koneksi telah terputus, kita dapat pilih AI Companion lagi di Bagian Connect dan lakukan scan QR Code lagi.<\/p>\n<p>Di sini pada saat gambar Bee kita tekan, maka perangkat kita akan mengeluarkan suara dan bergetar.<\/p>\n<p>Kemudian apabila kita ingin melakukan instalasi ke perangkat kita maka pilih Menu Build dan klik Android App (.apk)<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mit-cml.github.io\/yrtoolkit\/yr\/images\/hour_of_code\/buildapp.png\" \/><\/p>\n<p>Pastikan perangkat android anda sudah ter-instal QR Code Scanner dan lakukan scanning pada QR Code yang dihasilkan.<img decoding=\"async\" class=\"alignnone size-full wp-image-1183\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/02\/qrcode.png\" alt=\"\" width=\"644\" height=\"475\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/02\/qrcode.png 644w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/02\/qrcode-300x221.png 300w\" sizes=\"(max-width: 644px) 100vw, 644px\" \/><\/p>\n<p>Kita akan diarahkan ke link di mana kita dapat mendownload file APK dan pilih install anyway apabila google protect menanyakannya. Maka pada bagian ini, aplikasi Hour of Code Codi telah ter install di perangkat anda.<\/p>\n<p><strong>Paulus Andi Nalwan, ST<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>App Inventor adalah aplikasi berbasis web untuk membangun source code mobile application\u00a0 yang awalnya dikembangkan oleh Google, dan saat ini dikelola oleh Massachusetts Institute of Technology (MIT). Dengan menggunakan App Inventor ini pengguna yang belum mengenal bahasa pemrograman dan bahkan anak-anakpun bisa menciptakan sebuah mobile application baik dalam Android. Hal ini disebabkan adanya graphic user [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[214],"tags":[217,215,218,216,220,219],"class_list":["post-1178","post","type-post","status-publish","format-standard","hentry","category-android","tag-android","tag-app-inventor","tag-ios","tag-mit-app-inventor","tag-mobile-application","tag-mobile-apps"],"_links":{"self":[{"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/posts\/1178"}],"collection":[{"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/comments?post=1178"}],"version-history":[{"count":4,"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/posts\/1178\/revisions"}],"predecessor-version":[{"id":1185,"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/posts\/1178\/revisions\/1185"}],"wp:attachment":[{"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/media?parent=1178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/categories?post=1178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/tags?post=1178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}