View source for 8주차 금고 만들기 응용(블록코딩)

7주차에서 만들었던 금고를 스마트폰 어플리케이션을 이용해 열고, 닫게 만들어 봅시다.

오늘은 직접 스마트폰 어플리케이션을 제작하고 블루투스를 이용하여 아두이노와 통신하여 금고를 제어할 예정입니다.

=== 1. 앱인벤터 사용하기 ===

==== 1-1. 앱인벤터 검색 ====
[[파일:앱인벤터1.png|프레임없음|570x570픽셀]]

구글에서 "앱인벤터"를 검색하여 홈페이지를 접속합니다.

* <nowiki>https://appinventor.mit.edu/</nowiki>

==== 1-2. 프로젝트 생성 ====
[[파일:앱인벤터2.png|프레임없음|387x387픽셀]]

앱인벤터 사이트에 접속하여 왼쪽 상단에 있는 "Create Apps!"를 클릭하여 프로젝트를 생성합니다. 

이때, 프로젝트 생성을 위해서는 google 계정이 필요합니다!

==== 1-3. 새 프로젝트 시작하기 ====
[[파일:앱인벤터3.png|프레임없음|462x462픽셀]]

[프로젝트] - [새 프로젝트 시작하기]를 누릅니다.

==== 1-4. 프로젝트 이름 설정 ====
[[파일:앱인벤터4.png|프레임없음|360x360픽셀]]

프로젝트 이름을 작성한 후 [확인] 버튼을 눌러 프로젝트를 생성합니다.

이제 프로젝트를 생성했다면 앱인벤터를 이용해 어플리케이션을 만들어 봅시다!

=== 2. AI 컴패니언 사용하기 ===

==== 2-1. 어플리케이션 다운로드 ====
[[파일:앱인벤터5.png|프레임없음|441x441픽셀]]

스마트폰, 태블릿의 [Play 스토어]에 접속하여 "MIT AI2 Companion"을 검색하고 다운로드 받습니다.

==== 2-2. QR 코드 생성 ====
[[파일:앱인벤터6.png|프레임없음|614x614픽셀]]

[연결] - [AI 컴페니언]을 선택합니다. 선택 후 QR 코드가 생성됩니다.

==== 2-3. 스마트폰으로 QR코드 스캔 ====
[[파일:앱인벤터7.png|프레임없음|436x436픽셀]]

설치한 "MIT AI2 Companion" 어플리케이션을 열고 [scan QR code] 버튼을 눌러 생성된 QR코드를 스캔합니다.

QR코드를 스캔하면 스마트폰 또는 태블릿에서 코딩한 결과를 바로 확인할 수 있습니다.

=== 3. 앱인벤터 화면 디자인 ===

==== 3-1. 스크린 제목 변경 ====
[[파일:앱인벤터8.png|프레임없음|448x448픽셀]]스크린 제목을 "금고 제어 어플"로 변경합니다.

==== 3-2. 목록 선택 버튼 추가 ====
[[파일:앱인벤터9.png|프레임없음|526x526픽셀]]

* [사용자 인터페이스] - [목록선택버튼]을 화면에 추가합니다.
*# 목록선택버튼의 이름을 "블루투스_연결"로 변경합니다. [[파일:앱인벤터12.png|프레임없음]]
*# 목록선택버튼의 텍스트를 "블루투스 선택"으로 변경합니다. [[파일:앱인벤터11.png|프레임없음]]
*# 목록선택버튼의 글꼴 크기를 "30"으로 변경합니다. [[파일:앱인벤터10.png|프레임없음]]
*# 목록선택버튼의 너비를 "부모 요소에 맞추기"로 변경합니다. [[파일:앱인벤터13.png|프레임없음]]

==== 3-3. 버튼 추가 ====
[[파일:앱인벤터14.png|프레임없음|618x618픽셀]]

* [사용자 인터페이스] - [버튼]을 추가합니다.
*# 버튼의 이름을 "버튼_연결_해제"로 변경합니다.
*# 버튼의 텍스트를 "블루투스 해제"로 변경합니다.
*# 버튼의 글꼴 크기를 "!5"로 변경합니다.
*# 버튼의 너비를 "부모 요소에 맞추기"로 변경합니다.

==== 3-4. 수평배치 추가 ====
[[파일:앱인벤터15.png|프레임없음|594x594픽셀]]

* [레이아웃] - [수평배치]를 추가합니다. 수평배치 레이아웃은 여러 컴포넌트를 수평으로 배치할 수 있습니다.
*# 수평배치의 너비를 "부모 요소에 맞추기"로 변경합니다.

==== 3-5. 버튼 추가 ====
[[파일:앱인벤터16.png|프레임없음|652x652픽셀]]

* [수평배치] 안에 [사용자 인터페이스] - [버튼]을 2개 추가합니다.
*# 버튼 이름을 "버튼_LED_켜기", "버튼_LED_끄기"로 변경합니다.
*# 버튼의 텍스트를 "LED켜기", "LED끄기"로 변경합니다.
*# 모든 버튼의 글꼴 크기를 "30"으로 변경합니다.
*# 모든 버튼의 너비를 "부모 요소에 맞추기"로 변경합니다.

