빠른 시작: 모바일 서비스 추가(JavaScript)

아티클
12/11/2015

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

이 빠른 시작에서는 Azure 모바일 서비스를 사용하는 기존 앱에 클라우드 기반 백 엔드 서비스를 추가하는 과정을 안내합니다. 모바일 서비스를 통해 쉽게 데이터를 저장 및 쿼리하고, 널리 사용되는 ID 공급자로 사용자를 로그인하고, 앱에서 푸시 알림을 보내고 받을 수 있습니다. 자세한 내용은 모바일 서비스 개발자 센터를 참조하세요. 완료하면 Azure 구독에 새 모바일 서비스를 만들고, 시작 앱 프로젝트에 모바일 서비스 코드를 추가하고, 앱을 실행하여 새 모바일 서비스에 데이터를 삽입하게 됩니다.

사전 요구 사항

Microsoft Visual Studio 2013**.
활성 Azure 계정. 계정이 없는 경우 몇 분 내에 무료 평가판 계정을 만들 수 있습니다. 자세한 내용은 Microsoft Azure 무료 평가판을 참조하세요.
GetStartedWithMobileServices 프로젝트. 모바일 서비스를 사용할 수 있도록 설정할 Windows 스토어 앱 프로젝트입니다.

GetStartedWithMobile 서비스 프로젝트 다운로드 및 실행

먼저 모바일 서비스 지원을 추가할 Windows 스토어 앱에 대한 Visual Studio 2013 프로젝트를 다운로드하고 테스트합니다. 이 시작 앱은 메모리에 항목을 저장합니다.

GetStartedWithMobileServices 샘플 앱 프로젝트를 다운로드합니다.
Visual Studio에서 다운로드한 프로젝트를 열고 js 폴더를 확장한 후 default.js 스크립트 파일을 검사합니다. 추가한 TodoItem 개체가 메모리 내 List에 저장되었는지 확인한 후 F5 키를 눌러 프로젝트를 다시 빌드하고 앱을 시작합니다.
앱에서 Insert a TodoItem에 일부 텍스트를 입력하고 Save를 클릭합니다. 저장한 텍스트가 Query and update data 아래의 두 번째 열에 표시됩니다.

새 모바일 서비스 만들기

다음 단계에서는 Azure에 새 모바일 서비스를 만들고 이 새로운 서비스에 액세스할 수 있게 하는 코드를 프로젝트에 추가합니다. 모바일 서비스를 만들려면 먼저 Azure 구독의 publishsettings 파일을 Visual Studio로 가져와야 합니다. 그러면 Visual Studio에서 사용자 대신 Azure에 연결할 수 있습니다. 새 모바일 서비스를 만들 때 모바일 서비스에서 앱 데이터를 저장하는 데 사용하는 Azure SQL 데이터베이스를 지정해야 합니다.

Visual Studio 2013에서 솔루션 탐색기를 열고 프로젝트를 마우스 오른쪽 단추로 클릭한 후 **추가, 연결된 서비스...**를 클릭합니다.
서비스 관리자 대화 상자에서 **서비스 만들기...**를 클릭한 후 모바일 서비스 만들기 대화 상자의 구독에서 **<가져오기...>**를 선택합니다.
Microsoft Azure 구독 가져오기에서 구독 파일 다운로드를 클릭하고 Microsoft Azure 계정에 로그인한 후(필요한 경우) 브라우저에서 파일을 저장하도록 요청할 경우 저장을 클릭합니다.참고 Visual Studio 창 뒤에 있을 수 있는 브라우저에 로그인 창이 표시됩니다. 다운로드한 .publishsettings 파일을 저장한 위치를 기록해 두세요. 프로젝트가 Azure 구독에 이미 연결되어 있는 경우에는 이 단계를 건너뛰어도 됩니다.
찾아보기를 클릭하고 .publishsettings 파일을 저장한 위치로 이동한 후 파일을 선택하고 열기, 가져오기를 차례로 클릭합니다. Visual Studio에서 Azure 구독에 연결하는 데 필요한 데이터를 가져옵니다. 구독에 기존 모바일 서비스가 이미 하나 이상 있는 경우 서비스 이름이 표시됩니다. 참고 게시 설정을 가져온 후 다운로드한 .publishsettings 파일을 삭제하는 것이 좋습니다. 이 파일에 포함된 정보를 통해 다른 사용자가 사용자 계정에 액세스할 수 있기 때문입니다. 다른 연결된 앱 프로젝트에서 사용하기 위해 유지하려는 경우 파일을 안전하게 보호하세요.
**서비스 만들기...**를 클릭한 후 모바일 서비스 만들기 대화 상자에서 해당 구독과 모바일 서비스의 지역을 선택합니다. 모바일 서비스의 이름을 입력하고 이름이 사용 가능한지 확인합니다. 이름을 사용할 수 없는 경우 빨간색 X가 표시됩니다. 데이터베이스에서 **<새로 만들기>**를 선택하고 서버 사용자 이름 및 서버 암호를 제공한 후 만들기를 클릭합니다.참고 이 빠른 시작의 일부로 새 SQL 데이터베이스 인스턴스 및 서버를 만듭니다. 이 새로운 데이터베이스를 다시 사용하고 다른 SQL 데이터베이스 인스턴스처럼 관리할 수 있습니다. 새 모바일 서비스와 동일한 지역에 데이터베이스가 이미 있는 경우 기존 데이터베이스를 대신 선택할 수 있습니다. 기존 데이터베이스를 선택하는 경우 올바른 로그인 자격 증명을 제공해야 합니다. 잘못된 로그인 자격 증명을 제공하면 모바일 서비스가 비정상 상태로 만들어집니다.

모바일 서비스를 만들면 모바일 서비스 클라이언트 라이브러리에 대한 참조가 프로젝트에 추가되고 프로젝트 소스 코드가 업데이트됩니다.
솔루션 탐색기에서 서비스, 모바일 서비스, 해당 서비스 이름을 차례로 확장하고 service.js 파일을 연 후 새로 추가한 변수가 다음 예제와 같이 표시되는지 확인합니다.
```
var todolistClient = new WindowsAzure.MobileServiceClient(
                "https://todolist.azure-mobile.net/",
                "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
```
이 코드는 MobileServiceClient 개체 인스턴스를 사용하여 앱의 새 모바일 서비스에 액세스할 수 있게 합니다. 클라이언트는 새 모바일 서비스의 응용 프로그램 키와 URI를 제공하여 만듭니다.
default.html 파일을 열고 Azure의 모바일 서비스 클라이언트 라이브러리와 프로젝트의 MobileServiceClient 개체를 정의하는 스크립트에 각각 하나씩, 두 개의 새 script 참조가 추가되었는지 확인합니다.

모바일 서비스에 새 테이블 추가 및 앱 업데이트

새 모바일 서비스에서 데이터를 저장하려면 먼저 서비스에 새 저장소 테이블을 만들어야 합니다. 아래 단계에서는 Visual Studio 2013을 사용하여 모바일 서비스에 새 테이블을 만드는 방법을 보여 줍니다. 그런 다음 모바일 서비스를 사용하여 로컬 컬렉션 대신 Azure에 항목을 저장하도록 앱을 업데이트합니다.

서버 탐색기에서 Azure, 모바일 서비스를 차례로 확장하고 모바일 서비스를 마우스 오른쪽 단추로 클릭한 후 테이블 만들기를 클릭합니다. 테이블 만들기 대화 상자의 테이블 이름에 TodoItem을 입력합니다.
고급을 확장하고 테이블 작업 권한이 기본적으로 응용 프로그램 키가 있는 모든 사용자로 설정되어 있는지 확인한 후 만들기를 클릭합니다. 서버에 TodoItem 테이블이 생성되고, 응용 프로그램 키를 가진 모든 사용자가 테이블의 데이터에 액세스하고 변경할 수 있습니다. 참고 응용 프로그램 키는 응용 프로그램과 함께 배포됩니다. 이 키는 안전하게 배포되지 않으므로 보안 토큰으로 간주할 수 없습니다. 모바일 서비스 데이터에 대한 액세스를 보호하려면 액세스 전에 사용자를 인증해야 합니다. 자세한 내용은 권한을 참조하세요.
default.js 스크립트 파일에서 기존 items 컬렉션을 정의하는 줄을 주석으로 처리하고 다음 코드 줄을 추가하거나 주석 처리를 제거한 후 모바일 서비스에 프로젝트를 연결할 때 service.js 파일에 추가된 변수로 yourClient를 바꿉니다.
```
var todoTable = yourClient.getTable('TodoItem');
```
이 코드는 새 데이터베이스 테이블에 대한 프록시 개체(todoTable)를 만듭니다.
InsertTodoItem 함수를 다음 코드로 바꿉니다.
```
var insertTodoItem = function (todoItem) {
    // Inserts a new row into the database. When the operation completes
    // and Mobile Services has assigned an id, the item is added to the binding list.
    todoTable.insert(todoItem).done(function (item) {
        todoItems.push(item);
    });
};
```
이 코드는 테이블에 새 항목을 삽입합니다. 참고 새 테이블은 Id 열만 사용하여 생성됩니다. 동적 스키마를 사용하는 경우 모바일 서비스에서 삽입 또는 업데이트 요청의 JSON 개체를 기준으로 새 열을 자동으로 생성합니다. 자세한 내용은 동적 스키마를 참조하세요.

RefreshTodoItems 함수를 다음 코드로 바꿉니다.

var refreshTodoItems = function () {
    // This code refreshes the entries in the list by querying the table. 
    todoTable.read().done(function (results) {
        todoItems = new WinJS.Binding.List(results);
        listItems.winControl.itemDataSource = todoItems.dataSource;
    });
};

이 코드는 모바일 서비스에서 반환된 모든 TodoItem 개체가 포함된 todoTable의 항목 컬렉션에 대한 바인딩을 설정합니다.

UpdateCheckedTodoItem 함수를 다음 코드로 바꿉니다.

var updateCheckedTodoItem = function (todoItem) {
    // This code takes a freshly completed TodoItem and updates the database. 
    todoTable.update(todoItem);
};

이 코드는 항목 업데이트를 모바일 서비스로 보냅니다.

새 모바일 서비스에 대해 앱 테스트

이제 앱이 백 엔드 저장소에 모바일 서비스를 사용하도록 업데이트되었으므로 모바일 서비스에 대해 앱을 테스트해야 합니다.

Visual Studio에서 F5 키를 눌러 앱을 실행합니다.
이전처럼 Insert a TodoItem에 텍스트를 입력하고 Save를 클릭합니다. 새 항목이 모바일 서비스에 삽입으로 전송되고 항목이 컬렉션에 추가됩니다.
앱을 종료한 후 다시 시작합니다. 추가한 데이터가 표시되고 저장된 후 모바일 서비스에서 다시 로드되는지 확인합니다.

완료된 항목을 필터링하도록 쿼리 수정

이제 앱이 Azure에 데이터를 저장하므로 결과에서 완료된 항목을 필터링하도록 쿼리를 수정하겠습니다.

default.js 스크립트 파일에서 완료된 항목을 필터링하는 다음 코드로 기존 RefreshTodoItems 메서드를 바꿉니다.

var refreshTodoItems = function () {
    // More advanced query that filters out completed items. 
    todoTable.where({ complete: false })
        .read()
        .done(function (results) {
            todoItems = new WinJS.Binding.List(results);
            listItems.winControl.itemDataSource = todoItems.dataSource;
        });
};

앱을 다시 시작하고 목록에서 다른 항목을 선택한 후 새로 고침 단추를 클릭합니다. 이제 선택한 항목이 목록에서 사라집니다. 새로 고칠 때마다 필터링된 데이터를 반환하는 모바일 서비스로 왕복이 수행됩니다.

요약 및 다음 단계

지금까지 모바일 서비스를 사용하여 기존 Windows 스토어 앱에 원격 데이터 저장소 기능을 추가하는 방법을 배웠습니다.

다음에는 모바일 서비스를 사용하여 Windows 스토어 앱에 푸시 알림 기능을 추가하는 방법(빠른 시작: 모바일 서비스에 대한 푸시 알림 추가)을 알아보세요.

다음을 통해 공유