Azure Mobile Service Uygulaması

Bu yazıda Microsoft Azure Mobile Service ile ufak bi Windows Phone uygulaması yapacağız.
Öncelikle Azure Websitesinden Mobile Services ikonuna tıklıyoruz ve bizi karşılayan sayfadan CREATE A NEW MOBILE SERVICE linkini tatlı tatlı tıklıyoruz.

01

Aşağıda ki görüntüde de görüldüğü gibi uygun bir url ile devam edilir.

02

Mobile Service oluştuktan sonra isminin yanında bulunan oka tıklayarak servisin yönetim paneline ulaşmalısınız. Sonrasında sizi aşağıda ki gibi bir ekran karşılayacak. CONNECT AN EXISTING WINDOWS OR WINDOWS PHONE APP linkine tıklayarak yazacağımız uygulamada kullanmamız gereken MobileServiceClient nesnesine ulaşmış oluyoruz.

03

 

Yukarıda bulunan DATA linkine tıklayıp aşağıda bulunan “+” sembolüne tıklayarak tablomuzu oluşturuyoruz.

07

06

Tabloyu oluşturduktan sonra sıra uygulamaya geliyor. Tablonun sütunları uygulama içerisinde otomatik olarak oluşturulacaktır.

 

Projemiz oluştuğu gibi visual studionun büyük nimetlerinden olan nuget’ten faydalanarak mobile service referanslarını çekiyoruz.

04

05

Referanslarımız projemize kolaylıkla eklendi. Artık rehber modelimizi tasarlayıp usul usul uygulamaya başlayalım.

 

rehber adında basit bir yeni class oluşturduk ve verilerin Json ile geleceğini belirttik.

 

public class rehber
{
public string Id { get; set; }

[JsonProperty(PropertyName = "isim")]
public string isim { get; set; }

[JsonProperty(PropertyName = "soyisim")]
public string soyisim { get; set; }

[JsonProperty(PropertyName = "numara")]
public string numara { get; set; }
}

Rehber sınıfının dosyasında unutulmaması gereken kütüphane :

 using Newtonsoft.Json;

 

MainPage.xaml dosyamızı gayet basit bir şekilde tasarlayalım.

<Page
x:Class="AzureMobileServices.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AzureMobileServices"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="15*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Margin="5" Grid.Column="1" Grid.Row="0" PlaceholderText="İsim Giriniz" x:Name="txt_isim"/>
<TextBox Margin="5" Grid.Column="1" Grid.Row="1" PlaceholderText="Soyisim Giriniz" x:Name="txt_soyisim"/>
<TextBox Margin="5" Grid.Column="1" Grid.Row="2" PlaceholderText="Numara Giriniz" x:Name="txt_num"/>
<Button Margin="5" Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" Tapped="btn_ekle_Tapped" x:Name="btn_ekle" Content="Ekle" Width="150"/>
<ListView Margin="5" Grid.Column="1" Grid.Row="4" x:Name="listKisiler" Background="Wheat">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding isim}" Margin="10" />
<TextBlock Grid.Column="1" Text="{Binding soyisim}" Margin="10" />
<TextBlock Grid.Column="2" Text="{Binding numara}" Margin="10" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView >
</Grid>

</Grid>
</Page>

ListView içerisinde ItemTemplate kullanarak Azure üzerinden çektiğimiz verileri kolaylıkla listeleyebiliriz.

 

mainPage.xaml.cs tarafında class’ın içerisine aşağıda ki kodları ekleyelim

public static MobileServiceClient MobileService = new MobileServiceClient("1", "2"); //1:mobile service urliniz , 2:mobile service keyiniz

public MobileServiceCollection<rehber, rehber> rehberNesnesi;
public IMobileServiceTable<rehber> rehberTable = MobileService.GetTable<rehber>();

Bu şekilde yaptığımızda doğal olarak ide bize bağırıp kırmızıyla çizecektir kodumuzun altını. Önlemek için nuget sayesinde edindiğimiz referansın kütüphanesini using kısmına eklemeliyiz.

using Microsoft.WindowsAzure.MobileServices;

 

Basit bir şekilde listeleme ve ekleme fonksiyonlarımızı da oluşturup mutlu sona yaklaşalım artık…

async void listeCek()
{
rehberNesnesi = await rehberTable.ToCollectionAsync();

listKisiler.ItemsSource = rehberNesnesi;
}

async void kisiEkle(rehber rhbr)
{
await rehberTable.InsertAsync(rhbr);
MessageDialog msg = new MessageDialog("Eklendi","Başlık");
await msg.ShowAsync();
listeCek();
}

private void btn_ekle_Tapped(object sender, TappedRoutedEventArgs e)
{
rehber rhb = new rehber();
rhb.isim = txt_isim.Text;
rhb.soyisim = txt_soyisim.Text;
rhb.numara = txt_num.Text;

kisiEkle(rhb);
}

listeCek ve kisiEkle fonksiyonlarını async yaparak listeleme ve ekleme anında uygulamamızın kilitlenmesini engellemiş olduk.

MainPage sayfasının constructorında listeCek() fonksiyonunu çağırarak uygulamanın açıldığı anda verileri listelemesini sağlamış oluyoruz.

 

verilerin azure portalında gözüken hali

08

 

 

uygulamada gözüken hali

09

Tasarım konusunda benden daha iyisini yapabileceğiniz gayet açık bir şekilde ortada.

Ben bunu okuyarak yazmayla uğraşamam proje dosyasını şuralara bir yere iliştirseydin diyenler için buyrun örnek dosya.

Yazar: Ziya Can Kalkavan

Leave a Reply

  

  

  

%d blogcu bunu beğendi: