2014년 11월 5일 수요일

푸시알림기능을 갖는 모바일웹앱 만들기 (해외 무료 푸시서버 활용하기 1/2)

원문  http://blog.naver.com/feelpoison/207407021


아래는 모바일페이지가 있다면 간단히 무료로 푸시기능을 추가하여 앱을 만드는 방법 입니다.

먼저 완성된 화면을 보시면 로딩페이지, 푸시설정메뉴, 푸시메시지 확인시 앱 동작등 웹앱의 기본적인 내용들이 있습니다. 


        
       

조금만 수고를 하면 앱개발비나 월정액 없이 푸시기능이 있는 앱을 무료로 만드는 방법을 알아 보도록 하겠습니다.
해외의 무료푸시알림서버를 이용하는 방법으로 손쉽게 수정할 수 있도록 구현되어 있는 소스를 올렸습니다. 첨부는 푸시앱템플릿입니다.

첨부에 있는 앱 템플릿을 다운로드 받아 간단히 URL과 이미지를 바꾸고 몇가지 절차를 따라하면, 완전 무료로 푸시를 무제한 사용 할 수 있는 앱을 가질 수 있습니다.

* 앱템플릿 : 부분적으로 수정하여 앱 개발이 가능하도록 미리 완전한 형태의 앱으로 만들어 놓은 앱 프로젝트 파일 

먼저 앱을 개발하기 위해서는 개발툴을 깔아야 합니다. 개발자가 아닌 경우 개발툴을 깐다는 것이 부담은 있으나 그다지 어렵지 않으니 한번 해보시는 것도 좋을 듯합니다.


앱 개발은 순서는 

1. 개발툴 설치
2. 어플리케이션 템플릿 다운로드 -첨부에 있습니다.-
3. 무료 푸시서버 계정생성 
4. 앱 템플릿 수정 및 푸시서버 연동 

형식으로 이루어 집니다. 


그럼 이제 앱을 개발해보도록 합니다.


준비하기편

1. 안드로이드 개발툴 설치

안드로이드 개발환경 구축 방법은 네이버에서 검색하면 많이 나옵니다.  http://kmsblog.tistory.com/92 링크를 참고해서 3번항까지만 따라 하시면 됩니다.
여기서는 새로운 프로젝트를 안만들고 첨부된 앱템플릿을 불러서 간단히 수정만 할 껍니다.
  
2. 앱 템플릿 다운로드 및 프로젝트로 불러오기

1.번의 과정을 통해서 개발툴을 설치 하셨다면 아래의 과정으로 넘어가도록 합니다. 

2.1 앱 템플릿 다운로드

첨부파일은 미리 만들어 놓은 앱템플릿으로 압축파일로 안의 구조는 아래와 같습니다.

첨부파일은 앱개발 프로젝트를 통째로 압축한 파일입니다. 부분적으로 수정하여 앱을 만들어보도록하겠습니다.

- 압축을 푸시기 전에!!  경로는 C: 또는 D: 드라이브에 C:/Apps/ 이렇게 폴더를 하나 만드신후 그 안에 푸시는 것이 좋습니다. 바탕화면 같은 곳에 풀어 놓으시면 나중에 관리하기 어렵습니다.
- 디렉토리에 압축을 풀면 C:/Apps/HybridAppB01_Android/ 이런 식으로 폴더가 생깁니다. 
- 폴더명을 수정합니다 EX) C:/Apps/MyApp 이런식으로 자신이 보기 편한 형태로 바꾸어 줍니다.


2.2 앱 템플릿 불러오기

개발툴을 깔고 압축파일을 해제하였다면, 이제 안드로이드 개발툴을 실행합니다. 실행 한후  2.1에서 압축을 풀어놓은 프로젝트 파일을 불러 오는 과정입니다.

 
- 개발툴을 실행 하면 위와 같이 빈화면이 나옵니다.  2.1에서 해제한 프로젝트 파일을 불러오기 위해서는 왼쪽 빈화면에서 오른쪽마우스 클릭을 한 후 import 항목을 클릭합니다.

- Existing Android Code Into Workspace를 선택한 후 Next>

- Import Projects 창이 열립니다. Root Directory 의 Browse..을 클릭한 후 압축을 풀어 놓은 폴더를 선택한 후 확인 버튼을 누릅니다.
저는 압축해제 폴더명을 HybridApp으로 폴더명을 정하였습니다. 각자 자신이 해제해 놓은 폴더를 선택하시면 됩니다.

Finish을 눌러 종료를 합니다. 혹시 에러가 나는 경우는 위의 2.2 과정을 반복한 후 Copy projects Into workspace를 체크하신 후 Finish 버튼을 눌러 종료합니다.



위의 화면은 처음 불러온 화면입니다. 아래 화면에 빨간색으로 위와 같은 로그가 나오는 경우에는 신경 쓸 필요가 없습니다. 자동으로 툴에서 정리해줍니다.

이제 개발을 위한 준비는 다 끝났습니다. 이제 나만의 앱으로 수정해보도록 하겠습니다. 수정전에 제대로 동작하는지 실행을 해봅니다.

실행을 위해서는 PC에 단말의 USB 드라이버가 설치되어 있어야 합니다. 특히 푸시서비스는 단말에서 테스트를 해야 하므로 먼저 USB드라이버를 설치하시기 바랍니다.
 USB드라이버는 해당 단말 제조사의 사이트로 이동하도록 합니다. 아래는 삼성드라이버 다운로드 주소입니다.


 

화면에서 "통합 USB 드라이버" 버튼을 눌러 저장한 후 설치하시기 바랍니다. 



드라이버 설치를 완료하였으면 PC와 단말을 케이블로 연결 하신 후에 위의 화면과 같이 메뉴에서 플래이재생버튼 같이 생긴 버튼을 클릭해주세요. 클릭하면 아래와 같은 화면이 나옵니다. 


만일 위와 같은 화면이 나오지 않는다면 드라이버 설치가 잘못되었거나 단말기의 개발자 옵션이 켜지지 않았기 때문입니다. 개발자 옵션을 켜는 방법은
구글이나 네이버에서 "안드로이드 개발자옵션"을 검색하신 후 설정을 해주세요... (OS버전별로 조금식 다릅니다~)
 


화면은 위 템플릿을 실행한 후 메뉴버튼을 누른 화면입니다. 잘 동작한다면 개발툴 설치와 앱템플릿 준비는 완료된 것 입니다.

이제 앱을 수정하기 위한 준비과정은 모두 되었습니다. 다음 포스팅에서는 수정하는 방법을 알아보도록 하겠습니다.

댓글 없음:

댓글 쓰기