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

Yazar: borsoft · 1 Mart 2016

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

Ş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.

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.

using UIKit;

namespace IphoneGallery
{
    public class Application
    {
        // This is the main entry point of the application.
        static void Main(string[] args)
        {
            // if you want to use a different Application Delegate class from "AppDelegate"
            // you can specify it here.
            UIApplication.Main(args, null, "AppDelegate");
        }
    }
}

using UIKit;

namespace IphoneGallery

{

public class Application

{

// This is the main entry point of the application.

static void Main(string[] args)

{

// if you want to use a different Application Delegate class from "AppDelegate"

// you can specify it here.

UIApplication.Main(args, null, "AppDelegate");

}

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

using Foundation;
using UIKit;

namespace IphoneGallery
{
    // The UIApplicationDelegate for the application. This class is responsible for launching the 
    // User Interface of the application, as well as listening (and optionally responding) to 
    // application events from iOS.
    [Register("AppDelegate")]
    public class AppDelegate : UIApplicationDelegate
    {
        // class-level declarations

        public override UIWindow Window
        {
            get;
            set;
        }
		GalleryViewController viewController;
        public override bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)
        {
			Window = new UIWindow (UIScreen.MainScreen.Bounds);
			viewController = new GalleryViewController ();
			Window.RootViewController = viewController;
			Window.MakeKeyAndVisible ();
            return true;
        }
     }

using Foundation;

using UIKit;

namespace IphoneGallery

{

// The UIApplicationDelegate for the application. This class is responsible for launching the

// User Interface of the application, as well as listening (and optionally responding) to

// application events from iOS.

[Register("AppDelegate")]

public class AppDelegate : UIApplicationDelegate

{

// class-level declarations

public override UIWindow Window

{

get;

set;

}

GalleryViewController viewController;

public override bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)

{

Window = new UIWindow (UIScreen.MainScreen.Bounds);

viewController = new GalleryViewController ();

Window.RootViewController = viewController;

Window.MakeKeyAndVisible ();

return true;

}

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

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

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.

İ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.

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.

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

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.

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

// WARNING
// This file has been generated automatically by Xamarin Studio to
// mirror C# types. Changes in this file made by drag-connecting
// from the UI designer will be synchronized back to C#, but
// more complex manual changes may not transfer correctly.


#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>


@interface GalleryViewController : UIViewController {
	
    IBOutlet UIButton *btnPrev;
    IBOutlet UIButton *btnNext;
    IBOutlet UILabel *commandTitle;
}

@end

// WARNING

// This file has been generated automatically by Xamarin Studio to

// mirror C# types. Changes in this file made by drag-connecting

// from the UI designer will be synchronized back to C#, but

// more complex manual changes may not transfer correctly.

#import <Foundation/Foundation.h>

#import <UIKit/UIKit.h>

@interface GalleryViewController : UIViewController {

IBOutlet UIButton *btnPrev;

IBOutlet UIButton *btnNext;

IBOutlet UILabel *commandTitle;

}

@end

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.

// WARNING
//
// This file has been generated automatically by Xamarin Studio to store outlets and
// actions made in the UI designer. If it is removed, they will be lost.
// Manual changes to this file may not be handled correctly.
//
using Foundation;
using System.CodeDom.Compiler;

namespace IphoneGallery
{
	[Register ("GalleryViewController")]
	partial class GalleryViewController
	{
		[Outlet]
		UIKit.UIButton btnNext { get; set; }

		[Outlet]
		UIKit.UIButton btnPrev { get; set; }

		[Outlet]
		UIKit.UILabel commandTitle { get; set; }
		
