= Розмістіть динамічний веб-сайт на Google Firebase за допомогою Node.js і Cloud Firestore DB =
Тушар Капур: (httpswww.tusharck.com/)
URL-адреса демонстраційного Git: httpsgithub.com/tusharck/firebase-demo
= Чому саме Firebase Hosting? =
Firebase – це комплексна платформа додатків, створена на основі інфраструктури Google, тому вона забезпечує безпечний, швидкий, безкоштовний (платні варіанти також доступні для додаткових ресурсів) і простий спосіб розміщення вашого вмісту на веб або мобільних додатків
== Основні функції та переваги безкоштовного рівня: ==
- Це надає безкоштовний власний домен&
SSL(SSL забезпечує стандартний рівень безпеки для https-з’єднань
- Cloud Firestore: гнучка та масштабована база даних для синхронізації даних у реальному часі між клієнтськими програмами
- Інші функції: Хмарні функції, Хмарний обмін повідомленнями (FCM), Crashlytics, Динамічні посилання, Хостинг, ML Kit, Зберігання, Моніторинг продуктивності, Прогнози та Лабораторія тестування (Функціональність і ресурси цих продуктів можна розширити, придбавши платний план, але безкоштовні послуги дуже хороші. Щоб переглянути тарифні плани, перевірте ціни Firebase)
- Автоматичне масштабування ресурсів
= Кроки для розміщення вашого динамічного веб-сайту на Firebase =
== Вимоги ==
**1. Обліковий запис Google**Якщо у вас немає облікового запису Google, вам потрібно його зареєструвати. Ви можете зробити це, перейшовши на сторінку httpsaccounts.google.com/SignUp. **2. Node.js і npm** Mac/WindowsВи можете завантажити програму встановлення з httpsnodejs.org/en/download/. Linux
Щоб установити Node.js, виконайте наведені нижче дії.
1. Відкрийте термінал
2. Виконайте такі команди:
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
setup_13.x| sudo bash -sudo apt install nodejs **Я використовував Примітка: ** **
setup_13.x, тому що на момент підручника була остання версія
**13**ви можете перевірити останній випуск, перейшовши на httpsnodejs.org/en/
Щоб перевірити, чи успішно встановлено Node.js і npm, виконайте такі команди, які виведуть встановлену версію:
вузол -в
npm -v
**3. Firebase-CLI (інтерфейс командного рядка. Це інструменти для керування, перегляду та розгортання проектів Firebase
npm install -g firebase-tools
= Крок 1: Створення проекту Firebase =
- Перейдіть на сторінку httpsfirebase.google.com і
Увійдіть у верхньому правому куті
- Натисніть на
Перейдіть до консолі у верхньому правому куті
- Потім натисніть
Створіть проект, як показано нижче
4. Далі введіть назву вашого проекту та натисніть продовжити
5. Натисніть «Продовжити», щоб увімкнути Google Analytics для вашого проекту Firebase (якщо ви цього не хочете, поставте прапорець, щоб вимкнути)
6. Виберіть найближче місце для Google Analytics
7. Натисніть на
**Створіть проект і дочекайтеся його завантаження. Тоді ви побачите щось на зразок нижче
= Крок 2: Ініціалізація входу Firebase =
- Відкрийте командний рядок/термінал, а потім створіть і перейдіть до нового каталогу
mkdir my-firebase-projectcd my-firebase-project
2. Щоб розмістити веб-сайт на Firebase, увійдіть у Firebase за допомогою такої команди. Після виконання команди відкриється вікно браузера з проханням увійти до firebase за допомогою облікових даних Google. Введіть там облікові дані, і Firebase увійде у вашу систему
вхід у firebase
= Крок 3: Ініціалізація проекту Firebase у вашій системі =
- Тепер ми повинні ініціалізувати проект, який ми створили на консолі Firebase, у системі. Для цього виконайте наведену нижче команду
ініціалізація Firebase
2. Натисніть клавішу вниз і виберіть
**дві речі **натиснувши **клавішу пробілу
- Функції
- Хостинг
Тоді
**натисніть Enter**, щоб продовжити
3. Потім виберіть
потім натисніть enter
**Використовуйте існуючий проект**
4. Натисніть enter на
**my-firebase-project** **або назва проекту, яку ви використали,або назва проекту, яку ви використали
5. Виберіть
**Javascript** і натисніть enter
6. Можна сказати
**Ні** Ви бажаєте використовувати ESLint для виявлення можливих помилок і застосування стилю?
7. Тип
**Так** для встановлення залежностей за допомогою npm
8. Тут ми повинні виконати два завдання:
- Ви повинні вибрати каталог, у якому буде розміщено ваш веб-сайт і активи. За замовчуванням це так
pubic. Ви можете натиснути клавішу enter, щоб продовжити, або змінити назву каталогу на потрібне
- Типи
Так, для сторінки однієї програми, щоб ваші динамічні URL-адреси могли бути перенаправлені до належного місця призначення
9. Перевірте програму firebase у вашій локальній системі, виконавши таку команду. Потім перейдіть до
**httplocalhost:5000**, щоб переглянути роботу основного веб-сайту
firebase service --лише хостинг,функції
Ви повинні побачити щось подібне нижче після відкриття
**httplocalhost:5000** URL
10. Закрийте сервер з терміналу
= Крок 4: Встановлення пакетів і створення каталогу представлень для динамічного веб-сайту =
- Тут ми перемикаємося всередині каталогу функцій, щоб це використовувати
функції cd
**2. Install Express**Це мінімальний і гнучкий фреймворк веб-додатків Node.js
npm i express --save
**3. Install Handle Bars**Це механізм створення шаблонів для Node.js, який використовується для динамічного зовнішнього вигляду веб-сайту
npm i handlebars --save
**4. Встановити консолідацію**
npm i consolidate --save
5. Створіть папку під назвою
**views** у папці **functions**, де ми будемо зберігати весь код інтерфейсу
mkdir
погляди
6. Поверніться до основного каталогу, виконавши таку команду:
cd .
= Крок 5: Налаштування Firestore (хмарної бази даних) =
== Конфігурація бази даних ==
- Перейдіть на сторінку httpsconsole.firebase.google.com/
- Виберіть свій проект
- Виберіть
Бази даних на панелі ліворуч
4. Натисніть на
**Створити базу даних**
5. Виберіть Запустити в тестовому режимі, інакше ви не зможете отримати доступ до бази даних із вашої системи. Ми змінимо це налаштування, коли закінчимо розробку веб-сайту
Потім натисніть
**Далі** після цього
6. Виберіть розташування вашої БД Firestore
**Після того як ви встановите це місце, ви не зможете змінити його пізніше. Примітка: **
== CreateData ==
- Натисніть «Почати збір».
2. Введіть
**Ідентифікатор колекції, який ви можете взяти наразі
3. Введіть дані зразка. Введіть
**sample_doc **як **Ідентифікатор документа. **Введіть **Заголовок** у поле **. Мені подобається Cloud** всередині **Значення, потім натисніть **Зберегти**
= Крок 6: Створення динамічного вмісту веб-сайту =
Ми розділимо частину на дві частини, у першій частині ми побачимо, як отримати дані з Firestore і використовувати на веб-сайті. У другій частині ми побачимо, як надсилати дані форми
**Спочатку ми завантажимо облікові дані для доступу до Firestore**
2. Натисніть на
**налаштування** на лівій панелі та перейдіть до **Налаштування проекту**
3. Перейти до
**Сервісні облікові записи** та натисніть **Створити новий закритий ключ
4. Натисніть на
**Створити ключ. З’явиться спливаюче вікно для завантаження ключа. Зберігайте ключ у папці **функцій** вашого веб-сайту
== Отримання з Firestore ==
- ВІДЧИНЕНО
index.j у папці функцій
2. Нам потрібно визначити деякі бібліотеки, які ми хочемо використовувати в нашій програмі. Це ті самі бібліотеки, які ми встановили раніше
const functions = require('firebase-functionsconst express = require('expressconst engines = require('consolidatevar hbs = require('handlebarsconst admin = require('firebase-admin))
3. Тут ми встановлюємо кілька речей:
- Ініціалізація програми за допомогою Express
- Ми поставимо наш двигун як кермо
- Тоді ми повідомимо експресу, що наш інтерфейсний код буде в папці переглядів
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({облікові дані: admin.credential.cert(serviceAccount), URL-адреса бази даних: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. Функція отримання даних із Firestore
- ID колекції є
зразок
- Ідентифікатор документа є
sample_doc
Ми визначили вище під час введення зразкових даних
асинхронна функція getFirestoreconst firestore_con = очікувати admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
if (!doc.exists) { console.log('Немає такого документа}
else {повернути doc.data
.catch(err =>{ console.log('Помилка отримання документа', errreturn writeResult
}
**Ми використовуємо Примітка: ** **асинхронна**, оскільки нам потрібно чекати завершення операції обіцянки між базою даних і нашим веб-сайтом
6. Створіть маршрут і надішліть результат на зовнішню сторінку
app.getasync (запит, відповідь) var db_result = очікування getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. Творіть
**index.hbs** у папці **views**. hbs — це файл handelbars. Примітка: **
8. Напишіть цей базовий HTML-код усередині
**index.hbs**, щоб побачити отриманий результат
Тушар Чанд Капур
