Publish Aplikasi ke Windows Store

 

Aplikasi yang kita buat tentu saja akan digunakan oleh orang lain. Tahap pembuatan aplikasi yang final adalah mempublikasikan aplikasi kita. Sebelum mempublikasikan aplikasi ke Windows Store, kita harus mengecek apakah aplikasi kita telah memenuhi syarat dan layak untuk dipublikasikan di Windows Store. Tahap-tahap dalam mempublikasikan aplikasi ke Windows Store yaitu

1. Reserve App Name

- Pada halaman Dashboard di akun Windows Store, pilih Submit an app

- Kemudian pilih App name. Sebuah aplikasi tentu memiliki nama yang unik dari aplikasi yang lain sehingga pengguna dapat tertarik pada aplikasi yang kita buat. Pada textbox App name, isi nama aplikasi sesuai yang kamu inginkan lalu klik Reserve app name. Perlu diperhatikan bahwa nama aplikasi yang kita isi harus sesuai dengan nama aplikasi yang ada pada Display Name di Package.appxmanifest.

2. Associate App

-Buka project aplikasi kita dengan Visual Studio.

-Pada Solution Explorer, klik kanan pada file project yang ingin di-associate lalu pilih Store -> Associate App with the Store

- Klik next, lalu jika diminta untuk Sign-In, gunakan akun Windows Store untuk Sign-In.

- Setelah itu, klik nama aplikasi yang telah di Reserve sebelumnya, kemudian klik Associate.

3. Certification and Create App Packages

- Pertama, pada Solution Configuration pilih Release

- Kemudian pada Solution Explorer, klik kanan pada file project lalu pilih Store -> Create App Packages.

- Pada pertanyaan "Do you want to build packages to upload to the Windows Store?" pilih Yes. Lalu Sign-In menggunakan akun Windows Store.

- Pilih direktori mana file Package kita akan disimpan pada Output Location. Secara default file akan disimpan pada folder AppPackages pada direktori Project kita. Lalu isi kotak Version, isi 1.1.0.0 jika kita membuat Package untuk pertama kali, dan pada pilihan Architecture centang pada Neutral lalu klik Create.

- Visual Studio akan rebuild project kita. Jika berhasil di-Create, maka akan muncul tampilan seperti ini. Pada target device pilih local machine, lalu klik Launch Windows App Certification Kit.

- Jika terdapat pemberitahuan yang meminta untuk melakukan update Windows App Certification Kit(WACK), pastikan untuk melakukan hal tersebut terlebih dahulu karena akan memengaruhi proses sertifikasi dan menyebabkan aplikasi kita tidak lolos sertifikasi.

- Setelah itu WACK akan memvalidasi aplikasi kita. Komputer akan menginstall, menjalankan, dan menutup aplikasi kita secara otomatis pada tahap ini. Jadi disarankan untuk tidak melakukan interaksi apapun sampai proses ini selesai.

- Jika lolos proses sertifikasi, maka akan ada tulisan PASSED pada Overall Result. Jika tidak, maka Click here to view the results untuk melihat dimana letak kesalahan aplikasi kita yang menyebabkan tidak lolos sertifikasi.

4. Upload Package to Windows Store

- Kembali lagi ke halaman Dashboard pada akun Windows Store

- Klik Selling Details. Disini kamu menentukan harga jual dari aplikasi yang kamu buat. Pada Price Tier pilih Free.

- Centang seluruh negara, kecuali China, South Africa, Korea, dan Brazil.

- Pilih opsi Release my app as soon as it passes certification untuk Release Date, kemudian klik Save.

- Setelah itu, klik pada bagian Services. Untuk sementara abaikan dulu bagian ini dan langsung klik Save.

- Untuk bagian Age rating and rating certificates, pilih umur yang sesuai dengan target audiens dari aplikasi yang kamu buat.

- Untuk bagian Cryptography, pilih opsi No untuk pertanyaan "Does this app call, support, contain, or use cryptography or encryption?"

- Centang pertanyaan "I confirm that this app is widely distributable to all jurisdictions without government review, approval, license or technology-based restriction".

- Setelah itu pilih pada bagian Packages, dimana kita dapat mengupload file Package yang telah kita sertifikasi tadi.

- Kemudian isi informasi aplikasi kamu pada bagian Description. Sertakan 1 buah screenshot dengan ukuran yang tertera dan ekstensi .png.

Jika seluruh bagian yang diisi tadi sudah bertanda cek, klik tombol Submit for Certification.

