pengembangan mobile learning (android) dengan exelearning dan phonegap build

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

Upload: wahyu-purnomo

Post on 31-May-2015

3.313 views

Category:

Education


8 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Pengembangan Mobile Learning

dengan eXeLearning dan

PhoneGap Build LGM FKIP REMA UNISMA 2014

@wahyupur

Page 2: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Wahyu Purnomo [email protected]

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

Page 3: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Perkembangan Pasar Device IT

Page 4: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build
Page 5: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build
Page 6: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Mobile Learning

=> penggunaan perangkat IT genggam dan bergerak,

seperti PDA, telepon genggam, smartphone, dan tablet PC,

dalam pembelajaran

Page 7: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

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).

Page 8: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

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

Page 9: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

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.

Page 10: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

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

Page 11: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

IDC merilis laporan persebaran operating

system mobile untuk kuartal 3 di bulan 2013

Sumber : International Data Corporation (IDC) Worldwide Quarterly Smart

Connected Device Tracker

Page 12: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

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.

Page 13: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Tampilan Native vs Web Apps

Page 14: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

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

Page 15: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Phone Gap

Page 16: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Phone Gap

Page 17: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Phone Gap

Page 19: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

GitHub.com, mulai dg Sign-up

Page 20: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

GitHub.com, mulai dg Sign-up

Page 21: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

GitHub.com

Page 22: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

PhoneGap.com

Page 23: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

PhoneGap in the cloud

Page 24: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Register with Github ID

Page 25: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Konfirmasi phone gap akses github profile

Page 26: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Pilih negara dan Agreement

Klik

“complete…”

utk

menyelesaikan

Registrasi

Page 27: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Siapkan konten yg sudah dibuat dgn

eXelearning

Gunakan menu: File > Export > WebSite > Zip File, akan

diperoleh satu file *.ZIP yg siap di”phonegap”kan

Page 28: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

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

Page 29: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Tampilan dashboard PhoneGap Build

Untuk upload Klik Private

Page 30: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Browse file Zip, open, terjadi

Proses Upload

Page 31: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Setelah berhasil upload, berikutnya memberi

Nama dan Deskripsi, lanjut “Build”

Untuk Build

Apabila tombol build tidak

ada, klik menu Apps

Page 32: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Proses Building App

Page 33: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Hasil Building App

Page 34: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

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”

Page 35: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Hasil Building App setelah

setting configuration

Page 36: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Klik untuk download file

APK utk Android

Page 37: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Proses Download

Page 38: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Setelah di install di Android Device

(tampilan di Emulator)

Page 39: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Tampilan di Android App Player

Page 40: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Contoh lain di Android App

Player

Page 41: Pengembangan Mobile Learning (Android) dengan eXeLearning dan PhoneGap Build

Terima Kasih

Silahkan gabung di Group : https://edmo.do/j/a3bh55

Blog

http://wahyupur.wordpress.com

http://wahyupur.blogspot.com

eMail

[email protected]

Facebook : http://www.facebook.com/wahyupur

Twitter : @wahyupur