제 11 장 멀티유저 메모장 3 (앱인벤터 컬러 차트 등의 사용에 의한 추가보완작업)

1. 상기 제 1 단계의 예제에서 설명한 컬러보정을 하여 앱인벤터에 내장된 컬러와 동일하게 하는 것은 상당한 시간을 필요로 하고 또한 실제로 컬러를 맞추기가 힘들다.  따라서, 상기 설명한 블록중에서 컬러에 관한 블록을 모두 삭제하고, 다음과 같이 정정한다.

1-1. 프로젝트 명칭을 MutiUserMemorandumVersion으로 한다.

1-2. 이 예제에서 사용된 그림파일은 디자이너창의 미디어컬럼의 파일명칭을 클릭하여 컴퓨터에 다운로드할 수 있다.

  

또는, 압축파일(MultiuserMemorandumVersion.zip)을 풀어서 폴더(assets)안에 있는 그림파일을 사용하여도 된다.

  

2. 디자이너창의 전체를 나타내는 스크린샷은 다음과 같다.

  

참고 사항: 상기 디자이너창과 이후에 설명하는 블록에디터창의 기능블록에 대응하는 넥서스S의 멀티유저 메모장 화면은 다음의 스크린샷과 같다.

2-1. 상기 디자이너창의 스크린샷에서 4 개의 컬러버튼과 수평으로 배치된 버튼(SumitButton)과 리스트피커(RemoveListPicker)가 나타나지 않지만 상기 스크린샷과 하기 스크린샷에 나타난 바와같이 안드로이드폰과 에뮬레이터에서는 이들 구성요소가 모두 나타난다.

  

2-2. 상기 4개의 컬러버튼의 컬러는 앱인벤터 컬러 차트(App Inventor Color Chart)에 나열된 컬러를 포토샵 등에서 그대로 복사한 컬러에 해당한다. 즉, 컬러버튼은 컬러는 복사한 컬러이고 블록에디터에서 설명하는 텍스트박스와 라벨에 기재된 글자색은 앱인벤터 컬러 차트에 나열된 번호를 해당 블록에 기재한다.

2-3. 또한 상기 컬러버튼의 컬러는 그림파일(colorOrange.png, colorRed.png, colorGreen.png, colorBlue.png)에 각각 해당하고, 컬러버튼의 속성컬럼의 이미지(Image)난에서 해당 그림파일을 각각 선택하면 상기 스크린샷과 같이 나타난다.

참고 사항: 상기 예제와 동일한 파일명을 사용하고 있지만 컬러를 선택한 방식이 차이가 있기 때문에 본 예제에서 사용되는 컬러는 상기 예제의 컬러와 구분된다. 또한 그림파일의 크기도 다르다.

2-4. 메모통그림(SubmitNoteButton)과 휴지통그림(RemoveListPicker)은 그림파일(memo.png, delete.png)에 각각 해당하고, 버튼(SubmitNoteButton)과 리스트피커(RemoveListPicker)의 속성컬럼의 이미지(Image)난에서 해당 그림파일을 각각 선택하면 상기 에뮬레이터의 스크린샷과 같이 나타난다.

2-5. 상기 4개의 버튼(즉 버튼의 이미지)을 수평배열구조(HorizontalArrangement)의 내부에 순차적으로 드래그한다.   그 결과, 4개의 버튼은 수평으로 정렬된다.  폭을 3 픽셀로 설정하고 높이를 5 픽셀로 설정한 4개의 수평배열구조를, 화면좌측변과 버튼사이 및 버튼과 버튼사이에 배치한다.  이들 구조를 설명의 편의상 제 1 버튼그룹으로 칭한다.

상기 버튼과 리스트피커를 다른 수평배열구조의 내부에 순차적으로 드래그하여, 버튼과 리스트피커는 수평으로 정렬된다. 폭을 5 픽셀로 설정하고 높이를 20 픽셀로 설정한 수평배열구조를, 버튼과 리스트피커사이에 배치한다. 이들 구조를 설명의 편의상 제 2 버튼그룹으로 칭한다.

상기 제 1 버튼그룹과 제 2 버튼그룹을 또 다른 수평배열구조내에 수평으로 배치한다.  또한 폭을 5 픽셀로 설정하고 높이를 20 픽셀로 설정한 수평배열구조를 이들 그룹사이에 간격을 두기 위해 배치한다.

