[회고] 파이어베이스로 동적예약사이트 만들기

개요

 학생회에서 구글 폼 양식이 너무 불편하다고 게속 징징대서 그냥 내가 만들어버렸다 (프레임 워크 사용x)

바닐라 js로 만들었으니 어느정도 불편함이 존재하지만, 5일만에 만들라고 해서 킹쩔수 없었다.

우리는 firebase와 js를 사용해서 예약받은 사용자의 정보를 firestore에 저장하는 초간단 예약 웹사이트를 만들 것이다.

(주의) js와 기본적인 파이어베이스 지식을 요구합니다.

(예시)

https://forschool-79f25.web.app/

(우리가 만들 최종 결과물)

그리고 프로젝트 초기 설정은 너무 길기 때문에 따로 여기서 다루지 않겠다.

미리 말해두지만 동적 사이트이고, 제출을 하면 firestore database 저장된다.

또한, 우리가 사용할 것은 Jquery,bootstrap이다.

 

초기 설정

코드상에서 자신의 firebase project configuration 을 아래에 넣어 주세요.

main.js

import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

만약에 오류나면 아래 코드 사용해주세요 

main.js

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js";

그리고 우리가 사용할 라이브러리들을 추가해줍니다.

main.js

import {
  collection,
  getFirestore,
  addDoc,
  serverTimestamp,
  
} from "https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js";

Db 연동하기

main.js

const app = initializeApp(firebaseConfig); // Initialize Firebase

const db = getFirestore(); // db 연동하기

그리고 cloud firestore에서 컬렉션을 생성한 후에 컬렉션 이름을 아래에 넣어주세요

main.js

//  collection ref
const colRef = collection(db, "자신의 컬렉션 이름");

부트스트랩과 Jquery 연결하기, main.js 연동하기

(버전이 아마 다를거예요. 최신 버전으로 해주시면 더 좋습니다 🤣🤣)

index.html

  <script type="module" src="./main.js"></script>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>

 

부트스트랩까지 연결했으면 자신이 원하는 Form을 추가합니다. 

저는 기본적인 로그인과 비밀번호를 추가하겠습니다.

index.html

  <form class="add">
    <nav class="navbar navbar-light bg-white">
        <div class="container-fluid">
          <label for="students__number">학번, 이름</label>
          <input type="text" name="students__number" required />
          <br />
          <label for="number">전화번호</label>
          <input type="text" name="number" required />
        </div>
      </nav>
      
      <button type="button"</button>
   </form>

 

 

그리고 firestore와 연결하는 코드를 작성합니다.

main.js

const addStudnetsForm = document.querySelector(".add");
addStudnetsForm.addEventListener("submit", (e) => {
  e.preventDefault();

  addDoc(colRef, {
    students__number: addStudnetsForm.students__number.value,
    number: addStudnetsForm.number.value,
    createdAt: serverTimestamp(),
  }).then(() => {
    addStudnetsForm.reset();
  });
});

 

terminal

firebase serve

하시고, 로컬에 들어가서 입력하고 제출하시면 아마 되실 겁니다. 

오류생기면 언제나 댓글로 알려주세요. 바로 수정하겠습니다.

파이어베이스에 대해서 다루는 블로그는 많은데 실제로 만드는 블로그는 별로 없어서 제가 미약하게나 만들어보았습니다.

감사합니다.