Setelah ini, aplikasi anda akan diuji QA pada Windows Store. Jika telah ter-publish, maka aplikasi kita telah terdaftar pada Windows Store dan kita akan diberi link dimana aplikasi kita dapat di-download.

Referensi:

How to publish your Windows 8 App to the Store

Mengupload Aplikasi ke Windows Store

Read more

Implementasi Fitur-Fitur Aplikasi "Guess The Code" - Part 2

6. Button Visibility
Ketika kita menjawab dengan jawaban yang benar, akan muncul tombol Next Level >. Kita membuat sebuah button tidak kelihatan dengan membuat Visibility-nya menjadi Collapsed seperti ini

<Button x:Name="NextBtn" Content="Click" Visibility="Collapsed"/>

Agar buttonnya muncul saat kita klik button Submit, pada event handler button Submit tersebut kita membuat Visibility dari tombol NextBtn menjadi Visible dengan baris kode seperti ini

NextBtn.Visibility = Visibility.Visible;

7. Data Binding
Konsep Data Binding digunakan untuk membuat suatu fitur aplikasi bersifat dinamis dengan menulis kode yang lebih sedikit dari pada membuat fitur yang bersifat statis. Pada aplikasi "Guess The Code", akan muncul tanda benar/salah saat kita meng-submit jawaban

Namun tandanya akan berubah ketika jawaban yang kita masukkan benar

Biasanya kita menaruh gambar dengan memasukkan source gambar secara statis seperti ini.

<Image Source="Gambar.jpg"/>

Agar gambar tersebut bersifat dinamis, kita memakai data binding seperti contoh berikut ini

<Image Source="{Binding Text, 
                ElementName=y1, 
                Mode=OneWay, 
                UpdateSourceTrigger=PropertyChanged}" 
                Width="30"/>

Kita akan mem-binding sebuah text dari elemen dengan nama y1, maka kita akan membuat sebuah TextBlock dengan nama y1, tapi text ini tidak untuk ditampilkan. Jadi kita membuat Visibility pada TextBlock ini menjadi Collapsed

<TextBlock x:Name="y1" Visibility="Collapsed"/>

Gambar tersebut akan muncul/berubah ketika kita meng-submit jawaban kita, agar pada saat kita meng-klik Submit muncul gambar, pada event handler di button tersebut kita membuat text pada elemen y1 menjadi nama gambar yang kita inginkan. Misalnya pada aplikasi "Guess The Code", jika jawabannya benar, maka muncul tanda check. Namun jika jawaban salah, maka muncul tanda cross.

Jadi, kode pada event handler-nya seperi ini

if (stdio.Text == "<stdio.h>")
{
   y1.Text = "Assets/GreenCheck.JPG";
}
else
{
   y1.Text = "Assets/RedCross.JPG";
}

Jika jawaban yang kita submit adalah <stdio.h>, maka text pada y1 akan menjadi Assets/GreenCheck.JPG. Karena source gambar tadi kita binding dengan elemen y1, maka source gambar tersebut adalah text yang ada pada y1. Jadi kode imagenya saat aplikasi berjalan akan menjadi seperti ini

<Image Source="Assets/GreenCheck.JPG"/>

Read more

Implementasi Fitur-Fitur Aplikasi "Guess The Code" - Part 1

Guess The Code adalah sebuah aplikasi game edukasi dengan cara memperbaiki kode-kode program agar menghasilkan output yang sesuai. Terdapat 10 level permainan pada aplikasi ini. Kode program pada setiap level dibuat dengan menggunakan bahasa C.

Aplikasi ini dapat di-download disini:

Guess The Code (For Windows Desktop)

Guess The Code (For Windows Phone)

Silahkan dicoba terlebih dahulu untuk mengetahui apa saja yang terdapat pada aplikasi tersebut.

Aplikasi ini dibuat dengan bahasa C# dan XAML dengan menggunakan Visual Studio. Fitur-fitur yang terdapat pada aplikasi ini adalah

1. Page Navigation

Misalnya pada tombol Blog berwarna biru, kita membuat tombol yang akan pindah ke halaman tempat dimana kita dapat melihat isi dari sebuah Blog. Pertama, buatlah sebuah file .xaml baru yang diberi nama Blog.xaml. Lalu pada MainPage, buatlah sebuah button dengan event handler bernama PindahHalaman seperti ini

<Button Content="Blog" Click="PindahHalaman" />

Kemudian di file MainPage.xaml.cs, pada method PindahHalaman, tambahkan kode berikut

if (this.Frame != null)
{
    this.Frame.Navigate(typeof(Blog));
}

