Mobile Services JS Backend - Data - Kayıt Ekleme (Insert)

Mobile Services tablo nasıl oluşturulur yazısına yukarıda bulunan linkten gidebilirsiniz.

   

Proje Oluşturalım

Şimdi bir tane Univerall App projesi açıyoruz ve bu tablodan veri okuyup yazma işlemlerinin nasıl olduğuna bakiyoruz.

Install-Package WindowsAzure.MobileServices

Komutu ile nuget package yüklüyoruz, bu işlemi hem Windows Phone hem Windows projesi için ayrı ayrı yapmanız gerekmektedir.

Projelerimizdeki tüm MainPage.xaml dosyalarını siliyoruz ve .Shared projesi içerisine bir tane MainPage.xaml isminde dosya oluşturuyoruz. Bu dosya hem Windows Phone hem Windows projesinde çalışacaktır.

   

MainPage.xaml içine aşağıdaki kodları yazıyoruz.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid.RowDefinitions>

            <RowDefinition Height="230"/>

            <RowDefinition Height="*"/>

</Grid.RowDefinitions>

<StackPanel Grid.Row="0">

            <TextBox Header="Adi" x:Name="TextBoxName"/>

            <TextBox Header="Soyadi" x:Name="TextBoxSurname"/>

            <Button Content="Gönder" x:Name="ButtonKaydet" Click="ButtonKaydet_Click"/>

</StackPanel>

<ListView x:Name="ListViewPersons" Grid.Row="1">

                <ListView.ItemTemplate>

                    <DataTemplate>

                        <TextBlock>

                            <Run Text="{Binding Adi}"/>

                            <LineBreak/>

                            <Run Text="{Binding Soyadi}"/>

                        </TextBlock>

                    </DataTemplate>

                </ListView.ItemTemplate>

            </ListView>  

</Grid>

 <Page.BottomAppBar>

<CommandBar>

          <AppBarButton Label="Refresh" Icon="Refresh" Click="AppBarButton_Click"/>

</CommandBar>   

</Page.BottomAppBar>

Yukarıdaki kodu yazarak aşağıdaki ekran görüntüsünü elde edeceksiniz.

   

MainPage.xaml Design

   

Gördüğünüz gibi iki textbox, bir buton ve birde göremediğimiz bir listview var. Kullanıcı textbox'lara bilgileri girecek ve Gönder butonuna basacak böylece bilgiler hem aşağıdaki ListViewda gösterilecek hemde Azure'da bulunan mobile services table'ina kayıt edilecek. Aşağıdaki refresh butonuna basıldığında ise tüm tablodaki bilgiler listview'a tekrar yüklenecek. Aynı şekilde sayfa ilk açıldığında tüm bilgiler tablodan listview'a yüklenecek.

   

Insert

Tablomuz ve görsel olarak projemiz hazır şimdi MainPage.xaml.cs dosyasına giderek aşağıdaki kodu yazalım ve URL, APPKEY bölümlerini kendi azure hesabınızın bilgileri ile değiştirin.

  

public class Kisiler

{

public string Id { get; set; }//mecburi

public string Adi { get; set; }

public string Soyadi { get; set; }

}

public sealed partial class MainPage : Page

{

private IMobileServiceClient client = new MobileServiceClient("URL", "APPKEY");

private ObservableCollection kisiler = new ObservableCollection();

private IMobileServiceTable tableClient;

public MainPage()

{

this.InitializeComponent();

tableClient = client.GetTable();

} 

private async void ButtonKaydet_Click(object sender, RoutedEventArgs e)

{

var kisi = new Kisiler()

{

Adi = TextBoxName.Text,

Soyadi = TextBoxSurname.Text

};

await tableClient.InsertAsync(kisi);//Azure'a gonder

kisiler.Add(kisi);//UI guncelle 

}
}

Yukarıdaki kodu biraz inceleyecek olursak. İlk önce Mobile Service'ta yaratmış olduğumuz tablo ile aynı isimde "Kisiler" bir class yarattık bu bizim data class'imiz olacak. Bu class içerisine string türünde Id isimli bir property yazdım. Bu Id property'si mecburen olmak zorunda. Daha sonra string tipinde Adi ve Soyadi olarak 2 property daha ekledim. Bu class'tan yaratılan her nesne mobile service table'daki bir satıra karşılık geliyor olarak düşünebilirsiniz.

   

