Azure를 사용하여 Xamarin.Forms 앱 만들기Create a Xamarin.Forms app with Azure

이 자습서에서는 Azure App Service의 Mobile Apps 기능을 백 엔드로 사용하여 클라우드 기반 백 엔드 서비스를 Xamarin.Forms 모바일 앱에 추가하는 방법을 보여줍니다.This tutorial shows you how to add a cloud-based back-end service to a Xamarin.Forms mobile app by using the Mobile Apps feature of Azure App Service as the back end. 새 Mobile Apps 백 엔드와 앱 데이터를 Azure에 저장하는 간단한 할 일 모음 Xamarin.Forms 앱을 만듭니다.You create both a new Mobile Apps back end and a simple to-do list Xamarin.Forms app that stores app data in Azure.

이 자습서를 완료해야 다른 모든 Xamarin.Forms용 Mobile Apps 자습서를 진행할 수 있습니다.Completing this tutorial is a prerequisite for all other Mobile Apps tutorials for Xamarin.Forms.

필수 조건Prerequisites

이 자습서를 완료하려면 다음이 필요합니다.To complete this tutorial, you need the following:

  • 활성 Azure 계정.An active Azure account. 계정이 없는 경우 Azure 평가판을 등록하고 최대 10개의 무료 모바일 앱을 가져올 수 있습니다. 이러한 앱은 평가판 사용 기간이 끝난 후에도 계속 사용할 수 있습니다.If you don't have an account, you can sign up for an Azure trial and get up to 10 free mobile apps that you can keep using even after your trial ends. 자세한 내용은 Azure 평가판을 참조하세요.For more information, see Azure Free Trial.

  • Visual Studio 2017 또는 Mac용 Visual Studio에서 Xamarin용 Visual Studio ToolsVisual Studio Tools for Xamarin, in Visual Studio 2017 or Visual Studio for Mac. 지침은 Xamarin 설치 페이지를 참조하세요.See the Xamarin installation page for instructions.

  • (선택 사항) iOS 앱을 빌드하려면 Xcode 9.0 이상이 있는 Mac이 필요합니다.(optional) To build an iOS app, a Mac with Xcode 9.0 or later is required. Mac용 Visual Studio를 사용하여 iOS 앱을 개발하거나 Visual Studio 2017을 사용할 수 있습니다(네트워크에서 Mac을 사용할 수 있는 한).Visual Studio for Mac can be used to develop iOS apps, or Visual Studio 2017 can be used (so long as the Mac is available on the network).

새 Mobile Apps 백 엔드 만들기Create a new Mobile Apps back end

새 Mobile Apps 백 엔드를 만들려면 다음을 수행합니다.To create a new Mobile Apps back end, do the following:

  1. Azure Portal에 로그인합니다.Sign in to the Azure portal.

  2. 리소스 만들기를 클릭합니다.Click Create a resource.

  3. 검색 상자에 Mobile Apps를 입력합니다.In the search box, type Mobile Apps.

    Mobile Apps 빠른 시작이 강조 표시된 Azure PortalAzure portal with Mobile Apps Quickstart highlighted

  4. 결과 목록에서 Mobile Apps 빠른 시작을 선택한 후 만들기를 선택합니다.In the results list, select Mobile Apps Quickstart, and then select Create.

  5. 고유한 앱 이름을 선택합니다.Choose a unique App name. 이 이름은 App Service에 대한 도메인 이름의 일부도 됩니다.This will also be part of the domain name for your App Service.

  6. 리소스 그룹 아래에서 기존 리소스 그룹을 선택하거나 새 리소스 그룹을 만듭니다(앱과 동일한 이름 사용).Under Resource Group, select an existing resource group or create a new one (using the same name as your app).

  7. 만들기를 클릭합니다.Click Create. 계속 진행하기 전에 서비스가 성공적으로 배포되도록 몇 분 동안 기다립니다.Wait a few minutes for the service to be deployed successfully before proceeding. 상태 업데이트를 확인하려면 포털 머리글에 있는 알림(벨) 아이콘을 지켜봅니다.Watch the Notifications (bell) icon in the portal header for status updates.