2. Web View

Pada file Blog.xaml, kita membuat suatu area tempat kita dapat melihat sebuah blog dengan memerlukan koneksi internet. Ini dinamakan WebView, misalnya kita membuat sebuah WebView bernama LihatBlog dengan ukuran 1000 x 1000

<WebView x:Name="LihatBlog" Width="1000" Height="1000" />

Kemudian di file Blog.xaml.cs, pada method OnNavigatedTo di bagian NavigationHelper registration, tambahkan kode berikut

Uri targetUri = new Uri(@"http://arliansyahazhary.blogspot.com/2015/03/daftar-subjek-pemrograman-bahasa-c.html");
LihatBlog.Navigate(targetUri);

WebView dengan nama LihatBlog yang kita buat akan terhubung dengan link http://arliansyahazhary.blogspot.com/2015/03/daftar-subjek-pemrograman-bahasa-c.html.

3. Scroll Viewer
Scroll Viewer digunakan ketika kita membuat suatu tampilan yang memiliki teks dan isi yang sangat banyak pada area terbatas. Misalnya seperti ini

Pada tampilan tersebut terdapat 2 Scroll Viewer yang bersebelahan. Cara pertama dalam pembuatannya adalah dengan membagi grid menjadi 2 kolom yang sama besar menggunakan kode seperti ini

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

Lalu tambahkan 2 Scroll Viewer di bawahnya

<ScrollViewer Grid.Column="0">
   <!-- TODO -->
</ScrollViewer>
<ScrollViewer Grid.Column="1">
   <!-- TODO -->
</ScrollViewer>

4. Paragraph and Text Coloring

Mewarnai suatu text sangatlah mudah. Melalui Visual Studio Blend, cukup dengan mem-blok sebagian text lalu diberi warna dengan menggunakan Brush, misalnya int main().  Karena aplikasi "Guess The Code" menggunakan ScrollViewer, kita tidak bisa menggunakan TextBlock. Maka kita gunakan RichTextBlock lalu di dalamnya digunakan Paragraph seperti ini

<ScrollViewer>
   <RichTextBlock>
      <Paragraph>
        <!-- TODO -->
      </Paragraph>
   </RichTextBlock>
</ScrollViewer>

Kita ingin mewarnai sebagian text yang terdapat di dalam Paragraph dengan menggunakan xaml, misalnya int main(), kita menggunakan Run seperti ini

<Run Foreground="Blue">int</Run> main()

Untuk membuat line break agar suatu text berada pada baris di bawah text yang lain, cukup dengan menambahkan tag LineBreak

Text 1
<LineBreak/>
Text 2

5. Inline Textbox

Inline Textbox adalah textbox yang berada satu baris dengan suatu text. Karena kita menggunakan Paragraph, maka kita memakai tag InlineUIContainer lalu di dalamnya terdapat TextBox. Misalnya kita ingin menambahkan TextBox yang berada sebaris dengan text printf, gunakan kode seperti ini di diantara tag Paragraph

printf(
<InlineUIContainer>
   <TextBox />
</InlineUIContainer>
);

Akan lanjut di Part 2 . . .

Read more

Desain UI dan Logo Aplikasi "Guess The Code" dengan Visual Studio Blend dan Vector Graphic Editor

Visual Studio Blend adalah tool yang memudahkan kita untuk mendesain UI sebuah aplikasi. Cara membuka Blend bisa dilakukan dengan klik kanan pada file .xaml kita, lalu pilih Open in Blend.

Setelah kita membuka Blend, akan muncul tampilan seperti ini.

Platform windows teranyar saat ini identik dengan Tile Design, yaitu tampilan-tampilan yang terdiri dari petak-petak berwarna seperti pada gambar Guess The Code di atas atau seperti pada tampilan Start pada Windows 8/8.1.

Namun tampilan petak tersebut bukan hanya sebuah tampilan, namun juga bisa di-klik untuk membuka suatu aplikasi ataupun berupa link yang mengarah ke suatu halaman.

Kita bisa membuat seperti itu pada aplikasi kita. Pertama, klik Rectangle pada sebelah kiri Blend.

Kemudian buatlah sebuah petak pada layar monitor tersebut. Kita dapat mengatur warna petak tersebut pada bagian Brush di sebelah kanan layar, perhatikan juga ketika kita menambahkan petak tersebut, akan bertambah sebuah Rectangle pada bagian Object and Timeline. 

(P.S: Kamu bisa mengunjungi situs flatuicolors.com untuk memilih warna, klik pada suatu warna lalu paste kode heksadesimal dari warna tersebut pada bagian brush)

