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에서 자바 서버로 작업을 요청하면

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

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

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

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

[자바예제] 하드(서버)를 DB로 사용하는 mapdb(파일디비) java 오픈소스

오픈소스

요즘 회사에서 하는 프로젝트는 온통

오픈소스 뿐입니다~ 전부터 오픈소스

사용에 대해서 굉장히 좋게 생각해오던

저인지라 새로운 오픈소스를 알게

될 때마다 큰 만족감을 느끼는 중입니다~

지금 하는 빅데이터 프로젝트의 내용 중에

일반 DB 서버를 사용하지 않고 파일에

data를 저장하는 부분이 있습니다.

단순히 파일에 내용을 저장하는게 아니고

객체나, 리스트, VO 등 모든 타입의

data를 파일에 저장하고 심지어 톰캣이나

다른 DB처럼 검색/수정/추가/삭제

심지어 join도 된다고 합니다~

한 시간 전까지는 내용만 알고 아직

예제를 돌려 보지 못했는데 오늘

드디어 예제 하나 돌려 봤습니다 ㅎㅎ

mapdb

data를 저장할 파일의 경로를 잡아주고

mapdb 예제를 돌려보면 해당 파일에

data가 저장되어서 위에 예제를 한 번

더 구동하면 그 전에 저장했던 data를

가지고 올 수 있답니다~~~ㅎㅎㅎ

이 때 최초에 파일이 없으면 아무 내용이

없더라도 해당 경로에 파일이 있어야 됩니다.

물론 왜 굳이 파일DB를 사용해야 되나를

묻는 분들도 계실 겁니다~

일단 오라클 같은 일반 DB를 사용하는 경우

연결 맺고 SELECT/INSERT/DELETE/UADATE를

하는 작업보다는 파일을 생성해서 read/write

하는 속도가 더 빠르다고 합니다. 그리고

DB를 사용하기 위한 환경 설정도 없어도 되고,

mapdb에서는 DB에서 제공하는 기능도

거의 제공까지 해주고 있습니다~

예를 들면 commit이나 rollback 같은 기능~

여튼 DB에 비해 Data 관리가

너무 편해지고 간편해 질 수

있다고 생각합니다~~

그리고 아마존웹서비스도 사용을

해보려고 하는데 DB와 서버 둘 다

아마존 웹서비스에서 사용하는 방법을

찾으려고 하니 너무 귀찮은 겁니다.

그런데 파일DB 되면 굳이 DB 사용할

필요가 없어져서 아마존웹서비 DB

서비스를 공부하지 않아도 되어서

너무 좋습니다~~

[자바예제] 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 카페에 올려 놓았으니

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

웹에서 동작하는 HDFS 탐색기 HTML 예제 소스(AngularJS와 WebHDFS 이용한 빅데이터 프로젝트)

HDFS 탐색기

예전에도 만들었던건데 그 때는 올리지

않고 있다가 이 번에 다시 한 번 만들 일이

있어서 구현한 웹에서 돌아가는 HDFS 탐색기입니다.

하둡을 이용해서 빅데이터 프로젝트를 하고 있는데

HDFS에 저장된 데이터를 윈도우 탐색기와 같은

형태로 볼 수 있는 HDFS 탐색기입니다.

AngularJS를 이용해서 개발하였으며,

웹 브라우저에서 돌아가고 회사 서버에 저장된

HDFS 디렉톹리와 파일을 읽어와서 웹에

테이블 형태로 보여줍니다. 모든 디렉토리와

파일을 JSON 형태로 받아오는데 WebHDFS라는

AngularJS 모듈을 이용했습니다.

밑에 나오는 글자들은 파일을 선택했을 때

해당 파일의 내용을 보여주고 있는 겁니다.

테스트 용이라 디자인은 고려하지 않고,

결과만 얼른 확인할 목적으로 만든 거이니

조잡해 보이는 점은 이해 부탁드리겠습니다.

HTML 소스

테이블 소스입니다. 일반적인

테이블 소스와 크게 다르지는

않지만 요소요소에 AngularJS

를 이용했기 때문에 이게 뭐지?

싶은 게 있을 수도 있습니다.

위의 영상으로 HDFS 웹 탐색기를

소셨으면 아시겠지만 경로를 선택하고

파일과 디렉토리를 구분해서 파일

선택 시에 해당 파일의 내용을 화면에

실시간으로 보여주고 있었고, 또

다른 파일을 선택하면 그 파일의

내용으로 화면이 바로 갱신되었습니다.

탐색기의 가장 핵심적인 기능을

위와 같이 간단하게 구현할 수

있다는 점이 AngularJS의 큰

장점 중에 하나일 겁니다.

물론 위에 view에 해당하는

화면 소스 말고 Controller에

해당하는 javascript 파일도

존재합니다~ 하지만 말 그대로

MVC 중에 C에 해당하는 Controller

부분이므로 디자인이나 UI 쪽은

관여하지 않으며, 위의 영상에서

보이는 여러 기능들에 해당하는

function들이 구현되어 있습니다.

Controller

그 함수 중에 하나를 올렸습니다.

read_file이라는 이름의 function으로

이름 그대로 탐색기에서 선택된 파일의

내용을 읽어오는 함수입니다.

마찬가지로 AngularJS 문법이므로

조금은 익숙하지 않으실 수 있습니다.

하지만 알고 나면 정말 편하다는 건~

NodeJS

AngularJS와 NodeJS 간 HTTP 통신

전에 AngularJS와 NodeJS 예제를

올린 적이 있어서 올려 봅니다.

AngularJS를 사용하다 보면 NodeJS는

필연적으로 한 번은 거쳐가야 하는

내용입니다. NodeJS 기반으로

AngularJS가 돌아가기 때문이기도

하지만 AngularJS 모듈 중에는

NodeJS에서 바로 실행하는 것들도

있기 때문에 AngularJS와 문법 자체가

다른 NodeJS도 조금은 공부를 해야됩니다.

특히 위의 링크된 포스트에도 있고,

캡처한 이미지에도 나오지만

NodeJS와 AngularJS 간 통신을

위해 HTTP 통신을 하는데 정말

방법 모르면 사람 돌아가십니다 ㅠ

위의 예제에서는 NodeJS가 서버로,

AngularJS로 구현한 화면이 클라이언트

역할을 하며, 둘 간에 HTTP 통신을

하고 있습니다. 

이 AngularJS로 인해 자바스크립트로도

서버단을 구현할 수 있다는 점은

엄청난 장점 중의 하나라고 합니다.

자바 테트리스 게임 프로그램 예제 소스

자바 테트리스

예전 노트북에서 이클립스 작업 폴더를

뒤지다가 찾은 자바 테트리스 게임입니다.

안드로이드 프로젝트 하나를 찾는게

있었는데 엉뚱하게 자바 프로젝트를

하나 찾았습니다 ㅋ 아래 영상을 보시면

아시겠지만 테트리스의 기본적인

기능만 되지만 그래도 상당히 까다로운

테트리스 게임을 깔끔하게 구현해 놓은

자바 프로젝트 소스입니다.

Swing, JFrame, JPanel, JButton 등

자바에서 제공해주는 Swing 클래스를

이용해서 구현되었고, 이클립스에서

fmain을 실행시켜 주시면 바로 위와

같이 정상적으로 실행됩니다.

>소스받기<

소스는 카페에 올려 놓았습니다.

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

소스에 나름 주석도 달아 있어서

소스 파악하는데 있어서

도움이 되실 거라 생각합니다.

아 그리고 제가 직접 실행을 해보니

약간의 버그가 있더라구요

자주 발생하는 문제는 아니지만

어쩌다 한 번씩 블록이 부서지지

않는 경우가 있었습니다.

참고 하시고 이 소스를 사용하시게

된 경우 꼭 수정하시기 바랍니다~

제가 구현한 건 아니지만 자바 테트리스

예제 소스에 대해 질문이 있으시면 카페

QnA 게시판에 글 남겨 주시면 아는

한도 내에서 답변 드리겠습니다.

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로 멋지게 화면을 구성도

해야 됩니다~

[앱개발 팁] 어플 만드는 간단한 방법 - 오픈소스 import 해와서 개발하기

앱개발

처음 어플을 만들 때 정말 막막합니다.

일단 제일 먼저 안드로이드 환경설정을

하셔야 겠죠... 그리고 안드로이드 스튜디오나

이클립스와 같은 개발 툴로 개발을 하면 됩니다.

요즘 대세는 안드로이드 스튜디오지만

기존방식을 선호하시는 분들은 이클립스를

계속 사용하시거나 안드로이드 스튜디오와

병행해서 사용합니다.

안드로이드 스튜디오

이클립스

어찌 되었든 처음 개발을 할 때처럼 막막한게 없습니다.

그런데 꼭 하나부터 열까지 다 만들 필요는 없답니다.

왜냐하면 인터넷, 특히 구글에는 정말 엄청나게 많은

안드로이드 예제가 있으니깐요~ 게다가 그 예제들만

잘 가져다 사용해도 어지간한 어플은 다 만들 수 있다는거!

오픈소스

오픈소스 혹은 open API 형태로 자바 라이브러리와

간단한 안드로이드 예제는 어플 개발할 때 정말 유용합니다.

저만 하더라도 제가 직접 개발하는 비중보다 오픈소스를

