Flask-Canjs-i18n-Boilerplate

Flask와 Canjs를 이용한 다국어 어플리케이션 토대

canjs와 python flask를 이용한 다국어 어플리케이션 제작을 위한 토대입니다.
Flask 부분은 Matt Wright님의 글에서 영감을 얻었습니다.

Flask-Canjs-i18n-Boilerplate 소스

특징

• Flask/Canjs 연동.
• 다국어 지원.
• 사용자 CRUD 구현.
• 사용자 following/followers 기능 구현.
• 소셜 네트워크 연결 구현.
• 페이스북
• 기타 (TODO)
• RESTful API 구현.
• 반응형 웹 디자인.
• 구글 크롤러 친화적 url('#!').
• 간편한 개발 문서 제작.(Sphinx)
• 쉬운 테스팅. (nosetests)
• 다양한 브라우저 호환 (IE7, IE8, IE9, IE10, Firefox, Chrome, Opera..)
• 더 많은 기능을 윈하신다면, 함께 만들어 가요! :D

써보기

http://flask-canjs-i18n-boilerplate.ap01.aws.af.cm/

어떻게 동작하나요?

환경

클라이언트 사이드

• Canjs, 클라이언트 사이드 자바스크립트 프레임워크.
• RequireJS, 자바스크립트 파일•모듈 로더.
• Initializr, HTML5 템플릿.
• Bootstrap, 프론트엔드 프레임워크.
• Bootstrap-ie7, 부트스트랩 3에서 IE7을 지원을 도움.
• mustache, 템플릿 엔진.
• i18next, 자바스크립트 다국어 도구.
• Font Awesome, 크기 변환등 개별화 가능한 백터 아이콘 모음을 제공.
• typeahead.js, 텍스트 자동 완성 라이브러리.
• spin.js, 작업중 활동 표시기.
• Placeholders.js, 자바스크립트를 통해 HTML5의 placeholder 속성을 사용 할 수 있게 함.
• Jade(pyjade), 파이썬용 Jade 템플릿 엔진 확장.
• jQuery, 작고 빠르고 유용한 자바스크립트 라이브러리.
• jQuery BBQ, HTML5 hashchange 이벤트 사용을 도와줌.

서버 사이드

• Flask, 가벼운 파이썬 프레임워크.
• Flask-Babel, 플라스크용 다국어 확장.
• Flask-Gravatar, 플라스크용 그라바타 확장.
• Flask-Security, 플라스크용 로그인 보안 확장.
• Flask-Social, Flask-Security에서 Oauth를 지원하는 확장.
• Flask-Assets, 자바스크립트와 스타일시트를 관리하는 플라스크용 확장.
• Flask-SQLAlchemy, SQLAlchemy사용을 위한 플라스크용 확장.
• Flask-WTF, WTForms 통합 확장.
• Flask-Cache, 캐쉬 사용을 도와주는 플라스크용 확장.
• Alembic, SQLAlchemy 데이터베이스 마이그레이션 관리 도구.
• Celery, 분산 메시지 전달 기반의 비동기 작업 queue/job 큐.

디버깅과 테스팅

• flask-debugtoolbar, django-debug-toolbar를 플라스크 용으로 포팅한 디버깅 툴바.
• nose, 멋진 파이썬용 테스팅 도구.
• BusterJS, 자바스크립트 테스팅 도구.

문서 생성

• Sphinx, 지적이고 아름다운 문서를 만들어주는 도구.
• JSDoc, 자바스크립트 문서화 도구.

설치

도구 설치

• virtualenv, 분리된 파이썬 환경을 만들어줍니다.
• virtualenvwrapper, virtualenv를 보다 편리하게 사용하도록 돕습니다.

프로젝트 복제

$ git clone https://github.com/dorajistyle/flask-canjs-i18n-boilerplate.git
$ cd flask-canjs-i18n-boilerplate.git

프로젝트를 위한 virtualenv 생성

$ mkvirtualenv flask-canjs-i18n-boilerplate

필요 라이브러리 설치

$ pip install -r requirements.txt

데이터베이스 마이그레이션

$ alembic revision --autogenerate -m "Alembic initilized boilerplate tables."
$ alembic upgrade head

관리자 추가

'[email protected]'와 'password'로 로그인 하시면 됩니다.

$ python manage.py init_user

설정

