https://docs.microsoft.com/ko-kr/azure/app-service-mobile/app-service-mobile-dotnet-backend-how-to-use-server-sdk#create-app

 

Xamarin.Forms을 사용하여 Mobile Apps 시작

이 자습서에 따라 Mobile Apps를 사용하여 Xamarin.Forms 개발을 시작할 수 있습니다.

docs.microsoft.com

위 링크를 진행한 내용입니다.

링크 내용이 부족한것도 있고 상세하지 못한것도 있어서 제가 직접 진행한 내용을
화면 캡쳐 위주로 알아보겠습니다.

1. 리소스 만들기 에서 Mobile App 를 선택

2. 만들기..

3. 앱이름 과 리소스 그룹을 지정합니다. (리소스 그룹은 새로만들기 선택)

4. 배포가 진행됩니다. (조금 시간이 걸립니다.)

5. App Service 를 선택하여 현재 만든 app 를 확인합니다.

6. 아래처럼 잘 만들어진 걸 확인합니다.

7. 빠른 시작 을 선택하고 Xamarin.Forms 를 선택합니다.

8. 1번에 DB 서버를 생성을 위해 느낌표항목을 선택

9. 데이터연결 에서 추가 버튼을 선택

10. 데이터 연결 추가 에서 필수 연결 구성을 선택

11. 데이터베이스 에서 새 데이터베이스 만들기 를 선택

12. SQL Database 에서 이름을 지정하고 필수 설정 구성 을 선택

13. 새 서버 만들기 를 선택

14. 새서버 정보를 입력합니다. 그리고 하단의 선택을 클릭

15. 앞서 항목들도 선택 및 확인을 합니다.

16. 연결 문자열에 느낌표 표시를 선택하고 확인합니다.

17. 배포가 진행됩니다.

