SW교육/앱 인벤터2

제3강-shake_talk 앱 만들기

멋쟁이샘 2018. 1. 8. 18:32

* 앱 기획하기

 1. 휴대폰을 흔들면 '앱 인벤터를 배우는 여러분 힘내세요.' 음성으로 말하기

 2. 휴대폰을 흔들면 여러 개의 이미지를 랜덤하게 나타난다.


1.jpg     2.jpg    3.jpg   4.jpg    5.jpg    6.jpg    icon_talk.png



* 컴포넌트 구성하기

 1. 새 프로젝트 시작하기

 2. Screen1 속성에 제목을 shake_talk로 바꾸기


 3. 인사말을 입력하기 위해 [텍스트 상자] 컴포넌트 추가하기



4. 속성 : 배경-노란색, 글꼴-굵게, 글꼴 이탤릭 선택, 너비-부모에 맞추기, 힌트-빈칸, 텍스트-앱 인벤터를 배우는 여러분 힘내세요.

             텍스트 정렬-가운데


 

5. 여러 개의 이미지를 랜덤하게 보이기 위해 [버튼] 컴포넌트 추가하기


6. 버튼의 속성 설정 : 활성화-선택 해제, 높이-부모에 맞추기, 너비-부모에 맞추기, 이미지-파일1~6 올리기, 텍스트-빈칸처리

  - 이미지 크기는 항상 480(세로), 320(가로)를 넘지 않게


 7. 텍스트의 글자를 음성으로 읽기 위해 [미디어]-[음성 변환] 컴포넌트 추가. 속성은 기본 값


 8. 스마트폰의 흔들림 감지를 위해 [센서]-[가속도 센서] 컴포넌트 추가. 속성은 기본값.




* 프로그래밍 하기

 1. 스마트폰의 흔들림을 감지하기 위해 [가속도 센서] 블록을 뷰어 영역으로 드래그 한다.


 2. [음성 변환] 블록을 가져와서 [가속도 센서] 블록 안에 연결한다.


 3. 텍스트 상자에 입력에 놓은 텍스트를 읽기 위해 블럭 조립


 4. 스마트폰이 흔들리면 여러 개의 이미지를 랜덤하게 보여주기 위해 [버튼1]의 블럭 중 [지정하기 버튼1.이미지 값] 블록을 연결한다.


 5. 이미지가 랜덤하기 나와야 하기 때문에 [공통 블록]-[리스트]에서 [임의의 항목 선택하기 리스트] 블록을 연결한다.


 6.여러 개의 이미지를 보여주기 위해 [리스트 만들기] 블록을 연결한다.

 

 7. [리스트 만들기] 블록 왼쪽 위에 모양을 클릭하여 항목 수를 6개로 늘려준다.


 8. [버튼1] 이미지 속성에 업로드 한 파일 6개를 텍스트 블록을 이용하여 아래와 같이 입력한다.





*디자인 하기

 1. 화면이 시작 될 때 구성 요소들의 크기를 지정하기 위해 [언제 Screen1.초기화] 블럭을 가져온다.


 2. [텍스트 상자1]의 높이를 지정하기 위해 [지정하기 텍스트 상자1. 높이 값] 블록을 연결하고, 전체 높이의 1/10로 지정한다.






 3. [버튼1]의 기본 이미지를 지정한다.






* 앱 아이콘 만들기 

 1. [디자이너]에서 [Screen1]을 클릭하고, 준비한 아이콘 이미지를 올린다.





* 앱 실행하기

 1. [빌드]-[앱(.apk 용 QR 코드 제공)] 클릭





* 최종 파일

 1. aia  파일


shake_talk.aia



 2. apk 파일    

shake_talk.apk




5.jpg
0.11MB
6.jpg
0.04MB
2.jpg
0.04MB
shake_talk.aia
0.47MB
1.jpg
0.09MB
4.jpg
0.06MB
shake_talk.apk
3.02MB
icon_talk.png
0.01MB
3.jpg
0.12MB