Lingua School - приложение для изучения иностранных слов с методикой интервального повторения, отслеживанием индивидуального прогресса и мини-играми.

Демо приложения доступно по ссылке
Игры доступны:

• Аудиовызов
• Puzzle
• Savanna
• Speak It
• Sprint
• Match It

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

Для сборки и запуска проекта на ПК требуется установленный node.jsдоступен для скачивания: Необходимо скачать проект из репозитория - воспользоваться кнопкой Clone or download на странице репозитория.

Полученный архив распаковать в пустой папке, открыть терминал и перейти в папку с проектом. В терминале набрать: npm i

Дождаться завершения скачивания используемых модулей, убедиться в отсутствии ошибок. После этого проект готов к запуску.

Набрать команду: npm start Дождаться запуска проекта - откроется в окне браузера по-умолчанию. После запуска на локальном сервере, проект будет доступен по адресу: http://localhost:3000

Проект содержит блок юнит-тестов, которые предназначены для проверки общего функционала, связанного с обменом данными между приложением и RestAPI. Для запуска тестов набрать команду: npm test

В папку dist происходит сборка проекта. Команда для сборки: npm run build

RS Lang – приложение для изучения иностранных слов с методикой интервального повторения, отслеживанием индивидуального прогресса и мини-играми.

• большое количество настроек, благодаря которым пользователь может изменять внешний вид и некоторые детали работы приложения в соответствии с собственными предпочтениями
• для заучивания иностранных слов используется методика интервального повторения
• собирается и предоставляется пользователю статистика изучения слов, как краткосрочная – по результатам каждой тренировки, так и долгосрочная – за весь период обучения
• для отслеживания прогресса и геймификации обучения используются мини-игры

• задание творческое. Оно не сводится к написанию кода, но также предполагает аналитическую работу по поиску механизмов и путей решения поставленных задач, достижения ожидаемых результатов.
• работа ведётся в группах. Во-первых, потому что задач много, а времени мало, и чтобы всё успеть, нужно действовать сообща. Во-вторых, потому что современная разработка ведётся в командах, и необходимо учиться взаимодействовать с другими разработчиками, распределять обязанности, нести ответственность за свой участок работы.
• частью задания является создание промо-страницы приложения, в которой презентуются его особенности и преимущества и размещается короткое (5-7 минут) видео с демонстрацией работы приложения.
• в предложенный в задании функционал можно вносить изменения и дополнения, если они позволяют улучшить качество приложения с точки зрения потенциального пользователя

https://docs.rs.school/#/final-task

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

• заучивание иностранных слов и сбор статистики – приложение Lingvist. Сайт приложения https://lingvist.com/, бесплатный ознакомительный период – 7 дней.

  Интересные факты про Lingvist

  История появления приложения Lingvist довольно занимательная.

  Все началось с того, что доктор физических наук Майт Мюнтель перевёлся в Европейский центр ядерных исследований (CERN) и оказался во франкоязычном коллективе. Срочно понадобилось знание языка, и он придумал и создал для себя программу, которая выполняла бы роль персонального репетитора. За два месяца он достиг своей цели. Но на этом история созданного им приложения не заканчивается.

  Lingvist был назван лучшим стартапом 2014 года и получил грант в 1 млн евро от инвестиционного фонда ЕС. Считается, что приложение позволяет значительно ускорить изучение языка благодаря тому, что постоянно отслеживает прогресс и не заставляет учить уже известные пользователю слова. Сейчас это большой сложный высоконагруженный проект с многомиллионными инвестициями. А началось всё с небольшого приложения, которое создал один человек, даже не программист, чтобы решить возникшую перед ним проблему.

• методика интервального повторения – программа Anki https://ankiweb.net/shared/info/317970103

• мини-игры – приложение Lingualeo https://lingualeo.com/ru/training.
  Вам понадобится доступ к Lingualeo Premium. Бесплатный доступ к Lingualeo Premium на один день откроется после 5 дней тренировки с выполнением дневной нормы по набранным баллам.

• страница авторизации
• главная страница приложения*
• страница статистики
• словарь с вкладками "Изучаемые слова", "Сложные слова", "Удалённые слова"
• мини-игры "SpeakIt", "English puzzle", "Саванна", "Аудиовызов", "Спринт", "Своя игра"
• промо-страница приложения
• страница "О команде"

* Главная страница - это основная часть приложения, в которой происходит изучение новых слов. Её прототипами являются приложение Lingvist и программа Anki.

Коллекция "4000 essential english words". Коллекция содержит 3600 часто употребляемых английских слов, изучение которых вам необходимо организовать. Слова в коллекции отсортированы от более простых и известных до более сложных. Первые 400 наиболее часто употребляемых слов в коллекцию не вошли. Считается, что это базовый запас взрослого человека, оставшийся от школы/вуза или предыдущих попыток изучения языка. Слова разделены на группы по 20 слов. Вся коллекция разбита на шесть частей по 600 слов в каждой.

• для разработки приложения тим лид команды в своём аккаунте github создаёт приватный репозиторий, коллаборантами в который приглашает всех участников своей команды
• особенности командной работы с репозиторием описаны в Документации курса
• название репозитория: rslang, название ветки, в которой ведётся разработка - develop, ветка master пустая, содержит только README.md
• история коммитов должна отображать процесс разработки приложения. Требования к коммитам
• демо-версия приложения размещается на https://www.netlify.com/, либо на другом подобном хостинге
• после окончания разработки или при наступлении дедлайна, создайте и замержите pull request из ветки develop в ветку master. Требования к pull request

• работа приложения проверяется в браузере Google Chrome последней версии
• разрешается использовать jQuery только в качесте подключаемой зависимости для UI библиотек. Использование jQuery в основном коде приложения не допускается.
• использование Angular / React / Vue, а также других JS библиотек (кроме JQuery) только с согласия ментора и всех участников команды
• можно использовать bootstrap, css фреймворки, html и css препроцессоры

• вёрстка адаптивная, приложение корректно отображается как на компьютерах, так и на мобильных устройствах
• минималистичный дизайн (за исключением мини-игр), продуманность элементов, логичная и понятная структура приложения, ничего лишнего и всё под рукой
• меню и информационные панели выдвижные, удобная навигация, интуитивно понятные настройки
• единство стилей всех страниц приложения - одинаковые шрифты, стили кнопок, отступы, одинаковые элементы на всех страницах приложения имеют одинаковый внешний вид и расположение. Цвет элементов и фоновые изображения могут отличаться. В этом случае цвета используются из одной палитры, а фоновые изображения из одной коллекции.

Для анализа предметной области были изучены игры прототипы и оригинальная методика интервального повторения. Проведена оценка имеющегося ТЗ и функциональных возможностей серверного API, предоставленного для проекта. Предметная область предполагает возможность регистрации пользователя в приложении для ведения и учета результатов обучения, составления словаря и доступа к мини-играм. В связи с ограничением области хранения статистики, учет результатов предполагается вести в процентном соотношении для игр (количество правильных и неверных ответов), и количественном для метода интервального повторения (количество изученных слов за день). Также, для обучаемого составляется дневной план - это тоже вошло в границы проекта. Краткосрочная статистика для игр не хранится - отображается только по окончанию игры. Краткосрочная статистика для тренировки хранится на сервере - это позволит продолжить обучение с другого устройства и разбить дневную тренировку на части, не теряя дневной прогресс.

Диаграмма кейсов отображает возможности пользователя при взаимодействии с приложением. Для доступа к статистике и тренировке с карточками требуется авторизация пользователя в системе. Доступ к мини-играм открыт в двух вариантах: с авторизацией и хранением статистики, без авторизации и без хранения долгосрочной статистики. Для доступа к промо странице и странице "о нас" авторизация не требуется.

Для реализации незваисимости каждого прилеожения был составлен конфигурационный файл webpack - конфигурация предполагает разделение проекта на независимые части и хранение их в отдельных папках

--host - главная страница приложения
   |
   | - savanna
   |
   ... other games
   |
   | - promo
   |
   | - about us

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

Для объединения работы участников с серверной частью приложения был разработан контроллер доступа к данным. Все запросы от игр и обучения направлены на контроллер. Контроллер представляет собой цепочки обязанностей, которые необходимо выполнить для получения требуемых данных. Также контроллер отслеживает жизнеспособность токена и поддерживает работу с системой уведомления об ошибках, возникших при работе. Цепочки обязанностей представляют упрощение для разработчиков при доступе к данным. Для получения данных о пользователе разработчику достаточно сделать запрос getUser() - соответствующая цепочка проверит наличие токена в системе, ответ от сервера и годность токена, при необходимости активирует запуск окна для входа в систему (или регистрации пользователя), произведет вход в систему, прочитает данные с сервера и вернёт их, завершив цепочку.

Диаграмма последовательности для случая "срок жизни токена истек"

Срок жизни токена ограничен 4 часами - предусмотрены ситуации, при которых необходимо перезагрузить страницу чтобы получить новую авторизацию на сервере. В таких случаях пользователь получает уведомление. Уведомления, как и форма входа/регистрации взаимодействуют через менеджер состояний и абсолютно прозрачны для разработчиков игр. В качестве менеджера состояний выбран effector.

Синхронизация вкладок для событий Вход пользователя в систему и Выход пользователя основана на прослушивании localStorage на предмет изменения флага isLogin - такой подход позволяет всем играм своевременно ограничивать доступ к данным пользователя или наоборот, открывать доступ. Для предупреждения пользователя о возможной потере данных, если он покинет активную игру, используется системное предупреждение от события onBeforeUnload.

Главная страница позволяет перейти в режим настроек и задать индивидуальный вид карточек, выбрать дневной план для обучения, получить статистику, начать/продолжить тренировку, выбрать мини-игру. Страница содержит как ссылки для открытия новых вкладок, так и часть функционала использует замену DOM элементов в текущей страницу.

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

Для обеспечения контроля качества использованы программные средства (linter, prettier) и разделение разработки на разные ветки используя систему контроля версий Git. Основное, рабочее приложение располагается в ветке develop, в которое участники разработки делают pull Request. Правило для проверки PR: обязателная проверка тим-лидом и двумя участниками проекта. Для контроллера данных составлен набор юнит тестов.

• chart - построение графиков статистики
• effector - менеджер состояний для работы с уведмлениями
• jquery -
• materialize-css - общая стилистика приложения
• moment - форматирование даты
• node-fetch - тестирование fetch
• swiper - смена карточек в тренировке

RS School Team #22

• Юлия Плеханова - Главная страница, Промо, игра Puzzle, Статистика, About Us, игра Карточки
• Анастасия Сидорович - игра Speak-it, игра Match It!
• Андрей Агурейкин - игра Sprint, словарь пользователя
• Владимир Кормаков - игра Savanna
• Сергей Харитонов - игра Аудиовызов
• Илья Локалин - проектирование и конфигурация общей архитектуры, контроллер доступа к данным, авторизация и системные уведомления, тим лид.
• Дмитрий Фоломкин - куратор проекта