RC Car 블루투스 조종기 앱 인벤터 코딩

1. 앱 인벤터 열기

클라우드 소프트웨어인 앱 인벤터는 구글 로그인 후 MIT app inventor 로 검색하여 홈페이지를 열자.

과거와 달리 이제는 안드로이드 폰 만 아니라 아이폰도 된다고 명시되어 있다.

안드로이드 폰의 경우 Play Store에서 벌집모양의 로고를 가진 앱을 미리 다운받아 둔다. 아이폰도 마찬가지다.

앱 작성을 시작하기 위해서는 Create Apps! 버튼을 클릭하여 클라우드 IDE 를 열도록 한다.

 

 

2. 새프로젝트 시작

처음열어보는 사용자는 아래와 같이 기존 사용자와는 달리 당연히 저장된 파일들이 없을 것이다.

Start new project 버튼을 클릭하여 새로운 앱(알고리듬)을 발명해 보도록 하자.

발명되는 알고리듬 자체는 지적재산이지만 반드시 실용적인 응용이 있어야 특허 출원이 가능하다.

Start new poject 버튼을 클릭하자.

 

 

프로젝트 파일명을 BTCNTR 늘 입력 후 OK 버튼을 클릭하자.

 

 

아래와 같이 광고성 윈도우가 나타나면 아래의 Continue 버튼을 클릭하여 넘어가자.

 

앱 편집 스크린 화면이 성공적으로 나타났다. : Palette, Viewer, Components, Properties 로 구성

Palette는 각종 폰 앱 구성 요소들을 종류별로 모아 두었다: User Interface, Layout, Meadia, Meadia, ..., Sensors, ..., Connectivity, ... 등이다.

 

 

3. Pallete 요소로 폰 화면 디자인 및 Component 트리(Tree) 생성

처음 단계의 앱 코드 작성은 Pallete 에서 필요한 요소들을 찜하여 Viewer에 Drag 즉 끌어다 놓는 작업이다.

블루투스 코딩에 필요한 요소들은 ListPicker 1개, 3개의 수평 레이어칸과 버튼 5개와 블루투스 클라이언트 1개이다.

각각의 수평레이어는 길이는 Parent 사이즈, 높이는 100 픽셀크기로 설정하자.

책장 구조와 비슷한 3개의 수평 레이어의

      첫번째: Forward 와 Backward 버튼을 Parent 사이즈의 50% 설정

      두번째: Left 와 Right 버튼을 Parent 사이즈의 50% 설정

      세번째: Stop 버튼을 배치하기로 한다.

아울러 Bluetooth Client 는 Drag  후 놓으면 폰화면 밖 하단에 위치하게 된다.

BluetoothClient에서 Client 의 의미는 request 신호를 발신하는 주체를 의미한다.

 

 

3개의 수평 레이어 칸을 Palette의 Layout으로부터 Drag 해다 놓으면 Components 트리(Tree)에 3개의 HorizontalArrangements 를 볼 수 있다.

각 레이어 칸별로 User Interface로부터 버튼을 Connectivity로부터 BluetoothClient 를 Drag 해다 넣으면 다음의 Viewer 와 Components  트리 구조를 볼 수 있을 것이다. Bluetooth는 Non-visible components에 위치한다.

 

 

 

4. Screen1 -> Title 문자박스 입력

Components 트리에서 Screen1 을 클릭 후 속성(properties)을 위로 스크롤하여 Title 문자박스를 찾은 후 "RC Car Bluetooth"을 입력하고 엔터(Enter) 한다. 폰 화면 상단이 Screen1-->RC Car Bluetooth 로 변함을 관찰하자.

 

 

 

5. 수평(HorizontalArrangement) 칸에 포함된 버튼의 크기 설정

Components 트리에서 각 수평 칸을 클릭 후 속성(properties)들을 짜맞추자. 길이->Parent 사이즈, 높이->100 픽셀

 

 

6. Button 크기 설정

Components 트리에서 각 버튼을 클릭 후 속성(properties)들을 짜맞추자. 길이->50%사이즈, 높이->Parent 사이즈

단 Stop 버튼은 높이는 Parent 사이즈, 길이 폭도 Parent 사이즈로 맞춘다.

 

 

7. BUtton  속성 부여

해당 버튼별로 Background Color, FontBold, FontSize 28, Text 문자열 박스에 버튼 명을 설정한다.

 

 

각 버튼별로 돌아가면서 속성 부여를 마친 결과를 살펴보자. 이로소 Designer  단계를 완료하고 Blocks 알고리듬 코딩 단계로 넘어갈 스텝이다.  Blocks 버튼을 클릭하자.

 

 