18. Xamarin.Forms 에서 백앤드 언어를 Node.js(C#도 있음) 를 선택하고 다운로드 합니다.

19. 다운로드된 프로젝트를 엽니다.

20. 아래 처럼 기본적인 구성을 가진 Xamarin.Forms 솔루션이 미리 구성되어 있는걸 확인할수 있습니다.

21. Azure Portal 에서 SQL 데이터 베이스 를 선택하고 좀전에 만든 DB 를 선택하면

아래 처럼 기본적인 정보를 확인할수 있습니다.

22. 여기서 연결 문자열을 선택하면 프로젝트에서 사용할수 있는 DB 연결 문자열을 가져올수 있습니다.

23. 아래는 만들어진 서버 정보

24 다시 프로젝트로 돌아와 안드로이드로 실행한 결과는 ..

작동 방식은 상단의 항목을 입력하고 + 버튼을 누르면 추가됩니다.

선택하면 팝업이 뜨고 길게 누르면 상단의 COMPLETE 버튼이 활성화 되고 선택시 항목이 삭제 됩니다.

 

 

 

25. 아래는 UWP

26 아래는 아이폰 (오른쪽)

27. 입력을 몇번 해보니 아래처럼 그래프가 올라간걸 확인할수 있습니다.

데이터를 확인해 보기위해 상단의 '다음을 사용하여 연결' 을 선택합니다.

28. Visual Studio 를 선택하고 Visual Studio 열기를 합니다.

29. 아래 처럼 Visual Studio 가 열리고 앞서 설정된 Server 비번을 넣고 연결합니다.

30. 확인

31. 왼쪽의 테이블을 선택하면 데이터를 확인할수 있습니다. (시간 걸림)

 

완료

 

* 티스토리 글쓰기가 정말 힘들어 졌군요;; 글쓰는데 버벅거림이 심하군요;;

 

  1. Favicon of https://waitall.tistory.com waitall 2019.06.18 11:18 신고

    Azure 리소스 새로 만들기에서 Mobile App 으로 검색되는 내용이 없습니다. 그사이 업데이트 되거나 변경이 있나 본데, 어떤 항목으로 진행해야 될지 알 수 있을까요?

Xamarin 은 Xamarin.IOS,Xamarin.Android, Xamarin.UWP 등 각 장치에 따라 개발이 가능하도록 되어있습니다.

하지만 이렇게 개발하게 되면 각 장치에 따른 언어로 개발이 이루어 져야합니다.

Android  는 Java 로 IOS 는 xcode 로 말이죠

당연히 C# 스럽게 Xamarin 에서 만들어 주긴했지만 이건 더 개발자를 헷갈리게 하는 부분도 있습니다.

그래서 이를 해결하고자 하는게 Xamarin.Forms 입니다.

완전히 각 장치의 내용을 몰라도 되는것은 아닙니다.

각 UI 계층에 대한 API 를 사용하긴하되 얇야지게 된다고 보면됩니다.

이를 위해 Xamarin.Forms 에서 제공되는 새로운 방식을 습득해야합니다.

말이 길었네요 그럼 시작해 보겠습니다.

 

새로운 솔루션을 만듭니다. (Visual Studio 2015)

Cross-Platform 의 플랫폼 간 앱(Xamarin.Forms 또는 네이티브) 를 선택합니다.

UI 기술은 Xamarin.Forms 를 코드 공유 전략은 이식 가능한 클래스 라이르버리를 선택하여 프로젝트를 선택합니다.

공유 코드의 2가지 작성법

공유 코드를 작성하는 방법은 크게 '공유 프로젝트'와 '이식 가능한 클래스 라이브러리'로 나누어집니다.

공유 프로젝트 (Shared Project)

공유 프로젝트란 공유 프로젝트를 만들어 거기에 공통으로 사용할 코드를 C#으로 작성하고 각각의 Android, iOS, Windows 프로젝트에서 참조해 사용하는 방식입니다.

공유 프로젝트는 단지 공통 코드를 모아 놓은 집합체일 뿐이고 output이 생기지 않습니다. 각 프로젝트들이 해당 소스 코드를 자기의 프로젝트 안에 있는 것처럼 가져다가 컴파일 할 뿐입니다.. 즉, 일종의 폴더 역할 밖에 하지 않는 것입니다. 당연히 별도의 .DLL이나 .class가 생기는 클래스 라이브러리와는 차이가 있습니다. output이 없으므로 소스 없이는 다른 App 개발에 공급해서 사용할 수 없습니다.

반면, 소스 코드가 그대로 사용되므로 #if __ANDROID__처럼 컴파일 지시자를 이용해 특정 플랫폼에서만 동작하는 코드 블록을 만들 수 있습니다.

 이식 가능한 클래스 라이브러리 (Portable Class Library)

PCL이라고도 불리는 '이식 가능한 클래스 라이브러리'는 소스 코드가 직접 사용되는 공유 프로젝트와는 달리 output이 생기며 소스 코드 없이도 해당 output만을 다른 업체에 재공할 수 있습니다. PCL로 작성하면 Xamarin.iOS, Xamarin.Android뿐만 아니라 WPF, Windows App, 심지어는 XBox 등에서 사용할 수 있습니다.

하지만 플랫폼 의존적인 코드를 작성할 수 없고 플랫폼 의존적인 다른 라이브러리도 포함시킬 수 없습니다. Android와 iOS, Windows App에 공통적인 내용들로만 라이브러리가 구성됩니다.

UWP 는 버전을 선택하라고 뜹니다. 버전을 지정합니다. 일단 Default 로 진행합니다.

IOS 는 Mac 을 찾습니다. Mac 은 오고 있는 중이므로 일단 Pass 합니다. ( X 닫기)

아래처럼 솔루션이 구성됩니다.

각 프로젝트를 보시면 아시겠지만 모두 이식 가능 프로젝트의 App 를 호출하고 있습니다.

Android

 [Activity(Label = "XamarinStudy", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(bundle);

            global::Xamarin.Forms.Forms.Init(this, bundle);
            LoadApplication(new App());
        }
    }

IOS

    // 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 partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        //
        // This method is invoked when the application has loaded and is ready to run. In this
        // method you should instantiate the window, load the UI into it and then make the window
        // visible.
        //
        // You have 17 seconds to return from this method, or iOS will terminate your application.
        //
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();
            LoadApplication(new App());

            return base.FinishedLaunching(app, options);
        }
    }

UWP

    public sealed partial class MainPage
    {
        public MainPage()
        {
            this.InitializeComponent();

            LoadApplication(new XamarinStudy.App());
        }
    }

이제 이식 가능한 프로젝트에 각 장치에서 보여질 화면을 하나 만들어 보겠습니다.

Content Page 는 C#  과 xaml 파일로 만들 수 있습니다. 전 C# 으로 만들었습니다.

내부에 아래 처럼 코딩합니다.

화면에 Welcome to Xamarin Forms! 를 출력하는 단순한 화면입니다.

        public StudyPage()
        {
            Content = new StackLayout
            {
                Children = {
                    new Label { Text = "Welcome to Xamarin Forms!" }
                }
            };
           
            Padding = new Thickness(0, 20, 0, 0);
        }

이제 실행해 봅니다.

단, UWP 프로젝트는 먼저 배포를 해야합니다.

아래는 실행 결과 입니다.

안드로이드 애뮬과 UWP 앱에 글자가 잘 표시된 걸 볼수 있습니다.

 

+ Recent posts