이번 게시글에는 TTS와 Procedure, 랜덤을 이용하여 구구단을 맞추는 게임을 제작하려고 한다.
우선, TTS와 Procedure을 간단하게 나마 알아보자
TTS
소리의 음파를 기계가 자동으로 만들어 내는 기술로, 간단히 말하면 모델로 선정된 한 사람의 말소리를 녹음하여 일정한 음성 단위로 분할한 다음, 부호를 붙여 합성기에 입력하였다가 지시에 따라 필요한 음성 단위만을 다시 합쳐 말소리를 인위로 만들어내는 기술
우리는 1장에서 Hello world!를 TTS를 통해 만들어본 경험이 있다.
Procedure
앱 인벤터에서의 Procedure은 일반적으로 함수를 얘기한다.
함수는 대부분의 프로그래밍 언어에서 지원하는 기능으로, 하나의 큰 프로그램을 여러 부분으로 나누어주기 때문에 같은 함수를 여러 상황에서 여러 차례 호출할 수 있으며 일부분을 수정하기 쉽다는 장점을 가진다.
이번 게시글에서의 가장 중요한 부분은 Procedure이다.
함수를 생성하여 여러번 호출하는 방식으로 앱을 제작할 것이기 때문에 함수의 개념에 대해서 잘 알아야 한다.
1. 아이디어
■ 2~20까지 숫자를 랜덤으로 만든다.
■ 곱셈 문제를 낸다.
■ 사용자가 입력한 답이 맞으면 점수를 올린다.
■ 10개의 문제를 다 풀면 게임 종료
■ 게임 종료 후 다시 할 지를 물어서 진행
2. 디자인
오늘의 디자인은 이전에 했던 게시글보다 조금 복잡하다.
우선 처음 앱인벤터의 프로젝트를 만들면 나오는 screen1의 properties에서 Theme를 Device Default로 변경하여 주자
Theme를 Device Default로 변경해주면 위 그림과 같이 이전과는 다르게 상단에 타이틀 바가 나오는 것을 볼 수 있다.
디자인이 다소 복잡하기 때문에 components위 주로 설명하겠다.
이번에 만들앱의 컴포넌트들의 다음과 같다.
■ Components
screen1
- HorizontalArrangement
- image
- label
- HorizontalArrangement
- lblcount
- label
- HorizontalArrangement
- txtNo1
- image
- txtNo2
- HorizontalArrangement
- txtAnswer
- btnSubmit
- label
- VerticalArrangement
- lblCheck
- lblScore
- TextToSpeach
- Notifier
컴포넌트들의 구성은 이와 같다.
이제 주요 기능들을 담당하는 컴포넌트들의 역할의 알아보자
- lblcount : 문제의 순서를 표시해주는 레이블
- txtNo1 : 곱셈의 첫번 째 수를 출력하는 텍스트박스
- txtNo2 : 곱셈의 두번 째 수를 출력하는 텍스트박스
- txtAnswer : 사용자가 정답을 입력할 텍스트박스
- btnSubmit : 누르면 제출하는 버튼
- lblCheck : 채점결과를 알려주는 레이블
- lblScore : 점수를 알려주는 레이블
속성들의 변경하여 다음과 같은 디자인을 해보자.
layout 컴포넌트들의 Height와 Width를 적절하게 바꾸어 양옆의 공백을 만들고
label을 이용하여 구분선도 만들어 보자.
사용자가 textbox로 출력된 값을 바꿀 수 없도록 Readonly도 체크해주면 좋다.
3. 코딩
코딩으로 넘어가자.
오늘의 함수에 대해서 조금 알아보겠다.
우선 앱 인벤터에서는 함수가 Procedure이라고 불린다.
함수의 개념은 여러가지 변수나 기능들을 하나의 덩어리로 묶은 것이라고 보면된다.
여러기능들이 한번이 아니라 여러번 반복해서 쓰인다면 함수를 한번 선언해주고, 필요할 때마다 함수를 호출하면
훨씬, 편하고 효율적이게 된다.
이번에 만드는 앱의 경우,
1. 문제를 낼때, 첫 번째 숫자와 두 번째 숫자를 랜덤하게 출력하는 기능
2. 문제 번호를 리프레쉬하는 기능
3. 점수를 리프레쉬하는 기능
4. 사용자가 답을 제출하면 자동을 txtAnswer을 초기화 시켜주는 기능
을 반복적으로 사용하기 때문에 이것들을 하나의 함수로 묶어주겠다.
일단, 변수를 생성해주자.
문제의 순서와 점수는 계속해서 기억하고 있어야 하기 때문에 변수를 만들어 주어야한다.
이제 위에서 말한 기능들을 procedure을 통해서 하나로 묶어 주겠다.
좌측 보라색의 procedure을 통해서 함수를 만들 수 있다.
문제의 첫 번째 숫자와 두 번째 숫자는 2에서 20사의 숫자를 랜덤으로 출력한다.
랜덤한 수 생성의 경우 math 카테고리에 존재한다.
물론 이 함수는 가장 처음 스크린이 이니셜라이즈되었을 때도 호출된다.
함수의 이름은 NewQuize로 하겠다.
이제 사용자가 답을 제출 했을 때 일어나는 기능들에 대해서 코딩을 해보자
버튼이 눌리면 if문을 통해 사용자가 정답을 입력하였는지 안하였는지 로직블록을 통해 확인한다.
입력을 안했을 시 조건에 걸리지 않기 때문에 아무일도 없지만, 사용자가 입력하였다면 사용자가 입력한 값이 정답인지 확인한다.
정답이 맞으면 채점 레이블과 TTS를 통해 말해주고, 점수가 10점 올라간다.
반면에 오답일경우 채점 레이블과 TTS이 오답이라고 하며 점수가 올라가지는 않는다.
결과 판독이 끝나면 문제 번호가 1 증가한다.
문제는 총 10 문제 이므로 10가지 문제만을 제출해야한다 . 문제번호인 count변수가 10이상이면 Noti 함수를 호출하고,
아니라면 새로운 문제를 내는 NewQuize 함수를 호출한다. 문제풀이가 끝났을 시 호출되는 Noti함수는 다음과 같다.
+ 오류 수정 : count변수가 아닌 score변수를 사용해야지 점수가 나옵니다!
디자이너에서 Notifier를 넣어 주었다면 좌측 컴포넌트를 클릭해 Notifier에 관한 기능을 사용할 수 있다.
Notifier은 말 그대로 공지를 해주는 메세지박스를 출력한다.
메세지를 설정해줄 수 있고, 타이틀도 설정이 가능하며, 버튼의 text도 설정이 가능하다.
그럼 이제 Notifier의 버튼이 눌렸을 때에 대한 코드를 보자
그림과 같이 '예' 버튼을 누르면 문제번호와 점수를 담고 있는 변수들의 값이 초기화되고 채점도 초기화되며 새로운 문제를 다시 제출한다.
한마디로 다시 처음부터 문제를 푸는 것이다.
반면에 '아니오'를 클릭했다면 단순히 어플리케이션이 종료될 것이다.
4. 테스트
처음 테스트를 돌려본 결과, 문제 풀이 기능은 정상적으로 작동하였으나, Noti함수가 호출되어 Notifier가 출력되는 과정에서
변수를 잘못 설정하여 점수가 아닌 문제 번호가 나오는 오류가 발생하였었다. 로직의 문제가 아니였기 때문에 단순히 변수를 수정하는 것으로 오류를 해결해 주었다. 수정해주니 수정한 부분 외에도 다시하기나 앱 종료를 포함하여 모두 잘 작동하는 모습을 보였다.
잘못된 정보나 오류, 오타, 독자 입장에서의 수정사항 및 피드백 환영합니다.
E-mail : jhmh0226@gmail.com
'Project > App Inventer' 카테고리의 다른 글
| A06-2. 두더지 잡기 (0) | 2021.04.12 |
|---|---|
| A06-1. 디지털 시계 (0) | 2021.04.11 |
| A04-2. 나침반 (0) | 2021.03.29 |
| A04-1. 만보기(with Pedometer Senor) (0) | 2021.03.29 |
| A03. 구구단 앱(반복문& 스크린 추가) + 반복문 연습 (0) | 2021.03.19 |