8. Blocks 퍼즐 앱 코딩

아래 그림은 이미 만들었던 RCCAR 앱 Blocks 코딩 사례이다. 요령을 배워서 동일하게 작성하도록 한다. 즉 베껴서 코딩 연습을 하자.

when xxx ... 즉 어떤 버튼을 누를때 코드는 event coding  기법에 해당한다. 언젠지 모르지만 버튼을 터치 클릭하면 이미 준비가 되어 있어서 작동해야 하는 코드 명령들이다.

RC CAR에서는 Bluetooth 페어링 작업이 선행되어야 하며 Connected 가 이루어지면 그때서야 무선 블루투스를 통해 전진(F), 후진(B), 좌(L)회전, 우(R)회전이 가능해진다.

 

 

9. ListPicker1.BeforePicking 이벤트 퍼즐 코딩

Blocks에서 ListPicker1을 클릭하면 앱 인벤터에서 코딩 가능한 모든 경우에 필요한 퍼즐 조각 명령 세트 3종류(금색, 보라색, 초록색)를 제공한다. 여기로부터 Drag 해다 퍼즐을 맞추도록 한다. 앱 발명을 위한 모든 요소는 다 포함되어 있으므로 걱정할 필요가 없다.

ListPick1 을 클릭 후 오른쪽의 when ListPicker1 .BeforePicking 을 Drag 한다.

 

 

when ListPickers1 퍼즐을 편집창 공간에 Drag 한다. 이어서 초록색 세부퍼즐 set ListPicker to ... 을 찾아서 Drag 하여 끼워 맞춘다. 사운드 효과음 챡~에 유의하자.

 

 

초록색 세부퍼즐 끝부분을 맞추기 위해서 BluetoothClient1을 클릭하여 세부퍼즐 중에서 초록색 세세부 퍼즐 조각을 찾아 Drag 해 퍼즐을 완성한다.

 

 

블루투스 BeforePicking 은 블루투스 페어링 전에 주변의 블루투스 소스들을 찾아서 등록 후 이들을 리스팅하는 작업이다. 이 들 폰에 등록된 디바이스들 중에 자신의 RC Car  의  디바이스 명칭인 HC-06 을 등록해 두어야 한다. 

폰에서 상단의 ListPicker 버튼을 누르면 검은 색 화면에 등록된 블루투스 리스트가 출력된다. 이 중 자신의 디바이스 주소를 선택 터치 클릭하면 Connected  시도가 이루어지게 된다. 

아래 그림은 Bluetooth HC_06 address 및 name  예이다.

 

 

※ 블루투스 디바이스 등록 과정에서 여려 명이 동시에 RC Car 의 Bluetooth 보드를 ON하면 여러개의 식별 불가능한 HC-06 이 나타나므로 각자 10 m 이상 떨어진 곳에서 등록 작업을 하자.

 

10. ListPicker1.AfterPicking 이벤트 퍼즐 코딩

Address 와 name 을 가지고 블루투스 보드가 선택되었으면 즉 AfterPicking 되었으면 BluetoothClient1 을 call 하여 무선 연결 후 "Connected" 메세지를 폰 화면 상단에 출력한다.

 

Screen1  밑에 있는 ListPicker1 을 클릭 후 when ListPicker1.AfterPicking 퍼즐을 Drag 한다.

 

 

다시 ListPicker1을 클릭한 후 스크롤하여 초록색 세부 퍼즐조각 set ListPicker1 Selection to 를 찾아서 Drag 하여 끼운 후 퍼즐 후미에 BluetoothClient1으로부터 call BluetoothClient1.Connect 보라색 세부 퍼즐을 찾아서 Drag  후 끼운다.

보라색 퍼즐조각 address 후미에 ListPicker1에서 ListPicker1 Selection 세세부 퍼즐 조각을 찾아 Drag 후 끼운다.

 

ListPicking Selection 방식은 블루투스 address 가 정해져 있는 것이 아니고 폰화면 메뉴에 주변으로부터 검색된 디바이스들을 대상으로 폰 블루투스 후보로 등록 후 사용자가 선택하는 방식이며 이 이벤트가 성공적으로 실행되면 "Connected" 메세지를 확인할 수 있다.

set ListPicker1 Text to 초록색 세부퍼즐은 ListPicker 에서 찾아서 Drag 하고 후미의 문자열 박스는 Built-in 의 Text를 Drag 한 후 자판에서 Connected 를 입력한다.

 

 

11. Button 퍼즐 코딩

블루투스가  연결되었다면 그 다음 단계의 이벤트는 과연 "사용자가 어느 버튼을 터치하는가?" 이다.

이미 아두이노 RCCAR C 코드의 loop 문에서  if 제어문을 사용하여 무선 블루투스로 HC-06 메모리 버퍼에 입력되는 문자가 'F', 'B','L','R','S' 인지 확인하도록 코딩되었으므로 앱 인벤터 코드에서 이 5가지 버튼들에 대한 퍼즐 코딩을 준비하자.

 

 

Button1 에서 금색 when Button1.Click Drag 후 BluetoothClient1에서 보라색 세부퍼즐을 Drag 하자. 후미의 text 는 Built-in 에서 Text 문자열 박스를 가져와 F 를 입력하자. 이런 방식으로 5개의 문자를 전송하기 위한  'F', 'B','L','R','S' 버튼 코딩을 완료한다.

 

 

8. Blocks 퍼즐 앱 코딩에서 미리 보았던 결과를 얻을 수 있으며 다소 공간을 절약하기 위해서는 마우스 오른쪽 버튼을 사용 메뉴에서 Collapse Block 을 클릭하면 압축된 한 줄짜리로 만들 수 있다.

 

 

12. 앱 인벤터 코드 저장 및 Design 으로 전환--> 미완의 속성 처리 실습

Blocks 퍼즐 코딩 저장 및 AI Companion 여기까지 100% 앱인벤터 코드가 완성되었으므로 프로젝트를 저장하고 Designer 를 클릭한 후 AI Companion 단계로 넘어간다.

※ 실습과제: 아직까지 폰 화면의 Text for ListPicker1 버튼의 텍스트 처리가 미완으로 남아 있으므로 각자 Designer에서 해당 속성을 찾아 적절하게 Text 내용을 입력해 보자.

 

13. AI Companion

AI Companion 작업은 반드시 WiFi 환경에서 실행해야 한다. 앱 인벤터 코드를 PC에서 폰으로 넘겨 받아 2시간 약발을 유지하므로 그 상이에 디버깅 작업을 한다. 버그가 없으면 

구글 플레이 스토어(Play Store) 앱을 열어서 MIT A12 Companion을 검색하여 설치한다. 애플 아이폰도 앱 상점에서 비슷한 앱을 찾아 설치할 수 있을 것이다.  다운로드 하여 설치하고 실행하면 아래 오른쪽 앱을 볼 수 있을 것이다.

 

 

scanQR 코드 버튼을 클릭하면 카메라 화면이 나타나 당신의 PC 화면을 볼 수 있을 것이다.

 

이때 아래와 같이 AI Companion 을 선택 클릭하고 기다리면 WiFi 전송가능한 QR 코드가 나타난다.

 

 

PC 화면에 등장한 QR코드에 scanQR 카메라를 들이되면 자동으로 캡춰한  잠시 후 전송된 화면을 볼 수 있을 것이다.

 

 

당신의 안드로이드 폰 화면에 동일한 Viewer 상의 폰을 볼 수 있을 것이다.

 

앱의 작동은 RC CAR BT Pairing을 터치하면 블루투스 주소가 뜬다. 이 주소를 터치하면 연결이되며 HC-06 의 LED 깜빡임이 멈춘다.

 

5개의 키를 터치하여 RC카를 운전해 보도록 한다.

 

14. APK 파일 BUILD(업로딩)에 의한 앱설치

AI Companion 단계에서 버그를 다 잡았다면 Build 를 실시한다. 즉 실행 가능 파일인 APK파일을 넘기는 과정이다.

Build에서 Android App(.apk)를 클릭하자.

 

 

다음같이 Progress Bar 가 나타나고 100% 까지 기다린다.

 

 

마지막으로 Download .apk now 버튼을 클릭한다. 또는 scanQR 버튼을 사용해도 될 것이다.

 

 

안드로이드 폰 내파일로 들어가면 .apk 파일을 모아둔 폴더를 찾을 수 있을 것이다. 

 

모든 작업이 끝났으면 반드시 구글 로그인을 로그아웃 하도록 한다.

 

※ 가급적이면 스스로 코딩 작업을 진행하되 남이 작성한 오픈소스를 가져다 사용하는 기법도 알아두자.

앱인벤터로 편집한 아래의 코드를 다운받아서 클라우드에 위치한 앱인벤터에서 aia 확장자로 처리된 아래의 코드를 업로딩해서 사용해도 무방하다.

 

BTRCCAR.aia

0.04MB