25 February 2021 / WEB

Camp51.9 Kiosk Project (4)Google Spread Sheet 연동

Camp51.9 Kiosk Project

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

개요

제가 웹을 공부하면서 키오스크를 개발하는 이유는 실력향상의 목적도 있지만 제가 일하고 있는 곳의 환경 때문이었습니다. 제가 일하고 있는 메이커스페이스 Camp51.9는 이용 고객 및 학생들이 출입 명부를 작성해야 합니다. 운영하고 있는 영등포고등학교에 기안을 올려야 하기 때문입니다. 여기에 더하여 코로나 바이러스로 인한 체온 측정이 추가로 요구되었습니다. 이를 매니저가 일일히 안내하고 도와드리는데에는 한계가 있었고 자연스레 키오스크, 웹 개발로 이어지게 되었습니다. 출입등록 키오스크인 만큼 웹에서 끝나는 것이 아닌 사용자의 출입 및 체온 정보가 따로 저장이 되어야 합니다. 따라서 저는 웹과 연동할 수 있는 방법으로 구글의 스프레드 시트를 활용했습니다.

시작

저번 글에서 연동한 파이어베이스는 조금 복잡하긴 하지만 원하는 기능은 모두 얻을 수 있었습니다. 그러나 파이어베이스의 단점은 데이터베이스를 깔끔하게 가져와서 정리하기가 힘들다는 것입니다. 파이어베이스의 정보를 엑셀과 같은 파일로 변환하여 정리하려면 조금 귀찮은 과정을 거쳐야 합니다. 파이어베이스는 json 형식으로 밖에 자료를 가져올 수 없습니다. 따라서 다음과 같은 과정을 필요로 합니다.

파이어베이스 실시간 데이터베이스를 json으로 추출하기 -> 컨버터 사이트 혹은 프로그램으로 xml 파일로 컨버트하기.

이 정도로 끝난다면 감수하겠지만 제 방식대로 파이어베이스를 구성하고 정리한다면 key값이 너무 많아지고 데이터도 사람이 직접 읽기엔 깔끔하지 않습니다. 저희 메이커스페이스는 공용 기관으로 매월 이용객의 입장 시간과 체온을 제출해야 합니다. 따라서 파이어베이스만으로는 제출이 어렵습니다.

따라서 저는 구글 스프레드 시트를 만들고 자바스크립트와 연동하여 조금 더 가독성있는 문서를 만들 수 있도록 자동화하겠습니다.

개발과정

Google Sheet

구글 시트, 구글 스프레드 시트는 구글에서 제공하는 서비스 중 하나로 마이크로소프트의 엑셀이나 파워포인트 기능을 별개의 설치 없이 지원합니다. 공유 기능과 더불어 사용하면 간단한 작업이나 팀 프로젝트에서 유용하게 사용할 수 있습니다. 다음은 시트를 자바스크립트와 연동하는 과정입니다.

Google Sheet 문서 생성 및 스크립트 작성

구글에 로그인하고 스프레드 시트 문서를 하나 생성합니다. 원하는 이름을 작성하고 작성이 끝나면 도구-스크립트 편집기로 이동합니다.

스크립트 작성 및 계정 인증

https://trickuweb.com/submit-custom-html-form-data-to-google-sheets.php 의 스크립트를 복사하여 스프레드 시트 스크립트에 붙여넣기 합니다. 그 후 게시를 눌러 웹앱으로 배포를 해줍니다. 계정을 인증하고 첫 번째 버전을 모두에게 공개로 실행합니다. 마지막으로 시트의 이름을 ‘시트1’에서 ‘Sheet1’로 바꿔줍니다. 이름을 한국어로 지정하면 연동이 되지 않습니다. 원문인 Sheet1으로 바꿔야 합니다.
자바스크립트 작성

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

주소의 이 스크립트 두 개를 붙여넣어줍니다. 스프레드시트 연동을 위해 쉽게 이용할 수 있는 스크립트입니다. 만약 실행되지 않으면 순서를 바꾸어 줍니다. 부트스트랩보다 jQuery가 먼저 실행되어야 코드가 정상적으로 진행됩니다.

부트스트랩: 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크.
jQuery: HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리.

구글 스프레드 시트에 입력하기

<form method="post" autocomplete="off" name="google-sheet">
	<br><input type="text" name="Temp" id="googleTemp" class="usertemp" placeholder="체온을 입력하세요">
</form>

html 부분입니다. html에서는 input태그를 통해 입력해야 스프레드 시트로 입력이 가능합니다. form태그로 input부분을 감싸주고 method, name을 지정해줍니다. input 태그의 name은 스프레드 시트 1행에 있는 이름을 적어줍니다.

이제 다시 웹 앱으로 공개할 때 스크립트 주소를 가져와 자바스크립트 코드에 붙여넣습니다.

<script>
	const scriptURL = 'https://script.google.com/macros/s/AKfycbzD_6ZgEBY12fZIeW9gq0BEAfA_-R9ba6XFP36N_-FR71VDwAVjpMAB/exec'
	const form = document.forms['google-sheet']

	signinButtonL.addEventListener('click', e => {
		e.preventDefault()
		fetch(scriptURL, { method: 'POST', body: new FormData(form)})
		.catch(error => console.error('Error!', error.message))
	})
</script>

click이라는 id를 가진 버튼을 누르면 연동된 시트로 POST하는 함수가 실행됩니다.. 오류가 발생하면 에러 메세지를 띄워줍니다.

결과

이것으로 구글 스프레드 시트와의 연동이 끝났습니다. 파이어베이스보다 훨씬 깔끔하고 제출용으로 전혀 문제 없을 것 같습니다.

깃허브

Camp51.9 Kiosk Project (4)Google Spread Sheet 연동

Camp51.9 Kiosk Project (4)Google Spread Sheet 연동