Краткое руководство: добавление мобильной службы (JavaScript)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

В данном кратком руководстве описано добавление облачной службы внутреннего сервера в существующее приложение с помощью мобильных служб Azure. Мобильные службы позволяют легко хранить и запрашивать данные, обеспечивать вход пользователей с помощью популярных поставщиков удостоверений, а также отправлять и получать push-уведомления в приложении. Подробнее см. в центре разработки мобильных служб. По завершении руководства вы создадите новую мобильную службу в своей подписке Azure, добавите код мобильных служб в проект начального приложения и запустите приложение, чтобы ввести данные в новую мобильную службу.

Необходимые условия

Microsoft Visual Studio 2013**.
Активная учетная запись Azure. Если у вас нет учетной записи, вы можете всего за пару минут создать бесплатную пробную учетную запись. Подробнее см. на странице бесплатной пробной версии Microsoft Azure.
Проект GetStartedWithMobileServices. Это проект приложения Магазина Windows, в котором будет возможность использования мобильных служб.

Скачивание и запуск проекта GetStartedWithMobile Services

Сначала необходимо скачать и протестировать проект Visual Studio 2013 для приложения Магазина Windows, куда затем будет добавлена поддержка мобильных служб. Это начальное приложение сохраняет элементы в памяти.

Скачайте проект пример приложения GetStartedWithMobileServices.
В Visual Studio откройте скачанный проект, разверните папку js и просмотрите файл сценария default.js. Обратите внимание, что добавленные объекты TodoItem хранятся в находящемся в памяти объекте List, затем нажмите клавишу F5, чтобы перестроить проект и запустить приложение.
В приложении введите текст в поле Вставьте TodoItem, затем нажмите кнопку Сохранить. Обратите внимание, что сохраненный текст отображается во втором столбце в разделе Запрос и обновление данных.

Создание новой мобильной службы

С помощью следующих шагов вы сможете создать новую мобильную службу в Azure и добавить в свой проект код, обеспечивающий доступ к ней. Прежде чем создать новую мобильную службу, необходимо импортировать файл publishsettings из вашей подписки Azure в 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 и обратите внимание, что в него добавлены две новые ссылки script: одна на клиентскую библиотеку мобильных служб в Azure, а вторая — на сценарий, определяющий объект MobileServiceClient в вашем проекте.

Добавление новой таблицы в мобильную службу и обновление приложения

Прежде чем вы сможете сохранить данные в новой мобильной службе, вам необходимо создать новое табличное хранилище в службе. Чтобы создать новое табличное хранилище в мобильной службе с помощью Visual Studio 2013, необходимо сделать следующее. После создания хранилища вы обновите приложение, чтобы использовать мобильные службы для хранения элементов в Azure вместо локальной коллекции.

В обозревателе сервера последовательно разверните Azure и Мобильные службы, щелкните правой кнопкой мыши свою мобильную службу и выберите команду Создать таблицу. В диалоговом окне Создание таблицы введите TodoItem в поле Имя таблицы.
Разверните раздел Дополнительно, убедитесь, что значением разрешения по умолчанию на операции с таблицами является Все с ключом приложения, затем нажмите кнопку Создать. При этом таблица TodoItem будет создана на сервере, где получить к ней доступ и изменить в ней данные сможет любой обладающий ключом приложения пользователь без дополнительной проверки подлинности. Примечание Ключ приложения предоставляется вместе с приложением. Так как распространение ключа не является защищенной операцией, его нельзя считать токеном безопасности. Чтобы защитить доступ к данным вашей мобильной службы, необходимо проверять подлинность пользователей перед предоставлением доступа. Подробнее: Разрешения.
В файле сценария default.js добавьте комментарий к строке, которая определяет существующую коллекцию items, затем удалите комментарий или добавьте следующую строку кода и замените yourClient переменной, добавленной в файл service.js при подключении проекта к мобильной службе:
```
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;
    });
};
```
Это обеспечивает привязку к коллекции элементов в таблице todoTable, которая содержит все объекты TodoItem, возвращенные мобильной службой.
Замените функцию UpdateCheckedTodoItem следующим кодом:
```
var updateCheckedTodoItem = function (todoItem) {
    // This code takes a freshly completed TodoItem and updates the database. 
    todoTable.update(todoItem);
};
```
Он обеспечивает отправку обновления элемента в мобильную службу.

Тестирование взаимодействия приложения с новой мобильной службой

Теперь, когда мы обновили приложение для использования мобильных служб для хранилища внутреннего сервера, самое время проверить работу мобильных служб в приложении.

Чтобы запустить приложение, нажмите в Visual Studio клавишу F5.
Как и прежде, введите текст в поле Вставьте TodoItem, затем нажмите кнопку Сохранить. Вы отправили новый элемент для вставки в мобильную службу, и этот элемент добавлен в коллекцию.
Завершите работу и перезапустите приложение. Обратите внимание, что отображаются добавленные данные: они были сохранены и снова загружены из мобильной службы.

Изменение запроса для фильтрации завершенных элементов

Теперь, когда приложение сохраняет данные в 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.

Далее вы научитесь использовать мобильные службы для добавления push-уведомлений в приложение Магазина Windows: Краткое руководство: добавление push-уведомлений для мобильной службы.

Связанные разделы

Проверка и изменение данных в мобильных службах с помощью серверных сценариев

Уточнение запросов мобильных служб с подкачкой

Поделиться через