Microsoft Windows Azure servisleri içerisinde çok önemli bir yer kaplayan Mobile Service ile mobil cihazlarımız üzerindeki geliştirme süreçlerine ciddi anlamda destek sunulmaktadır. Sadece Windows Phone veya Windows Store tarafında değil IOS ve Android tarafında da aynı desteklerden faydalanmak mümkün kılınıyor. Bir diğer güzel tarafı ve en çok kullanılabilecek olan yönü ise ; mobil uygulamalar içerisinde yer alan yetkilendirmeler açısından çok güzel bir avantaj sunuluyor. Microsoft, Facebook, Twitter ve Google hesapları ile yetkilendirme işlemini kendi içerisinde ufak ayarlamalar ile gerçekleştirebiliyor. Uygulama içerisinde yetkilendirme için bir geliştirme sürecine girmeye ihtiyaç kalmıyor. Windows Azure tarafında yer alan diğer servislerle birlikte çalışarak bir çok yükten kullanıcıları kurtarıyor. Uygulama içerisinde veritabanı ihtiyacınızı ister Sql Azure ile ister VM içerisinde hazır imaj içeren Sql server ile gerçekleştirebiliyorsunuz. Push Notification servisi sayesinde notification için harcıyacağınız geliştirme sürecinden de kurtuluyorsunuz.
Windows Azure Mobile Service hizmetinden faydalanarak, Windows store app ile bir demo gerçekleştirebiliriz. Bunun için öncelikle Visual Studio üzerinden yeni bir Windows Store App oluşturuyoruz.
NOT : Azure uygulamaları için geliştirme sürecinde Visual Studio Projelerini özellikle Run as Administrator olarak açmaya dikkat edin. Aksi takdirde projelerinizin Publish ve debug işlemlerini gerçekleştiremeyebilirsiniz.
Yapacağım uygulama aslında bir oyun olacak. Oyunda iki adet Random sayı üreten bir metod ve bu metod ile üretilen sayılar arasında büyük olanın kazanması üzerine kurulu bir sistem oluşturacağız. Ancak kazanan kişiyi kaydetmek için uygulamanın çalıştığı bilgisayardan kullanıcı bilgilerini alarak ScoreBoard üzerine kayıt işlemini gerçekleştireceğiz. Ayrıca Leader Board tablosu ile diğer kullanıcıların skorlarını görebiliyor olacağız.
Projeyi oluşturduktan sonra aşağıdaki resimde gözüktüğü gibi tasarım tarafını oluşturuyoruz. Görüldüğü üzere ekranın sağ tarafında kullanıcının resmi için bir “Image” Kullanıcı Adı için bir “Textblock” yerleştiriyoruz ve bunlara Name property’si ekliyoruz. Diğer taraftan random sayıları türetmek için Generate Numbers butonu, Skorları kaydetmek için Save Score ve son olarak lider tablosu sayfasına gitmek için Go to leader board butonları oluşturuyoruz. Yarışmacı bir ve yarışmacı iki adında sağa ve sola competitor 1-2 textblokları altına üreteceğimiz random sayılar için iki adet textblock oluşturduktan sonra son olarak kimin kazandığını göstermek adına tam orta yere bir textblock oluşturarak tasarım tarafını tamamlıyoruz. Sayfanın gerekli xaml kodu resimin altında mevcuttur.
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Name="UserProfile">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Name="UserImage" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5"/>
<TextBlock Grid.Column="1" Name="UserName" TextAlignment="Center" Foreground="White" FontSize="30" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="5"/>
</Grid>
</Grid>
<Button Grid.Row="1" Content="Generate Numbers" Name="btn_RandomNoGenerate" HorizontalAlignment="Center" VerticalAlignment="Center" Click="btn_RandomNoGenerate_Click"/>
<Grid Grid.Row="2" Name="RandomNumberGenerator">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" TextAlignment="Center" Text="Competitor : 1" Foreground="White" FontSize="30" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="20,0,20,0"/>
<TextBlock Grid.Column="0" Name="txt_RandomNumber1" TextAlignment="Center" Foreground="White" FontSize="30" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Margin="20,0,20,0"/>
<Grid Grid.Column="1">
<TextBlock TextAlignment="Center" Text="Competitor : 2" Foreground="White" FontSize="30" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="20,0,20,0"/>
<TextBlock Name="txt_RandomNumber2" TextAlignment="Center" Foreground="White" FontSize="30" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Margin="20,0,20,0"/>
</Grid>
</Grid>
<Grid Grid.Row="3" Name="WinnerGrid">
<TextBlock Name="txt_Winner" TextAlignment="Center" Foreground="White" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0,20,0"/>
</Grid>
<Grid Grid.Row="4" Name="SaveScoretoAzure">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="Save Score" Name="btn_SaveScore" HorizontalAlignment="Center" VerticalAlignment="Center" Click="btn_SaveScore_Click"/>
<Button Grid.Column="1" Content="Go to Leader Board" Name="btn_LeaderBoard" HorizontalAlignment="Center" VerticalAlignment="Center" Click="btn_LeaderBoard_Click"/>
</Grid>
</Grid>
Tasarım tarafını tamamladıktan sonra uygulama içerisinde oluşturulacak olan skor tablosuna ait bir Class oluşturuyoruz. Biraz daha ileride Azure tarafında Mobile Service oluşturduktan sonra servisin bize sunacağı data alanı içerisindeki tablo ile eşleşecek olan bu class ile gerekli veri bağlantısını sağlamış olacağız.
Solution tarafına ScoreBoard adında bir Class ekleyerek devam ediyoruz. Eklediğimiz Class içerisinde aşağıdaki kod bloğunda görüldüğü gibi Score board için gerekli attribute’ler yer alacak. Bu taraf daha önce WCF servis ile ilgilenenler için aslında tanıdık gelebilir 🙂 DataContract ve DataMember ile gerekli yapıyı kuruyoruz.
[DataContract]
public class ScoreTable
{
[DataMember(Name = "id")]
public int Id { get; set; }
[DataMember(Name = "name")]
public string Name { get; set; }
[DataMember(Name = "score")]
public int Score { get; set; }
[DataMember(Name = "winner")]
public string Winner { get; set; }
[DataMember(Name = "date")]
public DateTime Date { get; set; }
public override string ToString()
{
return String.Format("{0} {1} {2} {3} {4} {5} {6}", Name, " ",
Winner, " ", Score.ToString(), " ", Date.ToString("dd/MM/yyyy"));
}
}
Azure tarafındaki mobile servis içerisinde saklayacağımız datalar için oluşturduğumuz Class’ı tamamladıktan sonra artık uygulamanın çalışma prensiplerini oluşturabiliriz. Bunun için bir takım SDK dosyalarına ihtiyacımız var. Mobile Service hizmetinden faydalanmak için projemizin solution kısmında yer alan References sekmesine sağ tık ile Nu-get Packages Manager aracılığı ile WindowsAzure.MobileServices için gerekli DLL dosyalarını projemize ekliyoruz.
Dosyaların yüklenmesi tamamlandıktan sonra. MainPage tarafında oyun için gerekli olan kod yapısını oluşturabiliriz. Windows Azure tarafındaki Tablomuz ile oluşturduğumuz Class içerisindeki attribute’lerin erişimini sağlamak amacıyla IMobileServiceTable sınıfından türeyen bir Listeyi ve random sayılar için gerekli yapıyı global olarak oluşturuyoruz.
private IMobileServiceTable<ScoreTable> scoreTableAzure = App.MobileService.GetTable<ScoreTable>();
int number1, number2, WinnerScore;
Random randomSayi1 = new Random();
Random randomSayi2 = new Random();
Tasarım tarafında oluşturduğumuz Image ce UserName alanları için işletim sistemi tarafından bize sunulan kullanıcı bilgilerine ulaşıp Kullanılan bilgisayarın kullanıcı resmini ve kullanıcı adını proje içerisine çekiyoruz. Bu işlemi bir metod içerisinde gerçekleştirip MainPage Load event’i içerisinde sayfa yüklendiği kısımda gösteriyoruz.
public MainPage()
{
this.InitializeComponent();
Loaded += MainPage_Loaded;
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
UserInfo();
}
public async void UserInfo()
{
string displayName = await Windows.System.UserProfile.UserInformation.GetDisplayNameAsync();
UserName.Text = displayName;
StorageFile image = Windows.System.UserProfile.UserInformation.GetAccountPicture
(Windows.System.UserProfile.AccountPictureKind.SmallImage) as StorageFile;
if (image != null)
{
try
{
IRandomAccessStream imageStream = await image.OpenReadAsync();
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.SetSource(imageStream);
UserImage.Source = bitmapImage;
UserImage.Visibility = Visibility.Visible;
}
catch (Exception ex)
{
}
}
}
Projeyi bu aşamada çalıştırdığımız zaman ekranın sağ köşesindeki Image ve Textblock kısmında şuan kullandığınız Windows 8 işletim sistemli bilgisayarınıza giriş yaptığınız kullanıcı resminizi ve isminizi göreceksiniz. Sırada Random sayılarımızı türetme aşamasında. Generate number buton’unun Click Event’i içerisine aşağıdaki şekilde random sayı türeten ve hangisinin kazandığını belirleyen kod bloğunu yerleştiriyoruz.
private void btn_RandomNoGenerate_Click(object sender, RoutedEventArgs e)
{
number1 = randomSayi1.Next(1, 100);
number2 = randomSayi1.Next(5, 95);
txt_RandomNumber1.Text = number1.ToString();
txt_RandomNumber2.Text = number2.ToString();
if (number1 >= number2)
{
txt_Winner.Text = "Winner is Competitor 1";
}
else
{
txt_Winner.Text = "Winner is Competitor 2";
}
}
Artık numaraları türettik ve en büyük olan sayıyı belirledik. Sırada bu skoru, kullanıcı adı ile azure tarafında oluşturacağımız Mobile service içerisindeki veritabanı kısmına insert aşamasında. Bunun için öncelikle Azure Portal üzerinden yeni bir Mobile Service oluşturuyoruz ve bize sunacağı accountname ve accountKey ile projemizi azure tarafına bağlıyoruz.
Belirlediğimiz accountname ile Mobile Service oluşturduktan sonra Dashboard içerisinde en alt tarafta yer alan Manage Keys sekmesi altında yer alan accountName ve accountKey bilgilerini projemiz içerisinde yer alan App.xaml.cs dosyası içerisine aşağıdaki şekilde yerleştiriyoruz.
private static MobileServiceClient mobileService = new MobileServiceClient(
"https://azurescoreboard.azure-mobile.net/",
"gTslKoCrdJUAMqIswpopdGCAnZVOYY65");
public static MobileServiceClient MobileService
{
get { return mobileService; }
}
Azure Portal tarafında Mobile Service oluşturma esnasında bizden sql database ve server için bilgiler istemişti. Belirlediğimiz kullanıcı adı ve şifre ile yeni bir server oluşturmuştuk. Portalda oluşturduğumuz Mobile Service içerisine girdiğimizde yukarıda DATA diye bir sekme görüyor olacağız. Data sekmesi altında tablolarımız sergileniyor olacak. Proje tarafında oluşturduğumuz ScoreBoard Class’ı ile aynı adı taşıyan yeni bir tablo ekliyoruz. Permisson tarafında olduğu gibi hiç bir değişiklik yapmadan tabloyu oluşturuyoruz.
Azure tarafında tablomuzu oluşturduktan sonra tekrar proje tarafına dönüyoruz ve yarışma sonuçlarını Save Score butonu altında azure tarafına kaydediyoruz.
private void btn_SaveScore_Click(object sender, RoutedEventArgs e)
{
if (number1 >= number2)
{
WinnerScore = number1;
}
else
{ WinnerScore = number2; }
var scoreResult = new ScoreTable { Name = UserName.Text, Winner = txt_Winner.Text, Score = WinnerScore, Date = DateTime.Now };
InsertTodoItem(scoreResult);
}
private async void InsertTodoItem(ScoreTable ScoreTableAzure)
{
await scoreTableAzure.InsertAsync(ScoreTableAzure);
}
Artık oluşan skorları kendi kullanıcı adımız ve tarihiyle birlikte azure tarafına kaydedebiliyoruz. Save butonuna bastıktan sonra azure tarafında Data altında kayıtlarımızı aşağıdaki gibi görebiliriz.
Gördüğümüz üzere Azure üzerinde oluşturduğumuz Mobile Service aracılığı ile bize sunulan data katmanı üzerinde Win8 uygulamamızın içerisindeki bilgileri basit bir şekilde kayıt altına tuttuk. Yukarıda da bahsetmiş olduğum gibi bu uygulama aslında her kullanıcının kendi bilgisayarı üzerinde kişisel bilgileriyle kayıt altına alınabilen bir uygulama olacağından her kullanıcının kendine ait skor bilgilerini bu tablo üzerinde tutabiliyoruz. Şimdi diğer kullanıcılar ile birlikte tüm Skor tablosunu görebileceğimiz bir arayüz tasarlayarak, lider tablosu oluşturalım. Bunun için öncelikle yeni bir Basic Page ekleyerek başlııyoruz. Çok fazla ihtişamlı bir tasarım olmasına gerek yok sadece sayfa içerisinde sonuçları gösterebileceğimiz bir gridview olacak. bunun için xaml kodu aşağıdaki şekilde olması yeterlidir.
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<GridView Grid.Row="1"
Name="Leader_List"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</Grid>
Yukarıdaki grid içerisinde yer alan Leader_List isimli gridview içerisine azure içerisinde bulunan mobile service bağlı olan datalarımızı çekmemiz gerekmekte. Bunun için oluşturduğumuz sayfanın code-behind tarafında Page Load Event altına aşağıdaki şekilde select içlemini gerçekleştiriyoruz. Sadece ilk 10 kayıdı göstermek için Take(10) yapısını ekliyorum. Ayrıca Sonuçları skorlara göre büyükten küçüğe sıralamak için OrderByDescending diyorum.
var leaderboard = await App.MobileService.GetTable<ScoreTable>().ToEnumerableAsync();
leaderboard = (leaderboard.OrderByDescending(item => item.Score).Take(10)).ToList();
Leader_List.ItemsSource = leaderboard;
Projeyi çalıştırdığımızda ve anasayfadaki go to leader board butonu ile leader board sayfasına yönlendirildiğimizde aşağıdaki şekilde tüm skorları görebiliyor olacağız. Şuan ben bu uygulamayı sadece kendi bilgisayarımda çalıştırdığım için kendi bilgilerimi görüyorum, ancak başka bir account ile uygulamayı çalıştırsaydım o hesaba ait bilgiler içerecekti.
Herkese kolay gelsin 🙂
onryzc.com 
Tesekkurler
BeğenBeğen