Для подключения Firebase Cloud Firestore Database к веб-сайту и использования его для хранения комментариев, выполните следующие шаги:
1. Сделайте настройку проекта Firebase:
- Перейдите на сайт Firebase (https://firebase.google.com/) и войдите в свою учетную запись Google.
- Создайте новый проект или выберите существующий.
- В настройках проекта перейдите в раздел "Web" и зарегистрируйте свое приложение.
- Получите конфигурационные данные вашего Firebase проекта.
2. Подключите Firebase к вашему веб-приложению:
- Добавьте скрипты Firebase в ваш HTML файл перед закрытием тега `</body>`:
```html
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js"></script>
```
- Инициализируйте Firebase в вашем JavaScript файле:
```javascript
// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
// Initialize Cloud Firestore and get a reference to the service
const db = firebase.firestore();
```
3. Работайте с Firestore для хранения комментариев:
- Сохранение комментария:
```javascript
function saveComment(comment) {
// Add a new document with a generated id.
db.collection("comments").add({
text: comment.text,
author: comment.author,
timestamp: firebase.firestore.FieldValue.serverTimestamp() // It will set the timestamp
})
.then((docRef) => {
console.log("Document written with ID: ", docRef.id);
})
.catch((error) => {
console.error("Error adding document: ", error);
});
}
```
- Получение комментариев:
```javascript
function getComments() {
db.collection("comments").orderBy("timestamp", "desc").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
// тут вы можете добавлять комментарии в ваш HTML
});
});
}
```
Обратите внимание, что с версии 9.0.0 Firebase представил модульный SDK, который позволяет использовать функции импорта. Приведённые выше примеры используют версию 9.0.0 SDK с совместимостью с предыдущими версиями (синтаксис `firebase.xxx`). Если вы предпочитаете использовать последнюю модульную версию, ваш код будет немного отличаться, и вы будете использовать функции типа `import` для добавления только тех модулей, которые вам нужны.