※ 이 글은 앱을 만들어보고는 싶지만, 직업으로 하고 싶지는 않은 정도의 사람이 쉽게(?) 앱만들기를 체험해보는 내용입니다.
※ 쉽게 따라하기 위해 내이티브앱이 아닌 웹앱(PhoneGap 이용)으로 만듭니다.
※ 학교에서 소프트웨어 교육을 강조해서 그런지, 학생들에게 앱만드는거 가르쳐줄 수 있냐고 가끔 묻는 사람이 있어 만들기 시작했습니다.
지난 글 ( 어설픈 앱만들기1 - 01. 스마트폰에 폰갭(phonegap)으로 HelloWorld 앱 실행하기 ) 에서는 PhoneGap Hello World 예제 소스를 압축해서 http://build.phonegap.com 사이트에서 쉽게 안드로이드 앱을 빌드해서 폰에 설치하는 것을 해봤습니다.
※ 이 글에서 하는거
- 앱 모양을 쉽게 만들기 위해 사용할 템플릿을 고릅니다.
- Hello World예제에 위에서 고른 템플릿을 적용합니다.
- 브라우저에서 앱을 확인하면서 가위바위보 게임을 만들어 봅니다.
1. 지난 번에 다운받고 빌드해본 Hello World 예제는 빈 화면에 이미지만 있는 간단한 화면이었습니다.
이 소스를 앱과 같은 형태로 보이도록 만들기 위해서는 HTML과 CSS로 직접 모양을 만들어가는 방법도 있습니다만,
여기선 jquery mobile bootstrap Theme 를 사용해서 쉽게 모양을 만들어 봅니다.
소스 : https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme
2. 소스를 다운로드 받아서 압축을 풀면 위 파일 목록을 볼 수 있습니다.
3. 지난번에 다운받아놓은 Hellp World 소스에서 index.html 파일을 jquery mobile bootstrap 의 index.html을 참고하여 수정합니다.
4. Hello World 소스의 www폴더에 [jQuery-Mobile-Bootstrap-Theme] 폴더의 themes 폴더를 복사합니다.
5. 브라우저에서 index.html파일을 열어봅니다.
6. 디자인을 수정해보겠습니다.
수정하는 김에 간단한 가위바위보 게임을 만들어봐야 겠습니다. 제목을 "가위바위보"로 바꾸고, 가위 바위 보 3개의 버튼을 넣고, 승/패를 표시하는 텍스트 필드를 2개 넣겠습니다.
게임이라 부르기 부끄럽군요. ^^
나머지는 있던 소스를 복사해서 만들었구요.
승, 패, 승률 아래 들어간 텍스트 폼은 jquery mobile api document 의 Forms부분을 참고했습니다. 넣고 싶은 컨트롤의 아래 보면 "View Source"버튼을 클릭하면 해당 소스가 팝업으로 표시됩니다. 소스 내용을 더블클릭 하면 복사할 수 있습니다.
7. 만들려고 하니 다른 컨트롤들도 보여 화면을 조금 더 수정했습니다. 앱이 낸 결과를 보여주는 텍스트를 추가하고, 버튼을 그룹으로 묶인 걸로 수정했습니다.
8. 다음은 자바스크립트를 추가하여 버튼을 동작하게 합니다.
모양도 살짝 수정했습니다.
음 많이 부족하지만, 연습삼아 만들어 본 가위, 바위, 보 게임을 만들어봤습니다.
9. 그럼 빌드도 해서 폰에서도 해볼까요!
소스를 압축해서 http://build.phonegap.com 에서 빌드했습니다.
폰에 다운로드 후 설치했습니다.( 설치가 안되면 전에 설치했던 앱을 지우고 다시 설치해보세요. )
앗 앱을 실행하니 모양이 이상하네요.
viewport 설정이 틀렸나봅니다.
제대로 나오네요.
몇번 해봤습니다만, 승률이 낮네요 ^^
LG Gpro에서 실행했습니다. 다른건 어떨지 모르겠습니다.
지난 시간에 다운받은 Hello World 예제 소스를 수정해서 jquery mobile bootstrap template를 적용하고, 간단한 가위, 바위, 보 게임을 만들어봤습니다.
다음엔 뭘 만들어볼까요. ~~~
'어설픈 프로그래밍 따라하기' 카테고리의 다른 글
| 어설픈 앱만들기1 - 01. 스마트폰에 폰갭(phonegap)으로 HelloWorld 앱 실행하기 (2) | 2015.08.19 |
|---|
