Conteúdo


Construa um aplicativo da Web do Twitter

Escrevendo para a Web 2.0 com Django e jQuery

Comments

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
Painel do Twitter exibindo tweets recentes
Painel do Twitter exibindo tweets recentes

Dependências

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.StatusObtém todos os tweets para um usuário
GetFriends()Lista de objetos twitter.UserObté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' ) ),
)

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
Botão da UI do jQuery

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

Figura 3. A janela Login
A janela Login
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
O painel do TWitter exibindo a guia Update Status
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
O painel do Twitter, exibindo a guia Following
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.


Recursos para download


Temas relacionados


Comentários

Acesse ou registre-se para adicionar e acompanhar os 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