8주차 금고 만들기 응용(블록코딩)
7주차에서 만들었던 금고를 스마트폰 어플리케이션을 이용해 열고, 닫게 만들어 봅시다.
오늘은 직접 스마트폰 어플리케이션을 제작하고 블루투스를 이용하여 아두이노와 통신하여 금고를 제어할 예정입니다.
1. 앱인벤터 사용하기
1-1. 앱인벤터 검색
구글에서 "앱인벤터"를 검색하여 홈페이지를 접속합니다.
- https://appinventor.mit.edu/
1-2. 프로젝트 생성
앱인벤터 사이트에 접속하여 왼쪽 상단에 있는 "Create Apps!"를 클릭하여 프로젝트를 생성합니다.
이때, 프로젝트 생성을 위해서는 google 계정이 필요합니다!
1-3. 새 프로젝트 시작하기
[프로젝트] - [새 프로젝트 시작하기]를 누릅니다.
1-4. 프로젝트 이름 설정
프로젝트 이름을 작성한 후 [확인] 버튼을 눌러 프로젝트를 생성합니다.
이제 프로젝트를 생성했다면 앱인벤터를 이용해 어플리케이션을 만들어 봅시다!
2. AI 컴패니언 사용하기
2-1. 어플리케이션 다운로드
스마트폰, 태블릿의 [Play 스토어]에 접속하여 "MIT AI2 Companion"을 검색하고 다운로드 받습니다.
2-2. QR 코드 생성
[연결] - [AI 컴페니언]을 선택합니다. 선택 후 QR 코드가 생성됩니다.
2-3. 스마트폰으로 QR코드 스캔
설치한 "MIT AI2 Companion" 어플리케이션을 열고 [scan QR code] 버튼을 눌러 생성된 QR코드를 스캔합니다.
QR코드를 스캔하면 스마트폰 또는 태블릿에서 코딩한 결과를 바로 확인할 수 있습니다.
3. 앱인벤터 화면 디자인
3-1. 스크린 제목 변경
스크린 제목을 "금고 제어 어플"로 변경합니다.
3-2. 목록 선택 버튼 추가
- [사용자 인터페이스] - [목록선택버튼]을 화면에 추가합니다.
- 목록선택버튼의 이름을 "블루투스_연결"로 변경합니다.
- 목록선택버튼의 텍스트를 "블루투스 선택"으로 변경합니다.
- 목록선택버튼의 글꼴 크기를 "30"으로 변경합니다.
- 목록선택버튼의 너비를 "부모 요소에 맞추기"로 변경합니다.
- 목록선택버튼의 이름을 "블루투스_연결"로 변경합니다.
3-3. 버튼 추가
- [사용자 인터페이스] - [버튼]을 추가합니다.
- 버튼의 이름을 "버튼_연결_해제"로 변경합니다.
- 버튼의 텍스트를 "블루투스 해제"로 변경합니다.
- 버튼의 글꼴 크기를 "!5"로 변경합니다.
- 버튼의 너비를 "부모 요소에 맞추기"로 변경합니다.
3-4. 수평배치 추가
- [레이아웃] - [수평배치]를 추가합니다. 수평배치 레이아웃은 여러 컴포넌트를 수평으로 배치할 수 있습니다.
- 수평배치의 너비를 "부모 요소에 맞추기"로 변경합니다.
3-5. 버튼 추가
- [수평배치] 안에 [사용자 인터페이스] - [버튼]을 2개 추가합니다.
- 버튼 이름을 "버튼_LED_켜기", "버튼_LED_끄기"로 변경합니다.
- 버튼의 텍스트를 "LED켜기", "LED끄기"로 변경합니다.
- 모든 버튼의 글꼴 크기를 "30"으로 변경합니다.
- 모든 버튼의 너비를 "부모 요소에 맞추기"로 변경합니다.
3-6. 블루투스클라이언트 추가
- [연결] - [블루투스클라이언트]를 추가합니다.
4. 앱인벤터 코딩하기
4-1. 블루투스 회로 연결
먼저 스마트폰에 블루투스를 등록해야 합니다. 아두이노에 블루투스 모듈을 연결하고 전원을 꽂아주세요.
| 블루투스 센서 | 아두이노 |
| VCC(5V) | 5V |
| GND | GND |
| RX | 12 |
| TX | 13 |
전원을 꽂고 블루투스의 LED가 "깜빡깜빡" 켜지고 꺼지는 모습을 확인하세요.
4-2. 블루투스 등록하기
스마트폰의 블루투스 설정에서 연결이 가능한 기기를 찾습니다.
이름이 "HC-06"인 기기를 클릭하여 연결합니다.
비밀번호는 "0000" 또는 "1234"입니다.
4-3. 앱인벤터 코딩
| 1. 블루투스 목록, 연결하기 | |
| 설명 | 블루투스 선택 버튼을 누르면 스마트폰에 등록된 블루투스를 목록에 나타냅니다.
목록에서 원하는 블루투스 기기를 선택하여 스마트폰과 연결하는 코드입니다. |
| 실행 | 목록에서 HC06을 선택하여 블루투스를 연결해 보세요. 블루투스가 연결되면 블루투스 센서의 LED의 빛이 계속 켜진 채 유지됩니다. |
| 2. 블루투스 연결 해제 | |
| 설명 | 블루투스 해제 버튼을 누르면 현재 연결된 블루투스 기기와의 연결을 해제합니다. |
| 실행 | 블루투스 끊기 버튼을 눌러 블루투스가 해제되는지 확인하세요. 블루투스 연결이 해제되면 블루투스 센서의 LED가 다시 깜빡거리게 됩니다. |
| 3. 블루투스를 이용해 아두이노로 텍스트 보내기 | |
| 설명 | 블루투스로 연결된 아두이노 보드로 버튼이 클릭 될 때 텍스트를 보냅니다.
LED 켜기 버튼이 눌리면 '1', LED 끄기 버튼이 눌리면 '0' 텍스트를 보내 LED를 제어해 봅시다. |
| 실행 | |
5. 아두이노 코딩하기
5-1. 확장 기능 추가
mBlock 홈페이지로 돌아와 "확장" 버튼을 클릭합니다.
검색 기능을 이용해 "PCM"라고 작성한 후 "HC-05 Bluetooth PCM"를 찾아 [추가] 버튼을 누릅니다.
5-2. 블루투스 데이터 받아와 LED 켜기
[블루투스데이터]라는 변수를 생성합니다. 연결한 블루투스 센서가 받아오는 데이터가 있다면 값을 읽어와 변수에 저장합니다.
저장된 변수의 값을 비교하여 LED를 제어합니다.
★ 블루투스 데이터를 '1', '0'으로 송신했지만 mBlock에서 수신할 때는 문자가 아닌 숫자 코드로 받아오게 됩니다!
| 1 | 0 |
|---|---|
| 49 | 48 |
아두이노에서 연결한 블루투스 센서가 받아오는 데이터가 있다면 값을 읽어와 변수에 저장합니다.
저장된 변수의 값을 비교하여 LED를 제어합니다.
//코드넣기
6. 금고에 블루투스 모듈 연결하기
저번 시간 완성했던 금고에 블루투스 모듈을 연결하여 스마트폰을 이용해 금고를 열 수 있도록 코딩해봅시다.
앱인벤터 화면 디자인도 변경하여 LED 켜기, LED 끄기를 "금고 열기", "금고 닫기"로 변경해 주세요.