본문 바로가기
어린이 코딩/앱인벤터 기초

[인벤터] 퓨전테이블(Fusiontables)을 이용한 모바일 앱 데이터 저장하기

by [바가지] 2017. 9. 26.
반응형

[인벤터] 퓨전테이블(Fusiontables)을 이용한 모바일 앱 데이터 저장하기

 


퓨전테이블을 이용하여 앱 데이터 저장하기


 

이전 포스팅에서는 모바일 게임 앱 만들기, 고양이 잡기에 대하여 게시하였습니다.

게임을 하고 나면 게임점수를 획득합니다 자신의 점수를 다른사람이 볼 수 있다면 게임을 하는 재미가 더욱 커 질 것입니다.

이번 시간에는 바로 이런 기능에 대하여 알아보고자 합니다.

저장소를 활용하여 자신의 점수를 저장해 두고, 다른 사람이 접속 하였을 경우, 점수를 보여주게 하는  것입니다.

모든 사람의 점수를 보여줄 수는 없으니 상위랭크의 점수만 보여주게 해야 되겠죠

 

인벤터에도 이런 기능이 가능합니다. 그리고 몇가지 방법을 제공하고 있습니다.

첫번째로 File을 이용한 방법입니다 파일에 기록하고 그 파일을 읽어 기능을 구현하는 방법입니다.

두번째로 구글 퓨전 테이블을 이용하는 방법입니다. 퓨전 테이블에 데이터를 저장하고 공유하고 검색하는 방법입니다. 그리고 세번째로 앱에 데이터를 저장할 수 있는 컴포넌트인 TinyDB를 활용한 방법입니다. 문자열 형태의 데이터를 태그로 구분하여 저장하는 방법입니다

그리고 마지막 TinyWebDB 방법으로 정보를 저장하고 검색하기 위해 웹 서비스와 통신하는 방법입니다.

 

웹서비스를 통한 방법을 구현해서 포스팅 해볼까 생각했었지만(cafe24에서 신청하고 놀고 있는 DB가 있어서), 그렇게 할려면, 혹시나 보고 따라하시는 분들이 DataBase를 구현하거나 사이트를 통해 서비스를 제공받아야 하기 때문에 실습하기에 다소 어려움이 있다는 생각이 들어, 다른 방법을 선택하였습니다.

그래서 가장 먼저 해 볼 방법은 퓨전 테이블을 이용한 데이터 연동 방법입니다.

 

그럼 퓨전테이블 사용법에 대하여 알아보겠습니다.

먼저 퓨전테이블 컴포넌트를 드래그 하여 포함시켜 줍니다. 그리고 속성을 확인해 보면 필요한 정보들이 보입니다.

API키 등록, 키 파일, 쿼리, 서비스 계정 이메일 입력 란이 보이게 됩니다.

이 중 디자이너 부분에서 추가 해 줄 것은 키 파일과 서비스 계정 이메일입니다.

그리고 인증 서비스 사용에는 체크를 해 주시면 됩니다.

 

그럼 키 파일은 어떻게 생성을 할 수 있는지 알아보도록 하겠습니다

https://console.developers.google.com/사이트로 들어가 보도록 하겠습니다.

프로젝트 만들기에서 프로젝트를 만들어 줍니다. 간단하게 프로젝트 명만 입력하면 됩니다.

그리고 사용자 인증 정보 → 서비스 계정관리 → 서비스 계정 만들기를 클릭 해 줍니다. 

프로젝트를 만들었다면 https://console.developers.google.com/iam-admin/serviceaccounts/project?project=프로젝트명 을 적어 바로 접속 하시면 됩니다.

 

키발급

 

서비스 계정을 만들기 화면에서 새 비공개 키 제공을 체크 하시면 키 유형이 표시됩니다.

P12 선택 후 만들기를 하시면 키 파일이 자동을 생성되고 다운 받게 됩니다. 바로 이 파일을 인벤터에 올려 주시면 됩니다.

그리고 서비스 계정 ID 를 복사하여, 서비스 계정 이메일 란에 입력 해 주시면 됩니다.

이 계정 이메일 정보는 퓨전 테이블을 생성하고, 권한설정에 입력 해 주게 됩니다.

 

그러면 퓨전 테이블을 생성 해 보도록 하겠습니다.

https://developers.google.com/fusiontables/docs/v2/getting_started 에 접속하여

Google Fusion Tables 클릭 → Create a fusion table 클릭 해 주시면 아래 화면이 나타납니다.

Create empty table클릭하여 퓨전 테이블 컨트롤 화면으로 이동 합니다.

 

퓨전 테이블

 

 

상단 New Table 을 클릭하면 테이블명 등을 설정 할 수 있습니다. 간단하게 테이블 명만 설정해 주시면 됩니다.

그리고 테이블 ID정보를 확인해야 합니다.

코딩 시 필요하기 때문입니다.

File 에서 About this table 을 클릭하면 테이블 ID를 확인 할 수 있습니다.

우측 상단 Share 을 클릭하면 권한을 설정 할 수 있습니다.  

초대할 사용자 란에 위에서 생성된 이메일 주소를 넣어 주시면 됩니다.

그리고 기존 비공개-나만 액세스 할 수 있습니다. 에서 변경을 클릭하여, 링크가 있는 모든 사용자로 변경 해 주시면 됩니다.

그리고 마지막으로 Tools에서 Publish 클릭 해 주시면 설정이 적용 완료 됩니다.

참고로 Edit 에서 Change columns 클릭하여 항목을 변경 할 수 있습니다.

 

퓨전테이블 ID확인

 

 

이제 마지막으로 블록을 이용하여 간단하게 조회 및 입력하는 방법을 살펴 보겠습니다.

 

블록

 

기록보기, 기록저장 버튼을 디자이너에서 추가 해 줍니다.

먼저 조회 부분입니다.

언제 기록보기 버튼을 클릭 했을 때입니다.

지정하기에서 퓨전테이블 쿼리 값을 설정 합니다. select Name(항목이름) from 테이블 ID를 입력 해 주시면 됩니다. 그리고 호출 쿼리 보내기 블록을 추가 해 줍니다. 그러면 Name 항목이 값들이 조회되고, 결과를 가져와서 텍스트 란에 표시 해 주게 됩니다

기록저장 버튼을 생성하고, 클릭 시에 이벤트 입니다. 동일합니다. 쿼리를 생성하고 쿼리 보내기를 하면 테이블에 데이터가 저장이 됩니다.

쿼리 : inert into 테이블 ID (Name) values('저장 값')

 

Data Base 에 대한 지식이 전혀 없는 분들은 조금 많이 어려움이 있을 것입니다.

그렇지만 천천히 도전 해 보시면 데이터 저장하기 기능을 구현 하실 수 있을 것이라 생각됩니다.

 

내용이 너무 많이 자세하게 다루지는 못했습니다.

다음 기회가 된다면 포스팅 글에 대한 보완 작업 시에 아주 자세하게 한번 더 작성 해 보도록 하겠습니다.

 

그럼 여기까지 퓨전테이블을 이용한 모바일 앱 데이터 저장하기에 대하여 알아보았습니다.

반응형