WP8 Tutorial – Rate & Review

Saat anda membuat aplikasi untuk WindowsStore, pastinya anda ingin pengguna dapat memberikan rating + review untuk aplikasi yang anda buat kan? Tapi tentu pengguna ingin melakukan pemberian rating + review ini dengan cara yang simpel. Biasanya dengan menekan suatu tombol, pengguna dapat berpindah ke suatu page di WindowsStore dimana pengguna dapat langsung melakukan pemberian rating + review. Namun bersyukurlah, microsoft telah menyediakan cara yang mudah untuk menyediakan fitur tersebut!

Sekarang bayangkan anda sudah memiliki suatu Button yang memiliki eventhandler “Tap” dengan nama method “RateReview_Tap”. Hal pertama yang harus anda lakukan adalah menambahkan statement berikut di header file .cs anda :

using Microsoft.Phone.Tasks;

Ini diperlukan karena anda akan menggunakan class MarketplaceReviewTask yang berada dibawah library Microsoft.Phone.Tasks . Lalu pada method “RateReview_Tap”, silahkan tambahkan kode sebagai berikut

Mudah kan? Dengan itu pengguna akan membuka page Rate & Review pada market place dari aplikasi anda langsung dengan menekan tombol tersebut.

Tapi ingat! Rate & Review ini hanya berfungsi apabila aplikasi anda telah terdaftar di WindowsStore, jadi pada saat debugging program anda tidak akan bisa mencobanya. Namun percaya aja gan, cara ini pasti berhasil dan bekerja kok pada aplikasi anda hehe.

Sekian, semoga bermanfaat

WP8 Tutorial – Page Navigation++

Jadi ada beberapa yang belum dijelasin nih kemarin tentang page navigation.

Saat terjadi navigasi page, sebenarnya ada method-method yang ter-invoke secara otomatis lho darisananya. Method ini dimiliki oleh setiap page, yaitu :

• OnNavigatedTo : Dipanggil saat NavigationService page membuka page tersebut (dengan kata lain page tersebut menjadi page yang aktif)
• OnNavigatedFrom : Dipanggil saat NavigationService meninggalkan page tersebut

Cara mendefinisikan nya bagaimana? Langsung saja kita override method tersebut pada .cs page yang anda inginkan. Misalnya seperti ini

Selanjutnya, saya akan menjelaskan mengenai stack dari page pada NavigationService.

Saat anda berada pada suatu page, saat anda menekan tombol “Back”, secara tidak sadar pasti anda berharap anda akan keluar dari page yang aktif sekarang untuk pindah ke page sebelumnya. Mengapa terjadi demikian? Karena page-page yang pernah aktif akan ditumpuk seperti sebuah Stack, dan yang ditampilkan di layar hanyalah page yang paling terakhir dipanggil.

Tapi bagaimana jika saat anda berpindah dari page A ke page B, namun saat tombol “Back” anda tidak ingin kembali ke page A ? (contoh page A adalah page SplashScreen, page B adalah MainPage). Maka yang bisa anda lakukan adalah menghapus page A dari Stack tersebut.

Caranya bagaimana? Dengan satu buah statement kita bisa mengubah dunia! Yaitu ini :

NavigationService.RemoveBackEntry();

Dengan itu kita bisa menghapus Stack Entry yang terakhir (dengan kata lain page yang aktif sekarang). Maka biasanya statement tersebut ditaruh di OnNavigatedFrom, sehingga saat meninggalkan page tersebut, tidak akan ada jejak yang tertinggal di Stack tersebut.

Bagi yang ingin mempelajari lebih dala silahkan baca disini ya :

http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh394012%28v=vs.105%29.aspx

Sekian dulu bro!

WP8 Tutorial – ApplicationBar

Apa itu ApplicationBar? Itu loh kalo di aplikasi-aplikasi biasanya yang ada di bagian bawah layar. Contohnya yang dilingkari merah pada gambar dibawah ini nih

Application bar itu biasanya ada dua konten nya, yaitu ApplicationBarMenuItem dan ApplicationBarIconButton. MenuItem itu bagian menu yang berbentuk text, sedangkan IconButton adalah bagian button berbentuk icon gitu.

Cara buatnya gimana?

