xamarin.forms (mvp comcamp 2015)

99
Xamarin.FormsiOS, 안드로이드마리 토끼잡기 이길복 (주) 바이트코드랩 이사 Microsoft MVP

Upload: gilbok-lee

Post on 15-Jul-2015

847 views

Category:

Technology


7 download

TRANSCRIPT

Page 1: Xamarin.Forms (MVP ComCamp 2015)

Xamarin.Forms로 iOS, 안드로이드앱 두 마리 토끼잡기 이길복 (주) 바이트코드랩 이사 Microsoft MVP

Page 2: Xamarin.Forms (MVP ComCamp 2015)

http://1drv.ms/1BGxndp

Page 3: Xamarin.Forms (MVP ComCamp 2015)

이길복 (Gilbok Lee)

• 현재는 (주)바이트코드랩 이사 전에는 (주)휴즈플로우 CTO

• Microsoft MVP 7년 •  Expression Blend(2008~2009) → Silverlight(2010~2012) → ClientApp Dev(2013) → Windo

ws Platform Development(2014)

• C#으로 하는 건 뭐든 좋아! •  Silverlight •  WPF •  Windows Phone •  Windows Store App •  Unity •  Xamarin

Page 4: Xamarin.Forms (MVP ComCamp 2015)

바이트코드랩?

•  “뭐! 게임에 카카오톡을 붙였더니 서버가 한 시간도 못 버티고 죽는다고??!”

• 모바일 게임서버, Hive5에서 시작하세요.

• Hive5 SDK •  (REST API) •  유니티 3D •  Unreal (개발중)

Page 5: Xamarin.Forms (MVP ComCamp 2015)

목차

1.  Xamarin 인포그래픽 2.  Xamarin의 시대적 사명 3.  Xamarin 개발환경 4.  Xamarin.Forms  헬로월드 5.  Xamarin.Forms 개요 6.  PCL(Portable Class Library) 7.  Shared Project 8.  Navigation 9.  다국어지원 10. IPlatformDependent 11. More Xamarin

(Windows Phone, Mac OS, Component Store)

Page 6: Xamarin.Forms (MVP ComCamp 2015)

Xamarin 인포그래픽 http://goo.gl/q63jY3

Page 7: Xamarin.Forms (MVP ComCamp 2015)
Page 8: Xamarin.Forms (MVP ComCamp 2015)
Page 9: Xamarin.Forms (MVP ComCamp 2015)
Page 10: Xamarin.Forms (MVP ComCamp 2015)
Page 11: Xamarin.Forms (MVP ComCamp 2015)
Page 12: Xamarin.Forms (MVP ComCamp 2015)
Page 13: Xamarin.Forms (MVP ComCamp 2015)
Page 14: Xamarin.Forms (MVP ComCamp 2015)
Page 15: Xamarin.Forms (MVP ComCamp 2015)

Xamarin 시대적 사명

Page 16: Xamarin.Forms (MVP ComCamp 2015)

일타쌍피의 정신계승: 크로스플랫폼 사업가의 니즈 관리자의 니즈 개발자의 니즈

Page 17: Xamarin.Forms (MVP ComCamp 2015)

여러 모바일 플랫폼 앱들을 단 하나의 C#언어로 통일. 오! LINQ!

Page 18: Xamarin.Forms (MVP ComCamp 2015)

플랫폼 간 코드를 공유 - 비즈니스로직: PCL - 리소스: SharedProject

Page 19: Xamarin.Forms (MVP ComCamp 2015)

플랫폼 간 코드를 공유 - UI & 워크플로우: Xamarin.Forms !

Page 20: Xamarin.Forms (MVP ComCamp 2015)

혹시 Visual Studio를 사용한다면, 최강의 인텔리센스, Resharper 등 개발자 경험 그대로~

Page 21: Xamarin.Forms (MVP ComCamp 2015)

혹시 윈도우폰/윈도우스토어 앱을 개발해 놓은 코드가 있다면, 재활용할 수 있을지 몰라…

Page 22: Xamarin.Forms (MVP ComCamp 2015)

혹시 클라우드서비스 중 애저를 좋아한다면, Windows Azure Component를 쓰면 되고!

Page 23: Xamarin.Forms (MVP ComCamp 2015)

Xamarin 개발환경 구축하기

Page 24: Xamarin.Forms (MVP ComCamp 2015)

원클릭 설치

• http://xamarin.com 구석구석 Download Now 버튼

Page 25: Xamarin.Forms (MVP ComCamp 2015)

Main IDE #1: Xamarin Studio

Page 26: Xamarin.Forms (MVP ComCamp 2015)

Main IDE #2: Visual Studio

Page 27: Xamarin.Forms (MVP ComCamp 2015)

시간절약합시다

• Visual Studio 2013 Update 3

• Nuget Package Manager (2.3 이상) 업데이트 필수 •  [Tools ­– Extensions and Updates ­– Online Update]

Page 28: Xamarin.Forms (MVP ComCamp 2015)

요구사항

• Mac •  Mac OS Mountain Lion 이상 •  XCode(iOS SDK 함께 깔림)

• Windows •  Windows 7 이상 •  Visual Studio 2010 Professional 이상

•  Express Edition은 안 되요. (Add-ins 기능 미지원)

•  없으면 Xamarin Studio 쓰세요!

Page 29: Xamarin.Forms (MVP ComCamp 2015)

AOT Compiler가 네이티브앱 생성 iOS API 100% 지원

iOS 5부터 현재까지 same-day shipping 기존 Objective C 코드 호출가능

Page 30: Xamarin.Forms (MVP ComCamp 2015)

JIT Compilation -> Native APK

기존 Java 코드 호출가능

Android API 100% 지원

ICS부터 현재까지 same-day shipping

Page 31: Xamarin.Forms (MVP ComCamp 2015)

맥이 없어도 되나?

• Sorry, 그건 아님.

Page 32: Xamarin.Forms (MVP ComCamp 2015)

Xamarin.iOS Build Host

Page 33: Xamarin.Forms (MVP ComCamp 2015)

Xamarin.iOS Build Host : Mac

Page 34: Xamarin.Forms (MVP ComCamp 2015)

특이사항

• 보통은 기다리다 지쳐 IP 입력수동연결!

• 윈도우/맥 양쪽에 설치된 Xamarin 버전이 일치해야함!

• 실패하면 진단

Page 35: Xamarin.Forms (MVP ComCamp 2015)
Page 36: Xamarin.Forms (MVP ComCamp 2015)
Page 37: Xamarin.Forms (MVP ComCamp 2015)

안드로이드 에뮬레이터: 지니모션

Page 38: Xamarin.Forms (MVP ComCamp 2015)

Nuget & Component Store

Page 39: Xamarin.Forms (MVP ComCamp 2015)

Xamarin.Forms 헬로월드 코드리뷰

Page 40: Xamarin.Forms (MVP ComCamp 2015)
Page 41: Xamarin.Forms (MVP ComCamp 2015)
Page 42: Xamarin.Forms (MVP ComCamp 2015)
Page 43: Xamarin.Forms (MVP ComCamp 2015)
Page 44: Xamarin.Forms (MVP ComCamp 2015)
Page 45: Xamarin.Forms (MVP ComCamp 2015)
Page 46: Xamarin.Forms (MVP ComCamp 2015)

Xamarin.Forms 개요 Overview

Page 47: Xamarin.Forms (MVP ComCamp 2015)

Xamarin.Forms

• 하나의 UI 코드로 여러 플랫폼을 동시에!

• XAML Controls임! •  그런데 미안해! 알고있는 그 XAML 아님. •  즉, 고대부터 존재한 XAML Designer와 호환되지 않음.

•  MVVM과 데이터바인딩!

• 애니메이션!

• 애니메이션과 async/await

Page 48: Xamarin.Forms (MVP ComCamp 2015)

Xamarin.Forms

Page 49: Xamarin.Forms (MVP ComCamp 2015)
Page 50: Xamarin.Forms (MVP ComCamp 2015)
Page 51: Xamarin.Forms (MVP ComCamp 2015)
Page 52: Xamarin.Forms (MVP ComCamp 2015)

Pages

Page 53: Xamarin.Forms (MVP ComCamp 2015)

Layouts

Page 54: Xamarin.Forms (MVP ComCamp 2015)

Controls

Page 55: Xamarin.Forms (MVP ComCamp 2015)

PCL을 소개합니다. (Portable Class Library)

Page 56: Xamarin.Forms (MVP ComCamp 2015)

PCL은 멀티플랫폼을 target하기 위해 만들어진 클래스 라이브러리. 다시 컴파일 하는 일 없이 다양한 .NET 플랫폼 위에서 사용될 수 있는 어셈블리를 만들어내는 클래스 라이브러리

Page 57: Xamarin.Forms (MVP ComCamp 2015)
Page 58: Xamarin.Forms (MVP ComCamp 2015)
Page 59: Xamarin.Forms (MVP ComCamp 2015)

