Speaking @ Global Azure Bootcamp Chapter Bandung

Last saturday, on April,25th 2015, Dycode Edu and Microsoft Indonesia organized Global Azure Bootcamp in Bandung. I was invited to speak and introduce one of great features in Azure : Azure Mobile & Engagement.

I prepared a demo which we develop a working prototype mobile application. The app was photo-sharing app, kinda like instagram clone that we develop with minimal backend effort because we leveraged Azure Mobile, Blob and Engagement as our backend as a service. It is very nice crowd, 40-ish active participant that come to the venue.

Here is my deck :

Posted in Microsoft MVP, Silverlight, Windows Phone | Leave a comment

Pengganti BingMapsTask di Windows Phone 8.1

Dalam kesempatan mengerjakan salah satu aplikasi menggunakan UAP (Universal Application Platform) ada beberapa hal yang ditemui dan berbeda dari sebelumnya jika menggunakan Windows Phone 8.1 Silverlight. Memang selama ini, saya berusaha menahan untuk tidak buru-buru melakukan upgrading aplikasi ke platform baru. Platform Windows Runtime hanya digunakan jika aplikasi benar-benar dibuat setelah UAP dirilis.

Salah satunya adalah bagaimana cara menggunakan atau memanggil aplikasi Peta bawaan, yaitu Maps.

Jika sebelumnya kita menggunakan  Launcher dengan kode seperti ini :

BingMapsTask bingMapsTask = new BingMapsTask();

//Omit the Center property to use the user's current location.
//bingMapsTask.Center = new GeoCoordinate(47.6204, -122.3493);

bingMapsTask.SearchTerm = "coffee";
bingMapsTask.ZoomLevel = 2;

bingMapsTask.Show();

Pada Windows Phone 8.1 diubah menjadi seperti ini :

double lat = -6.149494;
double lan = 106.846697;

string uriToLaunch = @"bingmaps:?rtp=post.{0}_{1}~pos{2}_{3}";

var position = ResourceHelper.Instance.CurrentPosition;

string uri = String.Format(uriToLaunch, position.Coordinate.Latitude, position.Coordinate.Longitude,lat, lan);

var success = await Windows.System.Launcher.LaunchUriAsync(new Uri(uri,UriKind.Absolute));

Terdapat format uri yang harus diikuti. Skema bingmaps: sekarang menggantikan MapsTask dan MapsDirectionsTask. Contoh diatas adalah untuk menampilkan jalur dari satu titik ke titik tertentu. Untuk format lengkap silahkan baca dokumentasinya disini.

Posted in Windows Phone | Tagged , | Leave a comment

UrlEncode di WinRT

If your are looking HttpUtility in WinRT, you will search for a while. All helpers to encode/decode Url / Html are now availbale in the namespace System.Net.WebUtility.

System.Net.WebUtility.HtmlDecode(string);
System.Net.WebUtility.HtmlEncode(string);
System.Net.WebUtility.UrlEncode(string);
System.Net.WebUtility.UrlDecode(string);
Posted in Windows 8 | Tagged | Leave a comment

Working with XAML Workshop in Maranatha University

This is very rare occasion. My friend, Mr Risal, a lecturer from Maranatha University invited me to deliver 3-hours workshop for his students. Advance programming students have learn about building windows phone application. Now it’s time for them to get how-to and tips to build great user interface using XAML Technology.

I explained XAML and its usage,especially one I used in practical implementation in actual project. They’ve learned about all the controls. I completed their knowledge about using style & resource in XAML, re-templating control and build user control.

In 2nd session, I taught about data binding, and blendability concept to help them working in team more efficient then before.

Here is my slide http://www.slideshare.net/poedja/working-with-xaml. It contains more demos than explanation.

Posted in Windows Phone | Tagged | Leave a comment

Pinjamkan Si Kecil Perangkat Windows Phone Anda dengan Kid’s Corner

