• Статья

Приступаем к работе с данными в Mobile Services

Для знакомства с возможностями платформы  вы можетеактивировать Microsoft Azure бесплатно!

Тема практической работы: использование служб Microsoft Azure для мобильных устройств при работе с данными в приложении HTML. Вы научитесь загружать приложение, сохраняющее данные в памяти, создавать новую мобильную службу и интегрировать в нее приложение. Далее вы войдете на Портал управления Microsoft Azure и просмотрите данные, измененные в ходе выполнения приложения.

Примечание

Выполнив практическую работу, вы научитесь использовать платформу Microsoft Azure с помощью служб Moblile Services для сохранения и извлечения данных из приложения HTML. Фактически, сейчас вы повторите многое из того, что уже было сделано в проекте быстрого запуска Mobile Services. Если вы только начинаете изучение Mobile Services, рекомендуем вначале выполнить практическую работу Приступаем к работе со службами Mobile Services.

В ходе практической работы мы выполним следующие действия.

  1. Загрузка проекта приложения HTML
  2. Создание мобильной службы
  3. Добавление таблицы данных в хранилище
  4. Обновление приложения для использования Mobile Services
  5. Проверка работы приложения со службами Mobile Services

Примечание

Чтобы выполнить практическую работу, необходимо иметь учетную запись Microsoft Azure с включенной функцией Microsoft Azure Mobile Services.

Дополнительные требования

Приложение GetStartedWithData можно разместить на любом веб-сервере. Однако для удобства мы будем использовать скрипты, позволяющие запустить приложение на сервереhttps://localhost:8000.

Чтобы использовать localhost, на локальном компьютере необходимо иметь один из следующих веб-серверов:

  • Под управлением Windows: IIS Express. IIS Express можно установить с помощью [установщика веб-платформы Майкрософт].
  • Под управлением MacOS X: Python (уже должен быть установлен).
  • Под управлением Linux: Python. Необходимо установить [последнюю версию Python].

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

  • Веб-браузер с поддержкой HTML5.

Загрузка проекта GetStartedWithData

Практическая работа построена на основе HTML5-приложения GetStartedWithData. Пользовательский интерфейс приложения аналогичен интерфейсу приложения, созданного при выполнении проекта быстрого запуска служб Mobile Services. Однако в нашем случае добавленные элементы сохраняются в локальной памяти.

1. Загрузка файлов проекта HTML-приложения.

2. Откройте загруженный проект в редакторе HTML и проверьте файл app.js.

Обратите внимание, что добавленные элементы сохраняются во внутреннем объекте памяти Array(staticItems). При обновлении страницы данные исчезают. Они не сохраняются.

3. Запустите один из командных файлов из вложенной папки server (Сервер).

  • launch-windows (Запустить Windows) (для ПК под управлением Windows)
  • launch-mac.command (Запустить mac.command)  (для ПК под управлением Mac OS X)
  • launch-linux.sh (Запустить linux.sh)  (для ПК под управлением Linux)

Примечание

Чтобы выполнить скрипт на ПК под управлением Windows, введите "R" при получении запроса на подтверждение от PowerShell. На экране появится предложение веб-браузера не выполнять этот скрипт, поскольку он  скачан из Интернета. Разрешите загрузку скрипта.

В результате новое приложение будет размещено на веб-сервере локального компьютера.

4. Чтобы запустить приложение,введите URL-адрес https://localhost:8000/ в адресной строке веб-браузера.

5. После запуска приложения напечатайте любой информативный текст, например: Complete the tutorial (Завершить практическую работу)в полеEnter new task (Ввести новую задачу) и нажмите кнопку Add (Добавить).

Обратите внимание, что добавленный текст сохраняется в массиве staticItems, а страница обновляется, и на ней отображается новый элемент.

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

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

1. Войдите на Портал управления Microsoft Azure.

2. Нажмите кнопку +NEW (Создать) в нижней части панели навигации.

3. Разверните список Compute (Вычисления) и Mobile Service (Мобильная служба), а затем нажмите кнопку Create (Создать).

Откроется диалоговое окно New Mobile Service (Новая мобильная служба).

4. На странице Create a mobile service (Создать мобильную службу) напечатайте имя субдомена новой мобильной службы в текстовом поле URL и дождитесь окончания проверки имени. После проверки нажмите стрелку вправо и перейдите на следующую страницу.

Откроется страница Specify database settings (Укажите параметры базы данных).

Примечание

В этой практической работе вы создадите экземпляр базы данных SQL и сервер. Эту базу данных можно будет использовать повторно и администрировать ее как любой другой экземпляр БД SQL. Если база данных находится в том же регионе, что и мобильная служба, выберите пункт Use existing Database (Использовать существующую базу данных) и укажите базу данных. Не рекомендуется использовать базу данных из другого региона: это приведет к дополнительным затратам на передачу данных и большим задержкам.

5. В поле Name (Имя) введите имя новой базы данных, а в поле Login name — имя входа в систему. Это имя администратора нового сервера базы данных SQL. Напечатайте и подтвердите пароль. Чтобы завершить процесс, нажмите кнопку подтверждения (V).

Примечание

Если пароль не отвечает минимальным требованиям или не совпадает с паролем, который запомнила система, на экране появится предупреждение.
Рекомендуем записать введенные имя пользователя и пароль. Эта информация потребуется для дальнейшего использования экземпляра базы данных SQL или сервера.

Новая мобильная служба создана и ее можно использовать в мобильных приложениях. Теперь мы добавим новую таблицу, в которой будут храниться данные приложения. Приложение будет использовать ее вместо копии коллекции в памяти устройства.

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

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

1. На Портале управления нажмите Mobile Services (Мобильные службы), а затем — только что созданную мобильную службу.

2. Перейдите на вкладку Data (Данные) и нажмите +Create (Создать).

Откроется диалоговое окно Create new table (Создать новую таблицу).

3. В поле Table name (Имя таблицы) введите ToDoItem и нажмите кнопку подтверждения (V).

Будет создана новая таблица хранилища TodoItem с заданными по умолчанию разрешениями. Любой пользователь приложения получает доступ к данным таблицы и может изменять их.

Примечание

В проекте быстрого запуска Mobile Services используется то же самое имя таблицы. Однако следует заметить, что каждая таблица создается по схеме, характерной для данной мобильной службы. Это позволяет исключить конфликты данных в случаях, когда несколько мобильных служб используют одну и ту же базу данных.

4. Щелкните новую таблицу TodoItem и убедитесь, что в ней нет строк данных.

5. Откройте вкладку Columns (Столбцы) и убедитесь, что в ней имеется только один столбец id, созданный автоматически.

Минимальное требование к таблице в службе Mobile Services –– один столбец.

Примечание

Если в мобильной службе включена динамическая схема, то новые столбцы будут добавляться автоматически –– при отправке объектов JSON в мобильную службу с помощью операций вставки или обновления.

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

Обновление приложения для доступа к данным с помощью мобильной службы

Теперь мобильная служба готова к работе; обновим приложение, чтобы  сохранять элементы в службе Mobile Services вместо локального хранилища.

1. На Портале управления нажмите Mobile Services (Мобильные службы), а затем — только что созданную мобильную службу.

2. Откройте вкладку Dashboard (Панель мониторинга) и запишите значение Site URL (URL-адрес сайта). Затем нажмите Manage keys (Управление ключами) и запишите значение Application key (Ключ приложения).

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

3. Откройте файл проекта index.html в веб-редакторе и добавьте к ссылкам скрипта на страницу следующую строку:

<script src='**APP_URL**/client/MobileServices.Web-1.0.0.min.js'></script>

Прототип **APP_URL** необходимо заменить на URL-адрес мобильной службы.

4. Откройте app.js файл в редакторе, раскомментируйте код, который определяет переменную MobileServiceClient. Укажите URL-адрес приложения и его ключ (полученные от мобильной службы) в конструкторе MobileServiceClient:

var MobileServiceClient = WindowsAzure.MobileServiceClient,   client = new MobileServiceClient('AppUrl', 'AppKey'),

Данный код создает новый экземпляр MobileServiceClient, который используется для доступа к  мобильной службе.

6. Закомментируйте следующие строки кода:

var itemCount = 0; var staticItems = [];

Данные будут сохранены в мобильной службе, а не во внутреннем массиве памяти.

8. Раскомментируйте следующие строки кода:

todoItemTable = MobileServiceClient.getTable('todoitem');

Этот код создает прокси-объект (todoItemTable) для базы данных SQL TodoItem.

9.     Замените обработчик событий $('#add-item').submit следующим кодом:

$('#add-item').submit(function(evt) { var textbox = $('#new-item-text'), itemText = textbox.val(); if (itemText !== '') { todoItemTable.insert({ text: itemText, complete: false }) .then(refreshTodoItems); } textbox.val('').focus(); evt.preventDefault(); });

Этот код вставляет новый элемент в таблицу.

19.  Замените метод refreshTodoItems следующим кодом:

.function refreshTodoItems() { .var query = todoItemTable; .query.read().then(function(todoItems) { listItems = $.map(todoItems, function(item) { return $('&lt;li&gt;') .attr('data-todoitem-id', item.id) .append($('&lt;button class="item-delete"&gt;Delete&lt;/button&gt;')) .append($('&lt;input type="checkbox" class="item-complete"&gt;').prop('checked', item.complete)) .append($('&lt;div&gt;').append($('&lt;input class="item-text"&gt;').val(item.text))); }); $('#todo-items').empty().append(listItems).toggle(listItems.length &gt; 0); $('#summary').html('&lt;strong&gt;' + todoItems.length + '&lt;/strong&gt; item(s)'); });   }

В мобильную службу будет направлен запрос на возврат всех элементов. По результатам будет выполнена итерация, и на странице появятся данные .

41.  Замените обработчики событий $(document.body).on('change', '.item-text') и $(document.body).on('change', '.item-complete') следующим кодом:

$(document.body).on('change', '.item-text', function() { var newText = $(this).val(); todoItemTable.update({ id: getTodoItemId(this), text: newText }); .}); $(document.body).on('change', '.item-complete', function() { var isComplete = $(this).prop('checked'); todoItemTable.update({ id: getTodoItemId(this), complete: isComplete }) .then(refreshTodoItems); });

Этот код отправляет обновление элемента в мобильную службу, если изменился текст или был установлен флажок.

52.  Замените обработчик событий $(document.body).on('click', '.item-delete') следующим кодом:

$(document.body).on('click', '.item-delete', function () { todoItemTable.del({ id: getTodoItemId(this) }).then(refreshTodoItems); });

Этот код отправляет в мобильную службу  команду на удаление после нажатия кнопки Delete (Удалить).

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

Проверка работы приложения с новой мобильной службой

1. Чтобы запустить приложение,перезагрузите URL-адрес https://localhost:8000/ в веб-браузере.

Примечание

Чтобы перезагрузить веб-сервер, повторите шаги из первого раздела.

2. Вновь напечатайте текст в поле Enter new task (Ввести новую задачу) и нажмите Add (Добавить).

Новый элемент будет добавлен в мобильную службу.

3. На Портале управления нажмите Mobile Services (Мобильные службы), а затем — свою мобильную службу.

4. Перейдите на вкладку Data (Данные) и нажмите Browse (Просмотреть).

Обратите внимание, что сейчас таблица TodoItem содержит данные с идентификаторами, сгенерированными службой Mobile Services. Кроме того, в нее автоматически добавлены столбцы в соответствии с классом TodoItem в приложении.

5. Отметьте один из элементов списка в приложении, затем вернитесь на вкладку Browse (Просмотреть) портала и нажмитеRefresh (Обновить).

Обратите внимание, что значение изменилось с false (ложь) на true (истина).

6. В файле проекта app.js найдите метод RefreshTodoItems и замените строку кода, которая определяет запросquery, на следующий:

var query = todoItemTable.where({ complete: false });

7. Снова загрузите страницу и отметьте другой элемент в списке.

Обратите внимание, что отмеченный элемент теперь удаляется из списка. При каждом обновлении происходит двусторонний обмен с мобильной службой, которая теперь возвращает отфильтрованные данные.

На этом завершим практическое занятие "Приступаем к работе с данными ".