Setelah kita mengatur dengan warna dan ukuran yang sesuai, tambahkan Button pada petak tersebut dengan meng-klik tool yang sederetan dengan tool Rectangle tadi. Lalu pada bagian Object and Timeline, klik kanan pada Button lalu pilih Edit Text. Misalnya saya mengedit teks tersebut menjadi Level 4.

Langkah selanjutnya kita akan membuat halaman baru pada aplikasi kita, tutup visual studio blend dan klik save. Pada Visual Studio, ketika muncul kotak dialog, pilih Yes to All. Kemudian pada Solution Explorer, klik kanan pada project Windows lalu pilih Add -> New Item. Pilih Basic Page.

Ketika muncul suatu kotak dialog, pilih Yes. Secara otomatis, visual studio akan memberi nama pada file tersebut BasicPage1.xaml ketika kita pertama kali membuat halaman baru. Kita kembali lagi ke MainPage.xaml, klik button yang telah kita buat tadi, lalu pada Properties klik ikon yang bergambar halilintar, kemudian pada bagian Click kita akan menambahkan Event Handler dengan nama PindahHalaman, klik 2x pada kata PindahHalaman tersebut dan otomatis pada file MainPage.xaml.cs akan membuat method dengan nama PindahHalaman. Pada method PindahHalaman, tambahkan kode berikut ini.

if (this.Frame != null)
{
   this.Frame.Navigate(typeof(BasicPage1));
}

Maksud dari kode tersebut adalah jika kita berada pada suatu halaman, kita akan di-Navigate-kan ke halaman yang bernama BasicPage1. Coba jalankan aplikasi dengan menekan CTRL + F5, lalu klik pada Button yang kita buat tadi dan lihat hasilnya.
Pada aplikasi Guess The Code yang sedang saya kembangkan, terdapat 10 petak level yang jika di klik pada salah satunya maka akan mengarah ke level tertentu. Misalnya saya meng-klik pada petak Level 4, maka akan mengarah ke halaman Level4.

Ketika kita menjalankan aplikasi kita, secara otomatis tampilan Start pada Windows akan menampilkan link tile ke aplikasi kita.

Secara default, aplikasi kita akan tampil sebagai petak berwarna hitam. Namun pada aplikasi "Guess The Code", saya menambahkan logo pada aplikasi saya. Kamu bisa membuat logo tersebut dengan Vector Graphic Editor seperti Inkscape, CorelDraw, Adobe Illustrator, dan lain-lain.
Ini adalah logo yang saya buat untuk ukuran Wide Logo (310 x 150) pixel.

Cara menambahkan logo tersebut, klik Package.appxmanifest pada Solution Explorer, lalu pilih pada bagian Visual Assets, maka akan muncul tampilan seperti ini.

Terdapat berbagai spesifikasi ukuran logo, kamu dapat mengatur ukuran logo pada picresize.com. Pada bagian Show name terdapat 3 checkbox untuk mengatur pada ukuran mana logo kita menampilkan nama dari aplikasi yang kita buat dan pada ukuran mana yang hanya menampilkan logo saja. Kita memberi nama pada bagian Short name yang terdapat di atas Show name. Dan pada sebelah kiri layar terdapat beberapa spesifikasi ukuran logo, yaitu Square 70 x 70, Square 150 x 150, Wide 310 x 150, Square 310 x 310, Square 30 x 30.

Pada tampilan Start, kita dapat mengatur ukuran logo yang ditampilkan pada aplikasi kita dengan klik kanan pada aplikasi tersebut , pilih resize, lalu pilih ukuran yang mau ditampilkan.

Lalu perhatikan, saat kita memulai menjalankan aplikasi kita, pertama-tama akan muncul tampilan seperti ini.

Ini dinamakan Splash Screen, kita bisa mengubah gambar tersebut pada bagian Splash Screen di Visual Assets tadi. Pada aplikasi "Guess The Code", saya mengubah tampilan Splash Screen menjadi seperti ini.

Read more

Membuat Aplikasi Berbasis Windows dengan Visual Studio

Visual Studio adalah IDE untuk mengembangkan aplikasi cross-platform, salah satunya adalah platform Windows. Kamu bisa mendapatkan Visual Studio di dreamspark.com atau disini.

Langsung saja, ketika pertama kali membuka Visual Studio, klik New Project -> Installed -> Templates -> Visual C#/Basic -> Store Apps , lalu akan ada 3 pilihan yaitu Universal Apps, Windows Apps, dan Windows Phone Apps.

