달란트(Talanton)

Android studio를 이용해 폰갭 앱을 개발하기 위한 방법을 기술해 본다. (윈도우 7 OS를 기준)

1. node.js를 설치

  - https://nodejs.org/en/ 사이트에서 최신 버전의 Node.js를 다운로드 받는다.

    (작성 시점에서 v6.9.5로 node-v6.9.5-x64.msi 파일)

  - 다운로드 받은 파일을 실행하여 설치한다.

  - 컴퓨터를 다시 시작한다.

  - cmd창을 열고, 다음과 같이 입력하여 phonegap을 설치한다.

    c:> npm install -g phonegap

2. ant 설치

  - http://ant.apache.org 사이트에서 download 사이트로 이동

    (ant.apache.org/bindownload.cgi)

  - 1.10.1 zip archive 파일을 다운로드 (apache-ant-1.10.1-bin.zip 파일)

  - 적당한 디렉토리로 이동 후 압축을 푼다.

  - 환경변수 PATH에 다음을 추가한다.

    + ANT_HOME : ant가 설치된 디렉토리 경로

    + ANDROID_PLATFORM : android sdk에 있는 platform-tools 디렉토리 경로

    + ANDROID_TOOL : android sdk에 있는 tools 디렉토리 경로

    + PATH에  %ANT_HOME%\bin;%ANDROID_PLATFORM%;%ANDROID_TOOL%; 추가

  - cmd 창에서 설치하고자 하는 디렉토리로 이동한 후 다음 명령어를 수행하여 phonegap을 설치

    + C:> phonegap create my-app[경로] com.example.myapp[패키지명] MyApp[프로젝트명]

    + C:> cd my-app

    + C:> phonegap platform add android    // 오랜 시간이 소요

  - Android Studio에서 phonegap이 적용된 프로젝트 생성

    + Android Studio를 시작한다.

    + 위에서 생성한 android platform 프로젝트는 Eclipse 환경의 프로젝트 구조이므로 Android Studio 버전으로 변환한다.

    + 위에서 설치한 디렉토리 my-app의 platforms/android 디렉토리를 기존의 Eclipse ADT로 읽기를 수행하여 import 한다.

    + 프로젝트를 build하고 Run As하여 휴대폰에 앱을 설치하면 PhoneGap 앱이 수행된다.

오늘은 안드로이드에서 웹앱을 만드는 방법에 대하여 기술한다.

참고 : Do it 안드로이드 앱 프로그래밍 3장 웹브라우저 사용하기

예제 파일 : SampleWebView

안드로이드 스튜디오에서 "Import project(Eclipse ADT, Gradle, etc..)" 메뉴를 사용하여 위의 예제 파일을 import 한다. 그러면 안드로이드 스튜디오 버전으로 변경된 프로젝트 SampleWebView1이 생긴다.

이 예제는 기본적으로 휴대폰에 내장된 서버 기능을 가지고 있다.

그래서 assets 디렉토리에 sample.html과 face_angry.png, face_normal.png 파일이 있다.

안드로이드 휴대폰을 사용하는 사용자는 보통 이동통신 요금을 정액제를 사용한다.

그래서 자신의 휴대폰 요금에 맞게 사용할 수 있는 패킷 데이터양이 제한이 있다.

외부의 서버에 접속을 하면 휴대폰내의 앱에서 서버에 접속하여 html, css, js, images 파일들을 통신을 통하여 가지고 와서 동작을 해야 한다. 이처럼 외부 서버를 이용하기 위해서는 서버와의 통신이 필요한 것이다.

그러나 이러한 통신의 양을 줄이는 방법이 외부 서버를 사용하지 않고 자신의 휴대폰에 서버를 구측한다면 통신의 필요성이 줄어들게 되고, 데이터 사용량이 줄어든다.

이 예제에서는 이와 같이 서버 기능을 자신의 휴대폰에 둠으로써 인터넷 사용으로 인한 데이터 사용량의 부담을 완화한 것이다.

그러나 이러한 방법은 내 휴대폰에 앱을 설치하는 순간에 서버의 기능이 고정되어 버린다. 왜냐 하면 html, css, js, images 등 모든 서버의 기능을 담당하는 것이 앱을 설치하는 순간에 다운로드되어 버리기 때문이다.

따라서 웹의 장점인 Dynamic한 부분이 제약이 생긴다. 즉, 새로운 기능을 업그레이드 하려면, 새로운 앱의 버전을 마켓에 등록을 하고 사용자가 다운로딩을 해야 하기 때문이다.

외부 서서를 사용한다면 통신에 대한 부담은 있지만 기능의 확장이나 변경은 용이하다.

그러므로 둘간의 적정한 tradeoff가 필요한다.

