도전과제 19 : 웹으로 가져온 데이터 보여주기 (Do it 안드로이드 앱 프로그래밍)[JAVA]

 

도전과제 19

웹으로가져온 데이터 원본과 함께 웹뷰에서 해당 페이지도 같이 볼 수 있도록 합니다. HTML 문서를 웹뷰에서 보면 웹브라우저에서 보는 것처럼 표시 됩니다.

1. 웹사이트 주소를 입력할 수 있는 입력상자와 버튼을 화면 상단에 배치합니다.
2. [요청] 버튼을 누르면 웹으로 데이터를 가져옵니다.
3. 화면의 가운데 부분에는 가져온 데이터를 보여주도록 합니다.
4. 화면의 아래쪽에는 웹뷰를 추가하고 웹으로 가져온 데이터를 웹뷰에 넣어 보여줍니다.

참고할 점
웹사이트에서 가져와야 할 페이지나 이미지는 여러 개일 수 있습니다.
따라서 웹뷰에 표시되는 웹 문서는 완벽하지 않을 수 있습니다.

 

풀이

메인 화면은 아래와 같이 위에는 웹의 html 파일을 보여줄 스크롤 뷰, 아래는 위의 html파일을 바탕으로 다시 구축할 웹뷰로 구성하였다.

메인 액티비티에서 스레드를 활용하여 인터넷 창의 내용을 가져왔는데, HTTP로 웹 서버에 접속하는 법은 다음과 같다.  URL객체에 들어있는 문자열이 "http://"를 포함하면 HTTP연결을 위한 객체를 만들게 된다.
url의 openConnection() 메소드가 리턴하는 URLConnection 객체를 HttpURLConncetion으로 형변환하여 사용하는 것이다.
setRequestMethod()등을 통해 GET, POST방식을 정할 수 있고,
BufferedReader를 선언해 HttpURLConnection의 getInputStream()메소드로 읽어오는 데이터값을 읽어올 수 있다.

public void request(String urlStr){
        StringBuilder output = new StringBuilder();
        try{
            URL url  = new URL(urlStr);
            HttpURLConnection con = (HttpURLConnection) url.openConnection();
            if(con != null){
                con.setConnectTimeout(10000);
                con.setRequestMethod("GET");
                con.setDoInput(true);

                int resCode = con.getResponseCode();
                BufferedReader reader = new BufferedReader(new InputStreamReader(con.getInputStream()));
                String line = null;
                while(true){
                    line = reader.readLine();
                    if(line ==null) break;
                    output.append(line+"\n");
                }
                reader.close();
                con.disconnect();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        //스레드 내에서는 xml을 변경할 수 없어서 handler로 해야함
        println(output.toString());
        printView(output.toString());
    }

이제 이 String값으로 다시 html을 재구성하는 방법은, WebView의 loadDataWithBaseURL()을 통해 할 수 있다.

public void printView(final String data){
        handler.post(new Runnable() {
            @Override
            public void run() {
                webView.loadDataWithBaseURL(null,data,"text/html","utf-8",null);
            }
        });
    }

마찬가지로 모든 스레드 자체에서 UI를 관여할 수 없기 때문에 Runnable 객체를 사용하였고, 인터넷 권한이 필요하기 때문에 AndroidManifest.xml역시 다음의 권한을 추가해줘야 한다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="org.techtown.doitmission_19">
    <uses-permission android:name="android.permission.INTERNET"/>
    //중략

 

결과

위에가 웹의 데이터, 아래가 다시 구성한 화면이다.

아래의 웹뷰에서 클릭 같은 기능은 구현되지 않는다. 말 그대로 위의 String을 토대로 다시 형태만 만든것이기 때문!

전체 소스코드 : https://github.com/howtolivelikehuman/DoitAndroid/tree/master/DoitMission_19/app/src/main

howtolivelikehuman/DoitAndroid