'twitter' 태그의 글 목록

'twitter'에 해당되는 글 3건

2013.11.28 [Bootstrap] jQuery UI와 Angular.js 사이에서2
2013.10.05 [OAuth] EveryAuth 이용해서 Twitter 인증하기
2013.04.05 [AngularJS] Twitter Search 만들기

2013. 11. 28. 09:32 HTML5, CSS3/CSS

[Bootstrap] jQuery UI와 Angular.js 사이에서

Bootstrap은 CSS Framework으로 프리젠테이션을 담당하고 jQuery UI 와 Angular.js는 자체 컨트롤도 가지고 있지만 DOM 핸들링을 한다. 만일 서비스를 만드는데 Bootstrap + jQuery UI 조합일 때 또는 Bootstrap + Angular.js 조합일 때 그리고 Bootstrap + jQuery UI + Angular.js 조합 일때 프리젠테이션을 통합하는 방법은 어떤 것들이 있을까? 각 조합에 대해 어떻게 사용할지 알아보자.

1. Twitter Bootstrap 만 사용할 경우

- 부트스트랩만 놓고 보면 CSS Framework으로써 기본적인 Fluid Layout 형태와 기본 HTML 컨트롤의 모양을 정의하고 있다

또한 JavaScript 기반 다양한 component들도 포함한다

- 부트스트랩의 CSS 부분을 향상시키고 extra component를 추가한 부분 변경모델은 Bootflat, Bootplus, FlatStrap, LeapStrap

- 또는 다양한 완성체 템플릿을 startBootstrap같은 곳에서 만들어 제공도 한다

2. Twitter Bootstrap + jQuery UI 함께 사용할 경우 (이제 없어졌다)

- 문제는 여기서 부터 시작한다

- Bootstrap의 CSS 스타일이 존재하고 jQuery UI 도 자체 theme을 CSS로 정의하고 있다

- Boottrap의 CSS를 jQuery UI에 접목하여 사용할 경우는 jQuery UI Widgets 에 대해서 Bootstrap theme을 입힌 것을 사용한다

http://addyosmani.github.io/jquery-ui-bootstrap/

3. Twitter Bootstrap + Angular.js 함께 사용할 경우

- Angular에 JavaScript component를 포팅하기 위하여 Directive로 감싸야하는 문제가 있다

- jQuery UI와 Bootstrap theme을 결합하였다면 Angular.js 와 Bootstrap theme 을 결합하고 있다

- 하지만 이것은 Bootstrap v2.3.* 버전의 component를 Angular.js Directive로 구현하는 것이다

http://angular-ui.github.io/bootstrap/

4. Twitter Bootstrap + jQuery UI + Angular.js 함께 사용할 경우

- 해당 형태는 3번의 연장선으로 보면 된다

- Twitter Bootstrap의 javascript component를 Angular.js Directive화 하였듯, jQuery UI component들도 Directive화 한것이다

http://angular-ui.github.io/

- 소스 : https://github.com/angular-ui/

기존의 JavaScript Component를 처리하려면 Directive화 과정을 거쳐야 하는데 이런 번거로운 과정을 해소하고자 Bootstrap의 JavaScript Component를 Directive로 만들어 놓은 Angular UI Bootstrap이 나왔다. jQuery UI를 지원하기 위하여 Angular UI 에 상당부분 즐겨 사용하는 JavaScript Component를 포함시켰으나 이 또한 jQuery UI의 모든 것을 커버하고 있지는 못하다.

이래저래 문제되는 것은 Angular.js를 기반으로 개발할 때 UI를 담당하는 JavaScript Component를 Angular.js의 Directive화를 잘 해야 한다는 것이다.

<참조>

- Bootstrap ToolBox : 다양한 UI 컴포넌트들

저작자표시 비영리 변경금지

'HTML5, CSS3 > CSS' 카테고리의 다른 글

[CSS2, 3] CSS 이야기 - 1 (0)	2015.10.31
[UI Kit] CSS Framework 어떤 것을 사용할 것인가? (1)	2013.11.27
[GroundWorkCSS] Twitter Bootstrap의 새로운 대안 (0)	2013.08.07
[RWD] 반응형 웹 디자인 - 개념 잡기 (0)	2013.05.09
[Compass] 이해하기 (0)	2013.04.20

posted by 윤영식

2013. 10. 5. 20:28 Protocols/OAuth

[OAuth] EveryAuth 이용해서 Twitter 인증하기

OAuth 트위터에서 Consumer/Acces Key를 생성한 후, Node.js 상에서 EveryAuth를 이용하여 인증방법에 대해서 알아보자

Twitter 키 생성하기

- https://dev.twitter.com/apps/new 에서 생성함

- 이름, 설명, url -예, http://sv.mobiconsof.co.kr -, 약관체크, CAPCHA등록하고 submit을 하면 키생성 화면이 나온다

- 추가로 "access token"을 생성할 수도 있다

단 여기서 중요한 것은 "Callback URL"을 입력하는 것이다. (sv.mobiconsoft.co.kr은 /etc/hosts파일에 설정한 테스트 도메인)

- 만들어 놓은 자신의 키들은 https://dev.twitter.com/apps 에서 애플리케이션 별로 확인을 할 수 있다

Twitter 키 사용하기

- Node.js에서 everyauth 모듈을 통하여 사용하는 예를 보자

- Key 생성시 url로 "http://sv.mobiconsoft.co.kr" 를 입력하였다면 - 각자의 public 또는 test url을 입력하면 된다 - hosts 파일에 등록하고 dig 와 ping 명령으로 확인을 한다

$ sudo vi /etc/hosts

127.0.0.1 sv.mobiconsoft.co.kr

// ping 성공

$ ping sv.mobiconsoft.co.kr

PING sv.mobiconsoft.co.kr (127.0.0.1): 56 data bytes

64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.044 ms

64 bytes from 127.0.0.1: icmp_seq=1 ttl=64 time=0.051 ms

- Express.js, Angular.js 와 Bootstrap을 이용한 코드를 사용할 것이다.

$ git clone https://github.com/ganarajpr/express-angular.git && cd express-angular

$ 소스 수정하기

- app.js 안에서 트위터에 대한 consumerKey와 consumerSecret을 입력한다

everyauth

.twitter

.consumerKey('2yQ.....img')

.consumerSecret('TbhKnP.....fQ1gyvUO4')

.findOrCreateUser( function (sess, accessToken, accessSecret, twitUser) {

console.log('twitter User data is', twitUser);

return usersByTwitId[twitUser.id] || (usersByTwitId[twitUser.id] = addUser('twitter', twitUser));

})

.redirectPath('/');

- Node.js 를 수행한다

$ sudo node app.js

- 브라우져에서 호출하기 : 우측 "Login"에서 "Sign in with Twitter" 버튼을 클릭한다

- 트위터 승인 화면이 나온다 : "애플리케이션 승인" 버튼을 클릭하면 다시 원래 화면으로 돌아온다

- Node.js 콘솔에 뿌려진 사용자 정보를 보자 : 해당 정보를 저장하여 애플리케이션에서 사용을 하면 된다

$ sudo node app.js

starting step - getRequestToken

...finished step

starting step - storeRequestToken

...finished step

starting step - redirectToProviderAuth

...finished step

starting step - extractTokenAndVerifier

...finished step

starting step - getSession

...finished step

starting step - rememberTokenSecret

...finished step

starting step - getAccessToken

...finished step

starting step - fetchOAuthUser

...finished step

starting step - assignOAuthUserToSession

...finished step

starting step - findOrCreateUser

twitter User data is { id: 48553254,

id_str: '48553254',

name: 'Software 행복공동체 키우기',

screen_name: 'nulpulum',

location: 'Seoul Korea',

description: '자건거타기 실용주의프로그래머 에자일정신 글로벌소프트웨어만들기 행복공통체키우기 지식나눔운동',

url: 'http://t.co/wunTkx6q',

entities: { url: { urls: [Object] }, description: { urls: [] } },

protected: false,

followers_count: 98,

friends_count: 533,

listed_count: 0,

created_at: 'Fri Jun 19 00:44:39 +0000 2009',

favourites_count: 12,

utc_offset: 32400,

time_zone: 'Seoul',

geo_enabled: true,

verified: false,

statuses_count: 506,

lang: 'ko',

status:

{ created_at: 'Fri Oct 04 12:15:34 +0000 2013',

id: 386102292232937500,

id_str: '386102292232937472',

text: 'I signed up for Human-Computer Interaction from @ucsandiego on @Coursera! https://t.co/FdQc2h654C #hci',

source: '<a href="http://twitter.com/tweetbutton" rel="nofollow">Tweet Button</a>',

truncated: false,

in_reply_to_status_id: null,

in_reply_to_status_id_str: null,

in_reply_to_user_id: null,

in_reply_to_user_id_str: null,

in_reply_to_screen_name: null,

geo: null,

coordinates: null,

place: null,

contributors: null,

retweet_count: 0,

favorite_count: 0,

entities:

{ hashtags: [Object],

symbols: [],

urls: [Object],

user_mentions: [Object] },

favorited: false,

retweeted: false,

possibly_sensitive: false,

lang: 'en' },

contributors_enabled: false,

is_translator: false,

profile_background_color: '9AE4E8',

profile_background_image_url: 'http://abs.twimg.com/images/themes/theme16/bg.gif',

profile_background_image_url_https: 'https://abs.twimg.com/images/themes/theme16/bg.gif',

profile_background_tile: false,

profile_image_url: 'http://a0.twimg.com/profile_images/2956822008/b20249749c11917f4ce9e29263ba1b92_normal.jpeg',

profile_image_url_https: 'https://si0.twimg.com/profile_images/2956822008/b20249749c11917f4ce9e29263ba1b92_normal.jpeg',

profile_banner_url: 'https://pbs.twimg.com/profile_banners/48553254/1355144673',

profile_link_color: '0084B4',

profile_sidebar_border_color: 'BDDCAD',

profile_sidebar_fill_color: 'DDFFCC',

profile_text_color: '333333',

profile_use_background_image: true,

default_profile: false,

default_profile_image: false,

following: false,

follow_request_sent: false,

notifications: false }

