Как создать приложение для бронирования событий, используя HTML, CSS, JavaScript и Firebase

Автор оригинала: FreeCodeCamp Community Member.

В этом руководстве мы собираемся создать приложение для бронирования событий с HTML, CSS, JavaScript и Firebase.

Планируйте наше приложение
Разметка
Стайлинг
Взаимодействовать с Firebase
Извлечь события
Создать событие
Забронировать событие
Показать и обновлять данные с JavaScript

Планируйте наше приложение

Мы не собираемся создавать полное приложение для бронирования событий со всеми функциями. Нам не нужно все покрывать все в одном руководстве. Поскольку я просто хочу сохранить вещи простыми и простыми в переваре, мы пройдем на часть аутентификации в отдельной статье.

Итак, приложение для бронирования событий будет иметь следующие функциональные возможности:

Пользователь может создать событие и хранить его на FireStore.
Пользователь может получить все события в режиме реального времени.
Пользователь может забронировать событие.
Пользователь не может забронировать событие более одного раза.

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

Разметка

Наш HTML-файл будет относительно простым. Мы проверим нашу навигационную панель и последнее событие в Заголовок тег.

В index.html.

Далее Главная TAG будет обернуть список событий и форму, которая позволяет нам создать новое событие.

События будут отображаться позже с помощью JavaScript.

В index.html.

Далее нам нужно подключить наше приложение к Firebase Чтобы иметь возможность хранить наши данные.

Чтобы иметь эти полномочия, вам нужно будет создать новое приложение в Консоль Firebase Отказ И как только проект создал, нажмите на значок код Это сидит рядом со значками iOS и Android, чтобы зарегистрировать ваше приложение.

Теперь, чтобы генерировать учетные данные, вы должны зарегистрировать имя вашего приложения. И, наконец, поставьте учетные данные в файл HTML, как я уже здесь.

Далее, дублируйте первый Сценарий Тег и изменить firebase-app.js к Firebase-firestore.js Потому что мы будем использовать FireStore в этом проекте.

Тогда инициализируйте Firebase С конфигурацией и объявлению дБ Переменная, которая будет использоваться позже, чтобы взаимодействовать с Firebase.

Теперь у нас наша разметка и успешно связывала наш проект в Firebase. Итак, давайте начнем стилься в следующем разделе.

Стайлинг

Файл CSS немного длинный, поэтому я не буду покрывать все в этом посте. Я просто выделим самые важные части. Однако не беспокойтесь, вы найдете исходный код в конце статьи.

Как обычно, мы начинаем, импортируя наш шрифт и выполняя некоторые сбросы, чтобы предотвратить поведение по умолчанию.

В still.css

@import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap');

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
    --primary-color:#e74c3c;
    --secondary-color:#222;
    --tertiary-color:#333;
    --light-color: #fff;
    scroll-behavior: smooth; 
}

body {
    background-color: #1f1f1f;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    color: var(--light-color);
    line-height: 1.6;
}

Затем мы используем переменные CSS для хранения наших цветов и установить Поведение прокрутки к гладкий Таким образом, у нас есть хороший эффект прокрутки, когда пользователь нажимает на ссылки на Navbar.

Тем не менее, будьте осторожны с Поведение прокрутки , как это не Поддерживается все браузеры Отказ Вы можете проверить совместимость браузера здесь Отказ

В still.css

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 2.5rem;
    z-index: 100;
    width: 100%;
    transition: background 0.3s;
    position: fixed;
    top: 0;
    left: 0;
}

nav ul {
    display: flex;
    list-style: none;
}

nav li:not(:last-child), .welcome-event div span {
    margin-right: 1.5rem;
}

Для NAVBAR по умолчанию фон будет прозрачным. Для лучшего удобства использования он изменится, когда пользователь начнет прокручивать.

Наше приложение для бронирования событий начинает принимать форму. Теперь давайте начнем реализовать Firebase и подключить наше приложение для Firestore.

Взаимодействовать с Firebase

Firebase это платформа, которая обрабатывает все, связанное с Back-end для нас. Единственное, что нам нужно сделать, это подключить наше приложение к нему и начать использовать базу данных или другие услуги.

FireStore – это база данных NoSQL, и это не реляционные и использующие документы, коллекции, и так далее для создания базы данных.

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

Извлечь события

Ранее в этом руководстве мы объявили переменную дБ в HTML-части. Теперь давайте будем использовать эту переменную для подключения нашего приложения для FireStore.

Я поставлю все, связанное с базой данных на db.js Файл просто иметь более чистая структура.

В db.js.

db.collection('events').onSnapshot(snapshot => {
    // Handle the latest event
    const newestEvent = snapshot.docChanges()[0].doc.data()
    const id = snapshot.docChanges()[0].doc.id
    showLatestEvent(newestEvent, id);
    
    // delete the latest event element
    snapshot.docChanges().shift()
    
    snapshot.docChanges().forEach(event => {
        showEvents(event.doc.data(), event.doc.id)
    });
})

С помощью дБ Теперь мы можем получить доступ к нашей коллекции События Отказ Это просто имя нашей базы данных, и если оно не существует FireStore, создаст его на лету для нас.

Объект коллекции имеет очень удобный метод под названием Onsnapshot () Отказ Это помогает нам слушать в режиме реального времени в базу данных. Это означает, что всякий раз, когда на нем возникает изменение, он будет реагировать и вернуть изменение в режиме реального времени.

Onsnapshot () Метод также поможет нам получить доступ к документу (наши данные). И теперь мы можем извлечь последнее событие, чтобы показать на заголовке. И, прежде чем зацикливаться через массив событий, удалите последнее событие, чтобы он не отображал его снова.

Теперь, чтобы отобразить события на UI, мы должны позвонить нашим необходимым функциям ShowlateStevent () и ShowEvents () Отказ Затем мы передаем событие и идентификатор для них в качестве параметров.

Теперь мы можем извлечь события от Firestore, но у нас еще нет событий, чтобы показать. Давайте сохраним наше самое первое событие в нашей базе данных.

Создать событие

Чтобы получить значения, введенные пользователем, мы должны сначала выбрать Форма Теги и используйте его, чтобы выбрать идентификатор каждого ввода и потяните введенное значение.

В db.js.

const addNewEvent = () => {
  const event = {
    name: form.name.value,
    attendee: form.attendee.value,
    booked: 0,
    description: form.description.value,
    status: parseInt(form.status.value, 10)
  }
    db.collection('events').add(event)
    .then(() => {
    // Reset the form values
    form.name.value = "",
    form.attendee.value = "",
    form.description.value = "",
    form.status.value = ""

    alert('Your event has been successfully saved')
    })
    .catch(err => console.log(err))
}

дБ Переменная (помните, что это ссылка на firebase.firestore () ) имеет другой метод сохранения данных на FireStore: Сохранить () функция. Это обещание, и как только он будет завершен, теперь мы можем сбросить значения формы и показать сообщение о успехе пользователю.

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

Забронировать событие

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

Итак, чтобы справиться с этим, я буду использовать LocalStorage Для предотвращения бронирования дублирования.

В db.js.

let bookedEvents = [];

const bookEvent = (booked, id) => {
  const getBookedEvents = localStorage.getItem('booked-events');

    if (getBookedEvents) {
     bookedEvents = JSON.parse(localStorage.getItem('booked-events'));
      if(bookedEvents.includes(id)) {
        alert('Seems like you have already booked this event') 
      } 
      else {
        saveBooking(booked, id)
     }
    } 
    else {
        saveBooking(booked, id)
    }
};

const saveBooking = (booked, id) => {
    bookedEvents.push(id);
    localStorage.setItem('booked-events', JSON.stringify(bookedEvents));

    const data = { booked: booked +1 }
    db.collection('events').doc(id).update(data)
    .then(() => alert('Event successfully booked'))
    .catch(err => console.log(err))
}

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

И обновить счетчик бронирования, мы снова используем дБ Обновить событие на FireStore.

db.js Файл теперь завершен, поэтому давайте перейдем к окончательной части и подключите наш проект к db.js.

Показать и обновлять данные с JavaScript

Как обычно, мы начинаем с выбора необходимых элементов.

const eventsContainer = document.querySelector('.events-container')
const nav = document.querySelector('nav')
const welcomeEvent = document.querySelector('.welcome-event')
const form = document.querySelector('.form')

const showEvents = (event, id) => {
  const {name, attendee, status, description, booked} = event

  const eventStatus = status === 0 ? 'free': 'paid'
  const output = `
        
          
            
              ${name}
              ${attendee - booked} attendees
            
            
                ${eventStatus}
            
             ${description}
            
          
        
        `
    eventsContainer.innerHTML += output;
}

Ранее в этой статье мы прошли как параметр для ShowEvents () Функция события, привлеченное от Firestore в db.js файл.

Теперь мы можем потянуть значения, хранящиеся на объекте события и отобразить его. И, когда пользователь нажимает на кнопку, чтобы забронировать событие, мы позвоним Bokevent () функция для обработки его.

const showLatestEvent = (latestEvent, id) => {
  
  const {name, attendee, status, description, booked} = latestEvent 
  // Get the first event
    welcomeEvent.innerHTML = `
    ${name}
    ${description.length >= 100 ? `${description.substring(0, 100)}...` : description}
    
      Attendees: ${attendee - booked}
      Status: ${status === 0 ? 'free': 'paid'}
     
     
    `
}

form.addEventListener('submit', e => {
  e.preventDefault()
  addNewEvent()
})

window.onscroll = () =>  {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    nav.style.background = 'var(--tertiary-color)';
    nav.style.boxShadow = '0 10px 42px rgba(25,17,34,.1)';
  } else {
    nav.style.background = 'none';
    nav.style.boxShadow = 'none';
  }
}

Как вы можете видеть, ShowlateStevent () Метод очень похож на ShowEvents () , в отличие от элемента, используемого для отображения события.

И, когда описание немного длинное, мы используем Подстрока () обрезать значение.

Далее мы слушаем Форма Элемент для обработки события отправки и хранить его на FireStore с addnewevent () Отказ

И сделать все, что выглядит красиво, когда пользователь прокручивает, мы добавляем цвет фона и коробку-тень к панели навигации.

С этим изменением у нас теперь наше приложение для бронирования событий, используя JavaScript и Firebase.

Спасибо за прочтение этой статьи.

Вы можете проверить это жить здесь или найти Исходный код здесь Отказ

Читать дальше Статьи в моем блоге – Подписаться на мою рассылку – Подпишись на меня в Твиттере

Планируйте наше приложение

Разметка

Events

New Event