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

2 thoughts on “Windows Phone 7 VB Tutorial (Consuming REST Services)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s