IoT의 이해
전병현 교수
11주차 2강. 앱 인벤터 시작과 실행
학습내용
학습목표
1. 앱 인벤터 시작 2. 블록 실습하기 3. 앱 테스트
1. 앱 인벤터에 대하여 설명할 수 있다.
2. 블록을 조립하고, 활용할 수 있다.
3. 앱 인벤터를 실행하여 앱을 테스트할 수 있다.
1. 앱 인벤터 시작(1)
◉
시작 화면
• 구글 크롬 검색 엔진에서
“앱 인벤터” 검색
• 앱 만들기 버턴 클릭
1. 앱 인벤터 시작(2)
◉
프로젝트 관리
• 프로젝트 시작하기 화면과 작성된 프로젝트 리스트를 보여 줌
• 프로젝트 실행과 QR 코드를 작성함
• 영문 또는 한글 전환
1. 앱 인벤터 시작(3)
◉
앱 디자인
• 팔레트(도구모음) : 앱 화면 디자인 도구를 뷰어에 끌어다 놓음
• 뷰 : 뷰어에 배치된 도구를 선택하고, 속성을 설정함
• 블록 : 우측 상단에 블록 버튼을 클릭해서 코딩함
2. 블록 실습하기(1)
◉
코딩 및 블록 설정
이벤트 블럭
값 블럭
값 지정 블럭
• 이벤트 블록 : 특정 이벤트가 발생했을 때 호출되는 블록
• 값 블록 : 배경색이나 특정한 값을 표시
• 값 지정 블록 : 배경색이나 컴포넌트 속성 값을 지정
끌기
2. 블록 실습하기(2)
◉
컴포넌트 활용
• 사용하고자 하는 컴포넌트를 선택하고 뷰어에 끌어다 놓음
• 우측 컴포넌트 창에 추가
2. 블록 실습하기(3)
◉
블록 조립(1)
• 가속기 컴포넌트와 음성_변환1 컴포넌트를 선택하고, 조립
2. 블록 실습하기(4)
◉
블록 조립(2)
• 블록 영역에 “텍스트”와 “지정하기 텍스트 상자1”을 선택
• 공통 블록에 텍스트를 선택한 다음 컴포넌트를 선택
• 선택된 컴포넌트를 결합하고, 텍스트에 “안녕하세요” 입력
3.앱 테스트(1)
◉
앱 테스트
• A1 컴페니언 : QR코드를 작성하여 안드로이드 폰에서 앱 인벤터에 접속하여 실행
• 에뮬레이터 : PC에서 에뮬레이터 프로그램을 활용하여 실행
• USB : PC와 USB를 활용하여 실행
3.앱 테스트(2)
◉
QR 코드 작성
• A1 컴페니언으로 실행하면 QR 코드를 제공
3.앱 테스트(3)
◉
와이파이로 실시간 테스트
• MIT AI2 Companion 앱 실행 후 Scan QR code 버턴 클릭
• QR 코드를 촬영 → 실행
3.앱 테스트(4)
◉
에뮬레이터 다운로드
• 다운로드
http://appinventor.mit.edu/explore/ai2/windows.html
학습하기가 끝났습니다.
다음페이지 버튼을 클릭하여
평가문항을 풀어보세요. 프로그램 실습
※ 자료실에서 프로그램 소스 코드를 다운로드 받으세요.
실습
1. 앱 인벤터 시작(1)
1. 크롬 웹 브라우저를 실행한다.
2. 구글 검색 엔진에서 “앱 인벤터”를 검색한다.
3. 사용자 등록과 로그인 한다.(한글 사용 시 번역 버튼을 클릭)
◉
시작하기
실습
1. 앱 인벤터 시작(2)
1. 프로젝트 시작하기 화면과 작성된 프로젝트 리스트를 보여 준다.
2. 메뉴에는 새 프로젝트 작성, 연결, 빌드, 도움말, 내 프로젝트, 갤러리, 가이드, 문제 보고, 한국어 등의 메뉴가 있다.
◉
메뉴 사용
실습
1. 앱 인벤터 시작(3)
1. 팔레트(도구모음) : 앱 화면 디자인 도구를 뷰어에 끌어다 놓음 2. 뷰 : 뷰어에 배치된 도구를 선택하고, 속성을 설정함
3. 블록 : 우측 상단에 블록 버튼을 클릭해서 코딩 4. 컴포넌트 : 뷰어에 작성된 컴포넌트를 관리 5. 속성 : 각 컴포넌트에 대한 속성 값 지정
◉
전체 화면 구성
실습
2. 블록 실습하기(1)
1. 원하는 컴포넌트를 선택하고 뷰어에 끌어다 놓는다.
2. 버튼, 가속 센서, 음성 변환 컴포넌트를 뷰어에 끌어다 놓고, 컴포넌트에서 이름 등을 수정한다.
3. 각 컴포넌트에 대한 속성 값을 설정한다.
◉
가속기 디자인
실습
2. 블록 실습하기(2)
1. 블록 화면에는 공통 블록, Screen 컴포넌트, 모든 컴포넌트, 경고 보이기, 가방, 휴지통 등이 있다.
2. 공통 블록에는 제어, 논리, 수학, 텍스트, 리스트, 색상, 변수, 함수 등이 있다.
◉
블록 조립(1)
실습
2. 블록 실습하기(3)
3. 가속기 컴포넌트를 선택하면, 가속기 센서의 블록이 나타난다.
4. 가속기 센서의 블록에서 가속기가 흔들릴 때 이벤트를 처리한다.
5. 가속기 센서를 끌어다 놓는다.
◉
블록 조립(2)
실습
2. 블록 실습하기(4)
6. 음성 변환 컴포넌트를 선택하고, 음성 변환 블록을 선택하여 조립한다.
◉
블록 조립(3)
실습
2. 블록 실습하기(5)
7. 텍스트 블록에서 비어 있는 텍스트 블록을 조립한다.
8. 비어 있는 텍스 블록에 “주소를 입력한다”라는 문자를 입력한다.
◉
블록 조립(4)
실습
2. 블록 실습하기(6)
1. 연결에서 AI 컴패니언을 선택하여, QR코드를 작성한다.
◉
QR코드 작성
실습
3. 앱 테스트(1)
1. 스마트 폰 MI AI2 앱을 실행하여 QR코드를 읽는다.
◉
실행하기(1)
실습
3. 앱 테스트(2)
2. 스마트 폰을 흔들면 텍스트의 내용을 읽어 준다.
◉
실행하기(2)
실습점검
실습 재미있게 해보셨나요?
‘앱 인벤터 시작과 실행’에 대해 실습한 내용과 자신의 실습 결과물을 비교해 보세요.
1. 앱 인벤터에 대해 설명할 수 있나요?
2. 블록 실습하기의 컴포넌트와 블록에 대해 설명할 수 있나요?
3. 앱 테스트를 할 수 있나요?
예 예 예
아니오 아니오 아니오
실습점검
1. 앱 인벤터 시작
- 크롬 웹 브라우저와 구글 계정이 있는지 확인
- 앱 인벤터 사이트를 접속, 메뉴 구성과 사용법 파악 2. 앱 인벤터 블록 실습
- 화면 디자인과 컴포넌트 속성 파악
- 블록 화면 구성요소의 사용법 파악하고, 블록 조립 방법 숙달 - 컴포넌트를 활용하여 실습이 정상적으로 작동하는지를 확인 3. 앱 테스트
- 가속기 센서를 활용한 앱을 작성법 숙달
- 만들어진 앱의 QR 코드를 스마트 폰으로 스캔
- 스마트폰을 흔들어 입력된 내용을 음성으로 변환하여 출력
◉
교수자 실습 Tip
다음시간에는…
에 대해 학습해 보겠습니다.
참고문헌
11주차. 앱 인벤터의 이해
3강. 팔레트의 기능
• 앱인벤터. http://appinventor.mit.edu