이제 모바일 애플리케이션에서 사용할 수 있는 모바일 앱 백 엔드를 설정했습니다.You have now set up a Mobile App back-end that your mobile applications can use. 다음으로, 간단한 할 일 목록 백 엔드에 대한 서버 프로젝트를 다운로드하고 Azure에 게시합니다.Next, you download a server project for a simple to-do list back end and then publish it to Azure.

서버 프로젝트 구성Configure the server project

Node.js 또는 .NET 백 엔드를 사용하도록 서버 프로젝트를 구성하려면 다음을 수행합니다.To configure the server project to use either the Node.js or .NET back end, do the following:

  1. App Services 단추를 클릭하고, Mobile Apps 백 엔드를 선택하고, 빠른 시작을 선택한 후 클라이언트 플랫폼(iOS, Android, Xamarin, Cordova)을 선택합니다.Click the App Services button, select your Mobile Apps back end, select Quickstart, and then select your client platform (iOS, Android, Xamarin, Cordova).

    Mobile Apps 빠른 시작이 강조 표시된 Azure Portal

  2. 데이터베이스 연결이 구성되지 않은 경우 다음을 수행하여 새로 만듭니다.If a database connection is not configured, create one by doing the following:

    Mobile Apps가 있는 Azure Portal 데이터베이스에 연결

    a.a. 새 SQL Database 및 서버를 만듭니다.Create a new SQL database and server. 아래 3단계를 완료하기 위해 연결 문자열 이름 필드를 MS_TableConnectionString의 기본값으로 유지해야 합니다.You may need to leave the connection string name field to the default value of MS_TableConnectionString in order to complete step 3 below.

    Mobile Apps가 있는 Azure Portal 새 데이터베이스 및 서버 만들기

    b.b. 데이터 연결을 성공적으로 만들 때까지 기다립니다.Wait until the data connection is successfully created.

    데이터 연결을 성공적으로 만들는 경우 Azure Portal 알림

    다.c. 데이터 연결이 성공해야 합니다.Data connection must be successful.

    Azure Portal 알림, "이미 데이터가 연결되었습니다."

  3. 2. 테이블 API 만들기 아래에서 백 엔드 언어를 Node.js로 선택합니다.Under 2. Create a table API, select Node.js for Backend language.

  4. 승인을 허용하고 TodoItem 테이블 만들기를 선택합니다.Accept the acknowledgment, and then select Create TodoItem table. 이 작업을 통해 데이터베이스의 테이블에 새 할 일 목록을 만듭니다.This action creates a new to-do item table in your database.

    중요

    기존 백 엔드를 Node.js로 전환하면 모든 내용을 덮어씁니다.Switching an existing back end to Node.js overwrites all contents. 대신 .NET 백 엔드를 만들려면 Mobile Apps에 대한 .NET 백 엔드 서버 SDK 사용을 참조하세요.To create a .NET back end instead, see Work with the .NET back-end server SDK for Mobile Apps.

Xamarin.Forms 솔루션 다운로드 및 실행Download and run the Xamarin.Forms solution

Xamarin용 Visual Studio Tools는 솔루션을 열어야 합니다. Xamarin 설치 지침을 참조하세요.The Visual Studio Tools for Xamarin are required to open the solution, see the Xamarin installation instructions. 도구를 이미 설치한 경우 다음 단계에 따라 솔루션을 다운로드하고 엽니다.If the tools are already installed, follow these steps to download and open the solution:

