Firebase и Ionic. Настройка и операции CRUD

Этот пост пошагово расскажет, как реализовать CRUD — операции на Angular 5 для Firebase — проекта. Итак, давайте продемонстрируем Create Read Update and Delete операции на Angular 5 проекта.

О Firebase

Firebase — это NoSQL — база данных, которая продвигается в облачном хранении информации, поэтому нет необходимости закупать отдельный сервер для проекта, учитывая, что бесплатная версия вполне хватает для мелких проектов или проектов для демонстративной работы. База данных Firebase Realtime — это база данных NoSQL, размещенная в облаке. С его помощью вы храните и синхронизируете данные между пользователями в режиме реального времени.

Что включает в себя Firebase:

  • Realtime Database — облачная база данных для хранения данных в JSON формате;
  • Cloud Storage — облачное место для хранения файлов;
  • Hosting — хостинг для WEB — сайта;
  • Performance Monitoring — инструменты мониторинга;
  • Authentication — система аутинтификации через различные платформы провайдеров;
  • Crashlytics — система мониторинга багов и ошибок;
  • Test Lab for Android — лаборотория для тестирования устройств на системе Androidж
  • Cloud Firestore — база данных для хранения, получения и синхронизации данных и файлов в глобальном масштабе.

В данной работе будем использовать только Realtime Database для хранения и получения JSON — данных в реальном времени.

Требуемые инструменты

Для работы будут необходимы следующие инструменты:

– Ionic CLI
– Angular 5
– AngularFirebase
– Ionicons
– VS Code & Visual Studio Editor

Описание примера

В примере будет полноценное приложение Ionic, в котором будет реализовано CRUD с удаленной БД Firebase на вашем аккаунте Google. Дополнительно покажем, как реализовать каркас формы приема и выдачи данных.

Описание шагов

Создадим базовое приложение Ionic для мобильного телефона. Будем следовать следующему пошаговому курсу:

  • Шаг 1. Создаем приложение.
  • Шаг 2. Устанавливаем зависимости (AngularFire2 и Firebase).
  • Шаг 3: Создаем поставщика/провайдера для выполнения коммуникации CRUD.
  • Шаг 4.  Устанавливаем домашнюю страницу для отображения зарегистрированных контактов.
  • Шаг 5: Создаем страницу для добавления / изменения контактов.

Шаг 1. Создаем приложение

Создаем новое приложение по команде

ionic start Courses blank

Приложение будет представлять из себя список курсов. И будет состоять из страниц:

  • home.html — список всех курсов;
  • course-edit.html — страница редактирования курса;
  • course-info.html — страница просмотра информации о курсе;
  • course.html — страница прохождения курса.

Создадим их:

ionic g page course-edit
ionic g page course-info
ionic g page course

Шаг 2. Устанавливаем зависимости

Для этого набираем:

npm install firebase angularfire2 --save

Чтобы начинать  работу с базой данных Firebase необходимо в главном модуле подключить зависимости:

 

Шаг 3. Создаем провайдера

Провайдер нужен для создания управления промежуточными операциями CRUD. Создается из консоли:

ionic g provider course

 

Пост не закончен …

Вам также может понравиться

Об авторе WebSofter

Web - технологии

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Отправить ответ

avatar
  Subscribe  
Notify of