New to Busy?

사이트 안드로이드 앱으로 만들어보기 1탄

4 comments

yongs
48
2 years agoBusy4 min read

전문가는 아니지만 호기심에 한번 만들어보고 있습니다.

목표는 쓸만한 앱을 play 스토어에 올려보는 것입니다. ^^

설치 화면이 대부분이라 지루하고 재미 없을 수도 있습니다.

필요하신 분은 화면만 봐도 잘 이해되실거라고 생각하구요.

저처럼 하고싶은데 잘 모르는 분들에게 아주 조금이라도

도움이 되었으면 좋겠습니다. ^^

시작~

대략적으로 사이트에 껍데기를 씌워 앱처럼 보이게 만든다 입니다.

툴은 Android Studio 를 사용하고 현재는 무료 입니다.

https://developer.android.com/studio/index.html

여기 들어가서 다운 받으시면 되는데 저는 IE에서는 안되고 크롬에서만

동작을 했으니 참고하시기 바랍니다.

K-001.png

가운데쯤 다운로드를 클릭합니다.

K-004.png

약관에 동의를 하고 다운로드를 시작합니다.

K-005.png

다운이 시작되면 설치 지침페이지로 넘어갑니다.

K-006.png

설치에 관해 나오니 한번씩 읽어보시면 좋습니다만 저는 패스 ㅎ

K-008.png

다운받은 파일을 실행합니다.

K-009.png

설정은 왠만하면 건드리지 않겠습니다.

K-010.png

뭐를 마구마구 설치하네요.

K-011.png

저를 환영해 주는 안드로이드 스튜디오 입니다. ㅎㅎ

K-012.png

또 뭘 설치하려나 봅니다.

K-013.png

UI도 고를 수 있군요. 저는 그냥 next만 누릅니다.

K-014.png

K-015.png

한참을 설치하기 시작힙니다.

K-017.png

설치가 끝났나 봅니다. 슬슬 지칩니다. ㅎㅎ

K-018.png

가장 위에 Start 어쩌고 Project 를 선택합니다.

K-021.png

왠만한건 다 그냥 넘어갑니다.

K-022.png

K-023.png

아무것도 없는 빈화면을 선택합니다.

웹페이지를 그냥 보여주기 때문에 빈화면만 있으면 됩니다. ^^

K-024.png

K-025.png

또 뭘 설치 합니다. ㅎ

K-026.png

K-027.png

드디어 시작하나 봅니다. 팁박스는 닫아 버립니다. ^^

K-028.png

시작 화면을 드디어 보게 되는군요 ㅎㅎ

아래쪽에 에러가 보여서 클릭해 봤더니 뭘 또 설치합니다. ㅎㅎ

K-029.png

K-030.png

K-031.png

라이센스가 필요한가 봅니다. 동의를 하고 진행합니다. 또 설치 합니다. ㅎ

K-032.png

설치를 다하고 나서 보니 에러가 또 보입니다.

K-033.png

클릭을 하니 또 뭘 설치 합니다.

K-034.png

K-035.png

컴포넌트를 설치해야 하나 봅니다.

K-036.png

이제 에러가 보이지 않습니다. ㅎㅎ

K-037.png

PC에서 바로 실행 할 수 있도록 가상 디바이스를 설정합니다.

K-038.png

툴 - 안드로이드 - AVD 매니저를 선택합니다.

K-039.png

새로 만들어야 하는군요. 가운데 Create 어쩌고를 클릭합니다.

K-040.png

기본으로 선택되어 있는 넥서스5S를 선택 했습니다.

스마트폰이 너무 빨리 바뀌다 보니 너무 최신으로 하면 지원을 안하는 코드가 있을 수도

있다고 하니 참고하시기 바랍니다.

K-041.png

폰을 선택했는데 Next가 활성화가 안됩니다.

API27 Download를 선택합니다.

K-042.png

또 뭘 다운받습니다. ㅎㅎ

K-043.png

이것도 라이센스 동의가 필요한가 봅니다.

K-044.png

설치를 정말 많이 하는것 같습니다. ㅎㅎ

K-045.png

설치가 끝나니 Next를 누를 수 있습니다.

K-046.png

이름이나 설정은 그냥 있는거로 진행합니다.

이제 오른쪽 위쪽에 app 박스를 클릭하고 바로 아래 Edit 어쩌고를 클릭합니다.

K-048.png

팝업이 나오면 안드로이드 앱을 선택하고 위에 녹색 +를 선택합니다.

K-049.png

나오는 리스트에서 안드로이드 앱을 선택합니다.

K-050.png

