전문가는 아니지만 호기심에 한번 만들어보고 있습니다.
목표는 쓸만한 앱을 play 스토어에 올려보는 것입니다. ^^
설치 화면이 대부분이라 지루하고 재미 없을 수도 있습니다.
필요하신 분은 화면만 봐도 잘 이해되실거라고 생각하구요.
저처럼 하고싶은데 잘 모르는 분들에게 아주 조금이라도
도움이 되었으면 좋겠습니다. ^^
시작~
대략적으로 사이트에 껍데기를 씌워 앱처럼 보이게 만든다 입니다.
툴은 Android Studio 를 사용하고 현재는 무료 입니다.
https://developer.android.com/studio/index.html
여기 들어가서 다운 받으시면 되는데 저는 IE에서는 안되고 크롬에서만
동작을 했으니 참고하시기 바랍니다.
가운데쯤 다운로드를 클릭합니다.
약관에 동의를 하고 다운로드를 시작합니다.
다운이 시작되면 설치 지침페이지로 넘어갑니다.
설치에 관해 나오니 한번씩 읽어보시면 좋습니다만 저는 패스 ㅎ
다운받은 파일을 실행합니다.
설정은 왠만하면 건드리지 않겠습니다.
뭐를 마구마구 설치하네요.
저를 환영해 주는 안드로이드 스튜디오 입니다. ㅎㅎ
또 뭘 설치하려나 봅니다.
UI도 고를 수 있군요. 저는 그냥 next만 누릅니다.
한참을 설치하기 시작힙니다.
설치가 끝났나 봅니다. 슬슬 지칩니다. ㅎㅎ
가장 위에 Start 어쩌고 Project 를 선택합니다.
왠만한건 다 그냥 넘어갑니다.
아무것도 없는 빈화면을 선택합니다.
웹페이지를 그냥 보여주기 때문에 빈화면만 있으면 됩니다. ^^
또 뭘 설치 합니다. ㅎ
드디어 시작하나 봅니다. 팁박스는 닫아 버립니다. ^^
시작 화면을 드디어 보게 되는군요 ㅎㅎ
아래쪽에 에러가 보여서 클릭해 봤더니 뭘 또 설치합니다. ㅎㅎ
라이센스가 필요한가 봅니다. 동의를 하고 진행합니다. 또 설치 합니다. ㅎ
설치를 다하고 나서 보니 에러가 또 보입니다.
클릭을 하니 또 뭘 설치 합니다.
컴포넌트를 설치해야 하나 봅니다.
이제 에러가 보이지 않습니다. ㅎㅎ
PC에서 바로 실행 할 수 있도록 가상 디바이스를 설정합니다.
툴 - 안드로이드 - AVD 매니저를 선택합니다.
새로 만들어야 하는군요. 가운데 Create 어쩌고를 클릭합니다.
기본으로 선택되어 있는 넥서스5S를 선택 했습니다.
스마트폰이 너무 빨리 바뀌다 보니 너무 최신으로 하면 지원을 안하는 코드가 있을 수도
있다고 하니 참고하시기 바랍니다.
폰을 선택했는데 Next가 활성화가 안됩니다.
API27 Download를 선택합니다.
또 뭘 다운받습니다. ㅎㅎ
이것도 라이센스 동의가 필요한가 봅니다.
설치를 정말 많이 하는것 같습니다. ㅎㅎ
설치가 끝나니 Next를 누를 수 있습니다.
이름이나 설정은 그냥 있는거로 진행합니다.
이제 오른쪽 위쪽에 app 박스를 클릭하고 바로 아래 Edit 어쩌고를 클릭합니다.
팝업이 나오면 안드로이드 앱을 선택하고 위에 녹색 +를 선택합니다.
나오는 리스트에서 안드로이드 앱을 선택합니다.
가운데 위쪽에서 이름을 적고 그 아래 모듈을 눌러 app를 선택합니다.
그리고 OK를 누릅니다.
여기까지가 설치과정 입니다. ㅎㅎ
이제 화면에 웹페이지를 뿌리기 위해 디자인을 합니다.
기본적인 화면 입니다. 이 화면은 실행했을때 기본으로 보여주는 페이지입니다.
이렇게 디자인 탭으로 선택 되있는것을 Text 탭으로 선택한 후 소스를 입력해도 됩니다.
오른쪽 화면에 webview라고 나오죠?
아니면 처음 디자인 화면에서
hello world 를 선택해 삭제를 합니다.
그다음 xml 파일 아래 돋보기를 선택하고 webview를 입력합니다.
그리고 돋보기 아래 나오는 웹뷰라는 리스트를 마우스로 잡아서 왼쪽 화면에 놓습니다.
그럼 조금전 text에서 입력했던과 동일하게 웹뷰가 스마트폰 화면에 나오게 됩니다.
그리고 화면 오른족에 화살표가 교차하고 있는 아이콘이 있는데 그걸 클릭해서
웹뷰에 아이디를 적어 줍니다. 아이디는 개인적으로 적고 싶은걸 적습니다.
저는 steemit을 적어 보았습니다. ㅎ
자 이제 옆에 있는 java파일을 선택합니다.
그리고 이제 해당 웹페이지가 있는 주소를 적습니다.
WebView myWebView = (WebView) findViewById(R.id.steemit);
myWebView.loadUrl("http://www.steemit.com");
첫째줄 R.id. 뒤에는 웹뷰에서 적었던 id를 적습니다. 저는 steemit 입니다.
그리고 두번째 줄에는 웹페이지 주소를 적습니다.
그런데 자꾸 에러가 납니다.
에러난 곳을 클릭하면 빨간 전구가 나오는데 그걸 선택하면 아래 리스트가 나옵니다.
class가 없나보군요. import class를 클릭합니다.
class가 뭔지 설명은 못드립니다. ^^ 저도 잘 모르거든요 ㅎㅎ
그러고도 자꾸 에러가 납니다.
일단 가장 디바이스를 실행 해보겠습니다.
오른쪽 위에 녹색 세모를 클릭합니다. shift+f10을 해도 됩니다.
그리고 설정했던 가상 디바이스를 선택합니다.
로딩이 되면서 가상 디바이스가 나왔습니다.
소스를 입력하는 화면에서는 에러가 났구요. ㅎㅎ
왜 에러가 났는지 한참만에 이유를 알아냈습니다.
위에 } 안에 소스를 넣었어야 했습니다.
그래서 위로 이동 했더니 빨간줄은 없어졌습니다.
이제 다시 오른쪽 위에 profile 어쩌고 버튼을 클릭합니다.
허용해달라는건 허용해 줍니다.
가장 디바이스에서 에러를 보여줍니다.
인터넷이 되려면 권한이 필요하다고 합니다.
그래서 소스상에서 권한을 줘보겠습니다.
왼쪽에 탐색기같은 화면이 보이시나요?
app - manifests - AndroidManifest.xml 파일이 있습니다.
그 파일을 더블클릭해서 열어 줍니다.
그리고 아래 코드를 입력합니다.
<uses-permission android:name="android.permission.INTERNET" />
위치를 잘 보고 입력해줘야 합니다.
다시 화면 오른쪽 위에 profile 어쩌고 버튼을 누릅니다.
가상 디바이스가 크롬화면으로 바뀝니다.
대충 동의를 하고, 다음화면에서는 no thanks를 선택합니다.
드디어 그 보고싶던 스티밋 화면이 보입니다.^^
이제 apk 파일로 만나볼까요?
build에서 build APK를 선택합니다.
그럼 가운데 아래 팝업처럼 작은 화면이 생깁니다. 거기에 locate라고 있는데
apk가 생긴폴더를 보여 줍니다.
드디어 apk 파일을 확인 했습니다.
이 파일은 테스트로 만들어 봤습니다.
나중에 조금더 다듬에서 블로그나 필요한 웹페이지를 앱으로 만들어서 사용해 봐야겠습니다.
새로운 기능을 익혀서 다시 포스팅 하겠습니다. ^^