天天看點
傳回

建構一個 Twitter Web 應用程式

www.ibm.com/developerworks/cn/opensource/os-social-twitter/index.html

用 Django 和 jQuery 編寫 Web 2.0 風格的應用程式

在本文中，了解如何使用 Django、jQuery 和 python-twitter 包裝程式建立能夠支援 Twitter 的 Web 2.0 應用程式，Django、jQuery 和 python-twitter 包裝程式可被輕松插入到您自己的 Django 項目内使用。通過這個應用程式，您将能夠看到最新的 tweet、釋出更新和顯示您的朋友和追随者。

建構一個 Twitter Web 應用程式

 評論：

Cesar Otero, 顧問, Freelance Consultant

2010 年 1 月 07 日

  • 建構一個 Twitter Web 應用程式
    内容

最近，Twitter 似乎無所不在。政客、演員、父母 — 隻要您說得出來 — 都在使用社交網絡媒介。客戶不僅要求 Web 應用程式是支援 Twitter 的，而且還要求它具備出色的 Web 2.0 外觀，而這隻能通過 Ajax 獲得。讓我們進入 Django 和 jQuery 的世界。

圖 1. Twitter 面闆顯示了最新的 tweet
建構一個 Twitter Web 應用程式

依賴項

常用縮略語

  • Ajax：Asynchronous JavaScript + XML
  • API：應用程式程式設計接口
  • CSS：級聯樣式表
  • FAQ：常見問題解答
  • HTML：超文本标記語言
  • HTTP：超文本傳輸協定
  • REST：具象狀态傳輸
  • UI：使用者界面

我強烈建議您通讀 Django 教程，然後再開始動手。此外，還要求您具備紮實的 JavaScript 基礎知識。當然，Twitter 帳戶以及對術語的了解（比如什麼是 tweet）也必不可少。而您的工具箱中則應該包含 Python、Django、jQuery 和 python-twitter 包裝程式。相關連結，請參考 參考資料。

本文中的這個 Web 應用程式不需要資料庫；Twitter 基礎結構将儲存所有資料。但是，作為對此應用程式的一個改進，也可以內建一個資料庫，甚至可以使用 Django 和資料庫來将您的 Twitter 帳戶上的内容複制到您自己的伺服器上以生成副本。本文還假設您使用的是 Linux®。

我使用 Python V2.5.2 測試這個示例應用程式。Python 在大多數 Linux 機器上是預設安裝好的；如果您的機器上沒有安裝 Python，那麼關于下載下傳和安裝該語言的資訊，可以參見 參考資料。

Twitter 的資料通過兩個 API 公開給公衆，一個是搜尋 API，一個是 RESTful API。（Twitter FAQ 中提到過将來計劃隻用單一一個 API）。一個 REST Web 服務指的是在 HTTP 内實作的一個 Web 服務，它遵循 REST 原理（更多資訊，請參閱 參考資料）。

安裝 python-twitter 包裝程式

我們所需的最後一個元件是 python-twitter，其項目站點上将它定義為 “圍繞 Twitter API 及 twitter 資料模型的一個 python 包裝程式”。現在已經有幾個庫可以通過多種語言與 Twitter 的服務互動 — 從 Ruby 到 Eiffel，幾乎任何語言。目前，有五個庫可以互動 Python 與 Twitter，它們是 DeWitt Clinton 的 Python-twitter、Andrew Price 的 python-twyt、Dustin Sallings 的 twitty-twister、Ryan McGrath 的 twython 以及 Josh Roesslein 的 Tweepy。

python-twitter 庫需要依賴項 simplejson（參見 參考資料）。在下載下傳 simplejson 後，通過發出清單 1 内的這些指令來安裝它。

清單 1. 安裝 simplejson 所需的指令 
tar -zxvf simplejson-2.0.9.tar.gz
cd simplejson-2.0.9
sudo python setup.py build
sudo python setup.py install

如果您更願意使用 egg 包，可以使用指令 

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

。

現在，可以安裝 python-twitter。在下載下傳了這個包之後，執行清單 2 内的指令。

清單 2. 安裝 python-twitter 所需的指令 
tar -zxvf python-twitter-0.6.tar.gz
cd python-twitter-0.6
sudo python setup.py build
sudo python setup.py install

安裝 Django

接下來要安裝的是 Django，它是一種功能強大的 Python Web 架構。本文中的示例應用程式是用 V1.0.2 final 編寫的，但最新的穩定版本已經是 1.1。 Django 的安裝與 simplejson 和 python-twitter 的安裝一樣簡單。在下載下傳了這個包後，在終端内輸入清單 3 内的指令即可。

清單 3. 安裝 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

 來驗證 Django 是否處于您的路徑内。如果一切進展順利，就可以開始編寫代碼了。

回頁首

python-twitter 庫

在安裝了 python-twitter 之後，就可以探索它的功能了。要通路這個庫，可以使用指令 

import twitter

。

twitter

 子產品為 Twitter 資料模型和 API 提供了包裝程式。這裡有三個資料模型類：

twitter.Status

、

twitter.User

 和 

twitter.DirectMessage

。所有的 API 調用都會傳回其中一個類的一個對象。要通路此 API，需要生成 

twitter.Api()

（注意其中的第一個字母是大寫的）的一個執行個體。在不為這個構造函數提供任何實參的情況下建立執行個體是允許的，但隻限于不需要登入的那些方法調用。要進行登入通路，請使用如下代碼：

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

借助一個執行個體化了的 

Api

 對象，您就獲得自己的追随者、您所追随的人和狀态 (tweet)；以及釋出您目前的狀态等。例如，要獲得一個使用者的狀态清單，可以調用 

statuses = api.GetUserTimeline()

，它會傳回 

twitter.Status

 對象的一個清單。要建立具有這些 tweet 的文本（字元串）的另外一個清單，應該使用清單了解（list comprehension）：

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

。

表 1 列出了在這個 Web 應用程式内将要用到的類和方法。要想獲得完整的文檔，請使用 pydocs — 比如，

$ pydoc twitter.Api

— 或通路 python-twitter 文檔頁面（參見 參考資料）。

表 1. 一些有用的 python-twitter API 方法
方法名稱 傳回 描述

GetUserTimeline()

twitter.Status

  對象的清單 		獲得一個使用者的所有 tweet

GetFriends()

twitter.User

  對象的清單 		獲得追随者清單

PostUpdate()

 		單一一個 

twitter.Status

 		釋出一個 tweet

回頁首

加入 jQuery

準确來講，我們所使用的不僅僅是 jQuery 核心，還有 jQuery UI，它提供了小部件、主題和動畫。轉向 ThemeRoller 頁面，在左側的面闆中，單擊 Gallery 頁籤。選擇自己喜歡的一個主題（我為這個示例應用程式使用了 Cupertino），然後單擊主題名下面的 Download。這麼做會連結到實際的下載下傳頁面；選擇目前（穩定）版本，在作者寫作本文之時，jQuery V1.3+ 的版本是 1.7.2。

這裡沒有安裝過程；隻需解壓縮 ThemeRoller 檔案并在正确的地方放置正确的目錄/檔案。如果願意，還可以自己建立主題，但為了簡便起見，我使用的是預先已有的一個主題。

回頁首

建立 Django 項目

接下來，需要建立一個新的 Django 項目。使用指令 

django-admin startproject pytweetproj

，其中 pytweetproj 是本文中為此項目使用的名稱。也可以使用别的名稱，但一定要在項目中自始至終使用該名稱。更改到 pytweetproj 目錄。為了啟動 Django Web 伺服器，在指令行鍵入

python manage.py runserver