폭을 Fill parent로 설정하고 높이를 5 픽셀로 설정한 수직배열구조를, 화면의 상측변과 상기 버튼그룹사이에 간격을 두기 위해 배치한다.

2-6. 나머지 구조는 상기 제 1 단계의 예와 마찬가지이므로 생략한다.

3-1.  4개의 버튼에 관련된 컬러블록에 기재된 번호도 이전에 설명한 바와 같이 앱인벤터 컬러 차트(App Inventor Color Chart)를 참조하여 정정한다.

3-1-1. 오렌지색 버튼

  

3-1-2. 적색 버튼

  

3-1-3. 녹색 버튼

  

3-1-4. 청색 버튼

  

3-2. 필요한 메모를 기재하지 않고 버튼을 터치하는 경우에는 “메모를 먼저 입력하세요.”라는 통보서가 화면에 나타나도록 조건문을 추가한다.

3-2-1. 조건문

  

3-2-2. 제 1 단계의 버튼에 상기 조건문을 추가한 버튼조합블록

  

3-3. 소형웹데이터베이스의 갓밸류블록(TinyWebDB1.GotValue)에서도 텍스트컬러에 관련된 부분도 앱인벤터 컬러 차트(App Inventor Color Chart)를 참조하여 정정한다.

  

4. 지금까지의 설명한 블록을 종합한 3개의 스크린샷을 이하 나타낸다.

제 11 장 멀티유저메모장 2 (블록에디터창 작업)

6. 구성요소에 활력 불어넣기

1. 블록에디터를 오픈하고 좌측에 위치한 사용자블록(My Blocks)탭을 선택하면, 디자이너창에서 작업한 라벨, 버튼, 수평배열, 제거용리스크피커, 데이터베이스(TinyWebDB), 클록 및 통보자(Notifier1) 등에 각각 대응하는 드로워(Drawer)가 나타난다. 이외에도, 나중에 설명하는 바와 같이 변수블록 등을 정의할 때에 자동생성되는 블록을 저장하는 사용자정의(My Definitions)드로워가 나타난다.

2. 메모를 다이내믹하게 임시저장하기 위해 사용하는 변수와 저장된 메모를 삭제하기 위해 사용하는 인덱스 및 색을 감마보정하기 위한 변수에 대해서는 제 9 장 제 1 단계와 동일하므로 이에 대한 설명은 생략한다.

3. 동일한 절차를 계속 사용하여야 하는 경우에는 절차블록(procedure)을 사용하는 것에 대한 설명도 제 9 장 제 1 단계와 동일하므로 생략한다.

4. 노우트텍스트박스(NoteTextBox)에 메모를 기재하고 연필과 메모장이 그려 있는 아이콘을 터치하면, 버튼클릭이벤트가 발생한다.  이 이벤트의 발생시에 호출되는 버튼클릭이벤트핸들러의 사용에 대해서는, 안드로이드폰 내부에 있는 소형의 데이터베이스(TinyDB)를 사용하는 대신에, 소형의 웹데이터베이스(TinyWebDB)를 사용하는 점을 제외하고는, 다른 구성은 제 9 장 제 1 단계와 동일하다.

데이터베이스에 notes를 태그로 사용하는 노우트리스트(NoteList)의 값이 저장되는 점도 같다.  즉, 소형 데이터베이스에 저장될 때에는 한쌍의 태그와 값(tag-value pairs)으로 저장된다. 

다만, 노우트리스트(NoteList)의 값이, 소형 데이터베이스의 스토어밸류(call TinyDB1.StoreValue tag valueToStroe)에 저장되는 대신에 소형 웹데이터베이스 스토어밸류(call Tiny WebDB1.StoreValue tag valueToStore)에 저장된다.

즉, 다수사용자의 메모장에서는,

 

  블록을 사용하는 대신에,

   블록을 사용한다.

따라서, 메모장과 연필이 그려져 있는 버튼(submitNoteButton)의 클릭에 의한 버튼클릭이벤트핸들러의 블록의 조합은 다음의 스크린샷과 같이 구성된다.

  

5. 기록한 메모를 제거하는 제거용 리스트피커를 사용하는 방법에 대해 설명한다. 

휴지통이 그려져 있는 아이콘을 터치하면, 제거용 리스트피커에 이벤트가 발생하여 제거항목을 피크(선택)하기 전후를 구분하여 블록을 구성한다.

