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. 목록 선택 버튼 추가

• [사용자 인터페이스] - [목록선택버튼]을 화면에 추가합니다.
  1. 목록선택버튼의 이름을 "블루투스_연결"로 변경합니다.
  2. 목록선택버튼의 텍스트를 "블루투스 선택"으로 변경합니다.
  3. 목록선택버튼의 글꼴 크기를 "30"으로 변경합니다.
  4. 목록선택버튼의 너비를 "부모 요소에 맞추기"로 변경합니다.

3-3. 버튼 추가

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

3-4. 수평배치 추가

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

3-5. 버튼 추가

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

3-6. 블루투스클라이언트 추가

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