앱인벤터 북클럽 앱-설계편

앱인벤터 북클럽 앱-설계편

 

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

 

모든 책벌레(그리고 모든 유형의 문화 비평가)에게 전화하기: 우리의 최신 가이드는 당신이 가장 좋아하는 책 또는 가장 혐오스러운 책의 원래 리뷰를 수집하고 공유하는 앱을 만드는 것에 도전한다. 그리고 그 동안 리뷰를 위한 독자적인 모바일 플랫폼을 만들것이다. 다음 번에 책을 구입할 때 어떤 제목을 선택해야 할지 알 수 있다. 

 

이 프로젝트에서는 여러 사용자가 서평을 쓰고 읽을 수 있는 앱을 만들 것이다. MIT App Inventor의 CloudDB 구성 요소를 숙지하고 클라우드에서 데이터를 저장, 액세스 및 수정하는 방법을 배우게 된다.

 

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

 

북클럽 앱 디자인

사용자 인터페이스는 다음과 같습니다. 북클럽 화면 디자인은 제목과 아이콘을 표시하기 위해 레이블과 이미지 컴포넌트를 상단에 배치하였고, 메뉴는 두개의 버튼으로 "Write Review"와 "Read Review" 으로 구성하였다. 

그리고 레이블과 텍스트박스 컴포넌트로 책제목을 표시하고 입력하는 부분과 책 리뷰 표시와 책 리뷰를 입력하는 텍스트박스로 구성하였다. 최종적으로 'Submit Revewi' 버튼으로 리뷰를 CloudDB에 저장한다.

그리고 'Read Review' 리스트 피커로부터 책 제목을 보여주고 책 제목 중에 하나를 선택하면 아래 'Reviews' 는 책 제목을 리스트뷰는 책 제목들의 책 리뷰들을 뷰로 보여준다. 

앱인벤터 북클럽 앱 디자인 화면

 

북클럽 앱 기본 설계

북리뷰는 책제목과 책리뷰를 기본으로 등록한 책 제목은 리스브 뷰로 관리한다. 'Write Review'는 책 제목과 책 리뷰를 입력하고 'Submit Review' 버튼을 클릭하면 CloudDB에 저장된다. 

'Read Review'는 아래 책제목 리스트뷰에서 책 제목을 선택하고 'Read Review' 버튼을 클릭하면 아래 책 제목과 책 리뷰가 표시된다.

 

북클럽 앱 컴포넌트

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

 

컴포넌트 리스트

. 레이블 컴포넌트 : "Welcome to DIY Book Club!" 텍스트를 표시한다.

. 이미지 컴포넌트 : 아이콘 이미지를 표시한다.

. 버튼 컴포넌트 : 'Write Review' 표시하고 리뷰를 기록하는 화면이 표시된다.

. 리스트피커 컴포넌트 : 'Read Review' 표시하고 책 제목의 리스트를 선택할 수 있다. 리스트는 CloudDB의 태그로 관리되며 CloudDB 태그리스트가져오기 블록을 통해 얻을 수 있다. 

. 수평배치 컴포넌트 : 'Write Review'와 'Read Review' 버튼 2개를 수평배치한다.

. 레이브 컴포넌트 : 'Book Title'을 화면 표시한다.

. 텍스트박스 컴포넌트 : 책 제목을 입력받는다.

. 레이브 컴포넌트 : 'Book Review'을 화면 표시한다.

. 텍스트박스 컴포넌트 : 책 리뷰를 입력한다.

. 버튼 컴포넌트 : 'Submit Review'를 화면에 표시하고 책제목과 책 리뷰를 CloudDB에 저장한다.

. 레이블 커포넌트 : 'Review'를 화면에 표시한다. 리스트피커에서 책 제목이 선택이 되면 책 제목이 표시된다.

. 리스트뷰 컴포너트 : 리스트 피커에서 책 제목을 선택한 책 리뷰들을 리스트뷰에 표시한다. 

앱인벤터 북클럽 앱 컴포넌트들

 

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

"Welcome to Book Club!"를 화면 출력한다.

배경색 : 없음

텍스트 :Welcome to Book Club!

너비 : 부모요소에 맞추기

텍스트정렬 : 가운데

텍스트색상 : 빨강

이미지 컴포넌트 설정값 설정하기

북클럽 아이콘 이미지를 화면 출력한다.

높이 : 40픽셀

너비 : 40픽셀

사진 : DIYBookClub.png

 

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

'Write Review' 텍스트를 화면에 표시하고 책 리뷰를 기록하는 화면을 표시한다. 

텍스트 : Write Review

텍스트정렬 : 가운데

 

리스트피커 컴포넌트 설정값 설정하기

'Read Review' 텍스트를 화면에 표시하고 CloudDB의 태그(책제목)를 요소 값으로 가져와서 사용자에게 책제목을 보여준다. 또한 책 제목을 선택하면 책 리뷰를 볼 수 있도록 안내해 준다.

텍스트 : Read Review

텍스트정렬 : 가운데

 

리스트피커(목록선택버튼) 버튼에 관련해서 좀 더 이해하고 싶으면 아래 글을 참고바란다.

 

 

앱인벤터 목록선택버튼 컴포넌트

 

 

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

'Write Review' 버튼과 'Read Review' 리스트피커 컴포넌트를 수평배치한다. 

수평정렬 : 가운데

수직정렬 : 가운데

너비 : 부모 요소에 맞추기

 

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

'Book Title'을 표시한다.

텍스트 : Book Title

 

텍스트박스 컴포넌트 설정값 설정하기

책 제목을 입력하는 컴포넌트이다.

너비 : 부모 요소에 맞추기

 

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

'Book Review'을 표시한다.

텍스트 : Book Review

 

텍스트박스 컴포넌트 설정값 설정하기

책 제목을 입력하는 컴포넌트이다.

높이 : 50픽셀

너비 : 부모 요소에 맞추기

 

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

'Submit Review'를 표시하며 책제목과 책리뷰를 CloudDB에 저장하는 이벤트를 생성한다. 

텍스트 : Submit Review

텍스트정렬 : 가운데

 

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

'Review'을 표시한다. 이는 리뷰의 책 제목을 표시한다.

텍스트 : Review

 

리스트뷰 컴포넌트 설정값 설정하기

책 제목을 리스트 뷰 형태로 보여주기 위한 컴포넌트이다.

 

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

책제목, 책리뷰의 레이블과 텍스트박스 컴포넌트, Submit Review 버튼, 'Review' 레이블과 리스트뷰 컴포넌트를 수직으로 배치한다.

수평정렬 : 가운데

수직정렬 : 가운데

너비 : 부모 요소에 맞추기

 

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

Submit Review 버튼, 'Review' 레이블과 리스트뷰 컴포넌트를 수직으로 배치한다.

수평정렬 : 가운데

수직정렬 : 가운데

 

아래 그림은 앱이벤터로 작성한 북클럽 앱의  디자인과 사용된 컴포넌트이다.

앱인벤터 북클럽 앱 컴포넌트

 

지금까지 북클럽 앱을 작성하였다. 실제로 북클럽 앱을 사용하는 사용자들은 다양한 책에 대해 다양한 책 리뷰들을 등록하고 공유할 수 있다. 초기의 버전이고 좀더 향상시킨 버전을 기획하고 기능을 추가할 것이다. 

 

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

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

 

Just Do It!!!

Just Drag&Drop It!!!

  

감사합니다.