Visual StudioVisual Studio

  1. Azure Portal로 이동합니다.Go to the Azure portal.

  2. Mobile Apps에 대한 설정 블레이드에서 빠른 시작(배포 아래) > Xamarin.Forms를 차례로 클릭합니다.On the settings blade for your Mobile App, click Quickstart (under Deployment) > Xamarin.Forms. 3단계 아래에서 새 앱 만들기가 선택되어 있지 않으면 클릭합니다.Under step 3, click Create a new app if it's not already selected. 그런 다음 다운로드 단추를 클릭합니다.Next click the Download button.

    이 작업을 통해 모바일 앱에 연결된 클라이언트 애플리케이션을 포함하는 프로젝트를 다운로드합니다.This action downloads a project that contains a client application that's connected to your mobile app. 압축된 프로젝트 파일을 로컬 컴퓨터에 저장하고 저장 위치를 기록해 둡니다.Save the compressed project file to your local computer, and make a note of where you save it.

  3. 다운로드한 프로젝트를 추출한 다음, Visual Studio 2017에서 엽니다.Extract the project that you downloaded, and then open it in Visual Studio 2017.

    Visual Studio에서 추출된 프로젝트

  4. 아래 지침을 따라 Android 또는 Windows 프로젝트를 실행합니다. 사용할 수 있는 네트워크로 연결된 Mac 컴퓨터가 있는 경우 iOS 프로젝트입니다.Follow the instructions below to run the Android or Windows projects; and if there is a networked Mac computer available, the iOS project.

Mac용 Visual StudioVisual Studio for Mac

  1. Azure Portal로 이동합니다.Go to the Azure portal.

  2. Mobile Apps에 대한 설정 블레이드에서 빠른 시작(배포 아래) > Xamarin.Forms를 차례로 클릭합니다.On the settings blade for your Mobile App, click Quickstart (under Deployment) > Xamarin.Forms. 3단계 아래에서 새 앱 만들기가 선택되어 있지 않으면 클릭합니다.Under step 3, click Create a new app if it's not already selected. 그런 다음 다운로드 단추를 클릭합니다.Next click the Download button.

    이 작업을 통해 모바일 앱에 연결된 클라이언트 애플리케이션을 포함하는 프로젝트를 다운로드합니다.This action downloads a project that contains a client application that's connected to your mobile app. 압축된 프로젝트 파일을 로컬 컴퓨터에 저장하고 저장 위치를 기록해 둡니다.Save the compressed project file to your local computer, and make a note of where you save it.

  3. 다운로드한 프로젝트를 추출한 다음, Mac용 Visual Studio에서 엽니다.Extract the project that you downloaded, and then open it in Visual Studio for Mac.

    Mac용 Visual Studio에서 추출된 프로젝트

  4. 아래 지침을 따라 Android 또는 iOS 프로젝트를 실행합니다.Follow the instructions below to run the Android or iOS projects.

(선택 사항) Android 프로젝트 실행(Optional) Run the Android project

이 섹션에서는 Xamarin.Android 프로젝트를 실행합니다.In this section, you run the Xamarin.Android project. Android 디바이스를 작업하지 않는 경우 이 섹션을 건너뛸 수 있습니다.You can skip this section if you are not working with Android devices.

Visual StudioVisual Studio

  1. Android(Droid) 프로젝트를 마우스 오른쪽 단추로 누른 다음 시작 프로젝트로 설정을 선택합니다.Right-click the Android (Droid) project, and then select Set as StartUp Project.

  2. 빌드 메뉴에서 구성 관리자를 선택합니다.On the Build menu, select Configuration Manager.

  3. 구성 관리자 대화 상자에서 Android 프로젝트 옆에 있는 빌드배포 확인란을 선택하고, 공유 코드 프로젝트에 빌드 확인란을 선택했는지 확인합니다.In the Configuration Manager dialog box, select the Build and Deploy check boxes next to the Android project, and ensure the shared code project has the Build box checked.

  4. 프로젝트를 빌드하고 Android 에뮬레이터에서 앱을 시작하려면 F5 키를 누르거나 시작 단추를 클릭합니다.To build the project and start the app in an Android emulator, press the F5 key or click the Start button.

