앱인벤터2강좌 34 : 앱 서버와 앱 클라이언트 설정 방법

요즘 저에게 문자나 댓글을 주시는 분중에 앱인벤터로 데이터를 저장하는 방법이나 또는 식단앱을 개발해서 매일 데이터를 업데이트 해야 하는데 앱인벤터로 가능한가라는 질문을 주시는 분들이 계셔서 이번 시간에는 앱인벤터로 앱 서버와 앱 클라이언트 앱을 제작하는 방법과 데이터를 저장하고 불러오는 방법들에 대해서 간단히 설명하도록 하겠다.

<앱 서버 설정 화면>

위의 그림은 앱서버 화면을 그대로 캡쳐한 그림이다. 우리의 목적은 서버 화면에서 글이나 데이터를 작성해서 앱클라이언트로 보내는 것이므로 위와 같이 인풋박스 두개와 작성된 데이터를 보내기 위한 버튼등을 배치한다. 여기서 주의할 점은 구글 데이터 베이스를 이용해야 하므로 TinyWebDB를 설치해야 한다는 것이다. TinyWebDB1은 첫번째 라인을 저장하기 위한 것이고 TinyWebDB2는두번째 라인을 저장하기 위한 것이다. 위의 그림을 보시면 TinyWebDB1 Properties창에 'Service URL'을 설정해 주는 부분이 있다. 여기에는 구글의 개인 DB URL를 적어 주어야 한다. 구글DB를 아직 개설 하지 않으신 분은 저의 '구글 앱엔진 등록과 대시보드 사용 3편 (구글 클라우드 쉘 코드 편집기 이용)'편을 보시고 개인 구글 DB를 개설하셔서 사용하시면 된다. 또한 단순히 이 포스트를 따라해 보시고 싶은 분은 구글 공용 DB를 사용하시면 되는데 공용 DB의 'Service URL'은 http://appinvtinywebdb.appspot.com 이다.

 

<TinyWebDB의 블럭들>

흙색 블럭들은 이벤트 블럭을 의미하고 보라색은 실행 명령 블럭을 녹색 블럭은 실행 내용을 의미한다. 앱서버에서는 send 버튼을 클릭했을때 서버에 있는 내용을 구글 데이터 베이스에 저장해야 하므로 call TinyWebDB.StoreValue를 사용한다.

 

<앱 서버의 블록 에디터 내용>

sendButton을 클릭했을때 그 이후의 실행내용을 나타내었다. call TinyWebDB.StoreValue 블럭은 텍스트 박스내에 있는 내용을 구글 DB에 저장하라는 명령이다. tag는 데이터의 이름표에 해당하고 valueToStore에 끼워진 블럭이 실제 DB에 저장되는 내용이다. 저장되는 데이터는 tag에 따라 저장되고 불러올때는 tag를 불러오면 그 tag에 해당하는 내용이 불려온다.

 

 

<앱클라이언트 설정 화면>

앱클라이언트 화면이다. 여기에는 서버에서 보내오는 두 데이터를 보여주는 라벨이 두개 놓여져 있다. 여기서도 중요한 것은 TinyWebDB의 'Service URL'을 다시 적어줘야 한다는 것이다. 'Service URL'을 정확히 기록해 줘야 데이터가 저장된 나의 DB에서 데이터를 가져 올 수 있다.

    

<앱 클라이언트의 블럭 에디터 내용>

앱 서버의 블럭에디터가 비교적 간단했다면 앱클라이언트의 블럭에디터는 좀 이해하기가 까다롭다. 먼저 앱클라이언트에서는 화면이 열릴때 call Screen.Initialize 이벤트 블럭을 이용해서 구글 DB에 있는 데이트를 가져온다.  call TinyWebDB.GetValue 블럭은 나의 개인 구글 DB에서 todayBible란 이름이 붙은 tag의 값을 가져온다. when TinyWebDb.GotValue 이벤트 블럭은 데이트를 가져온 후의  상황을 나타내는 블럭이다. 파란색 네모 부분에 마우스 커스를 가져가면 get valueFromWebDB와 set valueFromWebDB 두개의 블럭이 나타나는데 get valueFromWebDB은 단순히 값을 가져오라는 의미이고 set valueFromWebDB은 가져온 데이터의 후속처리를 위한 블럭이다. 우리는 단지 가져온 데이터를 화면에 표시 해 주기만 하면 되므로 get valueFromWebDB를 드래그해서 setdailyBibleView.Text 블럭에 끼워 넣어 준다. tag의 값을 따로 표시해 주고 싶다면 tagFromWebDB에서 블럭을 가져 오면 된다.

 

 

<완성된 앱 클라이언트 블럭에디터 화면>

코딩이 끝난 앱 클라이언트의 블럭에디터 화면이다. TinyWebDB1, TinyWebDB2의 내용을 따로 따로 설정해 주었다.

 

 

 

<필자의 폰 앱서버 화면>

텍스트 박스 1과  2에 내용을 입력하고 sendButton을 누른다.

 

 

<필자의 폰 앱클라이언트 화면>

필자의 앱 클라이언트 폰 화면에 표시된 내용이다. 앱서버에서 전달한 내용이 클라이언트 화면에 그대로 표시되는 것을 확인 할 수 있다.

이상과 같이 앱인벤터에서도 앱으로 데이터를 주고 받을 수 있다. 이 방식을 응용하면 학교에서 식단관리 앱이라든지 또는 선생님들이 학생들의 알림장 앱을 만들어서 매일 데이터를 업데이트 하면서 앱을 운용할 수 있을 것이다.

 

연락처 : kusson@hanmail.net

          010 -4101-9778 (꾸숑의 ICT월드 운영자)

*)초중고 대학교에서 앱인벤터나 썬크블의 강의나 프로그램이 필요한 분들도 연락주세요...

 스크래치, 엔티티 그리고 앱인벤터를 이용한 아두이노와의 통신, 스마트폰과 아두이노 와이파이나 블루투스 등의 통신, IoT 환경 구축에 대한 강의등등... 필요한 분들도 연락주세요. 

*개인적으로 자신의 앱을 개발해서 수익을 얻고 싶은 분들도 연락주세요. 인터넷이나 메일등으로 무료 지도해 드립니다.