4 February 2021 / WEB

Camp51.9 Kiosk Project (3)Google Firebase 연동

Camp51.9 Kiosk Project

html, css, javascript를 처음 공부하는 동시에 영등포고등학교 메이커스페이스 Camp51.9의 시설 이용 키오스크를 직접 개발하는 프로젝트.

개요

앞선 글의 소스코드나 동작 과정을 보면 DB가 존재함을 알 수 있었습니다. 키오스크이고 로그인을 지원하기 때문에 회원가입한 사용자의 정보와 메이커스페이스의 시설 이용정보, 남은 여석, 유료 장비 사용 여부 등 여러가지 실시간으로 바뀌는 데이터들을 관리할 DB가 필요합니다. 하지만 그 크기가 크지 않고 가볍기 때문에 편하고 쉽게 사용할 수 있는 DB를 찾아보던중 구글의 FireBase를 알게 되었습니다. 이번 글은 html과 Fireabase를 연동한 과정을 작성하겠습니다.

개발 과정

파이어베이스에 저장될 정보는 다음과 같습니다.

이용자의 회원가입 정보(이름, 이메일, 전화번호, 소속(학교이기 때문에 외부인과 구분이 필요합니다.))
로그인한 이용자의 정보
시설 및 로비의 남은 좌석 정보
유료 장비 사용 가능 여부에 관한 정보
기타

이러한 정보들을 저장하기 위해 파이어베이스를 사용해보겠습니다.

Google Firebase

파이어베이스(Firebase)는 구글에서 제공하는 모바일, 웹 어플리케이션 개발 플랫폼이자 실시간 데이터베이스입니다. 말그대로 실시간 데이터베이스이기 때문에 사용자가 정보를 입력할 때 마다 실시간으로 데이터베이스의 값이 바뀝니다.

Firebase 웹 어플리케이션 프로젝트 생성 및 연동 스크립트 가져오기

파이어베이스에서 웹 어플리케이션 용도로 프로젝트를 생성합니다.

프로젝트 설정 메뉴에서 html과 연동을 위한 firebase 스크립트를 찾을 수 있습니다. 그대로 가져오고 이때 analytics 부분은 사용하지 않으므로 지워줍니다.

   <script>
           // Your web app's Firebase configuration
          // For Firebase JS SDK v7.20.0 and later, measurementId is optional
           var firebaseConfig = {
           apiKey: "AIzaSyC5_G3RZhRjxLyh27dgrTNXX2ul1uMF9OI",
           authDomain: "test-90278.firebaseapp.com",
           projectId: "test-90278",
           storageBucket: "test-90278.appspot.com",
           messagingSenderId: "315329074324",
           appId: "1:315329074324:web:3bfb0adda43868a8975081",
           measurementId: "G-96ZE5HQBEJ"
         };
         // Initialize Firebase
         firebase.initializeApp(firebaseConfig);
   </script>

스크립트에는 연결을 위한 Apikey, 도메인, 프로젝트 ID등 고유 값들이 자동으로 작성되어있습니다. html의 <body> 태그 및에 붙여넣기 해주기만 하면 끝입니다.

파이어베이스에 값 넣기 : set 명령과 push 명령 이해하기

먼저 파이어베이스 입력에 사용되는 명령에는 set과 push가 있습니다. 둘의 특징은 다음과 같습니다.

set : 특정 위치에 입력값을 작성하나 다른 값을 가진 같은 요청을 받으면 기존의 값을 없애고 다시 입력합니다.
push : 기본적으로 set과 같은 명령이나 기존의 값을 초기화하지 않습니다. 하지만 매 처음 입력마다 랜덤의 고유 key값을 경로에 집어넣습니다.

제가 만들고 있는 키오스크는 많은 사용자들이 로그인하고 이용정보를 저장하기 때문에 push를 사용하는 것이 좋아보이지만 저는 set을 사용했습니다. 처음 개발할때는 push를 사용했으나 같은 위치에 계속해서 정보를 저장하는 대신 랜덤의 key값을 집어 넣기 때문에 나중에 값을 가져올때, 즉 출력 시에 경로를 지정할 수 없는 문제가 생겼습니다.

그래서 저는 입력에서 set 명령을 사용했고 한 위치에 하나의 값만 저장하는 단점을 보완하기 위해 key값에 제가 참조하기 쉽도록 숫자를 더하여 간단한 규칙을 지정했습니다(ex. 아이디1 키는 아이디를, 아이디2 키는 이름을 저장하는 방식입니다. 이렇게 하면 조금 복잡해지지만 set에서 서로 다른 위치에 다른 값을 하나씩 저장할 수 있습니다.). 이용 정보와 사용하는 시설, 장비, 여석 등 또한 비슷하게 저장하였습니다.

