7-2. 앱인벤터 - 덧셈 연습 앱 업그레이드(1부터 10까지 더해주는 앱)

 

 

 

 

지난 글에서는 덧셈 연습 앱을 만들고

7. 앱인벤터 덧셈 연습 앱 만들기(수학 문제 풀기 앱)

7. 앱인벤터 덧셈 연습 앱 만들기(수학 문제 풀기 앱)

 

난이도에 따른 덧셈 연습 앱으로 업그레이드 시켜 보았습니다.

7-1. 앱인벤터 - 덧셈 연습 업그레이드 앱 만들기

7-1. 앱인벤터 - 덧셈 연습 업그레이드 앱 만들기

 

 

이번에는

1부터 10까지의 숫자를 자동으로 더해주는 앱을 만들어 보겠습니다. 

 

그런데 단순히 1~10까지의 숫자를 더해주는 앱이면

딱히 유용하진 않겠죠?

 

그래서 

내가 원하는 처음 숫자 num1을 넣고

마지막 숫자 num2를 넣으면

앱이 자동으로 계산을 해주게끔 해보겠습니다. 

 

 

UI는 기존의 것을 사용하고 기능만 바꿔보겠습니다. 

 

---

 

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

 

 

이 앱은

처음 숫자와 끝 숫자를 입력하면

처음숫자 부터 끝 숫자까지의 합을 출력해줍니다.

 

여기서 주의할 점이 있습니다.

1~10까지의 숫자의 합이라면

처음 숫자인 1과 끝 숫자인 10을 모두 포함하여 더한다는 점입니다.

 

즉, 1부터 10까지의 합을 구한다면

1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 이렇게 계산한 결과 값을 출력해주는 것이죠. 

 

당연하다고 생각할 수도 있는데

막상 코딩을 하다보면 1~9까지만 더해지거나

0~10까지 더해지는 코드가 작성될 수 있으니

 

이 부분을 마지막에 꼭 확인해주어야 합니다.

 

 

2. 앱 화면 만들기

 

 

앱의 UI는

기존 덧셈 천재 UI를 사용하였고

안의 내용만 좀 바꾸어 주었습니다.

 

컴포넌트 부분을 보시면

수평배치1, 2, 4, 7을 볼 수 있는데

수평배치를 만들었다 지워서 3, 5, 6이 없는 것이니

숫자에는 크게 신경쓰지 않으셔도 됩니다. 

 

 

 

 

 

3. 코딩하기

 

 

그럼 가장 중요한 코딩을 해보겠습니다. 

 

num1부터 num2까지의 합을 구하는 코딩은

for반복문 또는 while반복문을 사용하면 됩니다. 

 

각각을 살펴보겠습니다. 

 

3-1. for 반복문 사용하기

 

첫 번째로 for 반복문을 사용해서 숫자의 합을 구해보겠습니다. 

 

JavaScript에서 for 반복문을 사용하는 것과 비슷한데

블록의 이름을 확인하고 연결하는 것이 필요합니다. 

 

기본적으로 앱인벤터는 HTML, CSS, JavaScript를 기반으로 하기 때문에

블록들이 JavaScript랑 거의 구조가 비슷합니다. 

그래서 JavaScript를 해보신 분들은 좀 더 익숙하게 느끼실 겁니다.

 

일단 함수를 만들어주는데

x1과 x2를 파라미터로 만들어 줍니다. 

 

시작 값은 x1이고 끝 값은 x2 입니다.

x1, x1+1, x1+1+1,,,,,+x2 의 합을 구하는 것이겠죠!

 

for 반복문에서는 i 라는 변수가 자동으로 들어가는데

i는 1씩 값을 증가시켜 줍니다.

 

여기서 i는 

x1, x1+1, x1+1+1 이라는 부분에서 숫자 1을 의미합니다.

 

i를 2씩 증가시키게 되면

x1, x1+2, x1+2+2 이렇게 2씩 증가하게 됩니다. 

 

 

3-2. while 반복문 사용

 

이번에는

while반복문을 사용해보겠습니다. 

 

while또한 JavaScript랑 비슷합니다.

while은 for에서의 i 변수가 자동으로 생성되지 않기 때문에

i 변수를 따로 만들어 준다는 번거로움이 있죠. 

 

 

 

3-3. 전체 코드

 

그럼 반복문을 포함한 전체 코드를 보겠습니다.저는 for 와 while 반복문 중 for 반복문을 사용했습니다.

 

sum(x1, x2) 이라는 for반복문을 이용한 함수를 만들었고

'함수'라는 이름의 함수를 만든 뒤 빈 텍스트를 저장해주었습니다. 

 

사실 이 함수는 이름 바꾸기가 귀찮아서

그냥 처음 생성된 함수라는 이름을 그대로 사용했습니다.

 

전체 코드에서의 핵심은

역시나 sum(x1,x2) 함수 만들기겠죠. 

x1과 x2가 파라미터이기에 사용자가 입력한 값이 함수로 들어가게 됩니다.

 

 

 

 

 

4. 테스트하기

 

마지막으로 테스트를 해보겠습니다.

 

 

성공!!!!