Oops... your message was not sent

Your message has been successfully sent

тематические истории, основанные на опыте компании JetRuby
Мобильная разработка

Гибридные мобильные приложения. Часть 3: работа с данными в Parse

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

Примеры исходного кода можно найти на GitHub:

https://github.com/c3gdlk/ionic_parse_todo

“Привычка – это либо лучшая из служанок, либо худшая из хозяек.” — Натаниэль Эммонс

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

Наше приложение будет содержать страницу с двумя закладками:

  1. Список всех вредных привычек. При нажатии на выбранную позицию перед нами откроется ее журнал.
  2. Список всех фейлов с отображением текста заметки, даты и привязкой к одной из вредных привычек.

Начнем с изменений на стороне сервера — создаем новые таблицы в Parse.

Нам требуется список вредных привычек (в качестве главной страницы) и таблица фейлов (как дочерняя страница).

Добавляем класс Habit с полями:

  • Title — название привычки.
  • User — идентификатор пользователя, ссылка на запись в таблице User. Для того чтобы создать ссылку на объект, нам нужно выбрать тип нового поля “Pointer” и в появившемся выпадающем списке — класс _User. Нижнее подчеркивание обозначает, что это один из предопределенных классов.

Добавляем класс HabitFailure

  • body — текст заметки о фейле;
  • user — идентификатор пользователя, ссылка на таблицу User;
  • habit — идентификатор привычки, ссылка на таблицу Habit.

Следующий шаг изменения в самом приложении. Добавляем новые маршруты в js/router.js

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

templates/views.html

js/controllers.js

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

js/habits/habits_controller.js

Пояснения к коду контроллера

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

Для получения и изменения свойств любой записи мы используем геттеры и сеттеры.  Выбранный способ реализации не предоставляет нам возможность привязать атрибуты к ng-model.

Для устранения этой проблемы добавляем в объект два новых поля:

  • bad — флаг вредной привычки (к отмеченным таким образом привычкам мы сможем добавлять заметки о фейлах);
  • reason — заметка о фейле.

Завершив загрузку вредных привычек, мы приступаем к загрузке фейлов.

Если нам потребуется отобразить текст о привычке при отображении фейла, мы делаем query.include(«habit»)

Когда все данные получены — обновляем интерфейс

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

Создаем шаблон для новой страницы/экрана templates/habits.html

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

Подводим итоги. Мы объявили еще одну верхнюю панель с классом bar-subheder. Для главного контейнера также определен класс bar-subheader. Фильтр formattedDate используется для того чтобы отобразить дату в удобочитаемом формате. С его кодом вы можете ознакомиться в репозитории нашего учебного проекта. Там же располагается код контроллеров создания новой привычки и отображения выбранной привычки. Он достаточно тривиален. Поэтому мы не станем тратить ваше время на описание его особенностей. Продолжение следует.

department
Статью подготовил
Отдел мобильной разработки
Профессиональная разработка нативных приложений под Android и iOS, а также реализация гибридных кроссплатформенных решений и мобильных сайтов.
New Articles