Avançar para a área de conteúdo

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

Na primeira vez que você efetua sign in no developerWorks, um perfil é criado para você. Informações selecionadas do seu perfil developerWorks são exibidas ao público, mas você pode editá-las a qualquer momento. Seu primeiro nome, sobrenome (a menos que escolha ocultá-los), e seu nome de exibição acompanharão o conteúdo que postar.

Todas as informações enviadas são seguras.

  • Fechar [x]

Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

Todas as informações enviadas são seguras.

  • Fechar [x]

Construa um aplicativo da Web do Twitter

Escrevendo para a Web 2.0 com Django e jQuery

Cesar Otero, Consultant, Freelance Consultant
Cesar Otero
Cesar Otero é consultor freelancer de Java e Python. É formado em engenharia elétrica com ênfase em matemática.

Resumo:  Saiba como criar um aplicativo em estilo Web 2.0 habilitado para o Twitter usando Django, jQuery, e o wrapper python-twitter que você pode usar e plugar facilmente no seu próprio projeto Django. Com este aplicativo, você poderá ver tweets recentes, atualizações de post, e mostrar seus amigos e seguidores.

Data:  07/Dez/2009
Nível:  Intermediário
Atividade:  2292 visualizações
Comentários:  


Hoje, o Twitter parece onipresente. Políticos, atores, pais — chame como quiser — estão usando a mídia da rede social. Os clientes não estão apenas demandando aplicativos da Web que sejam habilitados para o Twitter, mas também que tenham uma aparência de Web 2.0 neles, o que somente é alcançado por meio do Ajax. Insira Django e jQuery.


Figura 1. Painel do Twitter exibindo tweets recentes


Dependências

Acrônimos frequentemente usados

  • Ajax: JavaScript Assíncrono + XML
  • API: Interface de programação de aplicativos
  • CSS: Folha de estilo em cascata
  • FAQ: Perguntas mais frequentes
  • HTML: Linguagem de Marcação de Hipertexto
  • HTTP: Protocolo de Transporte de Hipertexto
  • REST: Representational State Transfer
  • UI: Interface com o usuário

Eu recomendo fortemente acessar o tutorial do Django antes de começar a trabalhar nisto. Você também precisará de uma sólida base de JavaScript. Sem mencionar que você precisará de uma conta no Twitter e deve conhecer o jargão, como o que é um tweet . Seu arsenal deve conter Python, Django, jQuery e o wrapper python-twitter. Consulte Recursos para os links.

Você não precisará de um banco de dados para este aplicativo da Web; a infraestrutura do Twitter salvará todos os dados. Mas, como uma melhoria neste aplicativo, você certamente poderia integrar um banco de dados e, talvez, usar o Django e um banco de dados para fazer cópias do que está na sua conta do Twitter em seu próprio servidor, por exemplo. Este artigo também supõe que você está trabalhando no Linux®.

Eu testei o aplicativo de amostra com o Python V2.5.2. O Python é instalado por padrão na maioria das máquinas Linux; se você não tiver o Python instalado, consulte Recursos para obter informações sobre transferência por download e instalação da linguagem.

Os dados do Twitter são expostos ao público por meio de duas APIs: a API de procura e a API RESTful. (As FAQ do Twitter mencionam planos futuros para uma única API.) Um serviço da Web REST é um serviço da Web implementado em HTTP que segue os princípios do REST (consulte Recursos para obter mais informações).

Instalando o wrapper python-twitter

O componente final que você precisa é o python-twitter, que é "um wrapper python ao redor da API do Twitter e do modelo de dados do twitter", de acordo com o site do projeto. Existem várias bibliotecas para fazer a interface com os serviços do Twitter em muitas linguagens — qualquer coisa do Ruby ao Eiffel. Atualmente, existem cinco bibliotecas para fazer a interface do Python com o Twitter: Python-twitter, de DeWitt Clinton, python-twyt, de Andrew Price, twitty-twister, de Dustin Sallings, twython, de Ryan McGrath, e Tweepy, de Josh Roesslein.

