Rizki Pratama A former programmer • rizkipratama.com

[Archived] Tutorial UWP #1 – Create and Deploy Your First Windows 10 UWP App

3 min read

Universal Windows Platform Apps

Peringatan: Artikel ini dikategorikan sebagai archived. Artinya artikel ini tidak akan dirawat, diperbarui, ataupun dijadikan sebagai bahan diskusi.

Okay… Sebagai permulaan, saya hanya akan menjelaskan cara membuat (create) dan deploy project, tapi tidak akan menjelaskan tentang UWP dengan panjang lebar, apalagi menjelaskan bagaimana cara kerjanya, karena saya sendiri masih newbie *sigh*

Saya rasa sebagian dari kalian sudah mengetahui bahwa sistem operasi Windows 10 menggunakan platform yang bernama Universal Windows Platform (UWP) yang membuat aplikasi yang dikembangkan dengan UWP tersebut dapat berjalan di PC, Windows Mobile, Xbox, HoloLens. Jadi, intinya: sekali coding = app bisa ada dimana-mana.

Langkah awal ini sebenarnya tidak ada sulitnya, mudah-mudah saja, dan sebenarnya saya bisa saja tidak menulis tutorial ini…

Tapi… Rasa kasihan saya—yang membumbui pembuatan tutorial ini–terhadap ekosistem aplikasi di Windows Store, yang sampai detik saya menulis tutorial ini, jumlah app-nya yang tersedia masih diambang krisis, apalagi ditambah dengan banyak app yang ditarik dari Store—dihentikan supportnya—tidak pernah diupdate lagi—dengan alasan yang cukup klasik menurut saya, yaitu “market share” dan “jumlah pengguna” yang jauh kalah bahkan menurun dibandingkan dengan OS mobile sebelah.

Dengan ditulisnya tutorial pertama tentang pembuatan app UWP ini, saya sendiri berharap banyak kepada developer untuk dapat mengunjukgigikan karyanya di Windows Store *bighope*.

“Why didn’t The Terminators upgrade to Windows 10?”

Remember... Windows 10 is...

Sebelum kita memulai pembuatan project, pastikan bahwa program Visual Studio 2015 sudah terpasang di PC (yang saya pakai di tutorial ini adalah Visual Studio Community 2015).

Jika belum terpasang, lakukanlah instalasi secara online, lalu ketika kamu berada di bagian pemilihan fitur, centanglah minimal fitur-fitur berikut agar dapat melakukan development:

☑ Windows and Web Development
☑ Universal Windows App Development Tools
☑ Emulators for Windows 10 Mobile
☑ Windows 10 SDK

Kalau kamu Ingin benar-benar mengikuti tutorial ini, maka centanglah semua fitur di bawah subfitur Universal Windows App Development Tools.

Features to be installed
Gambar 1. Fitur yang akan dipasang

Saya sendiri mencentang semua subfitur Universal Windows App Development Tools, sehingga saya dapat men-deploy dan menjalankan aplikasi di semua versi Windows 10, dari yang paling awal (build 10240) hingga yang paling baru yang updatenya baru saja dirilis 15 hari yang lalu, yaitu Windows 10 Anniversary Edition (build 14393). Untuk Emulator for Windows 10 Mobile, kamu bisa melewatinya jika kamu ingin men-deploy app langsung ke device Windows Phone (jika punya dan jika kamu tahu caranya).

Setelah proses instalasi selesai, jalankan Visual Studio.

Run Visual Studio 2015
Gambar 2. Menjalankan Visual Studio 2015 dari Start Menu

Untuk membuat (create) project baru, pilih File -> New -> Project. Lalu jendela pembuatan project New Project akan muncul.

Select Project Template, Name, and Location
Gambar 3. Pilih Template Project, isi nama dan lokasi project

Pada window New Project, di sidebar sebelah kiri, pilih Installed > Templates > Visual C# > Windows > Universal, lalu di daftar template pilih Blank App (Universal Windows).

