앱인벤터 OpinionPoll 앱-설계편

앱인벤터 OpinionPoll 앱-설계편

앱인벤터 홈페이지에 나와 있는 튜터리얼을 참고해서 작성한 것이다. 튜터리얼의 목적은 앱인벤터의 많은 블록은 이해하고 활용할 수 있도록 도와주는 프로그램들로 구성되어 있다.

 

인스타그램에서 투표를 만드는 것부터 투표를 하는 것까지, 투표하는 능력은 큰 책임감을 동반한다(그리고 매우 재미있을 수 있다). 이 안내서를 사용하여 다른 사용자가 자신의 목소리를 연습하고 의견을 공유하며 결과를 표시할 수 있는 투표 앱을 만들 수 있다. 우리는 당신이 무엇을 생각해 낼지 매우 기대된다!

 

이 프로젝트에서는 사용자가 주제에 대한 의견을 표현할 수 있는 간단한 폴링 앱을 만들고 그 결과를 클라우드를 통해 수집합니다. 이 과정에서 MIT App Inventor 코딩 환경에서 데이터를 표현, 처리 및 시각화하는 방법도 엿볼 수 있습니다.

 

자, 이제 시작해보자...

OpinionPoll 앱 디자인

사용자 인터페이스는 다음과 같습니다.

화면 상단에는 폴링 관리자가 데이터를 수집할 클라우드 데이터베이스를 재설정할 수 있는 섹션이 있다.

나머지 UI는 투표에 참여할 비관리 사용자(투표자) 전용다. 예/아니오 의견조사 질문이 표시되는 레이블이 있다. 유권자가 자신의 선택을 표시할 수 있는 두 개의 버튼(예/아니오)이 있다. 이 그래프는 투표가 완료될 때까지 유권자로부터 숨겨지지만, 일단 투표가 끝나면 다른 유권자들도 투표할 때 동적으로 업데이트되는 그래프를 볼 수 있다. 정확한 찬성/반대 투표 수가 표시되고 상대 비율이 가로 막대 그래프 형태로 표시된다.

 

. 관리자 영역에서는 레이블과 버튼 컴포넌트로 구성된다.

. 아래 섹션에는 비관리자가 투표관련 안내 문구를 표시하는 레이블과 예/아니오 두개의 버튼으로 구성되어 있다.   

  그리고 예/아니요의 투표 그래프를 표시하기 위해 레이블 컴포넌트를 활용한다. "YES", "NO" 레이블 컴포넌트와 그래프를 표시하는 레이블 컴포넌트 초록색과 빨간색을 포시하도록 표시한다.

앱인벤터 OpinionPoll 앱 디자인

 

 

OpinionPoll 앱 기본 설계

관리자는 아래 "Reset Database"를 터치할 수 있으며, 투표한 통계 데이터가 모두 삭제된다.

투표자는 YES, NO 버튼을 클릭하여 사용자의 의견을 표시하며, 이후에 다른 사용자들의 투표율을 확인할 수 있다.

그래프는 레이블에 배경색을 %로 표시한다.

 

 

OpinionPoll 앱 컴포넌트

앱인벤터 구성 요소는 디자이너 창의 왼쪽 팔레트 제목에 있다. 컴포넌트는 안드로이드 폰이나 아이폰에서 앱을 만들 때 사용하는 기본 요소이다. 화면에 버튼과 레이블 컴포넌트를 활용하여 화면을 구성하고 앱을 만들려고 한다.

 

컴포넌트 리스트

관리자영역 컴포넌트

. 레이블 컴포넌트 : "Admin" 텍스트를 표시한다.

. 버튼 컴포넌트 : "Reset Database" 버튼으로 데이터베이스를 초기화한다.

투표자영역 컴포넌트

. 레이블 컴포넌트 : 영역 구분하기 위한 구분자 역할로 검정색을 표기한다.

. 레이블 컴포넌트 : "Enter Your Poll Question Here" 표시하며 이곳에 투표 내용을 표시한다.

. 레이블 컴포넌트 : "Vote Your Choice" 문구를 표시한다.

. 버튼 컴포넌트 : "YES" 버튼이다.

