Как я могу правильно переписать код, чтобы подключить Firebase?

Как подключить Firebase Cloud Firestore Database к веб-сайту для хранения комментариев, имея опыт работы с Firebase в Unity и написав код для сохранения комментариев в локальной памяти браузера с использованием JavaScript?
  • 7 февраля 2024 г. 19:18
Ответы на вопрос 1
Для подключения 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` для добавления только тех модулей, которые вам нужны.
Похожие вопросы