Transcript App Inventor 세미나 준비 2회차
실습하기 앞서서 먼저 1회때 했던 부분중 중요 포인트만 다시 리뷰하자면 1. 먼저 Internet Explorer로는 실행이 안된다.
2. 구글 계정이 필요하다.
3. 와이파이를 이용할 경우 같은 와이파이에 접속 해야한다.
4. MIT AI2 Companion의 어플을 이용하여 프로젝트와 연결 동작을 즉시 확인할 수 있다.
이 4가지만 확인하시고 바로 실습으로 넘어갑니다.
블루투스는 appinventor에서 Connectivity부분에서 가장 먼저 접하면서도 사용하는 부분입니다.
그 중에서도 가장 기본적인 예제로 사용 하는 LED를 제어 하는 것을 해보겠습니다.
저는 그중 제어 하기 쉬운 아두이노와 접목을 해서 제어를 하겠습니다.
먼저 Start new project를 클릭해서 새로운 프로젝트를 만듭니다.
그럼 Designer에서 간단하게 아래에 그림과 같이 만들 것 입니다.
다음 Blocks를 클릭을 해줍니다.
아래의 그림이 appinventor에서의 전체 코드입니다.
아래의 코드가 블루투스를 페어링 하는 부분입니다.
여기서 주의할 점은 appinventor에서 검색을 해주는것이 아니라 이미 페어링을 해놓은 기기만을 검색을 해서 연결을 시켜주는 점입니다.
블루투스와 연결이 되면 BackgroundColor를 이용하여 블 루투스의 연결상태의 여부를 색깔로 확인이 가능합니다.
이 부분은 각각 Button1(led on) Button2(led off)를 클릭 을 하면 블루투스를 통해서 각각 a,b라는 텍스트로 보내는 것 입니다.
텍스트는 원하는데로 바꿔서 보내는게 가능합니다.
마지막으로 Button3(disconnect)를 눌렀을 경우 블루투스 가 해제하는 부분입니다. 연결을 해제하면 다시 빨강으로 돌아와서 현 상태를 가르쳐 줍니다.
다음은 하드웨어인 아두이노를 이용해서 led를 제어를 하 려고 합니다. 아래는 전체 코드입니다.
아래 코드중에서 byte를 주목합시다.
appinventor의 블루투스를 사용할 경우, appinventor에서 는 ASCll코드 byte형식으로 보내게 됩니다.
ASCll 코드표와 appinventor와 아두이노의 코드를 살펴보 면 a가 97, b가 98로 받는것을 확인할 수 있습니다.
2번째로 할 것은 위에서 했던 LED제어의 확장판입니다.
이번엔 직접 입력을 통한 제어가 아닌 음성을 인식을 하여 LED제어를 하는 방법입니다.
또한 이번엔 Section1에서 처럼 텍스트로 보내는 것이 아닌 숫자로 넘겨 보겠습니다.
아래가 디자이너 부분입니다.
아래가 음성인식의 전체 블록도 입니다.
아래의 코드는 위에 설명했듯이 연결이 되면 색으로 알려주 는 코드입니다. 또 이번에는 문자도 변경되는 것을 추가했습 니다.
이 처럼 사용자가 생각하는데로 블록만 추가해서 사용할 수 있는것을 확인 할 수 있습니다.
이 블록은 블루투스로 1Byte의 숫자로 넘겨주는 블록을 사용해서 바로 인식을 합니다.
위에서는 문자로 넘겨줘서 ASCll문자표와 대조를 하였지만 간단하게 블루투스를 실행하고자 할때는 이와 같이 숫자로 넘겨주면 매우 편합니다.
이 부분이 실질적인 음성인식의 시작 부분입니다.
이 SpeechRecognizer는 구글의 음성인식기능을 가져다가 사용하며, appinventor에서는 구글이 제공해주는 음성인식 을 그대로 사용해서 Text로 읽어들입니다.
이 부분이 음성인식의 실행 부분입니다.
음성인식을 통해서 나온 결과값을 result에 저장해서 piece 에 지정한 텍스트와 동일하다면 실행하는 구조를 가집니다.
이 블록도 위에서 작업했던것과 마찬가지로 블루투스의 연결을 끊고 버튼의 B/T의 연결상태의 색상을 변경을해주고 Label의 텍스트도 다시 변경해주는 부분이 되겠습니다.
아래가 이번 아두이노의 전체 코드입니다.
코드자체는 위의 코드와 거의 동일합니다. 다만 위에서는 if문을 사용해서 코드를 작성했고, 이번에는 swich case문을 사용해서 작성을 하였습니다.
아래 2개가 각각 코드에 대응합니다. “온”일 경우 case1이 실행이 되며, “오프”일 경우 case2가 실행이되며, “블링크” 일 경우 case3이 실행이 되는 구조입니다.
이제 직접 실행을 해봐서 동작을 하는 것을 보여 드리겠습 니다.
이번에는 DB를 사용해 보겠습니다.
이번에도 기본적인 것들은 위에서 사용했던 것들을 이용해 서 DB를 이용해 보겠습니다.
DB라고는 하지만 DB의 종류는 2가지가 있습니다. Web에 올라가는 TinyWebDB와 기기 자체내에 저장하는 TinyDB 2가지가 있습니다.
이중 TinyDB를 사용해서 블루투스를 통해서 받은 값의 횟수를 DB에다가 저장하는 것을 보겠습니다.
먼저 DB의 디자이너 부분 입니다.
다음 DB의 전체코드표입니다.
이번에는 먼저 초기화를 해줘야 할것들을 먼저 해줍니다.
데이터의 저장될 장소를 먼저 초기화를 해줍니다.
Clock도 먼저 실행이 안되도록 초기화를 해줍니다.
다음 블루투스와 연결 합니다.
이번에는 조금 독특하게 디자이너 부분에서 미리 안보이게 했다가 연결이 되면 보이도록 하게 했습니다.
다음 그림이 처음 시작화면이고 연결 됬을때의 화면입니다.
그리고 아래의 그림이 처음 디자이너의 화면입니다.
이와 같이 하나의 화면을 Visible을 이용하여 꾸밀수도 있습니다.
이 부분은 마땅한 인터럽트 기능이 없어서 타이머를 사용해 블루투스를 통한 입력을 받는 블록입니다.
그리고 본격적인 DB가 존재하는 타이머가 작동합니다.
이 블록이 타이머의 본체라고 생각하시면 됩니다.
타이머가 동작하면서 블루투스를 통한 입력이 올때까지 계속 대기를 합니다. 다음 ASCll코드의 byte값이 입력되면 여기서는 49=1,50=2가 입력이되면 각각 a1,a2에 +1을 하 여서 DB에 저장하고 Lebel에 DB에 저장된 a1,a2의 값을 출 력을 해주는 블록입니다.
마지막은 이전과 동일하게 블루투스의 해제입니다.
이것도 위에서 보여준것 처럼 Visible을 이용해서 초기의 화면으로 돌아가게 해줍니다.
아래가 이번의 아두이노 코드가 되겠습니다.
이번엔 앱에서 보낸값만 받았다면 이번엔 아두이노쪽에서 값을 보낸상황이 되겠습니다.
이제 직접 동작하는 모습을 보여드리겠습니다. 이와 같이 시리얼쪽에서 블루투스를 통해 앱으로 신호를 보내면 카운 트가 증가하는 것을 확인 할 수가 있습니다.
마지막으로 빛 센서를 수집해서 db에 저장하여 출력하는 예제를 보여드리겠습니다.
먼저 디자이너 블록을 보여드리겠습니다.
다음은 블럭도입니다.
이번에도 맨처음 초기화를 할 블록들 입니다.
아래 보이시는게 DB와 타이머의 초기화 입니다.
블루투스 블록도 입니다.
블루투스의 연결과 해제 블록도가 되겠습니다.
타이머를 조작할 블럭들입니다.
타이머를 시작하는 부분과 종료하는 부분이 되는 블록이 되겠습니다.
아래 블록이 타이머1 현재 데이터를 보내는 값을 확인하기 위해서 따로 만들었습니다.
다음으로 타이머2가 DB에 2초 간격으로 저장이 됩니다.
마지막으로 DB에 저장된 값을 출력을 해주는 블록이 되겠 습니다.
앱에서는 이것으로 완료고 다음 아두이노로 옮기겠습니다.
아래 코드가 아두이노의 소스코드입니다.
아래 그림처럼 아두이노에서 빛 센서의 값을 출력 해줍니다.
이 상태에서 앱의 타이머를 동작시키면 블루투스를 통해 값을 받아서 2초 간격으로 저장을 하게됩니다.
다음 데이터 출력을 눌러주면 DB에 저장되어있던 값들이 표시가 되는 것을 확인 하실 수 있습니다.
Q&A