Издательский дом ООО "Гейм Лэнд"ЖУРНАЛ ХАКЕР #115, ИЮЛЬ 2008 г.

Блоггинг по-новому

Николай Байбородин (baiborodin@gmail.com)

Хакер, номер #115, стр. 115-100-1

Твиттер-монитор на платформе Silverlight

Мир летит вперед со скоростью немецкого поезда и есть только один способ не остаться в лузерах – успеть вскочить на подножку. Кого-то это реально напрягает, а другого, наоборот, страшно заводит. Сегодня мы поговорим сразу о двух новых технологиях. Одновременно. В конце концов, многозадачность – одна из тенденций нашего времени. Так что, распараллель свой мозг. Нас ждет Silverlight и микроблоггинг.

Микроблоггинг

Все мы знаем, что такое блог. Большинство из нас регулярно читают подборку любимых сетевых дневников. Кто-то даже ведет свой собственный (но таких уже меньше). О чем обычно пишут в блогах? Как правило, IMHO на зацепившее событие («подруга сделала силиконовые титьки»). Другой вариант – выразить свои эмоции по существенному (или не очень) поводу («новые титьки я оплатил из своего кармана»). Читая онлайновый дневник, можно попробовать узнать, как его автор воспринимает окружающий мир. Но с помощью обычного блога практически невозможно получить представления о том, что с человеком происходит и что он думает ПРЯМО СЕЙЧАС.

Иногда человеку достаточно кратко выразить самую суть своих мыслей или чувств (которые он думает или переживает сию секунду). Традиционный формат сетевого дневника здесь мало пригоден. И на свет появилась новая концепция – микроблоггинг.

Что такое микроблог? Эта такая форма сетевого дневника, при которой пользователь пишет короткие текстовые заметки (обычно не более 200 символов). Благодаря своей лаконичности, заметки могут составляться очень оперативно. Они буквально отражают события онлайн. Например: «Сижу на паре. <Censored>. Ща усну».

Самый популярный сервис, название которого стало нарицательным – Twitter. Несмотря на появление множества конкурентов (в том числе, Facebook и MySpace), Twitter продолжает оставаться лидером в этой области. Среди разношерстной аудитории этого сервиса можно встретить немало интересных персонажей. Читать их хочется постоянно, а не от случая к случаю. И желательно – не отходя от кассы, в смысле, не отвлекаясь от важных и неотложных дел. Вот этим мы и займемся – напишем Twitter-ридер, предназначенный для мониторинга сообщений избранных авторов и отображения их в одном окне. Воспользуемся мы для достижения цели одной достаточно новой и интересной технологией. Какой – читай ниже.

Microsoft Silverlight

Если ты живешь не на Луне, то наверняка слышал о двух крупнейших акциях компании Microsoft, проведенных в последнее время. Это – «Герои среди нас» и «ReMIX». Последнюю посетил сам Стив Балмер (да не будет его светлое имя упомянуто всуе). Оба мероприятия преследовали разные цели, но главная идея была общей – «Microsoft идет в веб». «Ничего себе, проснулись!», - скажешь ты и будешь прав. Однако, ребята из Редмонда не зря свой хлеб едят, и даже на столь позднем старте у них есть неплохие шансы потеснить, скажем, ту же Googlе. Как на упомянутых конференциях, так и в прессе, и, конечно же, в Сети много говорится о Silverlight. Особенно после выхода его второй версии.

Самое простое и емкое объяснение будет таким: Silverlight – достойная альтернатива Adobe Flash. До последнего времени задача создать яркий, вызывающе красивый веб-сайт или веб-приложение со сложной программной логикой клиентской части не предполагала никаких других платформ разработки, кроме Flash. Все остальное – робкие попытки, не дотягивающие до уровня серьезных парней (так, первой на святое покусилась компания Sun, выпустив JavaFX, но порвать в клочья флешеров не получилось).

В настоящее время наиболее распространена версия Silverlight 1.0. Впрочем, уже существует Silverlight 2.0, по своим возможностям многократно превышающий старшего собрата.

На стороне пользователя платформа представлена плагином для веб-браузера. Этот плагин включает в себя полную версию .Net CLR. Таким образом, Silverlight-приложениям доступны все прелести .Net: 1. возможность реализации алгоритма на любом из языков программирования, поддерживаемом .Net; 2. рендеринг пользовательских интерфейсов с помощью WPF; 3. тесная интеграция с ASP .Net и ADO .Net.

Надеюсь, ты догадался, насколько широкие возможности открываются перед тобой в плане создания веб-приложений. Добавь сюда превосходную поддержку векторной графики и всевозможных мультимедийных форматов. Кстати, WPF в силу своей текстовой природы (диалект XML) зарабатывает еще одно очко в битве с флешем, так как последний передает данные клиенту в бинарном формате – и одному Бен Ладену известно, что там намутил кодер.

С поддержкой браузеров и сторонних ОС все тоже на должном уровне. Silverlight реализован для Windows XP, Windows Vista, Mac OS X начиная с десятки, и браузеров Internet Explorer (шестая и седьмая версия), Mozilla Firefox 1.5 и 2.0, и Safari 3.1. Могут возрадоваться и линуксоиды – проект Mono (открытая реализация .Net для Linux) недавно выпустил свою версию плагина под названием Moonlight.

Несмотря на пацанский возраст технологии, в Сети уже можно найти большое количество ресурсов с подробными уроками по созданию Silverlight-приложений и демонстрациями возможностей технологии при решении самых разнообразных задач веб-разработки. Так что проблем с информацией у тебя точно не будет. Однако, технология сама по себе, какой бы замечательной она ни была, мало что значит в нашем жестоком мире. Как свита делает короля, так и технологию делает инструментарий. Что предлагает Microsoft разработчикам Silverlight-приложений, и что из этого действительно понадобится? Об этом ты узнаешь, прочитав следующий раздел. Еще немного и можно будет начинать кодить!

Собираясь в дорогу

Приступая к освоению технологии Silverlight, придется определиться с тем, под какую версию ты будешь создавать свои приложения – под первую или вторую. От этого зависит, какие инструменты ты будешь использовать. Однозначного совета здесь дать не получится. Если Silverlight 2.0 обладает по сравнению с Silverlight 1.0 несравнимо большими возможностями, то первая версия платформы имеет гораздо больше установок на клиентские компьютеры. Так что, решай сам!

Для успешной работы тебе понадобится, как минимум, пакет Silverlight Tools, позволяющий работать с новой технологией в привычной для нас среде Visual Studio. Ну, а для более эффективного использования всех возможностей, заложенных в платформе, не помешает установить и Silverlight SDK. В принципе, на этом можно остановиться. Но, если ты даже из программы «Hello, World» стремишься сделать шедевр изобразительного искусства, то ты просто обязан познакомиться с Microsoft Expression Blend, позволяющим создавать умопомрачительные пользовательские интерфейсы с использованием векторной графики. Для работы с Silverlight тебе понадобится вторая версия этого редактора.

С инструментами разобрались. Теперь о скилзах.

Silverlight позволяет декларативно описывать пользовательские интерфейсы на языке XAML (кури MSDN…). Плагин веб-браузера, отвечающий за поддержку Silverlight, осуществляет обработку XAML-файла (диалект XML) и рендеринг графических объектов. Правда, вникать во все особенности XAML и WPF тебе пока необязательно, так как с помощью Expression Blend интерфейс можно просто нарисовать.

Приложение (какое ни возьми) – это, в первую очередь, программная логика. И для создания этой логики, будь она не ладна, придется овладеть одним из языков программирования. В нашем случае подойдет любой язык, для которого реализована поддержка .Net. На всякий случай напомню, что к таковым относятся не только Visual C++, C# и Visual Basic, но также и Ruby с Питоном. Соответственно, один из них ты можешь выбрать для создания своих Silverlight мега-хитов.

Первые шаги

Напомню, что наша цель заключается в создании приложения, транслирующего с Twitter'a сообщения избранных пользователей. Исключительно в воспитательных целях создадим простой интерфейс программы в Expression Blend. Естественно, для такого примитивного интерфейса с отсутствием даже намека на дизайн можно было бы обойтись средствами блокнота. Но пусть это будет элементом сегодняшнего шоу!

Открывай Blend и создавай новый Silverlight-проект. Думаю, тебе не составит труда намутить дизайн будущего приложения по своему вкусу.

Главное – заранее предусмотри текстовый блок, в котором впоследствии будут появляться транслируемые записи. После того, как все будет готово, можешь переключиться в режим просмотра XAML-структуры. Например, описание моего незамысловатого, с позволения сказать, дизайна выглядит так (несущественные подробности опущены):

<Canvas

Width="640" Height="480"

Background="#FF111010"

x:Name="Page">

<TextBlock Width="454" Height="186" Canvas.Left="109" Canvas.Top="42" <Run Text="TWITTER MONITOR"/></TextBlock>

</Canvas>

Из продемонстрированного примера следует уяснить две вещи – XAML имеет текстовый формат со всеми вытекающими; все элементы, описывающие Silverlight-интерфейс, должны быть вложенными в контейнер <Canvas>. Двигаемся дальше.

Нажав <F5>, ты можешь запустить проект на выполнение и посмотреть, как будет выглядеть приложение в веб-браузере. Если тебя все устраивает, переходи к написанию программной логики. Для этого я бы посоветовал переключиться на Visual Studio. Делается это очень просто – в контекстном меню своего проекта выбирай пункт Edit in Visual Studio. Запустится дорогая сердцу среда разработки, в которой мы продолжим работу по созданию приложения.

Как видишь, в своем исходном и пока еще не тронутом рукой кодера состоянии, проект включает в себя четыре файла: Default.html, Page.xaml, Silverlight.js и Web.config. Разберемся в назначении каждого из них.

Файл Defoult.html – обычный HTML-файл, выполняющий функцию контейнера для Silverlight контролов. За управление загрузкой контрола и взаимодействием со средой пользователя отвечают файлы с JavaScript-сценариями Page.xaml.js и Silverlight.js. Интерфейс приложения описан в файле Page.xaml. Ну а Web.cofig – стандартный файл конфигурации ASP-приложений.

Разборки с Twitter API

Остались сущие мелочи – написать движок Twitter-клиента. Самым разумным будет оформить его в виде двух классов – непосредственно клиент, реализующий функционал Silverlight-приложения и класс с реализаций Twitter API. При внесении существенных изменений в официальный Twitter API можно будет переписать соответствующий класс, оставив остальную часть приложения нетронутой (как раз в такую ситуацию и попал автор при подготовке статьи).

Интересующий нас API слишком громоздок для того, чтобы приводить его реализацию в полном объеме. В то же время – он достаточно прост, чтобы понять необходимые детали, ознакомившись с программным кодом. Поэтому остановимся на ключевых моментах, а все остальное можно узнать из исходников – или, не вникая в детали, просто использовать в своих проектах мой код. Все, что от тебя требуется взамен – при случае сообщить о найденных багах и возникших идеях по улучшению.

Основу API составляют два метода: ExecuteGetCommand() и ExecutePostCommand(). Оба предназначены для обращения к серверу и получения от него интересующей информации. Каждый из этих методов имеет три параметра: url, userName и password. Их назначение понятно из названий. Методы открывают соединение с удаленным узлом и читают с него поток. Ниже – пример метода ExecuteGetCommand() без контроля исключений:

protected string ExecuteGetCommand(string url,

string userName, string password)

{

using (WebClient client = new WebClient())

{

client.Credentials = new NetworkCredential

(userName, password);

using (Stream stream = client.OpenRead(url))

{

using (StreamReader reader = new S

treamReader(stream))

{

return reader.ReadToEnd();

}

}

}

}

Следующий важный момент – реализация механизма получения актуального таймлайна, через который мы будем следить за сообщениями. Технически это реализуется очень просто:

