构建一个 Twitter Web 应用程序

依赖项

常用缩略语

安装 python-twitter 包装程序

tar -zxvf simplejson-2.0.9.tar.gz
cd simplejson-2.0.9
sudo python setup.py build
sudo python setup.py install

sudo
easy_install simplejson-2.0.9-py2.5-win32.egg

tar -zxvf python-twitter-0.6.tar.gz
cd python-twitter-0.6
sudo python setup.py build
sudo python setup.py install

安装 Django

tar -zxvf Django-1.0.2.tar.gz
cd Django-1.0.2
sudo python setup.py build
sudo python setup.py install

$ django-admin
--version

python-twitter 库

import
twitter

twitter

twitter.Status

twitter.User

twitter.DirectMessage

twitter.Api()

import twitter
api = twitter.Api(username='yourUserName', password='yourPassword')

Api

statuses
= api.GetUserTimeline()

twitter.Status

>>>print
[s.text for s in statuses]

$
pydoc twitter.Api

GetUserTimeline()

twitter.Status

GetFriends()

twitter.User

PostUpdate()

twitter.Status

加入 jQuery

创建 Django 项目

django-admin
startproject pytweetproj

python
manage.py runserver

# Django settings for pytweetproj project.
import os
APPLICATION_DIR = os.path.dirname( globals()[ '__file__' ] )

DEBUG = True
TEMPLATE_DEBUG = DEBUG

ADMINS = (
)

MANAGERS = ADMINS

# Not important to change this, we're not using any databases
DATABASE_ENGINE = ''
DATABASE_NAME = ''
DATABASE_USER = ''
DATABASE_PASSWORD = ''
DATABASE_HOST = ''
DATABASE_PORT = ''

TIME_ZONE = 'America/Chicago'
LANGUAGE_CODE = 'en-us'

SITE_ID = 1

# if you won't be using internationalization, better to keep
# it false for speed
USE_I18N = False

MEDIA_ROOT = os.path.join( APPLICATION_DIR, 'resources' )
MEDIA_URL = 'http://localhost:8000/resources/'
ADMIN_MEDIA_PREFIX = '/media/'

# Make this unique, and don't share it with anybody.
SECRET_KEY = '=y^moj$+yfgwy2kc7^oexnl-f6(b#rkvvhq6c-ckks9_c#$35'

# List of callables that know how to import templates from various sources.
TEMPLATE_LOADERS = (
'django.template.loaders.filesystem.load_template_source',
'django.template.loaders.app_directories.load_template_source',
#     'django.template.loaders.eggs.load_template_source',
)

MIDDLEWARE_CLASSES = (
'django.middleware.common.CommonMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
)

ROOT_URLCONF = 'pytweetproj.urls'

TEMPLATE_DIRS = (
os.path.join( APPLICATION_DIR, 'templates' ),
)

INSTALLED_APPS = (
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'twitterPanel',
)

# added for sessions
SESSION_ENGINE = 'django.contrib.sessions.backends.file'

os.path.dirname(
globals()[ '__file__' ] )

twitterPanel

twitterPanel

django-admin
startapp twitterPanel

cd

打造 URL

from django.conf.urls.defaults import *
from django.conf import settings

urlpatterns = patterns('',
( r'^resources/(?P<path>.*)$',
'django.views.static.serve',
{ 'document_root': settings.MEDIA_ROOT } ),
( r'^twitterPanel/', include( 'twitterPanel.urls' ) ),
)

正则表达式

urlpatterns

django.views.static.serve()

twitterPanel

from django.conf.urls.defaults import *
from twitterPanel.views import *

urlpatterns = patterns( '',
url( r'^$', index, name = 'twitterPanel_index' ),
url( r'^panel/$', panel, name = 'twitterPanel_panel' ),
url( r'^update/$', update, name = 'twitterPanel_update' ),
)

视图

from django.shortcuts import render_to_response
from django.template.context import RequestContext
import twitter

render_to_response()

HttpResponse

RequestContext

django.template.Context

HttpRequest

TEMPLATE_CONTEXT_PROCESSORS

index()

index

def index(request):
template = 'index.html'
userName = request.POST.get( 'userTxt' )
password = request.POST.get( 'passwordTxt' )

if userName is not None and password is not None:
try:
api = twitter.Api( username = userName, password = password)
# just grab the first 5 tweets
statuses = api.GetUserTimeline()[0:5]
# limit to just the first 120
following = api.GetFriends()[0:120]
except NameError, e:
print "unable to login"

else:
statuses = {}
following = False

# place values in session
request.session['statuses'] = statuses
request.session['following'] = following
request.session['userName'] = userName
request.session['password'] = password

data = {
'statuses' : statuses,
'following' : following,
}

return render_to_response(template, data,
context_instance = RequestContext(request))

POST

twitter.Api

panel()

panel

def panel(request):
template = 'panel.html'
data = {
'statuses' : request.session['statuses'],
'following' : request.session['following']
}
return render_to_response(template, data,
context_instance = RequestContext(request))