5-1. 리스트제거용피커의 피크전블록(RemoveListPicker.BeforePicking)의 설명은 제 9 장 제 1 단계와 동일하므로 생략한다.

  

5-2. 리스트제거용피커의 피크후블록(RemoveListPicker.AfterPicking)의 설명은 제 9 장 제 1 단계와 동일하지만, 소형 데이터베이스를 사용하는 대신에 소형 웹데이터베이스를 사용하는 점만 다르다.

  를 사용하는 대신에,

  를 사용한다.

5-3. 즉, 리스트제거용피커의 피크후블록(RemoveListPicker.AfterPicking)의 조합은 다음의 스크린 샷과 같이 구성된다.

참고 사항: 소형 데이터베이스(TinyDB)를 사용하는 경우에는 라이브테스트를 할 수 없지만, 소형 웹데이터베이스(TinyWebDB)를 사용하는 경우에는 데이터베이스의 저장여부에 대해 직접 라이브 테스트를 할 수 있다.

6. 컬러버튼(원형 컬러 아이콘)을 터치하여 컬러버튼의 이미지색이 라벨의 배경색으로 나타내고 이 컬러에서 사용자가 입력한 메모의 글씨가 선명하게 나타나도록 조정하는 설명은 제 9 장 제 1 단계와 동일하므로 생략한다.

7. 본 예제를 실행할 때의 스크린의 초기화에 대해 설명한다.   소형 웹데이터베이스는 소형 데이터베이스와는 달리 안드로이드폰 자체의 데이터베이스에서 가져오는 대신에 인터넷을 통하여 구글서버에서 가져오기 때문에 약간의 대기시간을 고려하여, 소형웹데이터베이스의 겟밸류블록(call TinyWebDB.GetValue tag)이외에도, 소형웹데이터베이스의 갓밸류블록 블록(when TinyWebDB.GotValue tagFromWebDB valueFromWebDB do)을 추가하여 사용한다.

7-1. 스크린의 초기화 이벤트핸들러(Screen.Initialize)는 태그(notes)를 사용하여 소형 웹데이터베이스의 겟밸류블록(call TinyWebDB.GetValue tag)을 호출한다.  초기화 이벤트핸들러의 블록조합의 스크린 샷은 다음과 같다.

7-2. 소형 웹데이터베이스의 겟밸류블록(call TinyWebDB1.GetValue tag)을 사용하여 태그(text notes)에 대응하는 데이터값을 호출하고, 소형웹데이터베이스에서 한 쌍의 태그와 값(name tagFromWebDB, name valueFromWebDB)이 핸드폰에 도달한 경우에 소형웹데이터베이스의 갓밸류블록(when TinyWebDB1.GotValue tagFromWebDB valueFromWebDB do)이 사용된다.

참고 사항: 사용자블록(My Blocks)탭의 소형웹데이터베이스(TinyWebDB1)드로워를 열고 소형웹데이터베이스의 갓밸류블록(when TinyWebDB1.GotValue tagFromWebDB valueFromWebDB do)을 작업영역으로 드래그할 때에 상기 한 쌍의 태그와 값블록(name tagFromWebDB, name valueFromWebDB)이 상기 갓밸류(TinyWebDB1.GotValue)의 좌측에 자동생성된다.  또한, 사용자블록(My Blocks)탭의 사용자정의(My Definitions)에, 상기 한 쌍의 태그와 값블록(name tagFromWebDB, name valueFromWebDB)에 대응하는 한 쌍의 태그와 값블록(value tagFromWebDB, value valueFromWebDB)이 자동생성된다.

7-2-1. 웹데이터베이스로부터 수신한 태그(value tagFromWebDB)와 핸드폰측에서 요청한 태그(text notes)가 동일한 경우,

웹데이터베이스로부터 수신한 값(value valueFromWebDB)을 노우트리스트(set global NoteList to)에 일단 임시 저장한다.

7-2-2. 일단 저장된 노우트리스트에 아이템(이미 기록된 메모)가 없는 경우에는, 노우트리스트(NoteList)에 아이템이 없음을 나타내는 블록을 설정한다.  이 경우는 앱을 처음 실행한 경우이거나 이미 실행한 경우로서 기록된 메모를 모두 지운 경우에 해당한다. 이에 대한 상세설명은 제 9 장 제 1 단계의 스크린초기화를 참조한다.

  

