Этот пост пошагово расскажет, как реализовать 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
Пост не закончен …
