WINDOWS 8 BUAT APLIKASI WINDOWS 8, YUK!

(1)

W

IND

O

WS

8

BUAT APLIKASI WINDOWS 8, YUK!

(2)

BAB 1

DOWNLOAD DAN INSTALL WINDOWS 8

DAN VISUAL STUDIO 2012

Membuat Account MSDNAA/MSDN70

1. Buka Binusmaya

2. Masuk ke menu Services  General  Registration

3. Pilih menu MSDNAA Registration

4. Lakukan pendaftaran email untuk mendapatkan fasilitas MSDNAA, proses pendaftaran sekitar 2-3 hari kerja

5. Anda akan dikirimkan email notifikasi dari “Bina Nusantara University – infotech – MSDNAA”

6. Apabila Anda sudah melakukan pendaftaran atau pendaftaran sudah berhasil dilakukan maka akan muncul pesan/status pendaftaran

(3)

7. Keterangan lebih lanjut silahkan email ke adminmsdnaa@binus.edu atau buka situs

http://msdnaa.binus.ac.id/

Download Windows 8

1. Apabila email Anda sudah terdaftar, buka link berikut ini http://msdn70.e-academy.com/bnu_infotech untuk Login di MSDNAA/MSDN70

2. Login menggunakan menu Sign In, masukan username dan password MSDNAA Anda

3. Pilih kategori Operating Systems (atau Popular), kemudian pilih Microsoft Windows 8

(4)

 Microsoft Windows 8 Professional 64-bit (English) – DreamSpark untuk 64-bit Kemudian klik Add to Cart

5. Klik Check Out

6. Klik Proceed With Order

7. Klik Start Download untuk mendownload file .iso dan Anda mendapatkan Product Key

(5)

Download Visual Studio 2012

1. (Seperti tahapan di atas)

2. Kemudian pilih Microsoft Visual Studio 2012

3. Kemudian pilih:

 Microsoft Visual Studio Premium 2012,

 Microsoft Visual Studio Ultimate 2012, atau

 Microsoft Visual Studio Professional 2012 Kemudian klik Add To Cart

4. Klik Check Out

5. Klik Proceed With Order

6. Klik Start Download untuk mendownload file .iso dan Anda mendapatkan Product Key

(6)

Memesan DVD Windows 8 dan Visual Studio 2012

1. Bagi Anda yang tidak ingin mendownload Windows 8 dan Visual Studio 2012 karena ukuran file yang besar, Anda dapat memesan DVD berisi Windows 8 dan Visual Studio 2012 melalui Formulir Pemesanan dari HIMTI pada

https://docs.google.com/spreadsheet/viewform?formkey=dHFxX2lXZmJVWU8yMm9Le

HZxR2p1bUE6MQ

2. Biaya yang dikenakan hanya untuk mengganti biaya DVD dan jasa burn

Instalasi Windows 8

1. Untuk melakukan instalasi Windows 8 tanpa harus mengformat/menghilangkan OS sebelumnya (Dual Boot), sediakan sebuah local disk (partisi) kosong minimal 20 GB 2. Burn file .iso Windows 8 yang sudah di-download ke DVD atau media storage lain bila

Anda mengetahui caranya

3. Siapkan Product Key (serial number) Windows 8 yang sudah didapat sebelumnya untuk dimasukan pada saat proses instalasi

