Интеграция Firebase в Ionic-приложение при помощи AngularFire2

От создания масштабируемых NoSQL баз данных до хранения файлов, отправки push-уведомлений и аналитики использования – Firebase прекрасный выбор для разработчиков, которые ищут решение для создания мобильных приложений.

В этом уроке мы сосредоточимся исключительно на базах данных Firebase и создадим очень простое Ionic-приложение для платформы iOS, которое позволяет нам выполнять операции CRUD (Create, Read, Update & Delete), предоставляемые пакетом AngularFire2.

Наше приложение будет управлять фильмами. У них есть такие параметры:

• Название фильма
• Классификация (возрастной рейтинг)
• Жанр
• Актеры/актрисы
• Аннотация
• Год выпуска

Ничего сложного, но достаточно для того, чтобы обеспечить нам работу с Firebase и AngularFire2.

Мы также будем использовать следующие функции Ionic/Angular:

• Formbuilder API
• UI-компоненты (всплывающие окна, карточки и кнопки)

К концу урока мы создадим такое приложение:

Теперь, когда мы знаем, чего стоит ожидать, давайте создадим себе среду в Firebase…

Работа с Firebase

Зайдите на сайт Firebase, и если вы уже зарегистрированы, зайдите в свой аккаунт (а если нет, то создайте его, это бесплатно!).

Затем вы увидите все ваши существующие проекты, которые выглядят примерно так:

Давайте создадим новый проект, нажав кнопку CREATE NEW PROJECT. Появится всплывающее окно, в котором нужно будет ввести название проекта и выбрать страну/регион.

Как только проект будет создан, вы можете выбрать, как добавить Firebase в ваше приложение, выбрав одну из опций:

• Добавить Firebase в ваше iOS-приложение
• Добавить Firebase в ваше Android-приложение
• Добавить Firebase в ваше веб-приложение

Выберите опцию Add Firebase to your web app, так как это даст нам необходимые конфигурационные значения для интеграции Firebase в наше Ionic-приложение, не зависящее от платформы (т.е. веб, iOS или Android):

В всплывающем окне скопируйте следующие конфигурационные ключи и значения:

• apiKey
• authDomain
• databaseURL
• storageBucket
• messagingSenderId

Скопируйте, но не меняйте эти значения, так как вы не сможете соединить свое приложение с Firebase без них:

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

Создание базы данных

Базу данных в Firebase можно создать двумя способами:

• Ручной ввод значений и добавление ключей через консоль базы данных Firebase
• Импорт файла JSON с предварительно структурированным и заполненным набором ключей и значений, которые будут представлять наш базу данных

Я всегда выбираю второй подход, так как это более быстро, просто, легко и эффективно, если речь идет об использовании баз Firebase/NoSQL.

В вашем любимом редакторе кода создайте следующую JSON-структуру:

Она содержит три записи о фильмах с вложенными данными об актерах и жанрах.

Я выбрал вложенную структуру данных вместо разделения узлов актеров и жанров на отдельные коллекции, так как это более практично при использовании AngularFire2 (мы обсудим причины этого позже).

Убедитесь, что сохранили JSON-файл как database.json (мы используем его, чтобы наполнить базу данных Firebase).

Вернитесь в консоль Firebase, выберите опцию Database из меню слева и во вкладке Data выберите опцию Import JSON:

Выберите файл database.json, который вы сохранили несколько моментов назад, и импортируйте его в базу данных:

Как было указано выше, мы могли бы создать базу данных вручную внутри консоли Firebase Database, но импорт заполненной JSON-структуры – это более быстрый и эффективный способ создания необходимых данных для проекта.

Как только база данных заполнена, она будет выглядеть следующим образом (Я позволил себе развернуть конечный узел в базе данных, чтобы показать ключи/значения, содержащиеся внутри):

Базы данных по существу представляют собой не что иное, как JSON-деревья в Firebase и их масштабировать гораздо проще, чем традиционные SQL-структуры. Тем не менее, это требует понимания таких методов, как денормализация, и я бы посоветовал любому разработчику, который еще не знаком с Firebase, прочитать этот документ, касающийся структурирования базы данных.