，打開一個 Web 浏覽器，并導航到 http://127.0.0.1:8000。應該會得到一個頁面，提示說 “It worked！”。如果在任何時候想要停止或重新開機這個伺服器，可以按 Ctrl+C 來終止這個過程。不要将開發伺服器用于生産。在完成了項目的開發之後，應該轉移到一個安全的生産伺服器，比如 Apache。

在 root 項目目錄，建立一個名為 resources 的子目錄，内含 CSS 檔案、JavaScript 檔案等。從解壓之前下載下傳的 ThemeRoller 檔案的地方，将 css 和 js 目錄（解壓縮自 ThemeRoller ZIP 檔案）以及 jQuery 核心移動或複制到 resources 目錄。

利用自己喜歡的文本編輯器，打開 settings.py 檔案并改變它來比對清單 4 内所示的設定。

清單 4. Django 設定 
# 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__' ] )

 設定應用程式目錄。可以使用相同的方法設定 resources 目錄的路徑，以及 TEMPLATE_DIR。此外，還需要将 MEDIA_URL 設定為 http://localhost:8000/resources/。

由于我們不使用資料庫，是以無需設定任何相關的變量，但仍需設定 ROOT_URLCONF。注意到在 INSTALLED_APPS 内，有一個名為

twitterPanel

 的值還未建立。我們接下來将要建立該 Django 應用程式。

要建立這個 

twitterPanel

 應用程式，可以使用 

django-admin startapp twitterPanel

 并鍵入 

cd

 以切換到最新建立的子產品目錄：twitterPanel。在這個 twitterPanel 目錄，建立另一個目錄，名為 templates，内含 Django 模闆。

回頁首

打造 URL

用自己喜歡的文本編輯器，打開項目根内的檔案 url.py 并參照清單 5 更改代碼。這個檔案将 URL 映射到回調函數。

清單 5. Root 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' ) ),
)

正規表達式

根據 Wikipedia，正規表達式 “提供了一種精确而靈活的方式來識别感興趣的文本字元串，比如特殊的字元、單詞或字元的模式。”如果您之前沒有使用正規表達式的經驗，我強烈建議您參閱 Jeffrey Friedl 的 Mastering Regular Expressions 或 David Mertz 的 Text Processing in Python。Python 頁面上的 Regular Expression HOWTO 也是一個不錯的起點。

urlpatterns

 内的第一個映射為使用靜态服務的資源或媒介（例如，圖像檔案）定義了一種比對。由于我們使用 Django 開發伺服器來服務靜态内容，因而使用了

django.views.static.serve()

 視圖。第二個映射包括了 

twitterPanel

 應用程式内的那些 URL 模式。打開 twitterPanel 下的 url.py 檔案（不要将該 url.py 與根下的那個檔案混淆）并添加清單 6 内的代碼。

清單 6. Twitter 面闆 URL 
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' ),
)

回頁首

視圖

我們将隻建立三個視圖：index、panel 和 update。注意到我們無需向這個根項目添加視圖 — 隻需向 Twitter Panel 應用程式添加視圖。打開 twitterPanel 目錄下的 view.py 檔案并在檔案的頂部添加清單 7 所示的導入。

清單 7. Twitter 面闆視圖導入 
from django.shortcuts import render_to_response
from django.template.context import RequestContext
import twitter

render_to_response()

 方法是一個 Django 快捷方式，用來呈現一個具有特定上下文的模闆，它傳回的是一個 

HttpResponse

 對象。

RequestContext

 是一個 Django 上下文，與正常的 

django.template.Context

 有些許差異。尤其是，它接受一個 

HttpRequest

 對象，并會用 

TEMPLATE_CONTEXT_PROCESSORS

 設定内的變量自動填充上下文。

第一個視圖方法 

index()

 應該如清單 8 所示。

清單 8. 

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))

模闆 index.html 還尚未編寫。此時，您隻需記住目前有兩個 HTML 元素：一個是用來輸入使用者名的文本框，一個是密碼輸入框。資料通過 

POST

方法發送給此視圖。如果使用者名和密碼均已輸入，就會執行個體化一個 

