Firebase Cloud Firestore Web Codelab

В этой codelab мы узнаем, как добавить Firebase в ваше веб-приложение и обслуживать контент из Firebase Cloud Firestore, а также заставить ваше веб-приложение работать в автономном режиме.

Необходимые инструменты

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

1. Создать проект Cloud Firestore

Откройте Firebase Console и создайте новый проект. В разделе База данных нажмите кнопку Начать для Cloud Firestore.

2. Выберите начальный режим для правил безопасности Cloud Firestore

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

Начало работы с кодом

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

В нашем проекте также есть service-worker.js, который позволяет нам добавлять прогрессивные офлайн-функции веб-приложений. Узнай больше о сервис-воркере и его возможностях.

1. Добавление Firebase в наше веб-приложение

Зайдите в свою консоль firebase и выберите свой проект. Щелкните значок Параметры в верхнем левом углу рядом с Обзор проекта и выберите Параметры проекта. Прокрутите представление вниз и нажмите Добавить Firebase на значок веб-приложения. Не закрывайте вкладку.

Убедитесь, что вы находитесь в рабочей папке. Откройте папку с приложением. Здесь у нас есть main.css и faqbeta.js, которые стилизуют наше веб-приложение и пустые файлы javascript; app.js, firestores.js и data.js. Мы собираемся добавить к ним код.
Откройте firestores.js и скопируйте в него фрагмент кода ниже. Замените значения данных firebase значениями на вкладке консоли firebase, которую вы оставили открытой выше.

// Initialize Firebase
let config = {
    databaseURL: "https://databaseName.firebaseio.com",
    projectId: "projectId",
};

firebase.initializeApp(config);
let firestore = firebase.firestore();
console.log("Cloud Firestores Loaded");

2. Включить офлайн-данные

Эта функция кэширует копию данных Cloud Firestore, которые ваше приложение активно использует, поэтому ваше приложение может получить доступ к данным, когда устройство находится в автономном режиме. Приведенный ниже фрагмент кода делает это за нас. Скопируйте и добавьте его под кодом выше в файле firestore.js.

// Enable offline capabilities
firebase.firestore().enablePersistence()
    .then(function() {
        // Initialize Cloud Firestore through firebase
        var db = firebase.firestore();
    })
    .catch(function(err) {
        if (err.code == 'failed-precondition') {
            // Multiple tabs open, persistence can only be enabled in one tab at a a time.

        } else if (err.code == 'unimplemented') {
            // The current browser does not support all of the
            // features required to enable persistence
            // ...
        }
    });

3. Прочитать данные пожарного склада из базы данных в коллекции встреч

Приведенный ниже код позволяет нам читать данные firestore из нашей базы данных в созданной коллекции собраний; Добавьте его под кодом выше

// Read firestore data from database in the meetups collection
db.collection("meetups").get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        console.log(`${doc.id} =>`, doc.data());
        const meetups = doc.data();
        next_title.innerText = meetups.next_title;
        next_desc.innerText = meetups.next_desc;
        next_rsvp_url.href = meetups.next_rsvp_url;
        recent_title.innerText = meetups.recent_title;
        recent_desc.innerText = meetups.recent_desc;
        recent_rsvp_url.href = meetups.recent_rsvp_url;
    });
});

Объяснение: Например, код next_title.innerText получает значение заголовка следующей встречи и передает его в наш data.js, который затем отображается в нашем веб-приложении в элементе абзаца; т.е.

<p class="faqbeta_accordion" id="next_title">
    <!-- load next title from cloud 
    firestore --> loading...
    </p>

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

4. Создайте документ «встречи в нашей базе данных »

Cloud Firestore хранит данные в документах, которые хранятся в коллекциях. Cloud Firestore неявно создает коллекции и документы при первом добавлении данных в документ. В папке приложения откройте файл data.js и скопируйте в него фрагмент кода ниже.

// Create meetups document
var docRef = db.collection("meetups").doc("categ");
docRef.set({
        next_title: "pwa dev summit 2019",
        next_desc: "Meet awesome web developers and designers for a two-day developer summit.",
        next_rsvp_url: "https://pwafire.org/developer/codelabs/cloud-firestore-for-web/",
        recent_title: "pwa dev summit 2019",
        recent_desc: "Meet awesome web developers and designers for a two-day developer summit.",
        recent_rsvp_url: "https://pwafire.org/developer/codelabs/cloud-firestore-for-web/",
    })

    .then(function () {
        console.log("Document successfully created!");
    });

5. Отображать данные в нашем веб-приложении

В папке приложения снова откройте app.js и добавьте к нему фрагмент кода ниже.

// Display data into our web app
const next_title=document.querySelector("#next_title");
const next_desc=document.querySelector("#next_desc");
const recent_title=document.querySelector("#recent_title");
const recent_desc=document.querySelector("#recent_desc");

Объяснение: Код next_title.innerText на этапе 3 для получает значение заголовка следующей встречи и передает его в наш data.js, который затем отображается в нашем веб-приложении в элементе абзаца; т.е. наш элемент абзаца имеет свой идентификатор как next_title, и мы используем этот идентификатор для отображения данных в нашем элементе абзаца.

<p class="faqbeta_accordion" id="next_title">
    <!-- load next title from cloud 
    firestore --> loading...
    </p>

Хостинг Firebase

Мы сделали! Давайте теперь развернем наше веб-приложение облачного хранилища данных на firebase! Следуйте этому руководству здесь, чтобы развернуть наше веб-приложение. Перейдите в автономный режим и обновите свое веб-приложение. Данные веб-приложения по-прежнему доступны в автономном режиме.

Если вы используете браузер Chrome, откройте Инструменты разработчика и, находясь на панели приложений, выберите Service Worker и включите автономный режим. Обновите свое веб-приложение. Празднуйте! Вы уже не ботаник?

"Что дальше?"

У вас есть ошибка? Сообщите об этом здесь для поддержки. Вы хотите внести свой вклад? Создайте свою функцию здесь.

Firebase Cloud Firestore Web Codelab

4. Создайте документ «встречи в нашей базе данных »

"Что дальше?"

Вопросы по теме