Когда база данных заполнена, остался один последний шаг, который касается конфигурации правил безопасности для доступа.

Во вкладке Rules панели Database сделайте следующие изменения:

Здесь мы просто прокомментируем правила по умолчанию, в дублированных правилах установите для ключей чтения и записи НЕ требовать аутентификацию.

Мы могли, конечно, оставить такие правила по умолчанию:

 

А затем использовать API аутентификации AngularFire2 для получения доступа к базе данных (после настройки метода аутентификации, например, через e-mail и пароль, в разделе Authentication аккаунта Firebase).

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

Теперь давайте исследуем AngularFire2.

AngularFire2

Благодаря использованию Ionic фреймворка Angular, мы можем использовать множество node пакетов в наших проектах.

AngularFire2 является одним из этих пакетов и предоставляет разработчикам возможность интегрировать Firebase в свои приложения со следующими функциями:

• Простой и удобный API
• Методы аутентификации для базы данных
• Связь в режиме реального времени

Последняя, но самая главная функция в AngularFire2 – обновление UI приложения в реальном времени, чтобы отражать любые изменения в данных Firebase.

Это, на самом деле, очень полезно, так как это означает, что нам не нужно внедрять логику, чтобы научить пользовательский интерфейс приложения обновлять себя и осуществлять эти изменения – AngularFire2 просто делает это за нас в фоновом режиме.

Всё это звучит отлично, но у пакета есть серьезные ограничения:

• Нельзя загружать изображения в хранилище Firebase
• Выполнение запросов в нескольких коллекциях (аналогично SQL-реляционной базе данных) невозможно

Всё это делает AngularFire2, мягко говоря, довольно ограниченной для применения в крупных Ionic-проектах, что печально, потому что пакет просто внедрить и он легко синхронизирует изменения UI с обновлениями данных Firebase.

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

Создание проекта

Со стороны сервера всё настроено, поэтому приступим к созданию проекта Ionic.

Откройте окно командной строки (т.е. терминал, если вы используете Mac OS X, или командную строку, если находитесь на платформе Windows), перейдите в нужный системный каталог и выполните следующую команду для создания проекта с именем moveez:

Как только проект будет создан, внесите изменения в него:

И установите следующее:

Мы начинаем с установки необходимых определений типов, чтобы компилятор проекта мог работать с пакетами Firebase и AngularFire2 (которые потом и устанавливаются – в следующей же строке).

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

Теперь создадим root-модуль для приложения Moveez.

Рутинг для Moveez

Как и со всеми вещами Ionic или Angular, мы должны сделать так, чтобы любые модули, необходимые для функционирования нашего приложения, были доступны root-модулю во время начальной загрузки/инициализации (а также, чтобы избежать этих полезных, но раздражающих сообщений об ошибках от транспилера при создании нашего приложения только для того, чтобы найти что-то, немного пошло не так в процессе).

Откройте файл moveez/src/app/app.module.ts и сделайте несколько поправок:

• Импортируйте AngularFireModule
• Добавьте объект конфигурации Firebase

Всё должно выглядеть следующим образом (не забудьте заменить API-KEY-IS-ENTERED-HERE, YOUR-PROJECT-NAME-HERE, YOUR-DATABASE-NAME-HERE, YOUR-STORAGE-BUCKET-NAME-HERE AND YOUR-MESSAGING-SENDER-ID-HERE настоящими значениями из конфигурации Add Firebase to your Web App, которые вы скопировали и сохранили ранее):

Итого

Во время этого урока мы познакомились с созданием базы данных Firebase, создали базовый каркас проекта Ionic, установили необходимые пакеты и определения типов и настроили наш root-модуль Ionic. Может показаться, что мы сделали немного, но мы настроили серверную сторону нашего проекта и создали основу мобильного приложения.

Продолжение во второй части!