Всем привет.
Наверное у каждого разработчика бывают ситуации когда жуть как припекло быстро написать какую-то нужную ему программу. Вот и у меня наступил очередной момент - мне жутко припекло написать программу для тренировки английских слов. Я изучаю английский язык, преподаватель мне дает темы, эти темы имеют какой-то словарь и есть потребность его как-то тренировать. Сразу оговорюсь что такие программы есть, но у них есть свои преимущества и недостатки. Я пользуюсь puzzle-english и lingualeo, но там словарь нельзя разбить по темам, все в одной куче. Ну а то что есть, его нельзя редактировать. Хотелось бы в любой момент создать какую-то категорию и импортировать туда список слов для изучения. Вышеперечисленные сервисы шикарные и быть может они когда-нибудь реализуют такую возможность. Но я сейчас говорю еще и как разработчик, которому интересно что-то запрограммировать. Так что поехали.
Сначала определимся, на какой платформе мы будем писать и какие инструменты использовать.
Так как нам нужно быстро и эффективно, то выберем следующие инструменты:
- CodePen - отличная платформа для разработки прототипов и почти любых фронтенд решений. Бесплатноб а также есть постоянная ссылка которой можно поделится. Этот сервис почти соответствует современным IDE и писать на нем очень легко.
- Старый добрый Bootstrap позволяет легко и быстро писать интерфейсы. Для быстрой генерации шаблонов Bootstrap воспользуемся LayoutIt.
- Я люблю современный JS и веб-технологии поэтому будем писать на ES6 используя Vue JS фреймворк. Он очень мощный и гибкий, думаю он хорошо подойдет для такой задачи.
- Нам понадобится какая нибудь библиотека для работы с LocalStorage где мы будем хранить наши данные.
- Библиотека для работы с CSV поможет нам быстро создавать списки используя импорт наших слов.
- Для лучшего восприятия при изучении было бы не плохо загружать картинку из интернета которая соответствует конкретному слову.
Распишем поведение нашей программы и как пользователь будет ею пользоваться:
- Главная страница показывает нам случайное слово, на случайном языке. О кстати программа не будет ограничивается одним языком. Это может быть французский, немецкий и другие. Однако я не буду включать туда иероглифы и прочие не латинские символы.
- У нас будет меню, которое позволит управлять словарями, добавлятьб удалять, изменять или импортировать. Также можно будет менять способы и направления тренировки, это будут либо карточки туда - обратно или ввод слова с клавиатуры. Возможно позже мы добавим восприятие на слух, но это уже будет вне рамок маленькой программы.
- Меню добавления языков, Ох даже не знаю поместиться ли все в маленький LocalStorage. Нужно поискать какую нибудь ОРМ библиотеку для баз данных основанную на LocalStorage.
Опишем этапы написания программы:
- Настроим CodePen для работы и подключим нужные библиотеки.
- Соберем шаблоны наших страниц на Layoutit и сохраним наш HTML для дальнейшей обработки
- Используем Vue роутер и подключим наши статичные шаблоны созданные ранее в Layoutit
- Напишем CRUD и импорт для наших категорий и слов
- Напишем рандомную выдачу слова из категории списка слов.
- Разобьем приложение на модули: Карточка, Список Слов, Список Категорий.