이용하는 비중이 더 많습니다. 물론 제가 원하는 기능들이

모두 담긴 예제는 별로 없으니 기본적인 개발은 할 수 있어야

되고, 서로 다른 기능들과 예제, 오픈된 라이브러리들을

가져다가 붙이고, 수정하면서 내 것으로 만들 수 있어야 됩니다.

오픈소스를 이용한 자바 프로그램 개발

제가 예전에 작성한 글입니다.

참고해 보시기 바랍니다.

자바로 안드로이드를 개발하므로

자바 오픈소스 라이브러리를 사용해서

자바 프로그램을 만들 수 있으면

안드로이드 개발할 때도 많은 도움이 됩니다.

구글검색

얼마 전에 아직 졸업을 못한 친구가 졸업 작품으로

안드로이드 어플을 만든다고 합니다.

그런데 안면인식이나 지문인식 하는 어플을

만든다고 하네요;;; 허... 절대 간다하지 않을 거고

과연 완벽하게 사람의 얼굴을 인식하는 소스가

인터넷에 있을 리는 없죠

그래도 얼굴 인식을 하는 간단한 어플이라도

한 번 찾아보면서 설명을 드리겠습니다.

한글로 검색하는 것보다는 영어로 검색하는게 유리합니다.

영어 자료가 훨씬 많으니깐요~

그러므로 중/고등학교 영어 단어에

익숙하시다면 더욱 유리하겠죠~

저도 콩글리쉬 정도입니다 ㅎㅎ

일단 안드로이드 예제이므로 검색어에

기본적으로 'android' 단어를 넣어주고

얼굴인식이므로 face detecor 정도로

검색을 해주려고 치다보니 아주 친절하게도

구글에서는 자동 완성된 검색어를 추천해 줍니다~

detecter인지 detector인지 헷깔렸는데

고민할 필요가 없어졌네요 ㅋㅋㅋ

검색 결과가 나왔습니다~

한국인 인지라 한글이 가장 먼저 눈에 들어 옵니다.

심심하면 옴 이미지 얼굴 인식

위에 글에 먼저 들어가 봤습니다.

하지만 들어가 보니 FaceView라는

클래스를 복사해서 붙여 넣은 내용과

결과 캡처해 놓은 거 하나 뿐이네요..

참고로 지금 제가 찾는 건 안드로이드 예제로

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

바로 어플로 실행 가능한 소스를 찾고 있는 겁니다.

완벽한 안드로이드 프로젝트는 소스 외에도

여러 디렉토리와 이미지, 파일 등으로 구성되어 있습니다.

이클립스에서 실행 가능한 안드로이드 프로젝트는

기본이 위와 같이 구성되어 있습니다.

안드로이드 스튜디오의 디렉토리 구조는

위와 같습니다. 100% 똑같지는 않고 위에

보이는 디렉토리는 꼭 있어야 됩니다.

어쨌든 위와 같은 완벽한 프로젝트 예제를

찾고 있는 겁니다.

어쨌든 위에서 나온 검색 결과 중에 밑에서

두 번 째에 검색 결과로 들어가 봤습니다.

일본어가 들어가 있어 심기는 불편하지만

지금 그게 문제가 아니죠... 얼른 소스부터ㅋ

Android Tips #15..........

들어갔더니 알 수 없는 일본어와

이상한 남자 한 명의 사진이 있습니다.

그런데... 제일 밑에 보니 뭔가 눈에

쏙 들어오는 링크가 있습니다!!!!

FaceDetectorSample

두둥~ 얼굴감지샘플이랍니다 ㅋㅋㅋ

눌렀더니 아래와 같은 화면이 나옵니다.

게다가 오른쪽 아래에는 정말 친숙한

Download 라는 단어까지 있습니다.

간단히 설명을 드리자면

구글에서 프로그램 소스를 구하시다 보면

위에 github라는 사이트를 자주 접하시게

될 겁니다. SVN과 같이 프로젝트를 공유할 수

있는 사이트로 정말 유용한 사이트입니다.

게다가 소스까지 무료로 내려 받을 수 있구여~

Download ZIP을 누르기 전에 파일 리스트 중에

FaceDetectorSample 디렉토리로 들어가 봅니다.

위와 같이 구성되어 있습니다.

안드로이드 프로젝트가 맞습니다.

얼핏 보니 이클립스에서 구동할 수

있는 프로젝트인 거 같습니다.

하지만 상관 없습니다.

안드로이드 스튜디오에서도

불러올 수 있으니깐요 ~

아까 Download Zip을 누르니

바로 다운이 됩니다~

이제 압축 풀고 구동만 해보면 됩니다.

import 및 어플 구동은 다음 포스팅에서

하도록 하겠습니다~~~!!! 퇴근해야되요 ㅎ