PhoneGap Uygulamalarında Azure Mobile Services Kullanımı

Microsoft’un hibrid uygulamalara olan desteği gün geçtikçe artıyor. En son yapılan Connect(); etkinlğinde gördüğümüz üzere Visual Studio 2015, platformlar arası mobil uygulama geliştirmeye destek veren özelliklerle beraber geliyor. Üstelik PhoneGap ve Xamarin ile geliştirdiğiniz uygulamalarınızda Azure servislerini kullanmanız da mümkün. Ben de bu yazımda var olan bir PhoneGap uygulamamızı nasıl Azure Mobile Services’e bağlayacağımızı anlatacağım.

Öncelikle PhoneGap framework’ünü kullanarak PhoneGapAzureMS isminde örnek bir Windows Phone 8 uygulaması oluşturalım. Nasıl yapıldığını öğrenmek için şu sayfaya göz atabilirsiniz. Oluşturduğumuz wp8 projesini Visual Studio’da açıyoruz. Uygulamam çalıştırıldığı anda ben, “phonegapazuredemo” isimli mobil servisimde bulunan “person” tablosuna ismi Hatice ve soyismi Varlık olan bir kişi eklemek istiyorum. Nasıl mobil servis oluşturacağınızı bilmiyorsanız şu sayfaya bakmanızı tavsiye ederim. İlk yapmamız gereken işlem, index.html sayfasına <body></body> veya <head></head> etiketlerinin arasında (www klasörünün altında) bazı .js ve .css dosyalarınının referansını eklemek. Projenin linkini sayfanın aşağısına koydum. Bu bahsettiğim dosyaları direk proje klasöründe bulabilirsiniz.

//index.js dosyası. Tüm kodlarımızın yazılı olduğu script dosyası.

<script src=“js/index.js”></script>

//Ben uygulamamda Jquery Mobile’dan da faydalanıyorum. Bu dosyaları aşağıda GitHub’daki proje klasöründe bulabilirsiniz.

<script src=“js/jquery-2.1.1.min.js”></script>

script src=“js/jquery.mobile-1.4.5.js”></script>

<script src=“js/jquery.mobile-1.4.5.min.js”></script>

<link href=“css/jquery.mobile-1.4.5.css” rel=“stylesheet” />

//Bu dosya çok mühim. Mobile Service’e bağlanabilmeniz için bu dosyayı mutlaka referans olarak göstermelisiniz.

<script src=“js/mobileservices.web-1.2.5.js”></script>

//PhoneGap projesi oluşturulduğunda varsayılan olarak oluşturulan .js dosyası. Mutlaka eklemelisiniz.

<script src=“cordova.js”></script>

 

Yine aynı sayfada <body> </body> etiketlerinin arasına aşağıdaki kod bloğunu ekleyerek basit bir sayfa oluşturuyoruz.

<div data-role=”page” id=”mainPage” data-theme=”a”>

  <div data-role=”header” data-position=”fixed”>

     <h1>PhoneGap with Azure</h1>

  </div>

  <div role=”main” class=”ui-content” id=”content”></div>

</div>

Sonrasında index.js dosyasını açıyoruz ve aşağıdaki kod bloğunu sayfamıza ekliyoruz.

$(document).ready(function () {

// Client isminde bir MobileServiceClient instance’ı oluşturuyoruz.

//Buraya yazacağınız bilgileri Mobile service’e tıklayıp, ardından “Connect your app”

//bölümünden görebilirsiniz.

var client = new WindowsAzure.MobileServiceClient(‘Buraya mobile service url si yazılacak.’,‘Buraya application key yazılmalı’);

//tblPerson yerine başka herhangi bir isimde yazılabilir.

//Önemli olan tablo ve sütun adlarını doğru bir şekilde girmektir.

tblPerson = client.getTable(‘person’);

tblPerson.insert({ name: ‘hatice’, surname: ‘varlık’ });

//Bu kısmın Mobile Service ile bir ilgisi yok. Sadece kullanıcıyı bilgilendirmek

//için kullanıyorum.

alert(“Kaydınız yapılmıştır.”);

});

Verilerin eklenip eklenmediğini görmek için phonegapazuredemo isimli mobile service’i açtıktan sonra “Data” sekmesine tıklayıp tablonuzu açabilirsiniz.

person

 

Uygulamanıza ait appliacation key’i ve mobile service url’sini öğrenebileceğiniz sayfa ise aşağıdaki gibi.

app-key

Projeyi indirmek için tıklayınız.

Kolay gelsin!

 

Yazar: Hatice Varlık

Leave a Reply

  

  

  

%d blogcu bunu beğendi: