자바라이브러리의 twitter4j를 이용하여 타임라인 목록을 출력해보도록 하겠습니다.

다운로드는 2가지 방법이 존재합니다.

1. JAR파일 다운로드

http://twitter4j.org/en/index.html

위 사이트를 가셔서 twitter4j-x.x.x.zip파일을 다운로드 받으십니다.

받으신 다음 압축해제를 하신 후 lib 디렉토리에 존재하는 

twitter4j-core-x.x.x.jar 파일을 본인의 lib 디렉토리내에 include 해주도록 합니다.

2. pom.xml을 이용한 다운로드

<dependency>
	<groupId>org.twitter4j</groupId>
	<artifactId>twitter4j-core</artifactId>
	<version>4.0.2</version>
</dependency>

위처럼 twitter4j 관련 dependency를 pom.xml 에 추가해주도록 합니다.

트위터 앱 생성하기

이어서 consumer key, consumer secret, accesstoken 등을 받기 위하여 

앱을 하나 생성해보도록 하겠습니다.

1. 트위터에 접속하여 앱생성하고자 하는 아이디로 로그인을 합니다.

2. https://apps.twitter.com/ 

"URL 접속 후 Create New App" 버튼 클릭을 합니다.

3. 하단 네모친 박스에 필수값들을 입력합니다.

     1) Name : 앱의 이름을 작성

     2) Description : 앱에 대한 설명인대 최소 10자이상 작성해주세요

     3) Website : 실제 동작될 도메인을 작성해주시면 되는데 

                       저는 로컬도메인을 사용하고자 하는데 "http://localhost:포트번호" 로는 접속이 안되는거 같습니다.

                       그래서 "http://127.0.0.1:포트번호" 로 작성하였습니다.

     4) Callback URL : 타임라인 글쓰기와 같은 POST 기능을 사용할때 필요한거 같긴한대... 

                               그냥 단순히 타임목록을 가져오고자 하므로 생략하도록 하겠습니다.

4. 약관동의

3번에 대한 작성이 완료된 후 스크롤을 하단으로 내리면 

약관동의 하는 부분이 있는데 체크 해주신 다음 

"Create your Twitter application" 버튼을 클릭합니다.

5. 기본앱 생성완료

위와같이 앱이 생성되었습니다.

이어서 access token 값을 생성해야 하므로

 Keys and Access Tokens 탭을 클릭하여 액세스토큰을 만들도록 합니다.

6. Access Token 생성하기

이동하신 탭에서 하단에 Toekn Actions 영역을 보시면 "Create my access token" 버튼을 클릭합니다.

7. Access Token 생성완료

그럼 위처럼 Toekn Actions는 사라지고 

Access Token / Access Token Secret 값이 생성된것을 확인 할 수 있겠습니다.

그럼 샘플코드를 적용하기 위하여 간단한 예를 들어보도록 하겠습니다.

JAVA프로젝트 생성후 다운로드 받은 JAR파일을 해당 프로젝트에 INCLUDE 한 후 

Java Build Path -> Libraries -> Add Jars 로 JAR파일 INCLUDE해주었습니다.

※ 웹프로젝트는 lib 디렉토리 혹은 pom.xml에 dependency를 등록하셨다면 별도로 include 해주실 필요는 없습니다.

트위터 타임라인 가져오기 샘플코드

public static void main(String ar[]) {
	try {
    	AccessToken accesstoken = new AccessToken("Access Token", "Access Token Secret");
    	Twitter twitter = TwitterFactory.getSingleton();
    	twitter.setOAuthConsumer("Consumer Key (API Key)", "Consumer Secret (API Secret)");
    	twitter.setOAuthAccessToken(accesstoken);
    	User user = twitter.verifyCredentials();
    	
    	List<Status> list = twitter.getUserTimeline(); 
    	System.out.println("타임라인 계정:"+user.getScreenName());
    	for(Status status : list) {
    		System.out.println("작성자:"+status.getUser().getScreenName());
    		System.out.println("타임라인내용:"+status.getText());
    	}
	} catch (Exception e) {
		e.printStackTrace();
	}
}

AccessToken 객체생성할때 필요 parameter와 

setOAuthConsumer 필요 parameter들은 

access token 생성한 "Keys and Access Tokens" 탭내에 모두 존재하므로 

각각의 값들을 대입해주도록 합니다.

실행결과

정상적으로 트위터 API 를 이용하여 타임라인의 목록이 출력되었습니다.

한번에 20개밖에 나오지 않아요!!

DEFAULT 20개의 타임라인 글밖에 나오지 않습니다.

더보기 및 한페이지에 글목록 수를 조절하고자 하신다면 

twitter4j의 "Paging" 객체를 호출 후 기존 코드인 getUserTimeline() 메서드의 

parameter로 넘겨주시면 되겠습니다.

페이징을 처리하고 싶으시다면 

하단코드를 기존코드에 일부 적용해주시면 되겠습니다.

//Paging(페이지번호,한페이지당출력글갯수)
Paging page = new Paging (1, 50);
List<Status> list = twitter.getUserTimeline(page);

by 개발로짜

이번포스팅은 Spring3 + Mybatis 연동에서 INSERT 쿼리 실행 후 

시퀀스값을 가져오는 방법에 대해서 포스팅을 해보도록 하겠습니다.

먼저 시퀀스 자동증가를 지원해주는 MySQL,MSSQL 버전에 대하여 예를 들도록 해보겠습니다.

MySQL의 경우는 자동증가 시켜주고자 하는 컬럼에 auto_increment 옵션을 적용해주고

MSSQL의 경우는 IDENTITY(초기값,증가값) 에 대한 옵션을 적용해주면 되겠습니다.

MySQL 자동증가 시퀀스 테이블 생성쿼리

CREATE TABLE increment (
  seq bigint(20) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  title varchar(100) NOT NULL
) 

MSSQL에 경우는 상단 쿼리에서 AUTO_INCREMENT 를 IDENTITY(1,1)로 변경해주시면 되겠습니다.

제일먼저 컨트롤러에 들어갈 샘플코드입니다.

@RequestMapping("/savedata")
public void savedata(){
	try {
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("title", "제목입니다.");
		studyService.savedata(map);	
	} catch (Exception e) {
		e.printStackTrace();
	}
}

이어서 Service interface 부분과 ServiceImpl class 부분 샘플 코드입니다.

public void savedata(Map<String, Object> map) throws SQLException;

@Override
public void savedata(Map<String, Object> map) throws SQLException {
	System.out.println("INSERT직전 시퀀스값이 존재하는지:"+map.get("seq"));
	dao.savedata(map);
	System.out.println("INSERT직후 시퀀스값이 존재하는지:"+map.get("seq"));
}

이어서 Dao interface와 DaoImpl class 부분에 대한 샘플코드입니다.

public Integer savedata(Map<String, Object> map) throws SQLException;

@Override
public Integer savedata(Map<String, Object> map) throws SQLException {
	return query.insert("query.savedata",map);
}

마지막으로 Mybatis INSERT 쿼리 xml 코드부분입니다.

<insert id="savedata" parameterType="java.util.Map" useGeneratedKeys="true" keyProperty="seq">
	INSERT INTO increment (title) VALUES(#{title})
</insert>

실행결과를 확인 후 각 설명을 드리도록 하겠습니다.

위와같이 "/savedata" URL 을 호출하여 2번에 데이터 insert처리를 하였습니다.

각 설명을 드리겠습니다.

쿼리XML 에서의 속성

useGeneratedKeys : 사용하는 DB에서 자체적으로 생성한 키(ex : 자동 증가 컬럼)를 받는옵션입니다. 

디폴트는 false이므로 자동증가 값을 받고자 할경우 TRUE로 정의합니다. 

keyProperty : INSERT/UPDATE 쿼리에만 적용되는 속성이며 return값으로 보내주고자 하는 컬럼명을 정의해 주면 됩니다.

(대신, vo 혹은 map의 key값과 일치하여야 합니다.)

DaoImpl 관련 설명

INSERT 후 자동증가값을 RETURN값으로 가져왔으므로 return으로 ServiceImpl 클래스로 보내주도록 합니다.

ServiceImpl 관련 설명

DaoImpl에서는 Integer 타입을 return 해주었지만 ServiceImpl부분에서는 별도로 return 값을 받지 않습니다.

이유는 자동적으로 dao.savedata(map); 코드에 넘겨준 map타입에 

Mybatis에서 자동적으로 return값을 key mapping을 해주어 담아주었기 때문입니다.

두번째 방법은 오라클을 포함한 모든 DBMS(MySQL,MSSQL,Oracle) 에 적용이 가능합니다.

Service / Dao 영역 코드는 첫번째 방법과 동일하며 

쿼리xml부분만 SelectKey태그를 이용하여 return값을 보내주는 방식인대 

다음처럼 선택하여 적용하시면 되겠습니다.

MySQL SelectKey를 이용한 방법

<insert id="savedata" parameterType="java.util.Map">
	INSERT INTO increment (title) VALUES(#{title})
	<selectKey keyProperty="seq" resultType="Integer" order="AFTER">
		SELECT LAST_INSERT_ID()
	</selectKey>
</insert>

MSSQL SelectKey를 이용한 방법

<insert id="savedata" parameterType="java.util.Map">
	INSERT INTO increment (title) VALUES(#{title})
	<selectKey keyProperty="seq" resultType="Integer" order="AFTER">
		SELECT IDENT_CURRENT('increment')       
	</selectKey>
</insert>

MSSQL의 경우 IDENT_CURRENT('테이블명')을 작성해주시면 되겠습니다.

Oracle SelectKey를 이용한 방법

<insert id="savedata" parameterType="java.util.Map">
	INSERT INTO seq_test(idx,title)
		 VALUES(idx_test_seq.nextval,#{title})
	<selectKey keyProperty="seq" resultType="Integer" order="AFTER">
		SELECT seq.currval FROM dual
	</selectKey>
</insert>

Oracle의 경우는 seq는 create sequence 로 생성한 시퀀스.currval을 적용해주시면 되겠습니다.

그럼 SelectKey를 이용한 결과값을 확인해 보도록 하겠습니다.

역시 동일하게 결과값이 출력되었습니다.

insert된 데이터의 시퀀스를 가져오는 경우는 

보통 다른 테이블에 외래키 insert하기 위해 사용하기 때문에 

알아두시면 좋겠습니다.

by 개발로짜

지난 포스팅은  xtype이 'cartesian'인 차트그래프에 대하여 알아보았습니다.

차트 연동 및 'cartesian' 차트 관련 내용은 하단을 참고해 주세요 ^^

2014/11/18 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5의 cartesian 타입 차트그래프 종류별로 출력해보기

이번에는 xtype이 'polar'인 차트타입에 대하여 간단하게 포스팅 해보도록 하겠습니다.

polar 차트 역시 다양한 종류가 존재하나 간단하게 원형차트와 레이더 차트에 대하여 알아보도록 하겠습니다

polar 차트란?

원형인 각 축과 반경축을 사용하는차트를 의미합니다.

제일먼저 원형차트에 대한 코드를 확인해보도록 하겠습니다.

데이터 스토어는 이전 그래프 관련 포스팅을 참고해주세요.

1.원형(파이형) 그래프 차트컴포넌트

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 650,
    height: 500,
    title : '방문자통계',
    layout: 'fit',
    items: [
			{
			    xtype: 'polar',
			    insetPadding: 50,
			    innerPadding: 20,
			    series: [{
			        type: 'pie',
			        angleField: 'count',
			        label: {
			            field: 'date',
			            calloutLine: {
			                length: 60,
			                width: 3
			            }
			        },
			        highlight: true,
			        tooltip: {
			            trackMouse: true,
			            renderer: function(storeItem, item) {
			                this.setHtml(storeItem.get('date') + '일: ' + storeItem.get('count') + '명');
			            }
			        }
			    }],
			    //데이터 출력
			    store: chartStore
			}    
    ]
});

polar 차트는 별도로 'series' 내의 X/Y 좌표 설정을 하지 않습니다.

대신 'series' 속성내에 'angleField' 와 'label' 속성의 'field' 속성으로 데이터스토어 데이터를 화면에 출력시킵니다.

'highlight' 속성은 마우스 오버기능시, 케이크 잘라서 나누는 효과(?) 를 나타내기 위하여 적용해보았습니다.

원형(파이형) 그래프 실행결과

원형 차트내에서는 일자별로 출력이 되며 방문수는 원형 폭에 맞추어 출력이 되었습니다.

마우스 오버시 나누어 지는 효과는 highlight 속성으로 기능구현이 되었고 툴팁효과는 tooltip 속성으로 인하여 출력이 되었습니다.

2.레이더 그래프 차트컴포넌트

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 650,
    height: 500,
    title : '방문자통계',
    layout: 'fit',
    items: [
			{
		    xtype: 'polar',
		    insetPadding: '40 40 60 40',
            interactions: ['rotate'],
            axes: [{
                type: 'numeric',
                position: 'radial',
                fields: 'count',
                renderer: function (v) { return v + '명'; },
                minimum: 0,
                grid: true
            }, {
                type: 'category',
                position: 'angular',
                grid: true
            }],
            series: [{
                type: 'radar',
                xField: 'date',
                yField: 'count'
            }],
		    //데이터 출력
		    store: chartStore
		}
    ]
});

보통 'polar' 그래프타입은 X/Y축이 없지만 레이더 차트는 XY 축을 선언합니다.

또한 interactions 속성을 통해서 출력된 그래프를 회전시킬수 있습니다.

레이더 그래프 실행결과

레이더그래프는 회전하는다트판을 연상시키게 하는 그래프 종류인거 같습니다.

지금까지 ExtJS에서 지원되는 대표적인 기본 컴포넌트들에 대하여 알아보았습니다.

다음 포스팅은 MVC 구조로 ExtJS 실습을 진행하도록 하겠습니다.

by 개발로짜