Android) 누구나 만들 수 있는 웹 어플리케이션 개발하기 3편 - WebView 구현하기

누구나 만들 수 있는 웹 어플리케이션 개발하기 3편

'WebView 구현하기'

 

2편에서 LinearLayout 의 기초를 배웠다면,

이제 그 레이아웃에 WebView를 넣어

완전한 앱의 형태를 갖추게끔 해 보겠다.

---

2편에서는, LinearLayout에 TextView로 글자를 넣어보는 연습을 했다.

하지만, 우리는 웹어플리케이션을 만들 것이고

TextView는 필요없으니 지운다.

그리고 그자리에 WebView를 넣어주자.

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

이제 놀랍게도 xml 디자인은 끝이다.

왜냐하면 우리는 실행하면 웹페이지가 나오는 어플리케이션을 만들기 때문에

웹뷰 하나면 끝난다.

 

이제 앱이 인터넷 접속 권한을 가질 수 있도록 Permission 설정을 해주자.

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

manifests -> AndroidManifest.xml 에 위 코드를 추가시켜주자.

그러면 이제 이 어플은 인터넷 접속을 할 수 있는 권한을 얻는다.

 

그럼 이제 Mainactivity.java 를 건드리러 가자.

자바 클래스 파일에서는, 본격적인 웹뷰의 작동을 코딩하는 것이다.

 

먼저, 

private WebView mWeb = null;

WebView 변수를 선언해주자. 그럼 아래 이미지와 같이 WebView 킷을 import 하라고 뜰 것이다.

OK 를 눌러주자. 

그리고 OnCreate 안에 findViewbyId를 이용해 WebView를 불러와주자.

mWeb = (WebView) findViewById(R.id.WebView1);

그리고 밑에

 WebSettings set = mWeb.getSettings();
 set.setJavaScriptEnabled(true);
 set.setJavaScriptCanOpenWindowsAutomatically(true); // 자바스크립트 허용
 set.setCacheMode(WebSettings.LOAD_DEFAULT); // 브라우저 캐시 허용

이와 같이, 웹뷰가 자바스크립트, 캐시를 허용 할 수 있도록 설정값을 준다.

 

이제 내가 원하는 Url을 입력해서, 그 사이트로 이동할 수 있게 해주어야 한다.

mWeb.loadUrl("https://glacier-han.github.io/AI_Similar_Man/Intro.html"); //웹뷰 시작시 이동할 페이지 설정
mWeb.setWebChromeClient(new WebChromeClient());

나는 닮은꼴 연예인 찾기 사이트 어플을 만들 것이기 떄문에, 저 Url을 넣은 것이다.

자신이 원하는 Url을 저 부분에 넣으면 웹어플 실행시 저 사이트로 이동한다.

 

그릐고 setWebChromeClient를 코딩하여 웹사이트에서 alert가 뜰 수 있도록 한다.

이까지만 하면, 온전한 웹 어플이 완성된다.

닮은꼴 연예인 찾기 사이트 웹어플리케이션

---

이까지의 전체 코드를 공유하겠다.

// https://h-glacier.tistory.com/

public class MainActivity extends AppCompatActivity {
    private WebView mWeb = null;

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

        mWeb = (WebView) findViewById(R.id.WebView1);
        
        WebSettings set = mWeb.getSettings();
        set.setJavaScriptEnabled(true);
        set.setJavaScriptCanOpenWindowsAutomatically(true);
        set.setCacheMode(WebSettings.LOAD_DEFAULT);
        set.setSupportMultipleWindows(true);

        mWeb.loadUrl("https://glacier-han.github.io/AI_Similar_Man/Intro.html");
        mWeb.setWebChromeClient(new WebChromeClient());
        mWeb.setWebViewClient(new WebViewClient());


    }
}

 이렇게 매우 간단하고 몇줄 안되는 코드로 웹뷰를 구현할 수 있다.

하지만, 이는 완전 순수 웹뷰 어플이므로, 웹페이지의 기능에 따라 몇가지 기능을 더 추가하여야 한다.

 

내 닮은꼴 찾기 웹서비스는 카메라와 이미지 업로드 기능을 필요로 하기 때문에,

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

이 코드들을 추가할 것이다.

 

---

이렇게 3편, WebView 구현하기가 끝이 났다.

 

다음 4편에서는, 어플의 디자인, 즉 UI를 이쁘게 꾸미고, 어플을 완성하는 것 까지 포스팅 해 보겠다.