3. 앱인벤터로 인사하는 앱 만들기

 

 

 

1. 인사 앱 화면 설계하기

 

 

앱 인벤터를 사용해서간단히 인사하는 앱을 제작해보겠습니다.  

 

앱의 기능은 간단합니다.

인사 버튼을 누르면 "여러분, 안녕하세요?" 가 출력되게 하는 매우 간단한 앱이죠.

 

앱의 화면은 이렇게 간단히만 그려보았습니다. 

 

 

2. 디자이너 탭에서 앱 화면 만들기

 

이제 앱 인벤터 디자이너 탭에서 화면을 만들어 보겠습니다. 

인사 버튼을 누르면 텍스트창에 "여러분, 안녕하세요?"가 출력되도록 화면을 설계해보겠습니다.

 

앱인벤터는 사용 방법이 간단합니다.

버튼을 넣고 싶으면 버튼을 드래그 - 앤 - 드롭 방식으로 끌어오면 됩니다. 

 

드래그 앤 드롭 방식으로 이동시킴

 

버튼을 넣으면 이렇게 컴포넌트 창에 버튼이 나타납니다.

버튼을 클릭해서 이름 바꾸기를 누르면 이름을 바꿀 수 있습니다.

저는 버튼의 이름을 '인사'로 바꿔봤습니다. 

 

이제 맨 오른쪽 속성 탭에 인사 라고 버튼 이름이 나옵니다.버튼의 배경색도 바꿀 수 있고높이, 너비를 바꿀 수도 있습니다. 그리고 버튼 자체에 이미지를 넣을 수도 있습니다. 

 

저는 인사하는 캐릭터를 넣어보았습니다. 인사하는 캐릭터를 터치하면 안녕하세요~ 인사 텍스트가 나오도록 할겁니다. 

 

텍스트가 나와야 하므로버튼 아래 텍스트박스도 추가하였습니다.

속성을 변환시켜서 뷰어에 보이는 모습 확인하기

 

 

 

3. 코딩하기

 

코딩 전에 먼저 순서도를 그려보았습니다.

아주 간단합니다.

만약 인사버튼을 누르면?

 

여러분, 안녕하세요?

라는 텍스트가 출력됩니다. 

 

이제 순서도에 맞게 코딩을 해보겠습니다. 

 

일단 인사버튼을 누르면 글자가 출력되는 것이니까 이벤트 블록이 필요합니다.

인사 버튼에 해당되는 이벤트 블록은 아래 그림과 같은 종류가 있습니다. 

이벤트 블록

 

 

인사블록을 클릭했을 때 버튼만 가져옵니다. 

그리고 텍스트 탭에서 '텍스트' 블록을 가져옵니다.

마지막으로 텍스트박스를 클릭한 다음에

'지정하기 텍스트박스1 텍스트값' 블록을 가져옵니다.

 

 

이제 이 블록들을 연결해보겠습니다.

인사버튼(인사하는 캐릭터)를 클릭했을 때

텍스트박스1에 '여러분, 안녕하세요' 텍스트를 지정합니다.

코딩은 이게 끝입니다.

매우 간단하죠. 

최종 코딩 완료!

 

 

 

4. 앱 테스트하기

 

 

앱 만들기가 끝났다면 

이제 앱을 테스트해봐야 합니다. 

 

AI컴패니언을 활용하면

안드로이드 스마트폰이나 태블릿PC에서

앱을 테스트해볼 수 있습니다.

 

4-1. 스마트폰에서 MIT AI2 Companion 설치

 

스마트폰 Play스토어에서  Mit AI2 campanion 설치해주세요. 

 

 

4-2. 앱인벤터 연결탭 - AI 컴패니언 클릭

 

앱 인벤터에서는 연결 - Ai컴패니언을 눌러줍니다.

 

4-3. 스마트폰으로 QR코드 인식

 

그럼 이렇게 QR코드가 뜹니다.

 

 

 

 

이제 스마트폰의 AI Companion 어플을 켜보겠습니다. 

여기서 스캔 QR코드를 해서 QR코드를 스캔하거나

Your code라고 보이는 code값을 입력합니다.

 

그럼 이렇게 진행바가 나오고 진행이 끝나면 스마트폰에서 확인할 수 있습니다.

 

 

5. 앱의 실행 모습 확인

 

앱의 실행 모습을 보겠습니다.인사하는 캐릭터버튼을 클릭하면여러분, 안녕하세요?라고 텍스트가 나옵니다. 

 

 

 

6. 컴퓨터 상에서 앱의 구동 모습을 확인하기

 

 

이번에는 컴퓨터 상에서 앱이 실행하는 모습을

확인하는 방법을 보겠습니다. 

 

6-1. 파일 다운받기

 

여기서 파일을 다운로드 받습니다.

https://appinventor.mit.edu/explore/ai2/windows 

Installing App Inventor 2 Setup on Windows

 

6-2. 앱 인벤터 에뮬레이터 연결

 

이제는 에뮬레이터를 클릭해줍니다. 

그럼 바로 에뮬레이터를 통해 앱의 구동 모습을 볼 수 있습니다.