관리 메뉴

HAMA 블로그

[안드로이드] QR Scanner 와 웹뷰 본문

안드로이드

[안드로이드] QR Scanner 와 웹뷰

[하마] 이승현 (wowlsh93@gmail.com) 2015. 6. 12. 18:35

기존에 스위치를 켜고/끄는 IOT 용 솔루션이 모바일웹으로 만들어져있었다. 

서버로 1번이나 2번스위치 ID 를 입력하여 스위치 조작을 할수있었다.

근데 매번 ID 를 입력하기는 귀찮은 일이었다.

따라서 전력공급원(콘센트)에 QR 코드를 붙혀놓고,자동으로 읽어서 자동으로 스위치를 켜주려했다.

하지만 모바일웹에서는 카메라를 조작하여 QR 코드를 읽을수 없었다.

그래서 하이브리드앱을 만들어야했다.

하이브리드 앱은 보통 2가지로 하나는 아이오닉(폰갭) 같은것을 이용하는것인데

이것의 목적은 하나의 앱을 개발해서 다양한 플랫폼에서 사용하기 위함이고

다른 종류의 하이브리드앱은 다음이나 네이버앱처럼 네이티브기능을 쓰면서

기존의 모바일웹 방식의 (자주 업데이트가 생기는 컨텐트) 를 그대로 가져다 사용하기 위함이다.

2번째의 하이브리드앱 형태가 다양한 앱개발 형태중에서 내가 만들 앱에 맞다고 판단하여

안드로이드 네이티브 앱을 이용하여 기존 모바일웹은 웹뷰로 대체하고 QR 스캐너를 부착하였다.

다음은 웹뷰와 QR 스캐닝의 간단한 예를 보여준다.


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:id="@+id/loadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 열기 "
android:padding="4dp"
android:textSize="20dp"
/>
<EditText
android:id="@+id/urlInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20dp"
android:inputType="textUri"
/>
</LinearLayout>

<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

</LinearLayout>

                                                      res/layout/activity_main.xml



public class MainActivity extends ActionBarActivity {

private static final String TAG = "MainActivity";

private WebView webview;


private Button loadButton;


private Handler mHandler = new Handler();

@SuppressLint("JavascriptInterface")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// 웹뷰 객체 참조
webview = (WebView) findViewById(R.id.webview);

// 웹뷰 설정 정보
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);

webview.setWebChromeClient(new WebBrowserClient());
webview.addJavascriptInterface(new JavaScriptMethods(), "sample");

// assets 폴더에 있는 메인 페이지 로딩
webview.loadUrl("file:///android_asset/www/sample.html");

final EditText urlInput = (EditText) findViewById(R.id.urlInput);

// 버튼 이벤트 처리
loadButton = (Button) findViewById(R.id.loadButton);
loadButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// 입력한 URL의 페이지 로딩
webview.loadUrl(urlInput.getText().toString());
}
});

}

/**
* 자바스크립트 함수를 호출하기 위한 클래스 정의
*/
public class JavaScriptMethods {

JavaScriptMethods() {

}

@android.webkit.JavascriptInterface
public void clickOnFace() {
mHandler.post(new Runnable() {
public void run() {
// 버튼의 텍스트 변경
loadButton.setText("클릭후열기");
// 자바스크립트 함수 호출
webview.loadUrl("javascript:changeFace()");
}
});

}
}

final class WebBrowserClient extends WebChromeClient {
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
Log.d(TAG, message);
result.confirm();

return true;
}
}


...
}

                                                               MainActivity.java


웹뷰관련 링크 

http://blog.acronym.co.kr/528

http://kimhs20.com/wp/?p=334

https://opentutorials.org/module/1234/8081



QR 스캐너 


public class MainActivity extends Activity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View view)
{
// QR코드/바코드 스캐너를 구동합니다.
IntentIntegrator.initiateScan(MainActivity.this);
}
});
}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data)
{
// QR코드/바코드를 스캔한 결과 값을 가져옵니다.
IntentResult result = IntentIntegrator.parseActivityResult(requestCode, resultCode, data);

// 결과값 출력
new AlertDialog.Builder(this)
.setTitle(R.string.app_name)
.setMessage(result.getContents() + " [" + result.getFormatName() + "]")
.setPositiveButton("확인", new DialogInterface.OnClickListener()
{
@Override
public void onClick(DialogInterface dialog, int which)
{
dialog.dismiss();
}
})
.show();
}
}

QR 스캐너 관련 링크

http://hs36.tistory.com/36  

Comments