앱인벤터 무드링2 앱

앱인벤터 무드링2 앱

 

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

 

이 앱은 십대 친구들이 작성한 앱인데, 긍정적인 감정 건강을 증진시키기 위해 이코티콘을 사용하는 앱을 만들어보자.

이를 위해 내가 감정을 느낄 때마다 이모티콘를 클릭하면 감정의 횟수가 늘어난다. 예로 화가 나면 화가난 모양의 이모티콘을 클릭한다. 그러면 화가 나는 횟수가 늘어난다.

 

기존의 무드링앱의 업그레이드 버전을 만들어보자...

 

. 사용자가 느끼는 감정을 바탕으로 영감을 주는 인용구를 사용자에게 보여준다.

  . 행복을 클릭하면 함께 행복해 하고

  . 화난 감정을 클릭하면 화를 평안을 주는 인용구를 보여주고

  . 슬픈 감정을 클릭하면 슬픔을 함께하고 위로해주는 인용구를 보여줘보자.

  -> 레이블 컴포넌트를 활용하여 간단하게 표시해줄 수 있다.

 

. 친구를 격려하기 위해 노래를 재생하거나 이미지를 표시한다.

  . 이미지는 다양한 이모티콘을 활용하면 좋을 것 같다.

  -> 플레이어 컴포넌트와 이미지 컴포넌트를 추가하여 

 

 

. 사용자 이름으로 개인 설정한다.

  . 텍스트박스 컴포넌트를 활용하여 사용자이름을 입력하여 그냥 Happy가 아니라 '누구의 Happy'로 표시하도록 변경해보자. 예로 사용자가 홍길동이라면 '홍길동 Happy', 홍길동 Angry', '홍길동 Sad'로 표시한다.

 

. 사용자가 하나의 감정을 터치하면 친구에게 해당 감정을 문자로 보낸다.

  . 텍스트 컴포넌트를 활용하여 Happy, Angry, Sad 버튼을 클릭하면 해당 감정의 문구의 메시지를 친구에게 전송한다.

 

. 사용자가 과거에 어떻게 느꼈는지 검토 기능을 제공한다.

  . 사용자가 감정을 터치할 때마다 DB에 저장한다.

  . 검토에 일별/주별/월별 통계 기능을 표시해서 보여준다.

 

상기의 기능을 추가해서 코딩을 해보자.

 

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

 

무드링2 앱 디자인

하루에 몇 번이나 다른 감정을 느끼는지 추적할 수 있는 앱을 만들어보자.

무드링 앱의 업그레이드 버전으로 추가되는 기능에 대한 디자인은 다음과 같다.

디자인 면에서 몇가지 달라진 점이 있다.

먼저 사용자를 입력할 수 있는 텍스트박스와 버튼이 추가되었다.

아래 happy, angry, sad 감정에 추가되는 이미지와 명언을 화면 아래에 표시하도록 디자인을 하였다.

이에 필요한 것이 이미지 컴포넌트와 레이블 컴포넌트를 추가하였다.

앱인벤터 무드링2 앱 디자인

 

무드링2 앱 기본 설계

하루에 몇 번이나 다른 감정을 느끼는지 추적할 수 있는 앱을 만들어보자. 무드 링 앱의 기본 기능이다.

이에 추가적으로

. 사용자가 느끼는 감정을 바탕으로 영감을 주는 인용구를 사용자에게 보여준다.

  - 레이블 컴포넌트

. 친구를 격려하기 위해 노래를 재생하거나 이미지를 표시한다.

  - 플레이와 이미지 컴포넌트

. 사용자 이름으로 개인 설정한다.

  - 텍스트박스와 버튼 컴포넌트

. 사용자가 하나의 감정을 터치하면 친구에게 해당 감정을 문자로 보낸다.

  - 이미지와 레이블 컴포넌트

. 사용자가 과거에 어떻게 느꼈는지 검토 기능을 제공한다.

  - TinyDB 컴포넌트

 

. 사용된 미디어

. 이미지 파일들 : happy/angry/sad 이모티콘 각각 3개 : h1~3.jpg, a1~3.jpg, s1~3.jpg

 

 

무드링2 앱 컴포넌트

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

 

무드링에서 정리한 컴포넌트는 빼고 무드링2에 업그레이드에 사용한 컴포넌트들 위주로 정리하였다.

 

컴포넌트 리스트

. 텍스트박스, 버튼 컴포넌트 : 사용자이름을 설정하는 컴포넌트이다.

. 이미지, 레이블 컴포넌트 : 사용자에게 감정을 전달하는 이미지와 문구를 표시하는 컴포넌트이다.

. 플레이 컴포넌트 : 사용자에게 소리로 감정을 전달하는 컴포넌트이다.

. 문자메시지 컴포넌트 : 친구에게 사용자의 감정을 문자로 전달하는 컴포넌트이다.

. TinyDB 컴포넌트 : 사용자의 happy, angry, sad 감정 터치 횟수를 저장하는 컴포넌트이다.

 

아래 그림은 앱이벤터로 작성한 모드링2 앱의 디자인과 사용된 컴포넌트이다.

앱인벤터 무드링2 앱 컴포넌트들

 

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

사용자 이름을 입력한다.

너비 : 부모 요소에 맞추기

힌트 : 사용자이름을 입력하세요.

 

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

텍스트박스 컴포넌트에 사용자 이름을 입력하고 '버튼'을 클릭하여 사용자 이름을 저장한다.

텍스트 : 입력

 

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

Happy, Angry, Sad의 또다른 이미지를 사용자에게 표시하는 컴포넌트이다ㅣ.

Happy 버튼을 클릭하면 h1~h3.jpg 사이의 이모티콘 중 임의의 이미지를 사용자에게 나타내준다.

 

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

Happy, Angry, Sad의 명언을 출력한다. 각각 감정에 10개의 명을 리스트로 관리하며 10개 중 무작위로 명언을 사용자에게 표시해준다.

글꼴 크기 : 20

 

문자메시지 컴포넌트 설정값 설정하기

Happy, Angry, Sad의 감정을 친한 친구에게 문자로 알려준다. 

버튼을 클릭할 때마다 보내면 문자 비용이 많아지니까, 하루에 한번, 클릭 10회 마다 친구에게 메시지를 전송한다. 

 

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

Happy, Angry, Sad의 버튼 클릭 수를 저장한다. 

버튼을 클릭할 때마다 보내면 문자 비용이 많아지니까, 하루에 한번, 클릭 10회 마다 친구에게 메시지를 전송한다. 

 

 

코딩블럭

블록 코딩은 내가 하고자 하는 내용을 문장으로 만들어 보라. 그것을 그대로 코딩하면 된다.

 

우리가 무엇을 할 것인지 생각해보라. 간단하다.

무드링에서 무드링2 앱에 추가된 코드 위주로 작성하였다.

. 사용자이름 입력하는 코드

. 각 감정별로 이모티콘 이미지를 랜덤하게 표시하는 코드

. 각 감정별로 인용문구를 랜덤하게 표시하는 코드

. 문자메시지 전송하는 코드

. 각 감정의 클릭 횟수를 저장하는 코드

 

. 전역변수

. numList : happy, angry, sad 클릭 수를 저장하는 리스트 변수이다.

  . numList[1]에는 happy 클릭수 저장

  . numList[2]에는 angry 클릭수 저장

  . numList[3]에는 sad 클릭수 저장

 

. userName : 사용자이름을 저장하는 변수

  . 텍스트박스에서 사용자이름을 입력하고 '입력'버튼을 클릭하면 userName에 저장한다.

 

. happy_quoate, angry_quoate, sad_quoate 리스트변수

  . happy, angry, sad 관련 명언 문구를 각각 10개씩 저장하는 리스트 변수이다.

 

앱인벤터 무드링2 앱 전역변수

 

스크린1 초기화되었을 때

모드링2 앱이 최초로 실행이 되면 호출되는 블럭이다.

happyQuoate() <- 행복 관련 명언 문구 리스트 10개 happy_quoate 리스트 변수에 초기화 AngryQuoate() <- 분노 관련 명언 문구 리스트 10개 angry_quoate 리스트 변수에 초기화 SadQuoate() <- 슬픔 관련 명언 문구 리스트 10개 sad_quoate 리스트 변수에 초기화 numList를 타이니DB에서 값 가져오기 happyText.텍스트에 타이니DB에서 가져온 값을 출력한다. AngryText.텍스트에 타이니DB에서 가져온 값을 출력한다. SadText.텍스트에 타이니DB에서 가져온 값을 출력한다.

 

앱인벤터 무드링2 앱 Screen1 초기화되었을때 블럭

 

happyQuoate() 함수

happy_quoate리스트에 10개의 항목에 명언을 추가한다.

 

앱인벤터 무드링2 HappyQuoate() 함수

 

AngryQuoate() 함수

angry_quoate리스트에 10개의 항목에 명언을 추가한다.

 

앱인벤터 무드링2 AngryQuoate() 함수

 

SadQuoate() 함수

sad_quoate리스트에 10개의 항목에 명언을 추가한다.

앱인벤터 무드링2 앱 SadQuoate() 함수

 

 

'사용자이름입력' 버튼을 클릭했을때

텍스트박스 컴포넌트에 사용자이름을 입력하면, userName 변수에 이름을 저장한다. feelingLabel.텍스트에 'you' 대신에 사용자이름으로 변경한다.   . 예로) 이름을 '홍길동'이라고 하면, How are you feeling? -> How is 홍길동 feeling?

 

앱인벤터 무드링2 앱 사용자이름.클릭했을때

 

 

 

'Happy', 'Angry', 'Sad' 버튼을 클릭했을때

HappyButton() happyLabel.텍스트 <- happyLabel.텍스트 + 1 quoateText.텍스트 <-happy_quoate리스트에서 랜덤하게 항목을 선택한다. 이미지.사진 <- h1~3.jpg 중에 하나를 선택한다. 문자메시지를 보낸다. numList(1)에 happyText.텍스트로 변경한다. 타이니DB에(num)에 numList변수를 저장한다.

 

앱인벤터 무드링2 앱 happyButton클릭했을때

AngryButton()을 클릭했을때

앱인벤터 무드링2 앱 AngryButton클릭했을때

SadButton()을 클릭했을때

앱인벤터 무드링2 앱 SadButton클릭했을때

 

 

 

'문자보내기'(feeling) 함수

문자보내기 함수이다. 인자로 feeling으로 각각 happy, angry, sad 버튼에서 호출할 때 각각의 감정을 인자로 전달한다.

앱인벤터 무드링2 앱 문자보내기

 

 

지금까지 앱인벤터 무드링 앱을 작성하였다. 실제로 이 앱은 매우 쉬운 앱이다. 알고리즘이 들어간 것도 아니고, 단순히 버튼을 클릭하면 레이블의 텍스트를 1만큼 증가시키는 단순한 앱이다. 하지만 오늘날 현대인이 살아가는데 정신적이고 감정 관리는 무엇보다 중요하다. 하루동안 사용자의 감정을 측정 관리하여 수치로 보여주는 것은 매우 재미있으며 유용한 앱이라 생각한다.

 

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

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

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.