Shell for Study - оболочка для образовательного контента
Недавно я начал разрабатывать очередной pet-проект под названием Shell for Study. Изначальной целью было создать статическое Angular-приложение со списками слов для заучивания, вспомнить некоторые библиотеки, с которыми я сейчас не работаю, да и просто пописать код для удовольствия. Но в какой-то момент я увлекся и вышел за рамки простого словаря, начав разрабатывать полноценную базу знаний. В этой заметке я расскажу, что я хотел сделать, что у меня уже получилось и как я планирую развивать проект дальше.
Изначальная цель
С самого начала я планировал сделать Angular-приложение, которое бы просто показывало список английских слов в виде таблицы и карточек. Для создания UI я решил использовать библиотеку Angular Material, так как она содержит все необходимые компоненты и в ней легко настраивать палитру цветов. Важным требованием также была возможность запускать приложение без доступа к интернету. Разработчики фреймворка Angular уже обо всем позаботились, поэтому я просто добавил поддержку ServiceWorker. Как следствие, появилась возможность «установить» приложение на смартфон. Иконки для программы я нарисовал в Figma, это заняло минут 15, не больше.
Для стандартизации данных я создал иерархическую структуру словаря, включающую разделы, подразделы и списки. Каждое слово или запись имеет заголовок, а также перевод на русский и определение на английском. Эта структура данных дает возможность добавлять не только слова, но и более сложные конструкции: крылатые фразы, устойчивые выражения и т.д.
Развитие идеи
Дальше я начал двигаться в сторону информации, не касающейся изучения иностранных языков, и, помимо словаря «слово–значение», добавил еще один – «глоссарий». В качестве примера я записал в него различные определения из мира IT, например «ООП» и «функциональное программирование». В этот момент мне понадобилась поддержка html-разметки: заголовков, списков, ссылок в словарных записях, т.д. Сначала я подумал, что стоит добавить поддержку тегов, но это небезопасно – нужно прогонять записи через модуль Sanitizer. Другой минус – html-разметка в строках сделает записи достаточно громоздкими. Немного подумав, я решил использовать привычный markdown-синтаксис и парсить строки библиотекой ngx-markdown. Получилось достаточно элегантное и легко модифицируемое решение, не нагруженное лишней логикой
Параллельно с этим я думал о том, как можно представить данные на экране, и пришел к пяти вариантам:
- Таблица.
- Список карточек.
- Одна карточка на экране, которая по свайпу или нажатию кнопки переключается на следующую.
- Флеш карточка - показывается только слово, но по нажатию кнопки можно увидеть значение.
- В виде статей - для глоссария, чтобы было удобно читать большие объемы текста.
Интерграция Free Dictionary API и упражнение Spell Сhecking
Моя преподавательница английского языка посоветовала мне обратить внимание на упражнение Spell Checking. Суть его заключается в том, что ученик должен прослушать слово, напечатать его в поле и проверить правильность. Я поискал в интернете существующие реализации, но ни одна из них меня не устроила, поэтому я решил сделать свою.
Для этого мне нужно было найти какой-то бесплатный словарь с api, чтобы без проблем интегрироваться с ним. При этом нужно было, чтобы он содержал аудио с произношением слов. Мой выбор пал на Free Dictionary Api, который вполне соответствует моим нуждам. В нем содержится не такая большая база слов, как, например, в Oxford Learner's Dictionaries или Merriam-Webster, но это компенсируется легкостью интеграции. Перед реализацией логики для упражнения Spell Checking я написал UI для Free Dictionary. Там можно набрать в поисковую строку слово и получить его значения, синонимы, антонимы, примеры употребления и произношения. На основе получившейся интеграции я и реализовал упражнение.
Что в итоге
Сейчас проект Shell for Study находится в процессе разработки. Он по-прежнему представляет собой статическое Angular-приложение, но уже понятно, что нужно писать для него сервер. Кодовая база также далека от совершенства, так как я сам не знал, что хочу получить, и действовал стихийно. Про unit-тесты даже не стоит говорить: их нет.
Несмотря на отсутствие четкого планирования и сумбурность, мне удалось реализовать неплохого помощника в изучении и повторении информации. Сегодня у Shell for Study есть:
- Возможность установки на смартфон или в браузер для работы оффлайн.
- Пять представлений для информации.
- Поддержку стилизации записей.
- Интеграцию с внешним Free Dictionary Api.
- Упражнение Spell checking.
- Поддержку подсветки исходного кода в записях.
Планы по развитию
Так как проект Shell for Study побочный и я занимаюсь им в свободное время, планы постоянно меняются. Ключевая проблема – в том, что это всего лишь статическое Angular-приложение. А это значит, что кроме меня им полноценно пользоваться никто не может: нельзя авторизоваться, создать свои словари, поделиться ими и т.д. Поэтому первым делом я хочу реализовать сервер с базой данных и исправить эти недостатки. Тогда проектом сможет пользоваться кто угодно, плюс возможно будет организовать сбор обратной связи.
Вторая проблема – отсутствие явного фокуса проекта как продукта. Это можно исправить только путем сбора данных. На это у меня вряд ли будет время, поэтому, скорее всего, Shell for Study будет развиваться нестабильно и, как следствие, я не смогу доставлять обновления по расписанию.
В конце я бы хотел обратиться ко всем, кто хочет узнать больше о Shell for Study и, возможно, поучаствовать в его развитии. Если у вас есть желание, то заходите в этот телеграм-чат, там можно будет пообщаться. Если вам просто понравилась эта статья и вы хотите следить за обновлениями, то подписывайтесь на мои социальные сети. Всем спасибо!