Xamarin ve Visual Studio İle IOS Uygulama Geliştirme Bölüm1

Selamlar arkadaşlar,

Bugün IOS için, Mac Os X ve Windows 10 ortamında mobil bir uygulamayı adım adım geliştireceğiz. Öncelikle gelin gerekli uygulamaları indirelim.

Mac Os X ortamı :

  • UI tasarımı için XCode Interface Builder
  • UI C# code derlenmesi için Xamarin Studio
  • Test amaçlı similator veya araçlar.

Windows 10 için:

  • Visual Studio 2015 Update 1
  • Xamarin

Aşağıda görüldüğü gibi IOS işletim sistemi için uygulama Windows ortamında Visual Studio 2015’de IOS segmesi altında iPhone projesi, Single View App(iPhone) olarak yaratılır.

Visual

Codeların yazılıp derleneceği yer Visual Studio ortamıdır. Aynı zamande debug yine VS ortamında yapılır. OS X ortamında mobil uygulamanın UI katmanı oluşturulur. Bunun için Xamarin ile XCode beraber çalışır.

Screen Shot 2016-02-28 at 15.39.59

Yukarıda görüldüğü gibi XCode tarafında UI tasarım ve Simulator işleri yapılmaktadır. XCode App Store’dan aşağıdaki gibi indirilebilir.

Screen Shot 2016-02-28 at 18.28.55

Xamarin, https://xamarin.com/download adresinden Mac Os X için indirilebilir. IOS platformunda Mobile bir uygulama geliştirmek için Windoes 10 tarafında Visual Studio ile Mac Os X tarafında Xamarin arasında pair to pair bir connection sağlanmalıdır. Bunun için 2 taraf için de yapılacak bazı işler vardır.

  • Windows tarafı için “services.msc” yazılarak “Bonjour Service”‘i :) start konumuna getirilmelidir.

services

  • Mac Os X tarafı için “command” + “space” tuşlarına basılarak “Spotlight” açılıp aşağıdaki gibi “remote” yazılır. Karşımıza çıkan Sharing tıklanır. Daha sonra “Remote Login” seçilip “All users”‘a izin verilir.

Screen Shot 2016-02-28 at 19.39.57 Screen Shot 2016-02-28 at 19.45.12

  • Windows tarafında aşağıda görüldüğü gibi “Visual Studio / Tools” seçilip “Xamarin” segmesi altındaki “iOS settings” seçilir. “Find Xamarin Mac Agent” tıklanıp ilgili Xamarinin kurlu olduğu Mac makinası bulunur ve bağlantı kurulur. Bu iki makinanın birbirini görmesi için aynı ağ üzerinde olması gerekmektedir.

Screen Shot 2016-02-28 at 19.55.50

Visual Studio tarafında aşağıdaki gibi bir bar ile karşılaşılır. Yeşil bilgisayar pair to pair connectioın olduğu anlamına gelmektedir. Hemen yanındaki mobile iconu, Mac Os X tarafında XCode sayesinde bir similator açmaya yarar.

Screen Shot 2016-02-28 at 20.29.49

Ben Mac Book Pro’da VM Windows Kullanmak için Parallel Desktop kullandım. Yaratmış olduğum Visual Studio uygulaması derlenme zamanında erişim yetkisinden dolayı hata verdi.

Screen Shot 2016-02-28 at 20.39.28

Bu hatayı düzeltmek için öncelikle Windows 10 ortamında “this computer” tıklanır. Aşağıda görüldüğü gibi “Computer” segmesinden “Map network drive” seçilir. Uygulamanın bulunduğu proje dosyasının yolu gösterilir.

network

Bundan sonra ugulama aşağıda görülen kısa yoldan açılır. Ve artık kod derlenebilmektedir:)

Screen Shot 2016-02-28 at 20.52.34

Aşağıki şemada Visual Studio ile Xamarin arasındaki yapı ve XCode ile olan UI tasarımı gösterilmektedir.

Screen Shot 2016-02-28 at 14.50.11

Şimdi sıra geldi ilk IOS uygulamamızı kodlamaya. Visual Studio tarafında “Iphone Gallery” adında “IOS / iPhone / Single View App” yaratıldıktan sonra, UI ekranı için Mac Tarafında Xamarin açılır. Pair to pair connection sayesinde ilgili projeye aşağıdaki gibi kolaylıkla ulaşılabilir.

Proje açıldığında karşımıza aşağıdaki gibi bir sayfa gelir.

Screen Shot 2016-02-29 at 00.11.26