A biblioteca python-twitter necessita da dependência simplejson (consulte Recursos). Depois de fazer o download de simplejson, instale-o emitindo os comandos mostrados na Lista 1.


Lista 1. Comandos para a instalação do simplejson

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

Se preferir usar o pacote egg, é possível usar o comando sudo easy_install simplejson-2.0.9-py2.5-win32.egg.

Agora, você pode instalar o python-twitter. Após fazer o download do pacote, execute os comandos mostrados na Lista 2.


Lista 2. Comandos para instalar o 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

Instalando o Django

Depois, na lista de instalação está o Django, uma poderosa estrutura da Web do Python. O aplicativo de amostra neste artigo foi escrito com a V1.0.2 final, apesar de a última versão estável ser a 1.1. A instalação é tão fácil quanto a do simplejson e do python-twitter. Depois de transferir o pacote por download, insira os comandos mostrados na Lista 3 em qualquer terminal.


Lista 3. Comandos para instalar o Django

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

Verifique se o Django está no seu caminho tentando o comando $ django-admin --version. Se tudo correu como o planejado, você está pronto para começar a codificação.


A biblioteca python-twitter

Agora que você instalou o python-twitter, é possível explorar seus recursos. Para acessar a biblioteca, use o comando import twitter. O módulo twitter fornece wrappers para o modelo de dados do Twitter e para a API. Existem três classes de modelo de dados: twitter.Status, twitter.User, e twitter.DirectMessage. Todas as chamadas de API retornam um objeto de uma dessas classes. Para acessar a API, faça uma instância de twitter.Api() (observe que a primeira letra está em maiúscula). Criar uma instância sem nenhum argumento para o construtor é válido, mas você estará limitado a chamadas de método que não necessitam de um login. Para ter acesso de login, use o seguinte código:

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

Com um objeto Api instanciado, é possível obter seus seguidores, pessoas que você está seguindo, e os statuses (tweets); postar seu status atual; etc. Por exemplo, obter uma lista de statuses de usuários, chamar statuses = api.GetUserTimeline(), que retorna uma lista de objetos twitter.Status . Para criar outra lista com o texto (cadeias de caracteres) dos seus tweets, você poderia usar a compreensão de lista: >>>print [s.text for s in statuses].

A Tabela 1 lista as classes e os métodos que você usará no seu aplicativo da Web. Para a documentação completa, use os pydocs — $ pydoc twitter.Api, por exemplo — ou visite a página de documentos do python-twitter (consulte Recursos).


Tabela 1. Alguns métodos úteis da API python-twitter
Nome do métodoRetornaDescrição
GetUserTimeline()Lista de objetos twitter.Status Obtém todos os tweets para um usuário
GetFriends()Lista de objetos twitter.User Obtém uma lista de seguidores
PostUpdate()Um único twitter.StatusPosta um tweet


Incluindo o jQuery à combinação

Para ser mais específico, você não está apenas usando o núcleo do jQuery, mas também a UI do jQuery, que fornece widgets, temas e animação. Acesse a página ThemeRoller, e na área de janela à esquerda, clique na guia Gallery . Escolha um tema preferido (eu usei o Cupertino para o aplicativo de amostra), depois clique em Download abaixo do nome do tema. Isso cria o vínculo com a página de download real; escolha a versão atual (estável), que no momento da criação desse texto era 1.7.2 para jQuery V1.3+.

Não há nenhum processo de instalação; basta extrair o arquivo ThemeRoller e colocar os diretórios/arquivos corretos no local certo. Você também é bem-vindo para criar seu próprio tema se desejar, mas para ser mais breve, eu usei um dos temas pré-listados.


Criando seu projeto Django

Depois, você precisa criar um novo projeto Django. Use o comando django-admin startproject pytweetproj no qual pytweetproj é o nome usado para o projeto nesse artigo. Sinta-se à vontade para usar outro nome, mas atente para usar esse nome consistentemente por todo o projeto. Mude para o diretório pytweetproj. Para iniciar o servidor a Web do Django, na linha de comandos, digite python manage.py runserver, abra um navegador da Web, e navegue para http://127.0.0.1:8000. Você deve obter uma página que diz,"Ele funcionou!" Se a qualquer momento você desejar parar ou reiniciar o servidor, pressione Ctrl+C para encerrar o processo. Não use o servidor de desenvolvimento para produção. Quando terminar o desenvolvimento do seu projeto, mova-o para um servidor de produção seguro, como o Apache.

