2013. 10. 24.

폰갭(PhoneGap) 이란 무엇인가?

하이브리드 앱을 만들때 폰갭과 같은 플랫폼을 사용한다.
치밀하게 알고싶은 사람은 위키디피아로! http://en.wikipedia.org/wiki/PhoneGap

그럼 하이브리드 어플은 무엇인가.

앱 하나를 생각해보자.
얼굴을 찍어서 전생이나 닮은 사람 찾아주는 그런 간단한 것으로. 입력은 사진 한장이다.
사진 한장으로 어떤 알고리즘을 거치든, 결과를 뱉기까지 플랫폼이나 언어가 걸림돌이 되진 않는다.

아이폰이나 안드로이드라면, 카메라로 촬영하고, 촬영한 사진 데이터로 이리저리 구워 삶고 비교하고 또 비교해서 결과 내면 된다.

그럼, 똑같은 기능을 하는 웹사이트가 있다고 해보자. 그리고 아이폰이나 안드로이드의 웹 브라우저로 그 사이트에 접속한 상황이다. 결과 만들어 내는 로직은 웹언어라 해도 문제될 것은 없다. 문제는 입력을 어떻게 주는지다.  카메라를 띄워야 되는데, 모바일 OS들의 카메라를 제어할 수가 없다.

이때 필요한 것이 폰갭과 같은 플랫폼이다. 포장지라고 생각하자.

폰갭을 사용하여 어플을 만드는 과정이나, 그냥 어플을 만드는 과정이나 똑같다.
다만, 폰갭 라이브러리를 어플에 포함시켜서 사용하는 것 뿐이다.

public class MainActivity extends DroidGap {
    @Override
    public void onCreate(Bundle savedInstanceState) {   
        super.onCreate(savedInstanceState);       
        super.loadUrl(" url ");
    }
}

안드로이드 어플을 개발해 본 사람이 있다면 많이 봐왔을 만한 부분이다.
메인엑티비티 인데, Activity를 상속하는게 아니라 저 DroidGap을 상속한다.

그리고 loadUrl()함수로 해당 웹페이지를 가져 오면 된다.
물론 어플 내로 웹페이지 코드 자체를 옮길 수 도 있다. 허나 번거롭다.

그럼 이제 어떻게 되는건가.
카메라를 제어 하고자 하는 웹페이지에서 써주면 된다.

<script type='text/javascript' charset='utf-8' src='cordova.js'></script>
<input type="button" onclick="capturePhoto();" value="사진촬영" />

스크립트 불러와주고, 홈페이지에서 API 봐가면서 맞게 써주면 된다.
밑에 함수들은 웹 페이지에 포함 해준다.

function capturePhoto(){
     navigator.camera.getPicture(
         onPhotoURISuccess,
         onFail,
         { quality:50,
           correctOrientation: true,
           destinationType : Camera.DestinationType.FILE_URI 
         }
     );
}

function onPhotoURISuccess(imageURI){
     //파워하게 처리.
   alert(" 사람의 얼굴로 다시 촬영해 주세요. ");
}

function onFail(message){
     //사진을 촬영하거나, 가져오는데서 실패하면.
     alert(" 카메라가 촬영을 거부 했습니다." );
}

저 navigator.camera 저 녀석들이 폰갭 놈들 인가 보다.
촬영하면 콜백 함수(onPhotoURISuccess, OnFail)가 호출되고 이미지를 리턴해 준다. 이제 위에서 말했던 나이를 맞추든, 닮은 사람을 찾아주든 처리해서 결과를 뱉어 주면 된다.

아이폰에서도 폰갭 라이브러리 불러오고 아이폰 어플 만드는 방식 따라서 웹사이트에 연결해주면 된다. 안드로이드용, 아이폰용 어플을 따로 만들 필요 없이 웹페이지 소스 하나로 안드로이드, 아이폰 어플을 각각 만들어 낼 수 있다는 것이다.


댓글 없음 :

댓글 쓰기