Modul ini membahas pengembangan aplikasi pembelajaran mobile menggunakan Intel XDK. Modul ini menjelaskan langkah-langkah pembuatan project baru, pengaturan framework JQuery Mobile, dan penambahan komponen-komponen dasar seperti header, teks, tombol, popup form, dan halaman.
Modul 5 pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2Muhammad Yusuf
Dokumen tersebut memberikan panduan lengkap tentang pengembangan aplikasi mobile learning menggunakan Intel XDK, mulai dari membuat halaman materi, menambahkan multimedia, membuat halaman kuis, dan menambahkan kode program interaktif.
Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 4 - Pengembangan Aplikasi ...Muhammad Yusuf
Modul ini membahas pengembangan aplikasi pembelajaran mobile menggunakan Intel XDK. Modul ini menjelaskan langkah-langkah pembuatan proyek baru, pengaturan proyek, penambahan komponen seperti header, gambar, tombol, pop-up form, dan halaman lain menggunakan Intel XDK.
Membuat aplikasi quiz android dengan Intel XDKNur Rohman
Modul ini memberikan tutorial membuat aplikasi kuis berbasis HTML dengan Intel XDK dengan menjelaskan cara membuat side menu dan tab view. Tutorial meliputi pembuatan project, pengaturan menu, penambahan konten kuis melalui iframe, dan pembuatan aplikasi Android.
Buku ini membahas cara membuat aplikasi Android menggunakan App Inventor dengan menjelaskan komponen-komponen dasar seperti tombol, label, gambar, dan suara serta cara menambahkan dan mengatur properti komponen tersebut di Design View dan Block Editor.
Modul 5 pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2Muhammad Yusuf
Dokumen tersebut memberikan panduan lengkap tentang pengembangan aplikasi mobile learning menggunakan Intel XDK, mulai dari membuat halaman materi, menambahkan multimedia, membuat halaman kuis, dan menambahkan kode program interaktif.
Modul Intel XDK Workshop ver 1.0 Sept 2013 - Modul 4 - Pengembangan Aplikasi ...Muhammad Yusuf
Modul ini membahas pengembangan aplikasi pembelajaran mobile menggunakan Intel XDK. Modul ini menjelaskan langkah-langkah pembuatan proyek baru, pengaturan proyek, penambahan komponen seperti header, gambar, tombol, pop-up form, dan halaman lain menggunakan Intel XDK.
Membuat aplikasi quiz android dengan Intel XDKNur Rohman
Modul ini memberikan tutorial membuat aplikasi kuis berbasis HTML dengan Intel XDK dengan menjelaskan cara membuat side menu dan tab view. Tutorial meliputi pembuatan project, pengaturan menu, penambahan konten kuis melalui iframe, dan pembuatan aplikasi Android.
Buku ini membahas cara membuat aplikasi Android menggunakan App Inventor dengan menjelaskan komponen-komponen dasar seperti tombol, label, gambar, dan suara serta cara menambahkan dan mengatur properti komponen tersebut di Design View dan Block Editor.
Modul 7 integrasi aplikasi dengan facebook api menggunakan intel xdkMuhammad Yusuf
Modul ini menjelaskan cara mengintegrasikan aplikasi yang dikembangkan dengan Intel XDK dengan Facebook Graph API untuk melakukan login dan posting status ke Facebook. Langkah-langkahnya meliputi membuat aplikasi Facebook, mengatur akses token dan permission, menambahkan kode untuk login dan posting status ke default.js, serta menambahkan tombol login dan share ke dialog quiz.
Ebook ini menawarkan tutorial lengkap untuk membangun aplikasi Android mulai dari dasar hingga tingkat lanjut menggunakan bahasa pemrograman Java dan alat pengembangan Eclipse. Ringkasan ini memberikan informasi mengenai konten, langkah-langkah, dan manfaat belajar dari ebook tersebut.
Tutorial Android Membuat Aplikasi senter Flash lightAgus Haryanto
Tutorial ini menjelaskan langkah-langkah membuat aplikasi senter flash light pada Android dengan bahasa pemrograman Java. Langkah-langkahnya meliputi menambahkan izin kamera dan flash, mengatur tampilan antarmuka pengguna, serta mengatur logika untuk menyalakan dan mematikan lampu flash ketika tombol ditekan. Aplikasi ini memanfaatkan fitur kamera dan lampu flash pada perangkat untuk berfungsi sebagai senter.
Aplikasi penjualan kasir dibuat menggunakan Visual Basic 6.0 untuk memenuhi tugas akhir. Aplikasi ini memungkinkan pengguna untuk memilih barang, menentukan jumlah, dan melihat total harga dengan diskon. Program terdiri dari komponen antarmuka pengguna seperti label, listbox, textbox dan tombol. Kode ditulis untuk menangani logika bisnis seperti menghitung harga, diskon, dan total berdasarkan pilihan pengguna.
Pertemuan ini membahas tentang listview pada mobile programming. Listview digunakan untuk menampilkan daftar data secara vertikal yang dapat discroll. Aplikasi contoh dibuat menggunakan dua activity untuk menampilkan daftar mata kuliah dan activity selanjutnya untuk menampilkan mata kuliah yang dipilih.
Dokumen tersebut membahas tentang pengembangan aplikasi Android mulai dari instalasi SDK dan ADT plugin untuk Eclipse, membuat project Android pertama "Hello World", pengenalan komponen project Android, dan cara menjalankan aplikasi pada emulator.
Pemrograman akuntansi visual basic finishTresna Jm
[Ringkasan]
Ringkasan dokumen tersebut adalah:
1) Dokumen tersebut membahas konsep dasar Visual Basic 6.0 untuk pembuatan program akuntansi, meliputi pengenalan antarmuka Visual Basic, konsep pemrograman dasar, dan contoh pembuatan proyek sederhana.
2) Visual Basic 6.0 memungkinkan pembuatan program dengan menggunakan pemrograman visual dan berorientasi objek, serta memudahkan pengembangan aplikasi.
3) Proyek sederhana yang dicon
Tutorial Cara Membuat Aplikasi RSS Android - creatorbcreatorb dev
It's tutorial about how to create app rss feed for android | Tutorial cara membuat aplikasi rss feed untuk android, untuk kelengkapan data silahkan anda bisa mengunjungi demo video tutorial nya di http://goo.gl/eFP7Gq
creatorb
Bel ajar android kali ini akan membahas tentang pembuatan katalog produk pada aplicais android yang ditampilkan dalam bentuk Grid yang didalamnya ada gambar, nama dan harga
Tutorial Lengkap Cara Membuat Aplikasi Android Sederhanacreatorb dev
Simple Tutorial About How to Create Simple Android App.
Included Many App tutorial:
- How to Create Android App Calculator.
- How to Create Android App Learn Vegetables.
- How to Create Android App Background Coloring.
- How to Create Android App Puzzle.
- How to Create Android App Notes - Database SQLite.
- How to Create Android App RSS feed,
- How to Create Android App Catalog Company Profile.
Tutorial Lengkap Cara Membuat Aplikasi Android dengan penjabaran yang mudah dan dilengkapi dengan tutorial membuat beberapa aplikasi:
- Cara Membuat Android App Kalkulator.
- Cara Membuat Android App Pelajari Sayuran.
- Cara Membuat Android App Mewarnai Latar Belakang.
- Cara Membuat Android App Puzzle.
- Cara Membuat Android App Catatan - database SQLite.
- Cara Membuat Android App RSS feed,
- Cara Membuat Android App Profil Katalog Perusahaan.
Dokumen tersebut memberikan panduan lengkap untuk mempelajari fitur-fitur Firebase dalam membangun aplikasi chat menggunakan bahasa Indonesia. Panduan ini menjelaskan cara mengaktifkan otentikasi, menyinkronkan data ke Firebase Realtime Database, menerima notifikasi pesan secara latar belakang, mengkonfigurasi aplikasi dari jarak jauh, melacak aliran pengguna, mengirim undangan instalasi, menampilkan iklan, melaporkan
Membuat media pembelajaran berbasis androidFunnys Rahman
Aplikasi pembelajaran berbasis Android dapat dibuat dari Microsoft PowerPoint tanpa membutuhkan keahlian pemrograman. Langkahnya adalah membuat presentasi PowerPoint, mengkonversinya menjadi HTML5 menggunakan program seperti iSpring Suite, lalu mengimpor file HTML5 ke Intel XDK untuk dibangun menjadi aplikasi Android.
Android Studio adalah lingkungan pengembangan terpadu yang digunakan untuk mengembangkan aplikasi berbasis Android. Dokumen ini menjelaskan langkah-langkah instalasi dan penggunaan Android Studio serta contoh kode untuk menampilkan teks "Hello World!".
Modul 7 integrasi aplikasi dengan facebook api menggunakan intel xdkMuhammad Yusuf
Modul ini menjelaskan cara mengintegrasikan aplikasi yang dikembangkan dengan Intel XDK dengan Facebook Graph API untuk melakukan login dan posting status ke Facebook. Langkah-langkahnya meliputi membuat aplikasi Facebook, mengatur akses token dan permission, menambahkan kode untuk login dan posting status ke default.js, serta menambahkan tombol login dan share ke dialog quiz.
Ebook ini menawarkan tutorial lengkap untuk membangun aplikasi Android mulai dari dasar hingga tingkat lanjut menggunakan bahasa pemrograman Java dan alat pengembangan Eclipse. Ringkasan ini memberikan informasi mengenai konten, langkah-langkah, dan manfaat belajar dari ebook tersebut.
Tutorial Android Membuat Aplikasi senter Flash lightAgus Haryanto
Tutorial ini menjelaskan langkah-langkah membuat aplikasi senter flash light pada Android dengan bahasa pemrograman Java. Langkah-langkahnya meliputi menambahkan izin kamera dan flash, mengatur tampilan antarmuka pengguna, serta mengatur logika untuk menyalakan dan mematikan lampu flash ketika tombol ditekan. Aplikasi ini memanfaatkan fitur kamera dan lampu flash pada perangkat untuk berfungsi sebagai senter.
Aplikasi penjualan kasir dibuat menggunakan Visual Basic 6.0 untuk memenuhi tugas akhir. Aplikasi ini memungkinkan pengguna untuk memilih barang, menentukan jumlah, dan melihat total harga dengan diskon. Program terdiri dari komponen antarmuka pengguna seperti label, listbox, textbox dan tombol. Kode ditulis untuk menangani logika bisnis seperti menghitung harga, diskon, dan total berdasarkan pilihan pengguna.
Pertemuan ini membahas tentang listview pada mobile programming. Listview digunakan untuk menampilkan daftar data secara vertikal yang dapat discroll. Aplikasi contoh dibuat menggunakan dua activity untuk menampilkan daftar mata kuliah dan activity selanjutnya untuk menampilkan mata kuliah yang dipilih.
Dokumen tersebut membahas tentang pengembangan aplikasi Android mulai dari instalasi SDK dan ADT plugin untuk Eclipse, membuat project Android pertama "Hello World", pengenalan komponen project Android, dan cara menjalankan aplikasi pada emulator.
Pemrograman akuntansi visual basic finishTresna Jm
[Ringkasan]
Ringkasan dokumen tersebut adalah:
1) Dokumen tersebut membahas konsep dasar Visual Basic 6.0 untuk pembuatan program akuntansi, meliputi pengenalan antarmuka Visual Basic, konsep pemrograman dasar, dan contoh pembuatan proyek sederhana.
2) Visual Basic 6.0 memungkinkan pembuatan program dengan menggunakan pemrograman visual dan berorientasi objek, serta memudahkan pengembangan aplikasi.
3) Proyek sederhana yang dicon
Tutorial Cara Membuat Aplikasi RSS Android - creatorbcreatorb dev
It's tutorial about how to create app rss feed for android | Tutorial cara membuat aplikasi rss feed untuk android, untuk kelengkapan data silahkan anda bisa mengunjungi demo video tutorial nya di http://goo.gl/eFP7Gq
creatorb
Bel ajar android kali ini akan membahas tentang pembuatan katalog produk pada aplicais android yang ditampilkan dalam bentuk Grid yang didalamnya ada gambar, nama dan harga
Tutorial Lengkap Cara Membuat Aplikasi Android Sederhanacreatorb dev
Simple Tutorial About How to Create Simple Android App.
Included Many App tutorial:
- How to Create Android App Calculator.
- How to Create Android App Learn Vegetables.
- How to Create Android App Background Coloring.
- How to Create Android App Puzzle.
- How to Create Android App Notes - Database SQLite.
- How to Create Android App RSS feed,
- How to Create Android App Catalog Company Profile.
Tutorial Lengkap Cara Membuat Aplikasi Android dengan penjabaran yang mudah dan dilengkapi dengan tutorial membuat beberapa aplikasi:
- Cara Membuat Android App Kalkulator.
- Cara Membuat Android App Pelajari Sayuran.
- Cara Membuat Android App Mewarnai Latar Belakang.
- Cara Membuat Android App Puzzle.
- Cara Membuat Android App Catatan - database SQLite.
- Cara Membuat Android App RSS feed,
- Cara Membuat Android App Profil Katalog Perusahaan.
Dokumen tersebut memberikan panduan lengkap untuk mempelajari fitur-fitur Firebase dalam membangun aplikasi chat menggunakan bahasa Indonesia. Panduan ini menjelaskan cara mengaktifkan otentikasi, menyinkronkan data ke Firebase Realtime Database, menerima notifikasi pesan secara latar belakang, mengkonfigurasi aplikasi dari jarak jauh, melacak aliran pengguna, mengirim undangan instalasi, menampilkan iklan, melaporkan
Membuat media pembelajaran berbasis androidFunnys Rahman
Aplikasi pembelajaran berbasis Android dapat dibuat dari Microsoft PowerPoint tanpa membutuhkan keahlian pemrograman. Langkahnya adalah membuat presentasi PowerPoint, mengkonversinya menjadi HTML5 menggunakan program seperti iSpring Suite, lalu mengimpor file HTML5 ke Intel XDK untuk dibangun menjadi aplikasi Android.
Android Studio adalah lingkungan pengembangan terpadu yang digunakan untuk mengembangkan aplikasi berbasis Android. Dokumen ini menjelaskan langkah-langkah instalasi dan penggunaan Android Studio serta contoh kode untuk menampilkan teks "Hello World!".
membuat aplikasi quiz android dengan intel xdkfetdi sudarto
Modul ini memberikan tutorial membuat aplikasi kuis berbasis HTML dengan Intel XDK dengan menjelaskan cara membuat side menu dan tab view. Tutorial menjelaskan langkah-langkah mulai dari membuat proyek baru, mengatur layout, menambahkan konten, dan membangun aplikasi siap pakai.
Dokumen tersebut memberikan panduan langkah-langkah dasar dalam membuat aplikasi berbasis Android menggunakan Eclipse, mulai dari instalasi JDK, Eclipse, membuat project baru, menambahkan layout dan komponen ke dalamnya, serta mengubah tampilan background layout.
Dokumen tersebut menjelaskan langkah-langkah membuat halaman utama pada proyek baru Android di Eclipse, termasuk membuat proyek baru, mengatur layout menggunakan XML, dan menambahkan button pada layout.
Bab ini membahas pembuatan aplikasi login pada perangkat bergerak dengan menggunakan App Inventor. Terdiri dari tiga langkah yaitu membuat desain antarmuka, membuat kode program, dan menjalankan aplikasi. Pada desain ditambahkan komponen label, textbox, passwordtextbox dan button. Kode program menggunakan kondisi if-else untuk mengecek kesesuaian username dan password sebelum membuka layar berhasil atau gagal login.
Seri 2 mengenal app inventor lebih dalam 2012Iki Mazadi
Artikel ini menjelaskan tentang App Inventor, alat untuk membuat aplikasi Android tanpa menulis kode. App Inventor menyajikan komponen visual yang disebut "blocks" untuk membangun antarmuka pengguna dan logika aplikasi. Artikel ini juga menjelaskan tiga langkah utama dalam membuat aplikasi dengan App Inventor: mendesain antarmuka pengguna, menyusun blocks, dan menguji aplikasi di emulator.
Introduction on Android programming TutorialDimas Prawira
Tutorial ini menjelaskan langkah-langkah dasar untuk membuat aplikasi Android pertama yaitu program "Hello World" mulai dari persiapan perangkat lunak yang dibutuhkan, instalasi Android SDK, membuat proyek baru di Eclipse, menulis kode program Hello World menggunakan TextView, hingga menjalankan program di emulator.
Seri 6 : Aplikasi Android gombal gembel dengan app inventorIki Mazadi
1. Artikel menjelaskan cara membuat aplikasi sederhana GombalGembel menggunakan App Inventor yang menyimpan dan menampilkan kata-kata rayuan secara acak.
2. Aplikasi ini menyimpan kata-kata rayuan dalam sebuah list dan memilih item list secara acak untuk ditampilkan di label dan textbox.
3. Penggunaan komponen seperti button, textbox, label dan horizontal arrangement diperlukan untuk mendesain antarmuka pen
Seri 3 mengenal app inventor lebih dalam 2012Iki Mazadi
Dokumen ini menjelaskan tentang Jendela Desainer pada App Inventor, termasuk komponen Visible dan Non-Visible, mengubah properti komponen, pengaturan tata letak komponen, komponen khusus untuk robot Lego NXT, dan pilihan untuk mengemas aplikasi ke HP.
Modul Ajar Bahasa Indonesia Kelas 7 Fase D Kurikulum Merdeka - [abdiera.com]Fathan Emran
Modul Ajar Bahasa Indonesia Kelas 7 SMP/MTs Fase D Kurikulum Merdeka - abdiera.com. Modul Ajar Bahasa Indonesia Kelas 7 SMP/MTs Fase D Kurikulum Merdeka. Modul Ajar Bahasa Indonesia Kelas 7 SMP/MTs Fase D Kurikulum Merdeka. Modul Ajar Bahasa Indonesia Kelas 7 SMP/MTs Fase D Kurikulum Merdeka. Modul Ajar Bahasa Indonesia Kelas 7 SMP/MTs Fase D Kurikulum Merdeka. Modul Ajar Bahasa Indonesia Kelas 7 SMP/MTs Fase D Kurikulum Merdeka.
Teori Fungsionalisme Kulturalisasi Talcott Parsons (Dosen Pengampu : Khoirin ...nasrudienaulia
Dalam teori fungsionalisme kulturalisasi Talcott Parsons, konsep struktur sosial sangat erat hubungannya dengan kulturalisasi. Struktur sosial merujuk pada pola-pola hubungan sosial yang terorganisir dalam masyarakat, termasuk hierarki, peran, dan institusi yang mengatur interaksi antara individu. Hubungan antara konsep struktur sosial dan kulturalisasi dapat dijelaskan sebagai berikut:
1. Pola Interaksi Sosial: Struktur sosial menentukan pola interaksi sosial antara individu dalam masyarakat. Pola-pola ini dipengaruhi oleh norma-norma budaya yang diinternalisasi oleh anggota masyarakat melalui proses sosialisasi. Dengan demikian, struktur sosial dan kulturalisasi saling memengaruhi dalam membentuk cara individu berinteraksi dan berperilaku.
2. Distribusi Kekuasaan dan Otoritas: Struktur sosial menentukan distribusi kekuasaan dan otoritas dalam masyarakat. Nilai-nilai budaya yang dianut oleh masyarakat juga memengaruhi bagaimana kekuasaan dan otoritas didistribusikan dalam struktur sosial. Kulturalisasi memainkan peran dalam melegitimasi sistem kekuasaan yang ada melalui nilai-nilai yang dianut oleh masyarakat.
3. Fungsi Sosial: Struktur sosial dan kulturalisasi saling terkait dalam menjalankan fungsi-fungsi sosial dalam masyarakat. Nilai-nilai budaya dan norma-norma yang terinternalisasi membentuk dasar bagi pelaksanaan fungsi-fungsi sosial yang diperlukan untuk menjaga keseimbangan dan stabilitas dalam masyarakat.
Dengan demikian, konsep struktur sosial dalam teori fungsionalisme kulturalisasi Parsons tidak dapat dipisahkan dari kulturalisasi karena keduanya saling berinteraksi dan saling memengaruhi dalam membentuk pola-pola hubungan sosial, distribusi kekuasaan, dan pelaksanaan fungsi-fungsi sosial dalam masyarakat.
Workshop "CSR & Community Development (ISO 26000)"_di BALI, 26-28 Juni 2024Kanaidi ken
Dlm wktu dekat, Pelatihan/WORKSHOP ”CSR/TJSL & Community Development (ISO 26000)” akn diselenggarakan di Swiss-BelHotel – BALI (26-28 Juni 2024)...
Dgn materi yg mupuni & Narasumber yg kompeten...akn banyak manfaat dan keuntungan yg didpt mengikuti Pelatihan menarik ini.
Boleh jga info ini👆 utk dishare_kan lgi kpda tmn2 lain/sanak keluarga yg sekiranya membutuhkan training tsb.
Smga Bermanfaat
Thanks Ken Kanaidi
Pengembangan aplikasi mobile learning menggunakan Intel XDK
1. Pelatihan Intel XDK
Modul 4 – Pengembangan Aplikasi Mobile Learning
Menggunakan Intel XDK
Dikembangkan oleh Intel Software.
1
2. Versi 1.0. September 2013.
Hak Cipta (C) 2013 Intel Software..
Adobe, Adobe Edge, dan Adobe Edge Animate merupakan merk dagang dan merk dagang
terdaftar milik Adobe, Inc.
Android, Chrome, dan Google adalah merk dagang dan merk dagang terdaftar milik Google,
Inc.
Intel, Intel XDK merupakan merk dagang dan merk dagang terdaftar milik Intel Corporation.
iOS dan OS X adalah merk dagang dan merk dagang terdaftar milik Apple, Inc.
Windows, Windows Phone, Windows Store adalah merk dagang dan merk dagang terdaftar
milik Microsoft Corporation.
Semua merk dagang terdaftar lainnya yang tercantum pada modul ini merupakan milik
pemiliknya masing-masing yang peduli.
Modul ini bebas untuk disebarluaskan secara hardcopy ataupun softcopy dengan tanpa
menambah atau mengurangi isi dari modul ini termasuk isi halaman ini. Modul ini tidak boleh
diperjual belikan atau digunakan untuk tujuan komersial lain.
2
3. Modul 4 – Pengembangan
Aplikasi Mobile Learning
Menggunakan Intel XDK.
3
4. Overview
Sesi ini merupakan pembuka dari sesi selanjutnya yang berbasis project. Pada sesi ini kita
akan membuat sebuah project aplikasi mobile berbasis HTML5 dan JQM menggunakan Intel
XDK.
Kita akan membuat sebuah aplikai media pembelajaran yang berisi konten dan multimedia
serta quiz. Lalu pada sesi hari kedua nanti akan ditambahkan pula fitur untuk posting score
hasil quiz kita ke facebook J
Mari kita mulai..
Langkah 1: Buat Project Baru
Langkah pertama kita akan membuat project Intel XDK baru.
Project Baru
Gambar 1 - Membuat Project Baru
Langkah 2: Setup Project
Selanjutnya kita gunakan pengaturan project seperti di bawah ini:
4
5. Use App Designer
xdk-duniawi
Location J
Gambar 2 - Project Setup
Setelah setup project berhasil, package default dari Intel XDK seperti di bawah ini.
Selanjutnya kita akan mulai mengolah project ini.
Gambar 3 - Default Package
Langkah 3: Menggunakan JQuery Mobile
Oke mari kita mengolah project ini J
Project ini menggunakan JQuery Mobile sebagai framework Javascript-nya. Pertama kita
seleksi index.html à App Designer
5
6. App Designer
Gambar 4 - Menggunakan APP DESIGNER
Setelah muncul pilihan Framework, pastikan kita pilih JQuery Mobile J
JQuery Mobile
Gambar 5 - Pilihan Framework
Setelah JQuery Mobile dipilih, Refresh File Tree terlebih dahulu untuk menampilkan list file
yang terbaru pada project ini.
6
7. Refresh
Gambar 6 - File Tree
Setelah File Tree di-refresh, maka list file pada project kita akan up-to-date. Hal ini akan
sering dilakukan.
Langkah 4: Membuat Halaman Intro
Secara defacto, halaman pertama yang akan diload pada sebuah aplikasi berbasis html
adalah index.html, maka kita pastikan bahwa index.html akan menjadi halaman intro project
ini J
Mari kita JQM Header supaya lebih mantap. JQM = JQuery Mobile
Pada Tab Controls, pilih HEADER lalu drag-n-drop ke canvas, tunggu beberapa saat hingga
muncul header yang kita buat. Selanjutnya ceklis Title dan isi dengan ‘Selamat Datang’
7
8. Header
Gambar 7 - Header
Langkah 5: Mengisi Halaman Intro
Mari kita isi halaman intro ini dengan beberapa komponen. Pertama-tama kita akan mengisi
dengan image. Caranya hampir sama seperti di atas, cukup melakukan drag-n-drop dari tab
controls ke canvas. Penjelasannya seperti di bawah ini:
Sebelum menambahkan komponen IMG, pertama kita tambahkan image intel.jpg yang sudah
tersedia ke dalam folder images pada workspace project xdk-duniawi ini J Selanjutnya
seperti biasa kita refresh file tree. Hal ini dilakukan supaya pada saat mengisi img src kita
tinggal memilih pada dropdown pada IMG SETTINGS.
8
9. Img src
IMG
Gambar 8 - IMG
Supaya lebih mantap, kita coba tambahkan Horizontal Line di bawah gambar tersebut. Mari
kita coba dengan coding J
Masuk ke dalam mode EDITOR, selanjutnya akan muncul tampilan code dari index.html ini,
lalu pada bagian bawah </figur/> kita isi dengan <hr/> seperti di bawah ini:
EDITOR
Gambar 9 - EDITOR
9
10. <hr/>
Gambar 10 - Menambahkan <hr/>
Untuk mencoba preview pada simulator device, klik tab EMULATE J Maka hasilnya akan
seperti di bawah ini.
EMULATE
10
11. Selanjutnya kita akan menambahkan komponen tombol untuk memulai. Seperti biasa, dalam
mode APP DESIGNER kita drag-n-drop komponen ke dalam canvas. Komponen button ada
pada jenis FORM.
Button
Gambar 11 - Button
Untuk menambahkan UX yang lebih mantap kita tambahkan Icon pada tombol tersebut.
Caranya: ceklist Icon pada tab properties, lalu pilih Icon yang tersedia.
11
12. Pilih Icon
Gambar 12 - Button Icon
Setelah Icon dipilih, lalu ubah Icon Posisition jadi RIGHT.. Bingoo! Hasilnya seperti di bawah ini
Gambar 13 - Button dengan Icon
12
13. Langkah 6: Membuat Pop-Up Form Pengisian Nama
Pengguna
Saatnya kita menambahkan pop-up form pengisian nama pengguna J Intel XDK juga sudah
menyediakan komponen pop-up, tapi kita coba cara yang lebih cepat. Pada sesi ini kita akan
full coding.. (Mode EDITOR : ON)
Langkah pertam kita harus memodifikasi properties Button yang sudah kita buat tadi.
Tambahkan atribut berikut ini (code berwarna orange)
<a class="widget uib_w_3 d-margins" datauib="jquery_mobile/button" data-role="button" dataicon="arrow-u-r" data-iconpos="right" href="#popupLogin"
data-rel="popup" data-position-to="window" datatransition="slide">Mulai</a>
Selanjutnya <div> Pop-up, pada bagian seperti di bawah ini:
Code: Pop-up
Gambar 14 - Baris Kode untuk Pop-up
Baris kode yang ditambahkan adalah sebagai berikut:
<div data-role="popup" id="popupLogin" data-theme="a"
class="ui-corner-all">
<div style="padding:10px 20px;">
<h5>Isi dengan nama anda!</h5>
<label for="un" class="ui-hidden-accessible">
Nama:
</label>
<input type="text" name="user" id="un" value=""
placeholder="Nickname" data-theme="a">
<button type="button" data-theme="a" data-icon="check"
id="btnMasuk" onclick="actionMasuk()">
Sign me in!
</button>
</div>
13
14. </div>
Mari kita test, apakah pop-up keluar atau tidak.. Hasilnya sperti ini:
Gamb ar 15 - Prev iew Ap pli kasi
Gambar 16 - Preview Aplikasi: Button Clicked
Langkah 7: Menambahkan Halaman HOME
Pada sesi ini kita akan memberikan aksi pada pop-up yang sudah dibuat sehingga ketika
ditekan akan berpindah ke halaman lain.
Sebelumnya kita terlebih dahulu buat sebuah halaman home.html dengan isi sebuah text ‘Hi,
kamu’ lengkap dengan Headernya. Caranya sebagai berikut:
14
15. New File
Gambar 17 - New File
home.html
Gambar 18 – Nama File
Langkah 8: Mengisi Halaman Home
Setelah file dibuat, kita akan mengisinya dengan text. Pilih file home.html, lalu kita masuk
mode APP DESIGNER. Seperti halaman index sebelumnya, kita pilih JQuery Mobile sebagai
framework. Berikut langkah detailnya:
15
16. home.html
Gambar 19 - Home.html
Gambar 20 - Pilihan Framework
Lalu tambahkan text menggunakan langkah drag-n-drop seperti sebelumnya. Text tersebut
berisi ‘Hi, kamu’ namun sebelumnya kita tambahkan Header dengan title:Home
Gambar 21 - Header Home
Selanjutnya tambahkan text seperti di bawah ini:
16
17. Text: Hi, Kamu
Gambar 22 - Text pada Home
Langkah 9: Membuat Aksi Pop-Up Form Pengisian
Nama Pengguna
Pada sesi ini kita akan mencoba mengeksplor HTML dan Javascript pada Intel XDK ini.
Pertama-tama kita buat file Javascript pada folder js dengan nama default.js berikut
langkah2nya:
New File pada
Folder js
Gambar 23 - File Javascript Baru
17
18. default.js
Gambar 24 - Default.js
Lalu kita isi file default.js tersebut dengan baris kode di bawah ini:
function actionMasuk(event){
$.mobile.changePage('home.html',
{reloadPage : true,
changeHash : true,
transition: "slide" });
}
Setelah file default.js terisi, kita import file tersebut pada index.html sehingga actionMasuk()
akan berfungsi. Pastikan import default.js di bawah baris import JQuery Mobile seperti
berikut ini:
<script type="application/javascript"
src="js/jquery.min.js">
</script>
<script type="application/javascript"
src="jqm/jquery.mobile-min.js">
</script>
<script type="application/javascript" src="js/default.js">
</script>
Jika berhasil, berikut preview nya J
18
19. Gambar 25 - Preview Aplikasi
Horay J kita sudah berhasil membuat aplikasi html5 menggunakan Intel XDK. Masih banyak
komponen yang bisa digunakan pada Intel XDK maupun menggunakan widget dari
JqueryMobile lainnya. Materi selanjutnya kita akan mencoba menambahkan beberapa
komponen yang sering digunakan pada sebuah aplikasi mobile.
Langkah 10: Menambahkan Common Component
JqueryMobile pada Intel XDK
Oke mari kita menambahkan beberapa komponen yang sering digunakan pada aplikasi
mobile. Berikut list yang akan kita coba yang tersedia pada Intel XDK:
-
Collapsible
ButtonGroup
Footer
ListView
Select
19
20. Referensi: http://view.jquerymobile.com/1.3.2/demos/
Selanjutnya mari kita coba satu persatu, namun sebelumnya kita harus mengetahui letak
penambahan kode yang tepat J Hal itu bisa kita lakukan setelah mengenal lebih dekat
HTML5, JQM dan Intel XDK.
Collapsible
Gambar 26 - Collapsible
Untuk mengambahkan komponen ini kita tinggal melakukan drag-n-drop J lalu selanjutnya
tambahkan konten yang ada di dalam collabsible berupa text, gambar dan lain sebagainya.
-
Label: Text yang tampil pada layar
Theme: Tema JQM yang akan digunakan
Current Theme: Tema yang sekarang digunakan
Mini: Ukuran komponen menjadi mini
Inset: Komponen dalam satu set
Rounded Corner: Ujung komponen yang berbentuk rounded
Closed Icon: Icon pada saat konten tertutup
Open Icon: Icon pada saat konten terbuka
Icon Position: Poisi ikon pada option yang tersedia
Id: digunakan untuk CSS dan JS
20
21. ButtonGroup
Gambar 27 - Button Group
Komponen ini memiliki terdiri dari beberapa Button yang digabung menjadi satu kelompok.
Namun karakteristik tiap Button unique dan bisa dimanipulasi sesuai kebutuhan. Misal kita
bisa membuat grup tombol untuk pengaturan Media seperti di atas. Seperti halnya
komponen button, untuk menambahkan group Button ini kita tinggal melakukan Drag-n-drop
kemudia mengatur properties tiap Button sesuai kebutuhan J
-
Vertical: Orientasi button vertikal
Id: digunakan untuk CSS dan JS
21
22. Footer
Gambar 28 - Footer
Sama halnya dengan Header, komponen Footer ini biasa digunakan untuk menampilkan
informasi yang biasanya akan dibawa pada tiap halaman, bisa berupa navigasi atau text
biasa. Layout Footer sudah dirancang ‘fixed’ berbeda dengan header yang ada pilihan untuk
‘fixed’ atau tidak.
Untuk menambahkannya: Just drag-n-drop J
-
Title: Judul yang tampil pada footer
Theme: Tema JQM yang akan digunakan
Id: digunakan untuk CSS dan JS
22
23. ListView
ListView merupkan salah satu komponen penting yang sering digunakan untuk menampilkan
data dinamis maupun statis.
List Item
LISTVIEW
Gambar 29 - ListView
23
24. Cara menambahkan ListView cukup mudah, seperti yang lainnya tinggal drag-n-drop ke
canvas lalu atur properties nya melalui APP DESIGNER atau EDITOR.
-
Theme: Tema JQM yang akan digunakan
Inset: Rounded
Ordered: List tergabung
Filter: Menampilkan filter untuk List
Auto Devider: Menampilkan pemisah list secara otomatis
Mini: Ukuran komponen menjadi mini
Id: digunakan untuk CSS dan JS
Select
Komponen ini sering digunakan untuk menampilkan data yang disesuaikan dengan aturan
yang dibuat. Misal list data provinsi, kota, dll.
Berikut cara pembuatannya:
Label
Options
LISTVIEW
Gambar 30 - Select
24
25. Untuk menambahkan komponen Select, lakukan drag-n-drop seperti komponen lainnya, lalu
isi properties yang dibutuhkan.
-
Label: Text yang tampil pada layar
Label Position: Posisi label pada layar
Options: Berisi pilihan yang tersedia
Theme: Tema JQM yang akan digunakan
Mini: Ukuran komponen menjadi mini
Icon Position: Poisi ikon pada option yang tersedia
Id: digunakan untuk CSS dan JS
Langkah 11: Project Mobile Learning Menggunakan
Intel XDK (lanjutan)
Oke, setelah mengenal beberapa komponen dan sekaligus mencobanya, kita akan
melanjutkan project ini. Sebelumnya kita sortir dulu komponen yang akan dipakai sebagai
berikut:
HEADER
TEXT
COLLAPSIBLE
BUTTON GROUP
FOOTER
Gambar 31 - Project (lanjutan) Tampilah home.html
25
26. Setelah melakukan penyortiran dari hasil latihan pengenalan komponen sebelumnya, sisakan
yang terlihat seperti di atas. Selanjutnya kita akan memberi aksi pada Button Materi 1
sehingga akan membuka halaman Materi 1. Pada tab properties kita tambahakan id:
materi1
Selanjutnya kita tambahkan atribut onClick pada tombol materi1, berikut baris kode yang
ditambahkan (berwarna orange):
<a class="widget uib_w_11" data-uib="jquery_mobile/button"
data-role="button" data-icon="eye" id="materi1"
onclick="materi1()">Materi 1</a>
Lalu kita tambahkan method materi1() pada default.js seperti berikut:
function materi1(event){
$.mobile.changePage(
'materi1.html',
{ dataUrl :
"materi1.html?parameter=123", data : {
'paremeter' : '123' },
reloadPage : true,
changeHash : true,
transition: "pop" });
}
Lalu jangan lupa kita import default.js pada home.html ini J
<script type="application/javascript"
src="js/default.js"></script>
Langkah 12: Membuat Halaman Materi 1
Proses selanjutnya adalah membuat halaman materi1.html yang berisi materi bab 1
pengenalan planet bumi (sesuai nama project: xdk-duniawi J )
26
27. Gambar 32 - Materi1.html
Langkah 13: Mengisi Halaman Materi 1
Setelah materi1.html dibuat, selanjutnya kita masuk APP DESIGN tentunya dengan
framework JQM. Lalu kita isi dengan komponen sebagai berikut:
-
Header : Materi 1: Tentang Dunia
o BackButton : Tombol kembali ke halaman sebelumnya
Text : Berisi overview materi 1
Footer : (c) {nama}, 2013
Accordion : Berisi text deskripsi planet bumi.
o Planet Bumi : sekilas tentang plante bumi
o Bentuk : sekilas tentang bentuk planet bumi
o Komposisi Kimia : sekilas komposisi kimia dari planet bumi
o Sumber : sumber : wikipedia
27
28. HEADER
FOOTER
Gambar 33 - Design materi1.html
Catatan:
Header (Back Button)
Untuk menambahkan BackButton pada header, kita cukup menambahkan attribut pada
elemen header tersebut. Attribut yang ditambahkan seperti di bawah ini:
<div data-role="header" class="container-group innerelement uib_w_1" data-uib="jquery_mobile/header" dataposition="fixed" data-add-back-btn="true">
Attribut di atas akan secara otomatis menambahkan BackButton sekaligus memberikan
aksinya sehingga saat ditekan akan otomatis kembali ke halaman sebelumnya.
28
29. Accordion (Content)
Setelah accordion ditambahkan dengan cara drag-n-drop, selanjutnya untuk mengisi konten
dalam masing bagian caranya harus via EDITOR. Kita harus menambahkan paragraf yang
berisi teks di dalam <div> masing-masing bagian. Berikut contoh baris kode yang
ditambahkan untuk menambahkan konten pada accordion:
<div data-role="collapsible" class="no_wrap widget uib_w_4"
data-uib="jquery_mobile/collapsible">
<h4>Planet Bumi</h4>
<div class="col uib_col_2" data-uib="layout/col">
<div class="widget-container content-area verticalcol">
<p>Konten di sini!</p>
</div>
</div>
</div>
Pada dasarnya kita bisa menambahkan konten lain selain teks pada masing-masing bagian
accordion tersebut, caranya kita bisa menambahkan tag lain yang dibutuhkan.
Selanjutnya kita isi masing-masing bagian pada accordion dengan konten yang diambil dari
wikipedia J seperti di bawah ini:
Gambar 34 - Konten Accordion
29
30. Berikut baris kode yang ditambahkan untuk bagian accordion Planet Bumi:
<div data-role="collapsible" class="no_wrap widget uib_w_4"
data-uib="jquery_mobile/collapsible">
<h4>Planet Bumi</h4>
<div class="col uib_col_2" data-uib="layout/col">
<div class="widget-container content-area
vertical-col">
<p>Bumi adalah planet ketiga dari delapan
planet dalam Tata Surya. Diperkirakan usianya mencapai 4,6
miliar tahun</p>
</div>
</div>
</div>
Selanjutnya berikut baris kode yang ditambahkan untuk accordion Bentuk:
<div data-role="collapsible" class="no_wrap widget uib_w_5"
data-uib="jquery_mobile/collapsible">
<h4>Bentuk</h4>
<div class="col uib_col_3" data-uib="layout/col">
<div class="widget-container content-area verticalcol">
<p>Bentuk planet Bumi sangat mirip dengan bulat
pepat (oblate spheroid), sebuah bulatan yang
tertekan ceper pada orientasi kutub-kutub yang
menyebabkan buncitan pada bagian khatulistiwa</p>
</div>
</div>
</div>
Baris kode yang ditambahkan untuk konten accordion Komposisi Kimia:
<div data-role="collapsible" class="no_wrap widget uib_w_6"
data-uib="jquery_mobile/collapsible">
<h4>Komposisi Kimia</h4>
<div class="col uib_col_4" data-uib="layout/col">
<div class="widget-container content-area verticalcol">
<p>Massa Bumi kira-kira adalah 5,98×1024 kg.
Kandungan utamanya adalah besi (32,1%), oksigen
(30,1%), silikon (15,1%), magnesium (13,9%),
sulfur (2,9%), nikel (1,8%), kalsium (1,5%), and
30
31. aluminium (1,4%); dan 1,2% selebihnya terdiri
dari berbagai unsur-unsur langka.</p>
</div>
</div>
</div>
Selanjutnya yang terakhir adalah baris kode yang ditambahkan untuk konten accordion
Sumber adalah sebagai berikut:
<div data-role="collapsible" class="no_wrap widget uib_w_6"
data-uib="jquery_mobile/collapsible">
<h4>Sumber</h4>
<div class="col uib_col_4" data-uib="layout/col">
<div class="widget-container content-area verticalcol">
<p>Wikipedia</p>
</div>
</div>
</div>
Setelah masing-masing konten dimasukan, lakukan preview pada aplikasi.
31
32. Langkah 14: Mempersiapkan Gambar untuk Materi 2
Setelah materi 1 sudah selesai kita buat dan diisi dengan konten berbasis text, pada bagian
ini kita akan membuat materi 2 dan mengisinya dengan konten gambar. Konten gambar
yang akan diisi adalah illustrasi planet bumi. Adapun gambar yang akan dimasukan ada 3
buah sebagai berikut :
Gambar 35 - Gambar Earth (Sumber: Google)
Langkah 15: Membuat Halaman Materi 2
Pada file tree, Klik Kanan à New File à materi2.html
Gambar 36 - New File materi2.html
Langkah 16: Mengisi Halaman Materi 2
Halaman Materi 2 terdiri dari komponen sebagai berikut:
32
33. -
Header : Materi 1: Tentang Dunia
o BackButton : Tombol kembali ke halaman sebelumnya
Footer : (c) {nama}, 2013
IMG: Gambar planet bumi
Tab Navbar: Navigasi Tab yang akan menampilkan dan memunculkan gambar.
Berikut penjelasannya:
HEADER
NAVBAR
IMG with Caption
FOOTER
Gambar 37 - Layout Materi 2
Proses pembuatan header dan footer mengacu pada langkah pada pengisian materi 1.
Adapun untuk pembuatan IMG dan Navbar penjelasannya sebagai berikut:
NAVBAR
Untuk menambahkan Navbar, kita harus coding J adapun baris kode yang ditambahkan
sebagai berikut:
<div data-role="navbar">
<ul>
<li><a href="materi2.html" class="ui-btn-active uistate-persist" data-icon="grid">Gambar 1</a>
33
34. </li>
<li><a href="materi2-lanjutan1.html" dataicon="grid">Gambar 2</a>
</li>
<li><a href="materi2-lanjutan2.html" dataicon="grid">Gambar 3</a>
</li>
</ul>
</div>
Kode di atas di tambahkan di atas IMG atau tepatnya seperti di bawah ini:
Gambar 38 - Letak Kode Navbar
IMG (Properties)
Cara menambahkan IMG sudah dijelaskan pada langkah sebelumnya, adapun catatan untuk
pengaturan propertiesnya sebagai berikut:
Img Src
Caption
Gambar 39 - Properties IMG
34
35. Langkah 17: Menambah Halaman Materi Lanjutan yang
Digunakan Navbar
Setelah kita menambahkan navbar, ada bebeapa halaman yang belum dibuat, hal ini
menyebabkan ketika navbar ditekan akan keluar pesan ERROR.
Gambar 40 - Error Loading Page
Mari kita tambahkan halaman yang belum tersedia tersebut. Adapun file yang ditambahkan
adalah materi2-lanjutan1.html dan materi2-lanjutan2.html.
Gambar 41 - New File materi2-lanjutan1.html
35
36. Gambar 42 - materi2-lanjutan2.html
Langkah 18: Mengisi Halaman Materi Lanjutan yang
Digunakan Navbar
Halaman materi lanjutan berisi konten yang mirip dengan materi 2 karena memang lanjutan
dari materi tersebut. Adapun konten dan layout nya sebagi berikut:
Materi2-lanjutan1
Posisi active nav pada
Gambar 2
IMG mengacu gambar lain
Gambar 43 - Layout Materi2-lanjutan1
36
37. Pada navbar, untuk menambahkan status navbar yang sedang aktif atau tidak, ditambahkan
atribut seperti berikut:
<li><a href="materi2-lanjutan1.html" class="ui-btn-active
ui-state-persist" data-icon="grid">Gambar 2</a>
Pastikan yang aktif hanya satu navbar button saja J
Materi2-lanjutan2
Untuk mengisi halaman ini, lakukan hal yang sama pada materi2-lanjutan1. Berikut hasilnya:
Posisi active nav pada
Gambar 3
Gambar 44 - Halaman Materi2-lanjutan2
Baiklah, Modul 4 ini telah kita selesaikan, adapun untuk melihat hasil yang sudah kita buat
ada baiknya kita lakukan preview satu per satu halaman. Berikut halaman yang sudah kita
selesaikan:
37
38. Gambar 45 - Halaman Intro
Gambar 46 - Pop Form Nama
38
39. Gambar 47 - Halaman Home
Gambar 48 - Halaman Materi 1
39
40. Gambar 49 - Halaman Materi 2
Sekian pembahasan pada modul ini. Materi 3 dan quiz akan dilanjutkan pada modul
berikutnya.
40
41. Common Senses J
Beberapa hal yang harus kita biasakan pada saat menggunakan Intel XDK antara lain:
-
Sering melakukan refresh terhadap File Tree
Pada saat menambahkan komponen biasanya Intel XDK melakukan prosesing
beberapa saat, bersabarlah J
Sering mengakses resources HTML5 di:
http://www.w3schools.com/html/html5_intro.asp
Dianjurkan sering mengakses resources CSS di: http://www.w3schools.com/css/
Resources JavaScript lengkap di: http://www.w3schools.com/js/
Resources JQM lengkap di: http://view.jquerymobile.com/1.3.2/demos/
Keep Smile J
41