Android Studio 웹앱(?) Or 하이브리드앱(?) 1/2

1강은 그냥 단순 웹앱으로 끝낼생각입니다.

2강은 1강의 아주 조금 확장판 정도가 될것 같습니다.

2강이 언제 올라올지 모른다는건 함은정...;;

일단 작업 환경은

Android Studio 1.2 Build #AI-141.1890965

JRE 1.8.0_40-b26 amd64

API 19: Android 4.4 (KitKat)

안드로이드 스튜디오는 이클립스 때와는 다르게 약간 바뀐것이 있습니다.

대다수 유사한것이 많은것은 사실이나..

분명히 어느정도 바뀐부분은 있습니다.

또한 아직은 안드로이드 스튜디오 관련 글들도 많지않습니다.

그래서 제가 알고 있는 짧은 지식과 구글 튜트리얼과 구글링으로 시도를 해봤었습니다.

구글 튜트리얼도 나온 후 버전업이 이루어져서인지 바로 적용이 안되는 부분이 있었고..

이 부분이 버전업으로 인한것으로 같은 문제에 봉착하지말라고 미리 제가 사용한 버전을 알려드리고 들어갑니다.

2강 작성할때쯤은 버전업이 되지않을까하는 염려스러움도..;;

1. 새 프로젝트 생성

당연히 가장 먼저 할일은 새 프로젝트 생성이다.

[File] - [New Project...] 를 선택하자.

아래 그림처럼 새 프로젝트 창이 뜰것이다.

적당한 이름을 지어 주고 위치를 지정해주자.

난 Application name을 [TestWebApp01] 로 했다.

그리고 [Next]

그리고 [API 19: Android 4.4 (KitKat)] 로 했다. 이건 구지 꼭 따라할 필요는 없다.

Minimum SDK이다. 고로 최소 작동 버전을 선택한다고 생각하면 된다.

API 19면 갤럭시 노트2 에서도 구동이 가능하니...

크게 문제가 일어날 요지는 보이진않는다.

그보다 더 아래 버전을 사용하면 더 많은 사용자가 사용할수도 있겠지만 새로운 많은 기능을 사용하지 못할수도 있다.

라고 셀렉트 박스를 예전 버전으로 선택하니깐 밑에 나온다..;;

[Next]

[Blank Activity] 를 선택하고 [Next]

마무리다 [Finish]

새 프로젝트가 완성되었다.

자, 시작해보자.

2. WebView 사용

이녀석이 주인공이다. 이녀석만 있으면 웹을 그냥 불러와진다. c#의 웹브라우저 컨트롤같은 녀석이다.

우선 첫화면에서 보이는 [Hello World] 라고 문구가 하나 적혀있다.

클릭 후 [Delete].

아래 그림을 참고하면 된다.

[activity_main.xml] 탭임을 확인 한 후

왼쪽 [Palette] 에서 [WebView] 클릭하고 오른쪽 모바일 화면에 적당한 자리에 놓자.(드래그 앤 드롭 아님)

그림에 보이는것처럼 놓여진 [WebView] 를 클릭한 후 오른쪽 하단의 [Properties] 를 보자.

[layout:width] 와 [layout:height] 가 보일것이다.

이 값을 원하는 숫자 값으로 입력하셔도 되고 저처럼 [match_parent] 를 선택하셔도 됩니다.

[match_parent] 는 문자 그대로 부모랑 크기를 맞추는거죠.

현재 상황에서는 최대화로 표시되겠네요.

그리고 [Properties]에서 [id]부분을 찾아서 원하는 아이디로 지정해주자.

여기서는 [webView]로 지정했다.

이제는 소스를 건드릴 차례이다.

MainActivity.java 의 소스를 아래처럼 고쳐주자.

빨간색 부분이 추가된 부분이다.

파란색 부분은 WebView를 가져다 놓고 설정해준후에 지정해준 WebView 고유 ID이다.

MainActivity.java

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    WebView WebView01 = (WebView) findViewById(R.id.webView);

    WebView01.setWebViewClient(new WebViewClient());

    WebSettings webSettings = WebView01.getSettings();

    webSettings.setJavaScriptEnabled(true);

    WebView01.loadUrl("http://www.google.com");

}

WebView WebView01 = (WebView) findViewById(R.id.webView);

: id 에서 찾아서 가져오는것정도만 유의하면 될것 같다.

또한 여기서는 WebView01로 지정했다.

WebView01.setWebViewClient(new WebViewClient());

: WebViewClient를 지정한다.

이걸 빼면은 지정한 사이트로 연결이 앱이 아니라 인터넷 브라우저로 연결을 시도한다.

WebSettings webSettings = myWebView.getSettings();

webSettings.setJavaScriptEnabled(true);

: 이 부분은 WebView 안의 사이트에서 자바스크립트가 작동하도록 해주는 부분이다.

WebSetting은 이외에도 많은 기능이 있다. 여기서는 이정도만...

WebView01.loadUrl("http://www.google.com");

: 로드할 주소를 적는 란이다.

여기서는 구글로 연결하도록 했다.

자, 이제 다시 소스를 보자.

빨간 테두리는 레퍼런스를 참조하는걸 보여주고 있다.

말이 좀 이상한것 같은데...;;;

그리고 아래쪽 파란 테두리를 보면..

빨간색으로 경고(?) 들이 보인다.

현재 이 소스상에서는 죄다 참조할 클래스를 찾지 못해서 생기는 문제이다.

아래 그림처럼 [WebView]로 커서를 옮긴다음 [Alt] + [Enter] 를 눌러보자.

그럼 아래 그림처럼 몇개의 선택지가 나온다.

[Import Class]를 선택해주자.

그러면 상단에 자동으로 클래스가 참조되면서 에러라인이 사라진다.

[WebView] 는 위에서 했고,

[WebViewClient] , [WebSetting] 도 추가적으로 위에서 처럼 [Import Class] 해주자.

4. 권한설정

이제는 권한설정이다.

이 웹앱은 안드로이드의 Internet 기능을 사용한다.

그러기 위해서 인터넷 사용 권한이 필요하다.

app > manifests > AndroidManifest.xml 파일을 열자.

그리고 아래 빨간색 글씨 부분을 추가하자.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.t2t2tt.testwebapp01" >

    <uses-permission android:name="android.permission.INTERNET"></uses-permission>

    <application

        ...

    </application>

</manifest>

5. 실행

드디어 실행이다.

아래에서 보이는 버튼을 눌러보자.

그럼 아래와 같이 어떤 장치에서 가동을 해볼건지 선택하는 화면이 나옵니다.

우선 저는 컴퓨터의 사정(?)으로 인해 핸드폰으로 테스트 하겠습니다.

상태가 [Online] 인걸 확인한 후 [OK] 를 눌러줍시다.

혹시 테스트 환경을 핸드폰으로 선택하는 방법이 궁금하시다면

http://t2t2tt.tistory.com/13 <- 가차없이 클릭

아래 스샷은 제 핸드폰으로 찍은 스샷입니다.

매우 잘 작동합니다.

이것저것 눌러보세요. 엄청신기해요~;;;

이것으로 이번 포스팅도 끝~