4. Instal Windows 8 melalui Boot, ikuti langkah berikut atau melalui artikel di mesin pencarian Google (

http://www.hong.web.id/tutorial/langkah2-cara-menginstall-windows-8-lengkap-dengan-gambar) atau menonton video di Youtube

(http://www.youtube.com/watch?v=y6OXx_AaX6Y atau

http://www.youtube.com/watch?v=xA5psoDvojc)

(7)

 Klik Install Now untuk melanjutkan

(8)

 Terdapat opsi Upgrade Windows lama Anda ke Windows 8 atau ingin melakukan instalasi bersih. Pilih Custom (advanced) untuk melanjutkan instalasi bersih

 Setelah itu, pilih drive yang ingin Anda instal; Lakukan pengelolaan disk, format, membuat partisi, dan lainnya bila diperlukan; Jika Anda berencana untuk men-setup

(9)

Dual Boot, Anda dapat memilih drive yang berbeda; Setelah melakukan konfigurasi maka lanjutkan klik Next

 Proses instalasi memakan waktu 10 menit sampai 1 jam tergantung pada konfigurasi

(10)

 Sesudah itu, komputer Anda akan restart dan ikuti perintah-perintah berikutnya

Instalasi Visual Studio 2012

1. Install Visual Studio 2012 dengan file yang sudah di-download dari MSDNAA, lalu ikuti perintah yang tersedia di http://msdn.microsoft.com/en-us/library/vstudio/e2h7fzkw.aspx 2. Anda dapat mencari artikel untuk proses instalasi Visual Studio 2012 melalui mesin

(11)

BAB 2

MEMBUAT APLIKASI SEDERHANA

Mengedit Dari Template

1. Klik link

https://www.dropbox.com/s/l73wdnwipehsfwq/VocaAni%20Indonesian-English.7z untuk mendownload template Windows 8 Apps yang sederhana

2. Buatlah sebuah project baru dengan cara:

 Buka Visual Studio 2012

 Pada menu-bar pilih FileNewProject

 Pilih JavaScriptBlank App kemudian isi nama project Anda pada Name, lalu klik OK

3. Apabila Anda diminta untuk membuat sebuah developer account, maka isi email Anda yang ingin dijadikan developer account dan ikuti proses berikutnya

4. Extract file “VocaAni Indonesian-English.7z” yang telah Anda download pada link

nomor 1; Lalu buka folder “VocaAni Indonesian-English” lalu copy folder dan file berikut :  css  data  html  images  js  pages  sounds

(12)

Lalu bukalah folder project yang telah Anda buat pada nomor 2 pada Visual Studio 2012 bagian Solution Explorer; Klik pada project Anda dan pilih menu EditPaste

Apabila terjadi error, lakukan copy-paste per folder (jangan paste semua folder sekaligus). Pastikan Anda telah mengklik terlebih dahulu nama project Anda sebelum melakukan paste.

5. Mengubah kata pada code Anda dapat dilakukan dengan cara:

(13)

 Pada Look in, pilih Entire Solution

 Masukan kata yang ingin diganti misalnya “Indonesian-English” pada kolom

Search term (Find what), dan masukan juga kata pengganti untuk mengganti jenis bahasa yang ada di aplikasi anda misalnya “Indonesia-Korea” yang diinginkan pada Replacement term

6. Untuk mengubah data pada pertanyaan, ikuti langkah-langkah berikut:

 Buka Solution Explore

 Buka folder data, lalu pilih db.json dan kemudian akan tampil tulisan:

{"origin":"Katak" translation":"frog","image":"data/images/frog.jpg"},...

 Untuk mengubah pertanyaan, ubahlah seperti di bawah ini:

"origin":"Katak" menjadi "origin":"<Pertanyaan Anda>"  Untuk mengubah kunci jawaban, ubahlah seperti di bawah ini :

"translation":"frog" menjadi "translation":"<Kunci Jawaban Anda>"  Untuk mengubah nama file gambar sebagai pelengkap pertanyaan, ubahlah seperti di

(14)

7. Untuk mengubah data gambar pertanyaan, ikuti langkah di bawah ini :

 Hapuslah file image yang ada di dalam folder data/images. Lalu copy -paste file image terbaru kamu ke dalam folder data/images

8. Untuk mengubah data gambar logo aplikasi, ikuti langkah di bawah in :

 Hapuslah file image yang ada di dalam folder images. Lalu copy-paste file image terbaru kamu ke dalam folder images dengan nama sesuai dengan sebelumnya. 9. Untuk mengubah jumlah pertanyaan kuis dan jumlah jawaban per 1 pertanyaan, Anda

dapat mengubah parameter seperti di bawah ini :

(15)

 Buka folder js, lalu pilih tutor.js

 Ubahlah value code seperti di bawah ini, sesuai dengan yang anda inginkan :

var SETS_PER_TEST = 10; jumlah pertanyaan

var OPTIONS_PER_SET = 4; jumlah jawaban per pertanyaan

10.Bukalah Solution Explorer seperti gambar di bawah ini, pilih package.appxmanifest,

(16)

Pada tab Application UI, ubahlah Display Name untuk mengubah nama aplikasi Anda. Lalu pada tab Capabilities, hilangkan tanda centang (√) jika tidak diperlukan karena dapat mempengaruhi proses seleksi pada saat mengupload ke Windows Store

11.Jika langkah 1-9 sudah dilakukan maka selanjutnya menjalankan aplikasi Anda dengan mengikuti langkah sebagai berikut:

 Pilih menu DEBUGStart Debuging pada menu-bar

 atau dengan menekan tombol pada Tool Bar

 Aplikasi Anda akan muncul di layar (apabila terjadi error, perhatikan pesan error-nya dah perbaiki)

 Tetapi jika terjadi ketidaksesuaian pada aplikasi yang muncul tekanlah tombol

12.Untuk mengecek apakah aplikasi Anda diterima atau tidak ketika ingin mengupload ke Windows Store, Anda dapat melakukan langkah-langkah berikut (hanya jika Anda ingin mengupload sendiri ke Windows Store dan jika Anda sudah memiliki developer account  lihat Bab 3, namun jika Anda ingin meminta bantuan panitia yang meng-upload-kan aplikasi Anda maka abaikan instruksi nomor ini):

 Pada menu-bar, pilih PROJECTStoreReserve App Name. Lalu akan muncul halaman Login Microsoft Account pada browser (pastikan Anda sudah membuat developer account Windows Store, lihat Bab 3 di bawah)

 Lalu masukan ID email dan password email Microsoft Anda (yang sudah terdaftar di DreamSpark)

(17)

 Buka Email yang tercantum pada halaman sesuai gambar di atas karena di dalam email tersebut, Anda akan mendapatkan sebuah pesan baru berisi code yang akan dimasukkan ke dalam kolom yang disediakan seperti gambar di atas

 Masukan code yang telah anda dapatkan, lalu klik tombol Submit. Jika forbidden cek kembali apakah email anda sudah terdaftar di Dreamspark

 Jika berhasil masuk, pilih tombol App Name, lalu masukan nama aplikasi Anda. Kemudian klik Reserve App dan klik tombol Save

 Pada menu-bar, pilih PROJECTStoreCreate Packages. Pilih Yes lalu

Sign dan masukan masukan ID email dan password email Microsoft Anda (yang sudah terdaftar di DreamSpark)

 Pilih nama aplikasi Anda, lalu pilih Next, kemudian klik tombol Create  Klik tombol Launch Windows App Certification Kit

 Click tombol Create

 Ketik Windows App Cert Kit, lalu pilih Windows App Cert Kit  Lalu akan muncul tampilan seperti gambar dibawah ini:

(18)

 Proses verifikasi akan menginformasikan apakah aplikasi Anda sudah lulus verifikasi atau belum

13.Untuk membuat package aplikasi yang ingin diupload (jika Anda ingin meminta bantuan panitia yang meng-upload-kan aplikasi Anda):

 Pada menu-bar, pilih PROJECTStoreCreate Packages lalu pilih No  Pilih nama aplikasi Anda, lalu pilih Next, kemudian klik tombol Create

 Package Anda akan tersedia di folder “AppPackages” dengan nama file <nama-project>.appxupload

Mencoba Template Lain

Silahkan mempelajari template lain di

https://skydrive.live.com/?cid=1b68dc1b994e2c0a&id=1B68DC1B994E2C0A!107 dan ubah

sesuai dengan kreativitas Anda.

Anda juga dapat mempelajari rangkuman Windows 8 di http://msdn.microsoft.com/id-id/jj672957 (8 Langkah Membuat Aplikasi di Windows 8).

(19)

BAB 3

MEMBUAT ACCOUNT WINDOWS STORE DAN

MENGUPLOAD APLIKASI

1. Membuat Screen Shot Aplikasi

Buatlah screen shot aplikasi Anda (minimal 1 buah) dengan ketentuan:

 Nama file merupakan deskripsi screen shot (dalam bahasa inggris) dengan panjang nama file tidak lebih dari 200 karakter.

 Extention file .png

 Resolution: at least 1366 x 768 atau 768 x 1366 pixels

 Ukuran: tidak lebih dari 2 MB  Contoh nama file

o“Choose your hero to start the competition.png” o“Buy your weapon based on your budget.png” o“Insert your username and password.png” 2. Mengisi Formulir Aplikasi

Isi formulir aplikasi pada file “Form Data Aplikasi Windows 8 (MS Account) - BinusChamp.xlsx”

3. Mengupload Aplikasi Windows 8

a. Dengan Membuat Account Windows Store

1. Buka file “How to Create Windows Store Account.pdf” dan ikut petunjuknya

2. Untuk membuat Account Windows Store, Anda wajib memiliki kartu kredit bank (Visa atau MasterCard)

3. Upload aplikasi Anda (boleh lebih dari 1 aplikasi) ke Windows Store (lihat caranya sesuai artikel “8 Langkah Membuat Aplikasi di Windows 8”) paling lambat tanggal

8 Desember 2012 (Gelombang 1)

4. Jangan lupa untuk mengisi Formulir Aplikasi (excel “Form Data Aplikasi Windows 8 (MS Account) - BinusChamp.xlsx”) terlebih dahulu

5. Kirimkan file excel Formulir Aplikasi tersebut ke v-yugin@microsoft.com

b. Tanpa Membuat Account Windows Store

1. Lakukan zip pada source-codeproject Anda, kemudian kirimkan 3 file:

(20)

 file excel Formulir Aplikasi “Form Data Aplikasi Windows 8 (MS Account) - BinusChamp.xlsx”

ke v-yugin@microsoft.com paling lambat 6 Desember 2012 karena panitia

membutuhkan waktu 1-2 hari untuk membantu penguploadan semua aplikasi peserta yang masuk secara manual agar tidak melewati batas tanggal Gelombang 1.

2. Jangan lupa untuk mengisi file excel Formulir Aplikasi terlebih dahulu

*Aplikasi yang masuk akan dikompetisikan

Gelombang 2

1. Peserta yang sudah mengupload aplikasi pada Gelombang 1, dapat ikut serta pada Gelombang 2

2. Batas waktu penguploadan aplikasi Gelombang 2 (boleh lebih dari 1 aplikasi) adalah paling lambat pada tanggal 14 Desember 2012 melalui Windows Store

3. Peserta yang ingin mengupload aplikasi pada Gelombang 2 tanpa melalui account Windows Store dapat mengirim 3 file sesuai sub-bab “Mengupload Aplikasi Windows 8 (Tanpa Membuat Account Windows Store)” di atas ke v-yugin@microsoft.com

untuk dibantu oleh panitia paling lambat tanggal 12 Desember 2012

4. Jangan lupa untuk mengisi file excel Formulir Aplikasi terlebih dahulu

Pemenang Kompetisi

Semua aplikasi yang masuk akan dikompetisikan pada Developer Conference Windows 8 dan diumumkan paling lambat tanggal 18 Desember 2012. Hadiah menarik seperti perangkat Windows 8 akan diberikan kepada pemenang untuk masing-masing Gelombang 1 dan 2.