Bunlardan Main.cs’e girildiğinde aşağıda görüldüğü gibi “AppDelegate” sınıfının en başta çağrıldığı görülür.

AppDelegate.cs: Aşağıdaki kodlara bakıldığında “MyViewController” yerine “GalleryViewController” oluşturulmuş ve “RouteViewController”‘a atanmıştır.

Yeni bir controllerın oluşturulması için(GalleryViewController) Proje sağ clicklenip aşağıdaki adımlar yapılır. Add / New File.

file

Karşımıza aşağıdaki gibi bir ekran gelir ve “View Controller” seçilip adına “GalleryViewController” atanır.

Screen Shot 2016-02-29 at 00.24.41

Oluşturulan sınıfın hemen altında aynı isimle “GalleryViewController.xib” adında bir dosya daha oluşur. İlgili sınıfın UI ekran tasarımının yapıldığı yer burasıdır.

Screen Shot 2016-02-29 at 00.28.59

İlgili “.xib” uzantılı dosya sağ tıklanıp “XCode Interface Builder” ile aşağıdaki gibi açılır. 2 adet “Önceki” ve “Sonraki” adında Button bir de “Başlık” adında bir Label aşağıdaki gibi eklenir.

Screen Shot 2016-02-29 at 00.53.41

Sayfanın aşağısındaki “wCompact hAny” tıklanıp aşağıda görüldüğü gibi bir IPhone ekran tasarımı seçilebilir.

Screen Shot 2016-02-29 at 01.05.19

Sag üsten “Show the Assistant editor” button’u tıklanır. Buradan “GalleryViewController.h” seçilir.

Screen Shot 2016-02-29 at 01.19.10  Screen Shot 2016-02-29 at 01.15.37

Açılan editörden ekrandaki objeler “control” tuşuna basılı tutularak aşağıda görüldüğü gibi sürüklenir. Sürükleme işleminden sonra karşımıza aşağıdaki gibi bir property penceresi gelir.

Property

controls

Diğer tüm nesneler içinde aynı işlemler yapıldıktan sonra ilgili kodlar aşağıdaki gibi gözükmektedir.

Daha sonra “XCode” kapatılıp Xamarin’de  GalleryViewController.designer.cs dosyasına bakıldığında kodların aşağıdaki gibi değiştiği görülür. Yani bir tarafta yapılan değişiklik diğer tarafı da etkilemektedir.

Parallel Desktop kullanılarak oluşturulan, kodlar arasındaki bağlantı aşağıdaki gibi görülmektedir.

UICode

Visual Studi ortamina geçildiğinde “GalleryViewContoller”‘ın kodları aşağıdaki gibi değiştirilir. İlgili “Önceki” ve “Sonraki” buttonlarının tıklanma olaylarına(TouchUpInside) ilgili methodlar bağlanır ve “commandText” label’ına belli bildirimler yazılır.

Button ve Labellar’ın propertyleri aşağıdaki gibi değiştirilerek arka renkleri ve font özellikleri değiştirilmiştir.

Screen Shot 2016-02-29 at 20.34.22   Screen Shot 2016-02-29 at 20.33.19

Aşağıda görüldüğü gibi commandTitle” Label’ına; “Sonraki” buttonuna tıklanınca “Sonraki Button Tıklanmıştır..”,  “Önceki” buttonuna tıklanınca “Önceki Button Tıklanmıştır..” yazısı yazdırılmıştır.SmilatorBu makalede, Xamarin ile bir IOS uygulamasını Visual Studio ortamında geliştirmek için yapılması gerekenleri adım adım inceledik. Bir sonraki makalede IOS üzerindeki örneğimizi insan kaynakları tarafından kullanılan başvuruların incelendiği bir uygulama haline getireceğiz.

Yen bir makalede görüşmek üzere hoşçakalın.

Herkes Görsün:

Sevebilirsin...

4 Yanıt

  1. Kurban dedi ki:

    Elinize sağlık Hocam. Yeni makale geldiği zaman hemen bu sayfanın altında yer alır mı ? makale yada ders 2 diye ? yada elektronik postamıza mı düşer. emeğiniz için teşekkürler…

    • borsoft dedi ki:

      Teşekkürler,

      @CoderBora Twitter’ımdan takip edebilirsiniz. Mail sistemim yok malesef:)

      İyi çalışmalar.

  2. Mesut dedi ki:

    Emeğinize Sağlık.
    Mac Os X ortamı :
    Test amaçlı similator veya araçlar. Bu araçlar emulator xamarin veya xcode ile birlikte gelmiyormuydu farklı bir yerden mi indirmemiz gerekiyor?

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir