Новости

Створюємо Web-додаток, яке вміє працювати з Twitter

  1. Малюнок 1. Панель Twitter, що показує останні записи
  2. Лістинг 1. Команди для установки simplejson
  3. Лістинг 2. Команди для установки python-twitter
  4. Лістинг 3. Команди для установки Django
  5. Бібліотека python-twitter
  6. Таблиця 1. Деякі корисні методи API, доступні в python-twitter
  7. Створюємо проект Django
  8. Лістинг 4. Налаштування проекту Django
  9. Створюємо адреси URL
  10. Лістинг 5. Налаштовуємо кореневі адреси URL
  11. Лістинг 6. URL адреси додатка twitterPanel
  12. Лістинг 7. Інструкції імпорту в файлі уявлень додатки twitterPanel
  13. Лістинг 8. Представлення index
  14. Лістинг 9. Подання panel
  15. Лістинг 10. Подання update
  16. шаблони
  17. Лістинг 11. Шаблон index
  18. Малюнок 2. кнопка jQuery UI
  19. Малюнок 3. Вікно Login
  20. Лістинг 12. Шаблон panel
  21. Малюнок 4. Панель Twitter, що показує вкладку Update Status
  22. Малюнок 5. Панель Twitter, що показує вкладку Following
  23. Висновок
  24. Ресурси для скачування

Пишемо додаток Web 2.0 за допомогою Django і jQuery

Схоже, що в наші дні Twiiter можна виявити де завгодно. Політики, актори, наші батьки - всі користуються ресурсами соціальних мереж. Клієнти вимагають додатків, які не тільки дозволяють користуватися Twitter, але і мають глянцевий вигляд в стилі Web 2.0, якого можна досягти тільки за допомогою Ajax. Нам в цьому допоможуть Django і jQuery.

Малюнок 1. Панель Twitter, що показує останні записи

залежності

Часто використовувані скорочення
  • Ajax: Асинхронний JavaScript + XML
  • API: Інтерфейс програмування додатків (Application programming interface)
  • CSS: Каскадні таблиці стилів (Cascading style sheet)
  • FAQ: Відповіді на запитання (Frequently asked questions)
  • HTML: Мова розмітки гіпертексту (Hypertext Markup Language)
  • HTTP: Протокол передачі гіпертексту (Hypertext Transfer Protocol)
  • REST: Передача стану уявлення (Representational State Transfer)
  • UI: Інтерфейс (User interface)

Перш ніж приступати до роботи з цією статтею, я настійно рекомендую вам опрацювати навчальний посібник з Django. Також ви повинні мати впевнені знання JavaScript. Зрозуміло, у вас повинна бути обліковий запис Twitter, і ви повинні знати його жаргон, наприклад, що таке твіт. В арсеналі ваших інструментів повинні бути Python, Django, jQuery і бібліотека pyhon-twitter. В розділі ресурси наведені посилання, за якими їх можна завантажити.

Також нам знадобиться включена в Python база даних sqlite3 для зберігання даних про сеансах, а про збереження інших даних подбає інфраструктура Twitter. Звичайно ж, в подальшому для поліпшення додатки можна буде інтегрувати більш складну структуру бази даних для зберігання на вашому сервері статистики, копій твітів і будь-який інший інформації, пов'язаної з вашим обліковим записом Twitter. Також в цій статті передбачається, що ви працюєте на Linux®.

Я перевіряв цю програму з Python 2.5.2. За замовчуванням Python встановлено на більшості Linux-машин, однак якщо Python у вас все ж відсутня, то в розділі ресурси можна знайти інформацію щодо його завантаження та встановлення.

Twitter дозволяє отримувати дані за допомогою двох API-інтерфейсів: API пошуку і REST API. (На сайті Twitter в розділі FAQ згадується про плани по створенню єдиного API). REST Web-сервісом називається Web-сервіс, реалізований на протоколі http і наступний принципам архітектури REST (див. Інформацію в розділі ресурси ).

Останній компонент, який нам потрібен - це бібліотека python-twitter. Згідно сайту проекту, вона являє собою "обгортковий бібліотеку python, засновану на API Twitter і моделі даних twitter". Існує кілька бібліотек, що дозволяють взаємодіяти з сервісами Twitter в безлічі мов - від Ruby до Eiffel. На даний момент в Python є 5 бібліотек для взаємодії з Twitter: Python-twitter Де Вітта Клінтона (DeWitt Clinton), python-twyt Ендрю Прайса (Andrew Price), twitty-twister Дастіна Селлінгса (Dustin Sallings), twython Райана Макграта (Ryan McGrath ) і Tweepy Джоша Росслейна (Josh Roesslein).

Бібліотеці python-twitter для роботи потрібен пакет 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 - потужну інфраструктуру розробки Web-додатків на Python. В описуваному в даній статті додатку я працював з Django версії 1.1.1. Установка Django так само проста, як установка simplejson і python-twitter. Завантажте пакет і виконайте в терміналі команди, показані в лістингу 3.

Лістинг 3. Команди для установки Django
tar -zxvf Django-1.1.1.tar.gz cd Django-1.1.1 sudo python setup.py build sudo python setup.py install

Перевірте, що шлях до Django є у вашій змінної path, для чого виконайте команду $ django-admin --version. Якщо все пройшло як очікувалося, то можна взятися за написання коду.

Бібліотека python-twitter

Встановивши бібліотеку python-twitter, можна приступити до вивчення її можливостей. Щоб отримати доступ до бібліотеки, виконайте команду import twitter. Модуль twitter надає обгортки для моделі даних Twitter і його API. У ньому є три класи моделей даних: twitter.Status, twitter.User і twitter.DirectMessage. Всі виклики API повертають об'єкт одного з цих класів. Для роботи з API слід створити екземпляр класу twitter.Api () (зверніть увагу, що перша буква - заголовна). Якщо створити екземпляр цього класу, не передаючи в конструктор ніяких параметрів, то можна буде викликати тільки методи, які не вимагають входу в систему. Щоб увійти в систему і отримати повний доступ до API, використовуйте наступний синтаксис:

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

Маючи екземпляр класу Api, можна запитувати ваших фоловерів (користувачів, які читають ваші твіти), користувачів, твіти яких читаєте ви, отримувати статуси (твіти), можна надсилати твіти та т.д. Наприклад, щоб отримати список твітів користувача, зробіть виклик statuses = api.GetUserTimeline (), який поверне список об'єктів twitter.Status. Щоб створити список з текстом (рядками) ваших твітів, можна використовувати такий вираз: >>> print [s.text for s in statuses].

У таблиці 1 перераховані класи і методи, які ми будемо використовувати в нашому Web-додатку. З повною документацією можна ознайомитися через pydoc, наприклад - $ pydoc twitter.Api, або на web-сторінці документації python-twitter (див. ресурси ).

Таблиця 1. Деякі корисні методи API, доступні в python-twitter
Метод Значення, що повертається Опис GetUserTimeline () Список об'єктів twitter.Status Запитує все твіти користувача GetFriends () Список об'єктів twitter.User Запитує список фоловерів (користувачів, які читають ваші твіти) PostUpdate () Об'єкт класу twitter.Status Публікує твіт

Додаємо в коктейль jQuery

Слід уточнити, що ми будемо використовувати не тільки ядро ​​jQuery, а й бібліотеку jQuery UI, яка надає віджети, теми і анімацію. відвідайте сторінку ThemeRoller і на панелі зліва натисніть на вкладку Gallery (Галерея). Виберіть тему, яка вам подобається (я в цьому додатку використовував тему Cupertino) і перейдіть за посиланням Download, що знаходиться під ім'ям теми. Ви потрапите на сторінку завантаження. Виберіть на ній поточну (стабільну) версію. На момент написання статті це була версія 1.7.2 для jQuery 1.3+.

Процесу установки як такого немає, просто витягніть файл ThemeRoller і помістіть потрібні директорії / файли в потрібне місце. Також при бажанні можна створити нову тему, але я в цьому прикладі обмежився використанням однієї з готових тем.

Створюємо проект Django

Тепер потрібно створити новий проект Django. Це робиться за допомогою команди django-admin startproject pytweetproj, де pytweetproj - це ім'я проекту, що використовується в цій статті. Ви можете вказати будь-яке інше ім'я, проте в такому випадку стежте за тим, щоб всюди далі по ходу статті використовувати саме його. Перейдіть в директорію pytweetproj. Щоб запустити web-сервер Django, виконайте в терміналі команду python manage.py runserver, запустіть Web-браузер і перейдіть за адресою http://127.0.0.1:8000. Ви побачите сторінку з написом «It worked!». Якщо ви в будь-який момент захочете зупинити або перезапустити сервер, натисніть Ctrl + C, щоб завершити його процес. Не використовуйте сервер розробки в робочому середовищі. Завершивши розробку проекту, перенесіть його на надійний і безпечний сервер, наприклад, Apache.

Створіть в кореневій директорії проекту піддиректорію з ім'ям resources, в якій ми будемо зберігати CSS-файли, сценарії JavaScript і інші медіа-файли. Скопіюйте сюди директорії css і js, витягнуті з ZIP-архіву ThemeRoller, а також ядро ​​jQuery.

Відкрийте в своєму улюбленому текстовому редакторі файл settings.py і поміняйте його згідно лістингу 4.

Лістинг 4. Налаштування проекту Django
# Настройки Django для проекту pytweetproj. import os APPLICATION_DIR = os.path.dirname (globals () [ '__file__']) DEBUG = True TEMPLATE_DEBUG = DEBUG ADMINS = () MANAGERS = ADMINS # для кешування ми будемо використовувати базу даних sqlite3 DATABASE_ENGINE = 'sqlite3' DATABASE_NAME = 'session .db 'DATABASE_USER =' 'DATABASE_PASSWORD =' 'DATABASE_HOST =' 'DATABASE_PORT =' 'TIME_ZONE =' America / Chicago 'LANGUAGE_CODE =' en-us 'SITE_ID = 1 # якщо ви не будете користуватися можливостями інтернаціоналізації, то для скачати книгу безкоштовно роботи краще залишити цим параметром значення false USE_I18N = False MEDIA_ROOT = os.path.join (APPLICATION_DIR, 'resources') MEDIA_URL = 'http: // localhost: 8000 / resources /' ADMIN_MEDIA_PREFIX = '/ media /' # Зробіть цей ключ унікальним і нікому його не показуйте. SECRET_KEY = '= y ^ moj $ + yfgwy2kc7 ^ oexnl-f6 (b # rkvvhq6c-ckks9_c # $ 35' # Список загрузчиков шаблонів, які можуть імпортувати шаблони з різних # джерел. 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',) # додамо це для сесій SESSION_ENGINE = 'django.contrib.sessions.backends.cached_db'

При завданні директорії додатку використовуйте виклик os.path.dirname (globals () [ '__file__']), який повертає шлях до поточної робочої директорії і працює на всіх операційних системах. За допомогою цього виклику задайте шлях до директорії ресурсів, а також TEMPLATE_DIR. Також необхідно задати змінної MEDIA_URL значення http: // localhost: 8000 / resources /.

Ми будемо використовувати базу даних sqlite3, за замовчуванням включену в Python. Також необхідно задати змінні DATABASE_ENGINE, DATABASE_NAME і ROOT_URLCONF. Зверніть увагу, що в змінної INSTALLED_APPS, в якій перераховуються встановлені додатки, вказано ще не створене додаток twitterPanel. Ми створимо це додаток трохи пізніше. А поки виконаємо команду python manage.py syncdb щоб створити базу даних для session.db.

Виконайте команду django-admin startapp twitterPanel щоб створити додаток twitterPanel, після чого перейдіть в тільки що створену директорію twitterPanel. В директорії twitterPanel створіть директорію з ім'ям templates, в якій ми будемо зберігати шаблони Django.

Створюємо адреси URL

Відкрийте в своєму улюбленому текстовому редакторі файл url.py, що знаходиться в кореневій директорії проекту і поміняйте код відповідно до лістингом 5. У цьому файлі шаблонами адрес URL ставляться у відповідність функції зворотного виклику.

Лістинг 5. Налаштовуємо кореневі адреси 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')),)

Згідно Вікіпедії, регулярні вирази "надають лаконічні і гнучкі засоби для ідентифікації тексту, що представляє інтерес, наприклад, що містить певні символи, слова або шаблони символів". Якщо у вас немає досвіду роботи з регулярними виразами, я рекомендую вам книгу Mastering Regular Expressions, написану Джеффрі Фрідл (Jeffrey Friedl) або Text Processing in Python, написану Девідом Мерцем (David Mertz). Також можна почати з HOWTO-керівництва за регулярними виразами, розміщеного на сторінці документації Python.

Перший елемент urlpatterns визначає, як будуть оброблятися статичні ресурси або медіа-файли - наприклад зображення. Оскільки ми використовуємо сервер розробки Django, для обслуговування статичних даних ми будемо використовувати уявлення django.views.static.serve (). Другий елемент urlpatterns підключає шаблони URL, знайдені в додатку twitterPanel. Відкрийте файл url.py, що знаходиться в директорії twitterPanel (не плутайте його з файлом url.py, що знаходяться в корені проекту) і додайте в нього код, показаний в лістингу 6.

Лістинг 6. URL адреси додатка 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'),)

уявлення

Ми створимо тільки три вистави: index, panel і update. Зверніть увагу, що ми будемо додавати уявлення не в корінь проекту, а в додаток twitterPanel. Відкрийте файл views.py, що знаходиться в директорії twitterPanel, і додайте в початок файлу інструкції імпорту, зазначені в лістингу 7:

Лістинг 7. Інструкції імпорту в файлі уявлень додатки twitterPanel
from django.shortcuts import render_to_response from django.template.context import RequestContext import twitter

Метод Django render_to_response () відображає шаблон з певним контекстом і повертає об'єкт класу 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) # запитуємо 5 перших твітів statuses = api.GetUserTimeline () [0: 5] # отримуємо 120 перших друзів following = api.GetFriends () [0: 120] except NameError , e: print "unable to login" else: statuses = {} following = False # поміщаємо дані в сесію 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 твіти та перших 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, якого також ще немає. Після входу користувача всі дії відбуваються саме в цьому поданні. Саме тут відображаються твіти, друзі і виконуються поновлення. Трохи пізніше ми розповімо про це докладніше. На даний момент все, що ми тут робимо - це отримуємо з сеансу деякі дані і викликаємо метод 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] # перезавантажуємо статуси 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, який використовується для відправки оновлення. Після цього проводиться перезавантаження статусів.

шаблони

В директорії twitterPanel / templates створіть файл index.html. Відкрийте цей файл і помістіть в нього код, показаний в лістингу 11.

Лістинг 11. Шаблон 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 ({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'). click (function () {$ ( '# dialog'). dialog ( 'open'); return false;}); // додаємо статичним віджетів "підвішений" стан $ ( '#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> <! - діалог введення імені користувача і пароля -> <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> <! - показуємо тільки якщо користувач увійшов в систему -> <! - віджет Accordion -> <div id = "panel" style = "position: absolute; top: 2%; left: 2%; width: 600px; visibility: visible; "> </ div> </ body> </ html>

На малюнку 2 показаний вигляд нашого застосування при запуску: кнопка jQuery UI

Малюнок 2. кнопка jQuery UI

Ця кнопка викликає вікно Login, показане на малюнку 3.

Малюнок 3. Вікно Login

Давайте вивчимо код, показаний в лістингу 11 . Спочатку ми з допомогою змінної {{MEDIA_URL}} повідомляємо браузеру про те, де знаходяться файли CSS, JavaScript і jQuery. При відображенні шаблону Django підставляє замість {{MEDIA_URL}} фактичний шлях до файлів.

Усередіні заголовка додамо свой код JavaScript. Знак долара ($) - це СКОРОЧЕННЯ, с помощью которого можна звернути до екземпляр jQuery. В jQuery коротка форма запису для document.getElementById ( 'name') Виглядає так: $ ( '# name'). Например, ми візначаємо елемент dialog з jQuery UI с помощью тега <div>, а потім віклікаємо метод .dialog () для создания вікна jQuery. Усередіні цього вікна ми поміщаємо кнопки OK и Cancel. Кнопка Cancel закриває вікно, а OK не просто закриває вікно, но и посілає дані на сервер. Если дані, отрімані поданих index, є коректний ім'ям користувача и паролем, додаток Поверніть дані про твіті та про чітачів твітів даного користувача. Після цього вікно з кнопками зникає і замість нього з'являється панель Twitter.

Вся магія тут укладена в рядку $ ( '#panel') .html ( '& nbsp;') .load ( '{% url twitterPanel_panel%}'), в якій завантажується зовнішній шаблон Django з ім'ям panel.html. Панель Twitter представляє собою віджет accordion, що входить в бібліотеку jQuery UI. У лістингу 12 показаний код шаблону panel. Збережіть його у файлі panel.html в директорії twitterPanel / templates.

Лістинг 12. Шаблон panel
<Script type = "text / javascript"> $ (function () {$ ( "# main"). Accordion ({header: "h3", autoHeight: true}) .hide () .fadeIn (1500); $ ( '#updateTextArea'). keyup (function () {// тут text позначає, скільки символів ще можна ввести. // Var () - скільки символів вже введено var tweetLength = $ ( '# updateTextArea'). val (). length ; $ ( '# charCount'). text (140 - tweetLength);}); $ ( '# updateBtn'). click (function () {if ($ ( '# updateTextArea'). val (). length <= 140) {// відсилаємо дані з форми на сервер $ .post ( '{% url twitterPanel_update%}', $ ( "# updateForm"). serialize ()); $ ( "# updateStatus"). text ( "last update : "+ $ ( '# updateTextArea'). val ()); // очищаємо текстове поле $ ( '# updateTextArea'). val (" "); // і скидаємо лічильник $ ( '# 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>

На малюнку 4 показана панель Twitter з вкладкою Update Status.

Малюнок 4. Панель Twitter, що показує вкладку Update Status

Дамо віджету accordion ім'я «main». Вся робота додатка після входу користувача в систему відбувається саме тут. У цьому віджеті є 3 вкладки: My Recent Tweets, Update Status і Following, які показані на малюнку 5.

Малюнок 5. Панель Twitter, що показує вкладку Following

На першій вкладці просто відображається 5 останніх твітів. Якщо об'єкт status не порожній, Django проходить по всіх об'єктах status і відображає відповідний текст. В іншому випадку на цій вкладці виводиться повідомлення "No tweets found".

На другій вкладці - Update Status - знаходиться HTML-форма з текстовим полем і кнопкою. Під формою знаходяться 2 елемента <div>: один з ім'ям charCount, інший з ім'ям updateStatus. Вкладці Update Status призначається подія onclick, при якому перевіряється, що довжина введеного повідомлення не перевищує 140 символів, і, якщо це так, введений текст відправляється за допомогою наявного в jQuery методу post в уявлення update, яке виконує іншу роботу. Після цього на даній сторінці відображаються Твіти.

Заради інтересу я також додав JavaScript-код, що підраховує кількість символів, які ще можна ввести в твіті. Як ви пам'ятаєте, Twitter обмежує довжину повідомлення 140 символами. Цей код при кожному відпуску клавіші віднімає з 140 символів, введених в поле update text, після чого оновлює лічильник символів на сторінці.

На третій вкладці панелі Twitter - Following в першу чергу перевіряється, що об'єкт following не порожній, і, якщо це так, то як і на вкладці My Recent Tweets, додаток в циклі обходить всіх користувачів. У кожного користувача можна отримати URL відображення картинки в профілі. Ми прив'яжемо це значення до атрибуту src тега <image>. В результаті на третій вкладці будуть показані всі користувачі, за твітами яких ви стежите.

Тепер, коли ми розклали все по своїх місцях, давайте запустимо сервер Django і відкриємо URL http://127.0.0.1:8000/twitterPanel. Ви повинні побачити кнопку jQuery UI для входу в додаток. Після того як ви натиснете цю кнопку і введете ім'я користувача і пароль для twitter, повинна з'явитися панель Twitter.

Висновок

Тепер, коли ви познайомилися з демо-додатком, ви напевно оцінили динаміку і ефектність, що надається з додатком бібліотекою jQuery UI. У свою чергу Django полегшує роботу з серверним кодом Python і шаблонами.

Цей додаток можна поліпшити, додавши перевірки в процес реєстрації, вікна з повідомленнями про помилки, список користувачів, що стежать за вашими твітами, посилку особистих твітів, а також пошук твітів. Зрозуміло, можливості розширення програми обмежені лише вашою уявою.

Ресурси для скачування

Схожі тими

Підпішіть мене на ПОВІДОМЛЕННЯ до коментарів

Уважаемые партнеры, если Вас заинтересовала наша продукция, мы готовы с Вами сотрудничать. Вам необходимо заполнить эту форму и отправить нам. Наши менеджеры в оперативном режиме обработают Вашу заявку, свяжутся с Вами и ответят на все интересующее Вас вопросы.

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация:

Все права защищены © 2013 Производственная компания El.Od
Промышленное производство рыбной продукции