[1분 앱 개발] 2. 그림 그리기 앱

오늘도 앱 개발을 달려봅시다.

매번 환경설정이나 설치에 대해서 얘기하면
설명히 간결해지지 못해요.
그러니 프로그램 설치나 실행법에 대해서는 이전 글을 참조해주세요.
https://steemit.com/kr/@urobotics/1-1

환경 셋팅이 되었다고 가정하고,
크롬에서, 앱 인벤터 사이트를 접속해주세요.
http://ai2.appinventor.mit.edu/

사이트에 접속해서
구글 이메일로 로그인 하구요.
프로젝트 이름을 영어로 써주면,
시작입니다.

기본은 디자이너 모드입니다.
필요한 것들을 또 앱 화면에 던져 넣어봅시다.
왼쪽의 팔레트에서

1. drawing and animation > canvas
2. sensors > Accelerometersensor
   
   캔버스 하고 가속도 센서를 화면에 넣어주시면, 됩니다.

이번에는 캔버스에서 설정을 해줘야 합니다.
화면에 꽉 채우면 되는데요.

그건 오른쪽에 컴포넌트에서 캔버스를 클릭하시면,
제일 오른쪽에 높이, 넓이가 나오거든요.
그걸 fill parent 로 해주시면 됩니다.
그러면 캔버스가 앱 화면에 꽉 차게 됩니다.

그러면 이제 블록화면으로 전환해요.

손으로 앱화면을 그리면
선을 그려줍니다.

자, 차근차근 하나씩 해봅시다.

1. 캔버스를 끌면
   캔버스 >
   
2. 선을 그려라.
   캔버스>
   
   주황색 prevX 위에 마우스 커서를 올리면 이런 화면이 뜹니다.
   
   그러면 그걸 넣어주면 됩니다.

선은 화면에서 x,y 점으로 표시 되잖아요.
처음에 그린 점에서 나중 그린 점을 이어주면
그게 선이니깐
prev X, Y => current X,Y 이렇게 됩니다.
순서대로 4개 다 넣어주시면 돼구요.

선 그렸으니깐,
그 다음은 지우기 입니다.

1. 가속도 센서가 흔들리면,
   가속도 센서>
   
2. 캔버스를 지우세요.
   캔버스>
   
   이제 완성했습니다.

그러면 이제 앱으로 만들어야죠.
apk로 만들기를 클릭해줍니다.

그걸 PC => 폰 으로 옮기시고
(저는 보통 pc에서 이메일 보내고, 폰에서 이메일 다운 받습니다.)
앱을 설치하시고 실행하시면 됩니다.

화면에 아무것도 없는데요.
손가락으로 그어보면 선이 그려집니다.

그리고 폰을 흔들면 그림이 지워집니다.

담엔 더 재밌는 걸로
찾아뵙겠습니다.

감사합니다 .