Enquanto no diretório do projeto raiz, crie um subdiretório chamado recursos, que conterá o seu arquivo CSS, os arquivos JavaScript, e qualquer outra mídia. Seja de onde quer que você tenha extraído o arquivo ThemeRoller transferido por download previamente, mova ou copie os diretórios css e js (extraídos do arquivo ZIP ThemeRoller), assim como o núcleo do jQuery para o diretório de recursos.

Com o seu editor de texto preferido, abra o arquivo settings.py e altere-o para corresponder às configurações fornecidas na Lista 4.


Lista 4. Configurações do 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'

Para obter o caminho do diretório ativo atual de uma maneira independente do sistema operacional, use os.path.dirname( globals()[ '__file__' ] ) para configurar o diretório do aplicativo. Você usa o mesmo método para configurar o caminho para o diretório de recursos, assim como o TEMPLATE_DIR. Também é interessante configurar o MEDIA_URL para http://localhost:8000/resources/.

Porque você não usará um banco de dados, não precisará configurar nenhuma das variáveis relacionadas, mas você precisará configurar o ROOT_URLCONF. Observe que em INSTALLED_APPS, existe um valor chamado twitterPanel, que ainda não foi criado. Você criará esse aplicativo Django a seguir.

Para criar o aplicativo twitterPanel , use django-admin startapp twitterPanel e digite cd para mudar para o diretório do módulo criado recentemente: twitterPanel. No diretório twitterPanel, crie outro diretório chamado templates, que conterá os modelos do Django.


Categorizando suas URLs

Com o seu editor de texto favorito, abra o arquivo url.py na raiz do seu projeto e altere o código para corresponder à Lista 5. Este arquivo mapeia URLs para funções de retorno de chamada.


Lista 5. Configurações da URL raiz

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

Expressões regulares

De acordo com a Wikipedia, expressões regulares "fornecem um meio conciso e flexível para identificar cadeias de texto de interesse, como caracteres particulares, palavras ou padrões de caracteres." Se você não tiver nenhuma experiência com expressões regulares, eu recomendo fortemente Mastering Regular Expressions de Jeffrey Friedl ou Text Processing in Python de David Mertz. As INSTRUÇÕES de Expressão Regular localizadas na página de documentação do Python também são um excelente ponto de início.

O primeiro mapeamento em urlpatterns define uma correspondência para recursos ou mídia estaticamente entregues — , por exemplo, arquivos de imagem. Porque você está usando o servidor de desenvolvimento do Django, para entregar seu conteúdo estático, você utiliza a visualização django.views.static.serve() . O segundo mapeamento inclui os padrões de URL localizados no aplicativo twitterPanel . Abra o arquivo url.py localizado sob twitterPanel (não confunda esse url.py com aquele na raiz) e inclua o código na Lista 6.


Lista 6. URLs do painel do Twitter

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


As visualizações

Você criará apenas três visualizações: índice, painel e atualização. Observe que você não incluirá visualizações no projeto-raiz — somente no aplicativo Painel do Twitter. Abra o arquivo view.py localizado no diretório twitterPanel e inclua as importações da Lista 7 na parte superior do arquivo.


Lista 7. Importações da visualização do painel do Twitter

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

O método render_to_response() é um atalho do Django para renderizar um modelo com um contexto específico e retorna um objeto HttpResponse . O RequestContext é um contexto do Django com algumas poucas diferenças do django.template.Context. Especificamente, ele aceita um objeto HttpRequest , e automaticamente preenche o conteúdo com variáveis localizadas na configuração TEMPLATE_CONTEXT_PROCESSORS .

O primeiro método de visualização, index(), deve ser parecer com a Lista 8.


Lista 8. A visualização 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))

