MIT App Inventor2 - Appybuilder offline 버전 설치 방법

이전 포스트에서 MIT App Inventor2의 커스텀 기능 추가 버전인 Appybuilder를 이용하여 AdMop 배너 광고를 다는것에 관해 다루었었다. 

당시는 Appybuilder online 버전이 운영되고 있었기 때문에 굳이 Appybuilder offline 버전이 필요하지 않았으나 2019년 8월 1일 부터 구글 앱 스토어 정책상 안드로이드 API28이 적용된 앱만 스토어에 게시를 할 수 있도록 바뀌면서 그에따라 Appybuilder online이 API28에 맞게 개정작업에 들어가게 되고 더이상 Appybuilder online에서 앱을 빌드하지 못하게 되었다. 

Appybuilder online에서 앱을 빌드하려하면 "Build failed! Connection Refused(Connection refused)" 라는 메세지를 보게된다. 

필자는 이전부터 Appybuilder offline 버전을 사용해 왔었으나 그 당시 offline버전은 온라인 버전보다 기능적인 면에서 다소 부족했으므로 추천하지는 않았고 따로 포스트를 작성하지도 않았었다. 하지만 이번에 Appybuilder가 개정 작업에 들어가면서 기존 온라인 버전과 동일한 버전을 offline버전으로 게시를 하였을 뿐만 아니라 online상 빌드서버가 폐쇄되었기에 이에 관해 포스트를 하고자 한다. 

현재 Appybuilder offline 버전은 API28이 적용된 것 같다. 

Appybuilder online의 최신 포스트에 아래와 같이 offline 설치 투토리얼이 설명되어 있다.

https://community.appybuilder.com/t/installing-appybuilder-personal-offline-version-via-git/29641 

투토리얼에 따르면 Appybuilder offline 버전을 github에서 다운로드후 The Git 프로그램, TortoiseGit 프로그램을 다운받아 설치하고 설정해 주라고 되어있다. 

상기 프로그램들을 설치하고 Appybuilder offline 버전을 설치하게 되면 나중에 버전이 변경되었을 경우 업데이트 등을 쉽게 할 수 있는것 같다. 

하지만 필자는 이전에 사용하던 방법을 설명하고자 한다. 

1. https://github.com/AppyBuilder/AppyBuilderPersonal 에서 offline 버전을 다운로드 받는다. 

2. JAVA JDK 다운로드 및 설치(Java SE Development Kit 8)

아래 사이트에서 윈도우 버전에 맞는 JAVA JDK 최신 버전을 다운로드 받아 설치를 한다. 

https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Accept License Agreement에 체크를 한상태에서 다운로드 받을수 있다.

특별한 설정없이 기본값으로 설치하면 된다. 

 

3. 윈도우 시스템에 JAVA JDK 등록

제어판 -> 시스템 -> 고급 시스템 설정 -> 환경변수 -> 새로만들기를 클릭하고 JAVA JDK용 환경변수를 생성한다. 

필자는 변수이름을 JAVA_HOME으로 하여 생성했다. 

변수 값으로는 JAVA JDK가 설치된 경로를 지정해주면 된다.

윈도우 탐색기 에서 윈도우 설치드라이브 -> Program Files -> Java -> 설치된 JDK폴더로 들어간뒤 아래 그림의 주소창을 클릭하여 경로를 복사하여 변수값에 붙여넣기 하고 확인을 클릭한다.  

필자가 설치한 JAVA JDK가 이전에 다운로드 해서 사용했던 201 버전이므로 폴더명이 jdk1.8.0_201 이다.

곧이어 시스템 변수의 Path 항목에 JAVA JDK의 bin 디렉토리 경로를 현재값에 추가해 준다. . 

앞서 생성한 환경변수 JAVA_HOME 아래쪽에 있는 Path 항목을 더불클릭 하거나 선택한 뒤 편집 버튼을 클릭한다.  

변수값에 넣을 JAVA JDK의 "jre 폴더"의 bin 디렉토리 경로를 복사하기 위해 이전과 같이 윈도우 탐색기를 통해 해당 폴더로 이동한뒤 복사하면된다. 

복사한 뒤에는 기존에 설정되어 있는 변수값에 복사한 값을 추가하기 위하여 ";" 문자를 입력하고 복사한 디렉토리 경로를 붙여넣기하고 확인을 클릭하면 JAVA JDK 등록은 완료된다. 

4. JAVA JDK 환경설정

제어판 -> Java -> 설정 클릭 -> "내 컴퓨터에 임시 파일을 보관합니다." 항목의 체크 해제 -> 파일삭제 클릭 -> "추적 및 로그 파일" 항목만 체크가 된 상태에서 확인을 클릭한다. 

다음으로 Java 제어판의 보안 탭으로 이동한 뒤 사이트 목록 편집 버튼을 클릭하고 추가를 클릭한뒤 생성된 입력창에 "http://localhost:8888"을 입력하고 확인을 클릭한다. 

예외사항 사이트 목록에 등록한 주소가 표시됨을 확인할 수 있다.

설정 작업이 모두 완료 되었으므로 1번에서 받아놓은 Appybuilder offline 버전의 압축을 풀고 원하는 위치에 옮겨놓은 후 WinStartFrontend 배치파일을 클릭하면 Appybuilder offline 버전 서버가 기동되고, CMD 창에 App Server is now running이 표시된 뒤 크롬 브라우저 주소창에 "localhost:8888"를 입력하면 서버에 접근하고 관리자 계정으로 프로그램에 접속할 수 있게 된다. 

관리자 계정으로 들어가서 사용하는 방법은 MIT App Invetor2 offline 버전과 사용 방법이 같다.

WinStartBuildServer 배치파일은 앱을 빌드할때 사용하는 build server 기동용이다. 앱을 편집하고 있을때는 App Server만 기동하고 편집하는게 좋다. 앞서도 언급했지만 바탕이 되는 JAVA 프로그램 특성상 코드 블록(블록 이미지 표시문제)이 늘어날수록 프로그램이 급격히 느려지게 되므로 가능한 관련 프로그램을 필요할 때만 기동하는게 프로그램이 느려지는 것을 조금이라도 방지 하게된다. 

WinStartBuildServer 배치파일을 클릭한 뒤 CMD창에 Server running 이라는 메세지가 표시되면 apk 파일을 빌드 할수 있게된다.

Appybuilder도 MIT App Inventor2와 같이 USB 이용 스마트폰 에뮬레이트 기능이 있다. 대신 컴퓨터와 스마트폰 둘다에서 전용 프로그램을 설치해서 사용해야만 한다. 

컴퓨터용 AppyBuilder Starter 프로그램 다운로드 (스마트폰 USB 연결 프로그램)

https://help.appybuilder.com/live-testing

USB 연결을 위한 스마트폰용 프로그램은 구글 play 스토어에서 "appybuilder"를 검색한 뒤 AppyBuilder Companion 프로그램을 설치해 주면되고 사용방법은 MIT App Inventor offline 버전의 USB 연결방법과 같으므로 이전 포스팅을 참조 하기 바란다.  

추가사항으로 MIT App Inventor2 offline 버전을 사용중에 AppyBuilder offline 버전을 설치해서 사용해도 무방하나, 크롬브라우저에서 offline 서버에 접속을 할때 MIT App Inventor2 offline 버전과 AppyBuilder offline 버전 둘다 같은 주소(localhost:8888)를 사용함으로 동시에 사용할 수가 없다. 대신 번갈아 사용은 할 수 있는데 번갈아 사용할 경우에는 웹브라우저의 쿠키를 모두 삭제한 뒤에 원하는 서버(MIT App Inventor2 또는 AppyBuilder)를 실행시키고 접속하면 된다. 

매번 웹브라우저의 쿠키를 삭제하는게 귀찮다면 전용 웹브라우저를 지정하여 사용하면 된다.  

예로, MIT App Inventor2 offline 버전 서버를 기동할 경우에는 크롬 브라우저를 사용하고 AppyBuilder offline 버전 서버를 사용할 경우에는 오페라 브라우저를 통해 접속하게 되면 쿠키를 삭제하지 않고도 접속을 할 수 있게된다. 하지만 인벤터 계열 프로그램이 크롬 브라우저에서 최적화 되어 있어 프로그램 반응 속도 차이가 눈에 뜨일 정도로 차이가 나므로 번갈아 사용할 경우에는 크롬 브라우저의 쿠키를 삭제하여 사용하는걸 권장한다.

접속 주소가 같기 때문에 동시에 offline 버전을 사용하는건 불가하다. 만약 offline 버전의 프로그램에서 localhost 접속 port 번호를 8888이 아닌 다른 번호로 변경할 수 있다면 동시 사용이 가능할 것 같다. 이때에는 빌드서버의 port번호도 변경해 줘야 할 것이다. 

굳이 동시에 사용하고자 한다면 MIT App Inventor2는 온라인으로 사용하고 AppyBuilder는 offline 버전으로 사용하는 방법도 있다.  

관련 글

[app inventor] - 앱 인벤터2가 갑자기 느려질때, collapse 옵션과 app inventor 2 ultimate, offline 버젼 사용

[app inventor] - 앱 인벤터2 Usb Device 설정, 안드로이드 폰과 usb를 사용하여 AI2 Companion App과 연결

[app inventor] - MIT App inventor 2 - 내가 만든앱에 appyBuilder를 이용하여 Admob 광고를 달아보자

[app inventor] - MIT App Inventor2 - Appybuilder offline 버전 설치 방법

AppyBuilder offline 폴더 

AppyBuilder offline 실행 cmd 창 이미지 

1. WinStartFrontend.bat 파일 클릭시 실행 CMD 창 화면

2. WinStartBuildServer.cmd

방화벽 경고가 뜨면 액세스 허용을 클릭한다.