제6강-비만도 계산기 앱 만들기

* 앱 기획하기

 1. 키와 몸무게를 입력하면 비만도를 계산해주는 앱을 만든다.

    신체질량지수 = 체중 / 신장 * 신장

    체중은 kg,  신장은 cm 

 2. 신체질량지수에 따른 비만도 판정표

저체중	18.5 미만	낮다
정상 범위	18.5 ~ 23 미만	보통
과체중	23 ~ 25 미만	위험 초기
비만 1단계	25 ~ 30 미만	비만 시작
비만 2단계	30 ~ 35 미만	중증
비만 3단계	35 이상	고도

 

bmi-img.png icon_bmi.png

* 컴포넌트 구성하기

 1. 새 프로젝트 생성하기 : 이름-bmi

 2. Screen1 속성에 수평정렬-중앙, 제목을 '비만도 계산기'로 바꾸기

 

 3. [레이블] 컴로넌트를 삽입해서 여백처럼 맨 줄에 빈줄을 만든다.  

     이름 : 빈레이블1,  속성: 높이-7pixels, 텍스트-없음

 

 4. 어플 대표 이미지가 나타나도록 [이미지] 컴포넌트를 가져온다. 속성 : bmi-img.png

 

 

 5. 몸무게와 키를 입력받는 부분을 수평으로 배치하기 위해 [수평 배치] 컴포넌트를 가져온다.

    이름 : 입력부분,  속성 : 수평 정렬-중양, 배경색-없음, 너비-부모에 맞추기

 

 6. '체중'이라는 글자를 화면에 보이기 위해 [레이블] 컴포넌트를 가져온다. 

    이름 : 레이블1,    속성 : 글꼴 크기-15, 텍스트-체중

 

 

 7. 실제 체중을 입력받기 위해 [텍스트 상자] 컴포넌트를 가져온다.

   이름 : 체중상자,   속성: 글꼴 크기-15, 힌트-kg, 숫자만

 

 

 8. '신장'이라는 글자를 화면에 보이기 위해 [레이블] 컴포넌트를 가져온다. 

    이름 : 레이블2,    속성 : 글꼴 크기-15, 텍스트-신장

 

 

 9. 실제 신장을 입력받기 위해 [텍스트 상자] 컴포넌트를 가져온다.

   이름 : 신장상자,   속성: 글꼴 크기-15, 힌트-cm, 숫자만

 

 

 10. [레이블] 컴로넌트를 삽입해서 여백처럼 빈 줄을 삽입한다.  

     이름 : 빈레이블2,  속성: 높이-7pixels, 텍스트-없음

 

 

 11. 계산하기 버튼과 초기화 버튼을 수평으로 배치하기 위해 [수평 배치] 컴포넌트를 가져온다.

    이름 : 버튼부분,   속성 : 수평 정렬-중앙, 수직 정렬-중앙, 배경색-없음

 

 

 12. 계산하기 부분을 만들기 위해 [버튼] 컴포넌트를 가져온다.

     이름 : 계산버튼,     속성 : 텍스트-계산하기

 

 

 13. 계산하기 부분과 초기화 부분 사이의 간격을 만들기 위해 [레이블] 컴포넌트를 가져온다.

     이름 : 빈레이블3,     속성 : 너비-7pixels, 텍스트-없음

 

 

 14. 초기화 하기 부분을 만들기 위해 [버튼] 컴포넌트를 가져온다.

     이름 : 초기화 버튼,     속성 : 텍스트-초기화

 

 

 15. [레이블] 컴로넌트를 삽입해서 여백처럼 빈 줄을 삽입한다.  

     이름 : 빈레이블4,  속성: 높이-7pixels, 텍스트-없음

 

 

 

 16. 신체질량지수와 판정을 2행 2열의 표를 만들어 넣기 위해 [표배치] 컴로넌트 가져온다.   

     이름 : 결과부분,  속성: 너비-300 pixels 

 

 

 17. '신체질량지수'이라는 글자를 화면에 보이기 위해 [레이블] 컴포넌트를 가져온다. 

    이름 : 레이블3,    속성 : 글꼴 크기-15, 텍스트-신체질량지수

 

 

 18. '판정'이라는 글자를 화면에 보이기 위해 [레이블] 컴포넌트를 가져온다. 

    이름 : 레이블4,    속성 : 글꼴 크기-15, 텍스트-판정, 텍스트 정렬-가운데

 

 

 19. 실제 계산된 신체질량 지수를 출력하기 위해 [레이블] 컴포넌트를 가져온다.

    이름 : bmi레이블,    속성 : 텍스트-없음

 

 

 20. 실제 계산된 판정 결과를 출력하기 위해 [레이블] 컴포넌트를 가져온다.

    이름 : 판정레이블,    속성 : 텍스트-없음

 

* 프로그래밍 하기

 1. 앱이 시작되면 결과 부분은 화면에서 보이지 않아야 한다.

 

 

 

 2. 계산하기 버튼을 눌렀을 때 신장을 입력했던 키보드를 사라지게 한다.

 

 

 3. 체중상자와 신장상자가 비어 있는지 아닌지 판단하여 조건이 참이면 결과 부분이 보이게 한다.

    논리의 '그리고' 블록은 두 조건이 모두 참이면 결과가 참, 하나라도 거짓이면 거짓이 된다.

 

   체중 상자와 신장 상자 모두 비어 있지 않다면이라는 조건이 만들어진다.

 

  조건이 참이면 결과 부분이 화면에 보이게 한다.

 

 

 4. 사용자가 입력한 체중과 신장을 이용해 신체질량지수를 구하고 변수 'bmi'에 저장한다.

    변수 이름은 bmi로 초기값은 0으로 설정한다.

 

 

 

 5. bmi 변수에 신체질량지수를 저장하기 위해 변수의 [지정하기. global bmi.값]을 가져온다.

 

 6. 신체질량지수를 구하는 수식을 만든다.

    신체질량지수 = 체중 / 신장 * 신장

    체중은 kg,  신장은 cm,  신체질량지수 공식에서 신장은 m 단위인데 우리는 cm를 입력받기 때문에 신장/100으로 계산한다.

 

 

 

 

 

 

 7. 변수의 [가져오기]를 이용 'bmi레이블'에 'bmi'값이 출력되게 한다.  

 

 

 

 8. 신체질량지수에 따른 비만도 판정표에 따라 판정 결과를 결과레이블에 출력한다.

저체중	18.5 미만	낮다
정상 범위	18.5 ~ 23 미만	보통
과체중	23 ~ 25 미만	위험 초기
비만 1단계	25 ~ 30 미만	비만 시작
비만 2단계	30 ~ 35 미만	중증
비만 3단계	35 이상	고도

 

 

 

 

 

 

 9. 초기화 버튼 클릭 시 체중, 신장 입력 상자의 텍스트를 비우고 결과 부분을 화면에서 사라지게하고 키보드도 사라지도록 한다.

 

 

*디자인 하기

 1. 계산버튼과 초기화 버튼의 배경 색상을 변경한다.

 

 

 3. 체중상자와 신장 상자의 너비를 설정한다.

 

 

 

* 앱 아이콘 만들기 

 1. [디자이너]의 [Screen1] 컴포넌트를 크릭하여 준비한 아이콘 파일을 올린다.

 

 

* 앱 실행하기

 1. [빌드]-[앱(.apk 용 QR 코드 제공)] 클릭

 

 

 

* 최종 파일

 1. aia  파일     bmi.aia

 

 2. apk 파일     bmi.apk

 

bmi-img.png

0.01MB

bmi.apk

2.55MB

bmi.aia

0.02MB

icon_bmi.png

0.0MB