twitter.Api

 對象并檢索這個已登入使用者的前 5 個 tweet 以及前 120 個您追随的人。狀态、朋友、使用者名以及密碼均存儲于這個會話内以便日後供程式的其他部分檢索。

第二個視圖方法 

panel()

 則更為簡短，如清單 9 所示。

清單 9. 

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.html 模闆，該模闆同樣也尚未存在。

panel

 是您登入進來後，所有動作發生的地方 — 換言之，就是顯示 tweet、進行更新以及顯示朋友的地方。稍後，我們還會詳加讨論。目前，我們所要做的是從此會話獲得一些資料，然後進行一次

render_and_response

。相比之下，第三個視圖方法 

update

 多少有些複雜。參見清單 10.

清單 10. 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

 對象來向此帳戶釋出一個更新。這些狀态之後會被重新加載。

回頁首

模闆

在 twitterPanel/templates 内，建立一個名為 index.html 的檔案并打開它。用清單 11 内的代碼填充這個檔案。

清單 11. 索引模闆 
<html>
  <head>
    <title>Sample Python-Twitter Application</title>
    <link type="text/css" 
        href="{{MEDIA_URL}}css/cupertino/jquery-ui-1.7.2.custom.css" target="_blank" rel="external nofollow"  
        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( '&nbsp;' ).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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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>

圖 2 顯示了此應用程式的開始部分：一個 jQuery UI 按鈕。

圖 2. jQuery UI 按鈕
建構一個 Twitter Web 應用程式

這個按鈕調用 Login 視窗，如圖 3 所示。

圖 3. Login 視窗
建構一個 Twitter Web 應用程式

讓我們對 清單 11 内的代碼進行分解讨論。首先，利用 

{{MEDIA_URL}}

 告訴浏覽器在哪裡可以找到 CSS、JavaScript 和 jQuery 檔案。在 Django 呈現此模闆時，它會用實際的路徑代替 

{{MEDIA_URL}}

。

在 header 内，添加自己編寫的 JavaScript。美元符号（

$

）是 

jQuery

 執行個體的别名。

document.getElementById('name')

 的 jQuery 快捷方式是 

$('#name')

。比如，用 

<div>

 标記可以定義一個 jQuery UI 元素 

dialog

，然後再調用 

.dialog()

 方法來建立 jQuery 視窗。在此視窗内，添加兩個按鈕：OK 和 Cancel。Cancel 的作用是關閉視窗，而 OK 則執行兩個動作：先關閉視窗，然後再釋出到伺服器。如果 index 視圖接收到的資料是正确的憑證，那麼就可以得到 tweet 和追随者資料。 然後，視窗按鈕和标題淡出，Twitter 面闆逐漸淡入。

這裡最有魔力的一行代碼是 

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

，它加載外部的 Django 模闆 panel.html。Twitter 面闆是一個 jQuery UI accordion 小部件。清單 12 給出了此面闆模闆的相應代碼。将代碼儲存到 twitterPanel/templates 内的 panel.html。

清單 12. Twitter 面闆模闆 
<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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >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>

圖 4 顯示了具有 Update Status 頁籤的這個 Twitter 面闆。

圖 4. 顯示 Update Status 頁籤的 Twitter 面闆
建構一個 Twitter Web 應用程式

将這個 accordion 小部件命名為 “main”，這個小部件是您登入進來後所有動作發生的地方。在 accordion 内，有三個頁籤：My Recent Tweets、Update Status 和 Following，如圖 5 所示。

圖 5. 顯示 Following 頁籤的 Twitter 面闆
建構一個 Twitter Web 應用程式

第一個頁籤隻顯示前 5 個 tweet。如果 

status

 對象不為空，Django 就會循環周遊每個 

status

 對象并顯示相應的文本。否則，則會在此頁籤内顯示一個 “No tweets found” 消息。

第二個頁籤 Update Status，包含一個具有文本區域和按鈕的 HTML 表單。在此表單下是一個 

