반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리


반응형

회사에서 앞으로 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]); 로 해당 배열을 출력시킵니다.


하고 나니 간단하네요.


Test.zip

필요하신 분들은 이 파일을 다운 받아서 실행해 보세요.


Test.apk

위 파일은 안드로이드 애플리케이션으로 빌드한 파일 입니다.


이 파일을 안드로이드 폰에 깔아서 실행시키시면 동작할 겁니다.



반응형