Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Windows
Code

Membuat aplikasi Universal Windows pertama Anda

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Aplikasi Windows Universal memungkinkan Anda untuk menargetkan setiap perangkat Windows dalam satu solusi. Anda mengembangkan sekali, berbagi sebagian besar kode Anda, dan menyebarkan on Windows, Windows Phone, atau Xbox.

Tujuannya adalah untuk memaksimalkan penggunaan kembali kode. Anda dapat berbagi kode, kontrol pengguna, style, string, dan aset lainnya antara Windows Phone dan Windows 8 proyek-proyek dalam Visual Studio. Hal ini mengurangi usaha yang diperlukan dalam membangun dan memelihara sebuah aplikasi untuk setiap jenis perangkat.

Pengenalan

Dari seorang pengembang sudut pandang, sebuah aplikasi Windows universal ini tidak biner tunggal yang berjalan pada beberapa platform. Sebaliknya, itu mengambil form solusi Visual Studio yang mengandung beberapa proyek, satu proyek untuk setiap platform yang ditargetkan selain proyek bersama yang mengandung kode dan sumber daya yang dibagi antara platform. Banyak kode dapat dibagi antara proyek-proyek seperti Windows Phone 8.1 mengimplementasikan mayoritas api WinRT yang mengimplementasikan Windows 8.1.

Anda dapat membuat sebuah aplikasi Windows Phone menggunakan runtime Silverlight (versi 8.0 atau 8.1) atau runtime WinRT (satu dari aplikasi universal windows). WinRT runtime memungkinkan Anda untuk membuat satu aplikasi yang akan dijalankan pada Windows, Windows Phone, dan bahkan satu Xbox.

Kami menggunakan kerangka kerja XAML untuk mengembangkan sebuah aplikasi untuk beberapa platform. Dalam versi ada API konvergensi 90%, tetapi masih ada sedikit tidak berkumpul lagi. Windows Phone fitur hanya tersedia dalam kerangka Silverlight adalah:

  • Dukungan lensa
  • Layanan VoIP
  • Kamera menangkap task
  • Clipboard API
  • Lock screen wallpaper API

Dalam tutorial ini, saya akan menggunakan template aplikasi Windows universal untuk membuat aplikasi Hex Clock, clock warna heksadesimal yang tepat. It goes melalui macam warna 24 Jam, dari #000000 untuk #235959. Dengan setiap tick jam, app latar belakang perubahan warna sesuai dengan waktu saat ini menjadi heksadesimal. Menggunakan implementasi sama sebagai Hex Color JS Clock untuk menghasilkan kode hex waktu saat ini.

Desain terinspirasi oleh Windows Phone 7 jam app tutorial pada Tuts +. Sementara app jam hanya menargetkan Windows Phone, kami akan menggunakan desain untuk membuat aplikasi serupa untuk Windows Phone 8.1 dan Windows 8.1. Gambar di bawah ini menunjukkan apa yang akan kita bangun.

Final image of how hexadecimal clock will look

Dalam tutorial ini, saya akan membahas topik-topik berikut yang sesuai untuk mengembangkan aplikasi Windows universal:

  • struktur aplikasi Windows universal
  • switching startup proyek di Visual Studio
  • konteks switcher untuk aplikasi Windows universal dalam editor Visual Studio
  • bagaimana untuk menulis kode lintas-platform dalam proyek bersama
  • bagaimana cara menambahkan dukungan untuk Windows atau Windows Phone ke proyek yang sudah ada
  • membangun sebuah aplikasi Windows universal dari awal

1. Struktur Aplikasi Universal Windows

Sebuah aplikasi Windows universal adalah kumpulan tiga proyek yang terlampir dalam folder opsional solusi. Windows dan Windows Phone proyek-proyek proyek platform dan bertanggung jawab untuk menciptakan paket aplikasi (.appx), penargetan platform masing-masing. Proyek ini berisi aset yang khusus untuk platform yang ditargetkan.

