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

Ссылка скопирована
Firebase HTML JavaScript
19 февраля 2026 1 ответ

Пишу сайтик, надо подключить БД для хранения комментариев. Раньше работал с 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>© 2024 qwerty.<br/>All rights reserved.</p>   </footer> </body> </html>

<!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>© 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"}     ] }

{ "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 на сайте, т.к. на разных страницах документации показаны различные методы. При вызове некоторых вызывает ошибку, что такие функции не доступны или не удалось их использовать при вызове.

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

Дополнительно:

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Артём Dev Ответ

Для того чтобы правильно переписать код и подключить Firebase к своему проекту, необходимо следовать определенным шагам. Ниже приведен пример кода на языке PHP, который демонстрирует подключение Firebase Realtime Database к проекту:

```php

// Подключаем библиотеку Firebase
require 'vendor/autoload.php';
 
use Kreait\Firebase\Factory;
use Kreait\Firebase\ServiceAccount;
 
// Путь к файлу JSON с учетными данными
$serviceAccount = ServiceAccount::fromJsonFile(__DIR__.'/path/to/serviceAccountKey.json');
 
// Инициализируем объект Factory
$firebase = (new Factory)
    ->withServiceAccount($serviceAccount)
    ->create();
 
// Получаем ссылку на Realtime Database
$database = $firebase->getDatabase();
 
// Пример чтения данных из базы
$data = $database->getReference('path/to/data')->getValue();
 
// Пример записи данных в базу
$database->getReference('path/to/data')->set([
    'key' => 'value'
]);

// Подключаем библиотеку Firebase require 'vendor/autoload.php'; use Kreait\Firebase\Factory; use Kreait\Firebase\ServiceAccount; // Путь к файлу JSON с учетными данными $serviceAccount = ServiceAccount::fromJsonFile(__DIR__.'/path/to/serviceAccountKey.json'); // Инициализируем объект Factory $firebase = (new Factory) ->withServiceAccount($serviceAccount) ->create(); // Получаем ссылку на Realtime Database $database = $firebase->getDatabase(); // Пример чтения данных из базы $data = $database->getReference('path/to/data')->getValue(); // Пример записи данных в базу $database->getReference('path/to/data')->set([ 'key' => 'value' ]);

```

Прежде всего, убедитесь, что у вас установлен пакет Kreait Firebase через Composer. Далее, создайте учетную запись сервисного аккаунта в консоли Firebase и загрузите файл JSON с учетными данными. Укажите путь к этому файлу в коде.

Затем инициализируйте объект Factory с помощью файла JSON и создайте объект Firebase. После этого вы сможете получить ссылку на Realtime Database и работать с данными.

Этот код демонстрирует простейшие операции чтения и записи данных в Firebase Realtime Database. Вы можете настроить его под свои потребности, добавляя дополнительные функции и обработку ошибок.

Убедитесь, что у вас установлены все необходимые зависимости и правильно сконфигурированы учетные данные, чтобы успешно подключить Firebase к своему проекту.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