Mobile Services JS Backend - Custom Api

Mobile Service kullanırken Custom Api bazı durumlarda hayat kurtarıcı nitelikte olabiliyor. Eğerki bir mobil uygulama geliştiriyorsanız ve bazı kodların Azure'da çalışmasını istiyorsanız mobile services api sizin için en basit çözümlerden biri. Daha önce Mobile Services Data konusundan bahsetmiştik şimdi ise cloud üzerinde yazdığımız kodun çalışmasından bahsedeceğiz.

   

JS Backend kullandığımız için azure tarafında çalışmasını istediğimiz kodları Javascript(node.js) ile yazacağız. Aslında yazdığımız şey bir RESTful service. Bir custom api içerisinde PUT, GET, POST, PATCH, DELETE Http verb'lerine özel kod yazmamız mümkün örneğin bir custom api yazdınız ve bu api'a http üzerinden POST request geldiğinde post methodu çalışır, get request geldiğinde ise get methodu çalışır. ASP.NET Web Api veya MVC ile ilgilenmiş olanlar bu konuyu daha rahat anlayacaktır. Gelen requestler uygun methodlari çalıştırdıktan sonra client'a bir HttpResponse döndürürler bu response içerisinde Http Status Code bulunur. Bu kodlardan çok kullanılanlara örnek vermek gerekirse 404 (NotFound), 200(OK), 201(Created) vb.

   

Nasıl Oluşturulur?

   

Management Portal üzerinden daha önceden oluşturduğumuz Mobile Service'in içine giriyoruz ve yukarıdaki API tabına tıklıyoruz. Aşağıdaki ekranda "Create A Custom API" buttonuna basıyoruz veya en altta bulunan + buttonuna basıyoruz. Açılan pencerede isim veriyoruz ve her HTTP Method için yetki ayarlaması yapıyoruz. Şuanda örnek için isim olarak HelloWorlApi yazıyorum ve yetki ayarlarını olduğu gibi bırakıyorum.

   

Create Custom API

   

API oluşturulduktan sonra, üstüne tıklayarak içine giriyoruz ve SCRIPT tabı altında otomatik olarak oluşturulmuş kodları göreceksiniz.

   

Sample Code of HelloWorldAPI

   

Bu örnekte gördüğünüz gibi get ve post request'leri için ayrı iki function bulunmakta. GET requesti içinde cevap olarak message:"Hello World" döndürülüyor ve HTTP Status Code olarak OK yani 200 kullanılıyor. Client'tan bu API'I çağırdığımızda HttpStatusCode olarak 200(OK) gelecek ve content olarak message:"Hello World" gelecek. Geri dönen content JSON olarak client'a ulaşacaktır.

   

Client Tarafına gidelim ve bu API nasıl çağırılır onu inceleyelim.

   

Client

Mobile Services eğitim serisinin başında yazdığım gibi örneklerimizde client olarak Unviersal App (C# & XAML) kullanacağım. Yeni bir universal app yaratıyorum ve NuGet üzerinden WindowsAzure.MobileServices package'ini Windows Phone ve Windows projelerine indiriyorum. Daha sonra Windows ve Windows Phone projeleri içerisindeki MainPage.xaml ve MainPage.xaml.cs dosyalarını siliyorum. .Shared projesi içerisine MainPage.xaml adında bir dosya ekliyorum.

   

MainPage.xaml içerisine aşağıdaki kodu yazıyoruz.

   

   

Yukarıdaki kod oldukça basit ve UI'a bir tane button koyduk. Bu butona bastığımızda ise Mobile Services ta bulunan HelloWorldApi'in çalışmasını istiyoruz. Bunun için MainPage.xaml.cs dosyasına gidiyoruz ve aşağıdaki kodu yazıyoruz.

   

   

Yukarıdaki kod'a baktığımızda ButtonClick event'inde MobileService.InvoceApiAsync methodunu çalıştırdığımızı görüyoruz. Generic type olarak RootObject adında benim yarattığım class'I kullandım böylece gelen request bu class'a deserialize edilecek. Hatırlarsanız JSON olarak geleceğinden bahsetmiştim ve InvokeAsync<T> methodu bizim için deserialize işlemini gerçekleştiriyor. Böylece bizim JSON ile ilgilenmemize gerek kalmıyor. RootObject class'inin ismi önemli değil sadece içinde property'lerin adı ve türü deserialize işlemi için önemli. Daha sonra bir message dialog aracılığı ile gelen verinin içerisindeki message değerini gösteriyoruz.

   

InvokeAsync methodu üzerinde durmak gerekirse. Bu methodun birden çok overload'u var ancak ben, bence en çok kullanılacak olan overload'tan bahsedeceğim.

   

InvokeApiAsync<T>(String, HttpMethod, IDictionary<String, String>)

Invokes a user-defined custom API of a Windows Azure Mobile Service using the specified HTTP Method. Additional data can be passed using the query string.

   

public Task<T> InvokeApiAsync<T>(
        string apiName,
        HttpMethod method,
        IDictionary<string, string> parameters
)

   

From <https://msdn.microsoft.com/en-us/library/dn268353.aspx>

Yukarıda methodun MSDN'deki tanımını göreceksiniz. Gördüğünüz gibi generic bir method ve 3 parametre alıyor. Bunlar;
 

ApiName: çağırmak istediğimiz API'in adi bizim örneğimizde "HelloWorldApi"

HttpMethod: hangi http verb ile request yapmak istediğimiz (GET, POST, PUT, DELETE, BATCH), bizim örneğimizde GET

Parameters: göndereilecek request'in parametreleri, bizim örneğimizde null.

   

   

2.Örnek

Bu örnekte bir Echo Api yapacağız. Yani clientin gönderdiği parametre yine client'a geri dönecek. Bu örnekte parametre nasıl kullanılır'a değineceğiz.

   

EchoApi adında yeni bir Custom Api yaratıyoruz ve aşağıdaki kodu yazıyoruz. Sadece HttpGet ile çalışacağımız için sadece Get için function yazmamız yeterli olacak.

   

   

Yukarıdaki kodda gördüğünüz gibi request.query.param1 ile param1 ismindeki parametreye ulaşıyoruz.

   

Client'a geçelim ve bir button ve bir textbox daha ekleyelim. Kullanıcının textbox'a girdiği değeri api'a göndereceğiz, api bu değeri message içinde bize geri gönderecek.

   

MainPage.xaml'in son hali aşağıdaki gibi oldu.

   

   

MainPage.xaml.cs'e geçiyoruz ve aşağıdaki kodu ekliyoruz.

   

   

Yukarıdaki kodda gördüğünüz gibi, param adında bir dictionary yaratıyoruz ve içine bir item ekliyoruz bu itemin key'I parametremizin ismi oluyor. Daha sonra InvokeApiAsync'I çağırıyoruz. Sonuc olarak textbox'a girdiğiniz değeri messageDialog'da göreceksiniz.

   

GitHub: https://github.com/altinokdarici/AzureEgitimSerisi/tree/master/MobileServices/JavascriptBackend/CustomApi/CustomApi.Shared

   

Xamarin & Azure Mobile Services Örnek Uygulama

Bu yazıda bir Android uygulaması geliştireceğiz. Bu uygulamayı Xamarin üzerinde C# kullanarak geliştireceğiz. Arka planda ise Azure Mobile Services kullanacağız. Daha önceki mobile services yazılarıma buradan erişebilirsiniz.

Bunun için ilk önce Xamarin Studio'yu indiriyoruz. Xamarin lisansımızın en az Indie olması gerektiğinide söylemek istiyorum.

Azure Mobile Services

İlk önce yeni bir Azure Mobile Service yaratıyoruz ve data tabindan yeni bir tablo oluşturuyouz. Ismini Post yapıyoruz. Mobile Service oluşturma hakkındaki yazıyı buradan okuyabilirsiniz.

Xamarin

Xamarin Studio içerisinde yeni bir Android Projesi açıyoruz.

Xamarin Studio Create Project

   

Yukarıda gördüğünüz gibi C# altında bulunan Android bölümüne giriyoruz ve sağ taraftan Android Application'i seçiyoruz. Projemize aşağıdan bir isim veriyoruz ve OK diyerek projeyi oluşturuyoruz.


Yapmak istediğim proje şu şekilde olacak kullanıcılar uygulamaya girecek ve post atacaklar, diğer kullanıcılar bu post'lari görecek. Herhangi bir login mekanizması olmayacağı için hangi postu kimin attığı belli olmayacak. Şuanda uygulamanın göreselinin güzel olması ile uğraşmayacağım.

   

Projeyi oluşturduktan sonra, Solution explorerda Proje altında bulunan Resources/Layout/Main.axml'e gidiyoruz.

 

Yukarıda gördüğünüz "Source"'a tıklıyoruz ve aşağıdaki kodu yazıyoruz.

Yukarıdaki kodu yazarak, UI'a bir button ve bir listview eklemiş olduk. Button'a basıldığında yeni bir sayfaya yönlendireceğiz. ListView'da ise daha önce gönderilmiş olan postlari göstereceğiz.

   

ListView'daki her bir satırın nasıl gözükeceğini tasarlamak için Layout klasörü üzerine sağ tıklayarak yeni bir layout ekliyoruz ve aşağıdaki kodu yazıyoruz.

Yukarıdaki kodu yazarak, listview'in her bir iteminin basitce bir textView olmasını sağlıyoruz.

   

Şimdi ise yeni bir Post eklemek için bir UI yaratıyoruz. Layout üzerine sağ tıklayarak AddPost.axml adında bir layout yaratıyoruz ve aşağıdaki kodu yazıyoruz. Böylece post gönderebilmek için bir UI oluşturmuş oluyoruz. AddPost adında bir UI yarattık ve aşağıdaki kodu yazıyoruz.

AddPost UI'ina bir EditText koyduk, kullanıcılar göndermek istediği metini buraya yazacaklar. Hemen altına bir Button koyduk, kullanıclar bu butona basarak yazdıklarını Azure Mobile Service'e gönderecekler. Gönderme işlemi tamamlandığında tekrar Main page activity'e yönlendireceğiz ancak bu süreçte bir progress bar gerekliydi ve bunuda UI'a koyduk.

   

AddActivity.cs adında bir activity ekliyoruz. Bu AddPost.axml ile ilişkilendireceğimiz activity.

   

Şimdi ise Azure Mobile Services kullanabilmek için projemize gerekli componenti ekliyoruz. Solution expolorerda bulunan Components'a sağ tuşla tıklıyoruz ve Get More component'a tıklıyoruz. Acılan pencerede Azure Mobile Services'I aratıyoruz ve Add To App butonuna basarak projemize ekliyoruz. Ayrıca references'a giderek System.Http.Net'I ekliyoruz.

   

Add Azure Mobile Services Component to Project

Projemize yeni bir class ekliyoruz. Post.cs içerisine aşağıdaki kodu yazıyoruz. Bu class bizim data class'imiz yani mobile service'a gönderecek kayıt etmek istediğimiz bilgilerin modeli.

   

   

Projemize yeni bir class ekliyoruz. MobileServicesRepository.cs içerisine aşağıdaki kodu yazıyoruz. Bu class bizim Azure Mobile Service ile aramızdaki bağlantıyı yönetecek class.

MainActivity.cs dosyasına geçiyoruz ve aşağıdaki kodu yazıyoruz.

Şimdi AddActivity.cs'e geçiyoruz ve aşağıdaki kodu yazıyoruz.    

Yukarıdaki kod'a baktığımız zamanda UI nesnelerine ait değişkenleri set ettikten sonra, button click event'inde editText içine girilen bilgileri Azure'a gönderiyoruz. Daha sonra progressbar'I görünür hale getiriyoruz ve sonra MainActivity'e yönlendiriyoruz.

   

Örnek projeyi aşağıdaki linkten indirebilirsiniz.

   

http://github.com/altinokdarici/XamarinAndroidWithAzureMobileService