System.IO네임스페이스 136개 클래스 중

40 in Xamarin.iOS and Xamarin.Android

14 in PCL

Page 60: Xamarin.Forms (MVP ComCamp 2015)

플랫폼마다 지원하는 BCL 범위 다름 BCL = .NET Base Class Library

Page 61: Xamarin.Forms (MVP ComCamp 2015)

아… 진짜 사랑해 LINQ

Page 62: Xamarin.Forms (MVP ComCamp 2015)
Page 63: Xamarin.Forms (MVP ComCamp 2015)

장점(pros)

• 중앙집중식 코드 공유 •  다른 라이브러리들 사용하면서, 한 프로젝트에 코드 작성하고 테스트 가능

• 리팩토링 작업이 전역적으로 영향을 미칠 수 있음 •  PCL라이브러리와 각각의 플랫폼 앱 프로젝트를 동시에 수정하는 것이 가능

• 솔루션 내의 다른 프로젝트에 아주 쉽게 참조추가 •  출력 어셈블리를 공유할 수 있음

Page 64: Xamarin.Forms (MVP ComCamp 2015)

단점(cons)

• 서로서로 공통인 것만 인정해 주기 때문에 특정 플랫폼 타는 라이브러리는 참조 불가. 예를 들어, Community.CsharpSqlite.WP7 따위

• MonoTouch()와 Mono for Android가 동시에 지원하고 있지 않은 클래스는 포함하고 있지 않음.

Page 65: Xamarin.Forms (MVP ComCamp 2015)
Page 66: Xamarin.Forms (MVP ComCamp 2015)

Shared Project를 소개합니다

Page 67: Xamarin.Forms (MVP ComCamp 2015)

이미지, 코드, 미디어 파일을 공유. 일단 SharedProject에 어떤 파일을 넣으면 모든 플랫폼에서 공유함.

Page 68: Xamarin.Forms (MVP ComCamp 2015)

Add as a link 기억하세요? 파일 링킹과 유사한 컨셉.

Page 69: Xamarin.Forms (MVP ComCamp 2015)

코드의 경우 조건부 컴파일 가능. 아이폰, 안드로이드폰 코드 섞어 놓고 빌드 설정으로 제어가능. #if __Android__

Page 70: Xamarin.Forms (MVP ComCamp 2015)
Page 71: Xamarin.Forms (MVP ComCamp 2015)
Page 72: Xamarin.Forms (MVP ComCamp 2015)
Page 73: Xamarin.Forms (MVP ComCamp 2015)

GitHub에서 Tasky 프로젝트 https://github.com/xamarin/mobile-samples/tree/master/Tasky

Page 74: Xamarin.Forms (MVP ComCamp 2015)

Xamarin Studio 5 Visual Studio 2013 Update 2 부터 지원

Page 75: Xamarin.Forms (MVP ComCamp 2015)

Navigation

Page 76: Xamarin.Forms (MVP ComCamp 2015)

Page A Page B

await this.Navigation.PushModalAsync(signInPage); await this.Navigation.PopModalAsync();

다른 페이지 위에 Modal로 열 때: 닫을 때:

await this.Navigation.PushAsync(eventDetailPage); await this.Navigation.PopAsync();

다른 페이지로 이동할 때: 돌아올 때:

Page 77: Xamarin.Forms (MVP ComCamp 2015)

다국어지원 Localization

Page 78: Xamarin.Forms (MVP ComCamp 2015)

다국어 리소스준비

Country Code ISO 1366

Page 79: Xamarin.Forms (MVP ComCamp 2015)
Page 80: Xamarin.Forms (MVP ComCamp 2015)

Code에서 사용하기

Page 81: Xamarin.Forms (MVP ComCamp 2015)

XAML에서 사용하기 STEP1

• TranslateExtension.cs 구현 •  Xamarin.Forms Sample에 들어있음 •  https://github.com/xamarin/xamarin-forms-samples/blob/master/

UsingResxLocalization/UsingResxLocalization/PagesXaml/TranslateExtension.cs

Page 82: Xamarin.Forms (MVP ComCamp 2015)

XAML에서 사용하기 STEP2 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ServicePointPush.SignInPage" xmlns:local="clr-namespace:ServicePointPush;assembly=ServicePointPush" xmlns:i18n="clr-namespace:ServicePointPush;assembly=ServicePointPush"> <StackLayout Padding="20" Orientation="Vertical"> <Entry x:Name="UserIdText"

Placeholder="{i18n:Translate View_SignIn_PlaceHolder_UserId}" /> <Entry x:Name="PasswordBox" IsPassword="true"

Placeholder="{i18n:Translate View_SignIn_PlaceHolder_UserPw}" /> </StackLayout> </ContentPage>

Page 83: Xamarin.Forms (MVP ComCamp 2015)

IPlatformDependent Interface for native feature support

Page 84: Xamarin.Forms (MVP ComCamp 2015)

플랫폼 의존성을 가진 기능 지원하는 방법

• SQLite

• Notification

• UUID얻기

• OS의 언어설정 얻기

• Camera 등 하드웨어 관련

Page 85: Xamarin.Forms (MVP ComCamp 2015)

Nuget Package Manager

Page 86: Xamarin.Forms (MVP ComCamp 2015)

SQLite.NET 이용하기

• Nuget Package Manager로 •  PCL 프로젝트에 SQLite.Net PCL 추가 •  iOS 프로젝트에 SQLite.Net PCL과

SQLite.Net PCL ­– XamarinIOS Platform 추가 •  Android 프로젝트에 SQLite.Net PCL과

SQLite.Net PCL ­– XamarinAndroid Platform 추가

PCL

Android

iOS

Page 87: Xamarin.Forms (MVP ComCamp 2015)

PCL에 ISQLite 추가 namespace ServicePointPush { public interface ISQLite { SQLiteConnection GetConnection(); bool ExistsTable<T>(SQLiteConnection conn); } }

Page 88: Xamarin.Forms (MVP ComCamp 2015)

iOS 프로젝트에 ISQLite 구현 [assembly: Dependency(typeof(SQLiteiOS))] namespace ServicePointPush.iOS { public class SQLiteiOS : ISQLite { public SQLiteiOS() { } public SQLite.Net.SQLiteConnection GetConnection() { var sqliteFilename = AppDb.DbFileName; string documentsPath = Environment.GetFolderPath(Environment.SpecialFolder.Personal); // Documents folder string libraryPath = Path.Combine(documentsPath, "..", "Library"); // Library folder var path = Path.Combine(libraryPath, sqliteFilename); var plat = new SQLitePlatformIOS(); var conn = new SQLiteConnection(plat, path); return conn; } public bool ExistsTable<T>(SQLiteConnection conn) {

return conn.ExistsTable<T>(); } } }

Page 89: Xamarin.Forms (MVP ComCamp 2015)

Android 프로젝트에 ISQLite 구현 [assembly: Dependency(typeof (SQLiteAndroid))] namespace ServicePointPush.Droid { public class SQLiteAndroid : ISQLite { public SQLiteAndroid () {} public SQLite.Net.SQLiteConnection GetConnection () { var sqliteFilename = AppDb.DbFileName; string documentsPath = System.Environment.GetFolderPath (System.Environment.SpecialFolder.Personal); var path = Path.Combine(documentsPath, sqliteFilename); var plat = new SQLitePlatformAndroid(); var conn = new SQLiteConnection(plat, path); return conn; } public bool ExistsTable<T>(SQLiteConnection conn) { return conn.ExistsTable<T>(); } } }

Page 90: Xamarin.Forms (MVP ComCamp 2015)

사용할 땐 var sqlite = DependencyService.Get<ISQLite>(); if (sqlite == null) throw new NullReferenceException("sqlite should not be null"); _conn = sqlite.GetConnection(); if (sqlite.ExistsTable<NotificationData>(_conn) == false) { _conn.CreateTable<NotificationData>(); }

Page 91: Xamarin.Forms (MVP ComCamp 2015)

More Xamarin

Page 92: Xamarin.Forms (MVP ComCamp 2015)

More

• Google Wear, Google Glass

• Windows Phone

• Windows Store App

Page 93: Xamarin.Forms (MVP ComCamp 2015)
Page 94: Xamarin.Forms (MVP ComCamp 2015)

자기주도학습 시작점

http://developer.xamarin.com

Page 95: Xamarin.Forms (MVP ComCamp 2015)
Page 96: Xamarin.Forms (MVP ComCamp 2015)

무료 C# 티셔츠!

Page 97: Xamarin.Forms (MVP ComCamp 2015)

https://xamarin.com/c-sharp-shirt

Page 98: Xamarin.Forms (MVP ComCamp 2015)

Contact

[email protected]

Page 99: Xamarin.Forms (MVP ComCamp 2015)

감사합니다.