Pertama-tama, definisikan lah format ApplicationBar yang ingin anda buat sebagai resource static dari aplikasi tersebut, dengan kata lain dibuat di App.xaml. Kenapa dibuat sebagai resource static? Karena biasanya ApplicationBar yang sama bisa dipake di page yang lain (reuse). Sebenernya bisa dibuat secara manual per pagenya, tapi ikutin aja cara ini ;). Ini merupakan praktis yang baik dan dicontohkan di banyak tutorial hoho.

Definisikannya di App.xaml, didalam naungan tag <Application.Resources>. Berikut contoh kode yang digunakan pada screenshot aplikasi diatas

Voila! Telah terdefinisi ApplicationBar dengan nama identifikasi “MainAppBar” yang dapat digunakan pada page-page anda. Sekarang, bagaimana cara menggunakan ApplicationBar pada page yang anda inginkan? Jawabannya dengan cara dibawah ini

Tambahkan bagian yang digaris-bawahi pada page anda. Dengan statement tersebut, dinyatakan bahwa page anda akan menggunakan ApplicationBar dari StaticResource dengan nama identifikasi “MainAppBar”. Mudah kan?

Pertanyaan selanjutnya, bagaimana cara kita mendefinisikan event handler saat menu / button di “Tap”? Ingat, karena ApplicationBar ini didefinisikan secara static, maka event handler nya harus kita tambahkan secara manual pada page yang menggunakan ApplicationBar tersebut.

Definisikan event handler untuk setiap menu / button pada konstruktor page .cs seperti contoh di bawah ini

MenuItem yang anda definisikan di StaticResource akan terurut dari 0..n-1 sesuai dengan urutan pendefinisian di App.xaml, begitu juga untuk IconButton. Jangan lupa mendefinisikan method yang anda gunakan sebagai EventHandler. Contoh nya seperti ini

Itu daritadi cuman contoh ya, jangan bener-bener di copy-paste juga  :D. Yang penting silahkan dipelajari langkah-langkah nya. Sisanya, seperti biasa, silahkan dieksplorasi sendiri! hehe, sekian terimakasih

WP8 Tutorial – Page Orientation

Mengatur bagaimana membuat page tersebut selalu landscape atau portrait atau support untuk keduanya merupakan hal yang mudah.. hoho. Buka file page .xml anda, dan lihat dibagian paling atas kode anda

Nah bagian yang digaris-bawahi tersebut lah yang diotak-atik value nya.  Silahkan coba-coba sendiri 😉

Bagaimana kalau anda ingin membuat kondisi dimana saat orientasi berubah dari landscape ke portrait atau sebaliknya maka sebuah method akan dipanggil / invoke? Ada caranya bro! Berikut template yang sering saya gunakan untuk kasus ini :

Biasanya potongan kode tersebut ditaruh dibagian konstruktor dari .cs page tersebut. Isinya apa? Terserah anda! haha.

Sekian dulu ya. Kali ini emang bahasannya singkat sih jadi mau gimana lagi hoho. Oke sampai jumpa di tutorial berikutnya!

WP8 – Page Navigation

Pindah-pindah page gimana caranya? Ada teknologi namanya NavigationService, itu adalah class static yang bisa digunakan untuk mengatur perpindahan page.

Misal kita punya MainPage.xaml dan Page1.xaml

Gimana caranya pindah saat StackPanel di “Tap”? Gunakan NavigationService dengan cara seperti ini

Oke oke, cara ngirim parameter gimana caranya?

• Satu parameter : NavigationService.Navigate(new Uri("/Page1.xaml?param1=hoho", UriKind.Relative));
• Parameter lebih dari satu : NavigationService.Navigate(new Uri("/Page1.xaml?param1=hoho&param2=hoho", UriKind.Relative));

*Sejauh ini yang ane tau pengiriman parameter cuman bisa bernilai String ya, harus ada parser untuk tipe lain selain String

Cara ngambil parameternya gimana? Ada dua cara, yaitu

• if (this.NavigationContext.QueryString.ContainsKey(“param1”)) value = this.NavigationContext.QueryString[“param1”];

• if(NavigationContext.QueryString.TryGetValue(“param1”,out msg)) value = msg;

*value itu adalah variabel bertipe String

Oke penjelasannya sekian aja ya, silahkan dieksplorasi sendiri lagi yo sisanya. Di share juga gan kalo ada yang bagus hehe.

WP8 Tutorial – Menambahkan Event Handler

Beberapa class di Windows Phone bisa ditambahkan event handler bro, biasanya sih digunain banget untuk menghandle input dari user.

Nah caranya gimana? Langsung lihat contoh aja bos

Misal awalnya gini…