가운데 위쪽에서 이름을 적고 그 아래 모듈을 눌러 app를 선택합니다.

K-051.png

그리고 OK를 누릅니다.

여기까지가 설치과정 입니다. ㅎㅎ

이제 화면에 웹페이지를 뿌리기 위해 디자인을 합니다.

K-052.png

기본적인 화면 입니다. 이 화면은 실행했을때 기본으로 보여주는 페이지입니다.

K-053.png

이렇게 디자인 탭으로 선택 되있는것을 Text 탭으로 선택한 후 소스를 입력해도 됩니다.

오른쪽 화면에 webview라고 나오죠?

아니면 처음 디자인 화면에서

K-054.png

hello world 를 선택해 삭제를 합니다.

K-055.png

그다음 xml 파일 아래 돋보기를 선택하고 webview를 입력합니다.

K-056.png

그리고 돋보기 아래 나오는 웹뷰라는 리스트를 마우스로 잡아서 왼쪽 화면에 놓습니다.

K-057.png

그럼 조금전 text에서 입력했던과 동일하게 웹뷰가 스마트폰 화면에 나오게 됩니다.

그리고 화면 오른족에 화살표가 교차하고 있는 아이콘이 있는데 그걸 클릭해서

웹뷰에 아이디를 적어 줍니다. 아이디는 개인적으로 적고 싶은걸 적습니다.

저는 steemit을 적어 보았습니다. ㅎ

K-059.png

자 이제 옆에 있는 java파일을 선택합니다.

K-058.png

그리고 이제 해당 웹페이지가 있는 주소를 적습니다.

WebView myWebView = (WebView) findViewById(R.id.steemit);
myWebView.loadUrl("http://www.steemit.com");

K-060.png

첫째줄 R.id. 뒤에는 웹뷰에서 적었던 id를 적습니다. 저는 steemit 입니다.
그리고 두번째 줄에는 웹페이지 주소를 적습니다.

그런데 자꾸 에러가 납니다.

K-062.png

에러난 곳을 클릭하면 빨간 전구가 나오는데 그걸 선택하면 아래 리스트가 나옵니다.

class가 없나보군요. import class를 클릭합니다.

class가 뭔지 설명은 못드립니다. ^^ 저도 잘 모르거든요 ㅎㅎ

K-063.png

그러고도 자꾸 에러가 납니다.

일단 가장 디바이스를 실행 해보겠습니다.

오른쪽 위에 녹색 세모를 클릭합니다. shift+f10을 해도 됩니다.

K-065.png

그리고 설정했던 가상 디바이스를 선택합니다.

K-066.png

로딩이 되면서 가상 디바이스가 나왔습니다.

소스를 입력하는 화면에서는 에러가 났구요. ㅎㅎ

왜 에러가 났는지 한참만에 이유를 알아냈습니다.

K-067.png

위에 } 안에 소스를 넣었어야 했습니다.

그래서 위로 이동 했더니 빨간줄은 없어졌습니다.

이제 다시 오른쪽 위에 profile 어쩌고 버튼을 클릭합니다.

K-068.png

허용해달라는건 허용해 줍니다.

가장 디바이스에서 에러를 보여줍니다.

인터넷이 되려면 권한이 필요하다고 합니다.

그래서 소스상에서 권한을 줘보겠습니다.

K-069.png

왼쪽에 탐색기같은 화면이 보이시나요?

app - manifests - AndroidManifest.xml 파일이 있습니다.

그 파일을 더블클릭해서 열어 줍니다.

그리고 아래 코드를 입력합니다.

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

K-070.png

위치를 잘 보고 입력해줘야 합니다.

다시 화면 오른쪽 위에 profile 어쩌고 버튼을 누릅니다.

K-071.png

가상 디바이스가 크롬화면으로 바뀝니다.

K-072.png

대충 동의를 하고, 다음화면에서는 no thanks를 선택합니다.

K-073.png

드디어 그 보고싶던 스티밋 화면이 보입니다.^^

이제 apk 파일로 만나볼까요?

build에서 build APK를 선택합니다.

K-074.png

그럼 가운데 아래 팝업처럼 작은 화면이 생깁니다. 거기에 locate라고 있는데

apk가 생긴폴더를 보여 줍니다.

K-075.png

K-076.png

드디어 apk 파일을 확인 했습니다.

이 파일은 테스트로 만들어 봤습니다.

나중에 조금더 다듬에서 블로그나 필요한 웹페이지를 앱으로 만들어서 사용해 봐야겠습니다.

새로운 기능을 익혀서 다시 포스팅 하겠습니다. ^^

Comments

Sort byBest