Есть причина, по которой документация Firebase сразу переходит к реальным вещам, не говоря уже о том, как сделать простой Hello World. Это потому, что это слишком просто, чтобы кто-то даже позаботился о его изготовлении. Это исключение, я сделаю его здесь.

Эта статья поможет вам начать работу за пять простых шагов:

  1. Создать проект
  2. Создать HTML-файл
  3. Настройте соединение Javascript
  4. Соединять
  5. Откройте ваш веб-браузер

Я собираюсь использовать Windows Powershell для примеров и настройки, потому что это платформа, которую предпочитают кодеры 1337, находящиеся на переднем крае разработки.

Шаг 1

Перейдите в свою консоль Firebase и создайте простой проект. Не волнуйтесь, это бесплатно, как в бесплатном пиве.

Если вы новичок в разработке программного обеспечения или очень ленивы, вы можете загрузить весь пример этого упражнения с Github.

После этого вы должны перейти в папку проекта, в которой вы планируете работать над своим проектом. В данном случае это папка firebase-example-web. И запустите следующие команды

> npm install -g firebase-tools
> firebase login
> firebase init

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

Шаг 2

Создайте простой HTML-файл. Ничего особенного, это просто должен быть уровень Hello World, чтобы увидеть, как все работает. Даже в приведенном ниже примере их больше, чем самый минимум. Я выделил важные части и разделил сценарий, чтобы иметь возможность написать Шаг 3.

<html>
  <head>
    <meta charset="utf-8"/>
    <script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>
    <title>Firebase example</title>
  </head>
  <body>
    <h1>Firebase example</h1>
    <pre id='data'></pre>
    <script src="script.js"></script>
  </body>
</html>

Шаг 3

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

Шаг 4

Здесь волшебство проявляется в очень и очень немногих строках кода.

var ref = firebase.database().ref();                           ref.on("value", function(snapshot){
    output.innerHTML = JSON.stringify(snapshot.val(), null, 2);
});

Как бы просто это ни выглядело, эти две линии очень сильны.

  1. Сначала мы получаем ссылку на базу данных.
  2. Во-вторых, мы говорим, что при любом «событии значения» передайте снимок базы данных функции обратного вызова.
  3. Преобразуйте документ JSON, которым является моментальный снимок базы данных, в элемент-заполнитель в нашем HTML-файле.

Шаг 5

Откройте HTML-файл в своем любимом веб-браузере, и вы увидите представление тестовых данных. Если вы используете пример проекта из этой статьи, вы увидите несколько примеров данных. Если вы работаете со своим собственным проектом, вам нужно будет добавить несколько записей, чтобы данные отображались на вашем веб-сайте.

Наконец-то

Наслаждайтесь игрой со своими данными в Firebase и смотрите, как они обновляются в реальном времени в вашем веб-браузере.