HomeLập trìnhJavaScriptCách xây dựng...

Cách xây dựng ứng dụng đặt chỗ sự kiện bằng HTML, CSS, JavaScript và Firebase


Trong hướng dẫn này, chúng ta sẽ xây dựng Ứng dụng Đặt chỗ Sự kiện bằng HTML, CSS, JavaScript và Firebase.

Lập kế hoạch ứng dụng của chúng tôi

Chúng tôi sẽ không xây dựng một ứng dụng đặt lịch sự kiện hoàn chỉnh với tất cả các chức năng. Chúng tôi không cần phải bao gồm tất cả mọi thứ chỉ trong một hướng dẫn. Vì tôi chỉ muốn giữ mọi thứ đơn giản và dễ hiểu, nên chúng tôi sẽ đề cập đến phần xác thực trong một bài viết riêng.

Vì vậy, Ứng dụng đặt chỗ sự kiện của chúng tôi sẽ có các chức năng sau:

  • Người dùng có thể tạo một sự kiện và lưu trữ nó vào Firestore.
  • Người dùng có thể tìm nạp tất cả các sự kiện trong thời gian thực.
  • Người dùng có thể đặt một sự kiện.
  • Người dùng không thể đặt sự kiện nhiều lần.

Giờ chúng ta đã biết ứng dụng của mình sẽ trông như thế nào, hãy bắt đầu xây dựng ứng dụng trong phần tiếp theo.

đánh dấu

Tệp HTML của chúng tôi sẽ tương đối đơn giản. Chúng tôi sẽ giữ thanh điều hướng và sự kiện mới nhất trong header nhãn.

<body>
    <header id="home">
      <nav class="navbar">
        <h1>Eventic</h1>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#events">Events</a></li>
            <li><a href="#add-event">New Event</a></li>
        </ul>
      </nav>
      <div class="welcome-event"></div>
    </header>
    <main>
        <section id="events">
            <h1 class="section-title">Events</h1>
            <div class="events-container"></div>
        </section>
        <section id="add-event">
            <h1 class="section-title">New Event</h1>
            <form class="form">
                <input type="text" id="name" placeholder="Name">
                <input type="number" id="attendee" placeholder="Attendees">
                <textarea id="description" cols="30" rows="10" placeholder="Description..."></textarea>
                <select id="status">
                    <option value="0">Free</option>
                    <option value="1">Paid</option>
                </select>
                <button class="btn btn-primary">Save</button>
            </form>
        </section>
    </main>

Tiếp theo, các main thẻ sẽ bao bọc danh sách các sự kiện và biểu mẫu cho phép chúng tôi tạo một sự kiện mới.

Các sự kiện sẽ được hiển thị sau với sự trợ giúp của JavaScript.

<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-firestore.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  const db = firebase.firestore()
</script>

<script src="db.js"></script>
<script src="app.js"></script>

</body>
</html>

Tiếp theo, chúng tôi cần kết nối ứng dụng của mình với Firebase để có thể lưu trữ dữ liệu của mình.

Để có những thông tin đăng nhập này, bạn cần tạo một ứng dụng mới trong Bảng điều khiển Firebase. Và khi dự án được tạo, hãy nhấp vào biểu tượng mã </> nằm bên cạnh biểu tượng iOS và Android để đăng ký ứng dụng của bạn.

Bây giờ, để tạo thông tin đăng nhập, bạn phải đăng ký tên ứng dụng của mình.
Và cuối cùng, đặt thông tin đăng nhập vào tệp HTML như tôi làm ở đây.

Tiếp theo, nhân đôi cái đầu tiên script gắn thẻ và thay đổi firebase-app.js đến firebase-firestore.js bởi vì chúng tôi sẽ sử dụng Firestore trong dự án này.

Đọc thêm  Cách tạo Mạng nơ-ron trong JavaScript chỉ với 30 dòng mã

Sau đó, khởi tạo firebase với cấu hình và khai báo một db biến sẽ được sử dụng sau này để tương tác với Firebase.

Bây giờ, chúng tôi đã đánh dấu và đã liên kết thành công dự án của mình với Firebase. Vì vậy, hãy bắt đầu tạo kiểu cho nó trong phần tiếp theo.

tạo kiểu