public string GetPublicTimeline(OutputFormatType format)

{

string url = string.Format(TwitterBaseUrlFormat, GetObjectTypeString(ObjectType.Statuses), GetActionTypeString(ActionType.Public_Timeline), GetFormatTypeString(format));

return ExecuteGetCommand(url, null, null);

}

Обрати внимание, что я сделал этот метод параметризированным. Нужно это для того, чтобы иметь возможность представить полученные данные в форматах JSON, XML, RSS или ATOM. Само же преобразование осуществляется через объект OutputFormatType. Например, OutputFormatType.XML или OutputFormatType.JSON – и так далее.

Аналогично реализуется и метод GetUserTimeline() с той лишь разницей, что к URL-запросу добавляются параметры, содержащие имя пользователя и его пароль.

Все остальные методы можешь найти в исходниках к статье.

Теперь о том, как заставить созданный API работать. Прежде всего, нужна исходная информация о логине/пароле для доступа в Twitter и инфа о клиенте (это одно из требований официального API). Можешь организовать работу с перечисленными выше параметрами так, как тебе удобно. Я же в своем примере, сильно себя не утруждая, создал под них файл ресурсов.

Имея на руках реализацию API собственного производства и файл с необходимыми ресурсами, можно создавать Twitter-клиент. Как я уже упоминал выше, лучше выполнить его в виде отдельного класса. Сначала проинициализируем экземпляр API-движка:

static Twitter4You()

{

TwitterApi = new T4UApp.Twitter();

TwitterApi.TwitterClient =

TwitterResources.TwitterClient;

TwitterApi.TwitterClientUrl =

TwitterResources.TwitterClientUrl;

TwitterApi.TwitterClientVersion =

TwitterResources.TwitterClientVersion;

TwitterApi.Source= TwitterResources.TwitterClient;

}

После чего можно отправлять запрос:

public static string GetLatestTweet(string userName)

{

string message = null;

try

{

string xmlResult = TwitterApi.Show(

TwitterResources.UserName,

TwitterResources.Password,

userName,

T4UApp.Twitter.OutputFormatType.XML);

XDocument xDoc =

XDocument.Parse(xmlResult);

message = "\"" + xDoc.Element("user")

.Descendants(XName.Get("text")).

First().Value +

"\"\r\n - " + userName;

}

catch (Exception anyException)

{

message = anyException.Message;

}

return message;

}

Здесь мы получаем сообщение в XML-формате и с помощью XDocument разбираем его на отдельные элементы. Нас интересует только один XML-узел: «user» (а точнее, содержащийся в нем узел нижнего уровня «text», в котором и хранится запись пользователя).

Созданная ранее сладкая парочка из двух классов на C# в принципе может стать самодостаточным приложением или же войти в состав другого, более сложного приложения. Давай разберемся, как заставить сконструированные объекты работать в Silverlight-окружении.

Twitter + ASP .Net + Silverlight

Последний штрих – привинтить Silverlight-интерфейс к только что созданному Twitter-ридеру. Существует несколько способов. Рассмотрим наиболее популярный, в котором в качестве клея используется ASP.

Добавляй в проект .aspx-файл и открывай его в редакторе кода. Сейчас мы его немного подправим.

В первую очередь нужно позаботиться о том, чтобы при загрузке страницы в окне браузера отображались самые свежие записи. Для этого добавляем простенький скрипт:

<script runat="server">

[System.Web.Services.WebMethod]

public static string GetLatestTweet

(string userName)

{

return Twitter4You.GetLatestTweet

(userName);

}

</script>

Итак, в момент загрузки страницы мы будем получать самую актуальную информацию с Twitter'a. А это значит, что после загрузки браузером секции <head> в принципе уже можно инициализировать скрипты, запускающие Silverlight-приложение. Напомню, что за реализацию этой важной функции отвечает скрипт Silverlight.js. Ему-то мы и должны передать управление!

<asp:ScriptManager ID="SM1" EnablePageMethods=

"true" runat="server">

<Scripts>