Lalu nambahin event handler nya gimana?

Cari aja di auto-complete (ctrl + spasi), banyak property dari class-class yang bisa dieksplorasi. Nah yang ada gambar kayak “kunci inggris ato apa itu namanya” itu adalah property yang tipenya variabel, sedangkan yang gambarnya “petir” adalah method yang harus dioverride, umumnya event handler. Method ini akan diinvoke / dipanggil sesuai dengan namanya, misal Tap, DoubleTap, Hold, dan lain lain. Berterimakasih lah kepada Microsoft yang telah membuat nama property method nya dengan cukup deskriptif 🙂 .

Silahkan pilih “Tap” dan nilainya diisi dengan nama method tersebut pada kode .cs, pada kasus ini namanya “stackPanel_Tap”

Silahkan dibuka kode .cs nya, silahkan didefinisikan method stackPanel_Tap, dikasus ini kita akan coba dengan kode seperti ini

Oke coy! Silahkan dicoba dan diteliti bedanya apa. Setiap StackPanel tersebut di “Tap”, nilai dari count akan bertambah, dan yang tertulis pada TextBlock “clickCount” akan berubah. Yak kurang lebih bentuknya seperti itu

Sekian dari saya. Silahkan dieksplorasi lebih lanjut!

WP8 Tutorial – StackPanel

Yohoo, salah satu dasar tata menata layout di WP8 adalah dengan class StackPanel.

<StackPanel>
</StackPanel>

StackPanel, sesuai namanya, yaitu kumpulan / tumpukan dari panel-panel. Langsung ke contoh aja ya penggunaan nya seperti apa, yuk mari kita learning by doing saja hoho. Berikut potongan kode :

Dan berikut hasilnya :

Sebagai contoh, disini kita gunakan beberapa property dari StackPanel, yaitu Orientation, Margin, Height, HorizontalAlignment.

• Orientation : Tumpukan dari panel yang anda buat mau-nya kearah horizontal (numpuk ke kanan) atau vertikal (numpuk ke bawah). Urutan tumpukan panelnya ya tetep sesuai yang mana yang didefinisikan duluan. Defaultnya property ini bernilai “Vertical”.
• Margin : Penjarakan posisi layouting relatif terhadap tempat yang disediakan. Ya bayangin kayak margin kertas di Microsoft Word lah. Disini urutannya itu : jarak pojok kiri; pojok atas; pojok kanan; pojok bawah.  Defaultnya property ini bernilai “0,0,0,0”.
• Height : Batas tinggi dari StackPanel. Property ini didefinisikan kalau anda ingin ukuran dari StackPanel ini statis, jadi mau tumpukan panelnya sebenernya melebihi batas tinggi dari StackPanel, yang ditampilkan dilayar hanyalah panel yang masih berada pada batas ukuran StackPanel tersebut. Coba lihat contoh hasil, anda seharusnya menyadari perbedaan yang ukurannya statis dan tidak. FYI kalo ada property Height, berarti ada property Width juga ya, gunanya sama tapi untuk lebarnya.
• HorizontalAlignment : Ya ini alignment nya, mau mepet kiri, mepet kanan, center atau stretch (kayak justify gitu lah). Coba-coba aja. FYI lagi, ada juga property VerticalAlignment ya, gunanya sama tapi untuk mengatur mepet atas bawah gitu.

Dan masih banyak property lainnya, silahkan dieksplorasi gan.

Untuk penjelasan lebih lengkapnya bisa buka link ini ya :

http://msdn.microsoft.com/en-us/library/system.windows.controls.stackpanel%28v=vs.95%29.aspx

WP8 Tutorial – New Project

Belum pernah membuat aplikasi windows phone?

Seloow yang penting download dulu aja Visual Studio Professional / Visual Studio for Windows Phone yang terbaru.
Selanjutnya silahkan lakukan :

Files > New > Project > Pilih Windows Phone App yang berada di template Visual C# (pada tutorial ini kita gunakan C#)

Pilih targetnya untuk Windows Phone OS 8.0, lalu.. Selamat! Anda telah membuat aplikasi WP8 pertama anda! haha

Lihat Solution Explorer anda (Kalo gaada, buka di View > Solution Explorer), anda akan melihat file-file yang dibuat secara default oleh Visual Studio. Harusnya disana ada :

