Hybrid App - 0세대 WebApp (안드로이드 스튜디오로 html 작성 및 반응형 웹 열기)

-WebApp

웹페이지인데 CSS를 이용해서 앱처럼 보이는 것 ( JQM library를 사용하면 편하다. )

 

-하이브리드앱(1세대) Native App

안드로이드 앱 안에서 WebView가 있고 거기에 HTML, CSS, JS를 넣으면 된다.

그러나 핸드폰의 기능을 사용을 못한다.

그래서 JS와 자바의 메소드를 연결 [ cordova ]해서 웹어서 버튼을 눌러도 휴대폰 기능을 사용할 수 있다.

 

-하이브리드앱(2세대) React Native

 

0세대부터 알아보자. 기본적인 WebApp

<최종 화면> android studio에서 html등을 만들고 보여줄 수 있다.

그리고 미리 만든 반응형 웹도 앵커요소를 통해 열린다.

---

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <WebView
        android:id="@+id/wv"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </WebView>
 
</RelativeLayout>
 

html 등 파일을 보관하기위해 asset 폴더를 만들자.

assets 폴더 안에 화면에 보여줄 index.html 파일을 만들자.

버튼이 클릭 됐을때, 수행할 스크립트 파일(index.js)을 만들자.

MainActivity.java

package com.example.hybridapptest;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
 
public class MainActivity extends AppCompatActivity {
 
    WebView wv;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        wv=findViewById(R.id.wv);
 
        //기본적으로 웹뷰는 Javascript 실행을 허용하지 않도록 설정되어 있음.
        //웹뷰의 설정을 통해 JS 사용을 허용하도록 변경
        //웹의 설정객체를 얻어오기
        WebSettings settings=wv.getSettings();
        settings.setJavaScriptEnabled(true);
 
        //2가지 반드시 해야할 설정
        //1. 웹문서가 열릴때 기본적으로 내 WebView가 아니라 새로운 웹뷰를 열어주는 방식을 사용함.
        //그래서 현재의 WebView안에 웹문서가 열리도록 설정
        wv.setWebViewClient(new WebViewClient());
        //2. alert(), comfirm() 같은 팝업기능의 JS코드가 사용가능하도록하는 코드 필요
        wv.setWebChromeClient(new WebChromeClient());
 
        //웹뷰가 보여줄 웹문서 (.html) 로드하기
        //하이브리드앱은 오프라인에서도 동작해야 하므로
        //웹문서가 이 프로젝트 안에 위치해야함
        wv.loadUrl("file:///android_asset/index.html"); //에셋 주소 : /android_asset
    }
}
 

하이브리드 앱이기 때문에 alert도 가능하다.

이미지 추가를 위해 우건 images 폴더를 만들자.

images 폴더 안에 임의로 이미지 파일을 넣었다.

index.html 에 추가하자.

그러나 이미지 파일이 커서 잘린다. 크기를 지정하자.

이미지에 대한 크기는 외부 css 파일을 이용해서 할 것이다.

assets 폴더에 index.css 파일을 만들자.

그리고 이미 만들어 놓은 반응형 웹 04_template.html 을 휴대폰으로도 보여줄 수 있다.

04_template.html

0.00MB

반응형으로 만든 html 파일을 assets 폴더에 추가하자.

이제 앵커 요소를 누르면 준비된 반응형 웹을 띄우자.

그러나 해당 웹이 스타일이 안된 이유는 Bootstrap으로 class 지정을 했는데, 인터넷이 필요하다.

안드로이드에서 인터넷 퍼미션을 주자.

아마 반응형 웹에 이미지도 있을 것이다. 그것도 복붙하자.

assets 폴더에 imgs 폴더를 만들고 거기에 해당 이미지를 넣었다.

그리고 만약 새로운 페이지가 열렸을때 뒤로가기 버튼을 누르면 앱이 꺼진다... ( 그 전 페이지로 돌아가고 싶은데.. )

만약 뒤로갈 페이지가 있다면 아래 코드를 써주자.

---

<복붙용 코드>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <WebView
        android:id="@+id/wv"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </WebView>
 
</RelativeLayout>
 

MainActivity.java

package com.example.hybridapptest;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
 
public class MainActivity extends AppCompatActivity {
 
    WebView wv;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        wv=findViewById(R.id.wv);
 
        //기본적으로 웹뷰는 Javascript 실행을 허용하지 않도록 설정되어 있음.
        //웹뷰의 설정을 통해 JS 사용을 허용하도록 변경
        //웹의 설정객체를 얻어오기
        WebSettings settings=wv.getSettings();
        settings.setJavaScriptEnabled(true);
 
        //2가지 반드시 해야할 설정
        //1. 웹문서가 열릴때 기본적으로 내 WebView가 아니라 새로운 웹뷰를 열어주는 방식을 사용함.
        //그래서 현재의 WebView안에 웹문서가 열리도록 설정
        wv.setWebViewClient(new WebViewClient());
        //2. alert(), comfirm() 같은 팝업기능의 JS코드가 사용가능하도록하는 코드 필요
        wv.setWebChromeClient(new WebChromeClient());
 
        //웹뷰가 보여줄 웹문서 (.html) 로드하기
        //하이브리드앱은 오프라인에서도 동작해야 하므로
        //웹문서가 이 프로젝트 안에 위치해야함
        wv.loadUrl("file:///android_asset/index.html"); //에셋 주소 : /android_asset
    }
 
//    뒤로가기 버튼 눌렀을 때 웹뷰의 페이지가 돌아가기 페이지가 있다면
//    페이지를 되돌리도록
    @Override
    public void onBackPressed() {
 
        if(wv.canGoBack()) wv.goBack();
        else super.onBackPressed();
    }
}
 

index.html

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
<!--        웹뷰에서는 타이틍이 보이지 않아서 무의미함-->
        <title></title>
 
<!--        외부 script코드-->
        <script src="index.js"></script>
 
<!--        외부 css-->
        <link rel="stylesheet" href="index.css">
 
    </head>
    <body>
        <h2>My First WebApp</h2>
        <p>This is WebApp test page</p>
 
        <button onclick="clickBtn()">button</button>
        <h4 id="aa"></h4>
 
        <img src="./images/img12.jpg">
 
        <a href="./04_template.html">Go template</a>
    </body>
</html>
 

index.css

img {width:100%;}
 
h2{background-color:indigo; color:white}

index.js

function clickBtn(){
    var e= document.getElementById('aa');
    e.innerHTML="Hello";
 
    alert('clicked');
}