В этом руководстве вы узнаете, как создать простое приложение 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 с обработчиком маршрута. Затем обработчик маршрута обычно выполняет два действия:
- Он отображает шаблон.
- Он загружает модель, которая затем становится доступной для шаблона.
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.
Не стесняйтесь хлопать для меня, если вам понравилось! Спасибо.