Training Windows Phone 7 (UK PETRA)

Pada tanggal 30-31 Maret 2012 telah dilaksanakan training dengan topik Pengembangan Aplikasi Mobile dengan Windows Phone 7 di Universitas Kristen Petra Surabaya. Acara ini terselenggara atas kerja sama Microsoft Indonesia, Nokia, dan UK Petra. Pada pelatihan tersebut salah satu trainer kami yaitu Erick Kurniawan ditunjuk sebagai master trainer.

petrapetra1petra2

Workshop The Amazing Nokia Lumia Developer Day

Pada tanggal 4-5 February 2012 diadakan Workshop sekaligus lomba untuk membangun Aplikasi Windows Phone 7 dalam waktu 24 jam yang dilangsungkan di Gedung Graha Manggala Siliwangi, Bandung. Acara ini diikuti oleh kurang lebih 800 developer. Workshop ini adalah kerja sama Nokia dan Microsoft Indonesia. Pada workshop ini salah satu trainer dari Actual Training yaitu Erick Kurniawan diminta untuk membawakan topik Silverlight for Windows Phone. Untuk materi workshop dapat diunduh pada link berikut.

pic1

pic2

Windows Phone 7 VB Tutorial (WP7 with WCF REST Services)

Pada tutorial kali ini kita akan membuat WCF REST Services sederhana yang dapat di-consume oleh aplikasi WP7.

 

Creating WCF REST Services

1. Pertama kita akan membuat REST Services sederhana. Caranya buat empty Web Site.

2. File → New → Web Site → ASP.NET Empty Web Site → beri nama SimpleREST.

image

3. Klik kanan pada project → Add → New Item → pilih WCF Services → beri nama Service1.svc.

image

4. Buka web.config kemudian tambahkan tag berikut pada <system.serviceModel>

<system.serviceModel>
    <behaviors>
        <serviceBehaviors>
            <behavior name="">
                <serviceMetadata httpGetEnabled="true" />
                <serviceDebug includeExceptionDetailInFaults="false" />
            </behavior>
        </serviceBehaviors>
    </behaviors>
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
</system.serviceModel>

5. Klik kanan pada Service1.svc kemudian pilih View Markup.

image

6. Kemudian tambahkan file konfigurasi berikut

<%@ ServiceHost Language="VB" Debug="true" Service="SimpleREST.Service1" CodeBehind="Service1.svc.vb"
Factory="System.ServiceModel.Activation.WebServiceHostFactory" %>

7.Definisikan kontrak service yang akan anda buat pada file IService1.vb

Imports System
Imports System.ServiceModel
Imports System.ServiceModel.Web
Imports System.Runtime.Serialization
Imports System.Text
Imports System.Collections.Generic
Imports System.Linq

' NOTE: You can use the "Rename" command on the context menu to change the interface name "IService1" in both code and config file together.
<ServiceContract()>
Public Interface IService1

    <OperationContract()>
    <WebGet(UriTemplate:="GetData/{a}", RequestFormat:=WebMessageFormat.Xml,
            ResponseFormat:=ServiceModel.Web.WebMessageFormat.Xml,
            BodyStyle:=ServiceModel.Web.WebMessageBodyStyle.Bare)>
    Function GetData(ByVal a As String) As String

End Interface

8. Kemudian definisikan method service yang akan anda buat pada file Service1.svc.vb. Buat sebuah method dengan nama GetData() yang akan mengembalikan nilai bertipe string.

Public Class Service1
    Implements IService1

    Public Function GetData(ByVal a As String) As String Implements IService1.GetData
        Return String.Format("Hello {0} this message from REST Services", a)
    End Function

End Class

9.Jalankan service yang sudah anda buat dengan cara klik kanan pada ‘Service1.svc’ kemudian pilih View in browser.

10.Lengkapi urlnya sebagai berikut untuk memanggil service dengan nama GetData yang sudah anda buat.

http://localhost:2531/Service1.svc/GetData/Erick

image

