Cara mudah membuat konten mobile learning berbasis Android dengan eXeLearning dan PhoneGap build disampaikan pada Kuliah Umum Media Pembelajaran di FKIP Unisma, bersama Dr. Sri Wahyuni, M.Pd Januari 2014

1. Pengembangan Mobile Learning
dengan eXeLearning dan
PhoneGap Build
LGM FKIP REMA UNISMA 2014
@wahyupur

2. Wahyu Purnomo
wahyupur@jpvedcmalang.org
 Pengembang Teknologi Pembelajaran di
VEDC Malang
 Indonesia German Institute eLearning
Expert (2007-2010)
 Pengembang eLearning VEDC Malang
 http://elearning.vedcmalang.or.id
 http://wahyupur.wordpress.com

3. Perkembangan Pasar Device IT

6. Mobile Learning
=> penggunaan perangkat IT genggam dan bergerak,
seperti PDA, telepon genggam, smartphone, dan tablet PC,
dalam pembelajaran

7. Fungsi dan Manfaat Mobile
Learning
Terdapat tiga fungsi Mobile Learning dalam
kegiatan pembelajaran di dalam kelas
(classroom instruction), yaitu :
 suplement (tambahan) yang sifatnya
pilihan (opsional),
 pelengkap (komplemen), atau
 pengganti (substitusi)
(Abdul Majid, Mobile Learning, 2012).

8. Development Options
Native or Web?
Or Hybrid ?
Pilihan untuk pengembangan mobile learning
seperti halnya pengembangan aplikasi mobile,
menurut Mihai Corlan, 2011 dapat melalui
pengembangan :
 Native Apps
 Web Apps
 Hybrid Apps

9. Native Apps
Native App adalah aplikasi yang dibuat
khusus untuk suatu sistem operasi
tertentu misalnya android, iOS atau
blackberry.
Biasanya sang pembuat
sistem operasi
menyediakan tool dan
API khusus bagi para
developer untuk
pembuatan aplikasi.

10. Platforms & Operating Systems












Android from Google
Bada from Samsung
BlackBerry OS from RIM
iOS from Apple
Limo (Linux)
Maemo from Nokia
MeeGo from Nokia and Intel
Symbian OS from the Symbian Foundation
WebOS from HP
Windows Mobile 6 from Microsoft
Windows Phone 6.5 from Microsoft
Windows Phone 7 from Microsoft

11. IDC merilis laporan persebaran operating
system mobile untuk kuartal 3 di bulan 2013
Sumber : International Data Corporation (IDC) Worldwide Quarterly Smart
Connected Device Tracker

12. Mobile Web Apps

Web app, disebut juga sebagai aplikasi berbasis
web. Biasanya aplikasi jenis ini dibuat
menggunakan html5, javascript dan css.
Keunggulan dari aplikasi jenis ini adalah bisa
dijalankan pada berbagai sistem operasi ( IOS,
Android, Blackberry dll). Bahkan dapat juga
dibuka dengan menggunakan browser pada
PC/laptop.

13. Tampilan Native vs Web Apps

14. Hybrid Apps
Hybrid App adalah pengembangan Native
App yang berasal dari Web App, salah
satunya yaitu menggunakan Phone Gap.
Dengan Hybrid App ini maka
pengembangan aplikasi mobile menjadi lebih
mudah, dan kelemahan web app yang tidak
dapat menggunakan fitur alarm, camera,
GPS dll dapat diatasi

15. Phone Gap

16. Phone Gap

17. Phone Gap

18. Git Hub
GitHub adalah layanan penyimpanan
bersama untuk proyek pengembangan
perangkat lunak yang menggunakan sistem
pengontrol versi Git. GitHub menawarkan
paket gratis dan komersial untuk proyek
sumber terbuka dan diluncurkan sejak
tahun 2008.[1] Menurut survei terhadap
pengguna Git pada tahun 2009, GitHub
adalah situs penginangan Git terpopuler.[

19. GitHub.com, mulai dg Sign-up

20. GitHub.com, mulai dg Sign-up

21. GitHub.com

22. PhoneGap.com

23. PhoneGap in the cloud

24. Register with Github ID

25. Konfirmasi phone gap akses github profile

26. Pilih negara dan Agreement
Klik
“complete…”
utk
menyelesaikan
Registrasi

27. Siapkan konten yg sudah dibuat dgn
eXelearning
Gunakan menu: File > Export > WebSite > Zip File, akan
diperoleh satu file *.ZIP yg siap di”phonegap”kan

28. Konten dari eXelearning sudah siap,
berikutnya Tahapan Build App
 Sign-in
ke PhoneGap
 Create new app - Private
 Upload
 Beri Nama dan Deskripsi
 Setting dan konfigurasi
 Build
 Download App

29. Tampilan dashboard PhoneGap Build
Klik Private
Untuk upload

30. Browse file Zip, open, terjadi
Proses Upload

31. Setelah berhasil upload, berikutnya memberi
Nama dan Deskripsi, lanjut “Build”
Untuk Build
Apabila tombol build tidak
ada, klik menu Apps

32. Proses Building App

33. Hasil Building App

34. Setting dan Konfigurasi
Browse: pilih file *.png
untuk icon
Package :
Isikan kebalikan domain
kita (bebas), misalnya
com.wahyupur.mobile
Version :
Isikan 1.0.0 untuk versi
pertama, akhiri “save”

35. Hasil Building App setelah
setting configuration

36. Klik untuk download file
APK utk Android

37. Proses Download

38. Setelah di install di Android Device
(tampilan di Emulator)

39. Tampilan di Android App Player

40. Contoh lain di Android App
Player

41. Terima Kasih
Silahkan gabung di Group : https://edmo.do/j/a3bh55
Blog
 http://wahyupur.wordpress.com
 http://wahyupur.blogspot.com
eMail
 wahyupur@jpvedcmalang.org
Facebook
: http://www.facebook.com/wahyupur
Twitter : @wahyupur