1주차 : Hello World 앱 (With.아이폰)

 

App Inventor를 활용하여 인사하는 어플리케이션을 만들어보자.

 

시작하기 위해 App Inventor 페이지 접속 및 구글 계정으로 로그인

좌측 상단의 Create Apps! 클릭

좌측 상단  Start new project 클릭

 새로운 프로젝트명 입력

초기화면이다. 이 페이지에서 디자인을 하며, 우측 상단의 Blocks를 통해 코딩을 할 수 있다.

 

인사하는 어플리케이션을 만들 것이므로, 기본적으로 버튼, 텍스트를 출력할 레이블이 필요하고,

추가적으로 스마트폰을 흔들었을 때 텍스트를 지워줄 가속도 센서, 텍스트를 읽어줄 TTS (Text-To-Speech) 가 필요하다.

 

좌측 팔레트에서 버튼, 텍스트, 가속도 센서, TTS를 끌어온다.

추가만 한 모습.

 

버튼, 레이블 수정 단계.

버튼을 누르면 오른쪽에 properties라는 속성창이 있고, 이 속성창에서 폰트, 색깔, 위치, 등을 조절할 수 있다.

 

버튼은 Text를 "인사하기" 와 오렌지색으로 수정하였고, 레이블은 비워두었다.

 

버튼과 레이블을 화면 가장 가운데로 옮기기 위해선 버튼과 레이블이 놓여져있는 Screen의 속성을 수정해야한다.

Screen1을 누르고 속성의 AlignHorizontal 과 AlignVertical을 모두 Center로 맞춰주고, 배경색도 바꿔주었다. 또한 Title도 Hello world로 바꿔주었다.

여기까지 디자인은 끝.

 

Blocks를 눌러 코딩창으로 간다.

이곳에서 각각 블록들을 끌어와 원하는 알고리즘을 구현한다. 

우리는 버튼을 눌렀을때, 음성으로 안녕하세요 + 텍스트로 안녕하세요

길게 눌렀을때, 음성으로 Hello World + 텍스트로 Hello World

흔들었을때, 텍스트 지우기 

를 수행 할 것이다.

 

When 블록 활용

 

각각 버튼 클릭시, 길게 클릭시, 흔들었을때 수행되는 블록들이다.

Lable1의 Text를 안녕하세요로 바꾸고, TTS로 안녕하세요를 읽는 것.

또는 Hello World로 바꾸고, Hello World를 읽는 것.

흔들었을 때. Label1을 빈칸으로 바꾸는 것으로 수행된다.

 

안드로이드의 경우 빌드 후 앱 설치하면 되지만, 아이폰의 경우는 Test만 가능하다.

 

아이폰 기준으로

1) 같은 네트워크 사용 (Wifi, 핫스팟)

2) 앱스토어에서 App Inventor 설치

3) 앱 인벤터 좌측 상단의 Connect - AI Companion 클릭하면 QR코드가 생성된다.

4) 아이폰의  App Inventor 실행 후 QR 인식하면 내가 만든 어플이 아이폰에서 실행된다.

완 성