==== 3-6. 블루투스클라이언트 추가 ====
[[파일:앱인벤터17.png|프레임없음|589x589픽셀]]

* [연결] - [블루투스클라이언트]를 추가합니다.

=== 4. 앱인벤터 코딩하기 ===

==== 4-1. 블루투스 회로 연결 ====
[[파일:앱인벤터18.png|프레임없음|545x545픽셀]]

먼저 스마트폰에 블루투스를 등록해야 합니다. 아두이노에 블루투스 모듈을 연결하고 전원을 꽂아주세요.
{| class="wikitable"
|블루투스 센서
|아두이노
|-
|VCC(5V)
|5V
|-
|GND
|GND
|-
|RX
|12
|-
|TX
|13
|}
전원을 꽂고 블루투스의 LED가 "깜빡깜빡" 켜지고 꺼지는 모습을 확인하세요.
[[파일:앱인벤터19.png|프레임없음]]

==== 4-2. 블루투스 등록하기 ====
[[파일:앱인벤터20.png|프레임없음|472x472픽셀]]

스마트폰의 블루투스 설정에서 연결이 가능한 기기를 찾습니다.

이름이 "HC-06"인 기기를 클릭하여 연결합니다.

비밀번호는 "0000" 또는 "1234"입니다.

==== 4-3. 앱인벤터 코딩 ====
{| class="wikitable sortable"
| colspan="2" |1. 블루투스 목록, 연결하기
|-
|설명 
|블루투스 선택 버튼을 누르면 스마트폰에 등록된 블루투스를 목록에 나타냅니다.

목록에서 원하는 블루투스 기기를 선택하여 스마트폰과 연결하는 코드입니다.
|-
|실행
|목록에서 HC06을 선택하여 블루투스를 연결해 보세요. 블루투스가 연결되면 블루투스 센서의 LED의 빛이 계속 켜진 채 유지됩니다.
|}
[[파일:앱인벤터21.png|프레임없음|655x655픽셀]]
{| class="wikitable"
| colspan="2" |2. 블루투스 연결 해제
|-
|설명 
|블루투스 해제 버튼을 누르면 현재 연결된 블루투스 기기와의 연결을 해제합니다.
|-
|실행
|블루투스 끊기 버튼을 눌러 블루투스가 해제되는지 확인하세요. 블루투스 연결이 해제되면 블루투스 센서의 LED가 다시 깜빡거리게 됩니다.
|}
[[파일:앱인벤터22.png|프레임없음|568x568픽셀]]
{| class="wikitable"
| colspan="2" |3. 블루투스를 이용해 아두이노로 텍스트 보내기
|-
|설명
|블루투스로 연결된 아두이노 보드로 버튼이 클릭 될 때 텍스트를 보냅니다.

LED 켜기 버튼이 눌리면 '1', LED 끄기 버튼이 눌리면 '0' 텍스트를 보내 LED를 제어해 봅시다.
|-
|실행
|
|}
[[파일:앱인벤터23.png|프레임없음|651x651픽셀]]

=== 5. 아두이노 코딩하기 ===

==== 5-1. 확장 기능 추가 ====
mBlock 홈페이지로 돌아와 "확장" 버튼을 클릭합니다.

검색 기능을 이용해 "PCM"라고 작성한 후 "HC-05 Bluetooth PCM"를 찾아 [추가] 버튼을 누릅니다.

[[파일:Blue.png|프레임없음|740x740픽셀]]

==== 5-2. 블루투스 데이터 받아와 LED 켜기 ====
[블루투스데이터]라는 변수를 생성합니다. 연결한 블루투스 센서가 받아오는 데이터가 있다면 값을 읽어와 변수에 저장합니다. 

저장된 변수의 값을 비교하여 LED를 제어합니다.

★ 블루투스 데이터를 '1', '0'으로 송신했지만 mBlock에서 수신할 때는 문자가 아닌 숫자 코드로 받아오게 됩니다! 
{| class="wikitable"
|+데이터
!1
!0
|-
|49
|48
|}
아두이노에서 연결한 블루투스 센서가 받아오는 데이터가 있다면 값을 읽어와 변수에 저장합니다.

저장된 변수의 값을 비교하여 LED를 제어합니다.
<div class="coders70">
<youtube>9VjzmpnozZA</youtube>
</div>[[파일:Bluetooth block.png|프레임없음|597x597픽셀]]

=== 6. 금고에 블루투스 모듈 연결하기 ===
저번 시간 완성했던 금고에 블루투스 모듈을 연결하여 스마트폰을 이용해 금고를 열 수 있도록 코딩해봅시다.

앱인벤터 화면 디자인도 변경하여 LED 켜기, LED 끄기를 "금고 열기", "금고 닫기"로 변경해 주세요.



<div class="coders70">
<youtube>bNYAjkgf8F4</youtube>
</div>