O modelo, index.html, ainda não foi escrito. Por enquanto, apenas lembre-se de que você tem dois elementos HTML: uma caixa de texto para inserir o nome do usuário e uma entrada de senha. Os dados são enviados para a visualização por meio do método POST . Se um nome de usuário e senha são inseridos, você instancia um objeto twitter.Api e recupera os primeiros cinco tweets do usuário que efetuou login, assim como as primeiras 120 pessoas que você está seguindo. Os statuses, amigos, nome de usuário e senha são todos armazenados na sessão para recuperação posterior de outras partes do programa.

O segundo método de visualização, panel(), é muito mais curto. Ele é mostrado na Lista 9.


Lista 9. A visualização 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))

Aqui, você usa o modelo panel.html, ainda inexistente também. O panel é onde toda a ação ocorrerá após você ter efetuado login — , em outras palavras, onde os tweets são exibidos, as atualizações são feitas e seus amigos são exibidos. Mais sobre isso em breve. Por hora, tudo que você está fazendo aqui é obter alguns dados da sessão e depois fazendo um render_and_response. Em contraste, o terceiro método de visualização, update, é um pouco mais complexo. Consulte a Lista 10.


Lista 10. A visualização 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))

O nome e senha do usuário são obtidos da sessão, usados para instanciar outro objeto twitter.Api , depois usam o objeto api para postar uma atualização para a conta. Os statuses são então recarregados.


Os modelos

Dentro de twitterPanel/modelos, crie um arquivo chamado index.html e abra-o. Preencha-o com o código na Lista 11.


Lista 11. O modelo index

