라즈이노 iOT

【 앱인벤터기초 #04】 앱인벤터 1도 모르고 따라 하기실습#2(화면 이동 예제만들기) 

App-Inventor !

[ 학습 목차 ]  

1. 예제 만들기 #1 :  "예제1 : 두 개의 화면을 버튼 클릭하여 이동하기"

2. 제작앱 확인하기 (스마트폰에 설치 및 실행 또는 에뮬레이터로 확인)

[ 다음시간 학습 목차 ]

1. 예제 만들기 #2 :  "예제2 : 체크박스, 날짜-시간 선택메뉴 활용하기"

2. 날짜 선택(DatePicker) 블록을 이용하여 날짜를 선택하고 레이블로 표시하기

3. 시간 선택(TimePicker) 블록을 이용하여 시간을 선택하고 레이블로 표시하기

4. 체크박스(CheckBox) 블록을 이용하여 선택 표시하기

5. 제작앱 확인하기 (스마트폰에 설치 및 실행 또는 에뮬레이터로 확인)

▶ 선수학습 

   - 【앱인벤터 기초#01】 앱 인벤터란?       ← 클릭 이동

   - 【앱인벤터 기초#02】 앱인벤터 시작하기(설치&셋업)   ← 클릭 이동

   - 【앱인벤터 기초#03】 앱인벤터 영상실습#1 (메뉴소개) ← 클릭 이동

▶  실습 준비사항 

  1. 안드로이드가 탑재된 스마트기기(스마트폰, 스마트패드 등) :  안드로이드OS 버전 4.2 이상 권장

  2. 웹브라우저가 구동가능한 PC(노트북) : 구동가능 웹(크롬, 파이어폭스, 사파리, 우분투웹), 익스플로러는 실행불가!

  3. 구글 계정 필요

▶  오늘의 실습 따라하기 영상 보기 

[ 앱 인벤터 강의 영상 (영상시간: 16분) ]

 : 두 개의 화면을 버튼 클릭하여 이동하기

https://youtu.be/E2ujM5T1HdQ

▶  영상 속 내용 요약 

[ ※ 영상 속에는 앱인벤터에 대한 지식이 없어도 바로 따라 하실 수 있도록 상세히 설명 되어 있으니, 꼭 영상을 보시기 바랍니다 ]

① 1번 화면에 대한 '화면구성요소' 만들기

 : 아래와 같은 화면으로 컴포넌트를 구성하고 배치하세요.(세부 옵션 참조)

② 1번 화면에 대한 '코드 블록'  만들기

 : 아래와 같은 화면으로 코드 블록을 쌓으세요. (영문 메뉴와 한글메뉴 모두 표시하였음)

③ 2번 화면에 대한 '화면구성요소' 만들기

 : 아래와 같은 화면으로 컴포넌트를 구성하고 배치하세요.(세부 옵션 참조)

④ 2번 화면에 대한 '코드 블록'  만들기

 : 아래와 같은 화면으로 코드 블록을 쌓으세요. (영문 메뉴와 한글메뉴 모두 표시하였음)

⑤ QR 코드 스캔하여 테스트 및 앱 설치 파일 다운 받기 

 : AI Companion 메뉴등을 이용하여 작성한 앱을 테스트 할 수 있다.

⑥ 앱을 스마트폰에 설치하고 실행시키기 

 : 아래처럼 스마트 기기에 앱을 다운받아 설치 한 후 실행시켜보자~!  멋지게 동작 할 것이다!

▶  앱인벤트 프로젝트 파일 고대로~ 다운로드 받기!

[ 직접만든 앱이 실행 에러가 나거나, 앱을 바로 확인하고 싶을 때, 아래 프로젝트 파일을 다운받아 여러분의 앱인벤트 프로젝트에서 열기를 하신다면 본 글에서 작업한 프로젝트 그대로 열릴 것입니다 ] 

: 앱인벤터 새프로젝트 화면에서 아래처럼 프로젝트 메뉴에서 다운받은 파일을 삽입해보세요

Projects 》 Import project (.aia) from my computer ...

[ 프로젝트 파일 ]

【 앱인벤터기초 #03】 앱인벤터 따라하기 실습#1(메뉴화면소개 및 사용법) 

App-Inventor !

[ 학습 목차 ]  

1. 앱-인벤터 저작화면 메뉴 설명 ( Design 화면 & Block 코딩화면)

2. 인벤터 상단 메뉴 설명 ( Project / Connect / Build 메뉴)

3. 갤러리(Gallery) 안내 (앱인벤터 유저들의 앱 공유 공간)

4. 앱인벤터 언어설정 모드 변경 소개(영어, 한글, 중국어 모드 등)

[ 다음시간 학습 목차 ]

1. 예제 만들기 :  "예제1 : 두 개의 화면을 버튼 클릭하여 이동하기"

2. 제작앱 확인하기 (스마트폰에 설치 및 실행 또는 에뮬레이터로 확인)