11. Service1.svc adalah nama service, GetData adalah nama method, dan ‘Erick’ adalah nilai dari parameter. Hasil dari pemanggilan service diatas adalah:

image

Cara Pemanggilan Service dari WP7

Setelah selesai membuat REST service yang akan diconsume, sekarang kita akan membuat aplikasi client pada Windows Phone 7 yang digunakan untuk mengakses service tersebut.

1. Buat project Silverlight for Windows Phone 7 dengan nama WP7RestConsume.

image

2. Tambahkan beberapa textbox, textblock dan tombol kedalam tampilan design sebagai berikut:

image

<!–ContentPanel – place additional content here–>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="35,25,0,0" Name="TextBlock1" Text="Parameter :" VerticalAlignment="Top" />
    <TextBox Height="72" HorizontalAlignment="Left" Margin="142,6,0,0" Name="ParameterTextBox" Text="" VerticalAlignment="Top" Width="308" />
    <Button Content="Call Rest Service" Height="72" HorizontalAlignment="Left" Margin="148,66,0,0" Name="CallRestButton" VerticalAlignment="Top" Width="241" />
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="72,152,0,0" Name="TextBlock2" Text="Result :" VerticalAlignment="Top" />
    <TextBlock Height="123" HorizontalAlignment="Left" Margin="148,152,0,0" Name="ResultTextBlock" Text="" VerticalAlignment="Top" Width="302" TextWrapping="Wrap" FontSize="28" />
</Grid>

3. Tambahkan referensi System.Runtime.Serialization.

image

4. Double click pada tombol CallRestButton, kemudian tambahkan kode berikut untuk mengambil nilai yang dikembalikan dari service.

Imports System.Runtime.Serialization

Partial Public Class MainPage
    Inherits PhoneApplicationPage

    ' Constructor
    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub CallRestButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles CallRestButton.Click
        Dim proxy As New WebClient
        Dim strUri = String.Format("http://localhost:2531/Service1.svc/GetData/{0}",
                                   ParameterTextBox.Text)
        AddHandler proxy.OpenReadCompleted, AddressOf proxy_OpenReadCompleted
        proxy.OpenReadAsync(New Uri(strUri))
    End Sub

    Private Sub proxy_OpenReadCompleted(ByVal sender As Object, ByVal e As OpenReadCompletedEventArgs)
        Dim sr As New DataContractSerializer(GetType(String))
        Dim strResult = sr.ReadObject(e.Result).ToString
        ResultTextBlock.Text = strResult
    End Sub

End Class

5. Pastikan bahwa sebelum anda menjalankan program services harus sudah jalan. Sesuaikan url pada program dengan url services yang anda jalankan.

6. Tekan F5 untuk menjalankan programnya.

image

Windows Phone 7 VB Tutorial (Consuming REST Services)

Windows Phone 7 secara default tidak mendukung penyimpanan data pada local database (seperti SQL CE atau SQLite), jadi jika anda ingin bekerja dengan data di WP7 anda dapat mengkonsumsi data tersebut dari Cloud yang berupa services.

Aplikasi yang akan kita buat pada tutorial kali ini yaitu SimpleTwitterClient yang akan mengkonsumsi data dari services yang disediakan oleh Twitter.

Simple Twitter Client

1. Buka Visual Studio 2010.

2. Pilih bahasa VBSilverlight for Windows PhoneWindows Phone Application → beri nama SimpleTwitterClient.

image

3. Pada MainPage.xaml tampilan XAML Editor, tambahkan kode xaml berikut untuk mengganti ApplicationTitle.

<!–TitlePanel contains the name of the application and page title–>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <TextBlock x:Name="ApplicationTitle" Text="Windows Phone 7 App" Style="{StaticResource PhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="Twitter Client" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

    

4. Dari menu toolbox tambahkan textbox, button, dan listbox control.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox Height="72" HorizontalAlignment="Left" Margin="0,6,0,0" Name="UserNameTextBox" Text="" VerticalAlignment="Top" Width="316" />
    <Button Content="Lookup" Height="72" HorizontalAlignment="Left" Margin="296,6,0,0" Name="LookupButton" VerticalAlignment="Top" Width="160" />
    <ListBox Height="517" HorizontalAlignment="Left" Margin="12,84,0,0" Name="MessageListBox" VerticalAlignment="Top" Width="438" />
</Grid>

image

5. Double click pada button LookupButton untuk menambahkan kode berikut

Private Sub LookupButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles LookupButton.Click
    Dim wc As New WebClient
    AddHandler wc.DownloadStringCompleted, AddressOf wc_DownloadStringCompleted
    Dim strUri = String.Format("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name={0}",
                               UserNameTextBox.Text)
    wc.DownloadStringAsync(New Uri(strUri))
End Sub

6. Class WebClient digunakan untuk mengambil services yang disediakan oleh twitter. Pada kode diatas kita mengambil informasi message dari user tertentu. Jika anda jalankan link dari REST services twitter yang ada diatas misal ketikan url berikut : http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=erickkurniawan

image

7. Maka services yang anda panggil akan menghasilkan output berupa dokumen xml seperti gambar diatas. Dokumen tersebut berupa informasi posting dari user ‘erickkurniawan’.

8. Untuk mengakses dokumen XML tersebut dari WP7 kita akan menggunakan LINQ to XML. LINQ to XML akan memudahkan anda untuk memanipulasi dokumen XML.

9. Untuk dapat menggunakan LINQ to XML anda harus menambahkan referensi System.Xml.Linq kedalam aplikasi yang anda buat.

10. Pada solution explorer klik kanan pada ReferencesAdd Reference → tambahkan System.Xml.Linq.

image

image

11. Tambahkan kode untuk menggunakan namespace System.Xml.Linq.

Imports System.Xml.Linq

12. Pada contoh program ini kita akan mengambil beberapa informasi yang akan ditampilkan yaitu Message, Username, dan ImageSource. Untuk kebutuhan tersebut buat class baru dengan nama TwitterItem.vb.

image

Class TwitterItem
    Public Property UserName As String
    Public Property Message As String
    Public Property ImageSource As String
End Class

13. Tambahkan kode pada event wc_DownloadStringCompleted untuk mengambil data yang kita inginkan dari dokumen XML hasil kembalian twitter services.

Private Sub wc_DownloadStringCompleted(ByVal sender As Object, ByVal e As DownloadStringCompletedEventArgs)
    If Not e.Error Is Nothing Then Exit Sub

    Dim xmlTweet = XElement.Parse(e.Result)
    MessageListBox.ItemsSource = From tweet In xmlTweet…<status>
                                      Select New TwitterItem With {
                                          .UserName = tweet.<user>.<screen_name>.Value,
                                          .Message = tweet.<text>.Value,
                                          .ImageSource = tweet.<user>.<profile_image_url>.Value
                                      }
End Sub

14. Pada MainPage.xaml, bagian MessageListBox tambahkan kode berikut

          <ListBox Height="517" HorizontalAlignment="Left" Margin="12,84,0,0" Name="MessageListBox"
                   VerticalAlignment="Top" Width="438">
              <ListBox.ItemTemplate>
                  <DataTemplate>
                      <StackPanel Orientation="Horizontal" Height="132">
                          <Image Source="{Binding ImageSource}" Height="72" Width="72" VerticalAlignment="Top" Margin="0,8,8,0"/>
                          <StackPanel Width="370">
                                <TextBlock Text="{Binding Message}"Foreground="Orange" FontSize="24" TextWrapping="Wrap" />
                                <TextBlock Text="{Binding UserName}"TextWrapping="Wrap" FontSize="22" />
                          </StackPanel>
                      </StackPanel>
                  </DataTemplate>
              </ListBox.ItemTemplate>
          </ListBox>

15. Tekan F5 untuk mendeploy program kedalam WP7 emulator dan menjalankannya, output dari program dapat dilihat pada gambar dibawah ini.

image