Universal Apps

Template untuk membuat aplikasi yang dapat dijalankan di Windows Desktop dan Windows Phone.

Windows Apps

Template untuk membuat aplikasi yang dapat dijalankan di Windows Desktop.

Windows Phone Apps

Template untuk membuat aplikasi yang dapat dijalankan di Windows Phone.

Pertama-tama kita akan memulai mengembangkan Universal Apps. Pada bagian Universal Apps kita dihadapkan dengan 4 pilihan, kita mulai dengan Blank App untuk memulai membuat aplikasi dari nol (sebenarnya template Blank App tidak 100% blank). Klik OK. Visual Studio akan membuat beberapa baris kode default secara otomatis, serta membuat 3 file project sekaligus yang dapat kita lihat pada bagian Solution Explorer di sebelah kanan.

Terdapat 2 project yaitu Windows 8.1 dan Windows Phone 8.1, dan 1 project lagi yaitu Shared yang menghubungkan project Windows dan Windows Phone. Kenapa perlu dihubungkan? Karena pada dasarnya Universal Windows Apps adalah aplikasi yang dapat berjalan di desktop maupun di mobile. Jadi, dalam pengembangan Universal Apps akan terdapat kemungkinan fitur-fitur aplikasi yang sama baik di desktop maupun di mobile, yang berbeda hanyalah tampilannya saja.

Ketika kita membuka project Windows 8.1, perhatikan pada file MainPage.xaml dan MainPage.xaml.cs

MainPage adalah file yang akan pertama kali muncul ketika kita menjalankan aplikasi. MainPage.xaml adalah file untuk mendesain halaman MainPage, sedangkan MainPage.xaml.cs adalah file dimana kita membuat behaviour dan logic dari halaman MainPage (.cs adalah ekstensi file bahasa C#). 

Ketika kita klik 2x pada MainPage.xaml, akan muncul tampilan seperti ini.

Gambar monitor tersebut adalah tampilan aplikasi kita(karena kita memilih Blank App maka tampilan awalnya masih kosong), sedangkan di bawahnya adalah kode XAML dimana kita dapat mendesain tampilan(UI) melalui kode. Kita juga bisa menambahkan kontrol-kontrol tampilan melalui toolbox yang ada pada sebelah kiri(jika toolbox-nya tidak ada, pilih Window -> Reset Window Layout). Setelah kita membuka toolbox, pilih All XAML Controls.

Misalnya kita ingin menambahkan button, klik pada Button lalu drag ke gambar monitor tersebut. Perhatikan pada kode XAML-nya ketika kita men-drag button tersebut, secara otomatis Visual Studio akan membuat sendiri kode XAML untuk menampilkan button setelah kita men-drag button tersebut.

Kita juga bisa menambahkan TextBlock untuk menampilkan text. Caranya klik TextBlock pada toolbox tadi lalu drag ke monitor. Kita bisa mengedit text tersebut dengan klik kanan pada TextBlock yang telah kita tambahkan tadi lalu pilih Edit Text.

Perhatikan pada kode XAML-nya, kita juga bisa memberikan nama pada komponen-komponen(seperti Button dan TextBlock) dengan mengetik x:Name="" (isi nama diantara tanda kutip). Misalnya saya memberi nama pada TextBlock dengan nama SuatuText.

Kita akan membuat Button kita menampilkan sebuah text ketika kita meng-klik button tersebut. Caranya adalah klik pada Button tersebut, lalu pada Properties klik pada icon gambar halilintar(Reset Window Layout jika Properties tidak muncul).

Selanjutnya pada bagian Click, isi nama sesuai selera anda(misalnya saya memberi nama Tampil), lalu klik 2x pada kata Tampil tersebut, secara otomatis kita langsung diarahkan pada file MainPage.xaml.cs dan Visual Studio secara otomatis membuat method dengan nama Tampil pada kode C# kita.

Pada method Tampil, tambahkan kode berikut.

SuatuText.Text = "Hello!";

Maksud dari kode tersebut adalah, pada komponen yang bernama SuatuText, kita mengatur textnya menjadi "Hello!". Kode tersebut akan dieksekusi ketika kita mengklik Button, dan komponen TextBlock dengan nama SuatuText akan menampilkan kata "Hello!". Kita coba jalankan aplikasi kita dengan klik tombol Play berwarna hijau yang terdapat tulisan Local Machine, atau cukup dengan menekan CTRL + F5.

Saat aplikasi berjalan, coba klik tombol Button dan hasilnya akan menampilkan teks Hello!.

Read more