Учебник. Создание мобильного приложения с базой данных Orchestrate и платформой разработки Appery.io

Первоначально опубликовано на Дмитрия Зайцевым на блоге Appery.io. 

Appery.io и Orchestrate объединили свои усилия для создания этого простого руководства по созданию мобильного приложения. Приложение построено на платформе визуальной разработки Appery.io, подключено к базе данных Orchestrate через API REST, протестировано и развернуто.

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

В этом руководстве показано, как быстро создать настоящее мобильное приложение, подключенное к серверной части API, при использовании мощных облачных инструментов: Appery.io и Orchestrate.

Зарегистрируйтесь на совместный вебинар Appery.io и Orchestrate 11 сентября 2014 года в 10:00 по тихоокеанскому времени.

Быстрое создание корпоративных мобильных приложений с помощью базы данных Orchestrate и платформы разработки Appery.io

Зарегистрироваться

Orchestrate — база данных как услуга

Orchestrate  — это управляемый сервис, который предоставляет возможности запросов к базам данных NoSQL, таким как ElasticSearch, HBase и Hadoop, позволяя разработчикам добавлять полнотекстовый поиск, события, график и ключ / значение в приложения с помощью простого REST API. Orchestrate обеспечивает безопасность, мониторинг и ежедневное резервное копирование без лицензий, программного обеспечения и блокировки.

Appery.io — мобильная разработка как услуга

Appery.io — это облачная платформа с инструментами визуальной разработки и интегрированными сервисами. Appery.io предоставляет визуальный конструктор приложений с возможностью перетаскивания для создания пользовательского интерфейса приложения, подключения и визуального связывания с любыми API-интерфейсами REST, тестирования приложения и упаковки приложения для нативного (iOS, Android и Windows Phone).

Что мы собираемся построить

В этом уроке мы покажем вам, как создать кроссплатформенное мобильное приложение для продовольственного грузовика, который продает гамбургеры. Мы позвоним нашему грузовику Burgerio . Приложение позволяет заранее оформить заказ на гамбургер, а когда прибудет грузовик, вы просто заберете заказ.

Что вы узнаете

После завершения этого урока вы узнаете:

• Создание мобильного приложения в Appery.io
• Создание и использование базы данных Orchestrate
• Подключение к базе данных Orchestrate из приложения Appery.io с помощью API REST
• Публикация приложения в формате HTML5 или PhoneGap

Прежде чем вы начнете

Прежде чем начать, вам нужно иметь учетную запись Appery.io и учетную запись Orchestrate. Это довольно просто сделать; просто перейдите по ссылкам ниже, чтобы зарегистрироваться:

Зарегистрируйтесь на Appery.io Starter (бесплатно) план

Подпишитесь на план оркестра (бесплатно)

Создание мобильного приложения

Для создания приложения вы выполните следующие шаги:

1. Создать новое приложение
2. Интерфейс приложения для сборки
   
   1. Страница заказов
   2. Страница AddOrder
   3. DeleteConfirmation всплывающее окно
3. Проверьте пользовательский интерфейс
4. Создать базу данных (в Orchestrate)
5. Определите и свяжите службы API REST
6. Тест
7. Варианты развертывания
   
   1. Appery.io HTML5 хостинг
   2. Пакет как бинарный

Создание нового приложения

Для начала вы собираетесь создать новое приложение. Нажмите кнопку «Создать новое приложение», назовите приложение: Burgerio и нажмите «Создать».

Когда загрузится новое приложение, вы увидите стартовую страницу (на этой странице есть ссылки на документацию, учебные пособия, события и т. Д.).

Откройте первую страницу:  Pages> startScreen .

Давайте быстро выберем другую тему для нашего приложения. Перейдите в Проект> Настройки приложения> Общие , для Темы выберите flat-ui .

Вернитесь на  страницу startScreen , и вы увидите это:

Создание страницы заказов

Хорошо, давайте создадим пользовательский интерфейс для страницы заказов :

1. Первый шаг — переименовать страницу. С выбранным именем страницы (используйте хлебные крошки, чтобы выбрать начальный экран ), переименуйте страницу в Заказы в Свойствах .

2. Выберите заголовок и измените его свойство « Текст» на панели « Свойства» на Burgerio .

3. С помощью перетаскивания поместите компонент Button на страницу (перетащите его на компонент Header справа от заголовка Burgerio ). Измените его свойство Text на Новый порядок, а его Имя на navigate_to_add_order_button . Также выберите значок «плюс», нажав «Значок» на панели свойств :

Эта кнопка переместит пользователя на страницу, где можно сделать заказ еды.

4. Теперь разместите компонент List на странице. Этот список будет отображать все заказы. Измените его имя на records_list. Поскольку элементы списка будут генерироваться динамически на основе извлеченных данных, вы должны оставить только один элемент. Измените  свойство Items на 1 и нажмите «Применить».

5. Мы будем использовать свойство Counter элемента List, чтобы показать, сколько гамбургеров каждого типа было заказано. Выберите  элемент списка (используйте хлебные крошки  для упрощения навигации) и проверьте свойство «Счетчик видимых» на панели « Свойства» . Также измените его имя на records_item.

6. Мы почти закончили с этим списком — нам просто нужно поместить два ярлыка внутри него. Перетащите два компонента Label непосредственно в элемент списка .

7. Выберите первую метку и измените ее свойство Text на  Burger, а его имя на burger_label . Название бургера будет отображаться с использованием этого ярлыка.

8. Вторая метка будет использоваться для хранения идентификатора текущего заказа (полученный из бэкэнда Orchestrate, мы вернемся к этому позже). Выберите его и измените его имя на order_number . Снимите флажок «Видимый».

Последняя страница заказов выглядит следующим образом:

Создание страницы AddOrder

Вторая страница позволит вам разместить заказ.

1. Чтобы создать новую страницу, выберите « Создать новую»> «Страница». Введите AddOrder и нажмите «Создать страницу».

2. Выберите  Заголовок и измените его свойство « Текст» на панели « Свойства» на « Добавить порядок» . Установите флажок «Кнопка Назад».

3. Поместите  компонент Select на страницу AddOrder . Этот компонент будет использоваться для выбора бургера, который вы хотите заказать. Измените его свойство Name на hamburger_select . На панели « Свойства» нажмите «Изменить» справа от ярлыка « Параметры» . Настройка Выберите компонент Параметры как следующие:

Чтобы добавить новые значения, введите новые пары метка / значение и нажмите кнопку «Добавить».

4. Теперь давайте добавим  компонент Slider на страницу и настроим его. Используя этот компонент, пользователь выберет количество заказанных гамбургеров. Перетащите компонент « Слайдер» на страницу под « Выбрать» . Измените его максимальное значение на 10 , значение (значение по умолчанию) на 1 и минимальное значение на 1 . Также измените его свойство Name на qty _slider.

5. Вам просто нужно поместить  компонент Button , который сохранит заказ, в бэкэнд Orchestrate. Добавьте  компонент Button на страницу и измените его свойство Text на Разместить заказ . Кроме того, измените его имя на place_order_button и отметьте опцию «Inline».

Окончательный AddOrder страница выглядит следующим образом :

Хорошо, вы почти закончили с пользовательским интерфейсом. Последняя страница (диалог), которую вам нужно создать, — при удалении заказа.

Создание диалога DeleteConfirmation

1. Нажмите Создать> Диалог . Введите DeleteConfirmation и нажмите «Создать диалог». Диалог похож на классическую страницу, но его можно открыть как диалог (например, всплывающее окно).
2. Выберите  заголовок и измените его свойство « Текст» на панели « Свойства» на « Удалить?».
3. Затем добавьте компонент Label и измените его свойство Text на Вы уверены, что хотите удалить этот порядок?
4. Добавьте компонент Grid . Сетка будет служить в качестве удобного контейнера для размещения других компонентов. Измените количество строк на 1 на  панели « Свойства» :
5. Поместите компонент Label в первый столбец сетки . Измените его свойство Text на имя Burger, а его имя на burger_name.
6. Поместите  кнопку под меткой и измените ее свойство « Текст» на « Да» . Также измените его свойство Name на yes_button.
7. Поместите компонент Label во второй столбец таблицы . Измените его свойство Text на количество Burgers, а его имя на burgers_qty.
8. Поместите последнюю кнопку под меткой burgers_qty и измените ее свойство Text на No.. Также измените свойство Name на no_button.

Окончательный диалог DeleteConfirmation выглядит так:

Добавление навигации

Теперь, когда большая часть пользовательского интерфейса готова, нам нужна возможность перемещаться между страницами. Добавив одно событие, пользователь сможет переходить со страницы « Заказы на AddOrder» . Перейдите на страницу « Заказы» и выберите «Новый заказ». Разверните вкладку « События » и добавьте следующее событие:

navigate_to_add_order_button> Нажмите> Перейти к странице> AddOrder . Нажмите «Добавить событие»:

Тестирование интерфейса

Burgerio не обладает всеми функциональными возможностями, но вы можете протестировать интерфейс и посмотреть, как он выглядит. Нажмите «Тест» в правом верхнем углу экрана. Как только страница загрузится, вы увидите ваше приложение в мобильном фрейме.

Например, вот как выглядит страница AddOrder :

Создание базы данных

Теперь, когда мы закончили с пользовательским интерфейсом приложения, вы создадите серверную часть приложения в Orchestrate.

1. Войдите под своими учетными данными Orchestrate по адресу http://orchestrate.io/ . Нажмите «+ НОВОЕ ПРИЛОЖЕНИЕ», чтобы создать новое приложение. Назовите приложение: Burgerio_db, затем щелкните зеленый значок, чтобы создать его.
2. Как только приложение будет создано, вы увидите панель инструментов и ваш ключ API. Давайте создадим новую коллекцию, нажав «+ НОВАЯ КОЛЛЕКЦИЯ». Назовите коллекцию «  Заказы» и щелкните зеленый значок, чтобы создать ее.

Мы загрузим все данные со стороны приложения, а сейчас просто скопируйте ключ API.

Вот как должна выглядеть панель управления Orchestrate с только что созданной базой данных:

Все, что создано в Orchestrate, мгновенно открывается через API REST. Подключиться к любому RESTful API в приложении Appery.io очень просто — и это именно то, что мы собираемся сделать дальше.

Определение и привязка сервисов REST API

Если у вас есть несколько служб API, рекомендуется хранить ключ API (и другие общие свойства) в одном месте, а затем просто ссылаться на него из служб.

1. Переключитесь на компоновщик приложений Appery.io и выберите « Создать»> «Сервис» . Выберите « Настройки» (REST settings) и нажмите «Создать сервис»:

2. Добавьте два параметра и их значения:

• orders_collection — Заказы .

• api_key — вставьте свой ключ API из панели инструментов Orchestrate:

Добавление сервиса PlaceOrder

Теперь давайте добавим сервис PlaceOrder , который отправит заказ в Orchestrate.

1. Выберите « Создать»> «Служба»> «Служба REST» . Введите PlaceOrder и нажмите «Создать сервис». Настройте службу REST следующим образом:

• Введите следующую строку для  поля URL :

  https://{api_key}@api.orchestrate.io/v0/{orders_collection}/{key}

  Как видите, URL содержит значения в фигурных скобках — эти значения будут взяты из указанного файла настроек .

• Выберите положить как метод .
• Выберите Настройки (созданные на предыдущем шаге) для Настройки .
• Нажмите «Новый канал», чтобы создать новый канал прокси-сервера Appery.io, введите OrchestrateProxy и нажмите «Создать». Этот канал прокси будет использоваться со всеми дальнейшими службами REST.

Вот как  должны выглядеть настройки сервиса PlaceOrder REST :

{"burgerName":"Hamburger","burgersQty":"2"}

return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
    return v.toString(16);
});

return JSON.parse('{"burgerName":"' + Apperyio("hamburger_select").val() + '","burgersQty":"' + Apperyio("qty_slider").val() + '"}');

http://burgerio.app.appery.io/