Di bagian Name, isilah nama project yang kamu inginkan. Pada tutorial ini saya mengisinya dengan UWP_Tut_Proj_1.

Di bagian Location, isilah lokasi direktori penyimpanan project yang kamu buat. Di sini saya mengisinya dengan D:\UWP Tutorial Projects\.

Jika semua sudah terisi, klik OK.

Setelah itu kamu akan dihadapkan dengan window New Universal Windows Project dengan perintah untuk memilih Target Version dan Minimum Version dari aplikasi.

Select Supported Minimum and Target Version
Gambar 4. Pilih Target Version dan Minimum Version

Target Version adalah versi Windows yang kamu pilih untuk dijadikan target project kamu. Windows sendiri merekomendasikan kamu agar memilih versi terkini. Minimum Target adalah versi Windows yang kamu pilih untuk dijadikan versi terendah sebagai syarat minimum agar aplikasi dapat berjalan. Lebih jelasnya, simak artikel pada link ini.

Di tutorial ini saya memilih versi paling baru untuk Target Version dan versi paling rendah untuk Minimum Version.

Kemudian klik OK dan tunggu hingga proses pembuatan project selesai.

Visual Studio is Creating Project...
Gambar 5. Visual Studio sedang membuat project (creating project)…

Setelah pembuatan project selesai, kamu akan dihadapkan dengan interface Visual Studio 2015 dengan project yang kamu buat sudah siap untuk ‘dihajar’.

Project Created
Gambar 6. Tampilan IDE Visual Studio

Oke… Di tutorial bagian pertama ini kita tidak akan bermain dengan coding terlebih dahulu, melainkan kita akan langsung men-deploy aplikasi UWP nya!

Pertama, kita akan men-deploy di PC.

Pada menu toolbar, pilih menu dropdown di icon play berwarna hijau, lalu pilih Local Machine, dan klik icon play.

Deploy App on Local Machine
Gambar 7. Deploy Aplikasi di Local Machine

Tunggu beberapa saat, dan…

Yup, inilah app UWP kosong hasil deploy tadi!

App Deployed and Run - Splash Screen - Empty Window
Gambar 8. Splash screen (kiri) dan jendela kosong (kanan) aplikasi yang telah di-deploy

Setelah puas dengan hasil deploy pada PC, sekarang kita lanjutkan dengan men-deploy ke mobile.

Stop deploy dengan mengeklik icon stop berwarna merah di toolbar.

Stop Deploy
Gambar 9. Stop Deploy

Lalu pada dropdown menu tadi pilih mobile emulator yang kamu inginkan. Di sini saya memilih Mobile Emulator 10.0.14393.0 1080p 6 inch 2GB.

Select Windows 10 Mobile Emulator
Gambar 10. Memilih Emulator Windows 10 Mobile

Klik icon play, tunggu beberapa saat, dan…

App Deployed and Run - Splash Screen - Empty Window (Mobile)
Gambar 11. Splash screen (kiri) dan jendela kosong (kanan) aplikasi yang di-deploy ke perangkat mobile

Baca tutorial berikutnya: Cara Mengatur Nama, Deskripsi, dan Logo (Visual Assets) Aplikasi UWP

Jika kamu ingin mencoba menjalankan project ini tanpa mengikuti tutorial, silakan download source code project tutorial ini dan langsung saja deploy. Sebagai bonus, di dalamnya sudah terdapat App Packages yang bisa kamu coba install langsung melalui metode sideload apps (caranya dapat dilihat di README repo).


Sekian sudah tutorial bagian pertama yang saya tulis tentang cara membuat (create) dan deploy project Windows 10 UWP. Jika ada pertanyaan ataupun masalah mengenai tutorial ini, jangan sungkan ya untuk menulisnya di kolom komentar.

Rizki Pratama A former programmer • rizkipratama.com