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 및 어플 구동은 다음 포스팅에서

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

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

메모 어플

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

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

메모 어플1

메모 어플2

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

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

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

어플이었습니다.

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

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

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

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

아 해당 메모 어플 소스는

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

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

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

딱 제 스타일ㅋㅋㅋ

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

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

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

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

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

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

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

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

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

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

>카페가기<

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

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

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

주셔야 됩니다!!!

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

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

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

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

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

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

이동 버튼으로 바뀝니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

볼 수 있습니다~~~

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

만들어져 있습니다~

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

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

이클립스에서 안드로이드 스튜디오로 프로젝트 임포트(import)/변환 방법

안드로이드 스튜디오

지금은 안드로이드 스튜디오를 사용해서

어플 개발을 하지만 예전에는 이클립스에

안드로이드 플러그인을 설치해서 android

어플 개발 작업을 진행합니다.

물론 지금도 이클립스로 개발은 가능합니다.

아래의 왼쪽 사진이 안드로이드 스튜디오이고,

오른쪽 캡처 사진이 이클립스 입니다.

저는 이클립스로 안드로이드 개발을 하다 보니

이클립스가 정말 편한데 조만간 구글에서 이클립스

플러그인 지원을 해주지 않는다는 이야기를 들어서

울며 겨자먹기로 어쩔 수 없이 android studio로

갈아타서 열심히 시행착오 겪고 있는 중입니다.

개발 하다가 답답한게 있으면 다시 이클립스에서

개발하기도 하는데... 이게 가능한 이유가 이클립스에서

작업한 프로젝트를 안드로이드 스튜디오에서

import 해올 수 있기 때문입니다.

예전 이클립스에서 생성한 프로젝트의

디렉토리 구조는 위와 같습니다.

안드로이드 스튜디오 프로젝트는

위와 같습니다~~ 보시는 것처럼

디렉토리 구조가 아예 다릅니다 

그래서 처음에는 아.. 지금까지

만들어 놓은 이클립스 안드로이드

프로젝트는 이제 못쓰는건가??

하고 좌절했었습니다.

그런데!!!!!!!!!!!!!!

이클립스 프로젝트는

안드로이드 스튜디오로

불러올 수가 있습니다~

Import 방법

방법을 차근차근 설명해 드리겠습니다!!

일단 위의 프로젝트는 제 바탕화면에 있는

이클립스 프로젝트입니다.

당연히 안드로이드 SDK와 플러그인이

설치된 이클립스에서 잘 돌아갑니다!

위의 이클립스 프로젝트를

안드로이드 스튜디오에서

돌려보도록 하겠습니다.

안드로이드스튜디오 구동 후

File -> New -> Import Project

안드로이드 스튜디오에서 작업할

안드로이드 이클립스 프로젝트를 선택 -> OK

Next 클릭

 Next 클릭

위에는 안드로이드 SDK가 설치된 경로,

아래에는 자바가 설치된 경로를 지정 -> Finish

설치가 되어 있지 않다면 설치해 주셔야겠죠~

SDK 설치 방법

그럼 안드로이드 스튜디오에서

뭔가 열심히 작업을 합니다!

잠시 후!!!

안드로이드 스튜디오로 위와 같이

이클립스 프로젝트가 로딩되었습니다.

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

프로젝트와 같은 구조로 바뀌었구요~

당연히 실행도 잘 됩니다^^