Proyek bersama adalah wadah untuk kode yang berjalan pada kedua platform. Mereka tidak memiliki output yang biner, tetapi isinya diimpor oleh proyek-proyek platform dan digunakan sebagai bagian dari proses membangun untuk menghasilkan paket app (.appx).

Gambar di bawah menunjukkan solusi yang Visual Studio menciptakan bila Anda memilih template proyek untuk aplikasi kosong (Universal Apps).

Universal app solution structure

Visual Studio 2013 Update 2 memperkenalkan fitur baru yang universal aplikasi Windows. Download dan instal update ini sebelum Anda mulai membangun aplikasi Windows universal.

2. Switching Startup Proyek

Ketika Anda menjalankan solusi, proyek yang berjalan adalah salah satu yang dipilih sebagai proyek startup. Untuk mengatur proyek startup, klik kanan pada node proyek dalam Solution Explorer dan pilih opsi Set as Startup proyek. Anda dapat dengan cepat beralih proyek startup dari Debug target drop-down yang sekarang enumerates semua proyek mungkin dalam larutan.

Switching startup projects

Proyek yang Anda pilih akan ditampilkan dalam huruf tebal dalam Solution Explorer. Target tersedia debug berubah ketika beralih startup proyek.

  • Ketika proyek Windows startup proyek, Debug target drop-down menampilkan pilihan untuk Windows Simulator atau Local Machine.
  • Ketika Windows Phone proyek proyek startup, drop-down menampilkan pilihan untuk Device serta berbagai emulator.

3. Konteks Switcher di Kode Editor

Saat menulis kode dalam proyek bersama, Anda dapat menggunakan proyek konteks switcher di panel navigasi untuk memilih platform Anda aktif menargetkan, yang pada gilirannya mengkustomisasi pengalaman IntelliSense di editor kode.

Context switcher in the editor

Jika Anda menggunakan API bersama kode yang tidak didukung pada kedua platform, pesan kesalahan akan mengidentifikasi API ini ketika Anda membangun proyek. Anda tidak perlu untuk membangun proyek untuk mengkonfirmasi bahwa Anda menggunakan api lintas-platform.

Screenshot berikut menunjukkan contoh peringatan ikon dan IntelliSense untuk jenis yang hanya didukung dalam aplikasi Windows Phone.

Example of warning icons and Intellisense

4. Cross-Platform Kode dalam Proyek Bersama

Dalam proyek bersama, Anda biasanya menulis kode yang umum untuk kedua platform. Untuk mengisolasi bagian dari kode yang spesifik platform, menggunakan direktif #ifdef. Konstanta WINDOWS_APP dan WINDOWS_PHONE_APP yang telah ditentukan untuk Anda.

Berikut ini adalah bersyarat kompilasi konstanta yang dapat Anda gunakan untuk menulis kode spesifik platform:

C# WINDOWS_APP
WINDOWS_PHONE_APP
C ++
WINAPI_FAMILY_PC_APP
WINAPI_FAMILY_PHONE_APP

Ketika Anda sedang menulis kode dalam proyek bersama, editor kode Visual Studio menggunakan konteks bahwa target satu platform atau yang lain. Dalam C#, IntelliSense yang Anda lihat ketika Anda menulis kode khusus untuk konteks kode editor, yang khusus untuk Windows atau Windows Phone.

5. Menambahkan Dukungan untuk Windows / Windows Phone

Jika Anda sudah memiliki sebuah aplikasi Windows 8.1 yang ada, Anda dapat menggunakan perintah Add Windows Phone 8.1 untuk menambahkan Windows Phone 8.1 proyek baru dan proyek bersama solusi. Sebuah pilihan yang serupa juga tersedia jika Anda memiliki aplikasi Windows Phone 8.1 dan Anda ingin menambahkan dukungan untuk Windows 8.1.

