Azure Notification Hub : Xamarin.Forms 을 이용한 Mobile App 개발(구성 및 Back-end)-1

Azure Notification Hub와 Xamarin.Forms 을 이용한 Mobile App 개발 가이드 입니다.

아래 링크를 개발에 참조하십시오. MS 자료보다는 좀 더 자세하게 설명 되어있습니다. 

https://github.com/adrianhall/develop-mobile-apps-with-csharp-and-azure

 

참고로 MS 문서에 "Microsoft.Azure.Mobile.Server.Notifications" 을 사용해서 코딩하는 예제가 나옵니다. 하지만  "Azure Mobile .NET Server Notifications 2.0.0" 버전 부터 지원 하지 않습니다. 그래서 “Microsoft.Azure.NotificationHubs 1.0.9” 을 사용하여 코딩을 해야 합니다. 위의 링크를 참조하시고 MS 문서에도 사용 방법이 있습니다. 참조 하십시오.

1. Azure Mobile Apps 구성

 

Mobile Apps 구성을 위해 http://port.azure.com 으로 이동 후 계정으로 로그인 합니다.

 

"+New" 선택하고 "웹+모바일 > "모바일+앱" 을 클릭합니다.

 

 `

"앱 이름" 및 "리소스 그룹(새로 만들기)"을 임의 의 이름으로 입력 합니다. "App Service 계획/위치" 를 클릭합니다. App Service 계획에서 "+ 새로 만들기" 를 클릭합니다. "App Service 계획" 및 "위치" 을 선택하고 "가격 책정 계층" 을 적당히 선택합니다. "확인" 버튼을 클릭합니다.

(주의 : 앱 이름을 정 할 때 iOS 및 Android 개발 시 특수 기호를 사용 하지 못 하기 때문에 가능 한 특수 기호를 사용 하지 마십시오. 원만 한 개발을 위해서...)

 

"App Service" 생성이 완료 되면 해당 App Service를  클릭합니다.

 

메뉴에서 "빠른 시작" 을 클릭합니다.

 

"Xamarin.Forms"를 선택합니다.

 

"데이터베이스 연결" 을 클릭하고 "+ 추가" 를 클릭합니다.

 

"SQL Database" 항목을 선택 후 "+새 데이터베이스 만들기" 선택합니다. "이름" 항목에 임의 이름을 입력 합니다. "대상 서버"를 클릭 후 "+새 서버 만들기"를 선택합니다

.

 

 

"서버 이름" 및 "서버 관리자 로그인" , "암호", "위치" 를 설정하고 "선택" 버튼을 클릭합니다.

 

"가격 책정 정책" 을 선택합니다.

 

적당 한 정책을 선택 후 "적용" 버튼을 클릭합니다.

 

"데이터 정령" 기본으로 두고 "선택" 버튼을 클릭합니다.

 

"연결 문자열을 선택 후 임의의 이름을 입력 합니다.

 

"확인" 버튼을 클릭합니다.

 

아래와 같이 정상적으로 데이터 연결이 된 것을 확인 할 수 있습니다.

 

"데이터 API 만들기" 에서 "C#" 을 선택합니다. 그리고 "다운로드" 버튼을 클릭해서 다운로드 합니다. 이것은 "App Service" back-end 웹 서비스 개발에 사용 합니다.

 

"클라이언트 응용 프로그램 구성" 에서 "새로 만들기" 를 선택하고 "다운로드" 버튼을 클릭해서 다운로드 합니다. 이 것은 Mobile App 개발에 사용 합니다.

 

다운로드 하면 아래와 같습니다.

 

"+ New" 을 선택하고 "웹+모바일 > Notification Hub"를 선택합니다.

 

"알림 허브", "새 네임스페이스 만들기" 에 임의 이름을 적당히 입력 합니다. "위치" 는 일본 으로 합니다. 아직 한국에는 서비스 되지 않습니다. "가격 책정 계층" 은 기본으로 두고 "만들기" 버튼을 클릭합니다.

 

아래와 같이 Notification Hub 가 만들어 지면 푸시 연결을 위해 앞에서 만든 App Service를 선택합니다.

 

메뉴에서 "푸시"를 클릭합니다.

 

상단의 "연결" 을 클릭합니다.

 

연결에 사용 할 Notification hub 를 선택 합니다.

 

태그 항목을 적당히 입력 합니다. 그래야 "저장" 버튼이 활성화 됩니다. "저장" 버튼을 클릭합니다.

 

아래와 같이 푸시 연결이 완료 되었습니다.

 

 

2.  Back-end 웹 서비스 설정

Back-end 웹 서비스는 Mobile App 을 생성 할 때 개발 도구로 C#을 선택했습니다. 그리고, Android 및 iOS 관계없이 Back-end 웹 서비스는 동일하기에 한번만 코드를 수정하면 됩니다.

아래 사이트를 방문하여 자세한 내용을 확인 하십시오.

• Xamarin.Forms 앱에 푸시 알림 추가

 

개발을 위한 IDE는 Windows for Mac 을 사용 하였습니다. (다운로드 및 설치 : https://www.visualstudio.com/ko/vs/visual-studio-mac)

그러나 정신건강을 위해서 Back-end 웹 서비스의 경우에는 Windows 용 Visual Studio 2017을 이용 하십시오. 코드 수정 후 Azure 웹 서비스 게시 하는 것이 쉽습니다.

 

Azure 에서 Mobile App을 생성하고 다운로드 받은 소스코드 중 "XXXXXXX_Runtime.zip" 파일을 선택하고 압축을 해제합니다.

 

해제한 폴더 안에 Visual Studio Solution 파일인 "XXXXX.sin" 파일을 더블 클릭합니다.

 

가장 먼저 해야 할 것은 "Microsoft.Azure.NotificationHubs" 을 패키지를 설치 해야 합니다. "메뉴 > 프로젝트 > NuGet 패키지 추가…" 를 선택 합니다. NuGet 패키지 관리 창에서 "Microsoft.Azure.NotificationHubs" 를 검색하고 설치 합니다.

 

설치 완료 후 패키지에 정상적으로 설치되었는지 확인 합니다. 그리고 업데이트 가능 한 패키지가 있는 경우 모두 업데이트 합니다.

 

다음으로 "Controllers" 폴더를 클릭하고 "TodoItemController.cs" 파일을 더블 클릭해서 아래 코드를 추가 합니다.

using 부분에 추가합니다.

 

using System.Collections.Generic;  using Microsoft.Azure.NotificationHubs;  using Microsoft.Azure.Mobile.Server.Config;

 

PostTodoItem 메서드 안에 아래 코드를 추가합니다.

 

// Get the settings for the server project.  HttpConfiguration config = this.Configuration;  MobileAppSettingsDictionary settings =      this.Configuration.GetMobileAppSettingsProvider().GetMobileAppSettings();    // Get the Notification Hubs credentials for the Mobile App.  string notificationHubName = settings.NotificationHubName;  string notificationHubConnection = settings      .Connections[MobileAppSettingsKeys.NotificationHubConnectionString].ConnectionString;    // Create a new Notification Hub client.  NotificationHubClient hub = NotificationHubClient  .CreateClientFromConnectionString(notificationHubConnection, notificationHubName);    // Sending the message so that all template registrations that contain "messageParam"  // will receive the notifications. This includes APNS, GCM, WNS, and MPNS template registrations.  Dictionary<string,string> templateParams = new Dictionary<string,string>();  templateParams["messageParam"] = item.Text + " was added to the list.";    try  {      // Send the push notification and log the results.      var result = await hub.SendTemplateNotificationAsync(templateParams);        // Write the success result to the logs.      config.Services.GetTraceWriter().Info(result.State.ToString());  }  catch (System.Exception ex)  {      // Write the failure result to the logs.      config.Services.GetTraceWriter()          .Error(ex.Message, null, "Push.SendAsync Error");  }

 

Visual Studio(Windows 용) 에서 Azure 구독에 연결 합니다.

 

구독 계정에 로그인 합니다.

 

정상적으로 Azure 계정에 연결되면 아래와 같이 사용 중인 해당 서비스를 확인 할 수 있습니다.

 

코드 수정이 완료 후 솔루션을 선택 후 오른쪽 버튼을 클릭 후 메뉴에서 "게시…" 을 클릭합니다.

 

게시 관리 창이 나타나면 "게시 대상 선택" 을 "Microsoft Azure 앱 서비스" 를 선택 합니다.

 

웹 서비스를 게시 할 App Service를 선택 후 "확인" 버튼을 클릭하면 게시가 됩니다.

 

이제 Google 및 Apple 에 알림 서비스인 GCM, APNS 연동 하여 Mobile App을 개발 해 보도록 하겠습니다.