▶ 선수학습 

  ： 【앱인벤터 기초#01】 앱 인벤터란?       ← 클릭 이동

  ： 【앱인벤터 기초#02】 앱인벤터 시작하기(설치&셋업)   ← 클릭 이동

▶  실습 준비사항 

  1. 안드로이드가 탑재된 스마트기기(스마트폰, 스마트패드 등) :  안드로이드OS 버전 4.2 이상 권장

  2. 웹브라우저가 구동가능한 PC(노트북) : 구동가능 웹(크롬, 파이어폭스, 사파리, 우분투웹), 익스플로러는 실행불가!

  3. 구글 계정 필요

▶  앱 인벤터 메뉴 소개 

[ 앱 인벤터 강의 영상 보기 (영상시간: 10분) ]

 앱인벤터 화면 및 메뉴 구성에 대해 다루고 있습니다.

https://youtu.be/pIKQM9MUNfU

【 앱인벤터기초 #02】 앱인벤터 시작하기(설치&셋업) ( App-Inventor !)

[ 학습 목차 ]

1. 구글계정 만들기

2. 앱인벤터 가입(로그인)하기

3. AI 컴패니언 설치하기 (제작 앱 다운로드)

4. AI 스타터 설치 (에뮬레이터)

5. USB 연결 설정

[ 다음시간 학습 목차 ]

1. 앱-인벤터 저작화면 메뉴 설명 ( Design 화면 & Block 코딩화면)

2. 인벤터 상단 메뉴 설명 ( Project / Connect / Build 메뉴)

3. 갤러리(Gallery) 안내 (앱인벤터 유저들의 앱 공유 공간)

4. 앱인벤터 언어설정 모드 변경 소개(영어, 한글, 중국어 모드 등)

▶ 선수학습 

  ： 【앱인벤터 기초#01】 앱 인벤터란?       ← 클릭 이동

▶ 1. 구글 계정 만들기 

  ：앱인벤터는 구글 계정이 필요하며, 만약 기존의 구글 계정이 있다면 그 계정으로 로그인이 가능하다.

(구글 계정 만들기)

  -  크롬과 같은 웹브라우저를 열고 아래 '구글계정 만들기' 사이트로 이동하여 절차대로 진행한다.

  -  단, "앱 인벤터"는 '인터넷 익스플로러' 웹브라우저를 전혀 지원하지 않으니,  처음부터 구글 '크롬' 웹브라우저를 다운받아 설치후 진행하는 것을 권장한다

  - 아래 계정만들기 링크  https://accounts.google.com/signup/v2/webcreateaccount?flowName=GlifWebSignIn&flowEntry=SignUp