파이어베이스 입력을 위한 명령은 다음과 같습니다.

   var dbRefObject = firebase.database().ref('Login/'+userid + '/' + userid).set({"ID": userid});

변수를 하나 선언하고 파이어베이스에 저장할 경로와 이름, 값을 지정해주기만 하면 됩니다. 위의 경우 회원가입 페이지의 한 부분으로 userid 변수는 사용자가 입력한 아이디이고 그 입력한 아이디를 파이어베이스에 저장하는 코드입니다. 같은 방식으로 이름, 소속 등을 입력해줍니다.

파이어베이스의 값 출력하기

앞서 말했듯이 push는 값을 저장하는 용도로는 깔끔하지만 랜덤의 key값을 지정하기 때문에 참조가 어렵습니다. 따라서 set을 사용하되 고유의 규칙을 가진 key 값을 지정해주었습니다. 회원가입에서 사용자가 정한 ID를 기준으로 숫자를 붙여 저장해 주었습니다.

파이어베이스에 저장할 정보 중 현재 이용중인 이용자의 정보를 저장해야 한다고 먼저 정했습니다. 이 정보는 웹에서 로그인 한 후 ~님 의 형식으로 출력되는 부분입니다.

그래서 저는 파이어베이스에 따로 tmp라는 공간을 만들어 현재 사용하고 있는 이용자의 ‘ID’를 저장해주었습니다. 이렇게 하면 현재 사용자의 ID를 가져와 위의 입력 규칙에 맞게 숫자를 더하는 방식으로 원하는 정보를 참조할 수 있습니다. 아래는 이러한 방식으로 작성한 출력 코드입니다.

   var dbTestRef = firebase.database().ref('Login/' + userid + '/' + userid + 1 + '/')
        dbTestRef.on('child_added', function(data){
        document.getElementById("warning").innerHTML="확인완료"; 
        document.getElementById("write").innerHTML=data.val() + " 님으로<br>이용하시겠습니까?";
        })

위 코드는 로그인 html의 한 부분입니다. 입력처럼 변수를 생성하고 참조할 경로를 지정해주면 data.val() 이라는 변수로 파이어베이스의 값을 가져오게됩니다. 아래는 이용자의 ID로 이용자의 이름을 가져오는 코드입니다.

//tmp의 이용자 ID 가져오기
var dbTestRef = firebase.database().ref('tmp/')
	dbTestRef.on('child_added', function(data){
	//파이어베이스에 이용날짜 저장
	var currentDay = firebase.database().ref('CurrentUser/CurrentDay').set({"currentDay": year + '/' + month + '/' + date});
	//파이어베이스에 이용시간 저장
	var currentTime = firebase.database().ref('CurrentUser/' + data.val() + '/' + data.val() + 'Time').set({"currentTime": hours + ':' + minutes});
	//파이어베이스의 이용자 이름으로 출입시간 및 이용시설정보 저장
	var currentuser = firebase.database().ref('CurrentUser/' + data.val() + '/' + data.val() + 'TimeLobby').set({"LobbyTime": lobbytimeH + "시간" + lobbytimeM + "분"});
	//로비 이용자가 이용 시 로비 여석 -1
	var dbTestRef1 = firebase.database().ref('Establishment/Lobby/')
	dbTestRef1.on('child_added', function(data){
		var LobbyUser = firebase.database().ref('Establishment/Lobby').set({"Lobby": data.val()-1}); 
	})  
})

다음과 같은 방식으로 tmp의 이용중인 이용자의 ID를 가져오고 다시 사용하여 사용자 별로 출입시간을 저장합니다.

결과

이 방법으로 저는 파이어베이스를 연동하고 입력과 출력을 동시에 해결했습니다. 키오스크 용 웹 어플리케이션에 반드시 필요한 상호작용 데이터베이스인 파이어베이스를 처음 사용해봤지만 하나하나 공부하며 직접 만드는 과정이 매우 의미있었던 것 같습니다. 실제로 메이커스페이스에서 유용하게 활용하고 있습니다.

다음 글에서는 Google Spread Sheet를 연동하는 과정을 다루겠습니다. 감사합니다.

깃허브

Camp51.9 Kiosk Project (3)Google Firebase 연동

Camp51.9 Kiosk Project (3)Google Firebase 연동