반응형

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

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를 스마트폰과 연결하면 "..... 연결 허용하시겠습니까?"  메시지가 뜨면 항상연결 체크박스에 체크하고 허용 버튼을 터치한다.

 

 

 

 

반응형
반응형

앱인벤터기초 #01 MIT-구글의 App-인벤터란? ( App-Inventor !)

 앱인벤터는 그 유명한 MIT(메사추세츠 공과대학교)와 구글(google)이 협력하여 개발한 App 저작도구입니다.

[ App inventor 특징 ]

 

《 앱 인벤터는 코딩을 잘 몰라도 쉽게 스마트폰 앱을 만들 수 있게 해 준다 》 

  : 일반적으로 안드로이드 앱을 만들기 위해서는 자바나 코틀린 프로그래밍 언어를 익혀 Android studio 툴 상에서 복잡한 코딩을 통해 구현하게 됩니다. Android studio 툴 익히는 것도 만만치 않죠. (아이폰용 IOS 앱은 오브젝트-C 나 스위프트 언어를 익혀 X-Code 툴에서 구현함-이건 더 어려움)

  그래서 프로그래밍 비전공자들에겐 쉽게 엄두를 내지 못합니다. 하지만, 앱 인벤터를 이용하면, 전공의 구분 없이 누구나 쉽게 시작해서 단기간에 간단한 건 몇 분도 안되어 뚝딱 앱을 만들어 내는 놀라움을 선사합니다.

  바로 스크래치를 개발했던 MIT의 블록 코딩 기술을 적용했기 때문입니다. 스크래치는 저학년 초등생들도 프로그래밍의 개념을 배우고 쉽게 프로그램을 짤 수 있게 한 툴로서, 마치 아이들이 블록을 조립하듯 쉽게 코드를 구성해 줍니다.   

 스크래치와 아두이노 에뮬레이터를 연결하면 아두이노 제어도 가능합니다.  물론 앱인벤터도 가능합니다 - 이는 앱 인벤터 응용 카테고리에서 다룰 예정입니다.

MIT의 블럭코딩 도구 "스크래치"

 

"앱인벤터"를 이용하여 5분만에 제작한 앱

 

 

《 한글 메뉴를 지원합니다. 》

 코딩을 자동으로 해주는 툴이라도 툴 자체가 영문이면 배울 때 어려움을 느낄 수 있습니다.
하지만 이런 툴의 메뉴를 영어가 아닌 한국어로 바로 설정할 수 있어 접근성을 더욱 높였습니다.

(개인적으로는, 영문 메뉴가 익숙하지 않더라도 처음부터 영어 메뉴 모드로 익히시는 것을 추천합니다. 포토샵 등과 같은 툴도 처음엔 한글 버전으로 배웠다가 직장 등에서 영문 버전 사용에 당황함을 느꼈다는 사례도 있듯이, 만국 능통어로 제작된 영어로 익혀두면, 추후에 인벤터 관련하여 영어 메뉴로 된 학습자료나 최신 자료를 접할 때 바로 습득할 수 있는 장점이 있습니다. )

 

《 앱 인벤터로 제작 가능한 구체적인 예시 》 

 앱 인벤터로 충분히 제작 가능한 기능 앱 유형은 :

 사진 보기, 웹페이지 뷰, 음성인식과 출력, 음악 재생, 동영상 재생, 음성 변환, 번역, 사진&동영상 촬영

문자 메시지, 전화, 공유하기 기능 앱, 데이터 읽기 및 저장 기능 앱, 블루투스 통신 활용 앱, 

그림 그리기, 애니메이션 만들기, 타이머 기능 이용하기, 자이로 센서 활용 앱, 바코드&QR 코드 스캔, 위치센서 활용앱, 방향센서 활용앱, NFC 기능 활용, 가속도 센서, GPS, 근접센서 등을 활용한 앱과 블루투스, WIFI 통신을 이용하면 아두이노/라즈베리파이 등을 제어할 수 있습니다.  

 

