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

08.08.2017Статьи

От создания масштабируемых 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-структуру:

{
   "films" : [
      {
      	 "title" : "John Wick",
      	 "summary": "Ex-assassin John Wick takes down the Russian Mafia in New York",
      	 "date" : "2014",
      	 "duration": "97 minutes",
      	 "rating": "15",
      	 "cover" : "none",
      	 "actors" : [
      	    {
      	       "name" : "Keanu Reeves"
      	    },
      	    {
      	       "name" : "Willem Dafoe"
      	    },
      	    {
      	       "name" : "Michael Nyqvist"
      	    },
      	    {
      	       "name" : "Ian McShane"
      	    },
      	    {
      	       "name" : "John Leguizamo"
      	    },
      	    {
      	       "name" : "Bridget Moynahan"
      	    },
      	    {
      	       "name" : "Alfie Allen"
      	    },
      	    {
      	       "name" : "Adrianne Palicki"
      	    }
      	 ],
      	 "genres" : [
      	    {
      	       "name" : "Action"
      	    },
      	    {
      	       "name" : "Thriller"
      	    }
      	 ]
      },
      {
         "title" : "Gladiator",
         "summary": "The general who became a slave, the slave who became a gladiator, the gladiator who defied an empire",
         "date" : "2000",
         "duration": "2hr 29 minutes",
         "rating": "15",
         "cover" : "none",
         "actors" : [
            {
               "name" : "Russell Crowe"
            },
            {
               "name" : "Oliver Reed"
            },
            {
               "name" : "Joaquin Phoenix"
            },
            {
               "name" : "Connie Nielsen"
            },
            {
               "name" : "Ralf Moeller"
            }
         ],
         "genres" : [
            {
               "name" : "Action"
            },
            {
               "name" : "Historical"
            }
         ]
      },
      {
         "title" : "Catch me if you can",
         "summary": "Frank Abagnale Jr, master of deception",
         "date" : "2002",
         "duration": "135 minutes",
         "rating": "12",
         "cover" : "none",
         "actors" : [
            {
               "name" : "Tom Hanks"
            },
            {
               "name" : "Leonardo Dicaprio"
            },
            {
               "name" : "Christopher Walken"
            }
         ],
         "genres" : [
            {
               "name" : "Action"
            },
            {
               "name" : "Thriller"
            }
         ]
      }
   ]
}

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

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

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

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

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

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

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

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

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

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

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

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

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

А затем использовать 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:

ionic start moveez blank

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

cd moveez

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

npm install -g typings
npm install angularfire2 firebase --save

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

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

ionic g page modals

Теперь создадим 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, которые вы скопировали и сохранили ранее):

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { AngularFireModule } from 'angularfire2';


export const firebaseConfig = {
  apiKey            : 'API-KEY-IS-ENTERED-HERE',
  authDomain        : 'https://console.firebase.google.com/project/YOUR-PROJECT-NAME-HERE',
  databaseURL       : 'https://YOUR-DATABASE-NAME-HERE.firebaseio.com/',
  storageBucket     : 'gs://YOUR-STORAGE-BUCKET-NAME-HERE.appspot.com',
  messagingSenderId : 'YOUR-MESSAGING-SENDER-ID-HERE'
};


@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    BrowserModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Итого

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

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

: Ionic, база данных

Предыдущая запись Firebase на Android: исследуем динамические ссылки