앱인벤터2 강좌 6: TinyDB 와 TinyWebDB 사용법

오늘은 TinyDB 와 TinyWebDB의 사용법에 대해서 알아보겠다. 먼저 TinyDB부터 알아본다. "TinyDB"는 본인 스마트폰의 메모리를 이용해서 저장하는 방식이므로 쉽고 즉시 결과를 확인할 수 있는 장점이 있다.

TinyDB의 사용법은 아주 간단하다. 다음과 같이 "ScreenEditor" 화면에 TinyDB를 테스트할 수 있는 2개의 버튼과 저장내용을 확인할 수 있는 텍스트 박스 하나를 준비한다. 

 

 

 

첫번째 버튼은 TinyDB에 무엇을 저장하기 위한 버튼이고 두번째 버튼은 TinyDB에 들어있는 내용을 확인해

보기 위한 출력용 버튼이다.

마지막에 있는 "여기에 저장 내용이 출력됩니다"란 TextBox는 TinyDB에 저장한 내용을 확인해 볼 수 있는 텍스트박스이다.

 

 

 

다음으로 Block에디터로 이동해서 Blcoks패널의 TinyDB1를 클릭하면 TinyDB의 dropbox가 열리는데 이중

"TinyDB1.GetValue" 블럭과 "TinyDB1.StoreValue"을 드래그해서 "Viewer"패널로 가져다 놓는다.

 

 

스크린에디터 화면에 "saveButton"과 "outputButton"을 배치했었는데 여기서 "saveButton"과 "outputButton"을 클릭해서 "Click "이벤트 블럭을 꺼낸다음 "TinyDB1.GetValue" 블럭과 "TinyDB1.StoreValue"을 위의 그림과 같이

끼워 넣는다.

 

"saveButton"이벤트 블럭속의 "TinyDB1.StoreValue"블럭에는 "tag" 홈과 "valueToStore" 홈이 있는데 "tag"홈에는 내가 원하는 이름표를 붙인다. 필자는 "saveTinyDBTest1"이란 이름을 사용했다. 그리고 "valueToStore" 홈에는 저장하고 싶은 텍스트나 숫자등 원하는 내용을 기입한다.

 

"outputButton"이벤트 블럭속의 "TinyDB1.GetValue"블럭은 "TinyDB1.StoreValue"블럭에서 저장한 내용을 불러오는 블럭이다.  "TinyDB1.GetValue"블럭에도 "tag" 홈과 "valueIfTagNotThere" 홈이 있는데 저장할 때 사용했던 이름표 "saveTinyDBTest1"를 주고 "valueIfTagNotThere" 홈에는 "내용이 없습니다"란 텍스트를 입력한다. 이것은 에러방지용 홈이다.

 

"TinyDB1.GetValue"블럭은 DB에 저장된 수많은 정보중에서 이름표즉 "tag" 해당하는 내용을 가져와서 "tinyDBoutputTextBox.Text" 박스에 보여준다.

 

 

 

 

 위는 실제 스마트폰에서 실행된 내용이다. 화면 아래 텍스트 박스에 "TinyDB"에 저장한 "반갑습니다. TinyDB입니다"란 문장이 표시되었다.

"TinyDB"에는 텍스트, 숫자, 그림등등 상상할 수 있는 대부분의 내용을 저장할 수 있다.

"TinyDB"는 비교적 쉽게 사용할 수 있으므로 여기까지 하고 "TinyWebDB"로 넘어가자.

 

 

 

 위와 같이 "ScreenEditor" 화면에 "TinyWebDB"를 테스트할 수 있는 2개의 버튼과 저장내용을 확인할 수 있는 textBox 두개를 준비한다. 위의 텍스트 박스는 tag가 제대로 표시되는지 확인하는 용도이고, 아래 박스는 webDB의 내용이 제대로 들어오는지 알아보기 위한 것이다.

 여기서 중요한 점은 "TinyWebDB"는 구글에 있는 클라우드서버를 이용하므로 자신의 "ServiceURL"이 필요하다는 것이다. "ServiceURL"은 구글 클라우드의 대시보드에 등록해야 하므로 기회가 되면 다음에 설명하기로 한다.  

궁금하신 분들은 http://kusson.tistory.com/65를 참고한다.

 

 

 

다음으로 Block에디터로 이동해서 Blcoks패널의 TinyWebDB1를 클릭하면 TinyWebDB1의 dropbox가 열리는데 이중 "TinyWebDB1.GetValue" 블럭과 "TinyWebDB1.StoreValue"을 드래그해서 "Viewer"패널에 가져다 놓는다.

 

 

 

 

 Blocks 패널에서 "saveButton"과 "outputButton"을 클릭해 각각의 "Click "이벤트 블럭을 꺼낸다음 "TinyWebDB1.StoreValue"블럭과 "TinyWebDB1.GetValue" 블럭을 위의 그림과 같이 끼워 넣는다.

 

 "saveButton"이벤트 블럭속의 "TinyWebDB1.StoreValue"블럭에는 "tag" 홈과 "valueToStore" 홈이 있는데 "tag"홈에는  "saveWebDBTest1"이란 이름을 사용했다. 그리고 "valueToStore" 홈에는 저장하고 싶은 텍스트나 숫자등 원하는 내용을 기입한다.

 

 "outputButton"이벤트 블럭속의 "TinyWebDB1.GetValue"블럭은 "TinyWebDB1.StoreValue"블럭에서 저장한 내용을 불러오는 블럭이다. "TinyWebDB1.GetValue"블럭에도 "tag" 홈과 "valueIfTagNotThere" 홈이있는데 저장할 때 사용했던 이름표  "saveWebDBTest1"를 끼워 넣는다.

 "TinyWebDB1.GetValue"블럭은 DB에 저장된 수많은 정보중에서 이름표즉 "tag" 해당하는 내용을 가져와 "TinyWebDBTagOutputTextBox.Text"에 보여준다.

여기서 TinyWebDB는 "TinyWebDB1.GotValue" 이벤트 블럭을 사용했는데 이점이 TinyDB와 다른점이다.

 

TinyWebDB는 구글클라우드 서버를 이용하므로 데이터를 가져오는데 시간이 필요하다.

즉 "outputButton"을 누른다고 바로 내용이 출력되는 것이 아니고 얼마간의 시간이 필요하다. 그래서 "TinyWebDB1.GotValue" 이벤트 블럭을 이용해서 데이터가 왔는지 확인하고, 데이터가 온 것이 확인된 이후에야 다음 작업을 할 수 있다.

 

위 프로그램에서는 "tag"와 "value"를 각각 화면에 출력하도록 했다.

 

 

 

 

스마트폰 화면에 webDB에서 가져온 "tag"와 "value"가 제대로 표시되는 것을 확인할 수 있다.