이 블로그를 작성하는 목적은, 전문지식을 알리기 위함이 아니다.
이런 목적으로는 훌륭하신 분들의 사이트가 이미 많다.
나 같이 완전한 비전공자가 App을 만들어 가는 과정을 공유해서, 나처럼 시간,노력을 낭비하지 않게 하기 위함이다.
-------------------------------------------------------------------------------------------------
나는 하이브리드 웹뷰App을 만들어야 한다.
native앱을 만들 능력,시간은 없고, 단순한 웹앱으로 해서는 뽀다구도 안나거니와 구글스토어 등록도 안된다.
하이브리드 웹뷰앱이나 웹앱이나 인터넷 사이트를 보여준다는 건 동일하다.
외관적으로는, 아래처럼 인터넷 주소창이 보이면 웹앱, 안보이면 하이브리드 앱이라고 해도 된다.
하이브리드앱은 프레임워크를 통해서 제작해야하고, 그래서 휴대폰에 apk파일로 설치가 된다. 나중에 개발실력이 좋아지면, 네이티브앱처럼 휴대폰의 센서,카메라 등과 연결되서 활용이 가능하다.
하이브리드 웹뷰앱을 만들려면, 나는 웹사이트만 관리하면 된다. 웹사이트의 디자인과 컨텐츠만 변경하면 휴대폰에 설치가 된 app의 내용도 바뀐다. 그러니 HTML,CSS,Javascript만 공부하면 app을 운영할 수 있는거다.
안드로이드스튜디오로 웹뷰를 만들기까지도 한참이나 헤맸다. 이전에 고수들의 블로그 내용이 안드로이드스튜디오가 업데이트 되면서 적용이 안되는 것도 있고, 코드들을 간단히 복붙했더니 중간에 내용을 import 어쩌고 해야되는 것도 있고해서 안됬다.
서론이 길었는데, 아래와 같이 구현했다.
-----------------------------------------------------------------------
] 안드로이드스튜디오에서 새로운 프로젝트를 생성한다.
Project template는 Empty Activity로 선택
] 생성된 초기화면에서 activity_main.xml로 이동. 아래의 선택 부분을 LinearLayout으로 변경.
] TextView 부분은 삭제하고, WebView 입력
입력라인 :
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"></WebView>
] MainActivity.java로 이동해서 private 2개 라인 입력
입력라인 :
private WebView webview;
private String url="https://(화면에 보일 인터넷 주소)";
위에서 WebView가 빨간색이면 그 단어에 커서를 두고 alt+enter를 쳐서 import class 실시해주면 빨간색이 없어진다.
] @Override 아래로 입력
입력라인 :
webview=(WebView)findViewById(R.id.webview);
webview.getSettings().setJavaScriptEnabled(true);
webview.loadUrl(url);webview.setWebChromeClient(new WebChromeClient());
webview.setWebViewClient(new WebViewClientClass());
빨간색 WebChromeClient()에 커서를 두고 alt+enter를 쳐서 import class 실시.
그 아래의 WebViewClientClass()는 잠시 대기
] 이제 휴대폰에서 뒤로가기를 터치했을때의 동작을 지정해줘야한다.
첫번째 @Override 입력 완료한 아래에서
ctrl+O를 눌러서 onKeyDown을 입력하고 엔터키 누르면 아래에 새로운 @Override가 생성됨.
중간에 아래 두 개 행을 추가해줌. 뒤로가기를 눌렀을 때의 동작을 지정해주는 것임.
입력라인 :
if((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()){ webview.goBack();
return true;}
] 이제 아까 대기했던 빨간색 WebViewClientClass()으로 커서 이동.
alt+enter를 쳐서 Create inner class 선택. 그러면 맨 아래에 새로운 class 지정라인이 생성된다.
] 생성된 라인에 추가 입력.
명령을 닫는 } 마크는 항상 주의하자. 이 사소한 입력을 빼먹어서 동작 안되는 이유를 찾느라 많이 고생한다.
입력라인 :
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url);
return true;}
] 이제 인터넷 권한설정이 필요하다.
app > manifests > AndroidManifest.xml 을 열고 입력해준다.
입력문구 :
<uses-permission android:name="android.permission.INTERNET"/>
자 여기까지 하고 build를 해보면 지정했던 web page가 휴대폰 안으로 들어온 것을 확인할 수 있다.
그런데, 화면 상단에 타이틀바가 있어서 그걸 없애야 한다면, res > values > styles.xml에 아래 태그를 추가하자.
<item name="windowNoTitle">true</item>
이제 우리는 WebView안에 들어갈 내용을 꾸미기 위해서, HTML,CSS,Javascript만 공부하면 된다.!!
그런데, 좀 더 기능을 넣으려면 Vue, 안드로이드스튜디오, Python ...... @_@