panel

render_and_response

update

def update(request):
template = 'panel.html'

userName = request.session['userName']
password = request.session['password']

try:
api = twitter.Api( username = request.session['userName'],
password = request.session['password'])
api.PostUpdate(request.POST.get('updateTextArea'))
updated = True
statuses = api.GetUserTimeline()[0:5] # reload the statuses
except NameError, e:
print "unable to login"
updated = False

data = {
'userName' : request.session['userName'],
'password' : request.session['password'],
'updated'  : updated,
'statuses' : statuses
}
return render_to_response(template, data,
context_instance = RequestContext(request))

twitter.Api

api

模板

<html>
<head>
<title>Sample Python-Twitter Application</title>
<link type="text/css"
href="{{MEDIA_URL}}css/cupertino/jquery-ui-1.7.2.custom.css"
rel="stylesheet" />
<script type="text/javascript"
src="{{MEDIA_URL}}js/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
src="{{MEDIA_URL}}js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">

$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 400,
buttons: {
"Ok": function() {
$(this).dialog("close");

$.post('{% url twitterPanel_index %}', $("#loginForm").serialize());
$( '#panel' ).html( ' ' ).load( '{% url twitterPanel_panel %}' )

$( '#dialog_link' ).fadeOut(1500);
$( '#demoTitle' ).fadeOut(1500);

},
"Cancel": function() {
$(this).dialog("close");
}
}
});

// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<style type="text/css">
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;
text-decoration:none; position: relative;}
#dialog_link span.ui-icon {
margin: 0 5px 0 0;position: absolute;
left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {
margin: 2px; position: relative; padding: 4px 0;
cursor: pointer; float: left;  list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
</head>

<body>

<h2 id="demoTitle" class="demoHeaders">PyTwitter Demo</h2>
<p>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-newwin"></span>Start Demo
</a>
</p>

<div style="position: relative; width: 96%; height: 200px; padding:1% 4%;
overflow:hidden;" class="fakewindowcontain">
</div>

<!-- ui-dialog -->
<div id="dialog" title="Login" >
<p>
<form action="#" name="loginForm" id="loginForm" method="POST">
<table>
<tr>
<td>user</td> <td><input type="text" name="userTxt" id="userTxt"/></td>
</tr>
<tr>
<td>password</td>
<td><input type="password" name="passwordTxt" id="passwordTxt"/></td>
</tr>
</table>
</form>
</p>
</div>

<!-- only show if logged in -->
<!-- Accordion -->
<div id="panel" style="position: absolute; top: 2%; left:2%;
width:600px; visibility:visible;">
</div>

</body>
</html>

{{MEDIA_URL}}

{{MEDIA_URL}}

$

jQuery

document.getElementById('name')

$('#name')

<div>

dialog

.dialog()

$(
'#panel' ).html( ' ' ).load( '{% url twitterPanel_panel %}' )

<script type="text/javascript">
$(function(){
$("#main").accordion({
header: "h3",
autoHeight: true
})
.hide()
.fadeIn(1500);

$('#updateTextArea').keyup(function(){
// text used for non-input elements. Var() is used for input elements
var tweetLength =  $('#updateTextArea').val().length;
$('#charCount').text( 140 - tweetLength );
});

$('#updateBtn').click(function(){
if($('#updateTextArea').val().length <= 140){
// submit
$.post('{% url twitterPanel_update %}', $("#updateForm").serialize());
$("#updateStatus").text("last update: " + $('#updateTextArea').val());
// clear text area
$('#updateTextArea').val("");
// reset counter too
$('#charCount').text( "140" );
}
return false;
});
});
</script>

<div id="main">
<div>
<h3><a href="#">My Recent Tweets</a></h3>
<div>
{% if statuses %}
{% for s in statuses %}
<p style="border-top:1px dashed #f00; margin-top:1em;
padding-top:1em font: 80% 'Trebuchet MS', sans-serif;">
{{ s.text }}
</p>
{% endfor %}
{% else %}
No tweets found
{% endif %}
</div>
</div>
<div>
<h3><a href="#">Update Status</a></h3>
<div>
<form action="#" id="updateForm" name="updateForm" method="POST">
<textarea id="updateTextArea" name="updateTextArea" rows=2 cols=70 />
<button id="updateBtn" class="ui-state-default ui-corner-all">Update</button>
</form>
<div id="charCount" name="charCount" value=140>140</div>
<div id="updateStatus" name="updateStatus"><!-- update message here --></div>
</div>
</div>
<div>
<h3><a href="#">Following</a></h3>
<div>
{% if following %}
{% for f in following %}
<img src="{{ f.GetProfileImageUrl }}" width=28 height=28 />
{% endfor %}
{% else %}
following variable is empty
{% endif %}
</div>
</div>
</div>

status

status

<div>

charCount

<div>

updateStatus

onclick

post

following

<image>

src

结束语

下载

参考资料

学习

获得产品和技术

讨论