FIREBASE COMMANDER

В первой части этого туториала мы создали среду Firebase, заполнили базу данных импортированным JSON и создали необходимые сервисы и страницы для приложения. В этой части мы создадим CRUD-приложение для наших сервисов и страниц, чтобы управлять базой данных и сервисами Storage.

Изображение – это всё

Так как мы собираемся постоянно использовать сервис Firebase Storage, стоит начать с сервиса Image. Откроем файл moveez/src/providers/image.ts и сделаем следующие изменения:

Это довольно простой сервис, который использует плагин Apache Cordova Camera, который мы импортируем таким образом:

Затем мы создаем простой метод selectImage, который использует Promise, чтобы вернуть выбранное из галереи изображение в виде URI base64.

Вы можете видеть, что формат изображения включает предустановленную длину и ширину, а также качество изображения. Эти значения могут показаться немного строгими, и мы всегда можем изменить их, добавив альтернативные значения в скобках метода selectImage. Хотя для обучения мы пока не будем этого делать.

Давайте перейдем к предварительной загрузке элементов нашего приложения.

Предварительная загрузка

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

Это можно сделать при помощи GIF или прелоадеров. Для этого мы используем Ionic Loading Component. Откроем файл moveez/src/providers/preloader.ts и внесем следующие изменения:

Всё довольно просто: всего один метод для того, чтобы показать прелоадер, и другой метод для того, чтобы спрятать активированный прелоадер. Благодаря встроенному в Ionic Loading Component мы просто применяем методы этого класса, а затем оборачиваем их нашими кастомными методами.

Управление данными

Наш финальный сервис – класс database.ts – поможет управлять всеми взаимодействиями в базе данных и загрузками в Firebase Storage (вообще нам следовало бы встроить его в собственный сервис).

Откроем файл moveez/src/providers/database.ts и внесем следующие изменения:

Здесь мы используем пакет Firebase Node и Observables (они импортируются в начале скрипта) для взаимодействия с базой данных Firebase и сервисами Storage.

Сервис Database содержит следующие методы:

  • renderMovies
  • deleteMovie
  • addToDatabase
  • updateDatabase
  • uploadImage

Названия должны быть понятными и отображать цель каждого метода, но давайте исследуем каждый из них по отдельности.

Метод renderMovies использует Observable, чтобы возвращать данные, полученные из базы films, при помощи Firebase Web API. Каждая возвращаемая запись затем повторяется с использованием цикла forEach и передается как объект в массив, который после его завершения передается в следующий метод Observable (который позволяет «наблюдать» массив по нашему сценарию и впоследствии подписывается на него):

Метод deleteMovie находит ID конкретного фильма в базе при помощи Firebase Web API и затем удаляет этот фильм. Результат этой операции возвращается при помощи Promise:

Метод addToDatabase принимает объект JavaScript со значениями, которые соотносятся с данными, которые мы хотим добавить в базу фильмов. Они затем вносятся в базу данных, используя метод push, а его результат возвращается в скрипт при помощи Promise.

Метод updateDatabase принимает два параметра:

  • id – ID фильма, который нужно обновить
  • moviesObj – значение данных, которое соответствует записи, которую нужно обновить

Метод child Firebase Web API используется для поиска соответствующей записи в базе данных фильмов, с помощью которой метод обновления используется для публикации измененных данных для этой конкретной записи. Как и ранее, для возврата результата операции используется Promise:

Метод uploadImage принимает один параметр – изображение в форме Data URL base64 (который генерируется методом selectImage сервиса Image).

Мы создаем название нашего изображения, используя комбинацию префикса фильма и метки времени. Это помогат гарантировать, что каждая запись уникальна, а существующие записи не переписываются. Затем мы загружаем изображение в сервис Firebase Storage, используя метод putString, который затем генерирует snapshot-объект, который мы возвращаем при помощи Promise:

Мы завершили программирование наших сервисов, поэтому давайте перейдем к компонентам приложения.

Возвращение домой

Наш компонент HomePage будет отображать фильмы, извлеченные из Firebase, и изображения для этих фильмов в шаблоне. Каждая запись о фильме будет отображаться в компоненте <ion-card>, который будет также содержать две кнопки с опциями редактирования фильма и удаления фильма.

Давайте начнем с изменения файла moveez/src/pages/home/home.ts:

 

В методе ionViewDidEnter мы используем аутентификацию Firebase, чтобы использовать email-адрес и пароль для входа в сервис Firebase. Мы могли бы добавить компонент формы входа в систему, но пока предустановленного email и пароля будет достаточно, просто введите те же адрес и пароль, которые вы использовали для аутентификации в Firebase.

После успешной авторизации вызывается метод loadAndParseMovies, который применяет сервис renderMovies, чтобы получить записи о фильмах из Firebase. Эти методы должны быть достаточно понятны, поэтому перейдем к HTML, необходимому для файла moveez/src/pages/home/home.ts:

 

Стоит обратить внимание, что использование async pipe в директиве ngFor, которая позволяет асинхронным данным, возвращенным Observable или Promise, обновлять интерфейс:

Modal

Финальный компонент, который мы исследуем – это Modal, который обрабатывает отображение и логику формы, в которой происходит добавление или редактирование записи фильма для базы данных Firebase. Начнем со скрипта moveez/src/pages/modals/modals.ts: