Membuat Aplikasi Windows Phone Pertama “Hello World”

Setelah Anda melakukan installasi Windows Phone Developer Tools, kini saatnya untuk memulai membuat aplikasi atau game untuk Windows Phone. Sebagai permulaan Saya akan mengajak Anda membuat aplikasi sederhana “Hello World“. Aturannya sangat sederhana, Kita buat sebuah aplikasi yang memiliki 1 tombol bernama “Hello World“, kemudian saat tombol tersebut di klik maka akan muncul Pop Up bertuliskan “Hello World“.

Buat Project Windows Phone Apps baru dan beri nama “HelloWorld

  1. File
  2. New Project
    2013-09-06_004001
  3. Pilih Windows Phone Project Template. Untuk Bahasa pemograman bisa menggunakan C-Sharp (C#) atau Visual Basic .Net. Jadi di sesuaikan dengan kemampuan Anda.
  4. Beri Nama Project dengan nama “HelloWorld“, secara otomatis Project Solution juga akan memiliki nama yang sama.
  5. Project Location bisa Anda sesuaikan, Jika ingin merubah klik tombol Browse..
  6. Klik OK2013-09-06_004118 
  7. Pada Windows Phone Platform Dialog, Anda diminta untuk menentukan aplikasi yang Anda buat ini ditargetkan untuk Windows Phone 7.1 atau Windows Phone 8.0.  Jika Anda memilih Target nya adalah Windows Phone 7.1, maka aplikasi anda bisa berjalan pada Windows Phone 7.1 dan juga pada Windows Phone 8. Sedangkan jika Anda memilih target nya adalah Windows Phone 8, maka aplikasi Anda tidak akan bisa berjalan pada Windows Phone 7.1.

    2013-09-06_004230
  8. Klik OK

 

Mengenal Visual Studio For Windows Phone

Visual Studio For Windows Phone merupakan Integrated development environment (IDE) utama dalam pengembangan aplikasi Windows Phone.

2013-09-06_010516

  1.  Pada bagian kiri merupakan Visual Designer. Visual Designer menampilkan bentuk Visual ketika Anda menambahkan suatu kontrol ataupun melakukan perubahan pada User Interface aplikasi Anda. Penambahan kontrol bisa dilakukan dengan melakukan Drag & Drop Kontrol yang telah disediakan pada toolbox atau dengan mengetikkan Code XAML secara manual pada XAML Editor yang berad dibagian tengah IDE Visual Studio For Windows Phone.
  2. Pada bagian tengah terdapat XAML Editor, XAML merupakan Bahasa pengembangan dari bahasa XML dan digunakan untuk mendesign User Interface pada Windows Phone. Ketika Anda melakukan perubahan pada XAML Editor secara otomatis akan berefek juga pada Visual Designer.
  3. Pada bagian kanan terdapat Solution Exploler, Solution Exploler adalah jendela yang menampilkan kompulan project-project beserta file pendukungnya didalam satu Solution.

 

Mengenal Windows Phone Emulator

Windows Phone Emulator bisa disebut sebagai ‘replika Virtual‘ dari Device yang sesungguhnya. Windows Phone Emulator digunakan untuk melakukan percobaan atau Debuging Project Windows Phone yang Anda buat sebelum melakukan Test pada Device yang sesungguhnya. Jadi, jika Anda tidak memiliki Windows Phone Device tentu saja Anda akan sangat terbantu oleh Windows Phone Emulator ini.

Capture

 

 

Tahapan Coding

  1. Buatlah Desain pada Windows Phone seperti gambar dibawah ini dangan cara Drag And Drop control dari ToolBox ke Visual Designer .Capture1
  2. Ketika Anda melakukan Drag And Drop control dari ToolBox ke Visual Designer maka secara otomatis Visual Studio akan menambahkan baris code baru di XAML Editor. Begitu juga sebaliknya, jika Anda menambahkan code baru pada XAML Editor maka akan ber-efek langsung pada Visual Designer.Capture2
  3. Klik Ganda pada Control Button yang sudah Anda buat agar tercipta Event Handler baru yaitu button Hello_Click. Event Handler bisa diartikan sebagai perintah untuk suatu control dalam menangani suatu kejadian.
    Dalam sekenario ini, Ketika Button di Klik(Kejadian) maka akan menampilkan pesan “Hello World” (Perintah).Capture3
  4. Selanjutnya ketikan perintah untuk menampilkan pesan “Hello World” didalam Event Handler buttonHello_Click.Capture4
  5. Jalankan Project dengan menekan F5 pada Keyboard untuk melihat hasilnya.Capture5
  6. Klik Button “Hello World“, jika berhasil maka akan tampil pop up pesan seperti gambar dibawah ini.
    Capture6

 

Note : Pada bagian coding saya hanya akan menampilkan gambar supaya Pembaca mengetikkan sendiri code nya dan supaya tidak membiasakan diri selalu copy-paste saja. Selain itu supaya Pembaca tahu bahwa Saya membuat artikel ini dengan langsung mempraktekannya bukan hasil copy-paste dari artikel lain. 🙂

 

Semoga bermanfaat dan Selamat Berkreasi. Nantikan Tutorial selanjutnya :-).

  • makasih mas atas infonya, bermanfaat banget buat saya belajar VS 🙂

  • Greyz

    listingnyanya mirip jjaavvaa ya?

  • WakhidNusa

    iya gan untuk bahasa C# memang mrip dengan java karena C# merupakan bahasa pengembangan dari C dan C++ jadi juga mirip dengan java. Ibaratnya C# dan java masih satu keluarga..heheh

  • WakhidNusa

    sama2 gan semoga membantu 🙂