이번에는 가속도 센서를 활용하여 랜덤 런치박스 앱을 만들어 보려한다.
매번 식사 시간만 되면 무엇을 먹어야 할지 고민되는 직장인?! 들을 위해 ㅋㅋㅋㅋ
핸드폰을 흔들면 메뉴가 랜덤으로 딱 나오는! 앱이다.
점심시간이 다가오는 오전에 아이들과 이 앱을 만들면 흥분의 도가니가 된다.
우선 전체 완성 모습은 아래와 같다!
이미지 다운 받기
https://drive.google.com/drive/folders/1qurxBdsBGtEKvPZUiafe5DrRL3tAYM4K?usp=sharing
그럼 먼저 디자이너 화면으로 넘어가보자.
이번 앱에서는 보이는 컴포넌트와 보이지 않는 컴포넌트로 나뉘어 살펴봐야한다.
보이는 컴포넌트는 이미지와 레이블이고, 보이지 않는 컴포넌트는 가속도센서와 알림이다.
그럼 각 컴포넌트들의 속성을 살펴보자.
우선 스크린1을 살펴보자.
스크린1은 수평과 수직이 모두 가운데 정렬이 되어 있다.
그리고 앱을 다운로드 받았을 때 핸드폰에 표시되는 아이콘도 jpg파일로 넣어주었다.
미디어를 보면 랜덤으로 나올 음식의 사진들이 들어가 있는 것을 볼 수 있다.
다음으로 이미지1의 속성을 살펴보자.
이미지1의 높이와 너비는 모두 부모 요소에 맞추어 주었다.
그리고 기본 이미지를 런치박스jpg 파일로 넣어주었다.
보이는 컴포넌트의 마지막인 레이블1을 살펴보자!
레이블1의 경우 텍스트 부분에 앱 사용법을 간단히 적어주었고 텍스트정렬은 가운데로 맞추어주었다.
스크린 화면 설정이 모두 끝났다면 이제 코딩하기!
우선 스크린이 초기화되었을 때, 알림 경고창이 보이도록 했다.
알림 내용은 앱의 사용법을 적어주었다.
보라색 블록은 마법의 블록이라 할 수 있는데 많은 코드들을 함축하여 특별한 기능을 구현해준다.
보이지 않는 컴포넌트에서 '알림' 컴포넌트를 클릭하면 '호출 알림1 경고창보이기' 블록이 보일 것이다.
그리고 랜덤으로 메뉴가 나와야 하기 때문에 랜덤메뉴라는 변수를 만들어 주었다.
핸드폰을 흔들었을 때 메뉴가 나오기 때문에 '가속도센서' 컴포넌트를 클릭하여 '가속도 센서가 흔들렸을 때' 블록을 연결해주었다.
그리고 변수에는 리스트를 만들어 주고 그 리스트에서 랜덤 항목을 선택하도록 코딩했다.
리스트에는 아까 미디어에 넣어주었던 음식 파일명을 그대로 써준다.
그리고 이미지 사진 값에 변수를 넣어주면 끝!
여기에 레이블의 텍스트값고 변수를 넣어주면 메뉴의 이름이 나오게 된다.
랜덤 기능을 익혀두면
가위바위보 게임앱을 만들거나, 오늘의 운세 앱을 만드는 등
랜덤한 상황과 어울리는 다양한 앱들로 업그레이드 시킬 수 있다.
오늘의 앱 개발도 완료!