앱인벤터 매직8볼 앱
앱인벤터 홈페이지에 나와 있는 튜터리얼을 참고해서 작성한 것이다. 튜터리얼의 목적은 앱인벤터의 많은 블록은 이해하고 활용할 수 있도록 도와주는 프로그램들로 구성되어 있다.
우리 나라로 보면 운수를 보는 앱일 수도 있다. 매직 8 볼은 당구에 사용되는 8 볼과 비슷하게 만들어진 플라스틱 공으로, 점을 치고 조언을 구하는 데 사용된다. 오늘날, 실제 매직 8-볼은 마텔에 의해 제작되고 판매되지만, 그 개념은 수십 년 동안 있어왔다; 사실, 첫 매직 8-볼은 1950년에 제작되었다! 실제 매직 8-볼은 사용자가 답을 얻기 위해 흔들어야 하지만, 우리는 매직 8 볼을 터치하면 최적의 답을 예측하여 알려줄 것이다.
. 학습 목표
- 앱인벤터 환경 학습 : 디자이너, 블록에디터, 에뮬레이터 혹은 AI 컴패니언을 학습한다.
- 컴포넌트 : 가속도센서, 버튼, 플레이어 컴포넌트를 학습한다.
- 앱인벤터 변수 활용 : 리스트변수를 생성하고 사용하는 블록을 학습한다.
. 매직 8 볼 기본 설계 및 디자인
매직 8 볼의 기본 설계는 버튼 컴포넌트를 터치하면
. 레이블 컴포넌트에 예측 내용을 표시하고
. 터치하면 소리를 플레이 한다. (소리 컴포넌트)
컴포넌트
앱인벤터 구성 요소는 디자이너 창의 왼쪽 팔레트 제목에 있다. 컴포넌트는 안드로이드 폰이나 아이폰에서 앱을 만들 때 사용하는 기본 요소이다. 화면에 버튼, 레이블, 수직배치 및 소리 컴포넌트를 사용한다.
버튼 컴포넌트 설정값 설정하기
버튼 컴포넌트의 이미지 값을 변경한다.
이미지 : image_8_ball.jpeg
텍스트 : (빈칸)
버튼 컴포넌트에 알고 싶으면 아래 글을 참고하세요
앱인벤터-버튼 컴포넌트
앱인벤터-버튼 컴포넌트 앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다. 이번 시간에는 버튼 컴포넌트에 대해 이해하고 실습을 하고
flycoding.tistory.com
레이블1 컴포넌트 설정값 설정하기
안내 문구를 표기하기 위해 사용된다.
텍스트 : 'Ask the magic eight a question'
레이블2 컴포넌트 설정값 설정하기
예측 안내 문구를 표기하기 위해 사용된다.
텍스트 : 'Touch the magic eight ball to receive your answer.' (초기 설정값)
수직정렬 컴포넌트 설정값 설정하기
버튼과 레이블컴포넌트 2개를 수직으로 정렬하기 위해 사용한다.
수평정렬 : 가운데
수직정렬 : 가운데
너비 : 부모요소에 맞추기
소리 컴포넌트 설정값 설정하기
예측 대답을 소리로 들려주기 위해 소리 컴포넌트를 사용한다.
소스 : TaDasound.mp3 (아래 파일을 참조하세요)
전체 컴포넌트 디자인 화면은 아래 그림과 같다.
설계 아이디어
기본 생각
스마트폰의 화면에서 사용자가 매직 8 볼을 터치하면 화면에서는 소리가 나면서 아래에 예측 대답을 표기한다.
여기서는 8개의 예측 문구를 미리 준비하였다.
아래 그림과 같이 8개의 문구를 리스트로 구성한다. 예측 대답으로는
- Maybe
- Outlook uncertain
- Probably Yes
- No way
- It is certain
- Not likely
- Reply hazy
- Without a doubt
사용자가 버튼을 처티했을 때, 상기의 8개의 예측 대답들 중에서 임의로 반환하여 레이블에 표기한다.
코딩블럭
. 전역변수
NONE
. 매직 8 볼 버튼을 터치했을 때
버튼을 터치하면 아래와 같이 실행을 한다.
. 8개의 텍스트 문구를 리스트로 생성하고 리스트들 중에서 임의의 항목을 선택하여 레이블2의 텍스트에 값을 반환하여 사용자에게 보여준다.
. 그리고 TaDsound.mp3 을 재생한다.
실행결과 화면
앱인벤터의 나에게말해줘 앱을 작성하였다. 실행 결과 화면은 아래와 같다.
첫번째 화면은 앱이 처음 구동되었을 때 화면이다.
매직8버튼을 터치했을 때 화면이다. 터치하니까, 매직8볼이 "No Way"라고 답변을 한다.
다시한번 터치하였을 때 실행 화면이다.
마지막으로 매직8볼 동영상 실행화면이다.
지금까지 '나에게말해줘' 앱을 작성하였다. 버튼과 레이블 그리고 소리 컴포넌트를 활용하여 간단한 블록 코딩까지 해보았다. 블록코딩을 처음한 경험을 살려 다음 튜터리얼도 계속 실습하기를 추천한다.
눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.
간단하지만 직접 해보면 이해하고 자신감이 생길거에요...
Just Do It!!!
Just Drag&Drop It!!!
감사합니다.
'앱인벤터 > 앱인벤터 코딩따라하기' 카테고리의 다른 글
| 앱인벤터 멀티스크린 도화지 앱(multi screen)-코딩편 (0) | 2022.10.16 |
|---|---|
| 앱인벤터 멀티스크린 도화지앱(multi-screen)-설계편 (1) | 2022.10.15 |
| 앱인벤터 두더지잡기2 앱 (1) | 2022.10.13 |
| 앱인벤터 두더지잡기 앱 (0) | 2022.10.12 |
| 앱인벤터 볼던지기 앱 (0) | 2022.10.06 |
댓글