그럼 처음보는 기능인 카운트 다운 만들기부터 시작해 봅시다!
카운트 다운이라니! 뭔가 신나지 않나요? 아… 같이 신나 해주세요!
자 시작해 봅시다!
카운트 다운은 Clock기능을 사용합니다.
우선 Clock의 Properties에서 TimerInterval을 1000으로 설정해 줍니다(①,②).
이것은 1000ms(1초)마다 Clock 기능을 실행하라는 뜻 입니다(무슨 기능인지는 다음을 보시죠!).
처음 숫자를 3으로 저장해 놓고(변수를 만들고 3을 넣어야 겠죠?) (③④⑤⑥),
이제, 3이란 숫자를 1초마다 1씩 깎고 그 결과를 출력하면 3, 2, 1 카운트 다운 기능을 만들 수 있겠죠?
음…제대로 작동하는지 Connect해서 확인해 봅시다!
아마도 처음에는 잘 작동하는 것을 확인할 수 있을텐데… 으악! 계속 끝없이 숫자가 줄어듭니다…
정말 눈치 없게… 진짜 시킨대로 계속 1초마다 1씩 깍습니다. 으악!
어떻게 막을까요?? 우리 예전에 배웠었는데! 조건을 주면 되겠습니다!(if 블록 사용)
LeftTime이 0보다 클 때만 숫자를 1씩 줄이면 되겠죠!
이렇게 바꾼 후 다시 Connect를 해보면 0에서 숫자가 멈춰있는 것을 확인 할 수 있습니다.
그런데 잘 보면 숫자가 3부터 시작하지 않고 'Text for Label1’으로 시작해서 좀 있다가 2부터 시작하지 않나요???
왜 그럴까요? 잘 생각해 봅시다! 왜왜왜 2부터 시작하지?
음… 2는 3보다 1 만큼 작은 숫자인데… 왜???
좀 더 힌트를 드리자면 아마 2로 바뀌는 시점이 스크린이 켜지고 1초 후라는 거죠.
Clock의 설정은 1초구요.ㅋㅋ 곰곰히 생각해 보시고 넘어갑시다. 나중에 다시 고쳐보죠!
이제 대략적인 틀도 잡았고 카운트 다운도 완성하였으니 원하는 기능이 실행될 수 있도록 해볼까요?
앱 사용자가 가장 먼저 실행해야 할 기능은 바로 연락처 지정이겠죠?
그렇다면 우리도 연락처 지정 기능부터 완성해 보겠습니다.
연락처 지정은 ‘설정’버튼을 클릭하면 카운트 다운을 중지하고 OptionScreen으로 넘어가서 연락처를 입력하고
저장을 하면 되겠죠?
우선적으로 OptionButton을 클릭하면 Clock의 기능을 정지시키는 기능부터 구현해 봅시다.
[OptionButton] -> [when OptionButton. Click do]를 드래그하여 화면에 배치시킵니다.
그 다음, 실행되고 있던 Clock의 기능을 멈춰주기 위해 [EverySecClock] -> [Set EverySecClock. TimerEnabled to]를
클릭하여 [when OptionButton. Click. do]블록 아래쪽에 연결시킵니다.
그 다음 [Logic] -> [false] 블록을 [Set EverySecClock. TimerEnabled to] 블록 오른쪽에 연결시켜줍니다.
‘OptionButton’을 누르면 카운트 다운 기능을 멈추게 했으니 그 다음 동작인 OptionScreen으로 넘어가는 기능을
만들어 봅시다.
[Control] -> [Open another screen screen Name]블록을 위의 블록들과 연결합니다.
우리가 이동하고자 하는 화면은 'OptionScreen’이므로 [Text] -> [“ ”]블록을 [Open another screen screenName]
오른쪽에 연결시켜준 후, 클릭하여 “ ”사이에 OptionScreen을 입력합니다.
이제 ‘OptionButton’을 누르면 카운트 다운을 멈추고 ‘OptionScreen’을 띄우는 것까지 해보았습니다.
모두들 자유롭게 Connect로 동작을 확인하면서 해보세요! 그래야 재밌습니다ㅋㅋㅋ
아참! 새로운 스크린을 띄우는데 Screen1은 꺼지지 않았습니다. 다만 OptionScreen이 Screen1 위에 뜬겁니다!
Screen1을 끄라고 말하지 않았잖아요~~
Screen1을 끄지 않은 이유는 다시 돌아와야 하기 때문입니다. 나중에 알게 되실겁니다요~
이제 ‘OptionScreen’에서 번호 설정을 위한 Blocks들을 본격적으로다가 배치해 보겠습니다.
우선적으로 사용자가 텍스트 박스에(PhoneNumTextBox) 전화번호를 입력하고, SaveButton을 누르면
전화번호가 저장이 돼야겠죠?
이거를 만들어 봅시다.
(①, ②) 작업 스크린을 OptionScreen으로 바꿉니다.
[SaveButton] -> [when SaveButton. Click do] 블록을 화면에 배치하고 [PhoneNumTextBox] ->
[Call PhoneNumTextBox. HideKeyboard] 블록을 [when SaveButton. Click do] 블록에 연결시킵니다.
SaveButton을 클릭하면 TextBox에 문자를 쓰기위해서 나타났던 Keyboard를 없애는 작업만 행합니다.
정말 중요한 저장은 아직 하지 않았습니다. 어서 해봅시다!!
설정과 같이 앱을 꺼도 살아남아야 하는 정보는 TinyDB를 사용해서 저장합니다.
따라서 전화번호 저장은 TinyDB를 사용해서!!
[PhoneNumberTinyDB2] -> [call PhoneNumberTinyDB2. StoreValue. Tag. ValueToStore]를 드래그하여 HideKeyboard 블록 아래에 놓습니다.
Tag는 저장공간의 이름을 지정해주는 곳이고 value To Store는 저장할 정보를 지정하는 곳 입니다.
저장공간 이름을 PhoneNumber로 지정하고 저장할 값은 PhoneNumTextBox에 쓰인 전화번호 이므로
valueToStore에는 [PhoneNumberTextBox. Text]를 연결합니다.
TinyDB에 전화번호를 저장하는 기능을 완성 했습니다.
저장이 잘 되었는지 저장된 값을 보여주면 좋겠죠? 자~ 해봅시다!
[SavedPhoneNumLabel] -> [set SavedPhoneNumLabel. Text]블록을 화면에 배치 합니다.
[PhoneNumberTinyDB2] -> [call PhoneNumberTinyDB2. GetValue]블록을 오른쪽에 연결 시킵니다.
이 블록의 tag 오른쪽에는 [Text] -> [“ ”] 를 연결시킨 후 “ ”에 PhoneNumber을 입력하고,
valueIfTagNotThere 오른쪽에는 [Text] -> [“ ”] 를 연결시킨 후 “ ”에 미입력상태입니다. 라고 입력합니다.
[call PhoneNumberTinyDB2. GetValue]블록은 tag에 입력된 저장소 값을 불러오는 역할을 합니다.
방금 전 PhoneNumber라고 이름 지은 저장소에 전화번호를 저장했으므로 tag에 PhoneNumber를 입력하여
저장된 값을 가져옵니다.
위 과정은 저장된 전화번호가 있으면 그 번호를 label에 표시하게 하고,
저장된 값이 없으면 “미입력상태입니다”라고 보여지게 합니다.
자~ 잘 되는지 한번 또 Connenct해서 확인해 보시고요! 그런데 뭔가 허전하지 않나요??
SaveButton을 누르지 않아도! 설정화면에서 설정된 전화번호를 볼 수 있으면 좋지 않겠어요?
OptionScreen이 딱 켜졌을 때! 저장된 값을 보여줘! 이거 해봅시다.
이거는 따로 설명 안할게요. 지금쯤이면 밑에 사진들 보시고 어떻게 해야할지 바로 감이 오시죠?