<asp:ScriptReference Path=

"~/Silverlight.js" />

</Scripts>

</asp:ScriptManager>

Все готово. Теперь у нас есть проинициализированный Silverlight-объект. Можно им немного порулить – например, создать массив пользователей системы, чьи сообщения тебе хотелось бы читать, не отрываясь от текущих дел:

var twittersToTrack = new Array(“medved”, “kiatemy”, “babble”)

Читаем последние записи:

function onLoaded(sender, args) {

PageMethods.GetLatestTweet

(twittersToTrack[0],

onSuccessGetLatestTweet);

}

Если получение данных завершилось успешно, передаем их в Silverlight-контрол для рендеринга и отображения в окне браузера:

function onSuccessGetLatestTweet(result) {

var twitterText =

plugin.content.findName("twitterText");

twitterText.Text = result;

}

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

Отдельно хотелось бы остановиться на том, как в DOM-структуру добавить объект, соответствующий Silverlight-приложению.

<div id="silverlightPlugInHost">

<script type="text/javascript">

Silverlight.createObjectEx({

source: 'TwitterScene.xaml',

parentElement: silverlightPlugInHost,

id: 'silverlightPlugIn',

properties: {

width: '100%',

height: '100%',

background:'white',

version: '1.0'

},

events: {

onLoad: null

context: null

});

</script>

</div>

Значит так. Из всей этой кучи нам надо запомнить только несколько ключевых моментов. Для работы с Silverlight нужно через системное окружение браузера, в котором присутствует объект Silverlight, вызвать метод createObject() или createOblectEx(). Если есть желание разобраться, в чем разница между этими двумя методами – кури MSDN. Когда вызываешь метод, не забудь скормить ему следующие параметры: source (ссылка на XAML-файл), parentElement (DOM-объект, которому посчастливилось стать Silverlight-контейнером), и properties (массив параметров, описывающий характеристики Silverlight-объекта, например его размеры).

В принципе, это все, что я хотел тебе сегодня рассказать, учитывая скромный объем журнальной статьи. Ковыряйся в исходниках и документации, разбирайся, что к чему, и возможно, ты присоединишься к растущей армии разработчиков Silverlight. Ищи свой путь. Главное – не стоять на месте. «Эволюция или забвение» – пускай эти слова станут одним из твоих девизов.

В основе Silverlight лежит другая технология компании Microsoft – Windows Presentation Foundation (WPF). Поэтому не лишним будет разобраться с тем, какие базовые принципы реализуются WPF-инструментарием. Во-первых, это универсальный подход к работе с пользовательским интерфейсом, документами и медиа-источниками. Во-вторых, – декларативная разработка с вовлечением дизайнеров в разработку реальных интерфейсов. И, в-третьих, легкость разворачивания приложений через сетевую среду.

Silverlight 2.0 vs. Silverlight 1.0

Краткий перечень улучшений второй версии платформы:

  • Controls
  • Layouts
  • Styles/Templates
  • Data Binding
  • HTTP/S and Sockets
  • Поддержка C# и VB .Net
  • LINQ
  • XML API
  • JSON
  • CryptoAPIs (AES)
  • Threads

Кое-что о безопасности

Основу безопасности платформы составляет принцип запуска Silverlight-приложений в «песочнице» веб-браузера. При этом границы дозволенного очерчены заранее, и разработчики приложений не могут их расширить. Для хранения пользовательских данных используется технология Local storage (аналог cookies). Элемент платформы FileOpen dialog позволяет организовать безопасное взаимодействие на уровне файловой системы. Реализована также поддержка сокетов файлов policy.

CD

Мы не нарушаем наших традиций – на диске рабочий исходник проги. Можешь использовать его по своему усмотрению.

Ищи на диске упомянутые в статье инструменты – Expression Blend 2.0, Silverlight Tools CTP и Silverlight SDK.

INFO

Перед установкой Silverlight Tools для второй версии не забудь удалить со своей машины Silverlight 1.0 (во избежание лишних проблем).

WWW

Содержание