앱 인벤터 스톱워치 만들기

안녕하세요. 코딩하는 맹꽁이입니다. 

 

이번 글에서는 앱 인벤터로 스톱워치를 만들어보도록 하겠습니다. 

스톱워치... 평소 스톱워치 앱을 쓸 때는 쉬워 보이지만 시도해보면 쉽지는 않습니다.

저도 만들 때 생각보다 어려워서 초록창에 찾아보기도 했거든요.

그럼 지금부터 앱 인벤터로 스톱워치 만들기를 시작하도록 하겠습니다!

 

1. 컴포넌트 불러오기 및 디자인

스톱워치에는 시계 컴포넌트가 가장 중요합니다.

시계 컴포넌트는 타이머가 실행되고 있는 동안 무언가를 실행하는 컴포넌트입니다.

그래서 시간을 계속 재야하는 스톱워치에는 시계 컴포넌트가 꼭 들어가야 합니다.

시계 컴포넌트의 속성 화면

속성은 사진과 같이 설정했습니다. 시작 버튼을 누르면 타이머를 시작해야 하기 때문에

타이머 활성화 여부는 껐습니다. 

 

그 외에 레이블, 버튼 등의 컴포넌트들을 추가하겠습니다.

 

2. 코딩하기

기본 설정도 완료했으니 이제 본격적으로 코딩에 들어가봅시다!

 

이 코드는 시작 버튼을 클릭했을 때 실행하는 부분입니다. 타이머가 실행되고 있다면 타이머를 끄고,

실행되고 있지 않다면 타이머를 끕니다. 또 클릭할 때 마다 버튼의 텍스트도 바꿉니다.

 

이 코드는 기록 버튼을 클릭했을 때 실행하는 부분입니다. 기록 버튼으로 되어있다면 기록 리스트에 기록 내용을 추가하고 기록을 표시하는 목록의 요소를 지정합니다.

초기화 버튼으로 되어있다면 모든 것을 초기화합니다.

 

이 코드는 타이머가 작동할 때 스톱워치를 실행하는 코드입니다. 시간에 1씩 추가하고 레이블에 알맞게 표시합니다.

타이머간격이 100밀리초(0.1초)로 설정되어 있기 때문에 0.1초마다 실행됩니다. 

그러나 버그인지 아닌지 실행 딜레이가 좀 있어서 초가 늦게 세어집니다.

그래서 더 자세한 시간을 표시할 수도 있지만 그러면 딜레이가 너무 커져서 0.1초까지만 표시하게 했습니다.

 

마지막 코드는 알람 컴포넌트를 새로 추가하여 만들었습니다. 

뒤로가기버튼을 눌렀을 때 선택 창이 보여지게 합니다.

앱 인벤터는 백그라운드 실행 기능이 없어서 스톱워치가 꺼질 수 있다는 경고문구를 남깁니다. 

 

3. 테스트

최종적으로 완성했으니 이제 테스트를 해보도록 하겠습니다! 두근두근...

 

테스트 영상

정상적으로 잘 작동하는 것을 볼 수 있습니다.

참고로 캠퍼니언에서 테스트 했습니다 :)

 

이번 글에서는 이렇게 앱 인벤터로 스톱워치를 만들어봤는데요,

저도 코딩 초보이니 너무 믿고 따라하지는 마시고 문제점이 있다면 댓글로 제보 부탁드립니다.

구독과 공감은 저에게 힘이 됩니다!