▶ 2. 앱 인벤터 가입(로그인) 하기

  ： 구글 계정으로 아래 앱인벤터 접속사이트로 접속하여 로그인한다.   앱 인벤터는 PC에 따로 프로그램을 설치 할 필요 없이 웹상에서 저작할 수 있게 만들어 졌다. 따라서 인터넷만 연결되어 있다면, 집에서건 회사에서건 카페 노트북에서건 기존 제작하던 프로젝트를 열어 편집을 이어나갈 수 있는 큰 장점이 있다.  물론 PC설치버전과 USB에서 실행할 수 있는 무설치 포터블 버전도 제공한다. 

  [앱 인벤터 접속 사이트 :  http://appinventor.mit.edu/ ]   로그인 창이 뜨면 앞서 가입한 구글 아이디로 로그인한다.

【 제작한 앱을 테스트 하기 위한 3가지 방법! 】
   1. 앱파일('xxx.apk')을 출력하고 폰을 PC와 USB연결이나 QR코드로 xxx.apk파일을 다운받아 직접 APK파일을 설치후 테스트 하는 방법. (파일을 설치하는 게 번거롭지만, 제일 정확하고 확실한 테스트 방법)

   2. 가상 폰 시뮬레이터인 "ai starter"를 통해서 확인하는 방법. (안드로이드 기기가 없어도 테스트 할 수 있지만 스마트폰의 가속도, 기울기, GPS센서 등을 테스트해볼 수 없는 단점이 있다)

   3. 앱 다운로드 및 설치 없이, 앱 편집중인 상태에서도 실시간 연결되어 확인해볼 수 있는 방법으로 2가지가 있다.

       - AI Companion 이용법 :  앱 제작중인 상태에서 WiFi를 통해 실시간으로 스마트폰과 연결되어 테스트가 가능한 방법으로, 편집화면을 수정하면 수정된 내용이 그 즉시, 스마트폰 화면에도 적용되는 장점이 있다. (단, 같은 공유기(WiFi)에 연결되어 있어야 하며, 종종 접속이 끊기는 단점이 있다. 그리고 사전에 애래와 같은 방법으로  AI Companion 앱을 스마트폰에 설치하면 이용할 수 있다)

       - PC와 USB 직접 연결 법 :  역시 실시간 편집과 테스트가 가능한 방법으로 AI Companion 방법보다는 연결이 안정적이다.  단,  스마트폰 설정에서 개발자모드 처리와 스마트폰 제조사별로 PC용 통합 드라이버를 다운받아 설치해야 한다.

▶ 3. AI 컴패니언 설치하기 (① wifi로 연결하여 앱 테스트 하는 방법)  

 → 위 방법중에서 가장 확실하고 편리한 3번째 AI COMPANION 을 이용한 방법을 이용해보자.

 스마트폰에서 플레이스토어에 접속한 후 AI2 companion 을 검색하여 설치한다. 

앱 인벤터 툴에서 앱제작이 완료되면  아래처럼 메뉴에서 AI Companion 메뉴를 클릭 하면 QR 코드창이 뜬다.( 메뉴 : Connect 》 AI Companion )  

그런 다음 스마트폰에 설치한 "MIT AI2 Companion" 앱을 실행시킨다.  

- QR 코드상에 있는 "lzsifj" 를 아래화면처럼 빈칸에 직접입력하고 "connect with code"버튼을 클릭하거나,

 "scan QR code" 버튼으로 위 QR코드를 스캔후 기다리면 된다.(길면 1분 까지도 기다려야 함)

- 아래처럼 QR코드가 스캔된후 스마트폰과 연결되는 과정이 진행된다. 

- 연결이 완료되면 아래처럼 앱이 스마트폰에서 실시간으로 실행되는 것을 볼 수 있다.

(앱이 설치된 것은 아니며, 종종 커넥션이 끈기는 경우가 발생한다)

- 만약 연결 에러가 날경우 아래처럼 Reset Connection을 클릭하고 AI Compainon으로 재연결 시도를 한다.

▶ 4. AI Starter 설치 

  ：AI Starter를 설치하면, 안드로이드 기기가 없어도 제작한 앱을 'AI Starter'라는 에뮬레이터를 통해 PC에서 테스트 해볼 수 있다. 다만, 구동 속도가 느리고, 스마트폰에 들어 있는 GPS, 기울기센서, 가속도센서, 음성인식기능 등을 테스트 할 수 없다. 

 설치경로 : http://appinventor.mit.edu/explore/ai2/windows.html

 설치가 완료되면 바탕화면 혹은 설치된 프로그램 중에 'aiStarter' 라는 실행파일이 보일 것이다. 

이를 실행시킨다.(상황에 따라, 마우스 우클릭 하여 관리자 모드로 실행해야 되는 경우도 있음.)

실행 후 아래 창이 뜨면 OK!

- 에뮬레이터 실행을 위해서는아래 그림처럼 앱 인벤터 메뉴에서 "Emulator"를 클릭 한다.

- 아래 이미지 처럼, 에뮬레이터가 실행되며, #1~#4 와 같은 순서로 작동이 된다.  이 과정에서 에뮬레이터 화면상에 설치 옵션 같은 것이 뜨면 클릭하여 설치해 주어야 한다. (다소 시간이 걸린다)

- 설치된 후 아래처럼 앱 인벤터 메뉴에서 'Emulator'를 클릭하면 에뮬레이터 상에서 작성한 앱이 구현되는 것을 볼 수 있다.

▶ 5. USB 연결

- 스마트폰을 USB로 PC와 연결하면, AI Companion처럼 실시간으로 앱을 테스트 해볼 수 있다.  다만, 처음에 연결을 위해 처음에 조금 복잡한 과정이 필요하다.  USB 연결의 장점은 테스트를 위해 많으면 수십, 수백번에 이르는 번거로운 앱 설치 과정을 생략할 수 있으며,  WiFi를 이용한 접속방법 보다 훨씬 안정적으로 실시간 테스트가 가능하다는 장점이 있다.    (아래 셋업 상의 메뉴는 삼성 갤럭시 노트2를 예시로 설명)

 ① USB 연결제어를 위해 스마트폰을 개발자 모드로 변경 :

   - 스마트폰 설정 메뉴 》 개발자 옵션 》 "USB 디버깅" 모드  V체크(ON)

   - 스마트폰 설정 메뉴 》 개발자 옵션 》 "USB 디버깅 권한 승인"  V체크(ON)

   - 스마트폰 설정 메뉴 》 디바이스 정보 》 빌드 번호를 7회 이상 터치한다. 

 ② 모바일 통합 USB 드라이버 실치 :  (삼성 갤러시 예시)

http://local.sec.samsung.com/comLocal/support/down/kies_main.do?kind=usb

위 링크 주소를 통해 드라이버를 다운받아 설치한다.

 ③ 위 프로그램이 설치되고 USB를 스마트폰과 연결하면 "..... 연결 허용하시겠습니까?"  메시지가 뜨면 항상연결 체크박스에 체크하고 허용 버튼을 터치한다.