= Разместите динамический веб-сайт в Google Firebase, используя Node.js и Cloud Firestore DB =
Тушар Капур: (httpswww.tusharck.com/)
URL демо Git: httpsgithub.com/tusharck/firebase-demo
= Почему хостинг Firebase? знак равно
Firebase — это комплексная платформа приложений, построенная на инфраструктуре Google, поэтому она обеспечивает безопасный, быстрый, бесплатный (также доступны платные варианты для дополнительных ресурсов) и простой способ размещения вашего контента на веб или мобильные приложения
== Ключевые особенности и преимущества уровня бесплатного пользования: ==
- Это дает бесплатный пользовательский домен&
SSL(SSL обеспечивает стандартный уровень безопасности для соединений https
- Cloud Firestore: гибкая и масштабируемая база данных для синхронизации данных в реальном времени между клиентскими приложениями.
- Другие функции: облачные функции, облачные сообщения (FCM), Crashlytics, динамические ссылки, хостинг, комплект машинного обучения, хранилище, мониторинг производительности, прогнозы и тестовая лаборатория (функциональность и ресурсы этих продуктов можно увеличить, купив платный план, но услуги бесплатного уровня очень хороши. Чтобы посмотреть планы, проверьте цены Firebase)
- Автоматическое масштабирование ресурсов
= Шаги по размещению вашего динамического веб-сайта в Firebase =
== Требования ==
**1. Учетная запись Google** Если у вас нет учетной записи Google, вам необходимо зарегистрировать ее. Вы можете сделать это, перейдя на страницу httpsaccounts.google.com/SignUp. **2. Node.js и npm** Mac/WindowsВы можете загрузить программу установки с httpsnodejs.org/en/download/. линукс
Выполните следующие действия, чтобы установить Node.js:
1. Откройте терминал
2. Выполните следующие команды:
sudo apt-get установить curlcurl -sL httpsdeb.nodesource.com/
setup_13.x| sudo bash -sudo apt install nodejs ** Я использовал Примечание: ** **
setup_13.x, потому что на момент руководства последняя версия была
**13**вы можете проверить последнюю версию, перейдя на httpsnodejs.org/en/
Чтобы проверить, успешно ли установлены Node.js и npm, выполните следующие команды, которые выведут установленную версию:
узел -v
нпм -в
**3. Firebase-CLI (интерфейс командной строки)Это инструменты для управления, просмотра и развертывания проектов Firebase.
npm установить -g firebase-tools
= Шаг 1: Создайте проект Firebase =
- Перейдите на httpsfirebase.google.com и
Войти в правом верхнем углу
- Нажмите на
Перейдите в консоль, в правом верхнем углу
- Тогда нажмите на
Создайте проект, как показано ниже
4. Далее введите название вашего проекта и нажмите «Продолжить».
5. Нажмите «Продолжить», чтобы включить Google Analytics для вашего проекта Firebase (если вы этого не хотите, отметьте, чтобы отключить)
6. Выберите ближайшее место для Google Analytics
7. Нажмите на
**Создайте проект и дождитесь его загрузки. Затем вы увидите что-то вроде ниже
= Шаг 2: Инициализируйте вход в Firebase =
- Откройте командную строку/терминал, затем создайте и перейдите в новый каталог
mkdir my-firebase-projectcd мой-firebase-проект
2. Чтобы разместить веб-сайт в Firebase, войдите в firebase, используя следующую команду. После запуска команды откроется окно браузера с просьбой войти в firebase, используя свои учетные данные Google. Введите учетные данные, и Firebase войдет в вашу систему.
вход в firebase
= Шаг 3: Инициализируйте проект Firebase в своей системе =
- Теперь нам нужно инициализировать проект, который мы создали на консоли Firebase, в систему. Для выполнения выполните команду ниже
инициализация firebase
2. Нажмите клавишу вниз, затем выберите
**две вещи **нажав **пробел
- Функции
- Хостинг
Затем
**нажмите Enter**, чтобы продолжить
3. Затем выберите
затем нажмите ввод
**Использовать существующий проект**
4. Нажмите ввод на
**my-firebase-project** **или имя проекта, которое вы использовалиили название проекта, которое вы использовали
5. Выберите
**Javascript** и нажмите Enter
6. Вы можете сказать
**Нет** на Вы хотите использовать ESLint для выявления возможных ошибок и обеспечения соблюдения стиля?
7. Тип
**Да** для установки зависимостей с помощью npm
8. Здесь мы должны выполнить две задачи:
- Вы должны выбрать каталог, в котором будет находиться ваш веб-сайт и активы. По умолчанию это
pubicВы можете нажать Enter, чтобы продолжить, или вы можете изменить имя каталога на желаемое
- Типы
Да для страницы с одним приложением, чтобы ваши динамические URL-адреса могли быть перенаправлены в правильное место назначения.
9. Протестируйте приложение firebase в вашей локальной системе, выполнив следующую команду. Затем перейдите к
**httplocalhost:5000**, чтобы увидеть, как работает ваш базовый веб-сайт.
firebase serve --only hosting,functions
Вы должны увидеть что-то подобное ниже после открытия
**httplocalhost:5000** URL
10. Закрыть сервер из терминала
= Шаг 4: Установка пакетов и создание каталога представлений для динамического веб-сайта =
- Здесь мы переключимся внутри каталога функций, чтобы сделать это с помощью
компакт-диск функции
**2. Install Express**Это минимальная и гибкая платформа веб-приложений Node.js.
npm я выражаю --save
**3. Установить Handle Bars**Это механизм шаблонов для Node.js, используемый для динамического внешнего интерфейса веб-сайта.
npm я руль --сохранить
**4. Установить консолидацию**
npm я консолидирую --save
5. Создайте папку с именем
**views** внутри папки **functions**, в которой мы будем хранить весь код внешнего интерфейса
мкдир
Просмотры
6. Вернитесь в основной каталог, выполнив следующую команду:
компакт диск .
= Шаг 5: Настройка Firestore (облачная база данных) =
== Конфигурация базы данных ==
- Перейдите на httpsconsole.firebase.google.com/
- Выберите свой проект
- Выбирать
База данных на панели слева
4. Нажмите
**Создать базу данных**
5. Выберите Запустить в тестовом режиме, иначе вы не сможете получить доступ к базе данных из вашей системы. Мы изменим эту настройку, когда закончим разработку веб-сайта.
Затем нажмите
**Далее** после этого
6. Выберите расположение вашей базы данных Firestore.
**После того, как вы установите это местоположение, вы не сможете изменить его позже. Примечание: **
== СоздатьДанные ==
- Нажмите на начало сбора
2. Введите
** Идентификатор коллекции, который вы можете сейчас попробовать
3. Введите данные образца. Входить
**sample_doc **в качестве **идентификатора документа. **Введите **Заголовок** в поле **. Мне нравится Cloud** внутри **Value Затем нажмите **Save**
= Шаг 6: Создание динамического контента веб-сайта =
Мы разделим эту часть на две части, в первой части мы увидим, как получать данные из Firestore и использовать их на веб-сайте. Во второй части мы увидим, как отправить данные формы
**Сначала мы загрузим учетные данные для доступа к Firestore**
2. Нажмите
**Настройки** на левой панели и перейдите в **Настройки проекта**.
3. Перейти к
**Сервисные аккаунты** и нажмите **Создать новый закрытый ключ.
4. Нажмите
**Создать ключ Появится всплывающее окно для загрузки ключа. Храните ключ в папке **functions** вашего веб-сайта.
== Получение из Firestore ==
- Открыть
index.js внутри папки функций
2. Нам нужно определить некоторые библиотеки, которые мы хотим использовать в нашем приложении. Это те самые библиотеки, которые мы установили ранее
const functions = require('firebase-functionsconst express = require('expressconst engine = require('consolidatevar hbs = require('handlebarsconst admin = require('firebase-admin
3. Здесь мы устанавливаем несколько вещей:
- Инициализируйте приложение, используя экспресс
- Мы установим наш двигатель в качестве руля
- Затем мы скажем экспрессу, что наш интерфейсный код будет находиться внутри папки представлений.
const app = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('view enginehbs
4. Разрешите вашему приложению доступ к базе данных Firestore.
*Примечание:*
1. Изменить
**YOUR_SDK_NAMEjson с файлом, который вы скачали для **учетных данных для доступа к Firestore2. Измените URL-адрес базы данных на URL-адрес вашей базы данных. Чтобы увидеть URL, вы можете **Настройки >Аккаунт службы**
var serviceAccount = требуется
YOUR_SDK_NAME.jsonadmin.initializeApp({credential: admin.credential.cert(serviceAccount), databaseURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. Функция для получения данных из Firestore
- Идентификатор коллекции
образец
- Идентификатор документа
sample_doc
Мы определили вышеуказанное при вводе данных образца
асинхронная функция getFirestoreconst firestore_con = await admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
if (!doc.exists) { console.log('Нет такого документа }
иначе {вернуть doc.data
.catch(err =>{ console.log('Ошибка получения документа', errreturn writeResult
}
** Мы используем Примечание: ** ** асинхронный **, потому что нам нужно дождаться завершения операции обещания между базой данных и нашим веб-сайтом.
6. Создайте маршрут и отправьте результат на внешний интерфейс
app.getasync (запрос, ответ) var db_result = await getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. Создать
**index.hbs** в папке **views**. hbs — это файл руля. Примечание: **
8. Напишите этот базовый HTML-код внутри
**index.hbs**, чтобы увидеть полученный результат.
Тушар Чанд Капур
