Привет! В этой статье я познакомлю вас всех с тем, как мы можем интегрировать базу данных реального времени из Firebase с нашим javascript-приложением, а также объясню все функции, которые я включил в свое приложение. Мы будем выполнять функцию за функцией.

НАЖМИТЕ ЗДЕСЬ, чтобы просмотреть мое приложение.

Если кто-то хочет научиться хранить данные в firebase, я вам помогу. Я объясню весь CRUD — создание, чтение, обновление и удаление. Итак, давайте начнем.

Темы для обсуждения :-

  • Создание нового проекта в firebase
  • Добавьте firebase в наше веб-приложение JS.
  • Создать базу данных в реальном времени
  • JavaScript для CRUD — создание, чтение, обновление и удаление
  • Объяснение моего кода JS для функции приложения диспетчера задач по функциям.

Давайте сначала начнем с FIREBASE — создайте новый проект

  1. Если (у вас нет учетной записи) {создайте ее} иначе {войдите}.
  2. Перейдите на https://console.firebase.google.com/
  3. Нажмите Добавить проект
  4. Дайте вашему проекту имя и нажмите «Продолжить».
  5. Включите или отключите Google Analytics для проекта в зависимости от вашего выбора. Я лично инвалид.
  6. Нажмите «Создать проект». После сборки проекта вы получите сообщение — «Ваш новый проект готов». Нажмите кнопку «Продолжить».
  7. Теперь ваш проект готов.

Теперь давайте добавим firebase в наше приложение JavaScript

  1. Нажмите на значок, показанный на изображении выше, чтобы добавить firebase в ваше веб-приложение.
  2. Теперь зарегистрируйте свое приложение, указав псевдоним. Если вы хотите настроить хостинг firebase, установите флажок, иначе оставьте его. Я использовал netlify для размещения своего приложения, поэтому я оставил флажок не отмеченным.
  3. Теперь нажмите кнопку Зарегистрировать приложение.
  4. Теперь вы получите несколько скриптов — FIREBASE SDK

‹! — Базовый SDK Firebase JS всегда требуется и должен быть указан первым →
‹script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-app.js'›‹ /скрипт›

‹! — TODO: добавьте SDK для продуктов Firebase, которые вы хотите использовать
https://firebase.google.com/docs/web/setup#available-libraries →

‹script›
// Конфигурация Firebase вашего веб-приложения
var firebaseConfig = {
apiKey: «AIzaSyAbUP_P_9MdFKxbmct**mPH6BHKZ861WVA»,
authDomain: «sampleproject-d****. firebaseapp.com»,
projectId: «sampleproject-d****»,
storageBucket: «sampleproject-d****.appspot.com»,
messageSenderId: «15507* *22530”,
appId: “1:155***322530:web:36188bcf8f***f569b2dfb”
};
// Инициализировать Firebase
firebase.initializeApp(firebaseConfig );
‹/script›

5. Добавьте скрипт с переменной firebaseConfig в созданный вами .js файл в самом начале файла.

6. Добавьте скрипт с src в свой html-файл внутри тега head. Я добавил еще 2 скрипта ‹script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-auth.js›‹/script›

‹script src=”https://www.gstatic.com/firebasejs/8.2.3/firebase-database.js›‹/script›

7. Измените его на последнюю версию, указанную в SDK, предоставленном вам firebase.

8. Теперь все готово для создания базы данных и выполнения всех операций CRUD. Нажмите перейти к консоли, чтобы начать.

Теперь давайте создадим нашу базу данных

  1. Нажмите «База данных в реальном времени» на боковой панели, а затем нажмите «Создать базу данных».
  2. Нажмите Далее → Оставьте выбранным параметр Запускать в заблокированном режиме → Нажмите Включить.
  3. На данный момент вы не можете ни читать, ни писать в базу данных.
  4. Перейдите на вкладку правила.
  5. для чтения и записи будет установлено значение false. Измените его на true как для чтения, так и для записи, а затем нажмите Опубликовать.
  6. Теперь настройка вашей базы данных завершена. Теперь вы можете запустить javascript и поработать с вашей базой данных.

JavaScript для CRUD — создание, чтение, обновление, удаление

  1. Создать —

firebase.database().ref('parentNodeName/'+ 'childNodeName').set({

ключ1 : значение1,

ключ2 : значение2,

});

Функция ref принимает путь, по которому вам нужно хранить данные (пара ключ-значение).

2. Читать —

firebase.database().ref('parentNodeName' + 'childNodeName').on('value', function(snapshot){

данные = моментальный снимок.val(); //Переменная данных будет содержать все данные, присутствующие внутри дочернего узла

});

Функция ref выбирает путь, по которому вам нужно прочитать полные данные.

3. Обновление —

firebase.database().ref('parentNodeName/'+ 'childNodeName').update({

старый ключ: новое значение,

старый ключ : новое значение

})

Функция ref выбирает путь, по которому вам нужно обновить данные.

4. Удалить —

firebase.database().ref('parentNodeName').remove();

Функция ref принимает путь, по которому вы хотите удалить все данные.

FIREBASE Готово✔️.

Теперь давайте посмотрим на код моего проекта — приложение диспетчера задач

Вы можете проверить код проекта в моем репозитории на github — нажмите здесь

Я не буду объяснять часть HTML и CSS, потому что надеюсь, что мои читатели хорошо знают об этом и могут понять это очень хорошо. Я сосредоточусь на объяснении функций и связанных с ними функций в JavaScript. Итак, давайте начнем.

1. Изменение цвета метки и поля ввода в зависимости от фокуса поля ввода

Я добавил прослушиватели событий — focusin и focusout. Когда пользователь щелкает или фокусируется на поле ввода, цвет меняется с серого на синий, а когда пользователь щелкает в другом месте или поле ввода теряет фокус, цвет возвращается к нормальному.