• Folder Properties : Isinya adalah file manifest dari App anda. Coba buka aja file-file tersebut, dan anda akan tahu saat ini file yang mungkin di otak-atik cuman file “WMAppManifest.xml” haha. Xml tersebut bertanggung jawab untuk setting dasar App anda, seperti nama App setelah di install, icon, gambar tile (saat App dilakukan “pin to start”), capabilities, requirements, dan detil packaging (nama publisher, bahasa yang di support pada App, dst.)
• Folder References : Folder ini isinya library yang dipake di App nya, ga usah di otak-atik bro
• Folder Assets : Semua asset dari App biasanya disimpan di folder ini
• Folder Resources : Skip dulu gan haha
• App.xaml : Biasanya resource static akan didefinisikan disini, seperti layout ApplicationBar, infix dari URL asset, dll.
• LocalizedStrings.cs : Skip gan
• MainPage.xaml : Fie layout dari page pertama App anda

Untuk setiap file layout .xaml, pasti ada file source .cs dari page tersebut, silahkan dibuka dengan : klik kanan > view code.

File yang ditampilkan pertama kali biasanya adalah MainPage.xaml. Disini pasti anda akan sadar bahwa anda bisa melihat kode .xaml sekaligus dengan preview layout nya. Tapi kalo mau liat fokus di kode nya aja atau di preview nya aja bisa di doube-click aja yang ditengah diantara kedua tampilan. Lebih tepatnya yang dilingkari merah di gambar di bawah ini.

Sekian penjelasan dari “New Project”, sisanya silahkan coba-coba sendiri terlebih dahulu. Baca tutorial berikutnya juga ya!

I’m back!

Hey it’s been a while since my last post here. Well, I’m promising myself that I’m going to post more about Windows Phone Apps development tomorrow.

Fufufu, 10 posts here I go!

Dreamspark?

Apa itu Dreamspark?

Silahkan cari sendiri di google haha. Di wikipedia ada kok

http://en.wikipedia.org/wiki/DreamSpark

Sesuai yang dijelaskan disana, Dreamspark adalah program dari Microsoft yang dibuat untuk menyediakan para pelajar kemudahan untuk mencari tools untuk software design dan development dari Microsoft secara GRATIS!! Gratis bro gratis!! Aqua gelas aja lebih mahal dari Visual Studio bro haha. Langsung aja cabutt ke website nya

https://www.dreamspark.com/Student/default.aspx

Terus di website nya bisa langsung download software Microsoft gratis gitu?

EH iya, tapi program Dreamspark ini ga buat sembarang orang (Kecewaaa). Silahkan baca-baca dulu di FAQ nya juga dijelaskan. Jadi, untuk mendapatkan fasilitas yang wah itu anda harus membuat akun yang tervalidasi. Validasi apaan nih? Ya validasi bahwa anda beneran seorang pelajar. Biasanya itu disediakan kok untuk universitas-universitas yang memang ada major IT / Computer Science nya, mungkin bisa tanya langsung ke Microsoft Student Partner dari kampus tersebut. Berikut screenshot nya :

Nah itu versi yang udah login yang udah tervalidasi ya. Jadi bikin account nya sih bisa langsung aja, tapi aslinya diminta verifikasi dulu. Itu kan ada 3 cara, silahkan dicari kodenya.. haha. Kalo gue sih validasinya lewat verification code, dapet kodenya karena sekarang lagi ikutan rekrutmen MSP dan ada tuntutan untuk bikin aplikasi + publish ke AppStore, hoho terus langsung minta deh fufufu.

Terus apa keuntungannya punya akun Dreamspark?

Keuntungannya? Hoho yang pertama jelas yang tadi udah disampein diawal… BISA DOWNLOAD SOFTWARE GRATIS BRO. Bisa ngakses dan langsung download dari page yang ini ^_^

Yohoho langsung download sepuasnya. Surgaaa parah. Terutama itu, yang tadinya harus bayar jadi gratis hoho. Buktinya sekarang aja gue lagi download nih Microsoft Visual Studio 2012 Professional, dan full version cuy, dapet lisensi. Masih jaman trial / bajakan? :p

Wow, ada lagi ga fasilitas lainnya dari Dreamspark?

Haha sebenernya gue sendiri masih baru sih punya akun Dreamspark (belom ngerti banyak gan), jadi silahkan kita coba-coba aja. Baca di FAQ terutama. Mungkin masih banyak fasilitas-fasilitas keren lainnya dari Dreamspark, yuk mari kita oprek-oprek lagi!

Semoga bermanfaat