Капля волны

    image
    Картинка с сайта dreamstime.com


    Как вы уже знаете, наверное, одно из достоинств проекта Google Wave состоит в его открытости. И не только в смысле доступности исходных кодов и документированности протокола. Но еще и в том, что пользоваться «волнами» можно не только на wave-сервере Гугла (т.е. не только через гугловский «клиент»). Вы можете работать с волной прямо у себя на сайте!

    Да, да, знаю — сейчас вы меня забросаете гнилыми ананасами с криками «нас не пускают в песочницу, а этот рассуждает об открытости!» Потерпите, ребята, все будет — сейчас, насколько знаю, рассылаются остатки из 20 тыс. инвайтов в «песочницу» для девелоперов.
    А с 30 сентября будут раздавать еще и 100 тыс. аккаунтов уже в рабочую Волну wave.google.com. Как говорится, «все там будем». :)
    Так, о чем это я? Ах да. О том, что все будем в Волне и Волна будет повсюду.


    Попробую рассказать о возможностях встраивания «волн» Google Wave на примере CMS Drupal. Хотя на самом деле неважно, будет ли это именно эта CMS или любая другая. Неважно даже, будет ли это сайт с использованием какой-то Content Management System. Google предоставляет открытый API для встраивания «волн» в любые html-страницы. Пока API очень простенький, будем надеяться, что все это дело будет развиваться дальше.

    И, пока не началось, честно предупреждаю, что посмотреть внедренную волну вы сможете, только если у вас есть доступ в «песочницу». Жестоко, знаю.
    Но это временно, парни из Гугла уже в курсе и усиленно работают над анонимным доступом к embed wave.

    Итак, что мы имеем на август 2009 года?
    Для начала вот две официальные ссылки:
    Руководство — code.google.com/intl/ru-RU/apis/wave/embed/guide.html
    Справка — code.google.com/intl/ru-RU/apis/wave/embed/reference.html

    1. Чтобы не пересказывать официальное руководство, давайте разберем встраивание на примере.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Google Wave Embed API Example: Simple Wave</title>
    // Добавим javascript с Embed Wave API. 
        <script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
    
        <script type="text/javascript">
    // Функция инициализации волны, которая будет вызываться после загрузки страницы.
        function initialize() {
          // Создаем новый экземпляр класса WavePanel, указывая ему адрес wave-сервера.
          // Пока используется адрес девелоперской "песочницы". 
          // Когда появятся другие wave-сервера, можно будет их указывать здесь. 
          // Не забудьте указать слеш в конце адреса.
          var wavePanel = new WavePanel('http://wave.google.com/a/wavesandbox.com/');
    	  // Загружаем определенную волну. 
              // Определяется она по ее waveID (выглядит примерно как "2Bi7arMxYM%25A").
          wavePanel.loadWave('wavesandbox.com!w+waveID');
    	  // Наконец, вставляем волну в div с идентификатором "waveframe"
          wavePanel.init(document.getElementById('waveframe'));
        }
        </script>
      </head>
      
      <body onload="initialize()">
    // В этом div'е будет размещаться iframe с вашей волной.
    // Желательно задать достаточную ширину div, 
    // чтобы поместились аватары всех участников волны,
    // поэтому обычно лучше сразу поставить width: 100%;
        <div id="waveframe" style="width: 500px; height: 100%"></div>
      </body>
    </html>
    


    Вот такой пример кода приведен в руководстве (я только добавил свои пояснения). Берете, просто копируете его и вставляете в ваш материал (node) на Drupal. Только поставьте вместо waveID идентификатор какой-то реальной волны. И не забудьте включить фильтр ввода «Full HTML» (это убирает в Drupal фильтрацию нежелательных html-тегов, если кто не в курсе).

    Все будет работать. Волна будет показываться в iframe на вашей странице, вы сможете спокойно добавлять, удалять и редактировать «блипы» (т.е. отдельные сообщения в рамках волны). Можете еще создавать дочерние волны (wavelets, «подволны», «вейвлеты» — русская терминология еще устоялась).

    2. Но на самом деле для встраивания достаточно даже вот такого кода (мы можем убрать определение DOCTYPE и тег html):

    <script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
        <script type="text/javascript">
        function initialize() {
          var wavePanel = new WavePanel('http://wave.google.com/a/wavesandbox.com/');
          wavePanel.loadWave('wavesandbox.com!w+2Bi7arMxYM%25A');
          wavePanel.init(document.getElementById('waveframe'));
        }
        </script>
      <body onload="initialize()">
        <div id="waveframe" style="width: 100%; height: 100%"></div>
      </body>


    3. Идем дальше. Как-то не хочется иметь в исходном коде страницы сразу два тега body. Поэтому переделаем наш код, добавив заодно некоторые фичи Wave Embed API: вставим кнопки и раскрасим волну.

    <script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
    <div id="waveframe" style="width: 100%; height: 100%"></div>
    // Добавим кнопки "Подключиться к этой волне" и "Ответить" 
    // ("Follow this wave" и "Reply")
    <form id="comment_form"> 
        <button type="button" onclick="wavePanel.addReply()">Говорить сюда</button> 
        <button type="button" onclick="wavePanel.addParticipant()">Следуй за кроликом</button> 
    </form> 
    
    <script> 
    var wavePanel = new WavePanel('https://wave.google.com/a/wavesandbox.com/');
    // Настроим дизайн под оформление сайта (фон, текст, шрифт, кегль/размер шрифта). 
    // Размер шрифта можно указывать только в pt или px.
    wavePanel.setUIConfig('#446666', '#cceedd', 'verdana', '9pt');
    
    wavePanel.loadWave('wavesandbox.com!w+i7arMxYM%A');
    wavePanel.init(document.getElementById('waveframe')); 
    </script>


    При нажатии кнопок выполняются функции wavePanel.addReply() и wavePanel.addParticipant(). Первая кнопка добавляет новый «блип» в волну, а вторая — добавляет текущего пользователя в участники данной волны. Но ведь новый «блип» можно было добавить и раньше, скажете вы. Да, но эта кнопка добавляет его как ответ на начальное сообщение волны.
    И важное замечание по второй кнопке — она добавляет в участники волны не пользователя Drupal (волна о Drupal ничего не знает), а текущего пользователя Волны. Поэтому, чтобы эта функция сработала, вы должны быть залогинены в Google Wave.

    Примечание: как вы заметили, в первом варианте wavePanel.init() вызывалась по событию onload. Это было нужно, чтобы до вставки волны вся страница отрендерилась, DOM построился, были вставлены все внешние скрипты и картинки. Наверное, второй вариант, где мы убрали эту проверку — не лучшее решение и в некоторых случаях может привести к каким-то последствиям.
    «Но ведь пока все работает», говорил оператор Чернобыльской АЭС, щелкая выключателями.

    4. Изучение Wave Embed API показывает нам, что для wavePanel.loadWave() и wavePanel.init() есть возможность вызывать callback-функции. Для чего это нужно в народном хозяйстве — пока не очень ясно. Но можно предложить, например, такой вариант — выдать при загрузке волны приветственное сообщение с использованием имени пользователя сайта.

    <script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
    <div id="waveframe" style="width: 100%; height: 100%"></div>
    // Добавим элемент, в котором выведем какое-либо значение, например, имя пользователя Drupal-сайта. 
    // Или его волновой адрес, если он его указал в своем профиле при регистрации на вашем сайте. Или еще что-то.
    // Все это не обязательно выводить именно здесь, можно использовать любой элемент на странице.
    <span id="waveuser"><?php global $user; print $user->name;?></span>
     
    <form id="comment_form"> 
        <button type="button" onclick="wavePanel.addReply()">Ответить за все</button> 
        <button type="button" onclick="wavePanel.addParticipant()">Пройдемте, гражданин</button> 
    </form> 
    <script> 
    var wavePanel = new WavePanel('https://wave.google.com/a/wavesandbox.com/');
    wavePanel.setUIConfig('#446666', '#cceedd', 'verdana', '9pt');
    // Для примера добавим вызов функции с приветствием пользователю, в котором используем его имя. Аналогично можно добавить callback к wavePanel.init()
    wavePanel.loadWave('wavesandbox.com!w+i7arMxYM%A', welcomeMsg("Welcome to World Wide Wave, "));
    wavePanel.init(document.getElementById('waveframe'));
     
    // Собственно callback функция, которая в этом примере формирует приветственное сообщение
    function welcomeMsg(text) {
      var item=document.getElementById("waveuser");
      if(item) {
        item.innerHTML=text + item.innerHTML + "!";
      }
    }
    </script>
    


    В итоге, при загрузке волны наш пользователь получит сообщение типа «Welcome to World Wide Wave, Neo!». Что, в общем и целом, соответствует новой реальности.

    Примечание: можно было получить имя пользователя для приветственного сообщения и другими способами. Но тут лишь пример, можете сделать по своему.

    5. Другое, более полезное на мой взгляд, применение callback состоит в следующем. Как я уже сказал, если сейчас встраивать волну на страницу сайта, то ее увидят только обладатели аккаунта в «песочницу». Обычные посетители будут натыкаться на «заглушку» с сообщением о необходимости залогиниться на wavesandbox.com. Чтобы не смущать простых смертных этим огорчительным неравноправием, можно воспользоваться таким трюком:

    a. Делаем изначально невидимым тот div, в котором будет показываться волна.
    <div id="waveframe" style="width:100%; height: 100%; visibility:hidden;"></div>

    b. А при инициализации волны вызываем callback-функцию, которая делает этот див «visible».
    window.wavePanel.init(document.getElementById('waveframe'), initCallback); 
    function initCallback() { 
      document.getElementById("waveframe").style.visibility="visible"; 
    } 
    


    Таким образом, если вы не залогинены в «песочнице», вы не увидите на странице никаких следов волны.

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

    p.s. Мы не использовали еще функцию getFrameId() из Embed API, которая позволяет получить идентификатор созданного iframe. Но я пока не понимаю, как ею можно было бы с умом распорядиться.

    Еще несколько полезных ссылок в тему «Drupal и Google Wave»:
    обсуждение в группе «Google Wave Россия»
    обсуждение на сайте Drupal.ru
    дискуссионная группа на офсайте Drupal.org

    Upd.: Просили скриншотов. Пока держите вот такой:
    image

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 11

      +3
      Так, о чем это я? Ах да, о том, что все будем в Волне и Волна будет повсюду.
      Иными словами мы утонем?
        0
        «Мы все умрем!» (с) не знаю кто
          0
          Новый Ной выплывет…
          +1
          А кроме как в iframe? Будет какой-то механизм встраивания волны на уровне сервера? То есть, чтобы клиент обращался именно к адресу сайта… iframe не всегда применим, особенно в корпоративной среде…
            0
            Вы можете поднять свой собственный «волновой» сервер. Протоколы открыты. Есть уже исходные тексты сервера FedOne (правда, пока еще весьма примитивного) — здесь на Хабре я недавно писал о нем.

            Если же говорить об интеграции «волн» в существующую CMS (без поднятия собственного wave-сервера), то есть еще вариант создать «робота», который будет организовывать синхронизацию «волны» с вашей CMS. Например, используя XML-RPC.

            Еще можно написать свой волновой клиент вместо той гугловской «оболочки», которую мы видим, заходя в «песочницу» или на скриншотах Google Wave. Рудиментарный клиент есть в исходниках FedOne, пока практически «терминал», но ничего не мешает взять какой-то GUI и научить его работать с волной.
            Гугловский клиент, кстати, полностью написан на GWT — ru.wikipedia.org/wiki/GWT
            –2
            могли бы кстати на час/сутки/х выложить пароль в общий доступ, ну или хотя бы давать его по просьбе в личку…
              +1
              Понимаю ваши чувства. Но, сами подумайте, зачем Google приглашать просто любопытствующих посмотреть на еще очень «сырой» продукт? Им нужны люди, которые возьмутся что-то напрограммировать для Волны (роботов, гаджеты и т.п.).

              Вот ждешь-ждешь инвайта, напряжение растет, затем получаешь приглашение, заходишь в Волну и… И думаешь, ну не зря же я столько ждал — надо что-то сделать здесь. :)
              Психологически очень точно все рассчитано.
                –2
                вы не поняли наверное… я про ваш личный пароль говорил ;)
              0
              Habrawave
                0
                хм… а скриншоты нельзя было?
                или на них тоже без доступа в песочницу волны не видны?
                  0
                  Я думал, ну что там смотреть? Саму волну видно на многочисленных скриншотах Google Wave.
                  Но, если хотите скриншотов, выложу сегодня-завтра. У меня их есть.

                Only users with full accounts can post comments. Log in, please.