Не будем останавливаться на достигнутом и продолжим рассказ о гибридных мобильных приложениях. В предыдущей статье мы реализовали авторизацию пользователей. В этом тексте речь пойдет о новом блоке привычки и заметках к вредным привычкам.
Примеры исходного кода можно найти на GitHub:
https://github.com/c3gdlk/ionic_parse_todo
“Привычка – это либо лучшая из служанок, либо худшая из хозяек.” — Натаниэль Эммонс
Следуя логике цитаты, мы решили добавить функционал, который поможет избавиться от мелких неприятных привычек. Например, слов-паразитов или курения. Каждый раз, когда приходится ловить себя на действиях, от которых хочется немедленно отказаться, мы вносим краткую заметку в приложение. И описываем, почему это все же произошло.
Наше приложение будет содержать страницу с двумя закладками:
- Список всех вредных привычек. При нажатии на выбранную позицию перед нами откроется ее журнал.
- Список всех фейлов с отображением текста заметки, даты и привязкой к одной из вредных привычек.
Начнем с изменений на стороне сервера — создаем новые таблицы в 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 используется для того чтобы отобразить дату в удобочитаемом формате. С его кодом вы можете ознакомиться в репозитории нашего учебного проекта. Там же располагается код контроллеров создания новой привычки и отображения выбранной привычки. Он достаточно тривиален. Поэтому мы не станем тратить ваше время на описание его особенностей. Продолжение следует.
