디지털 공학

Size: px

Start display at page:

Download "디지털 공학"

불현 강
8 years ago
Views:

1 캡스톤디자인 App Inventor 디지털전자정보계열

2 앱 인벤터란? MIT 대학 미디어 랩 연구실에서 만든 안드로 이드용 스마트폰 앱 제작하는 블록 프로그래 밍 기법의 비주얼 프로그래밍 도구이다. 스마트폰의 화면을 디자인하고 블록들을 조 립하면 우리가 원하는 앱을 만들 수 있다. 인터넷이 연결된 곳에서는 어디서라도 접속 하여 앱 화면을 직접 디자인하고 프로그래밍 할 수 있다. 구글 크롬 브라우저에서 작동한다. 앱 인벤터 서버에 프로젝트 저장 및 수정

3 앱 인벤터란? 앱 인벤터 서버에서 앱 개발 작업내용과 프로젝트 를 저장하고 관리 한다. 앱 인벤터에서 개발한 안드로이드용 앱은 웹에 연결된 안드로이드 폰이나 에뮬러이터에서 동작 한다.

4 앱 인벤터의 작업 App Inventor Designer 앱에서 사용할 구성 요소를 선택하고 배치 App Inventor Blocks Editor 앱의 각 구성 요소들이 어떤 동작을 하는지 규정하 는 믈록 프로그램 작업

5 앱 인벤터 특징 블록 언어로 매우 쉽고 간단하다. 음성인식 등 막강한 기능을 사용할 수 있다. 다양한 센서(가속도, GPS, 방향)의 활용이 가 능하다. 구글 맵과 연동된다. 진동을 작동한다. 전화걸기를 할 수 있다. 카메라를 제어한다. 스피커 활용한다. 누구나 머리 속에서 상상하던 앱을 만들 수 있게 해준다.

6 앱 인벤터 2.0 작업 환경 운영체제 MacOS, GNU/Linus, Windows OS와 안드로이 드 기반 웹브라우저 크롬 브라우저, 사파리, 파이어 폭스 브라우저 에서 실행가능 인터넷 익스플로러는 지원하지 않음.

7 앱 인벤터 활용 전 준비 사항 필수 : 구글( ID 계정 스마트폰에서 계정확인 비밀번호 확인 또는 찾기 스마트폰에서 계정 추가하기 구글 크롬 브라우저 설치

8 앱 인벤터 활용 전 준비 사항 안드로이드 스마트 폰에 App 설치 Play store에서 앱인벤터2 검색 MIT AI2 Companion 다운로드 받아서 설치

9 앱 인벤터 시작 앱 인벤터 시작 에 접속 [Create] 버튼 클릭

10 앱 인벤터 시작 앱 인벤터 초기 화면

11 앱 인벤터 Designer 화면 구성 메뉴 팔레트 속성 뷰어 컴포 넌트 참조 : 프로그래밍과 나

12 앱 인벤터 Designer 화면 구성 메뉴 표시줄 팔레트 뷰어 컴포넌트 프로퍼티 앱을 저장하거나 불러오기, 테스트해 보기, apk 파일로 만드는 일과 같 이 프로그램의 제작과 관련한 전반적인 기능들을 할 수 있는 메뉴가 있 다. 화면을 구성하는 모든 요소 및 기능들을 나열하고 있는 메뉴이다. 기능과 종류별로 목록화되어 있다. 실제 스마트폰에서 보여지는 화면으로 구성 요소들의 배치 상태를 확인 할 수 있다. 보이지 않는 구성 요소들은 화면 창 아래쪽에 나열된다. 구성 요소가 그룹화되어 나열된다. 삽입된 구성 요소를 삭제하거나 이름을 바꿀 수 있고, 속성을 변경하기 위해 선택할 수도 있다. 구성 요소를 선택하고 Delete를 누르면 구성요소를 삭제할 수 있다. 구성 요소별 세부 속성을 설정하는 부분으로, 크기, 색상, 보이기, Text 등을 설정할 수 있는 부분이다. 참조 : 프로그래밍과 나

13 앱 인벤터 Component Component란? 앱 인벤터에서 다양한 역할을 수행하는 객체 를 부르는 말이다. 각각의 컴포넌트들의 기능이 모여 하나의 앱 이 만들어진다. 컴포넌트는 디자이너 창의 팔레트(Palette) 영 역에 있고, 프로퍼티(property)에서 크기, 모양, 색상과 같은 속성을 변경할 수 있다. 참조 : 프로그래밍과 나

14 앱 인벤터 Component Component 종류 User Interface 버튼, 레이블, 텍스트박스와 같이 화면을 구성하는 대부분의 개체들

15 앱 인벤터 Component Component 종류 Layout 구성 요소를 테이블, 수직, 수평 형식으로 배치 정렬 Media 플레이어, 소리, 카메라, 음성 인식 등의 미디어 구성 요소

16 앱 인벤터 Component Component 종류 Drawing and Animation 화면 구성을 할 수 있는 캔버스, 공, 스프라이트가 있어요. Sensore 가속 센서, 위치 센서, 기울기 센서, 타이머 등의 스마트폰 센서류

17 앱 인벤터 Component Component 종류 Social 전화, 이메일, 트위터 등과 연동할 수 있는 기능들 Storage 저장된 데이터를 활용할 수 있는 구성 요소들

18 앱 인벤터 Component Component 종류 Connectivity 웹서버, 블루투스 연결과 같은 통신 지원 기능 LEGORMINDSTORMSR 레고 마인드 스톰과 연결해 수 제어할 있는 구성 요소들

19 앱 인벤터 Block s 화면 구성 블록스 메뉴 뷰어 휴지통 오류표시창 참조 : 프로그래밍과 나

20 앱 인벤터 Block s 화면 구성 블록스 디자이너에서 삽입한 구성 요소들을 프로그래밍하여 제어 할 수 있도록 내장된 블록들이 나열된 패널이다. Component에 따라 내장 블록들이 변한다. 구성 요소 외에도 기본으로 내장된 Built-in 블록도 있다. 뷰어 구성 요소 간의 관계와 동작을 나타내는 스크립트가 보여 지는 공간이다. 블록의 크기가 커지면 자연스럽게 상, 하, 좌, 우로 확장된 다. 오류 표시 창 작성한 블록 명령에 단순 결합 실수 또는 논리적 오류가 있을 때, 경고 메시지를 띄워 디버깅할 수 있도록 도와준다. 휴지통 필요 없는 블록을 드래그하여 삭제할 수 있는 아이콘이다. 한번 삭제하면 복구할 수 없으므로, 신중하게 결정한다. 참조 : 프로그래밍과 나

21 첫 번째 앱 개발 앱 과제 스마트 폰을 흔들면 대구공업대학교 디지털 전자정보계열입니다. 반갑습니다. 를 말하는 앱 만들기 Project 이름 shacketalk 기능 스마트 폰 흔들기 감지 센서 : 가속도 센서(AcceletermeterSensor) 주어진 문장을 말하기 미디어 : 문장을 말하기(TextToSpeech)

22 첫 번째 앱 개발 1. Google Chrome 시작 2. Google 개정으로 로그인

23 첫 번째 앱 개발 3. 앱 인벤터 서버에 접속 에 접속 4. Create apps!를 누름

24 첫 번째 앱 개발 5. Start new project를 누름 또는 Projects 메뉴에서 Start new project 6. 프로젝트 이름을 입력하고 OK Project name : shacketalk

25 첫 번째 앱 개발 7. shacketalk의 빈 Designer 창

26 첫 번째 앱 개발 8. 가속도 센서 추가하기 SensorsAcceletermetrSensor 뷰어의 sreen1에 끌어 놓으면 하단(non-visible) 으로 자동으로 이동

27 첫 번째 앱 개발 9. 문장을 말하기 구성 요소 추가하기 MediaTextToSpheech 뷰어의 sreen1에 끌어 놓으면 하단(non-visible)으로 자동으로 이동

28 첫 번째 앱 개발 10. shacketalk Blocks로 변경

29 첫 번째 앱 개발 10. 스마트폰이 흔들릴 때 작업 블록 추가 Acceletermetersonsor의 Shacke 작업을 viewer에 끌어 넣기

30 첫 번째 앱 개발 11. 문장을 소리로 변환하는 작업 블록 추가 TextToSpeech에서 message를 말로 변환하 는 작업을 viewer의 가속도 작업에 붙혀 넣기

31 첫 번째 앱 개발 12. 문장을 message 블록 추가 Built-in 작업 중 단순히 문장을 입력하는 블 록을 message에 붙혀 넣기

32 첫 번째 앱 개발 13. Message를 입력 사이에 대구공업대학교 디지털전자정보 계열입니다. 반갑습니다. 를 입력

33 첫 번째 앱 개발 14. 폰에서 실행하기 : 동일 대역의 WiFi에 연결된 경우 Connect 메뉴 AI Companion 실행 QR 코드(문자 코드)가 생성

34 첫 번째 앱 개발 15. 폰에서 MIT AI2 Companion 앱 실행 QR 코드를 폰으로 스캔

35 첫 번째 앱 개발 14와 15 과정 결합 1 2 5연결 4스캔 3

36 첫 번째 앱 개발 16. 폰에서 실행 폰을 흔들면 대구공업대학교 디지털전자정 보계열입니다. 감사합니다. 소리가 난다

에뮬레이터 사용하기 1. aistarter 프로그램을 다운받아 설치하기 Windows http://appinv.

37 에뮬레이터 사용하기 1. aistarter 프로그램을 다운받아 설치하기 Windows Mac 2. aistarter 실행 우측 화면이 뜨면 성공

38 에뮬레이터 사용하기 3. 에뮬레이터 실행하기 Connect 메뉴 Emulator 클릭

39 앱 패키징 앱 인벤터에서 만들어 테스트 한 앱은 MIT AI2 Companion를 종료하면 실행할 수 없다. 앱 인벤터로 만든 앱을 스마트 폰에 설치 확장자.apk 파일로 만들어 스마트 폰에 다운 로드 받아서 실행

40 앱 패키징.apk 파일 만들기 Build 메뉴 App(save.apk to my computer) 실행 다운로드 폴더에 다운로드 된다. Shacketalk.apk 다운로드된 파일을 폰으로 다운로드 후 설치 폰에 다운로드된 파일을 누르면 앱이 설치된다.

02 앱을실행하는 3 가지방법 Mobile Apps >> 앱인벤터로작성한앱은다음과같은 3가지의방법으로실행이가능하다. 만약사용자가스마트폰이있고와이파이를사용하고있다면작성한앱을바로실행하여볼수있다. 가장바람직한방법이다. 스마트폰에구글 Play 스토어를통하여 App Invent

02 앱을실행하는 3 가지방법 Mobile Apps >> 앱인벤터로작성한앱은다음과같은 3가지의방법으로실행이가능하다. 만약사용자가스마트폰이있고와이파이를사용하고있다면작성한앱을바로실행하여볼수있다. 가장바람직한방법이다. 스마트폰에구글 Play 스토어를통하여 App Invent Chapter 02 앱인벤터소개 모바일앱개발과정에항상 사용자인터페이스작성단계 와 알고리즘작성단계 가있다는것을학습한다. 구글 Play 스토어에서 AI2 Companion을설치한다. Speak 예제를작성하고실행한다. 실습 01: 인터페이스작성하기 실습 02: 와이파이로앱실행하기 실습 03: 컴포넌트의속성변경하기 실습 04: 컴포넌트의코드블록추가하기 실습 05: