제 1 장 앱인벤터 소개 및 개발환경 구축 3 (앱인벤터 활성화 확인작업) -1

2. 앱인벤터의 활성화 확인 작업
  

1. 앱인벤터의 디자이너창과 블록에디터창의 접근방법에 대하여 설명한다.
  

1-1. 구글 크롬에서 안드로이드용 앱인벤터 사이트 http://appinventor.googlelabs.com/ode/Ya.html를 입력하면, 좌측과 같은 웹브라저화면이 나타난다.
 

1-2. 이 화면에서, 페이지 새로고침(시계방향표시의 원형화살표)를 클릭하면 구글계정을 로그인을 안한 경우에는 다음과 같은 화면이 나타난다.

 
 참고 사항: 페이지 새로고침 버튼은 앱인벤터의 작업도중에 예상외의 화면이 나타날 때에 자주 사용하는 버튼이다.  예를 들면, 블록에디터에서 블록등에 이상현상이 나타나는 경우에는 블록에디터를 닫고 디자이너창에서 페이지 새로고침 버튼을 클릭하고 블록에디터를 다시 오픈한다.

참고사항: 로그인하고 로그인 상태유지(Stay signed in)의 체크난에 체크표시를 하면, 다음부터는 직전에 작업하던 프로젝트가 디자이너창에 바로 나타난다.

1-3. 상기 화면에서 구글계정에 로그인을 하면 앱인벤터의 시작화면이 나타난다.  새로운 프로젝트를 시작하기 위해 새로 만들기 버튼(New)을 클릭하여 프로젝트 명칭 입력대화상자가 나타나고, 프로젝트 명칭(예를 들면, NewYearBow)을 입력한다. 
 

1-4. 여기서, 입력명칭은 구글 앱인벤터 서버에 키워드로 저장되므로 문자로 반드시 시작하고 문자, 번호 및 밑줄 등으로만 입력가능하다.  이 원칙을 벗어나는 경우에는 다음과 같은 경고 메시지상자가 나타난다.  한글을 입력하여도 마찬가지로 아래의 경고 메시지상자가 나타난다.
 



 

1-5. 상기 프로젝트 명칭의 입력대화상자에서 버튼(OK)을 클릭하면, 다음과 같은 앱인벤터 디자이너창이 있는 사이트로 이동한다.   앱인벤터 디자이너창은 사용자 인터페이스의 외관 등을 구현할 수 있다.  즉, 룩앤필(look and feel)중에서 룩(look)에 해당하는 디자이너 대화상자라고 생각하면 된다.

1-6. 다음에, 디자이너 대화상자의 우측상부에 위치한 블록에디터열기버튼(Open the Blocks Editor)을 클릭하면, 상기 자바 웹 스타트 데모에서 설명한 바와 같이,  좌측 하부에 파일(예를 들면, AppInventorForAndroidCodeblocks.jnlp)이 다운로드 된다.
 

1-7. 이 파일을 클릭하면 좌측의 스크린샷과 같은 자바설치 대화상자가 나타난다.
 

참고 사항: 우측 스크린샷에 나타난 바와 같이 에러대화상자와 함께 나타나는 경우에는, 에러대화상자가 나타나지 않을 때까지, 즉 2회 내지 5회 정도까지 다운로드하여 클릭한다. 그렇치 않으면, 다운로드된 폴더를 열고 이전에 다운로드된 파일을 삭제하고 다시 시도한다.  이에 관련된 설명은 나중에 설명하는 앱인벤터의 레이아웃의 설명을 참고한다.
 

1-8. 잠시 대기하면, 다음의 스크린샷과 같은 앱인벤터 블록 에디터창이 디자이너창과는 별도의 창이 나타난다.  

1-9. 상기 안드로이드 블록에디터의 상부 중앙에 위치한 에뮬레이터 새로 만들기버튼(New emulator)를 클릭하여, 에뮬레이터 시작의 안내상자가 나타나면, 하측에 위치한 버튼(OK)을 클릭한다.

1-10. 상기 안내문에 기록된 바와 같이 잠시(2분 내지 3분정도) 대기하면, 윈도우의 커맨드창과 함께 에뮬레이터가 다음과 같이 나타난다.
 

 그런데, 에뮬레이터가 실행될 때 에뮬레이터 이미지 파일용량이 부족하기 때문에 커맨드창이 사라지지 않고 경고 메시지를 알리고 있다. 이것은 일종의 버그로 생각된다.   운영시스템 XP에서 실행한 것이 그 원인이 아닌가 생각하지만, 이를 그대로 두고 실행하여도 프로그램작업확인에는 지장은 없다.  다만, 화면을 작다고 하는 단점이 있다.

참고 사항: 개인적으로는 에뮬레이터의 화면이 작기 때문에 사용하지 않는다.   그 대신에, 안드로이드 블록에디터창을 열기 전에, 나중에 설명하는 바와 같이 별도의 에뮬레이터를 실행한다.