설정 값을 올바르게 설정해야 합니다.(데이터베이스, 메일, 소셜 네트워크 정보...)

• application/settings.py엔 서버 사이드 설정이 들어 있습니다.
• application/frontend/static/js/settings.js엔 클라이언트 사이드 설정이 들어 있습니다.
• ./alembic.ini엔 alembic설정이 들어있습니다.

번역

• 서버 사이드 번역(Babel)은 applications/frontend/translations 폴더에 있습니다.
• 클라이언트 사이드 번역(i18next)은 applications/frontend/static/locales 폴더에 있습니다.

바벨 번역 컴파일

$ python tr_compile.py

사용

어플리케이션 실행

$ python wsgi.py

어플리케이션 프로파일 실행

$ python profile.py

문서 생성

$ python generate_documents.py

정적 폴더 최적화

Nodejs 와 RequireJS가 설치되어 있어야 합니다.
더 자세한 문서를 원하신다면 다음을 클릭하세요. RequireJS Optimizer.
$ optimize_static.sh

테스트

$ nosetests

아래의 테스트 스크립트를 이용하셔도 됩니다.

$ python run_nosetests.py

---

사용권

Flask-canjs-i18n-boilerplate는 MIT license를 따릅니다.

by 月風

Tags : 다국어, canjs, debelopment, flask, Flask-Canjs-i18n-Boilerplate, IT, web

• 재미있게 읽으셨나요?
  광고를 클릭해주시면,
  블로그 운영에 큰 도움이 됩니다!

Canjs + Flask 예제

Canjs와 Flask를 이용한 웹개발 예제

클라이언트 사이드 자바스크립트 프레임워크인 Canjs와
파이썬 마이크로 프레임워크인 Flask를 이용한 웹 어플리케이션 예제입니다.
이 Canjs + Flask 예제가 프레임워크 이해에 도움이 되길 바랍니다.

Canjs + Flask 예제 소스

예제에 사용된 라이브러리

• Canjs, 클라이언트 사이드 자바스크립트 프레임워크.
• RequireJS, 자바스크립트 파일•모듈 로더.
• Initializr, HTML5 템플릿.
• Bootstrap, 프론트엔드 프레임워크.
• JSDoc, 자바스크립트 문서화 도구.
• BusterJS, 자바스크립트 테스팅 도구.
• mustache, 템플릿 엔진.
• i18next, 자바스크립트 다국어 도구.
• Flask, 가벼운 파이썬 프레임워크.
• Flask-SQLAlchemy, SQLAlchemy의 플라스크 플러그인.
• Jade(pyjade), 파이썬용 Jade 템플릿 엔진 플러그인.
• Flask-Babel, 플라스크용 다국어 플러그인.

예제의 이해를 돕는 글

• Canjs
• RequireJS
• Javascript snippets
• JSDOC
• Python Flask Extensions Tip

by 月風

Tags : 예제, canjs, development, flask, IT, requireJS, web

• 재미있게 읽으셨나요?
  광고를 클릭해주시면,
  블로그 운영에 큰 도움이 됩니다!

Canjs

잘 짜여진 자바스크립트 MVC 프레임워크. Canjs

Backbone, AngularJS, Spine….
그동안 나왔던 자바스크립트 프레임워크를 조금씩 건드려는 보았지만,
항상 아쉬움이 남았습니다.
이번에 Canjs를 써보니, 정말 잘 만들어진 프레임워크라는 생각이 들어요.
자바스크립트MVC 프레임워크를 써 볼까 생각 중이시라면, Canjs 한번 고려해 보세요.

can.Control

컨트롤러에서 이벤트 처리

"li .destroy {Event.destroy}": function( el, event) {
var todo = el.closet('li').data('todo);
todo.destroy();
event.stopPropagation();}
});
Events = {destroy : "click"};


css Selector, html.getElementBy, $(selector)가 Control의 셀렉터로 사용된다.

When the element your Control is bound to is removed from the DOM,
the Control destroys itself, cleaning up any bound event handlers.

can.Control 이 아는 이벤트.
* change
* click
* contextmenu
* dblclick
* focusin
* focusout
* keydown
* keyup
* keypress
* mousedown
* mouseenter
* mouseleave
* mousemove
* mouseout
* mouseover
* mouseup
* reset
* resize
* scroll
* select
* submit