Bagi sebagian banyak orang, perangkat smartphone tidak hanya digunakan oleh dirinya sendiri tetapi juga saling berbagi dengan orang lain. Bayangkan seorang ayah yang meminjamkan perangkat smartphone agar anak-nya dapat bermain game dengan leluasa. Selama ini ada kekhawatiran sang Anak tanpa sengaja mengirimkan email acak ke kerabat Anda, membeli suatu item dan menggunakan kartu kredit atau melakukan hal-hal yang dapat mengubah konfigurasi perangkat Anda.

Bagi Anda yang memiliki perangkat Windows Phone, Anda dapat menggunakan fitur bawaan sistem operasi untuk membatasi hak akses terhadap perangkat Anda, yaitu Kids Corner.

Kid’s Corner memang ditujukan sedemikian rupa sehingga orang tua dapat berbagi perangkat yang sama dengan anak-anaknya. Dengan Kids Corner, orang tua memiliki hak penuh untuk mengatur aplikasi, games, musik dan video apa saja yang dapat digunakan dan dimainkan oleh sang anak.

Untuk mengaktifkan Kids Corner caranya cukup mudah.

  • Buka Aplikasi Settings dan pilih fitur Kid’s Corner
    wp_ss_20140908_0001
  • Atur Konten Video,Aplikasi, Musik dan Game yang diperbolehkan untuk anak Anda. Anda dapat mengatur sebanyak mungkin konten tersebut
    wp_ss_20140908_0004
  • Pilih launch kids’ corner untuk masuk ke tampilan Kid’s Corner
  • Untuk selanjutnya, setiap kali Anda ingin meminjamkan perangkat, bisa dilakukan dengan mengunci layar lalu melakukan gerakan swipeke kanan. Secara otomatis layar Kid’s Corner akan muncul dan perangkat siap digunakan.
    wp_ss_20140908_0005
  • Kids Corner akan berisikan berbagai konten yang sudah anda
    wp_ss_20140908_0006
  • Posted in Windows Phone | Leave a comment

    Kompas Teka Teki Silang Sudah Tersedia untuk Windows Phone

    wp_ss_20140907_0002wp_ss_20140907_0003wp_ss_20140907_0010

    Harian Kompas beberapa waktu yang lalu telah merilis aplikasi Kompas Teka Teki Silang untuk Windows Phone. Teka Teki Silang Harian Kompas merupakan salah satu seri permainan TTS yang banyak digandrungi oleh kalangan pecinta puzzle. Selama ini, TTS diterbitkan setiap minggu pada harian Kompas dan dikumpulkan menjadi buku dan diterbitkan setiap bulan. Sekarang, Anda dapat memainkannya pada smartphone Windows Phone Anda dan mendapatkan update konten dengan lebih cepat.

    Anda dapat memilih beragam koleksi TTS yang tersedia dan memainkannya kapan dan dimanapun Anda mau. Untuk setiap puzzle, Anda dapat berlomba dengan para pecinta puzzle lainnya untuk mendapatkan skor tertinggi sehingga membuat permainan menjadi lebih menarik.

    wp_ss_20140907_0005wp_ss_20140907_0006wp_ss_20140907_0007

    Fitur utama aplikasi Kompas TTS :

    • Akses Konten Terbaru dan Terpopuler : Dapatkan ratusan puzzle terpopuler dan dapatkan puzzle terbaru setiap minggu.
    • Klasemen Pemain : Anda dapat memilih mode hitung waktu atau tanpa waktu. Pada mode hitung waktu, setiap Anda menyelesaikan satu puzzle maka catatan waktu dan usaha Anda akan disimpan dan dibandingkan dengan pemain yang lain
    • Bantuan : Anda dapat menggunakan dua pilihan bantuan, yaitu bantuan jawaban dan bantuan melalui media sosial. Bantuan jawaban akan memunculkan seluruh jawaban dari pertanyaan puzzle. Bantua media sosial akan menghubungkan Anda dengan rekan-rekan Anda sesama pengguna media sosial
    • Offline Access : Setiap TTS yang sudah diunduh dapat dimainkan tanpa memerlukan koneksi internet.
    • Arsip Teka-Teki Silang : Setiap pemain dapat memperoleh arsip teka-teki silang yang sudah pernah diterbitkan oleh Kompas sebelumnya.

    Kompas TTS tersedia secara gratis dan Anda dapat memperoleh ratusan koleksi permainan TTS secara gratis. Anda juga dapat mendapatkan akses premium dengan mendaftarkan diri ke situs Harian Kompas.

    Download

    wp_logo

    Posted in Windows Phone | Leave a comment

    Async & Await in Windows Phone

    Aplikasi Windows Phone 8.1 adalah aplikasi dengan antarmuka yang full screen, modern dan responsif. Nilai responsif dicapai dengan memindahkan eksekusi kode sebanyak mungkin diluar UIThread, sehingga setiap waktu UIThread dapat fokus untuk menerima masukan dari pengguna. Windows Phone Runtime mempermudah pemrogram untuk melakukan ini dengan menyediakan banyak API yang asinkronus dan juga memperkenalkan dua operator baru yaitu await dan async yang dapat kita gunakan untuk membuat fungsi-fungsi menjadi asinkronus. Pemrograman asinkronus mulai dikenalkan pada Windows Phone 8.0 dan semakin luas digunakan pada versi 8.1

    Sebagai pemrogram, kita pun wajib untuk cermat melihat di bagian mana saja kode bisa dibangun dengan gaya asinkronus ini. Dengan pemrograman asinkronus maka aplikasi tidak perlu selalu menunggu operasi yang mungkin memakan waktu lama dan tetap membiarkan antarmuka responsif dan dapat menerima masukan dari pengguna. Untuk fungsi yang asinkronus, secara konvensi dinamakan dengan kata kerja dan diakhiri dengan kata “Async”. Hal ini berlaku untuk berbagai fungsi di dalam API Windows Phone Runtime dan kepada pemrogram juga disarankan untuk mengikuti konvensi ini jika membangun fungsi asinkronus di dalam aplikasi. Setiap fungsi yang hendak dipanggil secara asinkronus , ditandai dengan operator async dan ketika fungsi tersebut dipanggil diberikan operator await.

    Untuk memahami penggunaan kedua operator baru tersebut mari kita membuat sebuah program sederhana yang mengimplementasikan mekanisme asinkronus. Silahkan ikuti langkah-langkah dibawah ini :

    1. Jalankan Visual Studio 2013 Anda (selanjutnya disebut Visual Studio)

    2. Pilih File > New Project. Kotak New Project akan muncul. Panel disebelah kiri akan menyediakan pilihan template yang dapat digunakan. Pada panel kiri, klik Installed sehingga akan menampilkan Visual Basic atau Visual C# dan pilih Store Apps, lalu pilih Windows Phone Apps.

    3. Buatlah sebuah proyek Windows Phone Apps dengan template Pivot App baru dan beri nama Program_Async.

    image

    4. Modifikasi berkas XAML PivotPage.xaml. Temukan kontrol ListView dan buat modifikasi seperti berikut ini :

    
                        
                            
                                
                                    
                                    
                                
                            
                        
                    
    

    5. Buka berkas PivotPage.xaml.cs dan buatlah sebuah fungsi bernama GetTitleFeedAsync. Potongan kode ini akan mengambil sejumlah judul feed dari sebuah website. Karena kembalian dari fungsi ini adalah string dan kita mengingikan fungsi ini dieksekusi secara asinkronus maka kita tambahkan operator Async.

    private async Task GetTitleFeedAsync()
            {
             Windows.Web.Syndication.SyndicationClient client = new SyndicationClient();
    
                // Force the SyndicationClient to download the information.
                client.BypassCacheOnRetrieve = true;
    
                Uri feedUri
                    = new Uri("http://windowsteamblog.com/windows/b/windowsexperience/atom.aspx");
                String result = String.Empty;
                try
                {
                    // Call SyndicationClient RetrieveFeedAsync to download the list of blog posts.
                    SyndicationFeed feed = await client.RetrieveFeedAsync(feedUri);
    
                    // The rest of this method executes after await RetrieveFeedAsync completes.
                    ListViewFeed.ItemsSource = feed.Items;
    
                }
                catch (Exception ex)
                {
                    // Log Error.
                    result =
                        "I'm sorry, but I couldn't load the page," +
                        " possibly due to network problems." +
                        "Here's the error message I received: "
                        + ex.ToString();
                }
    
            }

    Operator await

    Perhatikan baris SyndicationFeed feed = await client.RetrieveFeedAsync(feedUri) menggunakan operator await untuk memanggil fungsi asinkronus RetrieveFeedAsync. Bandingkan jika menggunakan blok kode sinkronus misalnya RetrieveFeed ,sehingga kode kita menjadi SyndicationFeed feed = client.RetrieveFeed(feedUri) dibandingkan blok kode yang ditulis sebelumnya. Eksekusi aplikasi akan berhenti hingga RetrieveFeed selesai dieksekusi dan selama aplikasi berhenti maka aplikasi tidak dapat memberikan respon terhadap event yang lain. Penggunaan operator await membuat blok kode tidak terlihat begitu berbeda dengan eksekusi kode sinkronus namun compiler secara otomatis mengeksekusi kode tersebut secara asinkronus.

    6. Fungsi GetFeedAsync kita panggil di dalam fungsi LoadState. LoadState merupakan fungsi standar bawaan dari template. Fungsi ini akan dipanggil setiap kali halaman PivotPage.xaml dituju.

    private async void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)
            {
                // TODO: Create an appropriate data model for your problem domain to replace the sample data
               // var sampleDataGroup = await SampleDataSource.GetGroupAsync("Group-1");
               // this.DefaultViewModel[FirstGroupName] = sampleDataGroup;
    
                await GetFeedAsync();
    
            }

    Tekan F5 dan perhatikan hasilnya.

    image

    Posted in Windows Phone | Leave a comment

    Rounded Image for Profile Picture

    Akhir-akhir ini saya sering melihat penggunakan rounded image sebagai profile picture dari aplikasi yang berbasiskan pada pengguna. Memang ini sedikit berlawanan dengan panduan desain dari Microsoft, yang cenderung lebih bersifat tile-based. Namun, kadangkala tentu Anda ingin keluar dari pakem dan menghasilkan desain yang berbeda.

    Ada beberapa cara yang bisa digunakan untuk mendapatkan hasil akhir yang sama untuk membuat profile picture menjadi lingkaran. Saya tidak akan membahas-nya dari sisi performa, tapi saya akan berikan contoh bagaimana melakukannya dengan tiga kontrol yang berbeda :

    1. Border
    2. Ellipse
    3. Image

    Hasil akhir dari cara ini kira-kira adalah seperti gambar dibawah :

    image

    Border

    Menggunakan Border untuk mendapatkan rounded image dilakukan dengan memasang Image sebagai background dari border. Setelah itu dilakukan pengaturan properti RadiusX dan RadiusY dari border tersebut.

    
    <Border x:Name="PanelPicture" Grid.Column="2" Margin="0,0,0,12" HorizontalAlignment="Center" Height="75" Width="75" CornerRadius="100" VerticalAlignment="Center">                       <Border.Background>                            <ImageBrush Stretch="UniformToFill" ImageSource="{Binding CurrentUser.profile_picture}"/>                        </Border.Background>                    </Border>
    

    Ellipse

    Ellipse adalah kontrol shape yang berbentuk non-segi atau elipse . Menggunakan Ellipse untuk mendapatkan rounded image dilakukan dengan memasang Image sebagai background dari sebuah ellipse. Setelah itu dilakukan pengaturan tinggi dan lebar dari ellipse yang ingin dihasilkan.

     

    
    <Ellipse Grid.Column="2" Height="80" Width="80">                       <Ellipse.Fill>                            <ImageBrush ImageSource="{Binding CurrentUser.profile_picture}" AlignmentX="Center" AlignmentY="Center" />                        </Ellipse.Fill>                    </Ellipse>
    
     
    

    Image

    Image adalah kontrol standar untuk menampilkan sebuah gambar. Untuk menghasilkan rounded image dapat dilakukan dengan melakukan pengaturan clipping dari kontrol image. Clipping dilakukan dengan mengatur nilai Center, RadiusX dan RadiusY yang dinginkan.

    
     
    
    <Ellipse Grid.Column="2" Height="80" Width="80">                       <Ellipse.Fill>                            <ImageBrush ImageSource="{Binding CurrentUser.profile_picture}" AlignmentX="Center" AlignmentY="Center" />                        </Ellipse.Fill>                    </Ellipse>
    
    Posted in Windows Phone | Leave a comment

    Rounded Button di Windows Phone

    Dalam kesempatan baru-baru ini saya membutuhkan untuk membuat tampilan ‘button’ dengan rounded-corner, salah satu hal yang tidak disarankan sebenarnya oleh panduan desain aplikasi Windows Phone.

    Untuk membuat tampilan Button yang rounded-corner kita bisa menggunakan dua cara yaitu :

    1. Menggunakan asset gambar yang berbentuk rounded corner
    2. Melakukan re-templating

    Tentunya saya ingin melakukan dengan cara yang lebih ‘native’, menggunakan re-templating dari kontrol standar Button. Dengan menggunakan kontrol standar juga kita tidak perlu mengubah sifat natural dari sebuah button, seperti state yang dimiliki atau efek tilt yang menjadi visual cue untuk user. Untuk melakukan re-templating, kita cukup mengubah template yang digunakan kontrol Button dan menggunakan kontrol-kontrol yang sesuai. Untuk mendapatkan layout rounded saya gunakan border dengan radius tertentu.

    
    <Button x:Name="ButtonLogin"  VerticalAlignment="Bottom" Margin="0,0,0,120" Opacity="0.8">
    
                    <Button.Template>
    
                        <ControlTemplate>
    
                            <Border BorderThickness="2" Width="300" Height="80" CornerRadius="5">
    
                                <Border.BorderBrush>
    
                                    <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
    
                                        <GradientStop Color="#FFFFFFFF"/>
    
                                        <GradientStop Color="#FFFFFFFF"/>
    
                                    </LinearGradientBrush>
    
                                </Border.BorderBrush>
    
                                <TextBlock Text="LOGIN WITH FACEBOOK" FontFamily="Segoe WP" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    
                            </Border>
    
                        </ControlTemplate>
    
                    </Button.Template>
    
                </Button>

    Hasil akhir dari kode diatas adalah seperti ini :

    image

    Posted in Windows Phone | Leave a comment

    Memilih Model Aplikasi pada Windows Phone 8.1

    Kita telah mengetahui bagaimana Windows Phone 8.1 memiliki dua model. Dua model aplikasi ini serupa tapi tak sama. Windows Phone Silverlight dan Windows Phone Store,keduanya dapat dikembangkan menggunakan bahasa C# namun memiliki signature API yang tidak seluruhnya sama. Keduanya juga bisa menggunakan XAML untuk desain antarmuka tetapi memiliki stack yang seluruhnya berbeda. Anda dapat menggunakan pengetahuan C# dan XAML yang selama ini Anda miliki namun pada kenyataan implementasi, Anda mau tidak mau harus beradaptasi dengan model yang ditawarkan.

    Keputusan untuk memilih, tetap bertahan di Windows Phone 8, upgrade ke Windows Phone 8.1 Silverlight ataupun melakukan porting ke model Windows Phone Store sepenuhnya ada di tangan pengembang. Tidak ada semacam silver-bullet, panduan yang dapat digunakan untuk memutuskan bahwa salah satu model lebih baik dari model yang lainnya. Pada bagian ini akan dijelaskan, bagaimana dasar berpikir yang sebaiknya digunakan untuk memilih apakah sebagai pengembang, Anda akan stay di Windows Phone 8, upgrade ke Windows Phone 8.1 Silverlight atau melakukan porting ke Windows Phone 8.1.

    Semua aplikasi Windows Phone Silverlight akan terus dapat digunakan di perangkat yang menggunakan Windows Phone 8 dan Windows Phone 8.1. Kita dapat terus (stay) menggunakan versi ini jika tidak membutuhkan fitur yang hanya tersedia di Windows Phone 8.1. Lagipula, tentu saja di masa awal peluncuran, sebaran pengguna yang meng-upgrade ke versi terbaru belum terlalu banyak. Anda pun dapat memilih untuk tetap menggunakan versi Windows Phone 8, lalu membuat package baru yang mendukung versi 8.1. Hal ini memungkinkan kita tetap menyediakan aplikasi WP 8 untuk perangkat yang belum di-updae dan menyedikan paket baru, entah itu Windows phone Store atau Windows Phone Silverlight 8.1 untuk pengguna yang sudah meng-update.

    Sebagian fitur baru hanya tersedia di Windows Phone Silverlight. Pada kasus ini, Anda hanya perlu stay atau upgrade daripada melakukan porting Windows Phone Store. Fitur-fitur ini adalah :

    · Clipboard

    · Lockscreen

    · Akses ke ringtone

    · Fitur alarm dan reminder

    · Aplikasi berbasis Lens

    · Ekstensibility

    · Aplikasi berbasis VoIP

    · Fitur Search

    · SoundEffect

    Beberapa fitur di Windows Phone Silverlight berubah atau bekerja sedikit berbeda pada Windows Phone Store. Perlu diperhatikan jika Anda ingin menggunakan fitur-fitur berikut ini :

    · Background processing

    · Transfer data

    · Background Audio

    · Direktori dan Peta

    · Lokalisasi dan Globalisasi

    · Otomatisasi UI

    · Kontrol

    · Monetisasi

    · Speech

    · Tile, Toast dan Notifikasi

    · Wallet

    Maka perlu memahami bagaimana perbedaan fitur tersebut bekerja di dua model aplikasi yang terdapat pada Windows Phone 8.1. Karena adanya perbedaan tersebut maka proses memindahkan aplikasi dari Windows Phone Silverlight ke Windows Phone Store lebih tepat disebut porting karena ada beberapa kemungkinan perbedaan aplikasi. Pemindahan aplikasi ke Windows Phone Store memungkinkan pengembang mendapatkan konvergensi yang lebih besar sehingga jika memutuskan untuk mengembangkan aplikasi sejenis di tablet, banyak bagian kode yang bisa digunakan kembali.

    Dengan pengetahuan ini, maka keputusan untuk tetap menggunakan Windows Phone Silverlight 8, upgrade ke Windows Phone Silverlight 8.1 atau porting ke Windows Phone Store benar-benar perlu melihat seberapa besar kebutuhan terhadap fitur Windows Phone 8.1. Jika memang dibutuhkan fitur 8.1 maka upgrade merupakan pilihan yang tepat. Dan jika konvergensi dan terdapat kemungkinan pengembangan aplikasi yang serupa di platform tablet, bisa jadi porting akan membawa kemudahan bagi pengembang di kemudian hari.

    Posted in Windows Phone | Leave a comment