Untuk menambahkan dukungan untuk satu jenis perangkat atau lainnya, dalam Solution Explorer, klik kanan pada proyek dan pilih Add Windows Phone 8.1 atau Add Windows 8.1.

Add Windows 81 app to existing Windows Phone 81 project

Di sini, Visual Studio menambahkan Windows Phone baru atau Windows proyek solusi. Proyek bersama juga secara otomatis dibuat untuk Anda.

Screenshot berikut menunjukkan solusi setelah menambahkan Windows Phone proyek ke proyek Windows yang sudah ada. Proyek bersama yang ditambahkan ke solusi ini pada mulanya kosong.

Project structure after adding a Windows 81 project to an existing Windows Phone 81 app

Catatan bahwa jika Anda membuat sebuah aplikasi yang menggunakan template aplikasi Windows universal, proyek bersama sudah berisi file App.xaml.

Langkah 1: Memindahkan File ke Proyek Bersama

Anda dapat memindahkan kode apapun yang Anda inginkan untuk berbagi antara aplikasi untuk proyek bersama. Misalnya, Anda dapat memindahkan folder Common, DataModel dan Strings ke proyek bersama. Anda bahkan dapat memindahkan App.xaml ke proyek bersama.

Namun, Anda mungkin menerima beberapa kesalahan kompilator tentang kode yang Anda pindah ke proyek bersama. Anda bisa menyelesaikan kesalahan ini dengan mengkonfigurasi aplikasi proyek Anda baru memiliki serangkaian referensi yang sama sebagai proyek awal Anda.

Screenshot berikut menunjukkan referensi assembly yang sama ditambahkan ke kedua proyek.

Adding same assembly reference to both projects

Jika kode bersama Anda menggunakan api yang khusus untuk Windows, gunakan direktif #ifdef dengan WINDOWS_APP yang terus-menerus untuk mengisolasi bagian dari kode. Gunakan WINDOWS_PHONE_APP konstan untuk mengisolasi bagian dari kode khusus untuk Windows Phone 8.1.

Langkah 2: Berbagi App.xaml

Bila Anda membuat solusi baru untuk sebuah aplikasi Windows universal, Visual Studio tempat App.xaml dalam proyek bersama. Jika Anda mengkonversi proyek yang sudah ada untuk sebuah aplikasi Windows universal, Anda dapat memindahkan App.xaml ke proyek bersama secara manual. Anda harus mengatur properti action action dari halaman ke ApplicationDefinition setelah memindahkan file. Berikut langkah-langkahnya:

  • Dalam Solution Explorer, dalam proyek bersama, pilih App.xaml file.
  • Pilih View > Properties window.
  • Pada jendela Properties, dalam Build Action daftar drop-down, pilih ApplicationDefinition.

Anda juga harus memutuskan bagaimana Anda ingin membuka halaman pertama dari aplikasi Anda. Jika Anda berbagi file App.xaml dan ingin menggunakan halaman awal yang berbeda untuk setiap aplikasi, Anda harus menambahkan arahan #ifdef seperti yang ditunjukkan di bawah ini.

6. Mulailah Menulis Aplikasi Windows Universal

Langkah 1: Setup Proyek

Pertama, memilih template proyek untuk sebuah aplikasi Windows universal dalam kotak dialog New Project. Screenshot berikut menunjukkan aplikasi Windows universal proyek template yang saat ini tersedia untuk C#.

Universal Windows app templates

Berikan nama proyek. Saya akan menggunakan Hex Clock Pro untuk proyek saya.

Langkah 2: Membangun User Interface 

Untuk sebagian besar, pekerjaan antarmuka pengguna terjadi dalam proyek-proyek platform-spesifik, memungkinkan Anda untuk membuat antarmuka pengguna yang tampak hebat pada PC, tablet, dan ponsel, tetapi berbagi data umum, sumber daya, komponen, dan bahkan melihat- model.

