0. 앱인벤터 개발환경, hello World

 

 

앱 인벤터 개발 환경

 

. 앱 인벤터의 세계로 들어가려면,

. http://ai2.appinventor.mit.edu에 접속

. 구글 계정으로 로그인(구글 계정이 없으면 구글에서 회원가입 먼저 하세요)

 

대표사진 삭제

사진 설명을 입력하세요.

 

 

앱인벤터에 로그인을 하면 처음 화면이다.

 

화면 영역에 대해 간략히 설명해보고자 한다.

앱인벤터 개발 환경에서 컴퓨터 파트에서는 크게 두 종류로 나뉜다.

. 디자이너

. 메뉴

. 서브메뉴(스크린, 디자이너/블록)

. 팔레트

. 뷰어

. 컴포넌트

. 속성

. 블록

. 블록

. 뷰어

 

대표사진 삭제

사진 설명을 입력하세요.

 

[pic1-1]

 

다음 시간에 메뉴에 대해 자세히 설명할 예정이며, 이번 시간에는 초간단으로 코딩해서 스마트폰에 올리는 개발환경 테스트이다.

 

필자는 스마트폰과 컴퓨터 연결을 두가지 사용한다. 첫번째는 AI 컴패니언이고 다른 하나는 빌드이다. 이번 시간에는 두 가지 함께 설정해보도록 하자

 

라이브 테스트-AI 컴패니언

AI 컴패니언을 설정하려면 스마트폰과 컴퓨터가 같은 공유기에 물려 있어야 한다.

. 컴퓨터가 만일 유선이면 유선 케이블이 공유기에 연결하고, 스마트폰도 유선 케이블에 연결한 공유기에 반드시 연결해야 한다.(즉 같은 공유기에 연결해야 한다.)

 

. 컴퓨터는 ai2.appinventor.mit.edu에 로그인을 하면 환경 설정은 끝난다.

. 구글 아이디로 로그인을 하면 된다.

 

. 현재 스마트폰은 안드로이드 스마트폰에서 사용 가능하다. (아이폰 ai 컴패니언도 있지만 아직 정확하게 지원하지는 않는 것 같다.)

. 안드로이드 스마트폰에서 구글 play 스토어를 접속한다.(play 앱 실행)

. 검색에서 "mit ai companion"을 검색해서 다운로드 및 설치한다.

 

 

. 이제 실전이다...

 

[팔레트]의 "사용자 인터페이스"에서 "레이블"을 뷰어에 drag&drop 한다.

 

대표사진 삭제

사진 설명을 입력하세요.

[pic1-2]

 

 

테스트 앱이기 때문에 아무것도 하지 않는다. 단순히 레이블만 뷰어에 drag&drop한다. 그리고 [속성]에서 텍스트에 "안녕하세요"라고 수정한다. 혹은 "hello, World"라고 수정한다.

 

이제 메뉴에 "연결"에 "AI 컴패니언"을 클릭하면, QR 코드 화면이 나온다.

 

대표사진 삭제

사진 설명을 입력하세요.

 

이제 스마트폰에서 "MIT AI Companion" 앱을 실행한다.

. scan QR code를 클릭하면 카메라가 실행이 된다. 컴퓨터 화면의 QR 코드를 스캔하면 스마트폰에서 라이브 테스트가 된다.

 

대표사진 삭제

사진 설명을 입력하세요.

 

빌드 개발환경

레이블 속성에 "안녕하세요"를 수정한다.

빌드에서 앱(.APK용 QR 코드 제공)을 클릭한다.

 

대표사진 삭제

사진 설명을 입력하세요.

 

빌드를 하고 기다리면 컴퓨터 화면에 QR 코드가 나올 것이다.

 

대표사진 삭제

사진 설명을 입력하세요.

 

 

스마트폰에서 "MIT AI Companion" 앱을 실행시켜 Scan QR code를 클릭한다. 그러면 패키지가 다운로드 되고 다운로드된 파일을 클릭하여 설치하고 실행하면 된다.

그러면 화면에 "안녕하세요"라는 글자 화면이 나올 것이다.

 

눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.

간단하지만 직접 해보면 이해하고 자신감이 생길거에요...

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.