Как подключить базу данных Firebase Realtime к форме вашего веб-сайта
Вы хотите хранить данные форм своего веб-сайта в Firebase? Если да, то вы попали в нужное место. В этой статье я покажу вам, как подключить базу данных Firebase в реальном времени к форме и сохранить ее данные в Firebase.
База данных реального времени Firebase – это база данных NoSQL, размещенная в облаке. В Firebase данные хранятся в формате JSON и синхронизируются в реальном времени со всеми подключенными клиентами, созданными с использованием SDK для iOS, Android и JavaScript. Когда мы говорим в реальном времени, это означает, что данные обмениваются между приложениями и базой данных в реальном времени (без задержек). Вы можете узнать больше о функциях Firebase в их документации.
В этом руководстве я создам простую контактную форму и сохраню данные формы в базе данных Firebase в реальном времени. Для отправки данных из формы в Firebase я буду использовать JavaScript SDK.
Конфигурация Firebase
Чтобы начать работу, перейдите в Firebase Console и создайте новый проект. Пользователь также может выбрать существующий проект. Как только вы создадите новый проект, вы будете перенаправлены на страницу, где вы получите код JavaScript Firebase. Щелкните значок кода, чтобы открыть всплывающее окно.
Скопируйте код, показанный во всплывающем окне, который потребуется в следующих шагах. В меню слева нажмите «База данных», а затем «Создать базу данных» в разделе «База данных в реальном времени».
Откроется всплывающее окно, выберите тестовый режим и, наконец, нажмите кнопку «Включить».
Вы перейдете на следующий экран, где увидите свою базу данных в реальном времени. Сейчас данных нет, поэтому ваша база данных пуста.
Подключите базу данных Firebase Realtime к форме вашего веб-сайта
Мы закончили настройку Firebase. Следующее, что нужно сделать, это создать форму и сохранить данные формы в Firebase. Давайте создадим простую контактную форму поверх Bootstrap. Создайте файл index.html и добавьте в него приведенный ниже код.
После этого создайте коллекцию, в которой будут храниться данные вашей формы. Вы можете дать коллекции любое имя. В моем случае я создаю коллекцию под названием «сообщения контактной формы».
Наконец, мы возьмем все значения формы и передадим их в Firebase при отправке формы следующим образом.
Теперь попробуйте отправить форму с фиктивными значениями и перейдите в свою базу данных Firebase в реальном времени, вы должны увидеть свои данные, хранящиеся в базе данных. Это будет выглядеть так, как показано ниже.
Чтение данных из базы данных Firebase Realtime
Надеюсь, вы узнали о подключении Firebase к форме веб-сайта. Пожалуйста, поделитесь своими мыслями и предложениями в разделе комментариев ниже.
Настройка Firebase для вашего следующего проекта
Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)
В сегодняшнем учебном пособии мы познакомим вас с Firebase, создав простое приложение для чатов, используя Javascript API Firebase. Это приложение предоставит вам строительные блоки для разработки более совершенных приложений реального времени в ваших собственных проектах.
Начинаем
Чтобы запустить Firebase, вам нужно будет создать бесплатную учетную запись разработчика, посетив их веб-сайт и зарегистрировавшись. После того, как вы успешно зарегистрировались, Firebase перенаправит вас на панель управления вашей учетной записью, где у вас будет доступ ко всем местоположениям данных Firebase и другим интересным функциям. Однако сейчас вы должны выбрать местоположение данных Firebase под названием MY FIRST APP. Не стесняйтесь переименовывать это приложение или создать новое.
Когда было выбрано местоположение данных Firebase, ему будет присвоено собственное уникальное имя host-name. Это уникальное имя хоста очень важно; Потому что это место, где ваши данные будут прочитаны и написаны. Мы обсудим имя хоста более подробно, позже в учебнике, но на данный момент:
Начнем строить
Первый пункт повестки дня: создайте новый HTML-файл, который ссылается на клиент Firebase, jQuery и Bootstrap CDN. Совершенно очевидно, что нам нужно ссылаться на CDN Firebase. Теперь может быть не так понятно, почему мы ссылаемся на jQuery и Bootstrap. Я использую jQuery и Bootstrap для быстрой разработки приложений. Обе эти библиотеки позволяют мне делать что-то очень быстро, и они не требуют большого количества дополнительного кода. Тем не менее, я не буду подробно обсужать ни jQuery, ни Bootstrap. Поэтому не стесняйтесь больше узнать об этих библиотеках JavaScript самостоятельно.
HTML-код
Разметка, которая реализует то, что я описал, выглядит следующим образом:
Теперь, когда мы создали наш HTML-файл и ссылаемся на правильные CDN, давайте приступим к разработке остальной части нашего приложения.
Во-первых, нам нужно определить, какие существенные функциональные возможности потребуется для этого приложения. Похоже, что большинство приложений в стиле чатов имеют два сходства: поле для отправки сообщений на сервер и раздел, который заполняется сообщениями с сервера. В нашем случае этот сервер будет нашим местоположением данных Firebase.
Разметка, которая реализует то, что я описал выше, выглядит так:
Разметка, которая реализует то, что я описал выше, выглядит следующим образом:
На данный момент мы не будем работать с panel-body. Тем не менее, нам нужно будет использовать этот раздел позже в учебнике для заполнения сообщений из нашего местоположения данных.
Разметка, которая реализует то, что я описал выше, выглядит следующим образом:
Теперь давайте реализуем JavaScript, который позволит нам отправить сообщение в местоположение данных Firebase.
JavaScript
Сначала нам нужно добавить набор тегов script непосредственно над закрывающим тегом body в файле HTML. В тегах сценария нам нужно создать ссылку на местоположение данных Firebase. Без этой ссылки мы не можем записывать данные в наше местоположение данных. Это может быть выполнено путем инициализации конструктора Firebase и передачи нашего местоположения данных в качестве параметра. Помните, что местоположение данных Firebase было создано при настройке Firebase (уникальное имя хоста).
Код, который реализует то, что я описал выше, выглядит следующим образом:
После инициализации ссылочного объекта Firebase нам нужно привязать обработчик события клика к селектору кнопки отправки. Расположение этого селектора находится в футере панели. Кроме того, нам нужно убедиться, что обратный вызов обработчика события содержит оператор return false как последнюю строку кода. Это гарантирует, что действие по умолчанию для отправки формы не произойдет и не позволит событию разбудить дерево DOM. Однако в некоторых случаях вам может понадобиться всплывание событий вверх по DOM.
В приведенных ниже фрагментах JavaScript реализовано то, что описано выше:
Затем мы определим переменную, которая ссылается на селектор комментария и другую переменную, которая удаляет пробелы с начала и конца значения комментария.
Код, который реализует то, что я описал выше, выглядит следующим образом:
Теперь нам нужно определить метод, необходимый для фактического написания комментариев к нашему местоположению.
Запись данных в Firebase
После просмотра методов set() и push() ; Я думаю, что совершенно очевидно, что нам нужно использовать метод push() в нашем приложении. В противном случае мы будем постоянно перезаписывать последний комментарий в нашем местоположении данных, и это было бы невесело.
Код, который реализует то, что я описал выше, выглядит следующим образом:
Код, который реализует то, что я описал выше, выглядит следующим образом:
Отлично, мы успешно завершили раздел нашего приложения, который позволяет пользователям записывать данные в наше местоположение. Но, у нас есть недостаток в функциональности, которая предоставляет пользователям чат в режиме реального времени. Этот тип приложения потребует возможности считывать данные из дочерних местоположений в пределах местоположения данных.
Чтение данных из Firebase
Как мы упоминали ранее, большинство приложений в стиле чатов читают данные с сервера, а затем заполняют раздел интерфейса. Нам нужно будет сделать то же самое в нашем приложении, используя API Firebase.
Выбор eventType
Аргумент « eventType » имеет несколько параметров. Давайте посмотрим на каждого, чтобы мы могли определить, какой из них лучше всего будет отвечать нашим потребностям.
Просмотрев приведенные выше варианты, кажется совершенно очевидным, что мы должны использовать « child_added » как наш « eventType ». Этот тип события будет запускаться один раз для каждого комментария в нашем местоположении данных, а также каждый раз, когда добавляется новый комментарий. Кроме того, при добавлении нового комментария он не вернет весь набор комментариев в этом месте, а только последний добавленный. Это именно то, что мы хотим! Нет необходимости возвращать весь набор комментариев при добавлении нового комментария.
Анализ callback
Функция член val() предоставляет нам представление объекта JavaScript «моментального снимка данных» и с помощью этого моментального снимка, мы сможем получить комментарий из нашего местоположения данных. Однако нам нужно отступить на мгновение.
Ранее в этом уроке мы реализовали JavaScript, необходимый для ввода комментариев в наше местоположение Firebase, и мы сделали это, отдав объект с парой ключ-значение. В этом случае ключ был « comment », и значение было введенным пользователем. Поэтому, если мы хотим извлечь комментарий из нашего «моментального снимка данных», нам нужно распознать правильный тип данных. В этом случае мы имеем дело с объектом, поэтому для доступа к указанному свойству вы можете использовать либо точечную нотацию, либо скобку.
Оба приведенных ниже фрагмента JavaScript реализуют то, что описано выше:
Отображение комментариев
Затем давайте создадим простой, но чистый способ отображения каждого комментария. Это может быть легко достигнуто путем объединения каждого комментария в div и маркировки каждого комментария его уникальным именем. Обычно комментарии помечены именем пользователя, который написал этот комментарий, в нашем случае это анонимный клиент чата.
Код, который реализует то, что я описал выше, выглядит следующим образом:
Затем мы должны добавить каждый комментарий в контейнер комментария и получить текущую вертикальную позицию панели прокрутки контейнера комментария и прокрутить до этого последнего местоположения. Это гарантирует, что каждый раз, когда комментарий помещается в Firebase, все пользователи, использующие приложение чата, будут видеть последний комментарий. Все это должно быть сделано в обратном вызове.
Он должен выглядеть примерно так:
Теперь давайте применим некоторые простые стили CSS к DIV, обернутым вокруг каждого блока комментариев. Это сделает внешний вид немного более привлекательным и удобным для пользователя. Эти стили должны быть добавлены в теги style, расположенные в разделе head HTML.
Код, который реализует то, что я описал выше, выглядит следующим образом:
Запуск приложения
Пришло время запустить наше приложение. Давайте начнем с открытия двух экземпляров нашего любимого, современного браузера и размещения их рядом на нашем рабочем столе. Затем мы перейдем к нашему файлу, который мы создали, в обоих браузерах. Протестируйте это, написав несколько комментариев и наслаждайтесь просмотром магии Firebase.
Невероятно, что только пара строк кода может создавать такое мощное приложение. Не стесняйтесь редактировать этот фрагмент любым способом для получения желаемых результатов.
Посмотрите онлайн-демонстрацию, чтобы увидеть ее в действии. Ниже приведен полный исходный код для всего приложения для чатов:
В итоге
В сегодняшнем учебнике мы проработали весь процесс внедрения простого приложения для чатов, используя JavaScript API Firebase. При этом мы смогли испытать мощь Firebase и оценить его удобство. Ниже приведены некоторые из ключевых элементов, которые мы сегодня затронули:
Надеюсь, что этот урок дал вам отправную точку, с которой вы можете начать работу с Firebase. Если у вас есть какие-либо вопросы или комментарии, не стесняйтесь оставлять их ниже. Еще раз спасибо за ваше время и продолжайте исследовать бесконечные возможности API Firebase.
Артём Санников
Языки программирования
Базы данных
Программное обеспечение
Операционные системы
Мобильная разработка
Менеджеры пакетов
Сетевые технологии
CMS системы
Математика
SEO продвижение
Социальные сети
Психология
Хостинг провайдер
Смартфоны
Как добавить Firebase в Web-приложение
Чтобы добавить Firebase в своё web-приложение, необходимо выполнить ряд простых шагов, которые разделены по нескольким блокам, таким как:
1 Создание проекта
1.1 Открываем консоль Firebase Google, и нажимаем кнопку — Add project. которая инициализирует добавление нового проекта в консоль.
1.2 Указываем имя для нового проекта, в нашем случае это будет — My test project.
1.3 Далее нам предлагают включить поддержу сервиса Google Analytics для нашего проекта. Если вам нужна аналитика от Google в приложении, нажмите на переключатель — Enable Google Analytics for this project.
Теперь остаётся нажать только одну кнопку — Create project.
После того, как Firebase закончит подготовку вашего будущего проекта, вы будете автоматически перенаправлены на его главную страницу. На этом этапе мы закончили создание проекта.
2 Регистрация приложения
2.1 Далее необходимо зарегистрировать приложение для этого проекта. Это нужно для того, чтобы система понимала, какое приложение может использовать данные вашего проекта. Чтобы это сделать, необходимо нажать на кнопку — Web.
2.2 Откроется окно, в котором необходимо написать имя приложения, которое будет использовать данные вашего проекта. В нашем случае это — My test app. Затем нажимаем — Register app.
2.3 После регистрации приложения, появляется окно с конфигурационными данными. Их нужно скопировать (в следующем этапе мы добавим их в приложение). Нажимаем кнопку — Continue to console.
Обратите внимание: эти данные являются конфиденциальными.
3 Настройка базы данных
3.1 Для создания базы данных, необходимо нажать в левой колонке — Realtime Database, а затем — CreateDatabase.
3.2 Выбираем местоположение для хранения нашей базы данных, затем нажимаем — Next.
3.3 Сейчас мы должны определить правила безопасности для нашей базы данных. Всего доступно два режима:
После того, как определить с правилами безопасности, нажимаем — Enable.
Примечание: поскольку это наш тестовый проект, выбираем правила безопасности — Start in test mode.
3.4 После того, как мы применили правила безопасности, Firebase автоматически перенаправит нас на страницу с созданной базой данных.
4 Аутентификация пользователей
4.1 Следующий важный этап — это аутентификация пользователей. На этом этапе мы определяем, как пользователи будут получать доступ к правам на запись и чтение базы данных.
Находим пункт — Authentication, а затем нажимаем — Get started.
4.2 Поскольку у нас тестовый проект, мы выберем метод аутентификации — Anonymous, и это будет означать, что любой пользователь сможет читать и выполнять запись в базе данных. И при этом, ему не нужно будет выполнять авторизацию, перед этими действиями.
5 Добавление конфигурационных данных в приложение
5.1 Чтобы добавить конфигурационные данные в своё web-приложение, необходимо открыть код проекта и вставить полученные данные между тегами
Add Firebase to your JavaScript project
Follow this guide to use the Firebase JavaScript SDK in your web app or as a client for end-user access, for example, in a Node.js desktop or IoT application.
Step 1: Create a Firebase project and register your app
Before you can add Firebase to your JavaScript app, you need to create a Firebase project and register your app with that project. When you register your app with Firebase, you’ll get a Firebase configuration object that you’ll use to connect your app with your Firebase project resources.
Visit Understand Firebase Projects to learn more about Firebase projects and best practices for adding apps to projects.
Create a Firebase project
In the Firebase console, click Add project.
To add Firebase resources to an existing Google Cloud project, enter its project name or select it from the dropdown menu.
To create a new project, enter the desired project name. You can also optionally edit the project ID displayed below the project name.
If prompted, review and accept the Firebase terms.
Click Continue.
(Optional) Set up Google Analytics for your project, which enables you to have an optimal experience using any of the following Firebase products:
Either select an existing Google Analytics account or to create a new account.
If you create a new account, select your Analytics reporting location, then accept the data sharing settings and Google Analytics terms for your project.
Click Create project (or Add Firebase, if you’re using an existing Google Cloud project).
Firebase automatically provisions resources for your Firebase project. When the process completes, you’ll be taken to the overview page for your Firebase project in the Firebase console.
Register your app
After you have a Firebase project, you can register your web app with that project.
In the center of the Firebase console’s project overview page, click the Web icon ( plat_web ) to launch the setup workflow.
If you’ve already added an app to your Firebase project, click Add app to display the platform options.
Enter your app’s nickname.
This nickname is an internal, convenience identifier and is only visible to you in the Firebase console.
Click Register app.
Follow the on-screen instructions to add and initialize the Firebase SDK in your app.
You can also find more detailed instructions for adding, initializing, and using the Firebase SDK in the next steps of this getting started page.
If you don’t already have a JavaScript project and just want to try out a Firebase product, you can download one of our quickstart samples.
Step 2: Install the SDK and initialize Firebase
This page describes setup instructions for version 9 of the Firebase JS SDK, which uses a JavaScript Module format.
This workflow uses npm and requires module bundlers or JavaScript framework tooling because the v9 SDK is optimized to work with module bundlers to eliminate unused code (tree-shaking) and decrease SDK size.
Install Firebase using npm:
Initialize Firebase in your app and create a Firebase App object:
A Firebase App is a container-like object that stores common configuration and shares authentication across Firebase services. After you initialize a Firebase App object in your code, you can add and start using Firebase services.
Using browser modules is a quick way to get started, but we recommend using a module bundler for production.
Step 3: Access Firebase in your app
Firebase services (like Cloud Firestore, Authentication, Realtime Database, Remote Config, and more) are available to import within individual sub-packages.
The example below shows how you could use the Cloud Firestore Lite SDK to retrieve a list of data.
Step 4: Use a module bundler (webpack/Rollup) for size reduction
The Firebase Web SDK is designed to work with module bundlers to remove any unused code (tree-shaking). We strongly recommend using this approach for production apps. Tools such as the Angular CLI, Next.js, Vue CLI, or Create React App automatically handle module bundling for libraries installed through npm and imported into your codebase.
See our guide Using module bundlers with Firebase for more information.
Available Firebase services for web
Now that you’re setup to use Firebase, you can start adding and using any of the following available Firebase services in your web app.
Next steps
Learn about Firebase:
Get hands-on experience with the Firebase Web Codelab.
Review the supported environments for the Firebase JavaScript SDK.
Speed up your development with additional Firebase-maintained open source libraries, like AngularFire, RxFire, and FirebaseUI for web.
Prepare to launch your app:
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Add Firebase to your JavaScript project
Follow this guide to use the Firebase JavaScript SDK in your web app or as a client for end-user access, for example, in a Node.js desktop or IoT application.
Step 1: Create a Firebase project and register your app
Before you can add Firebase to your JavaScript app, you need to create a Firebase project and register your app with that project. When you register your app with Firebase, you’ll get a Firebase configuration object that you’ll use to connect your app with your Firebase project resources.
Visit Understand Firebase Projects to learn more about Firebase projects and best practices for adding apps to projects.
Create a Firebase project
In the Firebase console, click Add project.
To add Firebase resources to an existing Google Cloud project, enter its project name or select it from the dropdown menu.
To create a new project, enter the desired project name. You can also optionally edit the project ID displayed below the project name.
If prompted, review and accept the Firebase terms.
Click Continue.
(Optional) Set up Google Analytics for your project, which enables you to have an optimal experience using any of the following Firebase products:
Either select an existing Google Analytics account or to create a new account.
If you create a new account, select your Analytics reporting location, then accept the data sharing settings and Google Analytics terms for your project.
Click Create project (or Add Firebase, if you’re using an existing Google Cloud project).
Firebase automatically provisions resources for your Firebase project. When the process completes, you’ll be taken to the overview page for your Firebase project in the Firebase console.
Register your app
After you have a Firebase project, you can register your web app with that project.
In the center of the Firebase console’s project overview page, click the Web icon ( plat_web ) to launch the setup workflow.
If you’ve already added an app to your Firebase project, click Add app to display the platform options.
Enter your app’s nickname.
This nickname is an internal, convenience identifier and is only visible to you in the Firebase console.
Click Register app.
Follow the on-screen instructions to add and initialize the Firebase SDK in your app.
You can also find more detailed instructions for adding, initializing, and using the Firebase SDK in the next steps of this getting started page.
If you don’t already have a JavaScript project and just want to try out a Firebase product, you can download one of our quickstart samples.
Step 2: Install the SDK and initialize Firebase
This page describes setup instructions for version 9 of the Firebase JS SDK, which uses a JavaScript Module format.
This workflow uses npm and requires module bundlers or JavaScript framework tooling because the v9 SDK is optimized to work with module bundlers to eliminate unused code (tree-shaking) and decrease SDK size.
Install Firebase using npm:
Initialize Firebase in your app and create a Firebase App object:
A Firebase App is a container-like object that stores common configuration and shares authentication across Firebase services. After you initialize a Firebase App object in your code, you can add and start using Firebase services.
Using browser modules is a quick way to get started, but we recommend using a module bundler for production.
Step 3: Access Firebase in your app
Firebase services (like Cloud Firestore, Authentication, Realtime Database, Remote Config, and more) are available to import within individual sub-packages.
The example below shows how you could use the Cloud Firestore Lite SDK to retrieve a list of data.
Step 4: Use a module bundler (webpack/Rollup) for size reduction
The Firebase Web SDK is designed to work with module bundlers to remove any unused code (tree-shaking). We strongly recommend using this approach for production apps. Tools such as the Angular CLI, Next.js, Vue CLI, or Create React App automatically handle module bundling for libraries installed through npm and imported into your codebase.
See our guide Using module bundlers with Firebase for more information.
Available Firebase services for web
Now that you’re setup to use Firebase, you can start adding and using any of the following available Firebase services in your web app.
Next steps
Learn about Firebase:
Get hands-on experience with the Firebase Web Codelab.
Review the supported environments for the Firebase JavaScript SDK.
Speed up your development with additional Firebase-maintained open source libraries, like AngularFire, RxFire, and FirebaseUI for web.
Prepare to launch your app:
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.