52
o CCLabel с номером текущей собираемой фразы (Фраза _Х из _У);
o CCLabel с текстом фразы на русском (визуально просто текст, но
каждое слово расположено на кнопке, тап по которой вызывает
стандатный баллун сервиса с переводом и прочими базовыми
функциями);
o Инфоблок с подсказкой, где вывожу слова-подсказки для
пользователей, которые нужно использовать в переводе;
o Эдитбокс(CCEditBox), куда пользователь вводит свой перевод
текущей фразы ;
o Кнопка отправки ответа на проверку;
Наполнение дальнейшей сцены зависит от результата перевода
текущей фразы. Возможно 2 варианта: перевод выполнен верно/ перевод
выполнен с ошибками. Реализация логики и наполнения сцены выполнена
в классе TranslateWorkScene.cpp, однако в целом вид отличается
незначительно:
3. Макет вида сцены, загружающейся после первой проверки перевода
пользователя.
3.1. Результат проверки – верно.
В этом случае вверху также выведена TopPanel, CCLabel’ы с номером
фразы, фразой на русском, далее контент отличается:
o Блок, индицирующий правильную сборку, на котором выведен
перевод пользователя(подсвечен зеленым цветом);
o Ниже блок с допустимыми альтернативными вариантами перевода
(варианты перевода выводятся в цикле, размер блока зависит от
количества вариантов), снабженный кнопкой, вызывающий сцену с
комментариями к конкретно текущей фразе;
o Кнопка продолжить, тап по которой загружает работу со следующей
фразой;
53
3.2. Результат проверки – с ошибками.
В этом случае, первые три элементы сцены не отличаются от пункта
3.1. Далее:
o Блок, сообщающий пользователю, что в его переводе есть
ошибки(результат проверки выдает API) и то, что ввел пользователь
(красным помечаются слова с ошибкой, троеточия свидетельствуют
о недостающих словах); размер блока динамически
переопределяется по высоте при необходимости;
o Кнопка «Исправить свой перевод», возвращает пользователя к
работе над текущей фразой, для возможности внесения изменений в
перевод и отправки на повторную проверку;
o Кнопка «Показать ответ» : догружает на сцену блок, описанный в
п.3.1. с вариантами перевода и кнопкой перехода к сцене с
комментариями к текущей фразе;
Таким образом, с одним шагом или двумя, пользователь переходит к
сборке следующей фразы.
Когда счетчик текущей фразе равен количеству фраз в транслейте на
сцене с отображением данных проверки по текущей фразы(не в зависимости
от того, верно или неверно она переведена ) , кнопка «Продолжить»
переопределяется: текст меняю на «Посмотреть результаты»(showResults) и
тап по ней вызывает новую сцену(TRANSLATE_FINAL_SCENE)
4. Макет сцены с результатами по текущему транслейту.
o На этой сцене TopPanel содержит лейбл, сообщающий
пользователю, что он находится на сцене результатов и кнопку
«назад», загружающая сцену каталога транслейтов.
o Первый CCLabel содержит информацию об общем результате
выполнения задания (вычисляется по отношению количества верно
переведенных фраз к количеству неверно переведенных).
54
o Блок с результатами задания, где последовательно выведены ответы
пользователя на каждый этап задания с соответствующей
индикацией. Тап по слову вызывает баллун слова, пропущенные
слова выведены в виде троеточий. Высота блока динамически
пересчитывается при необходимости: изменяю внутренний размер
скролла (innerContainerSize), т.е. сам блок визуально размер не
меняет, но если содержимое контейнера по высоте превосходит
визуальный размер контейнера, активируется возможность
скроллинга;
o Далее две строки с количеством фраз с ошибками и без (без ошибок
– зеленого цвета, с ошибками - красного);
o Внизу две кнопки: переход к собранным фразам и переход в каталог
транслейтов(TranslatesCatalogScene.cpp)
5. Макет сцены собранных фраз.
Содержит блоки с информацией об уже отработанных фразах. Сцена
реализована посредством расширяющего контейнера (описание в пункте 2
Главы 3). Блоки фраз добавляются каждый под предыдущий; разделены
горизонтальной линией. Блок содержит:
o CCLabel с номером фразы;
o CCLabel с фразой на русском;
o CCLabel с фразой на английском;
o Блок (CCLayer) с индикацией наличия ошибки в переводе: если
перевод верный это зеленый блок с текстом «Вы перевели эту фразу
без ошибок» и блок с текстом о наличии ошибок и выведенным
результатом ввода пользователя с индикацией ошибок;
o В случае, если статус проверки правильности перевода
отрицательный, ниже может содержаться блок с комментарием
редактора по конкретному случаю (для раздела собрана большая
55
база редакторских переводов к конкретным типам ошибок с
описанием ситуаций );
o Кнопка, вызывающая попап возможных переводов
(TranslatesPossibleAnswersPopup.cpp);
1. Макет сцены каталога транслейтов.
Визуально представлена тремя блоками:
o TopPanel. Содержит (слева направо): 1. Кнопку вызова бургер-
меню(навигация по приложению); 2. Кнопка вызова инфо-сцены; 3.
Кнопку вызова навигации по рубрикам раздела транслейты
(визуально выглядит как выпадающее меню ,описание в п.2. главы
3); 4.Кнопку перехода к Личному Плану (Описание в Главе 1.); 5.
Кнопку с аватаром юзера, вызывающую попап профиля;
o Блок, реализующий базовые функции каталогизированных
разделов: кнопка вызывающая настройку фильтров и кнопка,
вызывающая настройку сортировки заданий;
o Основная часть сцены представлена каталогом блоков структур
заданий типа Транслейты. Блок содержит название задания,
индикацию сложности задания, количество фраз в задании,
количество добавлений задания в избранное различными
пользователями и превью(в левом верхнем углу картинки
процентный индикатор выполнения задания текущим
пользователем;)
Блок с каталогом реализован посредством DynamicLoadingScroolView
(CCScrollView, наследник CCLayout), т.е. динамически расширяется в
зависимости от количества внутренних объектов. Тап в любой области
блока задания инициирует переход на сцену конкретного задания.
2. Макет сцены собранных фраз с попапом возможных переводов.
56
Поверх сцены собранных фраз появляется стандартный попап,
содержащий следующую информацию:
o Номер фразы, по которой выведена информация;
o Фраза на русском;
o Фраза на английсокм;
o Возможные варианты перевода;
o Кнопка закрытия попапа(крестик в правом верхнем углу попапа);
3. Макет инфосцены по разделу (группа Tutorials –
TranslatesInfoScene.cpp).
Стандартная для приложения сцена, содержащая краткий
иллюстрированный мануал по работе с разделом, состоит как правило из
одной (и более) картинки и одного (и более блока с текстом – по сути
просто CCLabel ).
Оставшиеся макеты являются вариацией описанных сцен,
иллюстрирующие различные состояния сцены.
Важно отметить, что при проектировании необходимо не забывать о
том, что приложение работает на мобильных девайсах, т.е. места для
отображения контента меньше, чем на мониторе компьютера, в силу чего
необходимо грамотно распределять функционал, не перегружать сцену
элементами, при этом сохраняя удобство использования и, по
возможности, реализовывая максимум функционала, доступного
пользователю в веб-проекте. В ходе работы над разделом, в силу
сложности реализации, недостатка места и сроков от некоторого
функционала пришлось отказаться(например, баллун слова на настоящий
момент содержит меньше функций, чем в веб-проекте).
57
3.2. Реализация раздела Транслейты
Шаблон проектирования MVC.
Структура приложения «Английский с Puzzle English» спроектирована по
популярному шаблону MVC (Model-View-Controller: модель-вид-
контроллер), позволяющему разделять в три независых сущности:
Контроллер (Controller) – отвечает за манипуляции с
запросами(get/post запросы, callback’и тапов пользователем по
интерактивным элементам и проч.), т.е. реализует необходимую
реакцию системы на определенные действия;
Модель (Model) – представление данных и методов их обработки, т.е.
логика работы программы при совершении тех или иных операций;
Вид (View) – визуализация данных, получаемых от модели.
Рис. 20. Схема шаблона MVC.
Всего для реализации разделов мне понадобилось разработать 11 классов.
Среди них(.cpp + .h):
58
TranslatesWordsAndExpressionsScene(~200строк) – реализация сцены,
отображающей список слов конкретного задания.
TranslatePossibleAnswersPopup(~150 строк) – реализация попапа для
отображения вариантов ответа со списка собранных фраз.
TranslatesAPIManager(~900 строк) – класс отвечает за взаимодействие с
сервером: запросы к серверу, парсинг, сохранение состояний
глобальных структур, геттеры/сеттеры.
TranslateExcercisePanel(~130 строк) – реализация блока транслейта в
каталоге транслейтов.
TRSLTSortPopup(~50 строк) – управление элементами сортировки и
фильтрации каталога транслейтов, установка текущей сортировки.
TranslatesCatalogScene(~420 строк) – наполнение сцены каталога
блоками структур заданий, запрос списка структур, запрос
категорий(для смены типов отображаемых структур), обновление
списков, дополнительные запросы обновления списка и проч.
TranslatesCurrentRubricScene(~50 строк) – запрос состояний списков
рубрик, отображение актуальной информации.
TranslateWorkScene(~1080 строк) – реализация главной логики сборки
фраз, запросы получения информации о фразе, запросы для отправки
переводов пользователя, отображение контента в зависимости от
результатов ответа и проч.
CurrentTranslateScene(~250 строк) – реализация входной сцены задания,
стартовые проверки, текст задания, точка входа в режим сборки.
TranslatesDonePhrasesScene(~440 строк) – реализация сцены собранных
фраз, отображение блоков.
TranslateFinaleScene(~230 строк) – реализация финальной сцены
транслейта, отображение статистики по заданию.
59
Взаимодействие с сервером.
В модели клиент-серверного взаимодействия, клиентом в данном
случае мы называет приложение, способное сформировать запрос к серверу,
а серверном, соответственно, машину в сети, способную этот запрос
получить и обработать(и прислать по необходимости данные клиенту).
Взаимодействие с приложения с сервисом Паззл Инглиш происходит
посредством использования запросов и механизмов API, при их
использовании приложению не нужно тратить лишнее место на девайсе
пользователя и можно переносить часть логики на сторону сервера для
экономии ресурсов.
Для примера приведу класс TranslatesAPIManager:
Класс реализован по шаблону проектирования singleton(одиночка),
обеспечивающем единственность экземпляра создаваемого класса,
защищенного от копирования и предоставление глобальной точки доступа,
т.е. возможность обращения из любой точки программы. Экземпляр класса
инициализируется при первом вызове, а при последующих - возвращает
существующий объект. В этом классе описаны методы запросов всех заданий
типа транснлейт, запрос формирования списков транслейтов,
отсортированных по категориям, сложности, дате, или алфавиту, запрос
проверки ответа пользователя на конкретную фразу, методы парсинга
результатов прохождения фразы, информации о траснлейте, информации о
категориях, дополнительный запрос на расширение каталога,
дополнительный запрос на обновление информации о списке транслейтов,
методы реализующие управление списками(скрыть выполненные, установить
текущую категорию или сложность и т.п.) и проч., а также методы
добавления в избранное и методы, управляющие распарсенными данными
после получения данных.
60
При переходе на сцену каталога транслейтов, выполнятся следующие
действия:
1. Вызовется метод getFilterState для определения рубрики(дефолтная
рубрика «Все», но при смене пользователем последняя рубрика
сохраняется и при последующем входе из другого раздела приложения,
при загрузке отобразятся танслейты из нее), и сортировки.
2. Затем произойдет запрос к серверу на получение данных для
формирования списка. Здесь произойдет проверка, не была ли
изменена дефолтная сложность, не нужно ли отобразить 2 столбца(если
девайс - планшет), и какую запросить сортировку.
3. Далее серверу направится уточненный запрос для отображения списка
по полученным параметрам.
4. После завершения запроса, вызовется метод onHttpRequestComplited,
который определит, что нужно делать по завершении запроса. В
первую очередь будет проверено, есть ли ответ от сервера. В случае
успеха создастся строка, в которую соберутся данные ответа. Далее
будут выполняться проверки на предмет того, что именно пришло в
ответе. Мы ожидаем JSON файл с объектом, содержащим массив
[“posts”], если пришел он, то выполним цикл, для каждого элемента
массива вызывающий метод парсинга. Цикл выполнится столько раз,
сколько элементов в массиве.
5. Для каждого элемента массива выполним проверку, является он
объектом (мы ожидаем конкретный объект, содержащий определенные
значения). Если это объект, то проверим каждую пару объекта ключ-
значение: если ключу элемента массива[“posts”] в i’м индексе
[“post_title”] соответствует переменная типа sting, присвоим полю
структуры TranslateInfo.post_title это значение и т.д. для всех полей и
всех элементов массива [“posts”], и наполним каталог транслейтов
сцены этими структурами.
61
Метод InitDefaultFilters устанавливает начальные значения структур
состояний фильтров, которых пять: все, новые, начатые, добавленные в
избранное, в выбранной рубрике. Эти состояния нужны для работы со
списком при выборе конкретной рубрики: заходя в раздел транслейтов
пользователь видит каталог «Все», упорядоченный по дефолту(любая
сложность, выполненные задания не скрыты, сортировка по рейтингу). Для
изменения состояния списка пользователем реализованы навигационные
панели с выпадающими списками настроек.
Рис. 21. Реализация управления списком транслейтов.
При выборе настроек пользователем осуществляется вызов методов
установления текущих сортировок и фильтров, затем список обновляется, и
пользователь получает желаемый результат. Например, при выборк
сортировки по алфавиту и активации фильтра сложности для начинающих,
список будет сокращен, путем удаления всех структур заданий, не
удовлетворяющих заданным условиям, выборка будет проходить путем
итерирования по существующему списку и сравнению нужных полей.
В итоге получим заполненный гарантированно верными данными
массив структур, пригодный для дальнейшей работы.