Apache-Cordova-1
advertisement
PAPB Kelas D 1.Rinda Wahyuni 115060801111055 2.Andhika Rizqi Eka 115060800111053 Apache Cordova PhoneGap adalah framework open source untuk membuat aplikasi pada berbagai macam platform seperti Android , Blackberry , Iphone atau Windows Phone menggunakan HTML5 , JQUERY , JQUERY MOBILE , DAN CSS3. Ketika akan membangun aplikasi untuk device yang berbeda seperti Android , Iphone , Windows Mobile dan lainnya kita membutuhkan ramework dan bahasa pemrograman yang berbeda. Seperti di Android menggunakan bahasa pemrograman Java , blackberry juga dengan Java, Iphone dengan Basic C , dan Windows Phone dengan C#. PhoneGap memberi solusi dengan menggunakan bahasa web-standart untuk membangun aplikasi smartphone. Dengan PhoneGap kita hanya melakukan sekali koding langsung bisa di compile kesemua platform sekaligus. Frame Work PhoneGap telah didownload lebih dari satu juta kali dan digunakan lebih dari 400,000 developer. Ribuan aplikasi dibangun menggunakan PhoneGap , dan semuanya tersedia di mobile app stores dan directori. Contohnya adalah BBC Olympics , My Heart Camera , dan lain sebagainya. PhoneGap code dikontibusikan untuk Apache Software Foundation (ASF) dibawah nama Apache Cordova dan mencapai status top-level project di Oktober 2012. PhoneGap akan dikembangkan dibawah Apache License , menjadi versi 2.0. Nitobi adalah pembuat asli dan salah satu kontibutor utama dalam pembuatan framework PhoneGap. Di oktober 2011. Pada oktober 2011. Adobe memperbolehkan Nitobi untuk focus ke projek phonegap dan melanjutkan pekerjaannya di pengembengan semua paltfom mobile. Ada banyak komunitas yang berkontibusi dalam pengembangan projek ini , dari IBM , IRM , Microsof dan lain sebagainya. Phonegap mempunyai sebuah komunitas aktif terbuka dan menerima kolaborasi siapapun. Jika ingin berkontibusi bisa menghubungi PhoneGap. PhoneGap Build PhoneGap adalah service yang memungkinkan developer untuk membangun aplikasi mobile dengan cepat dan mudah untuk dicompile tanpa SDKs compilers dan hardware. PAPB Kelas D 1.Rinda Wahyuni 115060801111055 2.Andhika Rizqi Eka 115060800111053 Tutorial Install PhoneGap Buka command prompt NodeJs kemudian ketik - npm install -g phonegap Setelah selesai menginstall pastikan bahwa phonegap berjalan - phonegap create my-app - cd my-app - phonegap run android Buka windows explorer trus klik kanan Computer dan pilih properties Klik Advanced System Setting Klik Environment Variables PAPB Kelas D 1.Rinda Wahyuni 115060801111055 2.Andhika Rizqi Eka 115060800111053 Klik Edit dan tambahkan path tempat menyimpan android sdk Setelah itu restart PC dan selesai. PAPB Kelas D 1.Rinda Wahyuni 115060801111055 2.Andhika Rizqi Eka 115060800111053 PAPB Kelas D 1.Rinda Wahyuni 115060801111055 2.Andhika Rizqi Eka 115060800111053 PhoneGap explained Visually PhoneGap adalah sebuah aplikasi yang memungkinkan developer untuk membuat aplikasi native untuk perangkat mobile menggunakan HTML, CSS , dan JavaScripts. Script Kode untuk phonegap 100% open source , dibawah projek Apache Cordova. Phone Gap User Interface User interface untuk aplikasi PhoneGap dibuat menggunakan HTML , CSS, dan JavaScripts. UI layer dari sebuah aplikasi PhoneGap adalah sebuah tampilan web browser yang memenuhi 100% tinggi layar , dan 100% lebar layar. Berpikir bahwa ini adalah sebuah halaman web “chrome-less”. Aplikasi PhoneGap membawa HTML content, tanpa “chrome” atau decorasi window dari sebuah halaman web biasa. Kita membangun aplikasi untuk mengambil keuntungan dari ruang ini , dan kita membangun element navigational/interactive/content dan aplikasi chrome ke dalam interface dasar HTML dan CSS kita. Tampilan web yang menggunakan PhoneGap sama dengan tampilan web yang menggunakan Sistem Operasi Native. Di iOS , menggunakan Objective-C UIWebView class; di Android menggunakan android.webkit.WebView. PhoneGap API PhoneGap menyedikan Aplication Programming Interface (API) yang mengizinkan kita untuk mengakses fungsionalitas Sistem Operasi Native menggunakan Java Scripts. Secara logic kita membangun aplikasi dengan dengan JavaScript, dan PhoneGap API mengaturnya dengan Sistem Operasi Native. Untuk informasi lebih lengkap tentang PhoneGap API dan semua fungsionalitas nativenya dapat dilihat di docs.phonegap.com. PAPB Kelas D 1.Rinda Wahyuni 115060801111055 2.Andhika Rizqi Eka 115060800111053 Di tambahan fungsionalitas “out of the box” , kita juga dapat mengubah PhoneGap’s JavaScript ke native untuk menulis “native plugins”. PhoneGap native plugins mengizinkan kita untuk membuat kelas native kita sendiri dan menghubungkannya dengan Interface JavaScripts untuk menggunakan aplikasi PhoneGap. Kita dapat membaca tentang PhoneGap Native Plugins di : http://www.tricedesigns.com/2012/03/01/phonegap-nativeplugins/ dan http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins. Paket Aplikasi PhoneGap dan Distribusi Aplikasi PhoneGap dibangun menggunakan HTML, CSS, dan JavaScript, bagaimanapun hasil akhir dari aplikasi PhoneGap adalah archieve aplikasi binary yang dapat di sebarkan ke lingkungan aplikasi standart. Untuk aplikasi iOS hasilnya adalah sebuah IPA file ( iOS Application Archieve) , untuk aplikasi Android outputnya adalah sebuah APK file ( Android Package) , untuk aplikasi Window Phone outputnya adalah XAP file (Application Package) , dan sebagainya. Itu adalah beberapa format paket aplikasi yang digunakan oleh aplikasi native , dan dapat di sebarkan di semua lingkungan aplikasi ( Itunes Store , Android Market , Amazon Market, BlacBerry App World, Windows Phone Marketplace, dan sebagainya) PhoneGap Arsitektur Aplikasi Level Tinggi Spesifikasi arsitektur aplikasi berbeda pada setiap basisnya. Biarpun begitu data-driven aplikasi dibuat dengan mengikuti aristektur dasar. Aplikasi PhoneGap bertindak sebagai client agar user bisa berinteraksi dengannya. PhoneGap Client berkomunikasi dengan sebuah server aplikasi untuk menerima data. Server aplikasi mengatur business logic dan berkomunikasi dengan sebuah back-end data repository. Server aplikasi biasanya adalah sebuah web server (Apache , IIS, etc…) dan mempunyai sebah server side scripting language seperti ColdFusion , Java , .NET, PHO,dan sebagainya. PhoneGap adalah sebuah agnotic dari back-end technologies dan dapat bekerja dengan banyak server aplikasi menggunakan protocol web standart. Server aplikasi melakukan business logic dan perhitungan , dan menerima atau menahan data dari repository data yang terpisah – biasanya sebuah relasional database , tetapi juga bia semua struktur atau mekanisme untuk penahanan data. Aplikasi PhoneGap biasanya tidak langsung meminta langsung ke sebuah database, komunikasinya adalah melalui sebuah aplikasi server. Komunikasi Client ke aplikasi server dapat berdasarkan standart HTTP request PAPB Kelas D 1.Rinda Wahyuni 115060801111055 2.Andhika Rizqi Eka 115060800111053 untuk content HTML , REST – ful XML services, JSON services, atau SOAP ( atau websockets jika OS kita mendukung). Ada beberapa beberapa teknik yang dapat digunakan di sebuah desktop-browser berbasis AJAX. Arsiktektur client-side biasanya menggunakan Model Single-page application, dimana logic aplikasi berada ddisebuah page HTML single. Page ini tidak pernah diambil dari memori. Semua data akan di display dengan mengupdate HTML DOM, data diterima dari server aplikasi menggunakan teknik AJAX, dan variabel disimpan dimemory dengan JavaScript. Arsitektur Multi-page client-side aplikasi mendukung , tetapi tidak di anjurkan karena kita akan kehilangan variabel memori ketika memanggil page yang terpisah. Kelebihan dan Kekurangan PhoneGap Keuntungan : 1. Multi-platform : IoS, Blackberry, Android, WebOS, Symbian, Windows Phone, dan Samsung Bada 2. Hanya menggunakan Html, javascript dan CSS è dalam artian kita tidak perlu mempelajari java(android), objective C(ios), c# untuk windows phone, dsb. 3. Bersifat open source, shingga module yang ada akan terus dikembangkan oleh banyaknya developer. Kerugian : 1. Reverse-engineering : banyaknya aplikasi yang dapat digunakan untuk code javascript sehingga memungkinkan dilakukannya pengeditan terhadap code aslinya. 2. Adanya beberapa fitur telepon yang tidak didukung Berikut penjelasan fitur-fitur yang didukung dan tidak didukung oleh phonegap : 3. Karena multiplatform, phonegap sering ketinggalan ketika ada fitur baru pada platform aslinya. 4. Tampilan yang ada terlihat sama untuk semua platform, dan tampilan terkadang tidak terlihat seperti mobile app. 5. Banyak kendala apabila disinkronisasikan dengan IOS platform. 6. Walau menghasilkan aplikasi yang bersifat “build once, run everywhere” tetap saja aplikasi yang dibangun tidak seoptimal aplikasi buatan native SDK asli. 7. Alasannya dikarenakan aplikasi phonegap perlu menginterpret kode javascript agar bisa diterima native SDK sehingga membutuhkan waktu lebih untuk menjalankannya. oleh phonegap. Tutorial Instalasi : Tutorial Instalasi 1. Download dan install tools pengembangan seperti Eclipse Classic, Android SDK, dan ADT Plugin. Langkah ini lebih jelasnya dapat dilihat pada postingan saya terdahulu, Tutorial Instalasi Eclipse dan Android SDK. 2. Download library PhoneGap versi terakhir (ukuran hanya sekitar 13 MB), kemudian ekstrak isinya. 3. Buka Eclipse untuk melakukan setting PhoneGap. Pilih menu New > Android Project, kemudian isikan form dialog untuk membuat project baru seperti gambar berikut : PAPB Kelas D 1.Rinda Wahyuni 115060801111055 2.Andhika Rizqi Eka 115060800111053 4. Perhatikan workspace di sebelah kiri jendela Eclipse, maka akan ter-create sebuah folder yang namanya sesuai nama project yang Anda buat. 5. Coba telusuri folder tersebut, kemudian buat dua folder baru di bawah folder utama tersebut : /libs dan /assets/www 6. Copy file cordova-1.x.x.js yang ada di dalam folder library PhoneGap (lihat poin 2) ke folder /assets/www 7. Copy file cordova-1.x.x.jar yang ada di dalam folder library PhoneGap (lihat poin 2) ke folder /libs 8. Copy folder xml yang ada di dalam folder library PhoneGap (lihat poin 2) ke folder /res 9. Sesuaikan beberapa baris kode pada file main Java yang ada pada folder src (lihat gambar di bawah) : - Ubah kelas extend dari Activity menjadi DroidGap - Ganti baris setContentView() dengan super.loadUrl("file:///android_asset/www/index.html"); - Tambahkan baris import org.apache.cordova.*; dan hapus baris import android.app.Activity; PAPB Kelas D 1.Rinda Wahyuni 115060801111055 2.Andhika Rizqi Eka 115060800111053 0. Di tahap ini, Anda mungkin akan mendapati error, dimana Eclipse tidak dapat menemukan file cordova1.x.x.jar. Untuk mengatasi error tersebut, klik kanan pada folder /libs, kemudian masuk ke Build Paths/ > Configure Build Paths. Pada tab Libraries, tambahkan cordova-1.x.x.jar ke dalam Project. Jika Eclipse tidak dapat membaca file tersebut, mungkin Anda perlu refresh (menekan F5) pada project Anda sekali lagi. 11. Klik kanan pada file AndroidManifest.xml, kemudian pilih Open With > Text Editor 12. Paste kode permission berikut di bawah versionName (lihat gambar di bawah) : supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> PAPB Kelas D 1.Rinda Wahyuni 115060801111055 2.Andhika Rizqi Eka 115060800111053 <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" /> . Tambahkan baris kode android:configChanges="orientation|keyboardHidden" ke padaAndroidManifest (lihat gambar di bawah) activity tag 14. Tambahkan sebuah activity di bawah application tag pada AndroidManifest (lihat gambar di bawah) 1 <activity android:name="org.apache.cordova.DroidGap" android:label="@string/app_name" android:configChanges="orien ello World 15. Sekarang buatlah sebuah file bernama index.html pada direktori /assets/www. Paste kode di bawah ini ke dalam index.html dan pastikan untuk menambahkan script/kode cordova-1.x.x.js sesuai versi yang di-include kan ke dalam project Anda. PAPB Kelas D 1.Rinda Wahyuni 115060801111055 2.Andhika Rizqi Eka 115060800111053 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Cordova</title> 5 <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> 6 </head> 7 <body> 8 <h1>Hello World</h1> 9 </body> 10 </html> Uji ke Simulator 16. Klik kanan pada project Anda dan kemudian pilih Run As dan klik Android Application 17. Eclipse akan menanyakan kepada Anda untuk memilih AVD (memilih tipe simulator yang akan digunakan berdasarkan versi Android OS). Jika belum ada, maka Anda harus membuatnya terlebih dahulu. Uji ke Device 18. Pastikan USB debugging di-enable pada device Android Anda, kemudian hubungkan ke sistem (Settings > Applications > Development) 19. Klik kanan pada project Anda dan kemudian pilih Run As dan klik Android Application Source http://phonegap.com/start#android Referensi : http://phonegap.com/ http://phonegap.com/2012/05/02/phonegap-explained-visually/ http://phonegap.com/about/ http://eddysontan.wordpress.com/2012/12/08/native-vs-phonegap/ PAPB Kelas D 1.Rinda Wahyuni 115060801111055 2.Andhika Rizqi Eka 115060800111053
