Использование Ember Data с Firebase

Одно из важнейших преимуществ при оценке клиентских JavaScript-фреймворков — это простота доступа к данным. Ember.js делает получение и обработку данных легким благодаря библиотеке Ember Data. Ember Data предоставляет ORM-функциональность, которая работает с любым бэкендом, используя адаптеры, сопоставляющие операции над объектами модели на фронтенде со слоем сохранения данных в бэкенде.

Существует множество доступных адаптеров для Ember Data. Один из самых простых в использовании — Firebase. С Firebase нет необходимости настраивать базу данных, поэтому вы можете очень быстро приступить к разработке своего приложения. Изменения в данных Firebase мгновенно обновляются в вашем приложении на всех клиентах, просматривающих эти данные. В качестве дополнительного бонуса, аддон для использования Firebase с Ember Data чрезвычайно прост в работе. В этой статье мы создадим список газировки для вымышленного онлайн-продавца газировки, используя Firebase и Ember Data.

Если вы только начинаете работать с Ember.js, перейдите по этой записи в блоге и установите все необходимое. Я подожду здесь, пока вы это сделаете, и выпью газировки…

Данные в приложениях, использующих Ember Data, представлены объектами модели. Эти объекты модели соответствуют структурам данных в бэкенде приложения. В нашем приложении объекты модели будут представлять различные бренды газировки. Давайте посмотрим, как это работает, создав новое приложение Ember с помощью Ember CLI и перейдя в каталог нового проекта:

Измените сгенерированный файл `bower.json`, чтобы версии Ember и Ember Data были 2.0.0, поскольку Ember CLI еще не выпустил версию 2.0:

Теперь давайте сгенерируем объект модели для представления газировки. Выполните следующую команду Ember CLI из терминала:

Ember CLI создает объект модели в `app/models/soda.js`, а также файл модульного тестирования для объекта `soda` в `tests/unit/models/soda-test.js`. Откройте `app/models/soda.js` и измените его, чтобы он содержал свойства, которые мы будем хранить для каждой газировки в нашей системе:

Наши газировки будут иметь название бренда (например, Coca-Cola), название газировки (например, Diet Coke) и URL изображения. Свойства в Ember Data указываются с помощью вызова `DS.attr()`. По умолчанию типы свойств автоматически соответствуют тому, что предоставляется бэкенд-сервером. Для явного контроля можно указать тип данных для свойства. Теперь, когда у нас есть объект модели, подготовим Firebase для хранения нашей газировки.

Зайдите на Firebase и создайте бесплатную учетную запись, если у вас ее еще нет. Войдя в систему, создайте новое приложение Firebase и дайте ему любое имя приложения и URL приложения, которые вы хотите. Просто не забудьте записать URL приложения, так как он нам понадобится при настройке аддона Firebase для Ember Data.

Вот и все. Нам не нужно создавать таблицы, схему или даже настраивать что-либо еще в Firebase. Все будет обрабатываться нашим приложением Ember. Теперь, когда Firebase настроен, посмотрим, как использовать его с Ember Data.

Ember CLI предоставляет простой способ добавлять библиотеки, созданные сообществом, в ваши приложения. Сайт Ember Addons агрегирует все доступные аддоны и предоставляет поле поиска, чтобы помочь вам найти то, что вы ищете. Аддон, который мы будем использовать для доступа к Firebase, называется EmberFire. Он был создан и поддерживается инженерами Firebase. Ветка выпуска EmberFire еще не обновлена для поддержки Ember Data 2.0, но недавние коммиты команды Firebase привели ее в соответствие с Ember 2.0. Давайте установим EmberFire из коммита d280d89, используя следующую команду Ember CLI:

Эта команда создает файл в `app/adapters/application.js`. Загляните в этот файл, вы должны увидеть следующее:

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

Есть еще одна вещь, которую нам нужно настроить, прежде чем мы сможем использовать этот адаптер, и если вы внимательны, вы, вероятно, увидели ее в конце установки аддона. Мы не указали нашему приложению Ember, где найти наше приложение Firebase. Обновите `config/environment.js`, чтобы установить URL Firebase на URL созданного нами ранее приложения Firebase:

На этом этапе мы готовы начать создавать объекты Ember Data и сохранять их в Firebase. Однако давайте добавим еще одну вещь в наш арсенал, чтобы облегчить это.

Ember Inspector — это инструмент для отладки приложений Ember, который работает в Chrome и Firefox. Это бесценный инструмент для инспекции всех аспектов приложения Ember, включая, помимо прочего, дерево представлений, маршруты и данные, загруженные Ember Data. Установите версию для Chrome или Firefox в зависимости от вашего браузера. Они функционально эквивалентны, так что это вопрос вкуса. Перейдите в терминал и запустите проект sodashop с помощью `ember server`. Перейдите по адресу `http://localhost:4200` и откройте инструменты разработчика в вашем браузере. Вы должны увидеть новую вкладку с надписью «Ember»:

Мы будем использовать этот Ember Inspector для доступа к объектам Ember во время выполнения приложения для их манипулирования. Это позволит нам добавлять данные в Firebase из консоли JavaScript в браузере.

Объектом, ответственным за настройку моделей для конкретного шаблона или компонента, является маршрут. На данном этапе приложения мы еще не настроили никаких маршрутов, но если вы нажмете на узел Routes в Ember Inspector, вы увидите, что у нас уже есть несколько маршрутов, созданных автоматически Ember. Мы можем использовать один из этих маршрутов из консоли JavaScript для добавления данных в нашу базу данных газировки. Нажмите на ссылку `>$E` рядом с маршрутом index в Ember Inspector:

Это дает нам доступ к маршруту index с помощью переменной $E в консоли. Мы будем использовать $E для доступа к свойству `store` в маршруте index, которое представляет хранилище Ember Data. Оно доступно из всех объектов маршрута и контроллера в вашем приложении. Мы используем это хранилище для запроса и создания данных. Давайте создадим запись газировки, выполнив следующий код в консоли JavaScript:

Теперь мы можем указать свойства для нашей только что созданной газировки, продолжив в консоли с:

Мы еще не сохранили нашу газировку в Firebase. Давайте сделаем это с помощью еще одной команды из консоли JavaScript:

Посмотрите на ваше приложение Firebase. Данные должны быть там. Интересно то, что в Firebase изменения обновляются мгновенно. Мало того, что они обновляются мгновенно, так еще и мгновенно обновляются в каждом экземпляре приложения, использующего эти данные! Чтобы увидеть это в действии в нашем приложении, нам нужно будет отобразить список газировки.

Первое, что нам нужно создать, чтобы увидеть нашу газировку на экране, — это маршрут для напитков. Давайте используем Ember CLI для генерации маршрута `sodas`:

В выделенной строке мы используем хранилище Ember Data для поиска всех наших объектов газировки из Firebase и возвращаем их в качестве модели для нашего маршрута `sodas`. Теперь мы можем перебирать объекты моделей газировки в `app/templates/sodas.hbs`. Пока мы будем отображать только название газировки:

Перейдите в `http://localhost:4200/sodas` в вашем браузере, и вы должны увидеть список газировки (пока только с одной газировкой) под заголовком «Welcome to Ember».

Вернитесь в Firebase, перейдите к элементу «Bacon Soda» и измените название газировки. Зафиксируйте изменение, нажав `Enter`. После фиксации изменения вы должны увидеть, как название газировки мгновенно обновится в вашем приложении Ember:

В этой статье мы создали список газировки на основе Firebase, используя Ember.js 2.0, Firebase и Ember Data. Мы увидели, как изменения в наборе данных Firebase обновляются в реальном времени в нашем приложении Ember, и как изменения из приложения Ember могут мгновенно сохраняться в Firebase. Вот еще несколько вещей, которые вы можете попробовать самостоятельно:

— Создайте другие объекты модели (места, отзывы и т. д.).

— Определите отношения для ваших данных (например, у газировки могут быть отзывы).

— Изучите другие доступные адаптеры для Ember Data.

— Создайте компоненты Ember – подробнее об этом в этой статье.

Надеюсь, вам нравится создавать приложения Ember.js. Я очень рад видеть, что вы создаете с его помощью, поэтому, пожалуйста, поделитесь своими работами. Вы можете найти меня в Twitter @brentschooley или в Rocket Fizz в Филадельфии, пьющим Bacon Soda.