Как правильно переписать код и подключить Firebase?

Question

GlupiCubik @GlupiCubik

Как правильно переписать код и подключить Firebase?

Пишу сайтик, надо подключить БД для хранения комментариев. Раньше работал с Firebase только на UNITY. С JS мало работал, но кое как смог написать код, который сохраняет комментарии в локальной памяти браузера. Теперь нужно подключить Firebase Cloud Firestore Database. Пробовал сам, но постоянно сталкиваюсь с различными ошибками, по типу -

Uncaught SyntaxError: The requested module 'https://www.gstatic.com/firebasejs/10.8.0/firebase...' does not provide an export named 'getFirestore' (at comments.html:151:16)

или

comments.html:174 Uncaught TypeError: db.collection is not a function
at comments — копия.html:174:10

Пока особо ничего не сделал, нормально даже не получается подключить SDK.

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <header>
  </header>
  <main class="content">
    <div id="comments">
    </div>

    <form id="commentForm">
      <div class="commentFields">
        <input type="text" name="name" placeholder="Name" required>

        <div class="projectRow">
          <label>
            <input type="checkbox" id="projectCheckbox" title="Выбрать, если хотите оставить комментарий к проекту.">
          </label>
          <select name="project" id="projectSelectInput" disabled></select>
        </div>

        <textarea name="comment" placeholder="Comment" required></textarea>
        <input type="submit" value="Submit">
      </div>
    </form>

    <script>
      var commentsCheckboxState; // Глобальная переменная для отслеживания состояния переключателя

      document.getElementById('projectCheckbox').onchange = function () {
        // Получаем поле выбора проекта
        var projectSelectInput = document.getElementById('projectSelectInput');

        // Включаем или выключаем поле в зависимости от состояния переключателя
        projectSelectInput.disabled = !this.checked;

        // Обновляем видимость комментариев
        var isProjectChecked = this.checked;
        if (isProjectChecked !== commentsCheckboxState) {
          displayComments();
          commentsCheckboxState = isProjectChecked;
        }
      };

      document.getElementById('commentForm').onsubmit = function (e) {
        e.preventDefault();

        var name = document.getElementById('commentForm').elements['name'].value;
        var project = document.getElementById('commentForm').elements['project'].value;
        var comment = document.getElementById('commentForm').elements['comment'].value;

        // Получаем состояние переключателя
        var isProjectChecked = document.getElementById('projectCheckbox').checked;

        // Если переключатель не отмечен, устанавливаем project в пустую строку
        if (!isProjectChecked) {
          project = '';
        }

        // Получить существующие комментарии из локального хранилища local storage
        var existingComments = JSON.parse(localStorage.getItem('comments')) || [];

        // Добавить новый комментарий
        existingComments.push({ name: name, project: project, comment: comment });

        // Сохраняем обновленный комментарий
        localStorage.setItem('comments', JSON.stringify(existingComments));

        // Обновить коммент на странице
        displayComments();
      };

      window.onload = function () {
        // Вывод
        displayComments();

        populateProjectsSelect();
      };

      function displayComments() {
        var commentsContainer = document.getElementById('comments');
        commentsContainer.innerHTML = '';

        var existingComments = JSON.parse(localStorage.getItem('comments')) || [];

        existingComments.forEach(function (comment) {
          var commentDiv = document.createElement('div');

          var projectText = document.getElementById('projectCheckbox').checked ? '[' + comment.project + '] ' : '';

          commentDiv.innerHTML = '<strong>' + comment.name + ':</strong> ' + projectText + comment.comment;
          commentsContainer.appendChild(commentDiv);
        });
      }

      function populateProjectsSelect() {
        var projectSelect = document.getElementById('projectSelectInput');

        fetch('data/projects.json')
          .then(response => response.json())
          .then(data => {

            data.projects.forEach(project => {
              var option = document.createElement('option');
              option.value = project.project_name;
              option.text = project.project_name;
              projectSelect.appendChild(option);
            });
          })
          .catch(error => {
            console.error('Error fetching projects:', error);
          });
      }
      
    </script>
    <script type="module">
      // Import the functions you need from the SDKs you need
      import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
      import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-analytics.js";
      import { getFirestore } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"
      // TODO: Add SDKs for Firebase products that you want to use
      // https://firebase.google.com/docs/web/setup#available-libraries
    
      // Your web app's Firebase configuration
      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
      const firebaseConfig = {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        projectId: "",
        storageBucket: "",
        messagingSenderId: "",
        appId: "",
        measurementId: ""
      };
    
      // Initialize Firebase
      const app = initializeApp(firebaseConfig);
      const analytics = getAnalytics(app);

      const db = getFirestore(app);
    </script>
  </main>
  <footer>
    <p>&copy; 2024 qwerty.<br/>All rights reserved.</p>
  </footer>
</body>
</html>

projects.json -

{
    "projects": [
        {"id": 1, "project_name": "Telegram Bot"},
        {"id": 2, "project_name": "Unity 3D Game"},
        {"id": 3, "project_name": "Unity 2D Game"},
        {"id": 4, "project_name": "Unity + TGbot"}
    ]
}

На данный момент я не очень понимаю как работать с SDK Firebase на сайте, т.к. на разных страницах документации показаны различные методы. При вызове некоторых вызывает ошибку, что такие функции не доступны или не удалось их использовать при вызове.

Хотелось бы просто получить информацию из документаций или ссылки на свежие статьи, где описано подобное решение для моей задачи.