Mac용 Visual StudioVisual Studio for Mac

  1. Android 프로젝트를 마우스 오른쪽 단추로 누른 다음 시작 프로젝트로 설정을 선택합니다.Right-click the Android project, and then select Set As Startup Project.

  2. 프로젝트를 빌드하고 Android 에뮬레이터에서 앱을 시작하려면 실행 메뉴를 선택한 다음, 디버깅 시작을 선택합니다.To build the project and start the app in an Android emulator, select the Run menu, then Start Debugging.

앱에서 Learn Xamarin과 같은 의미 있는 텍스트를 입력한 후 더하기 기호(+)를 선택합니다.In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

Android 할 일 앱

이 작업을 통해 Azure에서 호스트된 새 Mobile Apps 백 엔드에 게시 요청이 전송됩니다.This action sends a post request to the new Mobile Apps back end that's hosted in Azure. 요청에서 데이터가 TodoItem 테이블에 삽입됩니다.Data from the request is inserted into the TodoItem table. 테이블에 저장된 항목이 Mobile Apps 백 엔드에서 반환되고 데이터가 목록에 표시됩니다.Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

참고

Mobile Apps 백 엔드에 액세스하는 코드는 솔루션의 공유 코드 프로젝트의 TodoItemManager.cs C# 파일에 있습니다.The code that accesses your Mobile Apps back end is in the TodoItemManager.cs C# file of the shared code project in the solution.

(선택 사항) iOS 프로젝트 실행(Optional) Run the iOS project

이 섹션에서는 iOS 디바이스용 Xamarin.iOS 프로젝트를 실행합니다.In this section, you run the Xamarin.iOS project for iOS devices. iOS 디바이스를 작업하지 않는 경우 이 섹션을 건너뛸 수 있습니다.You can skip this section if you are not working with iOS devices.

Visual StudioVisual Studio

  1. iOS 프로젝트를 마우스 오른쪽 단추로 누른 다음 시작 프로젝트로 설정을 선택합니다.Right-click the iOS project, and then select Set as StartUp Project.

  2. 빌드 메뉴에서 구성 관리자를 선택합니다.On the Build menu, select Configuration Manager.

  3. 구성 관리자 대화 상자에서 iOS 프로젝트 옆에 있는 빌드배포 확인란을 선택하고, 공유 코드 프로젝트에 빌드 확인란을 선택했는지 확인합니다.In the Configuration Manager dialog box, select the Build and Deploy check boxes next to the iOS project, and ensure the shared code project has the Build box checked.

  4. 프로젝트를 빌드하고 iPhone 에뮬레이터에서 앱을 시작하려면 F5 키를 누릅니다.To build the project and start the app in the iPhone emulator, select the F5 key.

Mac용 Visual StudioVisual Studio for Mac

  1. iOS 프로젝트를 마우스 오른쪽 단추로 누른 다음 시작 프로젝트로 설정을 선택합니다.Right-click the iOS project, and then select Set As Startup Project.

  2. 실행 메뉴에서 디버깅 시작을 선택하여 프로젝트를 빌드하고 iPhone 에뮬레이터에서 앱을 시작합니다.On the Run menu, select Start Debugging to build the project and start the app in the iPhone emulator.

앱에서 Learn Xamarin과 같은 의미 있는 텍스트를 입력한 후 더하기 기호(+)를 선택합니다.In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

iOS 할 일 앱

이 작업을 통해 Azure에서 호스트된 새 Mobile Apps 백 엔드에 게시 요청이 전송됩니다.This action sends a post request to the new Mobile Apps back end that's hosted in Azure. 요청에서 데이터가 TodoItem 테이블에 삽입됩니다.Data from the request is inserted into the TodoItem table. 테이블에 저장된 항목이 Mobile Apps 백 엔드에서 반환되고 데이터가 목록에 표시됩니다.Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

참고

솔루션의 공유 코드 프로젝트의 TodoItemManager.cs C# 파일에서 Mobile Apps 백 엔드에 액세스하는 코드를 찾을 수 있습니다.You'll find the code that accesses your Mobile Apps back end in the TodoItemManager.cs C# file of the shared code project in the solution.

