Давайте создадим счетчик щелчков JavaScript, который отслеживает клики, благодаря базе данных FireBase Realtime!
Вы можете увидеть живой результат здесь: https://jsfiddle.net/Icesofty/kz4u2rt9/3/
Основы
Во-первых, нам нужны базовые файлы: наша точка входа, index.html и наш скрипт click-counter.js.
// index.html
Firebase & JS
// We save our button element into a variable
const btn = document.getElementById("btn");
// We save our counter element into a variable
const counterID = document.getElementById("counter");
// We start our counter at 0
let counter = 0;
// Everytime a user click on the button, we will call this function to display the counter
function updateCounter() {
counterID.innerHTML = `${counter} visitors clicked on this button`;
}
// Everytime a user clicks on the button, we will increment the counter by one.
btn.addEventListener("click", function (e) {
counter++;
updateCounter();
});
Давайте добавим свой скрипт в ваш файл index.html
****
Firebase & JS
результат
Мы знаем, что есть супер простой, но все же рабочий Click Counter, Cool!
Но есть одна главная проблема Отказ Текущее состояние счетчика не сохраняется и сбрасывается каждый раз, когда мы перезагрузим страницу. Кроме того, счетчик не Синхронизация С гостиницами: это местный счетчик.
Firebase
Чтобы отслеживать счетчик, нам нужно увеличить его каждый раз, когда пользователь нажимает на него, а магазин Обновленное состояние в базу данных.
Для этого мы будем использовать База данных в реальном времени От Firebase (Firebase – это не База данных, Firebase – это набор готовых к развернутым инструментам для вашего проекта). Realtime DB – это база данных типа NoSQL, которая принимает буквально 5 минут для настройки. Значения хранятся в JSON-подобном дереве, что делает их действительно легко читать и манипулировать.
Во-первых, нам нужно создать учетную запись в https://firebase.google.com/ . Затем пойдем на нашу консоль!
Теперь мы можем добавить новый проект
Давайте назвать наш проект «мой-счетчик»
Для этого проекта мы можем отключить Google Analytics, нам не понадобится.
Ура! Наш проект FireBase теперь живет и готов.
Добро пожаловать на приборную панель. Здесь у вас есть доступ ко всем инструментам, предоставляемым Firebase. Мы собираемся создать базу данных, поэтому нажмем базу данных!
Firebase имеет два типа БД. Давайте выберем базу данных в реальном времени.
На данный момент мы выберем второй вариант «Начать тестовый режим», чтобы увидеть, как и за исключением всего, что связано.
Мы сейчас на нашей БД! Вы заметите две вещи:
- Ваш URL URL, наверху, что должно выглядеть так: https://your-project-name-00000.firebaseio.com/ Отказ Скопируйте этот URL-адрес где-нибудь, нам понадобится это позже.
- И Наше пустое тело БД 😇
Чтобы отслеживать счетчик, нам сначала нужно создать ребенка в нашу БД и создать ключ – валюченную пару для фактического счетчика. Нажмите на «+»
Для проекта я назову свой ребенок «My-Online-Counter», не входите ни одного значения, поскольку это просто ребенок, а не фактические данные. Чтобы создать нашу счетчик счетчиков, давайте снова нажмем «+».
Это создаст другого ребенка! Я назову его «счетчик» и добавить значение 0 в качестве исходного значения. Потому что, ну, никто еще не нажал на нашу кнопку 😉
После этого мы можем теперь нажать на синюю кнопку «Добавить». И мы закончили с базой данных … пока!
Теперь, когда наша база данных готова, пришло время внести некоторые изменения в наш сценарий JS:
Во-первых, нам нужно Получить данные и отображение значения счетчика, чтобы показать количество времени, которое кнопка нажала
Тогда нам нужно Обновление Счетчик Если пользователь нажимает на кнопку, а затем обновить и отобразите обновленный счетчик.
Чтобы получить и обновить данные, мы собираемся использовать Axios. Axios – это “ Обещают HTTP-клиент для браузера и Node.js “. Другими словами, вы можете использовать HTTP-методы (или операции CRUD) непосредственно в ваш файл JS.
Получить значение
Я хочу отобразить количество раз, когда посетитель нажал на кнопку, когда отображается веб-страница.
Во-первых, нам нужно добавить Axios в наш файл index.html,
Тогда мы добавим axios.get () Метод в наш файл JS.
****
Firebase & JS
const btn = document.getElementById("btn");
const counterID = document.getElementById("counter");
// Let's save our Firebase Realtime DB URL into a variable
**const firebase = "https://my-counter-5a9a7.firebaseio.com/";**
// Because we are fetching the current counter state from a Database,
// We don't need to start the counter at 0.
// let counter = 0;
// We want to fetch and display the current state
// of the counter every time someone visits our website.
**function get() {**
// We want the data from the child we created, so let's concat it into our URL
// Note that every endpoint needs .json at the end!
**axios.get(firebase + "my-online-counter.json").then((response) => {**
// Once the connection made to the Database, we can use the reponse to update the counter
**counter = response.data.counter;**
// Once the coutner updated, we can display the current counter state.
**updateCounter();
});
}**
function updateCounter() {
counterID.innerHTML = `${counter} visitors clicked on this button`;
}
btn.addEventListener("click", function (e) {
counter++;
updateCounter();
});
// We call the get() function everytime a user launch the script
**get();**
Теперь мы можем получить данные из нашей БД и отображать результат непосредственно в веб-страницу. Но есть еще проблема: счетчик все еще обновляется только на нашей местной машине. 🤔
Нам нужно обновить счетчик в нашей БД.
Обновите значение
Теперь я хочу обновить значение счетчика, когда кто-то нажимает на кнопку, и перезагрузить счетчик, отображаемый на странице.
Для этого нам нужно добавить AXIOS.PUT () Метод в наш файл JS.
const btn = document.getElementById("btn");
const counterID = document.getElementById("counter");
const firebase = "https://my-counter-5a9a7.firebaseio.com/";
function get() {
axios.get(firebase + "my-online-counter.json").then((response) => {
counter = response.data.counter;
updateCounter();
});
}
function updateCounter() {
counterID.innerHTML = `${counter} visitors clicked on this button`;
}
// Everytime a user clicks on the button,
// we want to Update the counter into the database
**btn.addEventListener("click", function (e) {
axios**
// First, we need to reach our DB
**.put(firebase + "my-online-counter.json", {**
// Then, we needs to specify the new data for my-online-counter
**** // In our case, we simply increment the counter into the DB by one.
**counter: counter + 1
})
.then(() => {**
// Once it's done, we call the get() function again.
//To display the updated counter.
**get();
})**
// If there is an error, we can log it.
**.catch((error) => console.log(error));
});**
get();
Ура! Наш проект сейчас работает, как и ожидалось. Мы можем получить данные из нашей БД и увеличивать значение счетчика в нашей БД, когда мы нажимаем на него.
Но есть одна основная проблема безопасности Отказ Наши правила базы данных в реальном времени позволяют каждому красному и записи в нашу базу данных! Настолько буквально кто-то может удалить наши записи базы данных и увеличить или уменьшить наш счетчик по любому значению!
Обновление наших правил
Чтобы избежать такого сценария, нам необходимо обновить наши правила БД.
Во-первых, пойдем на вкладку правил.
Тогда давайте обновим правила
// old rules
{
"rules": {
// Anyone can Create/Read/Update/Delete our database entries
".read": true,
".write": true
}
}
// New rules
{
"rules": {
// We set the rule for our child
"my-online-counter": {
// We allow everybody to READ the data
".read": true,
// We only allow updates on existing data & we don't allow creating new data
".write": "data.exists() && newData.exists()",
"counter": {
// To validate our counter update,
// and avoid decrementing the value or incrementing more than +1,
// the data updated needs to be equal to the actual data + 1
".validate": "newData.val() == data.val() + 1"
}
}
}
}
И мы закончили! Мы знаем, что есть полностью рабочий клик Click в Vanilla JS, благодаря Axios и базу данных Realtime по Firebase. Надеюсь, вам понравилась моя первая статья,
Ура 🤙.
Оригинал: “https://dev.to/icesofty/firebase-x-axios-x-js-let-s-create-a-simple-synchronized-clicks-counter-41co”