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

【 앱인벤터기초 #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 )  

AI Companion QR 코드

그런 다음 스마트폰에 설치한 "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 와 같은 순서로 작동이 된다.  이 과정에서 에뮬레이터 화면상에 설치 옵션 같은 것이 뜨면 클릭하여 설치해 주어야 한다. (다소 시간이 걸린다)

#2 이미지에서 잠금표시를 마우스로 밀면 다음 화면으로 넘어간다

- 설치된 후 아래처럼 앱 인벤터 메뉴에서 '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를 스마트폰과 연결하면 "..... 연결 허용하시겠습니까?"  메시지가 뜨면 항상연결 체크박스에 체크하고 허용 버튼을 터치한다.