도전!19 - 웹으로 가져온 데이터 보여주기

0️⃣build.gradle, Manifest 코드 추가

build.gradle

dependencies {
    implementation("com.android.volley:volley:1.2.1")
    implementation("com.google.code.gson:gson:2.8.6")

 

androidManifest.xml

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

 

 

 

 

 

1️⃣activity_main.xml

[전체 코드]

살짝 이상하게 만듦. 텍스트뷰랑 웹뷰랑 딱 절반씩 공간을 나누려고 했는데 텍스트뷰가 조금 더 넓어짐

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView_web"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:text="웹으로 가져오기"
        android:textSize="34sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:orientation="horizontal"
        android:weightSum="10">

        <EditText
            android:id="@+id/editTextText"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_weight="8"
            android:background="@drawable/box"
            android:ems="10"
            android:inputType="text"
            android:paddingHorizontal="10dp"
            android:paddingVertical="10dp"
            android:text="https://amye3057.github.io/github/%EC%8B%A4%ED%97%98%EC%9A%A9/" />

        <Button
            android:id="@+id/button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:paddingVertical="13dp"
            android:text="요청"
            android:textSize="20sp" />
    </LinearLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="230dp"
        android:layout_margin="10dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingBottom="230dp"
                android:textSize="20sp" />
        </LinearLayout>
    </ScrollView>

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp" />

</LinearLayout>

 

 

 

 

 

2️⃣MainActivity.java

package com.example.doitmission_19;

public class MainActivity extends AppCompatActivity {
    EditText editText;
    TextView textView;
    WebView webView;
    static RequestQueue requestQueue;

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

        editText = findViewById(R.id.editTextText);
        textView = findViewById(R.id.textView);

        // 웹뷰 세팅
        webView = findViewById(R.id.webView);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webView.setWebViewClient(new WebViewClient());

        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                makeRequest(); // textView에 데이터 출력하기
                new Handler().postDelayed(() -> {
                    showWebView(); // 웹뷰에 사이트 나타내기
                }, 1000);
            }
        });

        if(requestQueue==null){
            requestQueue = Volley.newRequestQueue(getApplicationContext());
        }
    }

    private void makeRequest() {
        String url = editText.getText().toString();

        StringRequest stringRequest = new StringRequest(Request.Method.GET,
                url,
                new Response.Listener<String>() {
                    @Override
                    public void onResponse(String response) {
                        textView.append(response+"\n");
                    }
                },
                new Response.ErrorListener() {
                    @Override
                    public void onErrorResponse(VolleyError error) {
                        textView.append("에러->"+error.getMessage()+"\n");
                    }
                }
        ){
            @Nullable
            @Override
            protected Map<String, String> getParams() throws AuthFailureError {
                Map<String, String> params = new HashMap<String, String>();
                return params;
            }
        };

        stringRequest.setShouldCache(false);
        requestQueue.add(stringRequest);
    }

    private void showWebView() {
        String data = textView.getText().toString();
        webView.loadDataWithBaseURL(null,data,"text/html","utf-8",null);
    }

}

 

🔸webView 세팅하기

        // 웹뷰 세팅
        webView = findViewById(R.id.webView);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webView.setWebViewClient(new WebViewClient());

 

🔸onClick

 public void onClick(View v) {
    makeRequest(); // textView에 데이터 출력하기
    new Handler().postDelayed(() -> {
        showWebView(); // 웹뷰에 사이트 나타내기
    }, 1000);
}

makeRequest랑 showWebView 메서드를 새로 작성한다.

makeRequest() : 리퀘스트 큐에 스트링리퀘스트(파라미터 4개) 객체 넣기

showWebView() : 웹으로 가져온 데이터를 웹뷰에 넣기

 

url을 가지고 사이트를 웹뷰에 넣는게 아니라, 웹의 html 데이터를 가지고 웹 형태를 다시 구축하여 보여주는 것이다.

 

비동기 처리 문제 해결 : 핸들러 사용

처음엔 핸들러를 사용하지 않았더니, makeRequest()랑 showWebView()가 동시에 실행되어서

makeRequest로 가져온 html 텍스트 데이터를 읽지 못하는 것이었다.

 

이럴 경우 콜백을 사용하거나, LiveData같은 비동기 데이터 처리 방식을 사용하는 것이 좋다고 했다.

또는 그냥 핸들러 postDelayed 메서드를 사용하는 것. 챗지피티가 비추천하긴 했지만, 예제를 간단하게 해결하기 위해선 이 방법이 제일 좋아서 핸들러를 사용하여 1초 뒤 수행되도록 설정했다.

 

🔸showWebView()

    private void showWebView() {
        String data = textView.getText().toString();
        //webView.loadUrl(url);
        webView.loadDataWithBaseURL(null,data,"text/html","utf-8",null);
    }

처음에 문제를 이해하지 못해서 loadUrl을 썼다가 수정.

loadDataWithBaseURL을 사용함.

처음엔 loadDataWithBaseURL의 두번째 파라미터에 url을 넣었음.

그래서 url이 그냥 그대로 출력됨.

 

webview의 loadData 사용 시 화면에 아무것도 나타나지 않을때

 

 

 

 

 

3️⃣실행 결과

 

나의 깃허브 블로그 중 한 페이지 https://amye3057.github.io/github/%EC%8B%A4%ED%97%98%EC%9A%A9/ 를 url에 넣어보았다. 

상단에는 html 데이터, 하단에는 html로 새로 구축된 웹뷰가 나타났다.

 

클릭하면 나의 블로그의 다른 페이지로 이동도 한다.

근데 아래 블로그에서는, 새로 구축한 웹뷰이기 때문에 클릭은 먹히지 않는다고 했는데.. 난 왜 되지. 모르겄다

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