일단 저장된 노우트리스트에 아이템(이미 기록된 메모)가 있는 경우에는, 절차블록(displayNotes)을 호출하는 블록(call displayNotes)을 추가하여 조합한다.  즉, 리스트에 있는 아이템전체(메모전체)가 라벨(NoteListLabel)에 나타내는 절자블록을 호출한다.  절차블록(displayNotes)의 상세에 대해서는 제 9 장 제 1 단계를 참조한다.

  

상기 설명한 두 경우에 대해서는 하기 스크린샷에 나타난 바와 같이, 조건블록(if else)의 섹션(then-do, else-do)에 각각 해당 블록을 놓는다.

7-2-3. 다음에, 청색과 백색을 디폴트값으로서 사용하는 초기화면의 라벨의 배경색 및 메모의 텍스트의 색 및 통지블록에 대한 설명은 제 9 장 제 1 단계와 동일하므로 이에 대한 설명은 생략한다.

7-2-4. 소형웹데이터베이스갓밸류블록(when TinyWebDB.GotValue tagFromWebDB valueFromWebDB do)을 완성한 스크린샷은 다음과 같다.

8. 지금까지의 설명한 블록을 종합한 3개의 스크린샷을 이하 나타낸다.

제 11 장 멀티유저 메모장 1 (준비단계 , 학습소개 및 디자이너창 작업)

제 11 장 멀티유저 메모장 

1. 만들고자 하는 앱

제 9 장 제 1 단계에서 설명한 메모장은 개인적으로 사용가능하다. 이번에는 다수의 사용자가 공용으로 사용가능한 메모장을 소형웹데이터베이스(TinyWebDB)에 저장 및 제거가 동시에 가능한 앱을 만든다.  제 9 장 제 1 단계와의 차이점은 안드로이드폰자체의 데이터베이스를 사용하는 대신에 고객용 소형 웹데이터베이스 서비스(Custom Tiny WebDB Service)를 사용한다.   웹데이터베이스는 다수의 사용자가 접근가능하다.

2. 준비하기

제 9 장 제 1 단계에서 설명한 것과 동일하므로 생략한다.

3. 시작하기

앱인벤터 웹사이트에 액세스하여 새로운 프로젝트를 시작한다.  프로젝트 명칭을 MutiUserMemorandum으로 하고, 스크린의 타이틀을 공용 메모장으로 한다.   블록에디터를 열고, 에뮬레이터 또는 안드로이드폰을 접속한다.

4. 학습소개

일상생활에 필요한 사항을 다수의 사용자가 공용으로 메모하여 저장하고 불필요한 메모를 제거하는 메모장에 관한 것으로 안드로이드폰에 직접 메모내용을 저장하는 대신에 고객용 소형 웹데이터베이스 서비스(Custom Tiny WebDB Service)를 사용한다.

학습요지:

1.  구글서버의 영구적인 메모리에 데이터를 저장하는 TinyWebDB를 사용한다.

2.  TinyDB와의 차이점을 알아본다.

3.  제 9 장 제 1 단계의 학습요지도 복습한다.

5. 구성요소 작업

디자이너 창을 사용하여 메모장을 위한 외관의 구성은 제 9 장 제 1 단계와 동일하므로 이에 대한 상세설명은 생략한다.  다만, 소형 데이터베이스(TinyDB)대신에 소형웹데이터베이스(TinyWebDB)를 사용하는 점이 다르다.

데이터를 저장하기 위해, 팔레트컬럼에서 “인터넷접속자가 많은 시간인 프라임 타임을 위해 준비되지 않는 구성요소(Not ready for prime time)”드로워를 열고 TinyWebDB를 선택하여 뷰어로 드래그하면, 뷰어의 하부에 넌비지블한 구성요소(Non-visible Component)로서 자동으로 이동하여 배치된다.  또한, 속성(Properties)컬럼에서 ServiceURL란에 디폴트값으로 http://appinvtinywebdb.appspot.com이 기재되어 있다.  이 서비스는 시험을 위해 유용하지만, 1000개까지 기입할 수 있다.

