4. 앱인벤터로 계산기 앱(application)만들기!

 

 

 

 

1. 계산기 앱 화면과 기능 구상하기

 

이번에 만들 앱은

더하기 빼기 계산기 앱입니다. 

 

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

 

 

 

 

앱에 필요한 컴포넌트는 아래와 같습니다.

 

레이블 :  앱 이름 표시

텍스트 상자 : 첫 번째 숫자 

텍스트 상자2 : 두 번째 숫자

버튼 2개 : 더하기 버튼, 빼기 버튼

텍스트 상자3: 결과값을 출력

 

 

계산기라고 쓰여 있는 것은 '레이블' 이라는 컴포넌트를

드래그 - 앤 - 드롭하여 사용할 것이고 

 

첫 번째 수, 두 번째 수는 '텍스트' 라는 컴포넌트를 가져올 것입니다. 

 

더하기, 빼기는 '버튼' 컴포넌트를 사용하여 

버튼을 클릭하면 더하기, 빼기가 되도록 할 것입니다. 

 

마지막 결과 값은 '텍스트 박스' 컴포넌트를 사용합니다.

 

 

 

2. 새로운 프로젝트 만들기

 

 

화면 설계가 어느 정도 되었다면 이제 앱 인벤터에 접속해서

새로운 프로젝트를 만들어줍니다. 

프로젝트이름은

알파벳, 숫자, _ 만 가능합니다!

 

 

 

 

3. 앱 화면 만들기

 

그럼 이제

뷰어에 화면 설계에 그린 것들을 넣어보도록 하겠습니다. 

 

3-1. 화면 설계

 

위의 그림은 더하기, 빼기 버튼까지 만든 그림인데

가운데에 레이아웃 - 수평을 넣어주었습니다.

 

3-2. 레이아웃-수평 넣기 

 

 

레이아웃 - 수평 안으로 버튼1과 버튼2를 넣어주면 

아래처럼 만들어집니다.

버튼1과 버튼2가 수평으로 연결된 것이 보이죠. 

마지막으로 결과값이 출력될 텍스트도 넣어줍니다. 

 

 

3-3. 속성 탭 조정해보기

 

이번에는 계산기라는 이 앱의 이름이 쓰여있는

레이블의 속성을 조정해보겠습니다. 

 

맨 오른쪽에 속성 탭이 있는데

'텍스트' 를 '계산기'라고 바꾸어 주고

 

배경색도 바꿔보고, 글꼴도 굵게 해주고, 글꼴크기도 크게 해줍니다.

 

마찬가지로 버튼의 크기와 색상도 바꿔줍니다. 

 

 

 

4. 코딩하기

 

 

코딩할 내용을 살펴보겠습니다. 

 

더하기 버튼을 누르면 : 텍스트박스 3의 텍스트에 텍스트박스1의 텍스트와 텍스트박스2의 텍스트를 더한 값이 나타난다.

빼기 버튼을 누르면 : 텍스트박스 3의 텍스트에 텍스트박스1의 텍스트와 텍스트박스2의 텍스트를 뺀 값이 나타난다.

초기화 버튼을 누르면 텍스트박스1,2,3의 값들이 초기화된다. 

(이 부분은 추가로 넣어주었습니다.)

 

아래는 전체 코드입니다.

 

이렇게 하면 코딩도 끝!!!

버튼3도 만들어주었는데 이 버튼은 초기화를 위한 버튼입니다.

계산기는 코딩 내용이 무척 간단합니다.

 

여기에 곱하기, 나누기를 추가해주면 

더 진짜같은 계산기 앱이 되겠죠. 

 

 

 

5. 컴퓨터에서 앱 구동 모습 확인하기

 

 

이번에는 컴퓨터에 연결하는 것을 좀 더 자세히 알아보겠습니다. 

 

 

5-1. 에뮬레이터 클릭

 

앱 인벤터 연결 탭에서

에뮬레이터를 클릭합니다. 

에뮬레이터 연결을 눌러줍니다. 

에뮬레이터 연결을 눌러주기 전에 일단 지난 글에서 썼듯이

aiStarter라는 프로그램이 컴퓨터에 깔려있어야 합니다.

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

 

5-2. 에뮬레이터 확인

 

aiStarter가 깔렸다면 

에뮬레이터를 누르고 좀 기다려 줍니다.

에뮬레이터가 스타트 되었다는 문구가 뜹니다. 

 

더 기다리면 이제 진짜 에뮬레이터가 뜹니다.

 

 

5-3.  에뮬레이터로 앱 작동 확인

 

 

어떻게 작동하는지, 잘 작동하는지 확인해보겠습니다.

 

 

 

6. 앱 베포하기

 

이번에는 앱을 베포해보겠습니다.

앱을 스마트폰이나 태블릿PC에 넣는다고 보면 됩니다. 

 

 

6-1. 앱인벤터 빌드 - QR코드 제공 클릭

 

빌드 탭에서 QR 코드 제공을 클릭합니다. 

 

이렇게 진행 바가 뜬다.

진행이 100% 다 되면 QR코드가 나옵니다.

 

 

 

6-2. 스마트폰 AI2 Companion QR코드 인식

 

핸드폰에 설치한 MIT AI2 Companion을 실행하고

QR코드를 읽어줍니다.

 

그럼 바로 내 핸드폰에서 .apk 파일을 저장하고 설치 후 

잘 작동하는지 확인할 수 있습니다. 

 

 

 

7. 앱 꾸미기 추가

 

 

앱이 잘 작동하는 것을 확인하고

저는 계산기앱을 좀 꾸며보았습니다. 

 

로고와 버튼 이미지를 좀 수정하고 곱하기, 나누기도 넣어보았습니다.

최종 완성한눌러눌러 계산기의 작동 모습입니다.

 

 

 

 

8. 랜덤 계산기 앱으로 업그레이드

 

 

마지막으로 기존의 계산기 앱을

랜덤 계산기로 업그레이드해보았습니다.

랜덤으로 숫자가 나오고 계산 버튼을 누르면 계산 결과가 나옵니다.

그리고 초기화 버튼을 누르면 다시 랜덤 숫자가 나옵니다.