. 버튼 컴포넌트 : "NO" 버튼이다.

. 수평배치 컴포넌트 : "YES", 'NO" 버튼 컴포넌트를 수평배치한다.

. 버튼 컴포넌트 : "Show Graph" 버튼으로 터치하면 아래 그래프를 표시한다.

. 레이블 컴포넌트 : "YES"를 표시한다.

. 레이블 컴포넌트 : "NO"를 표시한다.

. 수직배치 컴포넌트 : "YES", 'NO" 레이블을 수직으로 배치한다.

. 레이블 컴포넌트 : YES 표시를 초록색으로 표시한다.

. 레이블 컴포넌트 : NO 표시를 빨강색으로 표시한다.

. 수직배치 컴포넌트 : 초록색, 빨강색을 표시하는 레이블을 수직으로 배치한다.

앱인벤터 OpinionPoll 앱 컴포넌트

 

 

레이블 컴포넌트 설정값 설정하기

"Admin"를 화면에 표시한다.

텍스트 : Admin

 

버튼 컴포넌트 설정값 설정하기

데이터베이스를 초기화하는 이벤트를 발생한다. 

텍스트 : Reset Database

텍스트정렬 : 가운데

 

레이블 컴포넌트 설정값 설정하기

검정색을 표시하여 admin과 사용자 영역을 구분한다.

배경색: 검정색

 

레이블 컴포넌트 설정값 설정하기

"Enter Your Poll Question Here" 텍스트를 표시한다.

너비: 부모에 맞추기

텍스트 : Enter Your Poll Question Here

텍스트정렬 : 가운데

 

레이블 컴포넌트 설정값 설정하기

"Vote Your Choice" 텍스트를 표시한다.

텍스트 : Vote Your Choice

 

버튼 컴포넌트 설정값 설정하기

"YES" 이벤트를 발생한다.

배경색 : 초록색

너비 : 40픽셀

텍스트 : YES

 

버튼 컴포넌트 설정값 설정하기

"NO" 이벤트를 발생한다.

배경색 : 빨강색

너비 : 40픽셀

텍스트 : NO

 

수평배치 컴포넌트 설정값 설정하기

"YES", "NO" 버튼을 수평배치한다. 

NONE.

 

버튼 컴포넌트 설정값 설정하기

"Show Graph" 버튼으로 그래프를 보여주는 이벤트를 발생한다.

배경색 : 주황색

텍스트 : Show Graph

 

레이블 컴포넌트 설정값 설정하기

"YES" 텍스트를 표시한다.

배경색 : 초록색

텍스트 : YES

 

레이블 컴포넌트 설정값 설정하기

"NO" 텍스트를 표시한다.

배경색 : 빨강색

텍스트 : NO

 

수직배치 컴포넌트 설정값 설정하기

"YES", "NO" 레이블을 수직으로 배치한다. 

NONE.

 

레이블 컴포넌트 설정값 설정하기

"YES" 투표율을 초록색으로 표시한다.

배경색 : 초록색

 

레이블 컴포넌트 설정값 설정하기

"NO" 투표율을 빨강색으로 표시한다.

배경색 : 빨강색

 

수직배치 컴포넌트 설정값 설정하기

"YES", "NO" 글개프 레이블을 수직으로 배치한다. 

NONE.

 

CloudDB 컴포넌트 설정값 설정하기

투표율을 저장한다.

ProjectID : BasicVoting

RedisPort : 6381

RedisServer : DEFAULT

.

 

 

지금까지 OpinionPoll 앱을 작성하였다. 간단한 투표앱을 작성하였다. 여기서는 좀 더 추가할 내용이 필요하다. 투표하는 내용을 수정하고, Admin 기능을 좀 더 강화하는 것이 필요하다. 이는 추가로 OpinionPol 앱을 좀더 향상시키는 편에서 작성할 예정이다. 

꼭 앱인벤터 OpinionPoll 앱의 코딩편을 보시면서 하나씩 따라하기를 꼭 추천한다.

 

눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.

간단하지만 직접 해보면 이해하고 자신감이 생길거에요...

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.