구글맵 안드로이드 어플 예제 소스(지도/위성/확대/축소/거리뷰 볼 수 있는 Android GoogleMap 앱)

안드로이드 구글 지도

예전에 구글지도어플을 만들어서

블로그에 공유한 적이 있습니다.

그 당시에는 구글맵 기능을 사용하기

위해서는 구글지도 API를 사용해야 됐고,

구글에 인증까지 받는 등 상당히 까다로워서

많은 분들이 질문을 주셨었는데.. 

너무 복잡한 설정들이 많아서 결국 저도 GG..

그런데 어제 구글맵을 띄워주는 어플 예제를

카페를 통해서 공유 받았는데...

인증 없이 간단한 코드 몇 줄로

구글지도 기능을 사용할 수 있었습니다!!!!!

>다운<

pdReport 카페에 공유해 놓았습니다~
어플 구동 영상도 함께 올려 놓았습니다

위에 링크로 가시면 됩니다.

 

위에 사진이 구글지도 어플의 안드로이드 프로젝트인데

assets 폴더 밑에 있는 maps.html을 웹뷰를 통해

띄워주기만 하면 되더라구요 ㅠㅠㅠ

이 놈의 구글~! 정말 최고네요 ㅎㅎㅎ

아래처럼 maps.html을 실행하면 바로

구글지도기능을 사용할 수도 있습니다.

해당 어플에서는 단순히 어 구글지도

웹 페이지를 띄워주기만 하는 것이죠

그래도 기능들은 다 있습니다.

지도는 물론 위성사진, 확대/축소,

심지어 거리뷰(Street View) 기능도 됩니다.

ㅎㅎㅎ 이제 어플에 지도 기능을 넣는 것도

쉽게 할 수가 있겠네요~~~

ㅎㅎㅎ pdReport 카페 회원 분께서 공유 해주신

자료이고, 첫 페이지는 위와 같습니다.

솔직히 처음에 이 화면 봤을 때는 이게 뭐지 했지만

해당 어플의 구현 방법을 보고 우와! 이제 구글지도를

이렇게도 사용할 수 있구나~ 하면서 감동 받았습니다

기능적으로는 지도 어플이라면 있어야 될 기능만

있지만 예전에는 지도 기능을 사용한다는 거 자체부터

꽤 많은 시간을 할애했어야 됐고,

그걸 뼈저리게 경험해 봤기 때문에

감동을 받을 수 밖에 없었습니다~

일반 지도 사진입니다~

여타 다른 안드로이드 지도 어플과 크게

다를 건 없습니다. 드래그 해서 위치 이동

할 수 있고, 확대/축소 되고~

위성 사진을 선택했을 때 화면입니다.

거리뷰를 하기 위해서는 오른쪽 상단에

노란색 사람 모양의 아이콘을 위와 같이

거리를 보려는 지역의 드래그해주면 됩니다.

드래그를 하면서 위와 같이 해당 지역의

거리를 미리 볼 수도 있네요~

스트리트뷰 화면입니다.

국내 거리뷰까지도 되고...

국내 포탈 업체보다 못한게 없네요!

위에서 말씀드렸다시피 해당

구글지도 어플의 전체 소스가

필요하시면 pdReport 카페로

가시면 공유 받으실 수 있습니다.

AngularJS와 NodeJS간 HTTP 통신 예제(GET/POST 방식)

HTTP

얼마 전에 AngularJS와 NodeJS 간 통신하는

예제에 관한 포스팅을 했었습니다. 단순히

AngularJS 기반으로 개발된 HTML 페이지

에서 NodeJS를 호출하는 예제였는데

앵귤러JS의 $http를 이용한 HTTP 통신

예제였습니다. 단순히 호출만 하는 예제였지요

>AngularJS와 Node 간 통신<

오늘도 이 작업을 계속 했는데

작업을 하다 보니 HTML 페이지에서

NodeJS로 단순히 호출하는 것에서

끝나지 않고 파라미터를 보내야 되는

상황이 생겨서 또 이 거에 대해 오늘

하루종일 삽질 했습니다.

웹 페이지에서 노드JS로 호출할 때

파라미터를 줄 수 있을 거라 생각하고

찾아 봤지만 생각처럼 쉽게 방법을

찾지는 못했지만 결국은 찾았습니다.

HTML

화면 소스입니다.

CreateTopic 버튼을 누르면

createTopic() 함수가 호출되는 부분이

제가 작업한 부분에 해당합니다.

Controller

그럼 해당 페이지의 controller에 선언된

createTopic 함수가 호출됩니다.

위에 캡처 화면을 보시면 제일 마지막 라인에

$http.get('create', {params: parameters});

이 부분이 있는데 이 라인에서 NodeJS의

함수를 create라는 값을 key로 호출하게

됩니다. 그리고 그 뒤에 있는

{params: parameters} 가 NodeJS로

보내려는 파라미터에 해당합니다.

params라는 키고 parameters 라는

변수가 값으로 Json 형태로 노드JS로

파라미터를 보내주고 있습니다.

이 때 Parameters 라는 변수의 값은

그 위에 선언된 것처럼 amount와

description 이라는 키 값으로 각각

123,l 'test' 값이 json 형태로 선언

되어 있습니다. AngularJS나 json

형태에 익숙하지 않으신 분들은

이해 하기가 좀 난해할 거란 생각이 드네요

NodeJS

그리고 최종적으로 호출을 받는

노드JS 소스입니다.

위에 controller에서 create 라는 키로

요청을 보냈고, 위에 보시는 것처럼

NodeJS에 create라는 값을 받아

화면의 요청을 받게 됩니다.

그리고 안에 내용은 화면으로부터

받은 parameter의 값을 빼오는 부분입니다.

req 변수에 요청에 대한 정보가 담겨있고,

당연히 그 안에 파라미터도 담겨 있는데

가지고 올 때 req.query 를 통해 파라미터

전체를 받아온 후 화면에서 설정해준

키 값으로 amount와 descript 값을

읽어 왔습니다. 그 후 확인을 위해

console로 찍은 거구요~

이렇게 화면 화면에서 보내준 값을

받아왔구요 res.send 함수를 통해

화면에 응답을 보내주고 있습니다.

아직도 할 게 많지만 일단 또 어렵게

어렵게 한 고비를 넘었습니다. 물론

아직 남은 고비가 훨씬 많습니다 ㅋ

Android 어플 개발 시 안드로이드 스튜디오와 이클립스 중 하나 선택하는 방법/기준

안드로이드 어플 개발

제가 처음으로 안드로이드 어플

개발이라는 것을 해본 게 대학교

졸업 직전 학기였으니깐 거의

4~5년 전이 아닌가 싶습니다.

그 때 막 아이폰이라는 스마트폰이

세상에 처음 나타났었고, 안드로이드폰이

나오면서 여기 저기서 어플을 만들고,

누가 어플을 만들어서 학교 등록금을 냈네,

뭐가 대박이 났네 하면서 어플 개발자들도

몸 값이 엄청 높았다고 하는 시절이었습니다.

이클립스

그리고 그 당시에 안드로이드 어플 개발을

한다고 하면 열이면 열 이클립스를 사용해서

개발을 하였습니다. 솔직히 그 당시에는

이클립스 말고 다른 안드로이드 개발 툴이

있긴 했는지도 의문입니다.

이클립스 용 안드로이드 플러그인을

구글에서 제공을 했었고, 또 안드로이드

버전이 없그레이드가 되면 이클립스에서도

업데이트 된 버전의 안드로이드 플러그인을

내려 받을 수 있도록 구글에서 제공을

해줬습니다. 그래서 계속 이클립스만을

사용해서 안드로이드 개발을 했었고,

그렇게 학교를 졸업하고 취업을 했습니다.

그 후 부터는 어플 개발을 거의 안했습니다.

그래도 틈틈이 간단한 어플들을 이클립스로

개발해서 블로그나 카페에 올려 놓는 등

그냥 재미로  간단한 어플을 만들곤 했습니다.

신문기사 검색하는 android 어플

블루투스 통신을 통한 스마트폰 간 채팅

안드로이드 구글맵 어플 예제

안드로이드 그림판 어플

메모어플 - 메모장,손글씨 저장/로드/수정/공유 기능

안드로이드 미로 게임

만보기 앱

기억력 테스트 어플

영문번역 어플

영어 단어 맞추기 게임

mp3 player

제가 만든 간단한 안드로이드 어플들 중에

몇 개만 올려 봅니다~

어찌 되었든 이클립스로 안드로이드

어플 개발을 해왔고, 지금도 하고 있고(스튜디오와 병행)

제가 작업한 모든 안드로이드 어플의

프로젝트들도 대부분 이클립스 프로젝트입니다.

뭐...이 쯤 되면 이클립스로 개발을 하는게

더 편한게 사실이고, 개발하는데 지장은 '아직'

보이지 않습니다.

안드로이드 스튜디오

어라 그런데 어느 순간부터 구글에서

이클립스 디벨로퍼라는 안드로이드 개발 툴을

제공한다더니 그 후에는 안드로이드 스튜디오라는게

나왔습니다. 그런데 대박이 어느 시점부터는

안드로이드 플러그인을 더이상 이클립스에서 제공하지

않겠다는 발표를 하는 겁니다. 위에서도 말씀드렸 듯이

이클립스를 통해 안드로이드 버전 업데이트가

가능합니다. 그런데 더이상 업데이트를 안시켜

줄거라는 겁니다... 결국 자신들이 제공하는

안드로이드 스튜디오를 사용하라는 거죠....

그런데 이클립스에서 안드로이드 버전업이

되지않는다고 해도 기존 버전으로 계속

안드로이드 개발이 가능할 뿐더러 아직까지도

안드로이드 업데이트는 해주고 있다는 사실!

(거짓말을 한 걸까요????)

그리고 무엇보다도 지금까지 사용해온

이클립스가 너무 익숙하다는 사실은

이클립스를 떠나기 힘들게 하는 요소들 중

하나입니다.  하지만 개발자 입장에서 새로운 게 나왔는데

기존 것만 고수하고 있을 수는 없고, 언젠가는

스튜디오롤 갈 수 밖에 없을 거 같아서

대세를 따르기로 했습니다. 정확히 언제일지는

모르지만 정말 이클립스에 대한 안드로이드

업데이트 제공이 되지 않을 거라면 결국

언젠가는 안드로이드 스튜디오로 갈아 타야

된다는 소리이니 하루라도 빨리 갈아타는게

좋겠다라는 결론을 내린 거지요....

그런데 막상 안드로이드 스튜디오를

사용해보니 장점도 많이 보이기 시작했습니다.

일단 이클립스에서는 여러 프로젝트를

동시에 불러와서 보여주기 때문에

처음 로딩 속도가 너무 느렸는데

스튜디오에서는 최근의 작업한

안드로이드 프로젝트 하나만 보여주기

때문에 초기 부팅 속도는 스튜디오가 확실히 빠릅니다~

<스튜디오 프로젝트>

<이클립스 프로젝트>

위에서 보시는 것 처럼 이클립스 프로젝트에서는

작업한 모든 프로젝를 불러오기 때문에

로딩 속도가 느릴 수 밖에 없겠죠....

그리고 안드로이드 스튜디오 프로젝트와

안드로이드 이클립스 프로젝트는 그 구조가

서로 달라서 서로 간의 프로젝트 전환이

안될 거라 생각할 수 있겠지만 다행히

이 기능을 안드로이드 스튜디오에서 제공

해주고 있습니다~ (역시 구글!!!!!)

이클립스에서 안드로이드 스튜디오로

프로젝트 import 하는 방법

방법은 링크된 링크의 글을 참고해 보세요~

하지만 스튜디오에서도 분명 불편한거 있습니다

바로 디버깅과 에러 검색 기능이

안드로이드 스튜디오에서는 좀 많이

불편하고, 에러 표시도 이클립스만큼

직관적이지 않습니다.

스튜디오 vs 이클립스

제가 지금 생각하기에는 이제 안드로이드

개발을 처음 시작하시는 분들은 오히려

이클립스를 사용할 것이냐, 스튜디오를

사용할 것이냐를 고민할 필요가 없다고

생각했습니다. 이유는 최근게 스튜디오이고,

어차피 처음이라 잘 모르면 이클립스로 하나

스튜디오로 개발을 하나 모르기는 마찬가지이므로

최신 거인 스튜디오로 하는게 더 좋다고 생각했기

때문입니다. 게다가 스튜디오 서적들도 많이

나오고 있을 테니 공부하기도 쉬울 거고...

그런데 pdReport 카페나 블로그를 통해

문의 주시는 분들 중에 이클립스와 스튜디오 중에

어떤 걸 사용해야 되는지 문의를 많이 하시더라구요

어제도 그 질문을 받고 아래와 같은 내용의

답변을 드렸었습니다.

현 시점에서 스튜디오와 이클립스 중 어느 것을

사용할 것인지에 대한 고민은 할 필요가 없다고

봅니다. 아직까지는 스튜디오에서 만들 수 있는

어플은 이클립스에서도 똑같이 만들 수 있고,

이클립스에서 만들 수 있는 어플은 스튜디오에서도

개발할 수 있습니다. 방법과 구성에 차이지

어떤 걸 사용하느냐에 따라 개발이 확연하게

쉽거나 어려워 지지는 않습니다.

더욱이 안드로이드 개발이 처음이고,

자바도 해보신 적이 없으시다면 더더욱

개발 툴에 대한 고민을 하실 필요가 없습니다.

둘 중에 아무 거나 하나 잡고 공부를 하시는게

제일 급하고 중요한 사항이라고 봅니다.

[AngularJS] 앵귤러JS 프로그래밍 교육내용 및 예제 정리 - 커스텀필터(Custom Filter)

FILTER

AngularJS의 Controller 안에 $scope.변수명

형태로 선언데 변수들은 View 단에서 {{변수}} 

형태로 해당 변수 값을 출력할 수 있습니다.

binding 한다고 하더라구요~ 그런데 이 때

{{변수 | 필터명:옵션....}}

이런 형태로 변수명에 특정 필터를 걸어 주어

출력되는 값에 대한 조절이 가능합니다.

{{money | currency : 'won'}}

위와 같이 주면 money 라는 변수에

담긴 값이 화면에 출력될 때 환율표시가

자동으로 됩니다. 기본은 달러 표시이기

때문에 우리나라 화폐 단위인 won 으로

표시해 주기 위해 currency의 옵셥으로

'won' 을 줬습니다.사용하는 필터 뒤에

: 를 붙여줘서 옵셥을 줄 수 있습니다.

{{today | date : 'medium'}}

이런 식으로 날짜/시간 정보도

필터로 줄 수 있는데 저희가 흔히

알고 있는 yyyyMMdd 형태도

제공하고 별도로 AngularJS에서는

아래와 같은 옵션도 제공합니다.

단축형

전체날짜시간 : medium, short

전체날짜 : fullDate, longDate, 

mediumDate,shortDate

전체시각 : mediumTime, shortTime

위에가 실제 예제입니다.

위에 예제를 실행한 결과는

아래와 같습니다.

자바에서 substring과 같이 값을 자르는

기능도 필터로 구현할 수 있습니다.

$scope.val = '12345689';

위와 같이 controller에 값이 선언하고,

view를 아래와 같이 코딩했습니다.

<input type='number' step='1' ng-model='num'><br>

{{val | limitTo:num}}

limitTo 필터가 val의 일부분을 가지고 오는데

0자리에서 옵셥으로 준 num 자리까지의

숫자만 자릅니다.

예를 들면 만약 num=2 라면

{{'123456789' | ㅣlimitTo : 2}}

가 되는 것이므로 결과는 12 가 됩니다.

Custom Filter

지금까지는 AngularJS에서 제공하는

필터를 단순하게 사용한 예제였습니다.

컼스텀 필터는 사용자가 직접 자신이

필요한 filter를 만들어서 위와 같이 사용

하는 데 목적이 있습니다. 똑같이

바인딩 시킬 수 있고, 옵션도 주겠죠~

커스텀 필터 예제 pdReport 카페에서

받으시면 됩니다~

>받으러 가기<

주석 부분이 선명하지 않으니

예제를 다운 받아서 보시길

권해 드립니다... 죄송합니다 ㅠ

대략적으로 설명을 드리면

일단 filter 를 구현할 모듈을 생성했고,

해당 모듈의 이름은 demo입니다.

그리고 그 demo 모듈 안에서

커스텀 필터를 구현했습니다.

아 먼저 이 필터는 어떤 기능을 하는지

설명을 드리자면 위에 소스에서 body를

보시면 중괄호 안에 각각 0, 1, 2 값을

필터를 태우려고 하고 있고, 필터명은

ox입니다. 값이 0이면 결과로 x.

값이 1이면 결과로 o를 출력하는

정말 별 의미 없는 filter인데,

커스텀 필터를 직접 만들어 보는데

의미가 있는 것이므로 어떻게 커스텀필터를

만드는지만 보시면 될 거 같습니다.

demo모듈 안에 filter 구현부를 보시면

제일 처음에 map이 있는데 0이라는 키는

x라는 값을 갖고, 1이라는 키는 o라는

값을 가지고 있습니다.

그리고 이 map을 사용하는 function을

최종적으로 return해주고 있는데

이 function에 파라미터 data가

존재하는데 이 data로는 body에서

중괄호 안에 입력한 0, 1, 2,가

들어오게 됩니다. 그래서 이 값을 보고

filter 안에 function에서 o나 x를

최종적으로 리턴해주게 되고, 그 값이

view에 출력이 되는 겁니다.