どのようにHTML、CSS、JavaScript、およびFireBaseを使用してイベントの予約アプリを構築するには?

38322 ワード
html beginners css javascript テキストリンク
もともと投稿my blog
このチュートリアルでは、HTML、CSS、JavaScript、およびFireBaseを使用してイベントの予約アプリを構築する予定です.
  • Plan our app
  • Markup
  • Styling

  • Interact With Firebase
  • Fetch events
  • Create an event
  • Book an event
  • Show and Update Data with JavaScript

    • アプリを計画


    我々はすべての機能を持つ完全なイベントの予約アプリを構築するつもりはない.それはちょうど1つのチュートリアルですべてをカバーするために関連していない、私は物事を簡単に消化しやすく、おそらく認証部分は別の記事でカバーされます.
    だから、我々のイベント予約アプリは次の機能があります
  • ユーザーは、イベントを作成し、FireStoreに格納できます.
  • ユーザーはリアルタイムですべてのイベントを取得することができます.
  • ユーザーはイベントを予約することができます.
  • ユーザーは1回以上イベントを予約することはできません.
    • さて、我々は我々のアプリがどのように見えるかを知って、次のセクションでそれを構築を開始しましょう.

    マークアップ


    当社のHTMLファイルは比較的簡単になります.我々はナビゲーションバーと最新のイベントを開催しますheader タグ.
  • インindex.html
    • <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>
    次はmain タグはイベントのリストと新しいイベントを作成できるフォームをラップします.
    イベントは後でJavaScriptの助けを借りて表示されます.
  • インindex.html
    • <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>
    次に、我々のアプリを接続する必要がありますFirebase データを保存することができます.
    これらの資格情報を持っている場合は、新しいアプリケーションを作成する必要がありますFirebase Console . プロジェクトが作成されると、コードアイコンをクリックします</> それはあなたのアプリケーションを登録するためにIOSとAndroidのアイコンの横に座っている.
    さて、資格情報を生成するには、あなたのアプリケーションの名前を登録する必要があります.
    そして、最後に、私がここでするように、資格証明書をHTMLファイルに入れてください.
    次に、最初の複製script タグと変更firebase-app.js to firebase-firestore.js このプロジェクトではFirestoreを使用するので.
    その後、初期化firebase を設定し、db FireBaseと対話するために後で使用される変数.
    さて、マークアップを行い、プロジェクトをFirebaseにリンクし、次のセクションでスタイルを開始しましょう.

    スタイリング


    CSSファイルは少し長いので、私はこのポストのすべてをカバーしません、私はちょうど最も重要な部分を強調します.しかし、心配しないと、記事の最後にソースコードが表示されます.
    いつものように、我々のフォントをインポートし、デフォルトの動作を防ぐためにいくつかのリセットを開始します.
  • インstyle.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変数を使用して色を保存し、scroll-behavior to smooth ちょうどユーザーがNavbarリンクでクリックするとき、素晴らしいスクロール効果を持つために.
    しかし、注意してくださいscroll-behavior , それはないsupported by all browsers . まだブラウザの互換性を扱うことができますhere .
  • インstyle.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 私たちのためのバックエンドに関連するすべてを処理するプラットフォームは、唯一のことは、我々はそれに私たちのアプリを接続し、データベースやその他のサービスを使用して起動する必要があります.
    Firestore NOSQLデータベースであり、それは非リレーショナルで、ドキュメント、コレクションなどを使用してデータベースを作成します.
    今、FireStoreに接続し、我々の非常に最初のデータベースを作成しましょう.

    フェッチイベント


    以前にこのチュートリアルでは、変数db 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)
    });
})
    …の助けを得てdb , 我々は現在、我々のコレクションにアクセスすることができますevents . それはちょうど我々のデータベースの名前です、そして、それが存在しないならば、Firestoreは我々のためにそれをオンザフライでそれをつくります.
    コレクションオブジェクトには、非常に便利なメソッドがありますonSnapshot() . これは、データベースには、そのときに変更が発生するたびに、それが反応し、リアルタイムでの変更を返すリアルタイムで聞くのに役立ちます.

    The onSnapshot() メソッドはまた、ドキュメント(データ)にアクセスするのに役立ちます.そして今、ヘッダーに表示する最新のイベントを抽出できます.そして、イベント配列をループする前に、最新のイベントを削除してください.
    さて、UI上のイベントを表示するには、必要な関数を呼び出す必要がありますshowLatestEvent() and showEvents() , そして、イベントとIDをパラメータとして渡す.
    我々は今、FireStoreからイベントを取得することができますが、我々はまだ表示するイベントがありません.我々のデータベースで我々の非常に最初のイベントを保存しましょう.

    イベントを作成する


    ユーザーが入力した値を取得するには、まずform タグとは、各入力のIDを選択し、値を入力プルを使用します.
  • イン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))
}
    The db 変数(firebase.firestore() ) には、データを保存する別の方法がありますsave() 関数.それは約束です、そして、一旦完成するならば、我々は現在フォームの値をリセットすることができて、成功メッセージをユーザーに示すことができます.
    さて、ユーザーがイベントを予約したい場合に移動してケースを処理しましょう.

    イベントを予約する


    私が以前に言ったように、私たちは、ユーザーが認証されるかどうかをチェックすることができません、したがって、彼は1回以上イベントを潜在的に予約することができます.
    それで、それを扱うために、私は使用します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))
}
    そして、あなたがここで見ることができるように、我々は最初にLocal StorageでイベントIDが保存されるかどうかチェックします.それがケースであるならば、ユーザーは再び同じイベントを予約することができません、さもなければ、彼はイベントを予約することができます.
    予約カウンタを更新するには、再度使用してdb FireStoreのイベントを更新します.
    The 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 = `
        <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;
}
    この記事の前半では、我々はshowEvents() 関数は、db.js ファイル.
    イベントオブジェクトに保持されている値をプルして表示できます.そして、ユーザーがイベントを予約するためにボタンをクリックすると、我々はbookEvent() 関数を処理する.
    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';
  }
}
    ご覧の通り、showLatestEvent() メソッドはshowEvents() , イベントを表示するために使用する要素とは異なります.
    そして、説明が少し長いとき、我々は使用しますsubstring() 値を切り捨てます.
    次に、我々はform Submitイベントを処理し、それをFirestoreに保存する要素addNewEvent() .
    そして、すべてが良い見て、ユーザーがスクロールすると、ナビゲーションバーに背景色とボックスの影を追加します.
    その変更では、我々は現在、JavaScriptとFireBaseを使用して我々のイベントの予約アプリがあります.
    それは、この記事を読んでいただきありがとうございます.
    あなたはそれをチェックすることができますlive here またはSource Code here .
    BLOG
    NEWSLETTER
    GITHUB
    CODEPEN
    Amazon Inspetcorで評価のステータスが「エラーが発生して完了」となった場合に確認すべき点
    jQueryはradioが選択した文字を取得する