<div>

，名為 

charCount

，之後是另外一個

<div>

，名為 

updateStatus

。Update Status 還會有一個 

onclick

 事件；消息長度會被測試以確定其不超過 140 個字元的限制，如果不超過，就利用 jQuery 

post

 方法向 update 視圖發送更新文本，由它負責其餘的事情。這樣一來，最新的 tweet 就顯示在此頁面内了。

為了增加趣味性，我還添加了一些 JavaScript，用來計算這個 tweet 所剩的字元數。請記住，Twitter 具有 140 個字元/tweet 的限制。其工作原理是這樣的: 當松開一個鍵時，update text 框内的字元數就被從 140 減掉。字元計數再被相應地在這個頁面上更新。

Twitter 面闆内的第三個頁籤是 Following，它先是檢查 

following

 對象是否為 null。如果是，就像 My Recent Tweets 頁籤那樣，循環周遊每個使用者對象。每個使用者都具有一個概要檔案圖像 URL：将該值放入 

<image>

 标記的 

src

 屬性。結果，您所 “追随” 的每個使用者都會顯示在第三個頁籤内。

現在，萬事俱備之後，就可以啟動 Django 伺服器并通路 http://127.0.0.1:8000/twitterPanel。您應該會看到一個用于登入的 jQuery UI 按鈕。單擊此按鈕後，會出現 Login 視窗。鍵入您自己的 twitter 憑證，Twitter 面闆就會出現。

回頁首

結束語

現在，您看過了這個示範後，可能已經注意到了 jQuery UI 為應用程式的動态感覺增加了很多效果。Django 還簡化了 Python 的後端和模闆處理。

這個應用程式還可以進一步改進，比如向登入過程添加适當的驗證、添加錯誤視窗或您的追随者的清單；發送直接的 tweet；以及搜尋 tweet。當然，您也可以自由發揮自己的創造力。

回頁首

下載下傳

描述 名字 大小
樣例代碼 os-social-twitter-pytweetproj.zip 159KB

參考資料

學習

  • 了解 RESTful 應用程式。
  • 查閱 Twitter API 文檔 了解有關 Twitter API 的方方面面。
  • 要收聽面向軟體開發人員的有趣訪談和讨論，請檢視 developerWorks 播客。
  • 随時關注 developerWorks 技術活動和網絡廣播。
  • 查閱最近将在全球舉辦的面向 IBM 開放源碼開發人員的研讨會、交易展覽、網絡廣播和其他活動。
  • 通路 developerWorks 開源專區 獲得豐富的 how-to 資訊、工具和項目更新以及 最受歡迎的文章和教程，幫助您用開放源碼技術進行開發，并與 IBM 産品結合使用。
  • My developerWorks 社群涵蓋了大量主題，是一個成功的社群典範。
  • 檢視免費的 developerWorks 示範中心 觀看并了解 IBM 及開源技術和産品功能。

獲得産品和技術

  • 下載下傳 Python、閱讀文檔和學習 Python 教程。然後下載下傳 python-twitter 包裝程式。
  • 下載下傳 Django、jQuery 和 jQuery UI。
  • 確定為 python-twitter 包裝程式下載下傳 simplejson 依賴項。
  • 使用 IBM 産品評估試用版軟體 改進您的下一個開源開發項目，這些軟體可以通過下載下傳獲得。
  • 下載下傳 IBM 産品評估試用版軟體 或 IBM SOA Sandbox for Reuse，開始使用來自 DB2®、Lotus®、Rational®、Tivoli® 和 WebSphere® 的應用程式開發工具和中間件産品。

讨論

  • 參與 developerWorks blogs 并加入 developerWorks 社群。
twitter采集 社交網絡 django javascript
上一篇: 有效的使用和設計COM智能指針——條款10：盡量減少智能指針和接口指針的混用
下一篇: 有效的使用和設計COM智能指針——條款25：思考相容取位址操作符帶來的若幹問題

繼續閱讀