(선택 사항) Windows 프로젝트 실행(Optional) Run the Windows project

이 섹션에서는 Windows 디바이스에 대한 Xamarin.Forms UWP(유니버설 Windows 플랫폼) 프로젝트를 실행합니다.In this section, you run the Xamarin.Forms Universal Windows Platform (UWP) project for Windows devices. Windows 디바이스를 작업하지 않는 경우 이 섹션을 건너뛸 수 있습니다.You can skip this section if you are not working with Windows devices.

Visual StudioVisual Studio

  1. UWP 프로젝트를 마우스 오른쪽 단추로 누른 다음, 시작 프로젝트로 설정을 선택합니다.Right-click any the UWP project, and then select Set as StartUp Project.

  2. 빌드 메뉴에서 구성 관리자를 선택합니다.On the Build menu, select Configuration Manager.

  3. 구성 관리자 대화 상자에서 선택한 Windows 프로젝트 옆에 있는 빌드배포 확인란을 선택하고, 공유 코드 프로젝트에 빌드 확인란을 선택했는지 확인합니다.In the Configuration Manager dialog box, select the Build and Deploy check boxes next to the Windows project that you chose, and ensure the shared code project has the Build box checked.

  4. 프로젝트를 빌드하고 Windows 에뮬레이터에서 앱을 시작하려면 F5 키를 누르거나 시작 단추를 클릭합니다(로컬 컴퓨터를 읽어야 함).To build the project and start the app in a Windows emulator, press the F5 key or click the Start button (which should read Local Machine).

참고

Windows 프로젝트를 macOS에서 실행할 수 없습니다.The Windows project cannot be run on macOS.

앱에서 Learn Xamarin과 같은 의미 있는 텍스트를 입력한 후 더하기 기호(+)를 선택합니다.In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

이 작업을 통해 Azure에서 호스트된 새 Mobile Apps 백 엔드에 게시 요청이 전송됩니다.This action sends a post request to the new Mobile Apps back end that's hosted in Azure. 요청에서 데이터가 TodoItem 테이블에 삽입됩니다.Data from the request is inserted into the TodoItem table. 테이블에 저장된 항목이 Mobile Apps 백 엔드에서 반환되고 데이터가 목록에 표시됩니다.Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

UWP 할 일 앱

참고

솔루션의 이식 가능한 클래스 라이브러리 프로젝트의 TodoItemManager.cs C# 파일에서 Mobile Apps 백 엔드에 액세스하는 코드를 찾을 수 있습니다.You'll find the code that accesses your Mobile Apps back end in the TodoItemManager.cs C# file of the portable class library project of your solution.

문제 해결Troubleshooting

솔루션을 빌드하는 데 문제가 발생한 경우 NuGet 패키지 관리자를 실행하고 최신 버전의 Xamarin.Forms로 업데이트하고, Android 프로젝트에서 Xamarin.Android 지원 패키지를 업데이트합니다.If you have problems building the solution, run the NuGet package manager and update to the latest version of Xamarin.Forms, and in the Android project, update the Xamarin.Android support packages. 빠른 시작 프로젝트는 항상 최신 버전을 포함하지 않을 수 있습니다.Quickstart projects might not always include the latest versions.

Android 프로젝트에서 참조하는 모든 지원 패키지의 버전이 동일해야 합니다.Please note that all the support packages referenced in your Android project must have the same version. Azure Mobile Apps NuGet 패키지에는 Android 플랫폼에 대한 Xamarin.Android.Support.CustomTabs 종속성이 있으므로 프로젝트에서 최신 지원 패키지를 사용하는 경우 충돌 방지를 위해 필수 버전이 포함된 이 패키지를 직접 설치해야 합니다.The Azure Mobile Apps NuGet package has Xamarin.Android.Support.CustomTabs dependency for Android platform, so if your project uses newer support packages you need to install this package with required version directly to avoid conflicts.

다음 단계Next steps