Created By I.Z (Associate Member, IT Division)

WINDOWS 8 BUAT APLIKASI WINDOWS 8, YUK!

Created By I.Z (Associate Member, IT Division)

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

Created By I.Z (Associate Member, IT Division)

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. Kemudian pilih:

Microsoft Windows 8 Professional 32-bit (English) – DreamSpark untuk 32-bit, atau

Created By I.Z (Associate Member, IT Division)

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

(serial number) yang diperlukan dalam proses instalasi

Created By I.Z (Associate Member, IT Division)

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

(serial number) yang diperlukan dalam proses instalasi

Created By I.Z (Associate Member, IT Division)

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)

Pilih opsi yang sesuai dan klik Next

Created By I.Z (Associate Member, IT Division)

Klik Install Now untuk melanjutkan

Centang I accept the license term dan kemudian klik Next

Created By I.Z (Associate Member, IT Division)

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

Created By I.Z (Associate Member, IT Division)

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

hardware

Created By I.Z (Associate Member, IT Division)

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

pencarian Google atau menonton video YouTube

Created By I.Z (Associate Member, IT Division)

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

default

Created By I.Z (Associate Member, IT Division)

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:

Tekan tombol CTRL+H

Created By I.Z (Associate Member, IT Division)

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

bawah ini:

"image":"data/images/frog.jpg" menjadi "image":"data/images/<Nama File

Gambar Sesuai Pertanyaan Anda>.jpg"

Created By I.Z (Associate Member, IT Division)

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

Buka Solution Explore

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 :

Buka Solution Explore

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 :

Buka Solution Explore

Created By I.Z (Associate Member, IT Division)

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,

Lalu akan tampil seperti gambar dibawah ini:

Created By I.Z (Associate Member, IT Division)

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)

Setelah login akan muncul halaman seperti gambar di bawah ini:

Created By I.Z (Associate Member, IT Division)

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:

Created By I.Z (Associate Member, IT Division)

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).

Created By I.Z (Associate Member, IT Division)

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-code project Anda, kemudian kirimkan 3 file:

file .appxupload

file screenschot images

Created By I.Z (Associate Member, IT Division)

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.