File CSS hơi dài nên mình sẽ không trình bày hết trong bài viết này. Tôi sẽ chỉ nhấn mạnh những phần quan trọng nhất. Tuy nhiên, đừng lo lắng, bạn sẽ tìm thấy mã nguồn ở cuối bài viết.

Như thường lệ, chúng tôi bắt đầu bằng cách nhập phông chữ của mình và thực hiện một số đặt lại để ngăn hành vi mặc định.

@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;
}

Tiếp theo, chúng tôi sử dụng Biến CSS để lưu trữ màu của chúng tôi và đặt scroll-behavior đến smooth vì vậy chúng tôi có hiệu ứng cuộn đẹp mắt khi người dùng nhấp vào liên kết thanh điều hướng.

Tuy nhiên, hãy cẩn thận với scroll-behavior, vì nó không được hỗ trợ bởi tất cả các trình duyệt. Bạn có thể kiểm tra tính tương thích của trình duyệt tại đây.

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;
}

Đối với thanh điều hướng, theo mặc định, nền sẽ trong suốt. Để có khả năng sử dụng tốt hơn, nó sẽ thay đổi khi người dùng bắt đầu cuộn.

Ứng dụng đặt chỗ sự kiện của chúng tôi đang bắt đầu hình thành. Bây giờ, hãy bắt đầu triển khai Firebase và kết nối ứng dụng của chúng ta với Firestore.

Xuất sắc

Tương tác với Firebase

Firebase là một nền tảng xử lý mọi thứ liên quan đến back-end cho chúng tôi. Điều duy nhất chúng ta phải làm là kết nối ứng dụng của mình với nó và bắt đầu sử dụng cơ sở dữ liệu hoặc các dịch vụ khác.

lò sưởi là một cơ sở dữ liệu NoSQL, và nó không liên quan và sử dụng các tài liệu, bộ sưu tập, v.v. để tạo cơ sở dữ liệu.

Bây giờ, hãy kết nối với Firestore và tạo cơ sở dữ liệu đầu tiên của chúng tôi.

Tìm nạp sự kiện

Trước đó trong hướng dẫn này, chúng tôi đã khai báo một biến db trong phần HTML. Bây giờ, hãy sử dụng biến đó để kết nối ứng dụng của chúng ta với Firestore.

Tôi sẽ đặt mọi thứ liên quan đến cơ sở dữ liệu trên db.js file để có cấu trúc sạch hơn.

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)
    });
})

Với sự giúp đỡ của dbbây giờ chúng ta có thể truy cập vào bộ sưu tập của mình events. Đó chỉ là tên của cơ sở dữ liệu của chúng tôi và nếu nó không tồn tại, Firestore sẽ nhanh chóng tạo nó cho chúng tôi.

Đọc thêm  Ví dụ JSON Stringify – Cách phân tích đối tượng JSON bằng JS

Đối tượng bộ sưu tập có một phương thức rất tiện dụng được gọi là onSnapshot(). Nó giúp chúng tôi lắng nghe cơ sở dữ liệu trong thời gian thực. Điều này có nghĩa là bất cứ khi nào có thay đổi xảy ra trên nó, nó sẽ phản ứng và trả lại thay đổi trong thời gian thực.

ma thuật

Các onSnapshot() cũng sẽ giúp chúng tôi truy cập tài liệu (dữ liệu của chúng tôi). Và bây giờ, chúng ta có thể trích xuất sự kiện mới nhất để hiển thị trên tiêu đề. Và, trước khi lặp qua mảng sự kiện, hãy xóa sự kiện mới nhất để nó không hiển thị lại.

Bây giờ, để hiển thị các sự kiện trên UI, chúng ta phải gọi các chức năng cần thiết của mình showLatestEvent()showEvents(). Sau đó, chúng tôi chuyển sự kiện và id cho chúng dưới dạng tham số.

Bây giờ chúng tôi có thể tìm nạp các sự kiện từ Firestore, nhưng chúng tôi vẫn không có bất kỳ sự kiện nào để hiển thị. Hãy lưu trữ sự kiện đầu tiên của chúng tôi trong cơ sở dữ liệu của chúng tôi.

Tạo một sự kiện

Để có được các giá trị được nhập bởi người dùng, trước tiên chúng ta phải chọn form và sử dụng nó để chọn id của từng đầu vào và lấy giá trị đã nhập.

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))
}

Các db biến (hãy nhớ rằng đó là tham chiếu đến firebase.firestore()) có một phương pháp khác để lưu dữ liệu vào Firestore: save() chức năng. Đó là một lời hứa và sau khi hoàn thành, giờ đây chúng ta có thể đặt lại các giá trị của biểu mẫu và hiển thị thông báo thành công cho người dùng.

Bây giờ, hãy tiếp tục và xử lý trường hợp khi người dùng muốn đặt một sự kiện.

Đặt một sự kiện

Như tôi đã nói trước đó, chúng tôi không thể kiểm tra xem người dùng có được xác thực hay không, vì vậy họ có thể đăng ký sự kiện nhiều lần.

Vì vậy, để xử lý việc này, tôi sẽ sử dụng localStorage để ngăn chặn trùng lặp đặt phòng.

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))
}

Và như bạn có thể thấy ở đây, trước tiên chúng tôi kiểm tra xem id sự kiện có được lưu trữ trong localStorage hay không. Nếu đúng như vậy, người dùng không thể đặt lại sự kiện tương tự. Nếu không, họ sẽ có thể đặt sự kiện.

Đọc thêm  Phần mềm JavaScript Phần tử JSON

Và để cập nhật bộ đếm đặt phòng, chúng tôi sử dụng lại db để cập nhật sự kiện trên Firestore.

Các db.js tệp hiện đã hoàn tất, Vì vậy, hãy chuyển sang phần cuối cùng và kết nối dự án của chúng tôi với db.js

Hiển thị và cập nhật dữ liệu bằng JavaScript

Như thường lệ, chúng tôi bắt đầu bằng cách chọn các yếu tố cần thiết.

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 = `
        <div class="card">
          <div class="card--details">
            <div>
              <h1>${name}</h1>
              <span>${attendee - booked} attendees</span>
            </div>
            <span class="card--details-ribbon ribbon-${eventStatus}">
                ${eventStatus}
            </span>
             <p>${description}</p>
            <button onclick="bookEvent(${booked} ,'${id}')" class="btn btn-tertiary">Book</button>
          </div>
        </div>
        `
    eventsContainer.innerHTML += output;
}

Trước đó trong bài viết này, chúng tôi đã chuyển dưới dạng tham số cho showEvents() chức năng sự kiện được tìm nạp từ Firestore trong db.js tập tin.

Bây giờ chúng ta có thể kéo các giá trị được giữ trên đối tượng sự kiện và hiển thị nó. Và, khi người dùng nhấp vào nút để đặt sự kiện, chúng tôi sẽ gọi bookEvent() chức năng để xử lý nó.

const showLatestEvent = (latestEvent, id) => {
  
  const {name, attendee, status, description, booked} = latestEvent 
  // Get the first event
    welcomeEvent.innerHTML = `
    <h1>${name}</h1>
    <p>${description.length >= 100 ? `${description.substring(0, 100)}...` : description}</p>
    <div>
      <span>Attendees: ${attendee - booked}</span>
      <span>Status: ${status === 0 ? 'free': 'paid'}</span>
     </div>
     <button onclick="bookEvent(${booked} ,'${id}')" class="btn btn-tertiary">Book</button>
    `
}

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';
  }
}

Như bạn có thể thấy, các showLatestEvent() phương pháp khá giống với showEvents()không giống như phần tử được sử dụng để hiển thị sự kiện.

Và, khi mô tả hơi dài, chúng tôi sử dụng substring() để cắt bớt giá trị.

Tiếp theo, chúng ta lắng nghe form phần tử để xử lý sự kiện gửi và lưu trữ nó vào Firestore với addNewEvent().

Và để làm cho mọi thứ trông đẹp mắt, khi người dùng cuộn, chúng tôi thêm màu nền và bóng hộp vào thanh điều hướng.

Với sự thay đổi đó, giờ đây chúng tôi đã có Ứng dụng đặt lịch sự kiện bằng JavaScript và Firebase.

Cảm ơn đã đọc bài viết này.

Bạn có thể kiểm tra trực tiếp tại đây hoặc tìm Mã nguồn tại đây.

Đọc thêm các bài viết trên blog của tôi – Đăng ký nhận bản tin của tôi – Theo dõi tôi trên Twitter





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status