회사에서 앞으로 Hybrid 앱 쪽을 고민하는 것 같습니다.
지금까지 저희 팀에서는 모바일 웹 어플리케이션만 만들었는데요.
이번에 Hybrid 관련해서도 관심을 가지더라구요.
일단 제가 알아볼 기술은 아래 3가지 입니다.
1) 현재 디바이스가 네트워크와 연결 상태에 있는지 여부
2) 현재 연결된 네트워크 이름 알아낼 수 있는지 여부 (WiFi 이면 그 이름도)
3) 현재 특정 앱이 디바이스에 깔려 있는지 여부 알아내기 (혹은 실행하기)
이 세가지인데요.
제가 알아낸 것은 PhoneGap 에서 지원하는 Connection 이라는 API 입니다.
이 API 로 1번 문제는 해결할 수 있었습니다.
인도에 있는 팀에서 플러그인을 만들어서 2번 문제까지도 해결을 했는데요.
아마 PhoneGap 과 Java와 JS 등등을 사용해서 해결한 것 같더라구요.
나중에 소스 분석 좀 해 봐야겠어요.
3번은 아직 방법을 찾지 못했습니다.
안드로이드나 iOS Native language 를 사용해서 해결해야 될 것 같기도 하고 아니면....
웹 기술로도 모바일 기기의 이메일, 카메라, SMS 등을 실행시킬수 있는 걸로 봐서 간단하게 해결 할 수도 있을 것 같기도 한데...
좀 더 연구해 봐야겠습니다.
일단 이 글에서는 제가 알아본 PhoneGap 의 Connection 을 이용한 예제를 정리해 놓겠습니다.
결과화면은 이렇습니다. 처음 시작할 때나 'Click It 버튼을 클릭할 때 Alert 화면으로 현재 연결된 네트워크 Type 을 보여 줍니다.
우선 파일 구조부터 살펴 보죠.
우선 PhoneGap 프로젝트를 만듭니다.
자세한 내용은 이전글을 참조하시구요.
우선 빨간 줄을 그은 파일들은 그냥 복사만 해 넣으면 되는 겁니다.
폰갭 다운 받은 폴더에서 해당 파일을 복사해서 넣으세요.
이것도 이전글을 참조하세요. config.xml 은 지난번에는 복사해 넣지 않은건데 이번엔 복사해 넣으셔야 됩니다.
이 파일에서 PhoneGap 에서 지원하는 기능들을 사용할 경우 해당하는 플러그인을 불러올거거든요.
그 다음 파란줄로 그은 파일들이 여러분이 손을 보셔야 될 파일들 입니다.
일단 MainActivity.java 파일들을 보죠.
package com.example.test;
import org.apache.cordova.*;
import android.os.Bundle;
import android.view.Menu;
public class MainActivity extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
처음 Android Project 를 만들면 약간 다르게 돼 있을겁니다.
자세한 내용은 역시 이전글에 있습니다. 참고하세요.
주요한 코딩은 index.html 부분에 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>navigator.connection.type Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
checkConnection();
}
function checkConnection() {
var networkState = navigator.network.connection.type;
var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.NONE] = 'No network connection';
alert('Connection type: ' + states[networkState]);
}
</script>
</head>
<body>
<p><br><p>
<p>A dialog box will report the network state.</p><br>
<center><input type="button" value="Click it" onClick="checkConnection()"></center>
</body>
</html>
이 코드는 PhoneGap API Document에 나와 있는 내용입니다.
제가 덧붙인 부분은 아랫부분에 버튼을 만들고 그 버튼을 클릭하면 checkConnection() 함수를 호출하는 부분입니다.
우선 처음에 시작은 onDeviceReady() 함수에서 합니다.
이 함수는 앱이 시작하면 자동으로 호출되는 함수 같습니다.
이 함수 안에서 checkConnection() 함수를 호출하니까 앱이 시작할 떄 checkConnection()이 동작을 하게 됩니다.
checkConnection() 에는 Cordova API 에서 제공하는 Connection 기능을 구현해 놓았습니다.
navigator.connection.type 로 현재 연결된 Network type 을 받아서
networkState 변수에 담습니다.
그리고 var states 배열에 각 Network 타입마다 적당한 문장을 대입시켜 넣구요.
alert('Connection type: ' + states[networkState]); 로 해당 배열을 출력시킵니다.
하고 나니 간단하네요.
필요하신 분들은 이 파일을 다운 받아서 실행해 보세요.
위 파일은 안드로이드 애플리케이션으로 빌드한 파일 입니다.
이 파일을 안드로이드 폰에 깔아서 실행시키시면 동작할 겁니다.
tistory546_01.html
Test.zip
Test.apk