Mobile Services ile bağlantı kurabilmek için IMobileServiceClient türünden client adında bir değişken yarattık, daha sonra tabloya ulaşabilmek için IMobileServiceTable<Kisiler> tableClient olarak bir değişken yarattık ve constructor'da bu tableClienta değer atadık bu aşamada client.GetTable<Kisiler> diyerek tabloya ulaşabildik. Burada dikkat edilmesi gereken konu Tablo ismi ile class isminin aynı olması. Eğer isimler farklı ise client.GetTable<ClassAdi>("TabloAdi") şeklinde kullanabilirsiniz.

   

Daha sonra kaydet butonuna basıldığında çalışması için yeni bir Kisiler nesnesi yarattık ve kisi olarak isimlendirdik. tableClient.InsertAsync(kisi) kodu ile oluşturduğumuz kişi nesnesini azure'a gönderdik. Ardından kisiler isimli ObservableCollection'imiza kişiyi ekledik ve ListViewda görünmesini sağladık.

   

Azure tarafına bakacak olursak;

Management Portal üzerinden tablonun içine giriyoruz ve Browse segmesinden tablo içeriğini görüyoruz.

   

   

Table Content

   

   

Gördüğünüz gibi Adi, Soyadi ismindeki kolonlar otomatik olarak yaratıldı, Id otomatik olarak atandı ve __ ile başlayan bir kaç kolon daha yaratıldı bu kolonlar mobile services tarafından tutarlılığı sağlamak amacıyla otomatik olarak ekleniyor.


Dinamik Şema

Şimdi Kisiler Class'ina bir property daha ekleyelim ve tekrar bakalm. UI'a bir textbox daha ekliyorum ve class'a bir property daha ekliyorum.

public class Kisiler
{

public string Id { get; set; }//mecburi

public string Adi { get; set; }

public string Soyadi { get; set; }

public int Yas { get; set; }

}

private async void ButtonKaydet_Click(object sender, RoutedEventArgs e)
{

var kisi = new Kisiler()
{

Adi = TextBoxName.Text,

Soyadi = TextBoxSurname.Text,

Yas = int.Parse(TextBoxAge.Text)

};
await tableClient.InsertAsync(kisi);//Azure'a gonder

kisiler.Add(kisi);//UI guncelle
}

Yeni görsel ve class'i yukarıdaki gibi değiştirdim. Tekrar çalışıtırıyorum ve bir kayıt daha ekliyorum. Tekrar Mobile Services table'a bakalım.

   

Table Content - 2

   

Gördüğünüz gibi Yas otomatik olarak server tarafına eklendi. Bunun ne kadar hızlı developmenta izin veren birşey olduğunu umarım. Bu sayede sadece client tarafındaki modeli değiştirerek bu değişikliğin database'I etkilimesini sağlamış oluyoruz.

Dikkat!! Tabiki bu özelliğin production esnasında açık bırakılması kötü niyetli kişiler tarafından kötü şekilde kullanılabilir. (Zor ama olabilir) Bu sebepten bu özelliği Mobile Services Configure tabından kapatmanızı öneririm (development bittiğinde).

Dynamic Schema

   

   

Server Tarafında Script

Insert isteğiniz server'a gittiğinde bir takım kodların çalışmasını isteyebilirsiniz. Örneğin giden insert isteğinin server tarafında kontrol edilmesini istedik ve eğer yas 20den büyük ise Status kolonuna 20 üstü yazsın eğer 20 altında ise 20 alti yazsın. Status adında bir kolonun daha önce olmadığını hatırlatmak isterim ve bu kolonu uygulama içerisindeki class'a eklemedim.

   

Server Script

   

Yeni bir insert requesti yaptım ve yaşı 50 olarak girdim, server tarafında yazdığım kod çalıştı ve server tarafına Status diye bir kolon eklendi.

Table Content - 3

   

Tabiki bu işlemi yapabilmeniz için Dynamic Scheme özelliğinin açık olması gerekmekte. Server Script esnasında insert, update, delete, read gibi operation'larin arasına girerek kod yazmanız mümkün. Sadece bu tip kontrol değil notification atmaktan tutun direkt olarak sql'e bağlanmaya kadar herşeyi yapmak çok kolay ve mümkün. Örneklerini ilerleyen yazılarda yapacağım.

   

   

Aşağıdaki linkten kodlara ulaşabilirsiniz.

https://github.com/altinokdarici/AzureEgitimSerisi/tree/master/MobileServices/JavascriptBackend/Data

Yorum ekle

Loading