Firebase – не удалось записать данные в базу данных реального времени для веб-приложения

Я создал простую форму для хранения адреса электронной почты в базе данных реального времени (тестовый режим), созданной в консоли Firebase.

<!DOCTYPE html>
<html>

<head>
  <link rel = "stylesheet" href = "style.css">

</head>

<body>

  <form style = "border:1px solid #ccc">
    <div class = "container">
      <h1>Sign Up</h1>
      <p>Please fill in this form to create an account.</p>
      <hr>

      <label for = "email"><b>Email</b></label>
      <input type = "text" placeholder = "Enter Email" name = "email" required id = "email">

      <script type = "module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-app.js";
        import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-analytics.js";
        import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-database.js";

        // Your Firebase configuration...

        const firebaseConfig = {
          apiKey: "data",
          authDomain: "data",
          databaseURL: "data",
          projectId: "data",
          storageBucket: "data",
          messagingSenderId: "data",
          appId: "data",
          measurementId: "data"
        };

        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
        const database = getDatabase(app);

        const analytics = getAnalytics(app);

        function storeData() {
          const email = document.getElementById("email").value;
          const reference = ref(database, "signup/")
          set(reference, {
            email: email
          });
        }
      </script>


      <button class = "signupbtn" onclick = "storeData()">Sign Up</button>
    </div>
    <!--</div>-->
  </form>






</body>

</html>

Согласно руководству, я установил Firebase (версия 13.7.2) в свою ОС Windows с помощью npm. Однако в созданную мной базу данных не записываются никакие данные. Хотелось бы узнать в чем может быть проблема и как ее исправить?

Вы видите ошибки в консоли браузера? А вы уверены, что правила безопасности верны? Я помню, когда вы выбираете тестовый режим Firebase, который разрешает все операции чтения и записи, срок его действия автоматически истечет по истечении времени, в течение которого ваша база данных снова будет в безопасности.

— 16.04.2024 17:55

Я получаю сообщение об ошибке «Отказ в загрузке <URL>. Ресурсы должны быть указаны в ключе манифеста web_accessible_resources, чтобы их можно было загружать страницами за пределами расширения».

— 16.04.2024 19:04

правило базы данных ({ "rules": { ".read": "true", // 2024-5-15 ".write": "true", // 2024-5-15 } })

— 16.04.2024 19:17

javascript firebase firebase-realtime-database

16.04.2024 16:08

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Можете ли вы попробовать следующий код и оставить мне отзыв?

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

<head>
  <meta charset = "UTF-8">
  <title>Firebase Example</title>

  <link rel = "stylesheet" href = "style.css">

  <script type = "module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.11.0/firebase-app.js';
    import { getAnalytics } from 'https://www.gstatic.com/firebasejs/10.11.0/firebase-analytics.js';
    import { getDatabase, ref, set } from 'https://www.gstatic.com/firebasejs/10.11.0/firebase-database.js';

    // Your Firebase configuration
    const firebaseConfig = {
          apiKey: "data",
          authDomain: "data",
          databaseURL: "data",
          projectId: "data",
          storageBucket: "data",
          messagingSenderId: "data",
          appId: "data",
          measurementId: "data"
    };

    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);
    const database = getDatabase(app);

    function storeData() {
      const email = document.getElementById("email").value;
      const reference = ref(database, "signup/");
      set(reference, {
        email: email
      }).then(() => {
        console.info("Data stored successfully!");
      }).catch((error) => {
        console.error("Error storing data: ", error);
      });
    }
    document.getElementById('sign-btn').addEventListener('click', storeData);
  </script>
</head>


<body>
  <form style = "border:1px solid #ccc">
    <div class = "container">
      <h1>Sign Up</h1>
      <p>Please fill in this form to create an account.</p>
      <hr>

      <label for = "email"><b>Email</b></label>
      <input type = "text" placeholder = "Enter Email" name = "email" required id = "email">

      <button type = "button" id = "sign-btn" class = "signupbtn">Sign Up</button>
    </div>
  </form>
</body>

</html>

Это сработало. Данные успешно сохранены! Большое спасибо! Можете ли вы сказать мне, в чем проблема в коде, который я предоставил?

— 16.04.2024 23:44

storeData() не был определен глобально, как внутри модуля.

— 17.04.2024 01:14

Я просто перемещаю код сценария из Firebase в тег html head. Функцию storeData() нельзя вызвать из onclick, когда она находится в заголовке, поэтому я просто добавляю addEventListener. Однако я рекомендую вам создать второй файл сценария, в который вы импортируете весь код сценария, чтобы ваш html-файл не был слишком большим. Кстати, не забудьте отметить мой ответ знаком Solved, чтобы другие пользователи могли сразу увидеть, что вы нашли решение.

— 17.04.2024 08:30

16.04.2024 22:01