웹뷰를 이용한 반응형웹을 앱으로 구현

요번에 웹뷰를 이용한 반응형웹을 앱으로 구현할 기회가 생겨서 선행 지식을 쌓을 겸 테스트 앱을 구현해 보았습니다.

구현기능:

1. 안드로이드 스튜디오 빈 액티비티 생성 후 웹뷰 컨트롤을 이용해서 반응형 URL을 불러오게 처리(아래 홍익대 상경대학 앱)

2. 자바스크립트 연동 샘츨: 모바일 앱-> 웹 자바스크립트 함수 호출

3. 게시판 파일업로드 기능 안드로이드 버전별로 작동하게 앱에서 구현

위 화면의 파일선택 버튼을 클릭했을때, 

아래처럼 스마트폰 카메라로 바로 사진을 올릴 것인가 아니면, 스마트폰에 저장된 파일을 올릴 것인가 선택하는 화면이 나옵니다.

위 화면에서 문서를 선택했을 경우 아래처럼 기존 스마트폰에 저장된 파일을 선택해서 올릴 수 있게 됩니다.

3-1. 일반 첨부파일 다운로드 기능 정상작동하게 앱에서 구현

3-2. 첨부파일이 이미지(JPG, PNG)일때, 다운로드 하지 말고, 뷰어로 바로 볼수 있도록 앱에서 구현

4. 자바스크립트 연동 샘플2: 반응형웹-> 모바일 앱의 함수 호출

위에 소스 내용중 자바스크립트 연동 웹용 핵심 내용

<script type="text/javascript">

function setMessage(arg) {

//var mainFrame = document.getElementById('textMessageFromApp');

//var createFrame = document.createElement("div");

//createFrame.innerHTML = arg;

//mainFrame.appendChild(createFrame);

alert("자바스크립트 연동 샘플: 모바일 -> 웹 함수호출" + arg);

}

</script>

위에 소스 내용중 핵심

<script type="text/javascript">

alert('LOGOUT SUCCESS');

window.android.webview_finish('finish');//자바스크립트 연동 샘플: 웹 페이지 -> 모바일앱 함수호출

</script>

이번에 작업한 앱소스는 올리지 않도록 하겠습니다. 거래처 납품용으로 사용될 예정입니다.

Ps. 참고로 다른 사람이 만든 안드로이드 소스를 분석하는 방법을 참조 URL에서 확인 가능하십니다.

http://dev.azki.org/entry/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-apk-%EB%94%94%EC%BB%B4%ED%8C%8C%EC%9D%BCDecompile-%EC%86%8C%EC%8A%A4%EB%B3%B4%EA%B8%B0

**** 다음시간에는 위 소스에 더해서 지금까지 벼르던 푸시 메세지 기능을 구현해 보도록 하겠습니다. ***