본문 바로가기

Robot/Block Coding

휴대폰 앱?? 앱 인벤터 App Inventor2로 간단히 만들어 볼까요?^^

최근 회사일과 저의 관심이 만들어낸 공통 분모로 휴대폰에 앱을 초등학생도 쉽게 만드는 방법에 대해 살짝 리서치를 했는데요. 그 중 단연 일등은 앱 인벤터 App Inventor 라는 아이였습니다. [바로가기]로 가보시면 웹에서 바로 실행되는 형태로 아주 쉽게 접근할 수 있는 아이인 것 같습니다. 오늘은 앱인벤터에서 제공하는 문서 중 하나를 따라 손으로 그림을 그리는 기능[바로가기]과 휴대폰에 있는 가속도 센서를 사용해서 휴대폰을 흔들면 화면을 지우는 기능과 손으로 그림을 그리는 기능을 안내하고 있는 문서[바로가기]의 내용을 더 간단하게 따라하는 내용으로 수행해 보겠습니다.~

먼저 앱 인벤터 AI2에 접속해 보면 저렇게 화면이 나타납니다.~ 우측 상단에 Designer라고 되어 있을 겁니다.

Drawing and Animation에서 Canvas를 끌어다가 Viewer에 가져다 놓습니다.

그리고 Height에 Fill parent,

Width에 Fill parent를 선택해서 canvas가 꽉 차게 만들어 줍니다.

그러면 Viewer에 저렇게 나타날 겁니다.

이제 Sensors에서 AccelerometerSensor 항목을 긁어서 Canvas로 가져다 놓습니다.~ 그러면 Viewer 화면 밑에 Non-visible components에 나타날 겁니다.

이제 화면을 Blocks로 전환시킵니다.

그럼 저런 화면이 나타나죠^^ 백지같은~~~^^

이제 Screen1에 아까 추가한 Canvas와 AccelerometerSensor가 특별한 이름을 주지 않아서 번호 1을 달고 있는게 보이네요^^

거기서... Canvas1을 클릭해보면 저렇게 일단 편하게 원샷(^^)으로 사용가능한 블럭들이 나타납니다.

그 중 when Canvas1.Dragged와 call Canvas1.DrawLine블럭을 위와 같이 만들고, prevX, prevY, currentX, currentY 블럭을 적절히 위와 같이 배치합니다.

그리고 AccelerometerSensor1를 눌러서 when AccelerometerSensor1.Shaking을 눌러서 폰을 흔들면 그걸 감지해서 call Canvas1.Clear를 통해 화면을 지우도록 합니다.

이제.. 완성했습니다. 이걸 폰으로 전송해야 app이 되는 건데요.. 방법 하나는 Build 메뉴의 App (provide QR code for .apk)를 통해

저런 화면을 거친후

저렇게 QR코드가 나오면...

폰에서 앱인벤터2 AI2 companion을 찾아서 설치하고

 scan QR code로 code를 인식하면 다운로드가 시작됩니다. 혹은~

App (save .apk to my computer)를 선택해서 다운로드 받아서 직접 폰으로 옮겨도 됩니다. 전 순전히 개인적 취향으로 직접 카피했습니다.^^

그러면 제가 만든 HelloWorld2.apk가 보이네요... 바로 실행하기~~~ 아니 설치하기~~

설치를 시작하고~

완료되면~

저렇게 이쁘게 아이콘도 나타납니다.

실행하면 저런 화면이죠~~~ 하얀 Canvas~

손가락으로 마구마구 그려주시면 됩니다^^ 그리고 폰을 흔들면 다시 깨끗해 지는 거죠 ㅋㅋㅋㅋ^^

반응형