Статьи

Создание приложения Todo с Ionic, Angular и Appery.io

В течение многих лет разработчикам приходилось делать выбор: создавать одно гибридное приложение с таким удобным пользовательским интерфейсом или создавать собственные приложения для каждой платформы с отличным пользовательским интерфейсом. Разработчикам больше не нужно делать этот выбор. Интегрируя  Ionic SDK  в Appery.io, разработчики могут создавать корпоративные HTML5 / гибридные приложения на единой базе кода, которые обеспечивают удобство работы на всех платформах. Визуальный инструментарий платформы Appery.io снижает барьер навыков, расширяя возможности разработчиков и бизнес-аналитиков для создания эффективных и интуитивно понятных мобильных приложений.

В этом руководстве вы будете использовать платформу Appery.io для создания мобильного приложения. Набор инструментов включает в себя:

  • Ionic — нативные компоненты пользовательского интерфейса
  • AngularJS — логика / привязка пользовательского интерфейса
  • Appery.io App Builder — облачный дизайнер перетаскивания
  • Appery.io Backend Services — API-интерфейс для приложения

Что ты строишь?

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


Прежде чем ты начнешь

Начинать очень просто. Там нет ничего, чтобы загрузить или установить (круто, верно?). Вам нужна только учетная запись Appery.io. Если у вас еще нет учетной записи,  зарегистрируйтесь в программе Starter (бесплатно) .

Давайте начнем!

Первым шагом является создание совершенно нового приложения Ionic.

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

Создать новое приложение легко и просто, так как не нужно ничего загружать, настраивать или настраивать.

  1. На  Apps странице нажмите  Create new app кнопку
  2. Для имени приложения введите TodoApp
  3. Выберите  Ionic AngularJS App и нажмите  Create кнопку

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

Ionic_createapp_startpage

Новое ионное приложение

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

Разработка индексной страницы

Разверните  Pages папку и нажмите на страницу индекса. Визуальный дизайнер загрузит страницу:

Ionic_designindex_open

Визуальный дизайнер

Приложение Ionic / AngularJS поставляется с индексной страницей. Это главная страница шаблона, которая определяет элементы верхнего и нижнего колонтитула (также может определять компонент бокового меню).

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

  1. Щелкните по  Header компоненту, затем в  Properties представлении установите для  Color свойства значение assertive.
  2. Выберите  Button компонент и перетащите его в левое поле в заголовке. Это должно выглядеть так: Ionic_designindex_tasksbuttonстраница указателя
  3. С выбранной кнопкой перейдите к  Properties и измените кнопку  Text на  Tasks.
  4. Разверните  Icon свойство, нажмите  No icon кнопку и установите значок для кнопки. Выберите, ion-navicon-icon что выглядит так:Ionic_designindex_icon
  5. Теперь вам нужно добавить еще одну кнопку. Перетащите другой  Button компонент и поместите его с правой стороны в заголовке.
  6. Установите кнопку  Text на  New и установите значок,  ion-plus-circled который выглядит следующим образом:Ionic_desingindex_iconplus

Вот как должна выглядеть ваша страница:

Ionic_designidex_header

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

Еще одна вещь, которую нужно сделать с заголовком. Вы хотите, чтобы заголовок заголовка изменялся в зависимости от загруженной в данный момент страницы (в приложении есть две страницы: «задачи» и «создать новую задачу»). Чтобы изменить заголовок во время работы приложения, необходимо связать заголовок с выражением AngularJS. Когда приложение работает, правильный заголовок страницы будет считан из области AngularJS и установлен на странице.

  1. Выберите заголовок и в  Properties поле зрения установите для  Text свойства значение  {{header.title}}. Это выражение AngularJS. Это означает, что заголовок объекта и его свойство будут разрешены при запуске приложения.
  2. Обратите внимание на три вкладки в левой части визуального дизайнера: Дизайн, Область, Связывание. Откройте Scope вид. Это представление позволяет вам определять переменные и функции области видимости AngularJS. init() Функция уже есть. Нажмите на  Edit кнопку, чтобы открыть функцию для редактирования.
  3. Добавьте эти строки кода (в дополнение к уже существующей строке):
    $scope.header = {};
    $scope.header.title = "Tasks";

    Этот код создает объект, который будет присутствовать в области видимости AngularJS и будет содержать имя текущей страницы. Выражение, которое вы установили выше, будет отображать правильное имя страницы.

Мы закончили с индексной страницей. Это было довольно просто, верно?

Далее вы будете работать над страницей, которая отображает все задачи.

Разработка страницы задач

Каждое новое приложение поставляется с двумя страницами. index Страница , которую вы уже работали , а также  Screen1страницы. Сначала давайте переименуем страницу.

  1. Наведите указатель мыши на  Screen1 имя файла, пока не увидите синий значок справа. Нажмите на значок и выберите Rename
  2. Установите новое имя  tasks и нажмите Rename

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

  1. Откройте страницу задач.
  2. Перетащите  List компонент на страницу. Список по умолчанию состоит из трех элементов.
  3. Поскольку вы будете загружать задачи из базы данных, вам нужен только один элемент списка. Выберите третий (последний) элемент списка. В правом верхнем углу появятся две иконки. Нажмите на красный значок, чтобы удалить этот элемент из списка: Ionic_designtasks_listСтраница задач
  4. Повторите то же самое для другого элемента (оставьте только один элемент списка).

У вас должен быть список только с одним предметом.

  1. Нажмите на предмет, вы увидите две иконки в правом верхнем углу. Нажмите на значок плюс, и кнопка будет вставлена ​​в элемент списка.
  2. В  Properties, очистите Text свойство кнопки  . Разверните  Icon и установите значок на  ion-trash-b значок.
  3. Снова выберите элемент списка и в Properties раскрывающемся  списке  Item Badge и установите  Text для  High.

Ваша страница должна выглядеть так:

Ionic_designindex_listdone

Ионный список

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

Вы можете протестировать свое приложение в браузере (настольном или мобильном), а также протестировать приложение на устройстве как гибридное приложение.

Тестирование в браузере

Тестировать ваше приложение во время разработки в браузере очень просто. В Test App Builder есть  кнопка, которая запускает настоящее приложение на новой вкладке браузера. Ваше приложение должно выглядеть так:

Ionic_testtasks

Тестирование в браузере

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

Браузер на мобильном устройстве

Вернитесь в App Builder и раскройте  Test меню кнопок. Вы увидите, что есть возможность сделать приложение общедоступным. Как только вы сделаете приложение общедоступным, вернитесь на тестовую страницу и нажмите на ссылку Посмотреть на телефоне. Вы увидите QR-код. Отсканируйте этот QR-код на своем мобильном устройстве (вам потребуется приложение для QR-сканера), и приложение запустится в браузере на вашем устройстве.

Тестирование на устройстве (гибридное приложение)

Также очень просто протестировать гибридное приложение на реальном устройстве. Чтобы просто провести тестирование на устройстве, установите приложение Appery.io Tester (доступно для  iOS  и  Android ). После установки приложения войдите в систему, используя имя пользователя и пароль Appery.io. Вы увидите приложение, которое вы создали. Нажмите на приложение, и гибридная версия этого приложения будет запущена на устройстве.

Теперь, когда вы знаете, как тестировать свое приложение, давайте поработаем на второй странице, где вы сможете создать новое задание.

Разработка новой страницы задач

На этой странице вы сможете создать новое задание, установить его приоритет и сохранить его.

  1. Выберите  Create new > Page. Для имени страницы введите  newtask и нажмите  Create Page кнопку
  2. Перетащите  Input компонент
  3. В  Properties, измените  Placeholder значение на New task
  4. Затем перетащите  Checkbox компонент. Установите его  Text значение High priority
  5. Теперь перетащите  Button компонент.

    • Установите  Text свойство в Save task
    • Установите  Width свойство в Block
    • Установите  Color свойство в calm

Ваша страница должна выглядеть так:

Ionic_designnewtask_done

Страница нового задания

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

 Добавление бэкенда приложения — база данных

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

В App Builder щелкните ссылку «База данных» в правом верхнем углу, чтобы запустить консоль базы данных.

  1. На главной странице базы данных нажмите  Create new database кнопку. Для имени базы данных введите taskDB и нажмите  Create.
  2. Вы только что создали новую базу данных. Теперь вам нужно создать коллекцию (таблицу) для хранения данных. Нажмите  Create new collection. Для имени коллекции введите  task и нажмите  Add. Новая коллекция была создана.
  3. Теперь вам нужно добавить два столбца в коллекцию.

    • Нажмите  +Col, для ввода имени  name. Держи  Type как  String.
    • Нажмите  +Col, для ввода имени  priority и установите  Type для  Boolean.

Это очень быстро, чтобы ввести данные выборки, если хотите. Нажмите  +Row и введите описание любой задачи и выберите true, если вы хотите, чтобы она была приоритетной Вот как должна выглядеть ваша коллекция:

Ionic_db_task_sampledata

База данных

Теперь, когда у нас есть бэкэнд приложения, давайте поработаем над интеграцией этого бэкенда с приложением.

Создание API для подключения к бэкэнду

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

  1. В App Builder выберите  Create new > Database Services. Из списка баз данных выберите базу данных, которую вы только что создали.
  2. Разверните коллекцию задач. Здесь вы можете выбрать, какие API-сервисы импортировать (генерировать). Вам нужно три услуги:  CreateList и  Delete. Ionic_db_importdbservicesГенерация сервисов API
  3. Нажмите  Import selected services. Если вы откроете  Services папку, вы увидите API-сервисы, которые вы только что создали.

Любой сервис может быть быстро протестирован. Откройте  taskDB_task_list_service сервис, затем откройте  Testвкладку. Нажмите на  Test кнопку. Вы должны увидеть образцы данных, которые вы ввели при создании коллекции

Ionic_listservice_test

Тестирование сервиса REST API

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

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

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

  1. Чтобы создать модель приложения, откройте «Проект»> «Модель».
  2. В поле ввода введите Задача и нажмите Добавить.
  3. Теперь вы собираетесь добавить три свойства объекта Task. Нажмите кнопку Добавить (справа от Задачи) три раза. Три свойства будут добавлены. Переименуйте свойства в: _id, name и priority. Только для приоритета, установите тип Boolean.
  4. Теперь вам нужно создать еще один объект, список, который будет содержать коллекцию задач. В верхнем поле ввода введите TaskList и нажмите Добавить

    1. Измените Тип на Массив. Дочерний элемент будет добавлен.
    2. Для дочернего элемента измените Тип на Задачу

Ваша модель должна выглядеть так:

Ionic_model

Модель приложения

У вас есть объект задачи и список задач.

Теперь вы готовы использовать сервисы на странице.

Настройка сервисов API на странице задач

Настройка службы на странице обычно включает следующие шаги:

  • Вызов API со страницы.
  • Сохранение данных из сервиса в область видимости AngularJS.
  • Используя выражения AngularJS ( {{..}}), привязываем страницу к области для отображения данных.

Получение всех задач из базы данных

Когда пользователь открывает приложение, вы хотите загрузить все задачи из базы данных.

  1. Откройте  tasks страницу.
  2. Откройте  Scope вкладку. Область действия — это то, где вы будете определять переменные области действия и функции области действия.
  3. Сначала вам нужно определить переменную области видимости. В левой части редактора областей введите  tasks имя переменной. Установите  Type для  TaskList. Это должно выглядеть так: Ionic_tasks_scope_variableScope editor
  4. В правой части редактора областей введите  loadTasks имя функции. Сохраните тип как  Scope function и нажмите Добавить.
  5. Нажмите  Edit для функции, которую вы только что создали.
  6. Поместите курсор мыши в редактор и нажмите  Invoke service кнопку фрагмента. Фрагмент кода вызова службы будет вставлен.
  7. Далее вам нужно установить имя службы для вызова. Удалите  "service_name" (включая кавычки) и, удерживая курсор в скобках, нажмите ctrl-space, чтобы вызвать помощник по коду. Выберите  taskDB_task_list_service из всплывающего окна. Вы также всегда можете ввести имя от руки. Ваша функция должна выглядеть так: Ionic_tasks_scope_loadtasks1Scope editor — function

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

Вам не нужно создавать контроллер AngularJS в Appery.io. Контроллер автоматически создается для каждой страницы

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

Теперь пришло время поработать над картированием.

  1. Чтобы сохранить задачи в области, нажмите вторую  Mapping кнопку код функции. Это отображение сделано внутри обещания успеха. Откроется редактор визуальных карт. С помощью перетаскивания создайте следующее отображение: Ionic_tasks_mappingРедактор отображения
  2. Нажмите  Save and return.

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

var tasks_scope = $scope["tasks"];
tasks_scope = success.data;
$scope["tasks"] = tasks_scope;

Вот как выглядит полная функция:

Ionic_tasks_loadmapping_code

Код функции области

Когда вы снова нажмете на Mapping, вы не увидите созданное вами подключение. В нашем следующем обновлении подключение будет оставаться там. Если вам нужно внести какие-либо изменения в сопоставление, вы можете удалить сгенерированный код и выполнить сопоставление снова.

Вот что происходит:

  • Служба вызывается
  • Данные копируются в  tasks переменную области видимости.
  • Как только данные попадают в область видимости, они становятся доступными для отображения на странице.
  • Мы на самом деле не занимаемся обслуживанием (но вы должны в целом)

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

  1. Открытая  init функция для редактирования
  2. Добавьте эту строку кода, чтобы вызвать функцию для загрузки задач:
    $scope.loadTasks();

Давайте работать дальше на отображение этих данных.

  1. Вернуться на  Design вкладку
  2. Выберите элемент списка и,  Properties добавив новый атрибут, начав печатать  ng-, вы увидите список всех доступных директив AngularJS. Вы можете ввести полное имя атрибута ( ng-repeat) или выбрать его из списка.
  3. В качестве значения атрибута введите  task in и активируйте помощник по коду, нажав Ctrl-пробел, и выберите задачи. Полная стоимость должна быть:  task in tasks.
  4. Теперь измените свойство Text элемента списка на  {{task.name}}.
  5. Разверните  Item Badge свойство и установите эти значения:

    • Установите свойство Text в  {{task.priority?'High':'Normal'}}.
    • Установите для свойства Color значение  {{task.priority?'assertive':'stable'}}.

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

Ionic_testtasks2

Страница тестирования задач в браузере

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

Пометка задачи как выполненной (удаление)

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

  1. Откройте  Scope вид.
  2. Создать новую функцию  deleteTask с  Scope function типом ( по умолчанию).
  3. Чтобы удалить задачу, вам нужно знать, какую задачу удалить, поэтому вам нужно передать идентификатор задачи, которая будет удалена. Каждая функция имеет  Arguments поле. Для только что созданной функции введите id в это поле.
  4. Нажмите,  Edit чтобы редактировать эту функцию
  5. Если вы помните, вы импортировали службу удаления, чтобы удалить задачу. Код для вызова службы можно быстро импортировать, щелкнув  Invoke service фрагмент кода.
  6. Служба требует, чтобы идентификатор задачи был удален, поэтому вам необходимо передать его службе. Вы будете использовать объект requestData уже там. Добавьте это как вторую строку кода:
    requestData = {"_id":id};
  7. Далее вам нужно установить фактическое имя сервиса. Удалить  "service_name" значение. Вы можете использовать помощник по коду (Ctrl-пробел), чтобы помочь вам найти имя службы или введите его вручную. Название сервиса есть  TaskDB_task_delete_service.

Ваш код должен выглядеть так:

var requestData = {};

requestData = {"_id": id};

Apperyio.get("TaskDB_task_delete_service")(requestData).then(
   function(success){
   },
   function(error){
   }
);

Есть еще две вещи, которые нужно сделать перед запуском приложения. Во-первых, когда задача удалена, вам необходимо обновить список в приложении. Если удаление прошло успешно, вы хотите обновить список. Добавьте функцию loadTasks () в обещание удаления службы. Вот как выглядит финальный код:

var requestData = {};

requestData = {"_id": id};

Apperyio.get("TaskDB_task_delete_service")(requestData).then(
   function(success){
      $scope.loadTasks();
   },
   function(error){
   }
);

Во-вторых, вам нужно привязать кнопку удаления к этой функции.

  1. Переключиться на  Design просмотр.
  2. Выберите кнопку удаления.
  3. В  Properties, установите значение  ng-click атрибута в  deleteTask(task._id). Вы можете использовать помощник по коду (Ctrl-пробел), чтобы помочь вам с выбором функции.

Идите и протестируйте приложение. Попробуйте удалить элемент. Далее вы будете работать над функциональностью добавления задачи. На данный момент вы можете быстро добавить новый элемент, введя его непосредственно в базу данных. Например, вот так выглядит приложение после удаления двух задач:

Ionic_testtasks3

Тестирование в браузере

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

Настройка навигации

В заголовке есть две кнопки, которые нужно настроить для навигации. Tasks Кнопка перейдет на  tasks страницу и  New перенесет вас на  newtask страницу.

  1. Чтобы настроить навигацию или маршрутизацию в терминах AngularJS, откройте  Project > Routing. Вы увидите маршрут по умолчанию там. Он показывает страницу, которая загружается при загрузке страницы индекса или при запуске приложения.
  2. Вместо имени Screen1 маршрута по  умолчанию измените его на более подходящее имя: tasks.
  3. Введите новое имя маршрута  newtask.
  4. Для страницы выберите  newtask страницу и нажмите Добавить.

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

Ionic_routing

Редактор маршрутизации

Теперь, когда вы определили навигацию, давайте подключим реальные кнопки. Поскольку приложение использует  index шаблон, навигацию легко определить только в одном месте. Кроме того, для простой навигации Appery.io создает пользовательскую директиву AngularJS для перехода с одной страницы на другую по имени  navigate-to. Эта директива используется как любая другая директива AngularJS, например  ng-click или  ng-repeat. Вы устанавливаете это как атрибут.

  1. Открыть  index страницу в  Design поле зрения
  2. Выберите  Tasks кнопку
  3. В   директиве Properties add  navigate-toи установите ее значение  tasks (это имя маршрута). Для имени директивы вы можете использовать помощник по коду (Ctrl-пробел) или просто ввести полное имя
  4. Повторите ту же  New кнопку, установив название маршрута в  newtaks.

Вы можете протестировать приложение. При нажатии на  New кнопку вы должны увидеть  newtask страницу:

Ionic_testrouting_newtask

Тестирование страницы новой задачи

Вы почти закончили. Далее вы будете работать над сохранением нового задания в базе данных.

Настройка сервисов API на странице Newtask

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

  1. Откройте  newtask страницу и переключитесь на  Scope просмотр
  2. Создайте переменную области видимости для хранения ввода со страницы. Назовите его  task и установите тип  Task. Ionic_newtask_scope_variableРедактор области — переменные
  3. Теперь пришло время добавить функцию. Добавить функцию  addTask с Scope functionтипом по умолчанию 
  4. Откройте функцию для редактирования
  5. Вставить  Invoke service фрагмент кода
  6. Измените имя службы на TaskDB_task_create_service

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

  1. Нажмите на первое поле Mapping в редакторе кода. Откроется редактор визуальных карт
  2. Используя перетаскивание, создайте следующее отображение: Ionic_newtask_mappingРедактор отображения
  3. Нажмите,  Save and return чтобы вернуться в редактор Scope. Код сопоставления генерируется автоматически.
  4. Вы хотите перейти на  tasks страницу после успешного добавления новой задачи. Для этого добавьте
    Apperyio.navigateTo("tasks");

    в обратном вызове успеха услуг.

Ваш окончательный код будет выглядеть так:

var requestData = {};
requestData.data = Apperyio.EntityAPI('TaskDB_task_create_service.request.body', undefined, true);

var task_scope = $scope["task"];
requestData.data.name = task_scope.name;
requestData.data.priority = task_scope.priority;

Apperyio.get("TaskDB_task_create_service")(requestData).then(

   function(success){
      Apperyio.navigateTo("tasks"); // navigation 
   },
   function(error){}
);

Теперь вам нужно привязать страницу к области, а также кнопку.

  1. Вернитесь в режим конструктора.
  2. Выберите поле ввода и установите его  ng-model атрибут на  task.name. Это свяжет ввод с объектом Task в области видимости.
  3. Установите флажок в поле и установите его  ng-model атрибут в  task.priority.
  4. Выберите кнопку и установите ее  ng-click атрибут на  addTask().

Осталось сделать еще одну вещь: при переходе на  newtask страницу заголовок заголовка говорит  Tasks. Стоит сказать  New task.

  1. Переключитесь на вид Scope и откройте функцию init для редактирования.
  2. Добавьте эту строку кода, чтобы изменить заголовок заголовка:
    $scope.header.title = "New task";

Теперь вы готовы и готовы протестировать приложение.

Тестирование приложения

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

Через браузер

Вы можете быстро протестировать в браузере, нажав кнопку «Тест».

Чтобы упростить запуск приложения на устройстве в браузере, вы можете отсканировать QR-код (требуется приложение для сканирования штрих-кодов) и протестировать приложение на вашем устройстве.

Ionic_test_qrcode

Запуск приложения через QR-код

Не забудьте сделать приложение общедоступным в App Builder при тестировании на устройстве.

Как гибридное приложение на устройстве

Ionic — это отсутствующий SDK для собственных приложений, поэтому вы хотите протестировать приложение на устройстве. Это легко сделать с помощью приложения Appery.io Tester. Приложение бесплатно и доступно для iOS и Android. Приложение-тестер позволяет тестировать собственные приложения и любые собственные API-интерфейсы без установки приложения на устройство. Вот как выглядит приложение при тестировании на Android:

Ionic_testerapp_android

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

Установка на устройство

Другой вариант — установить приложение прямо на устройство. Это также довольно просто сделать, поскольку Appery.io создаст двоичный файл, который готов для установки на устройстве. Чтобы создать двоичный файл, щелкните  Export в App Builder:

Ionic_export

Экспорт меню

Служба облачной сборки Appery.io быстро создаст двоичный файл, который готов для установки на устройстве или загрузки в магазин приложений.

Каждое приложение Appery.io включает Apache Cordova. Это означает, что вы также можете использовать любые API-интерфейсы Cordova, такие как Camera, Contacts и другие.

Как видите, создание приложения с помощью API-интерфейсов для нативных пользователей также просто.

Получение резервной копии приложения

Мы надеемся, что вы попробуете это руководство, но если вы хотите попробовать это приложение прямо сейчас, вы можете загрузить  резервную копию приложения и создать из нее новое приложение ( Create new app > From backup). Пожалуйста, завершите настройку базы данных, как описано в этом руководстве. В консоли базы данных перейдите на  Settingsвкладку и скопируйте ключ API базы данных. В App Builder откройте  Services > TaskDB_settings и вставьте ключ API для  database_id.

Резюме

Из этого туториала вы узнаете, как быстро создать приложение с использованием собственного интерфейса для пользователей Ionic, AngularJS и Appery.io.