Пишем программу для тренировки английских слов по категориям. Часть 1.

Всем привет.  

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

Сначала определимся, на какой платформе мы будем писать и какие инструменты использовать.

Так как нам нужно быстро и эффективно, то выберем следующие инструменты:

1. CodePen - отличная платформа для разработки прототипов и почти любых фронтенд решений. Бесплатноб а также есть постоянная ссылка которой можно поделится. Этот сервис почти соответствует современным IDE и писать на нем очень легко.
2. Старый добрый Bootstrap позволяет легко и быстро писать интерфейсы. Для быстрой генерации шаблонов Bootstrap воспользуемся LayoutIt.
3. Я люблю современный JS и веб-технологии поэтому будем писать на ES6 используя Vue JS фреймворк. Он очень мощный и гибкий, думаю он хорошо подойдет для такой задачи.
4. Нам понадобится какая нибудь библиотека для работы с LocalStorage где мы будем хранить наши данные.
5.  Библиотека для работы с CSV поможет нам быстро создавать списки используя импорт наших слов.
6. Для лучшего восприятия при изучении было бы не плохо загружать картинку из интернета которая соответствует конкретному слову.

Распишем поведение нашей программы и как пользователь будет ею пользоваться:

1. Главная страница показывает нам случайное слово, на случайном языке. О кстати программа не будет ограничивается одним языком. Это может быть французский, немецкий и другие. Однако я не буду включать туда иероглифы и прочие не латинские символы.
2. У нас будет меню, которое позволит управлять словарями, добавлятьб удалять, изменять или импортировать. Также можно будет менять способы и направления тренировки, это будут либо карточки туда - обратно или ввод слова с клавиатуры. Возможно позже мы добавим восприятие на слух, но это уже будет вне рамок маленькой программы.
3. Меню добавления языков,  Ох даже не знаю поместиться ли все в маленький LocalStorage. Нужно поискать какую нибудь ОРМ библиотеку для баз данных  основанную на LocalStorage.

Опишем этапы написания программы:

1. Настроим CodePen для работы и подключим нужные библиотеки.
2. Соберем шаблоны наших страниц на Layoutit и сохраним наш HTML для дальнейшей обработки
3. Используем Vue роутер и подключим наши статичные шаблоны созданные ранее в Layoutit
4. Напишем CRUD и импорт для наших категорий и слов
5. Напишем рандомную выдачу слова из категории списка слов.
6. Разобьем приложение на модули: Карточка, Список Слов, Список Категорий.

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

Как решить проблему с input и ng-model в AngularJS

Недавно столкнулся с такой проблемой, заказчику нужно чтобы при редактировании поля инпут, можно было удалить полностью значение и вставить новое, а как мы знаем ng-model у нас меняется синхронно с тем что у нас в инпуте, и получается так что удаляя символы тут же меняется модель, а необходимо чтобы она менялась только при потере фокуса. Но также необходимо чтобы если что-то другое меняет эту же модель изменения сразу же применялись в в нашем инпуте. вот такая вот незадача.

Решение:

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

$scope. money = {

    inputValue : 100,

    value : 100,

    inputChanged:  function(){

     this.value = this.inputValue;

    }

}



$scope.$watch('money.value', function(newValue){

    $scope.money.inputValue = newValue;

})

<input type="text" ng-blur="money.inputChanged()" ng-model="money.inputValue">

              <button ng-click="plus(money)">+</button>

              {{money.value}}

              <button ng-click="minus(money);">-</button>

Ember тестирование

Когда я начал играться с Ember.js почти год назад, тестирируемость оставляла желать лучшего . Вы могли использовать модульное тестирование объекта без каких-либо проблем , но модульный тест только один способ получить обратную связь , когда вы создаете программный продукт . В дополнение к юнит-тестам , я хотел проверить интеграцию различных компонентов . Так как большинство людей тестирующих насыщенных приложений JavaScript , я потянулся к матери всех инструментов тестирования, Selenium.


Теперь , прежде чем я колотить его , без надлежащего введения , стоит отметить, что Selenium является отличным способом , чтобы убедиться что всё веб-приложение работает с Full production , как c базой данных так и всех ваших development зависимостей и т.д. И с точки зрения обеспечения качества , Selenium может быть мощным инструментом для команды, нуждающихся end-to-end приемочные испытаний пользовательского интерфейса.


Но с течением времени, казалось бы, небольшие тесты построенные на Selenium могут превратить скорость вашей команды, в темпе улитки . Есть один простой способ , уменьшить эту боль , во первых избегайте разработку большого приложения . Если вы разрабатываете горсть мелких веб-приложений вместо одного большого, это может помочь держать вас на плаву немного дольше, because no individual build will crush the team, as you grow.


Но даже на небольшом проекте , реальная проблема с Selenium является то, что он не является частью процесса TDD . Когда я делаю red/ green/ refactor у меня нет времени для медленной обратной связи в любой форме . Мне нужен был способ, чтобы написать модуль и интеграционные тесты, которые обеспечат быструю обратную связь, чтобы помочь мне формировать программы которые я написал в более итерационным образом . Если вы используете версию Ember.js > = RC3 , вам повезло , потому что писать модульный тест является прогулкой по частям данной статьи .

7. Используем фикстуры

Теперь мы добавим фикстуры. Фикстуры - тестовые статические данные для тестирования нашего приложения, прежде чем подключать реальные данные.

Во-первых, отредактировать  js/application.js чтобы указать, что ApplicationAdapter вашего приложения является продолжением DS.FixtureAdapter. Адаптеры ответственные за поддержание связи с источником данных для вашего приложения. Как правило, это будет API веб-сервиса, но в данном случае мы используем адаптер, предназначенный для загрузки тестовых данных:

6. СОЗДАЕМ МОДЕЛЬ ДАННЫХ

Затем мы создадим класс модели для описания Todo элементов.

Создайте файл в js/model/todo.js а затем вставьте следующий код внутри:

Todos.Todo = DS.Model.extend({
 title: DS.attr('string'),
 isCompleted: DS.attr('boolean')
});

5. ДОБАВЛЯЕМ ПЕРВЫЙ МАРШРУТ И ШАБЛОН

Далее, мы создадим приложение Ember.js, маршрут ('/'), а также переконвертируем наш статический макет в Handlebars  шаблон.

Внутри каталога js, добавьте файл приложения application.js и файл маршрутизатора router.js. Вы можете разместить эти файлы где угодно (даже просто положить весь код в один файл), но это руководство предполагает, что вы разделили их на  файлы и назвали их, как указано.


Внутри js/application.js добавьте следующий код:

window.Todos = Ember.Application.create();

Это создаст новый экземпляр Ember.Application и сделать его доступным в качестве переменной имени Todos в JavaScript среде браузера.
Внутри JS / router.js добавьте следующий код:

Todos.Router.map(function() {
 this.resource('todos', { path: '/' });
});

4. ПОЛУЧЕНИЕ EMBER.JS ЗАВИСИМОСТЕЙ

TodoMVC имеет следующие зависимости:

jQuery
Handlebars
Ember.js 1.3
Ember Data 1.0 beta

Для этого примера, все эти ресурсы должны храниться в папке js/lib, расположенных в том же месте, index.html. Обновите index.html загрузить эти файлы, помещая теги <script> непосредственно перед закрытием </ BODY> тег в следующем порядке: