WINDOWS 8 BUAT APLIKASI WINDOWS 8, YUK!

Transkripsi

1 WINDOWS 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 untuk mendapatkan fasilitas MSDNAA, proses pendaftaran sekitar 2-3 hari kerja 5. Anda akan dikirimkan 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 ke atau buka situs Download Windows 8 1. Apabila Anda sudah terdaftar, buka link berikut ini 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

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 (serial number) yang diperlukan dalam proses instalasi

5 Download Visual Studio (Seperti tahapan di atas) 2. Kemudian pilih Microsoft Visual Studio 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

6 Memesan DVD Windows 8 dan Visual Studio 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 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 ( 8-lengkap-dengan-gambar) atau menonton video di Youtube ( atau Pilih opsi yang sesuai dan klik Next

7 Klik Install Now untuk melanjutkan Centang I accept the license term dan kemudian klik Next

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 hardware

10 Sesudah itu, komputer Anda akan restart dan ikuti perintah-perintah berikutnya Instalasi Visual Studio Install Visual Studio 2012 dengan file yang sudah di-download dari MSDNAA, lalu ikuti perintah yang tersedia di 2. Anda dapat mencari artikel untuk proses instalasi Visual Studio 2012 melalui mesin pencarian Google atau menonton video YouTube

11 BAB 2 MEMBUAT APLIKASI SEDERHANA Mengedit Dari Template 1. Klik link 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 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

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: Tekan tombol CTRL+H

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 bawah ini: "image":"data/images/frog.jpg" menjadi "image":"data/images/<nama File Gambar Sesuai Pertanyaan Anda>.jpg"

14 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

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, Lalu akan tampil seperti gambar dibawah ini:

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 errornya 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 dan password Microsoft Anda (yang sudah terdaftar di DreamSpark) Setelah login akan muncul halaman seperti gambar di bawah ini:

17 Buka yang tercantum pada halaman sesuai gambar di atas karena di dalam 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 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 dan password 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 <namaproject>.appxupload Mencoba Template Lain Silahkan mempelajari template lain di dan ubah sesuai dengan kreativitas Anda. Anda juga dapat mempelajari rangkuman Windows 8 di (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-code project Anda, kemudian kirimkan 3 file: file.appxupload file screenschot images

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 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 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 Hadiah menarik seperti perangkat Windows 8 akan diberikan kepada pemenang untuk masing-masing Gelombang 1 dan 2.