Ionic, angularjs 를 이용한 웹소켓(WebSocket) 예제

웹

요즘 부쩍 웹 기술에 관심이 많아지고 있습니다.

웹 개발자가 너무 많아서 웹 하면 개발자로

롱런 못한다는 이야기도 들었지만 일을 해볼수록

웹 기술을 익혀 놓으면 써 먹을 때가 많다라는

생각이 계속 듭니다~ 특히나 웹-앱 간 하이브리드 웹앱이

참 매력적인 분야인 거 같습니다~

물론 제가 요즘 회사에서 웹 작업 위주로 하고

있어서 섣부른 판단일 수도 있지만 웹 관련 된

새로운 기술을 접할 때마다 놀라곤 합니다~

특히나 요즘은 AngularJS를 이용한 작업을

하고 있는데 애초에 제가 웹 개발을 해본적이

많이 없어서 절대적인 비교는 할 수 없지만

AngularJS 를 통한 화면 작업은 참 재미 있으면서도

좋은 예제도 많고,그 예제들만 잘 이용해도

어지간한 어플리케이션은 다 만들 수 있을거 같습니다

물론 아직 우리나라에서는 생소한 기술이지만

구글에서 AngularJS 예제를 검색해 보면

정말 많은 예제들이 있어서 작업하는데 많은

도움이 되는게 사실입니다~

Ionic

그리고 계속 작업을 하다 보니 역시나

제가 생각했던 기술이 있더라구요

바로 Ionic 인데 Ionic을 통해서 AngularJS 프로젝트를

생성할 수 있으며, 작업한 AngularJS 프로젝트를

안드로이드, 아이폰 어플로도 변환할 수도 있습니다.

아이폰 변환까지는 못해 봤지만 안드로이드 변환은

해봤습니다. 변환 작업을 하면 APK 파일이 생성되며

해당 파일을 안드로이드 스마트폰에서 실행하면

핸드폰에 설치가 되더라구요~~~

참 대단한 세상이고 대단한 개발자,

대단한 기술이거 같습니다 ㅎㅎㅎ

Ionic은 우연찮게 찾은 기술인데

앞으로 Ionic을 이용해서 개인적인

작업도 해 볼 생각입니다~

웹소켓

해당 작업을 위해서는 자바 서버와

웹 클라이언트가 필요합니다.

웹 클라이언트는 AngularJS를 통해서 구현했습니다.

자바로 구현한 웹소켓 서버입니다.

원래는 자바를 사용하지 않고

AngularJS로만 작업을 하려고

했는데 작업을 하다가 CORS

라는 엄청난 문제에 봉착했습니다.

CrossDomain 문제라고도 하던데..

간단하게 내용을 말씀드리자면 ㅠ

프로토콜이나 IP, 포트가 다른 서버 간

JavaScript 통신은 막는다... 

뭐 대충 이런 내용이더라구요..

예를 들면 제 로컬에서 JavaScript

함수를 이용해서 웹 페이지를 읽어오거나

로딩해 오려고 하면 그럴 수 없게 막아

막는다는 거죠... 해결 방법은 서버 쪽에서

응답 헤더에 뭔가 설정을 해줘야 된다고

하는데... 전 계속 client 작업을 해서

결국 결국.. 포기했었습니다. 그런데

생각해 보니 동일한 작업을 javascript만

사용하지 않으면 되더라구요... 그래서

제가 자바 서버를 구현해서 angularjs

client에서 자바 서버로 작업을 요청하면

자바 서버에서 해당 작업을 수행하는

형태로 구현하려고 웹소켓을 이용하게

됐습니다^^;;;;;;;;; 참 이렇게 하기까지

길고 기 여정이었습니다 ㅠㅠㅠ

[자바예제] PDF뷰어 프로그램 소스(pdf 파일 read하는 Java 프로젝트)

PDF 뷰어

자바에서 제공하는 Swing 클래스와

icepdf 라는 오픈api를 이용해서

구현한 자바 PDF뷰어 입니다.

엄청 간단한 예제이지만 필요하신

분이 계실거 같아 공유합니다~

pdReport 카페에 올려 놓았습니다.

>카페가기< 

pdf 뷰어 실행한 화면 캡처 사진입니다.

프로그램 전체적인 틀은 보시는 것처럼

자바 Swing의 JPanel을 이용했고,

그 외 pdf 파일을 read해오는 것과

adobe reader처럼 pdf 뷰어의 여러

기능은 icepdf 라이브러리에서

기본으로 구현해 줍니다.

제가 한 거라고는 자바 클래스와

오픈api를 짬뽕시켜준 일 뿐입니다.

