[5주차] 디지털 기술 입문 _ 만보기

앱인벤터 검색창에 보기놔 같이 입력한다. 검색을 하면

위와 같은 링크들이 뜬다 가장 첫번째 링크를 클릭하고

본인의 운영체제에 맞는 걸로 설치하면 된다

그럼이 컴퓨터 내에서도 앱인벤터를 간단히 실행이 가능하다.

 

그럼 이제 만보기를 만들기전 사용할 기능들을 한번 확인해보자

•센서를 사용하자

•현재 14가지 센서 컴포넌트 제공

•모든 센서를 다 사용할 수 있는 것은 아니다

•도움말 사용

•레이아웃

•컴포넌트를 배치하는 방법

•수평배치를 많이 사용함

 

 

★ 디자인하기

 

- Screen1 : [Properties -> AlignHorizontal -> Center로 변경] / [Properties -> AlignVertical -> Center로 변경]

 

1. Image 추가

   - 이미지 업로드 :  [Properies -> Picture -> Upload File]

   - 이미지 사이즈 조정 : [Height : 128 pixels / Width : 128 pixels]

 

 

2. Label 추가

   - Label1 : [속성 - Text] : "걸음수 : "로 바꾸기

   - Label2 : [속성 - Text] : "거리(m) : "로 바꾸기

   - Label3 : [속성 - Text] : "칼로리(cal) : "로 바꾸기

   - [Components - Lable1] : "Rename"에서 "lblDWalks"으로 이름 변경

   - [Components - Lable1] : "Rename"에서 "lblDist"으로 이름 변경

   - [Components - Label3] : "Rename"에서 "lblCal"으로 이름 변경

 

 

3. Button 추가

   - Button1 : [속성 - Text] : "RESET"로 바꾸기

   - Button2 : [속성 - Text] : "QUIT"로 바꾸기

   - [Components - Button1] : "Rename"에서 "btnReset"으로 이름 변경

   - [Components - Button2] : "Rename"에서 "btnQuit"으로 이름 변경

 

   ㅇ 버튼 사이즈 같게 하기

     - 버튼 두 개 모두 : [Properties -> Width ->Fill perent로 변경]

 

   ㅇ 버튼 가로로 놓기

     - 옆으로 나란히 놓기 위해 : [Palette -> Layout -> HorizontalArrangement 드래그] -> 상자 안에 Button 2개 넣기

     - Components가 다음과 같이 변경됨.

  

     - HorizontalArrangement 설정 : [Properties -> Width -> Fill parent로 변경] / [Properties -> AlignHorizontal -> Center로 변경]

 

 

 

4. Sensor 추가하기

   - [Palette -> Sensors -> Pedometer 드래그]

 

 

 

 

 

★ 알고리즘

 

 

 

 

★ 코딩하기

1. 프로그램이 시작되면 Pedometer 센서를 Start시킨다

2. Pedometer 센서가 걸음을 감지하면 -> 걸음 수와 거리값을 받아 화면에 출력

 

 

 

3. 칼로리 계산

 

 

 

4. RESET 버튼 클릭 -> Text초기화

 

 

 

5. Quit 버튼 클릭 -> 앱 종료