Allright – приложение для изучения английского языка с репетитором для детей

Разработать приложение для обучения детей с возможностью интерактивного взаимодействия между ребенком и преподавателем. Приложение должно было поддерживать видеосвязь, транслировать экран мобильного телефона учителю, иметь чат. В качестве важного функционала стоит выделить возможность учителя транслировать онлайн презентацию, где ребенок мог бы заполнять ее в реальном времени в формате текста, аудирования, раскраски картинок и просмотра видео – это все должно быть синхронизировано с рабочим кабинетом учителя. То есть, если учитель остановил или перемотал видео/аудио, то же должно произойти и со стороны клиента.

Для реализации требований по интерактивности и синхронизации контента требовалось стабильное двустороннее сокет соединение. Если же учитывать необходимость видеосвязи, то отличным решением стало использование сервиса TokBox Opentok. Поскольку клиент не является стартапом, а уже имеет налаженный бизнес, нужно было учитывать текущие технические решения и уже используемые продукты. Речь об успешно работающем веб-кабинете для ученика и учителя.

Предложенное решение включает не только функционал приложений, но и обратную совместимость с веб-кабинетами. Решение включало в себя несколько компонентов:

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

В первом случае компонент предусматривал не только рисование, но возможность удаления уже нарисованных фигур и их редактирования. По факту это была реализация небольшого графического редактора, с возможностью вставки текста, его вращения, изменения цвета или вставки изображений. Во втором случае, это была реализация кастомного веб-браузера, отображавшего одну и ту же страницу как учителю, так и ученику. Расширенный функционал заключался в том, чтобы с помощью скриптов воздействовать на html отображаемую страницу, а также получать колбеки с событиями, которые в дальнейшем передавали эти события в кабинет учителя. Для реализации чата мы использовали собственную библиотеку UI ChatKit.

Разработка началась с построения архитектуры и определения стека технологий:

• - Clean architecture
• - MVVM
• - Architecture Components
• - Dependency Injection (Dagger2)
• - Rx
• - Firebase та Play Services
• - Web Sockets (OpenTok)
• - Retrofit та Gson

Следующим этапом после построения архитектуры и реализации бизнес-логики стала настройка сокет соединения и его привязка к жизненному циклу приложения. Для реализации механизма синхронизации событий рисования и событий презентаций в веб-кабинетах использовалось готовое решение в виде JavaScript библиотеки. Она сама кодировала, раскодировала и отрисовывала все объекты, поэтому нужно было разработать механизм парсинга ивентов и их обратного кодирования.

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