В этом руководстве вы узнаете, как создать простое приложение Ember.js, подключить базу данных Firebase и Spring Boot.

Обзор

Цель этого руководства — продемонстрировать взаимодействие клиентской и серверной частей при разработке веб-приложений. Мы используем Ember.js для пользовательского интерфейса на стороне клиента и Firebase для разработки на стороне сервера.

Подготовка инструментов

Загрузите и установите следующие инструменты в соответствии с вашей операционной системой.

  • Node.js

Выберите вариант LTS с официального сайта и скачайте его. Node.js — это среда выполнения JavaScript, которая позволяет отображать компоненты UI в файлах HTML. Кроме того, одновременно будет установлен менеджер пакетов Node.js, npm. После успешной установки вы сможете увидеть информацию о версии, введя node -v и npm -v в командной строке/терминале/консоли вашей ОС.

  • Ember.js

Используйте команду npm install -g ember-cli, чтобы установить последнюю стабильную версию Ember CLI в глобальном пространстве имен. Команда создает приложение, использующее последнюю версию Ember.js и данных Ember.

Примечание для пользователей Mac. Рекомендуется установить последнюю версию Node.js. Если у вас возникли проблемы с его установкой (например, ошибка разрешения EACCESS), используйте «brew» для его установки.

  • Пряжа (необязательно)

Yarn — это менеджер пакетов JavaScript, созданный Facebook. Yarn расшифровывается как Yet Another Resource Negotiator. Он предоставляет функции, аналогичные npm, и может использоваться в качестве альтернативы для установки, удаления и управления зависимостями пакетов из реестра npm или репозиториев GitHub. . Чтобы установить пряжу, используйте команду npm install --global yarn.

После установки Node.js, Ember.js и Yarn, успешно и правильно указав путь для переменных среды, запустите ember -v и yarn --version в Командная строка/терминал/консоль и проверьте вывод.

Жизненный опыт

В Ember.js есть несколько основных элементов, которые играют разные роли в рендеринге UI. На следующем изображении показано, как работает приложение Ember.js.

Сначала маршрутизатор Ember.js сопоставляет URL с обработчиком маршрута. Затем обработчик маршрута обычно выполняет два действия:

  1. Он отображает шаблон.
  2. Он загружает модель, которая затем становится доступной для шаблона.

Ember.js организует макет HTML в приложении с помощью шаблонов. Шаблоны описывают, как выглядит пользовательский интерфейс, а компоненты описывают, как он себя ведет. Каждый компонент состоит из двух частей: шаблона, написанного на Handlebars, и исходного файла, написанного на JavaScript, который определяет его поведение. Модели обычно сохраняют информацию на веб-сервере, хотя их можно настроить для сохранения в любом месте, включая локальное хранилище браузера.

Задача-I: Разархивируйте существующий проект или создайте новый проект

  • Загрузите или клонируйте репозиторий Task-I/project с GitHub.
  • Откройте Командная строка/Терминал/Консоль и перейдите в каталог проекта.
  • Используйте команду npm install или yarn install для установки зависимостей. Затем используйте команду npm start или yarn start для запуска проекта. Включите через брандмауэр, если требуется.
  • Откройте браузер по умолчанию и используйте http://localhost:4200 для доступа к приложению.

Задача-II: настроить сервер на Firebase

  • Создайте учетную запись на сайте Firebase.
  • Перейдите в каталог проекта и используйте команды npm install firebase и ember install emberfire@next в Командной строке/терминале/консоли. Firebase и emberfire подключат ваше приложение Ember.js к службе Firebase. Более подробную информацию можно найти здесь.
  • Войдите в Firebase, нажмите Консоль и создайте новый проект.

  • Когда ваш новый проект Firebase будет готов, нажмите </>, чтобы добавить Firebase в свое веб-приложение.

  • В следующем окне дайте вашему приложению псевдоним (например, firebase-app-nickname) и зарегистрируйте его.
  • Обратите внимание на apiKey, authDomain и другие значения конфигурации в следующем окне.

  • Скопируйте и вставьте значения конфигурации из Firebase в репозиторий приложений Ember.js /.env-sample и переименуйте его в .env.
  • Измените свою базу данных на общедоступную, чтобы избежать аутентификации на этом этапе. Для этого перейдите в консоль Firebase, выберите свое новое приложение, в разделе Обзор проекта › Сборка в меню слева нажмите База данных в реальном времени, измените чтение и запись правила на true и нажмите Опубликовать.

  • Перейдите в каталог проекта в Командной строке/терминале/консоли и используйте npm install или yarn install для установки зависимостей. Затем используйте команду npm start или yarn start для запуска проекта. Включите через брандмауэр, если требуется.
  • Откройте браузер по умолчанию и используйте http://localhost:4200 для доступа к приложению.
  • Сохраните адрес электронной почты в базе данных (например, [email protected]).

Задача-III: подключить приложение Spring Boot к вашей базе данных Firebase

  • Создайте новый закрытый ключ в Firebase Admin SDK. Перейдите в раздел Обзор проекта > Настройки проекта > Учетные записи служб > FireBase Admin SDK. Загрузите Новый закрытый ключ (файл json), нажав кнопку Создать новый закрытый ключ.

  • Откройте каталог Task-III и выполните следующие изменения: Переместите файл json в каталог demo/src/main/resources.
  • Измените demo/src/main/java/com/example/demo/GreetingController.java и внесите изменения в выделенный код:

InputStream serviceAccount = this.getClass().getClassLoader().getResourceAsStream(“project-fb-555-firebase-adminsdk-z6ldc-6acb653960.json”);
// FireBase options set
FirebaseOptions options = new FirebaseOptions.Builder()
.setCredentials(GoogleCredentials.fromStream(serviceAccount))
.setDatabaseUrl(“https://project-fb-555-default-rtdb.asia-southeast1.firebasedatabase.app")
.build();

  • Измените его на:

InputStream serviceAccount = this.getClass().getClassLoader().getResourceAsStream(“your_json_file_name.json”);
// FireBase options set
FirebaseOptions options = new FirebaseOptions.Builder()
.setCredentials(GoogleCredentials.fromStream(serviceAccount))
.setDatabaseUrl(“your_firebase_database_url.app")
.build();

  • Измените таблицу Справочник по базе данных на подписчики.

DatabaseReference ref = database.getReference(“subscribers”);

  • Откройте Командную строку/Терминал/Консоль, перейдите в демо-каталог и запустите с помощью команды mvn spring-boot:run.
  • Откройте браузер по умолчанию и используйте следующие веб-ссылки для get_mails и set_mail для доступа к базе данных Firebase.

http://localhost:8080/get_mails

http://localhost:8080/[email protected]

Поздравляем! Вы создали веб-приложение Ember.js и подключили к нему свою базу данных Firebase. Кроме того, вы узнали, как подключить Firebase к Spring Boot.

Вывод

Ember.js разделяет и разбивает процесс визуализации компонентов UI на несколько взаимозависимых частей. Механизм изменения маршрутов помогает программистам снизить рабочую нагрузку вместо того, чтобы думать о том, как перенаправлять пользователей на разные страницы или отображать и организовывать разные компоненты, разработчики могут приложить больше усилий к тому, как данные должны обрабатываться и отображаться в разных состояниях.

Все файлы кода для задач I, II и III доступны на GitHub.

Не стесняйтесь хлопать для меня, если вам понравилось! Спасибо.