캡스톤디자인 App Inventor 디지털전자정보계열
앱 인벤터란? MIT 대학 미디어 랩 연구실에서 만든 안드로 이드용 스마트폰 앱 제작하는 블록 프로그래 밍 기법의 비주얼 프로그래밍 도구이다. 스마트폰의 화면을 디자인하고 블록들을 조 립하면 우리가 원하는 앱을 만들 수 있다. 인터넷이 연결된 곳에서는 어디서라도 접속 하여 앱 화면을 직접 디자인하고 프로그래밍 할 수 있다. 구글 크롬 브라우저에서 작동한다. 앱 인벤터 서버에 프로젝트 저장 및 수정
앱 인벤터란? 앱 인벤터 서버에서 앱 개발 작업내용과 프로젝트 를 저장하고 관리 한다. 앱 인벤터에서 개발한 안드로이드용 앱은 웹에 연결된 안드로이드 폰이나 에뮬러이터에서 동작 한다.
앱 인벤터의 작업 App Inventor Designer 앱에서 사용할 구성 요소를 선택하고 배치 App Inventor Blocks Editor 앱의 각 구성 요소들이 어떤 동작을 하는지 규정하 는 믈록 프로그램 작업
앱 인벤터 특징 블록 언어로 매우 쉽고 간단하다. 음성인식 등 막강한 기능을 사용할 수 있다. 다양한 센서(가속도, GPS, 방향)의 활용이 가 능하다. 구글 맵과 연동된다. 진동을 작동한다. 전화걸기를 할 수 있다. 카메라를 제어한다. 스피커 활용한다. 누구나 머리 속에서 상상하던 앱을 만들 수 있게 해준다.
앱 인벤터 2.0 작업 환경 운영체제 MacOS, GNU/Linus, Windows OS와 안드로이 드 기반 웹브라우저 크롬 브라우저, 사파리, 파이어 폭스 브라우저 에서 실행가능 인터넷 익스플로러는 지원하지 않음.
앱 인벤터 활용 전 준비 사항 필수 : 구글(http://google.com) ID 계정 스마트폰에서 계정확인 비밀번호 확인 또는 찾기 스마트폰에서 계정 추가하기 구글 크롬 브라우저 설치 http://google.com/chrome
앱 인벤터 활용 전 준비 사항 안드로이드 스마트 폰에 App 설치 Play store에서 앱인벤터2 검색 MIT AI2 Companion 다운로드 받아서 설치
앱 인벤터 시작 앱 인벤터 시작 http://appinventor.mit.edu 에 접속 [Create] 버튼 클릭
앱 인벤터 시작 앱 인벤터 초기 화면
앱 인벤터 Designer 화면 구성 메뉴 팔레트 속성 뷰어 컴포 넌트 참조 : 프로그래밍과 나
앱 인벤터 Designer 화면 구성 메뉴 표시줄 팔레트 뷰어 컴포넌트 프로퍼티 앱을 저장하거나 불러오기, 테스트해 보기, apk 파일로 만드는 일과 같 이 프로그램의 제작과 관련한 전반적인 기능들을 할 수 있는 메뉴가 있 다. 화면을 구성하는 모든 요소 및 기능들을 나열하고 있는 메뉴이다. 기능과 종류별로 목록화되어 있다. 실제 스마트폰에서 보여지는 화면으로 구성 요소들의 배치 상태를 확인 할 수 있다. 보이지 않는 구성 요소들은 화면 창 아래쪽에 나열된다. 구성 요소가 그룹화되어 나열된다. 삽입된 구성 요소를 삭제하거나 이름을 바꿀 수 있고, 속성을 변경하기 위해 선택할 수도 있다. 구성 요소를 선택하고 Delete를 누르면 구성요소를 삭제할 수 있다. 구성 요소별 세부 속성을 설정하는 부분으로, 크기, 색상, 보이기, Text 등을 설정할 수 있는 부분이다. 참조 : 프로그래밍과 나
앱 인벤터 Component Component란? 앱 인벤터에서 다양한 역할을 수행하는 객체 를 부르는 말이다. 각각의 컴포넌트들의 기능이 모여 하나의 앱 이 만들어진다. 컴포넌트는 디자이너 창의 팔레트(Palette) 영 역에 있고, 프로퍼티(property)에서 크기, 모양, 색상과 같은 속성을 변경할 수 있다. 참조 : 프로그래밍과 나
앱 인벤터 Component Component 종류 User Interface 버튼, 레이블, 텍스트박스와 같이 화면을 구성하는 대부분의 개체들
앱 인벤터 Component Component 종류 Layout 구성 요소를 테이블, 수직, 수평 형식으로 배치 정렬 Media 플레이어, 소리, 카메라, 음성 인식 등의 미디어 구성 요소
앱 인벤터 Component Component 종류 Drawing and Animation 화면 구성을 할 수 있는 캔버스, 공, 스프라이트가 있어요. Sensore 가속 센서, 위치 센서, 기울기 센서, 타이머 등의 스마트폰 센서류
앱 인벤터 Component Component 종류 Social 전화, 이메일, 트위터 등과 연동할 수 있는 기능들 Storage 저장된 데이터를 활용할 수 있는 구성 요소들
앱 인벤터 Component Component 종류 Connectivity 웹서버, 블루투스 연결과 같은 통신 지원 기능 LEGORMINDSTORMSR 레고 마인드 스톰과 연결해 수 제어할 있는 구성 요소들
앱 인벤터 Block s 화면 구성 블록스 메뉴 뷰어 휴지통 오류표시창 참조 : 프로그래밍과 나
앱 인벤터 Block s 화면 구성 블록스 디자이너에서 삽입한 구성 요소들을 프로그래밍하여 제어 할 수 있도록 내장된 블록들이 나열된 패널이다. Component에 따라 내장 블록들이 변한다. 구성 요소 외에도 기본으로 내장된 Built-in 블록도 있다. 뷰어 구성 요소 간의 관계와 동작을 나타내는 스크립트가 보여 지는 공간이다. 블록의 크기가 커지면 자연스럽게 상, 하, 좌, 우로 확장된 다. 오류 표시 창 작성한 블록 명령에 단순 결합 실수 또는 논리적 오류가 있을 때, 경고 메시지를 띄워 디버깅할 수 있도록 도와준다. 휴지통 필요 없는 블록을 드래그하여 삭제할 수 있는 아이콘이다. 한번 삭제하면 복구할 수 없으므로, 신중하게 결정한다. 참조 : 프로그래밍과 나
첫 번째 앱 개발 앱 과제 스마트 폰을 흔들면 대구공업대학교 디지털 전자정보계열입니다. 반갑습니다. 를 말하는 앱 만들기 Project 이름 shacketalk 기능 스마트 폰 흔들기 감지 센서 : 가속도 센서(AcceletermeterSensor) 주어진 문장을 말하기 미디어 : 문장을 말하기(TextToSpeech)
첫 번째 앱 개발 1. Google Chrome 시작 2. Google 개정으로 로그인
첫 번째 앱 개발 3. 앱 인벤터 서버에 접속 http://appinventor.mit.edu 에 접속 4. Create apps!를 누름
첫 번째 앱 개발 5. Start new project를 누름 또는 Projects 메뉴에서 Start new project 6. 프로젝트 이름을 입력하고 OK Project name : shacketalk
첫 번째 앱 개발 7. shacketalk의 빈 Designer 창
첫 번째 앱 개발 8. 가속도 센서 추가하기 SensorsAcceletermetrSensor 뷰어의 sreen1에 끌어 놓으면 하단(non-visible) 으로 자동으로 이동
첫 번째 앱 개발 9. 문장을 말하기 구성 요소 추가하기 MediaTextToSpheech 뷰어의 sreen1에 끌어 놓으면 하단(non-visible)으로 자동으로 이동
첫 번째 앱 개발 10. shacketalk Blocks로 변경
첫 번째 앱 개발 10. 스마트폰이 흔들릴 때 작업 블록 추가 Acceletermetersonsor의 Shacke 작업을 viewer에 끌어 넣기
첫 번째 앱 개발 11. 문장을 소리로 변환하는 작업 블록 추가 TextToSpeech에서 message를 말로 변환하 는 작업을 viewer의 가속도 작업에 붙혀 넣기
첫 번째 앱 개발 12. 문장을 message 블록 추가 Built-in 작업 중 단순히 문장을 입력하는 블 록을 message에 붙혀 넣기
첫 번째 앱 개발 13. Message를 입력 사이에 대구공업대학교 디지털전자정보 계열입니다. 반갑습니다. 를 입력
첫 번째 앱 개발 14. 폰에서 실행하기 : 동일 대역의 WiFi에 연결된 경우 Connect 메뉴 AI Companion 실행 QR 코드(문자 코드)가 생성
첫 번째 앱 개발 15. 폰에서 MIT AI2 Companion 앱 실행 QR 코드를 폰으로 스캔
첫 번째 앱 개발 14와 15 과정 결합 1 2 5연결 4스캔 3
첫 번째 앱 개발 16. 폰에서 실행 폰을 흔들면 대구공업대학교 디지털전자정 보계열입니다. 감사합니다. 소리가 난다
에뮬레이터 사용하기 1. aistarter 프로그램을 다운받아 설치하기 Windows http://appinv.us/aisetup_windows Mac http://appinv.us/aisetup_mac 2. aistarter 실행 우측 화면이 뜨면 성공
에뮬레이터 사용하기 3. 에뮬레이터 실행하기 Connect 메뉴 Emulator 클릭
앱 패키징 앱 인벤터에서 만들어 테스트 한 앱은 MIT AI2 Companion를 종료하면 실행할 수 없다. 앱 인벤터로 만든 앱을 스마트 폰에 설치 확장자.apk 파일로 만들어 스마트 폰에 다운 로드 받아서 실행
앱 패키징.apk 파일 만들기 Build 메뉴 App(save.apk to my computer) 실행 다운로드 폴더에 다운로드 된다. Shacketalk.apk 다운로드된 파일을 폰으로 다운로드 후 설치 폰에 다운로드된 파일을 누르면 앱이 설치된다.