아래는 캡처 사진은 자바 pdf viewer의

프로젝트 구성입니다. 엄청 심플하죠?ㅎ

PDFJframeViewer.java 에

main 함수가 있으니 이클립스에서

해당 프로젝트를 import 해와서

실행만 시켜 주시면 됩니다.

혹 빌드패스 관련 문제가 생기면

직접 설정을 좀 해주셔야 될 수도 있습니다.

위 프로젝트의 lib 디렉토리 밑에 보면

icepdf 라이브러리를 보실 수 있습니다.

참고로 servlet-api-2.5.jar는 

필요 없는 파일입니다 ㅋㅋㅋ

제가 다른 작업 한 건데 안 지운 거니

참고하세요 ㅎㅎ

PDFJframeViewer.java 파일을 보시면

아래와 같이 열고자 하는 pdf 파일의

경로를 담고 있는 filePath 라는

String 타입의 변수가 있습니다.

위에 경로만 본인이 가지고 있는

pdf 파일의 절대경로로 바꿔서

입력해 주시면 됩니다.

pdReport 카페에 올려 놓았으니

많이 다운 받아서 사용하세요!

AngularJS에서 ElasticSearch 데이터 조회(Select)하는 예제

AngularJS

회사에 오면 매일매일 앵귤러JS라는 놈과

싸우고 있습니다 ㅎ 네이버에서는 필요한

예제는 거의 찾을 수 없지만 구글에서는

넘쳐나고 있기 때문에 엄청난 구글링이

수반되는 작업이지요 ㅎ 요즘에는 저장된

Data를 읽어 와서 웹 화면에 뿌려주는

작업을 하고 있는데 서버나 DB에

저장된 data가 아니라 엘라스틱서치라는

놈에 저장된 data를 읽어와서 화면에

뿌려주어야 합니다~

ElasticSearch

해외에서는 AngularJS가 국내보다

훨씬 활성화 되어 있다고 느끼는게

아직 대중화 되지 않고 검증 중인

단계에 프레임워크나 오픈소스들도

어지간하면 다 AngularJS와 연동되는

예제는 있다는 것을 보면서 느낍니다.

아래 링크된 글은 제가 예전에 작성한

AngularJS와 ElasticSearch 관련

포스팅입니다~ 참고해 보세요

AngularJS에서 ElasticSearch 사용하기

앵귤러JS와 엘라스틱서치 연동 및 예제

계속 이야기를 하자면 naver에서 자바나

안드로이드를 검색하면 엄청나게 많은

자료가 조회되는 것처럼 구글에서

AngularJS나 ElasticSearch를 검색하면

정말 많은 결과들이 검색됩니다.

현재 대중화 되어 있고, 여기저기서 널리

사용되는 기술에 대해서는 네이버만

사용해도 원하는 결과를 쉽게 얻을 수 있지만

(Java나 Android 같은....)

제가 지금 다루고 있는 AngularJS나

ElasticSearch와 같이 아직 국내에서

널리 사용되고 있지 않은 기술에 대해서는

네이버에 자료가 거의 없다고 봐도

무방합니다 ㅠㅠㅠㅠ

말이 좀 샜네요 ㅎㅎ

여튼 AngularJS와 ElasticSearch 연동을 통해

data를 조회해온 화면부터 올려보겠습니다.

 

화면만 좋고 보면 크게 대단할 것도

없는 내용입니다 ㅎ 위에 검색된

데이터에 대한 설명을 하도록

하겠습니다. 일단 조회된 데이터는

우리나라 포탈에 뜬 최신 뉴스기사를

수집해온 결과들입니다. 제목과

기사내용, 기사작성일, 해당 기사의

URL 주소, 기사 제목, 카테고리 등의

내용들이 있겠지요~ 실제 위에 

화면에서도 보실 수 있습니다. 

 

그런데 해당 data의 총 크기는 위에서

보시는 것처럼 20g가 넘습니다.

그럴 수 밖에요 하루동안에만 나오는

뉴스만 해도 얼마나 많은데요 ㅎㅎ

여튼 저렇게 많은 data를 저장하는

건 기본이고 특정 조건에 대한

검색/분석 등이 가능해야 되는

상황입니다

(왜냐하면 빅데이터 프로젝트라서)

그러다 보니 기존에 널리 사용되고 있는

RDB(오라클, MySQL, MsSQL 등)로는

도저히 성능이 나올 수가 없습니다.

그래서 나온 대안이 저희는 엘라스틱서치

입니다~

일단 엘라스틱서치는 저장된 data의

대해서 자체적으로 Indexing 기능을

처리해 줍니다. 여기서 Indexing이란

저장된 Data에 대해 ElasticSearch

고유에 태깅이나 기법을 통해 사전에

미리 Data에 대한 정보를 가지고

있는 겁니다. 이렇게 함으로써

저와 같은 사용자 입장에서는 엄청나게

큰 Data에 대해서도 빠른 속도로

데이터의 조회 및 질의가 가능합니다.

물론 그냥 가져다 사용한다고

무조건 성능이 좋은 건 아니지만

방법을 찾고, 튜닝을 해가면 기존에

RDB에서는 나올 수 없는 퍼포먼스를

ElasticSearch에서 끌어낼 수 있습니다.

시작하세요! 엘라스틱서치 라는 책과

ElasticSearch 홈페이지에 나와 있는

설명을 기반으로 열심히 원하는 기능들을

구현하고 있습니다. 다양한 질의(오라클로

따지면 쿼리의 where절)를 AngularJS에서

날려 ElasticSearch에서 원하는 data를

가지고 와야 되는데 이 질의를 날리는

방법을 위주로 열심히 구글링 & 스터디

중입니다 ㅎㅎ 기본적인건 됐고, 이제

AngularJS로 멋지게 화면을 구성도

해야 됩니다~

안드로이드 메모 어플 예제소스 - 메모장, 손글씨 저장/로드/수정/공유 기능

메모 어플

전에도 블로그에 제가 가지고 있는

메모 어플 소스를 공유했었습니다.

메모 어플1

메모 어플2

그 당시에는 안드로이드를 배운지

얼마 안된 시점이어서 정말 기본적인

디자인과 기능 구현에만 급급한

어플이었습니다.

그런데 이번에 제 카페를 통해 정말

괜찮은 메모 어플을 하나 공유받았습니다.

일단 아래 공유 받은 메모 어플 구동

영상을 한 번 봐보시기 바랍니다^^

아 해당 메모 어플 소스는

pdReport 카페에 공유해 놓았습니다!

어플 구동 영상도 카페에 올려 놓았습니다.

디자인은 심플하고 깔끔합니다~

딱 제 스타일ㅋㅋㅋ

위에 사진을 보시면 왼쪽이 어플 실행 시

첫 화면이고, 오른쪽 사진은 어플 구동이

완료되면 뜨는 화면입니다.

일단 첫 화면을 보시면 저한테 공유해주신

분의 실명이 뜹니다^^; 수정하려고 했더니

저 첫 페이지 자체가 이미지 파일어디라구요

위에 실명을 없애기 위해서는 이미지 파일을

직접 수정해 주셔야 됩니다!

카페에서 해당 어플의 전체 소스를 받으시면

위에 경로에 memo1.png 파일이 있습니다.

>카페가기<

이 파일이 실명이 박혀 있는 첫 화면에

해당하는 이미지 파일입니다.

해당 파일을 그림판이나 포토샵으로 수정해

주셔야 됩니다!!!

그림메모를 저장한 화면입니다.

위와 같이 저장한 순간의 날짜, 시간 정보로

파일명이 자동으로 지정됩니다.

상단에 메뉴는 세 개 있습니다.

메모추가, 그림메모(메모장)이동, 삭제

두번째 메뉴는 상황에 맞게 그림메모,메모장

이동 버튼으로 바뀝니다.

저장한 그림메모를 불러온 화면입니다.

제가 악필인 점 너그러이 이해해주세요;

불러올 땐 끊김없이 잘 로딩됩니다!!!
  

이번에는 메모장에서 입력하는 화면과

해당 메모를 저장한 모습입니다.

하단에 캡쳐 리스트라는 버튼이 있는데

이 버튼을 누르면 저장한 그림메모를

볼 수 있는 화면으로 이동이 됩니다.

메모를 하나 더 저장해 봤습니다~

그리고 위에 어플 구동 동영상을

보시면 아시겠지만 저장한 메모나

그림메모를 삭제할 수도 있습니다.

한 번에 여러개를 삭제하는 기능도

잘 구현되어 있습니다 *^^*

그리고 아주 친절하게 저장한 메모나 그림메모를

공유할 수 있는 기능도 있습니다~

동영상을 보시면 카톡으로 공유하는 모습도

볼 수 있습니다~~~

아 그리고 어플 아이콘도 아주 예쁘게

만들어져 있습니다~

아주 공들여서 만든 어플인게 느껴집니다~

pdReport 카페에서 공유 받으세요!!!!!

구글맵 안드로이드 어플 예제 소스(지도/위성/확대/축소/거리뷰 볼 수 있는 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 함수를 통해

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

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

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

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