《 안드로이드 폰&태블릿 없어도 에뮬레이터 활용 제작 가능 》

 앱 인벤터로 앱을 제작하기 위해서는 후 테스트

 

《 앱 인벤터 실행 저작 방식 》

 특별한 프로그램의 설치가 필요 없다. 기존 웹브라우저를 통하여 앱인벤터 사이트에 접속&회원가입&로그인 후 웹상에서 제작 가능! 
(단, 인터넷 익스플로러에서는 실행되지 않고, 아래 구글의 크롬, 애플의 사파리, 모질라의 파이어폭스에서 실행 가능)

 인터넷이 연결된 웹상에서만 가능한 것은 아니며 오프라인 버전(설치 및 무설치버전)을 다운 받아 설치하여 앱을 만들 수도 있다.  다만 프로그램을 실행하고 처음 구글 아이디로 로그인 과정에서는 인터넷 연결이 필요하다. 

 

 

《 앱 인벤터 구동 조건(시스템 환경)  》

[PC]  

  - Windows :  Windows XP, Windows Vista, Windows 7 이상 모두 가능

  - Macintosh(Intel CPU) : Mac OS X 10.5, 10.6 이상 모두 가능

  - GNU/Linux :  Ubuntu 8 이상, Debian 5 이상 모두 가능  (일부 기능은 조건 필요)

 

[Browser]

 - Google Chrome 4.0 (구글 크롬 4.0) 이상 모두 가능

 - Apple Safari 5.0 (애플 사파리 5.0) 이상 모두 가능

 - Mozilla Firefox 3.6 (모질라 파이어폭스 3.6) 이상 모두 가능  (일부 기능은 조건 필요)

 

[Android 폰&태블릿]

 - Android Operating System 2.3 (Gingerbread) 이상 모두 가능  : 안드로이드 OS 2.3 진저브레드 버전 이상은 모두 가능

 

 

《 앱 인벤터 제작 과정-프로세스  》

 1.  웹브라우저를 선택하여 열기(구글 크롬 예시)

 2.  구글의 크롬 브라우저를 다운로드하여 설치한다. 

 3.  구글(www.google.co.kr)에 접속하여 구글 계정을 만들고 로그인한다.(구글계정으로만 앱-인벤터 실행가능)

 4.  MIT 앱-인벤터 사이트에 접속한다.  http://appinventor.mit.edu   접속 후  Create apps!  를 클릭!

 5.  구글 아이디로 로그인(가입) 후 허용 버튼 클릭!  (동의 절차 거침)

 6.  앱 제작 가능한 화면이 열리며 앱 제작 시작!   ( 언제든 인벤터 사이트에 접속 후  Create apps!  를 클릭! 하면 제작 화면으로 이동)

 7.  앱 블록(코딩) 작업 후 에뮬레이터에서 확인하거나,  App 실행파일(.Apk)을 만들어 폰이나 태블릿으로 설치 후 구동 확인!

 --------------- 앱 정식 등록 및 출시 -----------------

 8. 구글(플레이 스토어)에 개발자 등록하기(등록비25$)  : https://play.google.com/apps/publish/signup

 9. 구글 플레이 스토어에 앱 등록하기

    - ① 앱 버전 APK파일 등록하기  ② 스토어 등록정보 입력하기  ③ 콘텐츠 등급 선택하기  ④ 가격 및 배포 설정하기

 

 여러분!  이렇게 쉽게 원하는 앱을 제작할 수 있으며 게다가 정식으로 앱스토어에 등록하여 수익도 낼 수 있으니,  

빨리 배우지 않을 수 없겠죠?  ^^

 

《 라즈이노에서는 앞으로 다양한 예제를 통해 앱 제작 학습에 도움이 될 수 있는 자료를 올릴 예정이며, 앱을 정식 등록하는 절차까지 내용을 제작해서 올릴 예정이니 많은 기대와 방문 부탁드립니다 ^^

 

 

반응형