Chapter 02 앱인벤터소개 모바일앱개발과정에항상 사용자인터페이스작성단계 와 알고리즘작성단계 가있다는것을학습한다. 구글 Play 스토어에서 AI2 Companion을설치한다. Speak 예제를작성하고실행한다. 실습 01: 인터페이스작성하기 실습 02: 와이파이로앱실행하기 실습 03: 컴포넌트의속성변경하기 실습 04: 컴포넌트의코드블록추가하기 실습 05: 기능추가하기 01 사용자인터페이스작성 과 코드작성 Mobile Apps >> 우리가애플리케이션을작성할때는항상먼저사용 자인터페이스를작성한후에여기에코드 (code) 를추가하 게된다. 모바일앱을개발할때도마찬가지이다. 우리는 모바일앱의사용자인터페이스부분을작성한후에여기 사용자인터페이스작성 에어떤처리를수행하는코드를붙이게된다. 이과정은개발도구와도상관없다. 앱인벤터를 사용할때도마찬가지이고안드로이드스튜디오를사용할때도마찬가지이다. >> 코드작성 사용자인터페이스를작성한다. 처리코드를붙인다. 우리는이것을 Speak 라고하는기본예제를가지고살펴보자. 이예제는앱인벤터의홈페이지에서가장먼저소개하는예제이다. 또앱인벤터로만든앱을스마트폰에서실행하는방법도함께살펴보자. Chapter 02 앱인벤터소개 45
02 앱을실행하는 3 가지방법 Mobile Apps >> 앱인벤터로작성한앱은다음과같은 3가지의방법으로실행이가능하다. 만약사용자가스마트폰이있고와이파이를사용하고있다면작성한앱을바로실행하여볼수있다. 가장바람직한방법이다. 스마트폰에구글 Play 스토어를통하여 App Inventor Companion App 앱을설치한다. 컴퓨터에서프로젝트를작성한다. 스마튼폰에서실시간으로테스트한다. 만약사용자가안드로이드스마트폰이없다면 에뮬레이터 를설치하여서실행화면을볼수있다. 컴퓨터에서프로젝트를작성한다. 에뮬레이터에서실시간으로테스트한다. 만약사용자가안드로이드스마트폰은있지만와이파이가없는경우에는 USB 케이블을 통하여작성한앱을실행할수있다. 이때는추가소프트웨어를설치하여야한다. 컴퓨터에서프로젝트를작성한다. 스마트폰에서실시간으로테스트한다. 46 Part Ⅰ 모바일앱이해와활용 우리는이중에서와이파이를이용하여서스마트폰과앱인벤터를실시간으로연결하자. 스마트폰과앱인벤터를실행하고있는 PC 가동일한와이파이로연결되어있으면된다. 스마 트폰의와이파이기능을켜고 PC 와동일한와이파이에연결하도록하자. 실시간테스트가 가능하다. 즉우리가앱인벤터로앱을수정하면수정된내용이스마트폰에즉시반영된다.
03 Speak 앱의작성과실행 Mobile Apps >> Speak 예제에는버튼이하나있고버튼을누르면 축하합니다. 첫번째앱을완성하였군요! 를우리에게들려준다. 실습 01 인터페이스작성하기 01 >> 크롬웹브라우저를사용하여서앱인벤터홈페이지 (http://appinventor.mit.edu/explore) 에접속하여서 [Create apps!] 버튼을누른다. 클릭 02 >> 구글사용자이름과패스워드를입력하여서앱인벤터에로그인한다. 03 >> 앱인벤터에서작성하였던프로젝트들을볼수있는프로젝트뷰화면이등장한다. 여기 에서 [Start new project] 버튼을클릭한다. ❷ 클릭 04 >> 프로젝트의이름을 Speak 로입력한다. [OK] 버튼을누른다. ❶ 입력 ❷ 클릭 Chapter 02 앱인벤터소개 47
05 >> 앱인벤터의디자이너화면이열린다. 각창의역할은다음과같다. 사용자인터페이스를작성할때클릭 코드를작성할때클릭 팔레트창에서는원하는컴포넌트를선택한다. 뷰어에서는선택된컴포넌트를보여준다. 컴포넌트창에서는컴포넌트의리스트를계층적으로보여준다. 06 >> 왼쪽의팔레트에서 Button 을마우스로드래그하여서화면에놓는다. 드래그 & 드롭 여기까지작성한것은 Speak 앱의사용자인터페이스부분이다. 다음실습에서는이앱을 실행하는방법을살펴보자. 또여기에코드를추가하여보자. 48 Part Ⅰ 모바일앱이해와활용
실습 02 와이파이로앱실행하기 이번에는작성된앱을실행하는방법을살펴보자. 3 가지방법중에서와이파이를이용하여앱을실행 하는방법을살펴보자. 01 >> 와이파이를이용하여서스마트폰과앱인벤터를실시간으로연결하자. 스마트폰과 앱인벤터를실행하고있는 PC 가동일한와이파이로연결되어있으면된다. 02 >> 스마트폰에서구글 Play 를실행하여서 MIT AI2 Companion 앱을설치한다. 03 >> 구글웹브라우저의디자이너화면에서 [Connect] - [AI Companion] 메뉴를선택한다. ❶ 클릭 ❷ 클릭 Chapter 02 앱인벤터소개 49
04 >> 다음과같은 QR 코드와 6 자리문자코드가 화면에나타난다. 05 >> 스마트폰에서 MIT AI2 Companion 앱을실행한다. 다음과같은화면이나타날것이다. 화면에서 6자리의문자코드를입력하든지아니면 QR 코드를스캔할수있다. 우리는 [scan QR code] 버튼을클릭하고카메라로 QR 코드를촬영하도록하자. 자동적으로 6글자의코드가입력된다. 클릭 06 >> 다음과같이사용자스마트폰의화면에우리가 작성하고있는앱의화면이나타난다. 50 Part Ⅰ 모바일앱이해와활용
실습 03 컴포넌트의속성변경하기 앞에서하나의버튼으로만이루어진간단한사용자인터페이스를작성해보았다. 앱인벤터에서도그렇고안드로이드스튜디오에서도마찬가지지만, 우리는화면에놓인컴포넌트의속성을변경할수있다. 무엇이속성인가? 예를들어서버튼위에쓰인텍스트도하나의속성이다. 앱인벤터의화면에서오른쪽에있는 Properties 창이현재선택된컴포넌트의속성을보여주는창이다. 01 >> 우리가화면에가져다놓은버튼의텍스트를 나한테말해봐! 로변경해보자. 02 >> 버튼을선택한상태에서오른쪽의속성창에서 Text 속성을 나한테말해봐! 로변경한다. Text 속성의값을 나한테말해봐! 로변경한다. Chapter 02 앱인벤터소개 51
03 >> 이번에는팔레트창에서 미디어 카테고리를열고 TextToSpeech 컴포넌트를드래그 & 드롭한다. ❶ 클릭 ❶ 드래그 & 드롭 여기에컴포넌트가나타난다. 참고사항 >> 객체지향프로그래밍앱인벤터에서도컴포넌트를선택하면컴포넌트에속하는속성과동작을사용할수있다. 이런식으로객체들을조립하여서프로그램을작성하는방법을객체지향프로그래밍이라고한다. 객체 (Object) 는그이름에서볼수있듯이, 객체지향기술의핵심개념이다. 객체는상태와동작을가지고있다. 객체의상태 (state) 는객체의속성이다. 예를들어, 텔레비전객체의경우, 상태는채널번호, 볼륨, 전원상태등이다. 객체의동작 (behavior) 은객체가취할수있는동작 ( 기능 ) 이다. 텔레비전을예로들면, 켜기, 끄기, 채널변경하기, 볼륨변경하기등이여기에해당된다. 52 Part Ⅰ 모바일앱이해와활용
실습 04 컴포넌트의코드블록추가하기 이번에는작성된사용자인터페이스에코드블록을추가하여보자. 코드블록을추가한다는것은즉앱이무엇을하여야하는지를알려주는것이다. 이때는블록에디터를사용하여야한다. 화면의오른쪽상단에있는 [Blocks] 버튼을클릭하여서블록에디터로간다. 여러분들은언제든지필요에따라서디자이너와블록에디터를왔다갔다할수있다. 01 >> [Blocks] 버튼을클릭한다. 클릭 블록에디터의내장블록 (Built-in Blocks) 은계산이나논리연산, 텍스트에관한작업들을 처리한다. 컴포넌트블록 (Component Blocks) 은사용자가앱에추가한블록들을보여준다. 작업공간 (Workspace) 은사용자가블록을조립하여서프로그램에넣을수있는공간이다. 공통블록은항상사용가능하다. 내장블록은계산이나논리연산, 텍스트연산이나제어를수행한다. 컴포넌트블록 사용자가앱에추가한컴포넌트들을보여준다. 작업공간 블록들을조립하는장소이다. 불필요한블록은여기에끌어다놓는다. 뷰어에서는선택된컴포넌트를보여준다. Chapter 02 앱인벤터소개 53
when Button1.Click do 블록을마우스로뷰어위에드래그 & 드롭한다. ❷ 드래그 & 드롭 ❶ 클릭 이블록은앱에있는버튼이클릭되면실행된다. 이것은 이벤트처리기 라고불린다. 02 >> 여기에 [TextToSpeak1] 블록에서다음과같이 call TextToSpeech1.Speak 블록을마우스로 when Button1.Click do 블록안에드래그 & 드롭한다. 이블록은스마트폰으로하여금어떤것을말하도록하는블록이다. when Button1.Click do 블록안에있기때문에버튼이클릭되면바로실행된다. ❶ 클릭 ❷ 드래그 & 드롭 54 Part Ⅰ 모바일앱이해와활용
03 >> 하지만지금은말할내용이없다. 따라서내용을채워주도록하자. Text 카테고리안의 text 블록을끌어서 message 소켓에끼운다. ❷ 드래그 & 드롭 ❶ 클릭 04>> text 블록을선택한후에 축하합니다. 첫번째앱을완성하였네요! 를입력한다. 어떤문장 을넣어도된다. 만약영어만되는스마트폰이라면 Congratulations! You ve made your first app. 이라고입력해보자. 05 >> 자, 이제는테스트하여보자. 스마트폰으로가서버튼을클릭해본다. 스마트폰의볼륨이높여져있는지확인하자. 여러분이입력한문장이소리로나와야한다. 이것은에뮬레이터에서도된다. 도전문제 화면에있는버튼의색상과폰트를다양하게변경하여보자. 버튼의속성을여러가지로변경해본다. Chapter 02 앱인벤터소개 55
실습 05 기능추가하기 앞에서작성한 Speak 의기능을조금확장하여보자. 스마트폰의흔들림에반응하여서말을하게하고 또사용자가입력하는문장을발음하는기능을추가하자. 01 >> ai2.appinventor.mit.edu 로로그인한다. 이전에작성하였던 Speak 를연다. 02 >> [Designer] 버튼을누른다. 03 >> Sensors 카테고리아래에있는 AccelerometerSensor 컴포넌트를화면으로 드래그 & 드롭한다. 이것도보이지않는컴포넌트로서화면의하단에놓여진다. ❶ 클릭 ❷ 드래그 & 드롭 56 Part Ⅰ 모바일앱이해와활용
04 >> [Blocks] 버튼을눌러서블록에디터로간다. 05 >> AccelerometerSensor1 을클릭한다. 가속도센서와관련된모든블록이표시된다. 여기서 when AccelerometerSensor1.Shaking 블록을작업공간에드래그 & 드롭한다. ❷ 드래그 & 드롭 ❶ 클릭 06 >> 작업공간의블록은복사하여서붙여넣기할수있다. 예를들어서 + 를이용하여서 다음과같이위에있는블록을복사하여서 + 를이용하여가속도계의블록안에넣어 보자. 복사한다. Chapter 02 앱인벤터소개 57
07 >> 스마트폰이흔들릴때 흔들지마세요! 를말하도록텍스트의내용을변경한다. 08 >> 스마트폰을흔들어보자. 흔들지마세요! >> 참고사항 >> 만약와이파이로스마트폰을연결할수없다면에뮬레이터를사용하던지아니면스마트폰과 PC를 USB 케이블로연결하여야한다. 에뮬레이터나 USB 케이블을사용하기전에 aistarter 라는프로그램을설치하여야한다. 이프로그램이웹브라우저를에뮬레이터나 USB 케이블과연결시킨다. aistarter는 http://appinventor.mit.edu/explore/ai2/windows.html에서다운로드할수있다. aistarter 프로그램을설치한후에에뮬레이터나 USB 케이블을사용하기전에 aistarter을먼저실행시켜놓으면된다. 앱을실행시키려면 [Connect] [Emulator] 나 [Connect] [USB] 를선택하면된다. 도전문제 화면에텍스트박스를배치하고텍스트박스에입력되는텍스트를말하도록위의앱을수정하여 보자. 58 Part Ⅰ 모바일앱이해와활용