2. Функция storeTask()

Функция storeTask() вызывается при отправке формы. Данные из формы считываются и сохраняются в переменных JS, а поля очищаются. Затем считанные данные сохраняются в базе данных. Каждая задача, хранящаяся в базе данных, представлена ​​уникальным номером (кодовой переменной). Я использовал свой собственный способ создания приложения. Вы можете сделать это по-своему, следуя собственной логике. После сохранения данных в БД задача отображается в правой части экрана в виде небольших прямоугольных карточек. Вид меняется в зависимости от ширины экрана. Вы можете прочитать о функции .insertAdjacentElement() в сети. HTML-код, который я упомянул здесь в JavaScript, будет добавлен рядом с элементом с идентификатором заголовка задачи и останется там, пока вы не перезагрузите окно.

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

3. функция редактирования данных ()

Здесь, когда пользователь нажимает кнопку ИЗМЕНИТЬ ЗАДАЧУ, данные из той конкретной карточки товара, к которой принадлежит кнопка, заполняются в форме, а кнопки меняются с Добавить на Обновить задачу и Отмена. Приведенный выше код делает все это. Кнопка ОБНОВИТЬ ЗАДАЧУ здесь вызывает функцию updateData(), которой передается уникальный код задачи.

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

4. Функция updateData()

Эта функция вызывается кнопкой ОБНОВИТЬ ЗАДАЧУ, которая появляется, когда мы хотим обновить ранее сохраненную задачу. При нажатии кнопки новые данные, введенные пользователем, считываются в переменные, а затем с помощью кода данные обновляются в том же месте в БД, где раньше находилась задача. После этого данные поля очищаются, кнопки убираются, кнопка ДОБАВИТЬ возвращается, а также задача обновляется в списке задач, видимом на экране.

5. Функция отмены обновления ()

Эта функция вызывается кнопкой «Отмена», которая появляется, когда мы хотим обновить ранее сохраненную задачу. Когда мы нажимаем кнопку «Отмена», данные очищаются из полей, обе кнопки «ОБНОВИТЬ ЗАДАНИЕ» и «ОТМЕНА» удаляются, а в форму добавляется кнопка «ДОБАВИТЬ».

6. функция удаления данных ()

При нажатии кнопки конкретная задача удаляется из БД, а ее карточка также удаляется из боковой панели. Ключ totalItems в БД также обновляется до нового значения.

7. функция показать все()

Чтобы узнать, откуда берется значение переменной данных, обратитесь к полному коду на моем github. 1-й if-else — если в БД нет данных, а также нет информации ранее отображается, затем информация = Отложенные задачи не отображаются. 2nd if-else — если в базе данных нет данных, а некоторая информация ранее отображалась, то сначала удалите предыдущую информацию, а затем отобразите новая информация. Если данные присутствуют, удалите все элементы задач, если они отображаются на экране. Теперь запустите цикл for по данным, сохраните фрагменты данных в разных переменных. Переменная данных содержит простой словарь. Снова отобразите данные в виде карточек для всех задач и отобразите в разделе Мои задачи.

Говоря о маленьком символе галочки в крайнем правом верхнем углу, это означает, что задача завершена или находится в ожидании. Пользователь может изменить статус задачи, нажав на этот символ. Если его цвет серый, то задача находится в ожидании. Когда вы нажимаете на это, символ становится зеленым, «завершено», написанное мелким шрифтом, отображается под описанием задачи, а кнопка «Редактировать задачу» отключена. Это моя любимая функция в этом приложении. Это мило. Статус также обновляется в БД.

8. функция удаления всех()

Если сохранено 0 элементов и информация не отображается, то под заголовком Мои задачи отображается сообщение «Нет незаконченных задач». Если в БД присутствуют задачи, то у пользователя запрашивается подтверждение, действительно ли пользователь хочет удалить все задачи или нет. Если пользователь выбирает «ОК», данные в БД удаляются, а также удаляются задачи, отображаемые под заголовком Мои задачи. Также значения totalItems и maxCode обновляются до нулевого значения.

Теперь после удаления задач отображается сообщение «Все элементы удалены».

9. функция changeStatus()

Эта функция работает с символом галочки. Он изменяет статус задачи и, соответственно, вносит необходимые изменения. Сначала он считывает статус конкретной задачи из БД, для которой была нажата галочка. Если статус "ожидается", то

  • он обновляется до «завершенного» в БД
  • символ галочки окрашен в зеленый цвет
  • кнопка EDIT TASK отключена, а цвет изменен
  • также небольшой текст «завершено» отображается под описанием задачи

Если статус чтения из БД == «завершено», то все изменения устанавливаются по умолчанию.

Теперь все функции JS завершены. Надеюсь, вы смогли понять мои слова.

Это приложение пока открыто для всех. Нет страницы входа в систему. Я скоро добавлю это и сделаю это полноценным полезным веб-приложением.

Блоги — это действительно хороший способ отладки, обмена, а также руководство для себя в будущем, так что если вы забудете свой собственный код в будущем, это может помочь вам отследить его. Я сам нашел 2 ошибки в своем коде при написании этого блога и решил их. Также обнаружил, что есть повторение кода, который пока не меняю. Писать блоги — это действительно хорошо.

Уважаемые читатели

Если вы обнаружите какие-либо ошибки, неисправности или какие-либо проблемы с приложением, пожалуйста, свяжитесь со мной. Я был бы рад.

электронная почта — [email protected]

Имя пользователя в Instagram — gagan_singhkalsi11

Спасибо

Весь код пушит в мой репозиторий, ссылка на который здесь. Надеюсь тебе понравилось. Это был мой первый проект с использованием firebase.

Привет🍻