따라서, 이 ServiceURL을 지속적으로 사용하기 위해서는, 구글앱엔진을 사용하여 설정한 개인용 URL(http://..............appspot.com)로 정정하여야 한다.   이에 대해서는 제 10 장을 참고한다.

이상 설명한 디자이너창의 구성배열의 스크린 샷은 다음과 같다.

  

참고 사항: 상기 디자이너창과 다음에 설명하는 블록에디터의 기능블록에 대응하는 넥서스S의 멀티유저메모장 화면의 스크린샷은 다음과 같다.

 

제 11 장 멀티유저 메모장 1 (준비단뎨제 1 단계와 제 2 단계)

제 10 장 구글 앱엔진에 의한 소형웹데이터베이스의 접속방법

제 10 장 구글 앱엔진에 의한 소형웹데이터베이스의 접속방법

~ 개요 ~

소형 웹데이터베이스(TinyWebDB)의 접속방법에 대해 알아본다.  소형웹데이터베이스(TinyWebDB)는 안드로이드 앱으로부터 웹에 접근하게 하는 앱인벤터의 구성요소이다.   소형웹데이터베이스를 사용하여 데이터 소스에 접근할 수 있고 웹 데이터베이스에 앱데이터를 영구적으로 저장할 수 있다.

~ 제 1 단계 ~

1-1. 앱엔진사이트(http://code.google.com/appengine/)좌측의 시작하기에 기재된 바와 같이App Engine 계정에 가입한다.

  

1-2. “App Engine 계정에 가입합니다.”의 가입을 클릭한다.

  

1-3. 버튼(Create Application)을 클릭하면, SMS에 의해 사용자의 계정을 확인하는 창으로 이동한다.

1-4. 문자메시지를 사용하여 계정가입을 확인하기 위해 핸드폰 전화번호를 입력한다. 즉, 핸드폰번호가 “010-1234-1234”인 경우 +82 10 1234 1234”와 같이 입력한다.

구글 앱 엔진으로부터 “e code”가 핸드폰으로 전송되면 그 번호를 기입하고 앱리케이션을 생성한다.

  

1-5. 앱리케이션 식별자(Application Identifier)를 기입하고 이용가능한 지의 여부를 버튼(Check Availability)의 클릭에 의해 확인하고 앱리케이션 제목을 기입하고, 버튼(Create Application)을 클릭한다.

참고 사항: 이때에 기입한 식별자는 구글 앱 엔진 런처(Google App Engine Launcher)를 편집(edit)할 때 필요하다.

~ 제 2 단계 ~

2-1. 구글 앱 엔진 SDK를 설치하기 전에 파이썬(Python)이 미리 설치되어 있어야 한다.  설치되어 있지 않은 경우, 사이트(www.python.org/download)에서 파이썬 2.7.1을 다운로드한다.

2-2. 다운로드한 파일을 클릭하여 다음과 같은 대화상자가 나타나면 실행버튼(R)을 클릭하여 설치한다.

2-3. 실행버튼(R)을 클릭하면, 파이썬 셋업 대화상자가 나타나고,

  

2-4. 다음(Next>)버튼을 클릭하면, 파이썬파일을 설치하고자 하는 폴더 위치를 나타내는 대화상자가 나타나고,

2-5. 다음버튼(Next>)을 클릭하면, 파이썬파일을 설치하고자 하는 설치할 대화상자가 별도로 나타나고,

  

2-6. 다음 버튼을 누르면, 파이썬은 설치하는 진행표시가 나타나고, 설치가 완료되면 다음과 같은 대화상자가 나타나고, 종료버튼(finish)을 누른다.

  

~ 제 3 단계 ~

3-1. 구글 앱 엔진 시작하기에서 두 번째 단계인 App Engine SDK를 다운로드한다.

3-2. 파이썬(Python)용 앱 엔진 SDK(Google App Engine SDK for Python)를 다운로드한다.

3-3. 다운로드한 GoogleAppEngine-1.4.2를 클릭하면 다음과 같은 대화상자가 나타난다.

  

3-4. 상기 대화상자에서 실행버튼(R)을 클릭하면, 구글 앱 엔진을 셋업하는 마법사가 나타나고, 파이썬을 설치하지 않은 경우에는 파이썬을 설치하는 사이트를 나타내는 두개의 버튼(Python.org와 ActiveState Python)중 하나를 클릭하여 파이썬 사이트로 이동하고, 상기 제 2단계에서 설명한 바와 같이 다운로드하여, 구글 앱 엔진 SDK를 설치하기 전에, 파이썬을 설치한다.

3-5. 파이썬 이미 설치된 경우에는 다음 버튼을 클릭하면, 라이선스 동의를 수락하는 지의 여부를 묻는 대화상자가 나타나고,

  

3-6. 동의란에 체크 표시를 하고 다음버튼을 클릭하면, 구글 앱엔진이 설치되는 파일을 나타내는 대화상자가 나타나고,

  

3-7. 다음버튼을 클릭하면 구글 앱 엔진 셋업 대화상자가 나타나고,

  

3-8. 설치(Install)버튼을 클릭하여 설치한다.

설치후 바탕화면에 있는 구글 앱 엔진 런처(GoogleEngineLaucher)의 아이콘을 클릭하여 실행한다.

  

~ 제 4 단계 ~

4-1. 사이트(http://appinventor.googlelabs.com/learn/reference/other/tinywebdb.html)에서

   

4-2. 상기 사이트에 기재된 “sample code”를 클릭하여 샘플코드의 압축파일을 다운로드한다.

압축파일을 풀면, 폴더(customtinywebdb)가 생성된다. 이 폴더를 클릭하여 열면, 폴더(customtinywebdb)내에 폴더(customtinywebdb)가 또 있다. 이 폴더를 “웹 데이터베이스 서비스용 소스코드”로 사용한다.   사용자가 원하는 경우 이 폴더이름을 변경하여도 된다.

  

참고사항: 2011년 4월 현재 사이트에서 샘플코드를 다운로드하여 압축을 풀면 애플용 폴더(--MACOSX)는 존재하지 않는다.

~ 제 5 단계 ~

5-1. 구글앱엔진런처(Google App Engine Launcher)에서 파일(File)을 열고 앱리케이션 추가(Add Existing Application)를 선택하여 클릭한다.

5-2. 대화상자(Add Existion Application)가 나타나고, 버튼(Browse)을 클릭하면, 폴더 찾아보기 대화상자가 나타나고, 상기 샘플코드의 압축을 푼 폴더(customtinywebdb)안의 폴더(customtinywebdb)를 선택한다.

5-3. 상기 대화상자(폴더 찾아보기)에서 확인버튼을 클릭하면, 앱리케이션 경로에 소스코드의 경로가 나타난다.

  

5-4. 대화상자(Add Existing Application)의 추가버튼(Add)을 클릭하면 구글앱엔진론처에 소스코드폴더가 추가된다.

  

5-5. 실행버튼(Run)을 클릭하면, 로컬머신 상에서 실행하는 테스트웹서비스를 런치한다.   

앱인벤터의 앱이 웹에 접근하기 위해서는, 구글의 앱 엔진서버에 업로드하여야 한다.  구글앱엔진런처에서, 편집버튼(Edit)을 클릭하면, 웹 데이터베이스 서비스용 소스코드중의 하나인app.yami의 편집창이 나타나고, 첫번째줄에 디폴트로 기재되어 있는 “appinventorapi”를“앱리케이션 식별자(Application Identifier)”로 정정하고 저장한 다음 파일을 닫는다. 이 앱리케이션 식별자(Application Identifier)는 이전에 설명한 바와 같이 구글앱엔진 가입시에 생성한 것이다.

5-6. 다음에 디플로이버튼(Deploy)을 클릭하고, 구글 앱엔진 가입시의 이메일 주소와 비밀번호를 입력하고 버튼(OK)을 클릭한다.

  

5-7. 구글에 디플로이되는 상자가 나타나고 자동으로 디플로이된다. 디플로이내용에 이상이 없는 지를 확인하고 디플로이 상자를 닫는다.

  

5-8. 다음에, 사용자의 앱리케이션 식별자(Application Identifier)가 “myapp”이면, 웹브라우저에서 “myapp.appspot.com”를 입력하면, 다음과 같은 화면이 나오면 앱인벤터에서 소형 웹데이터베이스(TinyWebDataBase)를 사용할 수 있다.  일단 이와 같이 구글에 디플로이 되면 구글앱엔진런처(Google App Engine Launcher)는 사용하지 않아도 앱인벤터로 소형웹데이터베이스(TinyWebDataBase)를 접속할 수 있다.

참고사항: 상기 웹브라우저의 인터넷 주소의 일부가 지워진 부분은 사용자의 앱리케이션 식별자(Application Identifier)에 해당한다.