앱인벤터 무드링 앱

앱인벤터 무드링 앱

 

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

 

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

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

 

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

 

무드링 앱 디자인

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

행복한 감정을 표현하기 위해 버튼에 행복한 이미지를 설정한다. 그리고 레이블 텍스트에 'Happy'를 표시하고 옆에 '0' 숫자 레이블을 배치한다. 1개의 버튼과 2개의 레비을을 수평으로 배치하기 위해 수평배치를 사용한다.

마찬가지 방법으로 Angy, Sad도 동일한 방법으로 버튼과 2개의 레이블 컴포넌트를 배치하고 이를 수평배치에 설정한다.

 

 

 

무드링 앱 기본 설계

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

행복한 감정을 느끼면 행복한 이모티콘을 클릭한다. 이 때 행복한 감정의 수가 1만큼 증가한다.

화가난 감정을 느끼면 화가난 이모티콘을 클릭한다. 이 때 화가난 감정의 수가 1만큼 증가한다.

슬픈 감정을 느끼면 슬픈 이모티콘을 클릭한다. 이 때 슬픈 감정의 수가 1만큼 증가한다.

 

 

무드링 앱 컴포넌트

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

 

컴포넌트 리스트

. 버튼 컴포넌트 : 행복 이미지를 표시하는 버튼 컴포넌트이다. 행복한 이모티콘을 클릭하면 행복한 수 레이블을 1만큼 증가시키는 이벤트를 발생한다.

* Happy 이모티콘

  . 레이블 컴포넌트 : 'Happy' 글자를 표시한다. 

  . 레이블 컴포넌트 : Happy 버튼을 클릭한 횟수를 표시한다.

    . 행복 이미지 버튼을 클릭하면 레이블 컴포넌트의 숫자값을 1만큼 증가시킨다.

  . 수평컴포넌트 : 버튼과 레이블 2개를 수평으로 배치하고자 사용한다.

 

* Angy이모티콘

  . 레이블 컴포넌트 : 'Angry' 글자를 표시한다. 

  . 레이블 컴포넌트 : Angry버튼을 클릭한 횟수를 표시한다.

    . 화난 이미지 버튼을 클릭하면 레이블 컴포넌트의 숫자값을 1만큼 증가시킨다.

  . 수평컴포넌트 : 버튼과 레이블 2개를 수평으로 배치하고자 사용한다.

 

* Sad 이모티콘

  . 레이블 컴포넌트 : 'Sad' 글자를 표시한다. 

  . 레이블 컴포넌트 : Sad 버튼을 클릭한 횟수를 표시한다.

    . 슬픈 이미지 버튼을 클릭하면 레이블 컴포넌트의 숫자값을 1만큼 증가시킨다.

  . 수평컴포넌트 : 버튼과 레이블 2개를 수평으로 배치하고자 사용한다.

 

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

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

 

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

'How are you Feeling? 텍스트를 표시한다. 

배경색 : None

글꼴굵게 : 활성

글꼴크기 : 20

너비 : 부모 요소에 맞추기

텍스트 : "How are you feeling?"

텍스트정렬 : 가운데

텍스트 색상 : 자홍색

 

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

Happy/Angry/Sad 이미티콘을 표시하는 버튼

글꼴크기 : 15

이미지 : happys.png, angry.png, sad.png 각각 이미지를 설정한다.

 

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

Happy, Angry, Sad 텍스트를 표시한다.

글꼴크기 : 20

텍스트 : Happy, Angry, Sad 각각 설정한다.

 

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

Happy, Angry, Sad의 감정 횟수를 표시한다.

글꼴크기 : 20

텍스트 : 0 값을 각각 설정한다.

 

코딩블럭

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

 

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

버튼을 터치하면 레이블 컴포넌트에 감정 횟수를 1만큼 증가시킨다.

각가 버튼인 Happy, Angry, Sad버튼을 클릭할 때마다 각각의 HappyLabel, angryLabel, sadLabel의 텍스트 값에 1만큼 더하여 준다.

 

. 전역변수

none.

 

'Happy' 버튼을 클릭했을때

'Happy' 버튼을 클릭하면 HappyLabel에 1만큼 증가시킨다. 

앱인벤터 무드링 앱 Happy버튼을 클릭했을 때

 

'Angry' 버튼을 클릭했을때

'Angry' 버튼을 클릭하면 AngryLabel에 1만큼 증가시킨다. 

인벤터 무드링 앱 Angry버튼을 클릭했을 때

 

'Sad' 버튼을 클릭했을때

'Sad' 버튼을 클릭하면 SadLabel에 1만큼 증가시킨다. 

앱인벤터 무드링 앱 Sad버튼을 클릭했을 때

 

 

업그레이드를 생각해보자!!!

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

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

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

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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

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

 

 

스마트워치로 운동관리 등으로 사용자의 육체 건강을 관리한다. 이 앱은 사용자의 감정과 정신 건강을 관리를 위해 기초 앱이다. 무드링을 통해 행복, 분노, 슬픔 등의 감정을 터치해서 하루동안 얼마만의 감정이 일어났는지 확인하는 앱이다. 기술적으로는 많이 어렵지 않지만, 간단하더라도 직접 작성해 볼 것을 추천한다.

 

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

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

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.