<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( '&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="#" 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>


A Figura 2 exibe o início do aplicativo: um botão da UI do jQuery.


Figura 2. Botão da UI do jQuery


Este botão chama a janela Login mostrada na Figura 3.


Figura 3. A janela Login


Vamos dissecar o código da Lista 11. Primeiro, você pode dizer ao navegador onde os arquivos CSS, JavaScript e jQuery estão localizados usando o {{MEDIA_URL}}. Quando o Django renderiza o modelo, ele substitui {{MEDIA_URL}} pelo caminho atual.

Dentro do cabeçalho, inclua o seu próprio JavaScript. O sinal de dólar ($) é um alias para uma instância jQuery . Um atalho de jQuery para document.getElementById('name') é $('#name'). Por exemplo, você define um elemento de UI de jQuerydialog usando uma tag <div> , e depois chama o método .dialog() para criar a janela jQuery. Internamente, você inclui dois botões: OK e Cancel. Cancel fecha a janela, enquando OK executa duas ações: fecha a janela e depois posta no servidor. Se os dados que a visualização index recebe são as credenciais corretas, você obtém de volta os dados dos tweets e dos seguidores. Depois, o botão da janela e o título desaparecem gradualmente, e o painel do Twitter aparece gradualmente.

A linha mágica aqui é $( '#panel' ).html( '&nbsp;' ).load( '{% url twitterPanel_panel %}' ), que carrega o panel.html do modelo externo do Django. O painel do Twitter é um widget sanfona da UI do jQuery. A Lista 12 mostra o código para o modelo do painel. Salve o código em panel.html dentro de twitterPanel/templates.


Lista 12. O modelo do painel do 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="#">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>


A Figura 4 mostra o painel do Twitter com a guia Update Status .


Figura 4. O painel do TWitter exibindo a guia Update Status


Você nomeia o widget sanfona "main", e é aqui onde toda a ação está depois que você efetua o login. Dentro da sanfona, você tem três guias: My Recent Tweets, Update Status, e Following, como mostrado na Figura 5.


Figura 5. O painel do Twitter, exibindo a guia Following


A primeira guia exibe apenas os primeiros cinco tweets. Se o objeto status não está vazio, o Django efetua loop através de cada objeto status e exibe o texto correspondente. Caso contrário, uma mensagem "No tweets found" é impressa dentro da guia.

A segunda guia, Update Status, contém um formulário HTML com uma área de texto e um botão. Sob o formulário há um <div> chamado charCount, seguido por outro <div> chamado updateStatus. Para Update Status é fornecido um evento onclick ; o comprimento da mensagem é testado para confirmar que ele tem menos que o limite de 140 caracteres e, se tiver, usa o método post do jQuery para enviar para a visualização update o texto de atualização, que cuida do restante. O tweet mais recente é então exibido na página.

Só por diversão, eu inclui um pouco de JavaScript para a contagem do número de caracteres deixados no tweet. Lembre-se, o Twitter tem um limite de 140 caracteres por tweet. A maneira como isso funciona é, quando uma tecla é pressionada, o número de caracteres localizados na caixa update text é subtraído de 140. A contagem de caracteres é então atualizada na página.

A terceira guia no painel do Twitter, Following, primeiro verifica se o objeto following não é nulo. Se não for, assim como a guia My Recent Tweets , ele efetua loop através de cada objeto do usuário. Cada usuário tem uma URL de imagem de perfil: você adere esse valor dentro do atributo src de uma tag <image> . O resultado é que cada usuário que você estiver "seguindo" é exibido na terceira guia.

Agora que todas as peças estão no lugar, inicie o servidor Django e acesse http://127.0.0.1:8000/twitterPanel. Você deve ver um botão de UI do jQuery para login. Após clicar nesse botão, a janela Login aparece. Digite suas credenciais do twitter, e o painel do Twitter deve clarear.


Conclusão

Agora que você viu a demo, provavelmente notou quanto efeito a UI do jQuery inclui à sensação dinâmica do aplicativo. O Django também facilita manipular o back end e a modelagem do Python.

Outras coisas que você poderia fazer para melhorar o aplicativo incluem adicionar validação adequada ao processo de login, janelas de erro ou uma lista dos seus seguidores; enviar tweets diretos; e procurar por tweets. É claro, sinta-se à vontade para usar a sua criatividade também.



Download

DescriçãoNomeTamanhoMétodo de download
Sample codeos-social-twitter-pytweetproj.zip159KBHTTP

Informações sobre métodos de download


Recursos

Aprender

Obter produtos e tecnologias

Discutir

Sobre o autor

Cesar Otero

Cesar Otero é consultor freelancer de Java e Python. É formado em engenharia elétrica com ênfase em matemática.

Ajuda para Relatar Abuso

Relatar abuso

Obrigado. Esta entrada foi sinalizada para atenção do moderador.


Ajuda para Relatar Abuso

Relatar abuso

Falha no envio do Relatório de abuso. Tente novamente mais tarde.


developerWorks: Registre-se


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos de uso do developerWorks.

 


Na primeira vez que você efetua sign in no developerWorks, um perfil é criado para você. Informações selecionadas do seu perfil developerWorks são exibidas ao público, mas você pode editá-las a qualquer momento. Seu primeiro nome, sobrenome (a menos que escolha ocultá-los), e seu nome de exibição acompanharão o conteúdo que postar.

Selecione seu nome de exibição

Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

(Deve possuir de 3 a 31 caracteres.)


Ao clicar em Enviar, você concorda com os termos de uso do developerWorks.

 


Classificar este artigo

Comentários

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Software livre
ArticleID=454033
ArticleTitle=Construa um aplicativo da Web do Twitter
publish-date=12072009
author1-email=hfrequency@users.sourceforge.net
author1-email-cc=

Conheça a IBM da sua cidade

Virtual Branch Office Brasil

A IBM está mais perto do que você imagina!


Tags

Help
Use o campo de pesquisa para encontrar todos os tipos de conteúdo no My developerWorks com essa tag.

Use a barra de rolagem para ver mais ou menos tags.

Tags populares mostra as principais tags para esta zona de conteúdo em particular (por exemplo, Java technology, Linux, WebSphere).

Minhas tags mostra suas tags para esta zona de conteúdo em particular (por exemplo, Java technology, Linux, WebSphere).

Use o campo de pesquisa para localizar todos os tipos de conteúdo no Meu developerWorks com essa tag. Tags populares mostra as tags principais para essa zona de conteúdo particular (por exemplo, tecnologia Java, Linux, WebSphere). My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere). Minhas tags mostra as suas tags para essa zona de conteúdo em particular (por exemplo, tecnologia Java, Linux, WebSphere).