		void ReleaseDesignerOutlets ()
		{
			if (btnPrev != null) {
				btnPrev.Dispose ();
				btnPrev = null;
			}

			if (btnNext != null) {
				btnNext.Dispose ();
				btnNext = null;
			}

			if (commandTitle != null) {
				commandTitle.Dispose ();
				commandTitle = null;
			}
		}
	}
}

// WARNING

// This file has been generated automatically by Xamarin Studio to store outlets and

// actions made in the UI designer. If it is removed, they will be lost.

// Manual changes to this file may not be handled correctly.

using Foundation;

using System.CodeDom.Compiler;

namespace IphoneGallery

{

[Register ("GalleryViewController")]

partial class GalleryViewController

{

[Outlet]

UIKit.UIButton btnNext { get; set; }

[Outlet]

UIKit.UIButton btnPrev { get; set; }

[Outlet]

UIKit.UILabel commandTitle { get; set; }

void ReleaseDesignerOutlets ()

{

if (btnPrev != null) {

btnPrev.Dispose ();

btnPrev = null;

}

if (btnNext != null) {

btnNext.Dispose ();

btnNext = null;

}

if (commandTitle != null) {

commandTitle.Dispose ();

commandTitle = null;

}

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

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.

using System;

using UIKit;

namespace IphoneGallery
{
	public partial class GalleryViewController : UIViewController
	{
		public GalleryViewController () : base ("GalleryViewController", null)
		{		

		}

        public override void ViewDidLoad ()
		{
			base.ViewDidLoad ();
            // Perform any additional setup after loading the view, typically from a nib.
            btnPrev.TouchUpInside += BtnPrev_TouchUpInside;
            btnNext.TouchUpInside += BtnNext_TouchUpInside;
		}

        private void BtnNext_TouchUpInside(object sender, EventArgs e)
        {
            commandTitle.Text = "Önceki Button Tıklanmıştır..";
        }

        private void BtnPrev_TouchUpInside(object sender, EventArgs e)
        {
            commandTitle.Text = "Sonraki Button Tıklanmıştır..";
        }

        public override void DidReceiveMemoryWarning ()
		{
			base.DidReceiveMemoryWarning ();
			// Release any cached data, images, etc that aren't in use.
		}
	}
}

using System;

using UIKit;

namespace IphoneGallery

{

public partial class GalleryViewController : UIViewController

{

public GalleryViewController () : base ("GalleryViewController", null)

{

}

public override void ViewDidLoad ()

{

base.ViewDidLoad ();

// Perform any additional setup after loading the view, typically from a nib.

btnPrev.TouchUpInside += BtnPrev_TouchUpInside;

btnNext.TouchUpInside += BtnNext_TouchUpInside;

}

private void BtnNext_TouchUpInside(object sender, EventArgs e)

{

commandTitle.Text = "Önceki Button Tıklanmıştır..";

}

private void BtnPrev_TouchUpInside(object sender, EventArgs e)

{

commandTitle.Text = "Sonraki Button Tıklanmıştır..";

}

public override void DidReceiveMemoryWarning ()

{

base.DidReceiveMemoryWarning ();

// Release any cached data, images, etc that aren't in use.

}

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.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.Bu 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.

Source: https://www.pluralsight.com/courses/cross-platform-ios-android-visual-studio-csharp

Kurban dedi ki:

3 Mart 2016, 01:20

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…

Cevapla
- borsoft dedi ki:
  
  3 Mart 2016, 21:37
  
  Teşekkürler,
  
  @CoderBora Twitter’ımdan takip edebilirsiniz. Mail sistemim yok malesef:)
  
  İyi çalışmalar.
  
  Cevapla
Mesut dedi ki:

9 Kasım 2016, 02:04

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?

Cevapla
- borsoft dedi ki:
  
  14 Kasım 2016, 15:44
  
  Teşekkürler Mesuti
  
  Similatorler Xcode ile beraber gelmektedir.
  
  İyi çalışmalar.
  
  Cevapla

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

Bunlar da hoşunuza gidebilir...

4 Cevaplar

Bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler

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

Bunlar da hoşunuza gidebilir...

Ionic Native Typescript

Xamarin ile Instagram Uygulaması Yazmak

Fatih Sultan Mehmet Vakıf Semineri

4 Cevaplar

Bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler