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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обратите внимание, что это настоящее приложение, работающее в браузере (это не симулятор). Если вы хотите, вы можете удалить рамку, нажав  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

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

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

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

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

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

В 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, если вы хотите, чтобы она была приоритетной Вот как должна выглядеть ваша коллекция:

База данных

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

var requestData = {};

requestData = {"_id": id};

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

var requestData = {};

requestData = {"_id": id};

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

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){}
);