SampleWebView1의 동작을 기술하면 아래와 같다.

기본적으로 자신의 휴대폰에 있는 sample.html이 동작한다.

화면의 사진을 클릭하면 사진이 변경됨을 확인할 수 있다.

동작을 자세히 기술하면, 사진을 클릭하면 HTML의 <a>가 동작하여 onClick="window.sample.clickOnFace()" 함수가 동작한다. 그래서 안드로이드 MainActivity.java에 있는 clickOnFace() 메서드가 불리게 된다.

이부분은 안드로이드와 웹의 연동을 하는 부분이다.

사진을 변경하도록 이미지를 눌렀을 때, 안드로이드의 버튼의 글자를 변경해주기 위해서 웹과 앱의 연동을 해주는 것이다.

또한 안드로이드에서 Javascript와 연동하기 위하여 webView.loadUrl(javascript:changeFace('" + myNumber + "')"); 부분이 읶는 것이다. 이것을 통해 안드로이드에서 넘겨준 글자를 message에 보여주고, 사진을 변경하는 것이다.

- 웹에서 안드로이드와 연동

  + <a onClick="window.sample.clickOnFace()">  // 웹에서 안드로이드를 부르는 부분

  + public void clickOnFace() {    // 안드로이드에서 동작하는 부분

       mHandler.post(new Runnable() {

         public void run() {

           loadBtn.setText("클릭수 열기");

         }

      }

    }

- 안드로이드에서 웹으로 연동하는 부분

  + 안드로이드에서 웹으로 시작하는 부분

    String myNumber = "abcd:;    // 안드로이드에서 웹으로 넘겨주는 값;

    webView.loadUrl("javascript:changeFace('" + myNumber + "')");    // 안드로이드에서 웹의 javascript를 호출하는 부분

  + 웹의 javascript에서 동작하는 부분

    function changeFace(input) {

      document.getElementById("face").src = "face_angry.png";    // 이미지를 변경

      document.getElementById("message").innerHTML = input;  // 안드로이드에서 수신한 글자를 보여줌

    }

자신의 PC에 서버를 구축하여 URL 주소를 입력하면 휴대폰에 있는 서버로 접속하는 것이 아니라 서버로 접속을 하게된다. 그러면 서버의 프로그램을 다양하게 변경할 수 있으며, 계속 새로운 앱의 다운로드 없이 서버의 프로그램의 변경으로 새로운 콘텐츠를 제공할 수 있다.

스프링 MV 프로젝트에서 Ajax와 다중 파일 첨부기능을 구현하기 위하여 sample 프로젝트를 만들었다. (긴적인 Hello Spring에 추가되는 사항을 위주로 기술)

1. 환경

- Oracle DBMS

- Eclipse Java EE + Spring plugin

- Tomcat 8.5

2. 기능목록

- 게시글 작성 : 2개의 첨부파일 가능

- 게시글 목록보기

- 게시글 수 가져오기

3. 파일목록

- pom.xml : 파일 업로드, Oracle DBMS driver, JSON 처리 하는 라이브러리를 가져오기 위한 Maven dependency를 추가

- web.xml : UTF-8 encoding filter 추가, 에러 페이지 처리 추가

- servlet-context.xml : 파일 업로드를 위해 multipartResolver 추가, Oracle jdbc driver 추가, SqlSessionFactory 추가, SqlSessionTemplate 추가

- home.jsp 수정사항 : 게시물 목록보기 화면으로 이동하도록 버튼 배치 -> /list 발생

- HomeController에서 /list를 받으면 데이터베이스에서 게시글을 가져와 listView.jsp에 보여 준다.

- listView.jsp : 게시글 목록을 보여주고, 게시글 쓰기 버튼과 게시글 갯수 가져오기 버튼을 둔다.

  + 게시글 추가 버튼을 누르면 /writeForm이 서버로 전달된다.

  + 게시글 가져오기 버튼이 눌려지면 javascript에서 Jquery Ajax를 사용하여 서버에서 게시글의 수를 알아온다.

- HomeController에서 /writeForm을 수신하면 writeForm.jsp을 보여준다.

- writeForm.jsp에서는 게시글을 작성하도록 입력을 받아 서버로 전달한다. (/write에 실림)

  + 제목, 본문, 첨부파일 정보를 실어준다.

- HomeController에서 /write를 수신하면 게시글을 게시글 테이블에 저장하고, 첨부파일을 서버의 특정 디렉토리에 저장하고, 첨부파일 정보를 파일정보 저장 테이블에 저장한다.

  + /list로 redirect 한다.

- HomeController에서 /getCount를 listView.jsp로부터 수신하면

  게시글 테이블에서 게시글의 수 정보를 얻어 listView.jsp의 javascript로 전달한다.

sample.zip