Visual Studio + PhoneGap + jQuery Mobile = Awesome Windows Phone Apps (Part I)

Windows Phone 8 adalah salah satu dari sekian banyak Sistem Operasi mobile yang sudah ada saat ini. Dengan tampilan Metro UI nya, Windows Phone 8 memberikan pengalaman yang berbeda dibandingkan sistem operasi seperti iOS dan Android. Windows Phone 8 juga memberikan support yang lebih baik kepada para developer untuk mengembangkan aplikasi untuk Windows Phone. Dengan Visual Studio, kita bisa mengembangkan aplikasi Windows Phone 8 menggunakan bahasa pemrograman Visual Basic, Visual C#, Visual C++, dan HTML5. Selain itu, terdapat juga forum khusus developer Windows Phone dan Nokia yaitu http://dvlup.com/ dimana terdapat challenge yang bakalan memberikan developer hadiah-hadiah yang menarik termasuk hadiah berupa hape Windows Phone! Untuk jadi publisher Windows Phone pun biayanya murah, cuma Rp 250.000,- an. Itupun langsung bisa jadi publisher apps Windows 8 juga. Intinya, Microsoft sangat mendukung developer untuk mengembangkan appsnya di platform Windows Phone 8 dan Windows 8!

Pada blog post kali ini, saya akan menjelaskan bagaimana membuat aplikasi Windows Phone 8 dengan menggunakan platform PhoneGap. PhoneGap adalah sebuah framework berbasis HTML5 yang memungkinkan developer (khususnya developer web) untuk membuat apps dengan menggunakan HTML5, CSS, dan JavaScript yang kemudian apps itu bisa ditargetkan ke banyak platform sekaligus. Jadi, kita bisa membuat apps untuk berbagai platform hanya dalam sekali koding.

Berikut tutorialnya…

Requirements :

  1. Visual Studio (I prefer Visual Studio 2013), bisa didownload dari http://dreamspark.com/
  2. PhoneGap, bisa didownload dari http://phonegap.com/install/
  3. jQuery Mobile bisa didownload dari http://jquerymobile.com/ (in sya Allah, akan dilanjutkan di Part II)

Membuat Template PhoneGap untuk Visual Studio 2013

  1. Setelah kamu mendowload PhoneGap, buka file \lib\windows-phone\wp8\template\CordovaWP8Solution.sln

  2. Jika kita perhatikan, ada icon warning (segitiga warna kuning) pada beberapa file. Warning tersebut menunjukkan file-file yang tidak terdapat pada project. Jadi, selanjutnya kita hatus menambahkan file-file yang belum ada tersebut.
  3. Copy seluruh file pada folder common (lib\windows-phone\common) ke folder \lib\windows-phone\wp8\template\. Selanjutnya copy juga file VERSION pada lib\windows-phone ke folder \lib\windows-phone\wp8\template\.
  4. Refresh Solution Explorer. Perhatikan bahwa icon warning sudah hilang semua.

  5. Selanjutnya kita akan megeksport solution ini untuk dijadikan template. Klik menu File -> Export Template… Akan muncul jendela baru. Pilih Project Template sebagai tipe template yang akan kita buat. Lalu klik Next.

  6. Untuk template options, isi seperti berikut :
    Untuk Icon Image, pilih file __TemplateIcon.png pada folder lib\windows-phone\common
    Untuk Preview Image, pilih file __PreviewImage.jpg pada folder lib\windows-phone\common

    Selanjutnya, klik Finish

  7. Export template telah selesai. Sekarang kita bisa meng-close solution CordovaWP8Solution dengan cara klik File -> Close Solution. Untuk selanjutnya, jika ingin membuat aplikasi Windows Phone 8 dengan PhoneGap, kita langsung bisa memilih menggunakan template PhoneGap yang baru saja kita buat.

Membuat Project Windows Phone Baru dengan PhoneGap Project Template

  1. Klik File -> New -> Project…
  2. Pada templates Visual C#, cari CordovaWP8AppProj. Isi nama dan pilih lokasi sesuai keinginan lalu klik OK.

  3. Buka file www->index.html pada Solution Explorer untuk melihat halaman utama project kita.
  4. Eksekusi prject kita dengan menekan tombol F5 atau klik tombol berikut :

  5. Tadaaa, kita telah siap mengembangkan aplikasi Windows Phone 8 dengan menggunakan framework PhoneGap! Jpg _ device is ready

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s