웹 서버를 이용한 TinyWebDB 사용 (앱인벤터 2)

 

웹 서버를 이용한 TinyWebDB 사용 (앱인벤터2)

 

글. 오상문 sualchi@daum.net

 

TinyWebDB는 웹에 데이터를 저장하는 기능을 제공하는 앱인벤터 컴포넌트입니다. 특정 폰에만 저장되는 TinyDB와는 다르게, TinyWebDB는 여러 폰이나 앱(가령 멀티유저게임)끼리 통신할 수 있게 해줍니다.

 

TinyWebDB 컴포넌트는 앱인벤터에서 제공하는 테스트 서비스(http://appinvtinywebdb.appspot.com/)에 자료를 저장합니다.

 

이 서비스는 테스트하는 용도로 유용하지만, 앱인벤터 사용자들이 공유하는 곳이므로 데이터 항목이나 크기에 제한이 있습니다. 그곳에 저장하는 자료도 계속 유지되는 것이 아닙니다.

 

나만의 웹 DB 서비스 사용 (TinyWebDB용 내 DB 서버 구축)

 

대부분 앱에서는 자기 DB 자료를 앱인벤터로 만든 다른 앱이나 개발자들과 공유하고 싶진 않을 겁니다. 여러분만의 자료 저장 웹 서비스를 만들고 싶으면 다음처럼 따라합니다.

 

 

1. 파이썬 2.7 설치 

 

파이썬 2.7(Python 2.7) 기반의 앱 엔진이 동작해야 하므로 컴퓨터에 파이썬 2.7이 설치되어야 합니다.

 

[참고] Python 버전 확인

터미널(명령 프롬프트 창)을 실행하고 ‘Python’을 입력하고 엔터를 누릅니다. 파이썬이 설치되어 있고 PATH 설정이 제대로 되어 있다면 버전을 확인할 수 있습니다.

 

 

  

[참고] 파이썬2.7 다운로드 링크

http://www.python.org/download/releases/2.7/

 

 

 

[참고] 윈도우 설치용 msi 파일이 제공되므로 그것을 다운로드해서 설치할 수 있습니다. AMD 씨피유 사용자는 x86-64 버전을 설치해도 됩니다.

 

 

 

 

(6) GoogleAppEngineLauncher 프로그램의 Preferences에 Python2.7이 설치된 경로를 설정해야 합니다. 맥 컴퓨터라면, /usr/local/bin/python2.7과 비슷한 경로일 것입니다. 

 

[참고] 저는 윈도우즈 환경 c:\python27\ 경로에 설치됨 

 

[참고] 윈도우에서 PATH 시스템 환경변수 수정하기 

 

 

 

 

 

2. 구글 앱 엔진 설치 

 

(1) 파이썬 기반의 구글 앱 엔진(App Engine)을 다운로드하고 설치합니다.
https://cloud.google.com/appengine/docs/standard/python/download

(http://code.google.com/appengine/ )

 

 

 

다운로드가 완료되면 설치 파일을 실행합니다.

 

 

 

[참고] 파이썬2.7이 설치되지 않았으면 다음처럼 경고가 나오니 미리 파이썬을 설치하는 것이 좋습니다.

 

 

 

 

(2) GoogleAppEngineLauncher 아이콘을 클릭하여 실행합니다.

 

 

 

(3) 예제 코드를 다운로드합니다.

http://explore.appinventor.mit.edu/sites/all/files/tinywebdb/customtinywebdb.zip

 

(4) 다운로드한 압축 파일은 사용자용 tinywebdb 웹서비스 소스 코드를 포함하고 있습니다.

다운로드한 tinywebdb 압축 파일을 해제합니다. 이것은 customtinywebdb이라는 새 폴더를 생성하는데, 다른 이름으로 고쳐도 됩니다. 저는 C:\appdb\ 폴더에 해제해서 실제 경로는 다음과 같습니다. 

 

C:\appdb\appinventordb\

 

(5) GoogleAppEngineLauncher에서, File | Add Existing Application을 선택하고 여러분이 앞에서 설치한 경로(customtinywebdb)를 선택합니다. 

 

 

 

(6) Run을 클릭하면 여러분의 컴퓨터에서 테스트 웹 서비스가 동작합니다.

 

 

 

(7) 웹브라우저를 실행하고 주소창에 "localhost:8080"를 입력하여 서비스를 테스트할 수 있습니다.

 

[참고] 포트 번호(8080)는 GoogleAppEngineLauncher에서 확인할 수 있습니다.

 

(8) 웹 서비스에 대한 웹 인터페이스가 표시됩니다. 이 서비스의 목적은 App Inventor로 만든 모바일 앱과 통신하는 것입니다. 그런데 이 서비스는 프로그래머가 디버깅을 할 수 있는 웹 페이지 인터페이스를 제공합니다. 수작업으로 가져오기 및 저장하기, 기존 항목 보기, 항목 삭제 등을 할 수 있습니다.

 

 

 

 

[참고] 웹 페이지 생성에 문제가 있으면 App Engine 화면의 로그를 클릭하여 오류를 살펴보세요.

 

(9) 이제 여러분의 앱을 위한 웹페이지를 만들었습니다. 남은 일은 구글의 App Engine server에 업로드 해야 합니다. GoogleAppEngineLauncher에서 Dashboard를 선택합니다. Google 계정 정보를 입력하고 App Engine Dashboard로 갑니다.

 

[참고] 구글 클라우드 서비스용 계정을 생성하는 경우 사용자 정보와 신용카드 정보를 입력해야 합니다. 

신용카드 정보를 입력하면 1달러 결제가 되는데 그건 나중에 취소되므로 진행하면 됩니다.

 

(10) 프로젝트 만들기를 선택하여 새 프로젝트를 만듭니다. 이때 만드는 이름은 다른 사용자나 다른 프로젝트에 사용하는 이름과 구분해야 합니다. 만약 겹친 경우에는 프로젝트ID 부분에 있는 것이 진짜 식별자입니다. 식별자는 계속 사용해야 하므로 따로 적어두세요(뭐, 여기 와서 확인할 수도 있지만....).

 

프로젝트를 선택하고 관리창에서 우측 아래로 가면 App Engine이 나오는데 그걸 선택하면 '앱 엔진 시작하기'가 나옵니다. 그곳에서 언어 선택(파이썬)하고 세계 지역(asia northeast) 정하고..... 그렇게 진행했습니다. 확인 누르면 1분 정도 걸려서 서버가 만들어집니다.  

 

(11) 여러분 컴퓨터에서 텍스트 편집기를 실행하고 customtinywebdb 폴더에 있는 app.yaml 파일을 엽니다. 첫째 줄 내용을 아까 구글에 설정한 식별자에 맞게 변경합니다.

 

(12) GoogleAppEngineLauncher에서 Deploy를 선택하고 앱을 배포합니다.

 

(13) 앱이 웹에서 실행되는지 테스트합니다. 웹브라우저에서 “식별자.appspot.com”을 입력합니다. 응용프로그램은 로컬 테스트 서버에서 실행할 때와 동일하게 보입니다. 이제 여러분의 앱인벤터 앱에서 여러분 서버에 접근할 수 있습니다.

 

 

3. 앱에서 자료를 서버에 저장하거나 읽어오기

 

다음처럼 따라합니다.

 

(1) 앱인벤터 컴포넌트 디자이너에서 TinyWebDB 컴포넌트를 스크린에 끌어옵니다.

 

(2) ServiceURL 속성을 여러분의 웹 서비스(“http://식별자.appspot.com”)로 수정합니다.

 

[참고] ServiceURL 기본값: http://appinvtinywebdb.appspot.com/

 

(3) StoreValue, GetValue 작업을 이용하여 자료를 저장하고 읽어옵니다.

 

 

<이상>

 

<참고> http://explore.appinventor.mit.edu/ai2/custom-tinywebdb