링크 처리 방법(How can I make a link in Canjs?)

레이어(layer)
<a id="id" href="javascript://">href</a>

페이지(page)
<a id="id" href="#!id">href</a>


무스타치에서 콜백 받기(Mustache Element Callback)

{{data 'model'}}


경로 설정(RequireJS Paths)

requireJS can require is /can
requireJS에서 canJS를 쓸 땐 can.js를 패스로 잡고 사용해야 한다.
registerHelper이용을 위해서는 can/view/mustache가 필요하다.

404루트 잡기(How to define a catch all route to handle 404 in can js?)

http://stackoverflow.com/questions/13824665/how-to-define-a-catch-all-route-to-handle-404-in-can-js

can.route.bind('change', function(ev, newVal) {
if (newVal === 'route') {
var valid = false;
$.each(can.route.routes, function(k,v) {
if (new RegExp(v.test).test(window.location.hash)){
valid = true;
return; //exit loop
}
})
if (!valid) {
//handle the false route here
}
}
});


다국어 지원(Localization)

Localization is a good example of a custom helper you might implement in your application. The below example takes a given key and returns the localized value using jQuery Globalize.

1. Mustache.registerHelper('l10n', function(str, options){
2. return Globalize != undefined
3. ? Globalize.localize(str)
4. : str;
5. });


can.route에서 i18next 데이터를 받아오지 못할 때

can.when을 이용하여 초기화가 된 후 can라우팅 처리를 해 준다.


var lang =utils.getParam('lang');
var i18noption = {debug: true};
lang != undefined
? i18noption.lng = lang
: i18n_option.lng = "en";
can.when(i18n.init(i18n_option)).then(function (){});


모델 관계(model associations)

https://forum.javascriptmvc.com/topic/questions-about-model-associations

<div class="header">
<h1>Association</h1>
</div>
<!-- YOUR CODE HERE -->
<div id="contacts"></div>

can.fixture("/contacts.json", function(){
return [{
'id': 1,
'name' : 'Justin Meyer',
'birthday': '1982-10-20',
tasks : [{
id: 1,
title: "write up model layer",
due: "2010-10-5"
}]},{
'id': 2,
'name' : 'Brian Moschel',
'birthday': '1983-11-10',
tasks : [{
id: 2,
title: "write up funcunit",
due: "2009-5-1"
},{
id: 3,
title: "test funcunit",
due: "2010-3-15"}]
},{
'id': 3,
'name' : 'Bobby Joe',
'birthday': '1980-2-10'
}];
})

can.Model.convert.date = function(raw){
if(typeof raw == 'string'){
var matches = raw.match(/(\d+)-(\d+)-(\d+)/);
return new Date( +matches[1],
(+matches[2])-1,
+matches[3] );
}else if(raw instanceof Date){
return raw;
}
};

// A task model that has a date
can.Model("Task",{
attributes : {
due : 'date',
}
},{
weeksPastDue : function(){
return Math.round( (new Date() - this.due) /
(1000*60*60*24*7 ) );
}
});

// A contact model that has many tasks
can.Model("Contact",{
attributes : {
birthday : 'date',
tasks: "Task.models"
},
findAll : "/contacts.json"
},{
ageThisYear : function(){
return new Date().getFullYear() -
this.birthday.getFullYear()
},
getBirthday : function(){
return ""+this.birthday.getFullYear()+
"-"+(this.birthday.getMonth()+1)+
"-"+this.birthday.getDate();
}
});

// Get all contacts and put them on the page
Contact.findAll({},function(contacts){
var contactsEl = can.$('#contacts');

can.each(contacts, function(contact){
var li = can.$('<li>')
.html(contact.name + " "+ contact.ageThisYear())
.appendTo(contactsEl);

var ul = can.$("<ul>");
var tasks = contact.attr('tasks')

if(tasks){
tasks.each(function(){
this.attr('contact', contact);
ul.append('<li>'+this.title+" "
+this.weeksPastDue()+' contact: '+ this.attr('contact.name') +'</li>')
});
}

ul.appendTo(li)
});
});


 

Canjs 웹사이트

by 月風

Tags : canjs, development, framework, IT, javascript, mvc, web

• 재미있게 읽으셨나요?
  광고를 클릭해주시면,
  블로그 운영에 큰 도움이 됩니다!