Alih-alih membangun antarmuka pengguna terpisah untuk versi Windows Phone 8.1 dan Windows 8.1 Hex Pro Clock, saya mendefinisikan sebuah desain umum dalam proyek bersama. Aku hanya harus membuat beberapa perubahan dalam XAML app jam pada Tuts + untuk membuatnya bekerja untuk kedua platform.

Langkah 3: Berbagi Kode

Seperti telah dibahas sebelumnya, kode yang umum untuk kedua platform dapat diletakkan dalam proyek bersama. Kode yang menggunakan api spesifik platform kebutuhan untuk ditempatkan di salah satu proyek spesifik platform. Anda bahkan dapat menggunakan #ifdef petunjuk untuk memasukkan kode spesifik platform dalam file bersama.

Karena app Hex Clock Pro tidak menggunakan api apa pun yang spesifik platform, saya dapat menempatkan semua kode dalam proyek bersama.

Menyembunyikan Status Bar

Dalam MainPage.xaml.cs dalam proyek bersama, kami telah menggunakan direktif #ifdef untuk mengisolasi kode khusus untuk Windows Phone. Kode tertutup dalam #ifdef menyembunyikan status bar di Windows Phone.

Menampilkan waktu saat ini

Saya telah menggunakan DispatcherTimer kelas untuk memanggil kutu awal ketika LayoutRoot grid dimuat. Objek timer memanggil fungsi timer_Tick di setiap centang dari jam.

Fungsi timer_Tick update waktu yang ditampilkan di app dan, pada saat yang sama, ini update warna latar belakang.

Memperbarui Warna Latar Belakang

Warna latar belakang diatur ke warna heksadesimal yang sesuai dengan waktu saat ini.

Object dari HexColour class diinisialisasi waktu, kembali nilai-nilai RGB yang sesuai. Konstruktor HexColour set kelas A, R, G, B nilai untuk warna tertentu.

Menambahkan Animasi dan Efek

Saya telah meniru animasi awal yang digunakan dalam app jam sebelumnya pada Tuts + dan sudah diinisialisasi ketika LayoutRoot di-load.

Ini adalah semua yang kita butuhkan untuk membangun aplikasi Hex Clock Pro. App menggunakan kode 100% bersama. Anda hanya perlu untuk menghasilkan paket app terpisah untuk kedua platform. App tampak sangat mirip pada Windows Phone dan menggunakan XAML kode yang sama untuk antarmuka pengguna.

Hex Clock Pro for Windows Phone 81

Perhatikan bahwa saya telah menambahkan semua XAML dan C# kode dalam proyek bersama, tapi ketika saya menggunakan Windows app atau aplikasi Windows Phone, kode dalam proyek bersama digabungkan secara internal dengan proyek-proyek spesifik platform.

Kesimpulan

Sebagian besar kode untuk aplikasi Windows dan aplikasi Windows Phone bersama, dan sementara antarmuka pengguna terpisah, mereka cukup serupa bahwa bangunan keduanya adalah bekerja kurang daripada membangun dua antarmuka pengguna dari awal.

Jika saya telah membangun sebuah versi Windows Phone Hex Clock Pro untuk Windows Phone 7 atau 8, itu akan menjadi lebih banyak pekerjaan karena Windows Phone 7 berisi tidak WinRT api dan Windows Phone 8 mengandung hanya sebagian kecil.

Dengan Windows 10, kita akan melihat konvergensi yang lain, yang berarti satu API-WinRT API-untuk beberapa platform, dan tingkat tinggi kesetiaan antara elemen antarmuka pengguna untuk setiap platform yang tidak mencegah pengembang menggunakan unsur-unsur spesifik platform untuk menyajikan pengalaman terbaik pada setiap perangkat. Jangan ragu untuk men-download file sumber tutorial untuk digunakan sebagai referensi. Hex Clock Pro juga tersedia di pasar untuk Windows Phone 8.1 dan Windows 8.1.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.