...finished step

starting step - compileAuth

...finished step

starting step - addToSession

...finished step

starting step - sendResponse

...finished step

<참조>

- How to get twitter key

- Express에서 EveryAuth 사용하기

- Facebook에서 EveryAuth 적용하기

저작자표시 비영리 변경금지

'Protocols > OAuth' 카테고리의 다른 글

[OAuth] 인증과 권한 개념잡기 (0)	2013.10.06

posted by 윤영식

2013. 4. 5. 16:27 AngularJS/Prototyping

[AngularJS] Twitter Search 만들기

AngularJS를 가지고 Twitter Search 기능을 프로토타입핑한다. Angular에서는 jsonp를 어떻게 다루는지 살펴보자

1) Twitter 검색

- 검색어를 넣고 트위터로 jsonp 검색을 하고 결과를 출력한다

- angularJS와 angularJS resource 를 사용한다

+ 서버사이드 데이터를 RESTful하게 가져오기 위한 방법을 제공한다

+ API : http://docs.angularjs.org/api/ngResource.$resource (1.1.4 소스)

- 사전준비

+ 소스복제 : git clone https://github.com/ysyun/prototyping

+ 트윗소스 : cd prototyping/angularjs/twitter

- twitter.html 소스

+ <html ng-app="Twitter"> 를 반드시 추가한다. 설정하지 않으면 하기 에러발생. twitter.js에서 모듈명으로 사용

+ twitter.js angular controller 파일을 별도로 코딩한다

+ <div ng-controller="TwitterCtrl" 추가

+ <input ng-model="searchTerm" 프로퍼티 추가하여 controller 내의 doSearch function 안에서 검색 파라미터로 사용한다

+ <button ng-click="doSearch()" 추가하여 검색하기 버튼 클릭하면 호출될 function지정

+ <tr ng-repeat 추가 : angular $resource를 통한 jsonp 호출 결과를 리스팅한다

<!doctype html>

<html lang="en" ng-app="Twitter">
<head>
	<meta charset="UTF-8">
	<title>AngularJS Hello World Twitter</title>
	<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
	<script src="http://code.angularjs.org/1.1.4/angular-resource.min.js"></script>

	<script src="twitter.js"></script>
	<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>

<div ng-controller="TwitterCtrl">
	<form class="form-horizontal">
		<input type="text" ng-model="searchTerm">
		<button class="btn" ng-click="doSearch()">
			<i class="icon-search"></i>Search
		</button>
	</form>

	<table class="table table-striped">
		<tr ng-repeat="tweet in twitterResults.results">
			<td>{{tweet.text}}</td>
		</tr>
	</table>
</div>

</body>
</html>

- twitter.js 소스

+ angular.module : twitter.html에서 <html ng-app="Twitter" 명칭을 넣어줌. $resource를 사용하기 위하여 ngResource 의존

+ $scope.twitter.get() 호출하게 되면 jsonp 방식으로 호출하여 결과값을 가져온다

angular.module('Twitter', ['ngResource']);

function TwitterCtrl($scope, $resource){
	$scope.twitter = $resource('http://search.twitter.com/:action', 
		{action:'search.json', q:'angularjs', callback:'JSON_CALLBACK'},
		{get:{method:'JSONP'}});

	// $scope.twitterResults = $scope.twitter.get(function(){ alert(' hi dowon jsonp '); });

	$scope.doSearch = function () {
		$scope.twitterResults = $scope.twitter.get({q:$scope.searchTerm});
	}

}

2) 동영상

- 소스 : https://github.com/ysyun/prototyping/tree/master/angularjs/twitter

저작자표시 비영리 변경금지

'AngularJS > Prototyping' 카테고리의 다른 글

[AngularJS] iCheck JQuery Plugin 을 AngularJS와 통합하기 (0)	2013.08.20
[AngularJS] Todo 목록 만들기 (0)	2013.04.05
[AngularJS] Hello World 만들기 (0)	2013.04.04

posted by 윤영식

Mobile Convergence

Publication

Tag

Category

Recent Post

'twitter'에 해당되는 글 3건

[Bootstrap] jQuery UI와 Angular.js 사이에서

'HTML5, CSS3 > CSS' 카테고리의 다른 글

[OAuth] EveryAuth 이용해서 Twitter 인증하기

'Protocols > OAuth' 카테고리의 다른 글

[AngularJS] Twitter Search 만들기

'AngularJS > Prototyping' 카테고리의 다른 글

티스토리툴바