Создаём веб-приложение для GNOME 3 / Хабр

Привет, %username%!

Возможно, ты слышал, что в графической оболочке GNOME 3.2 есть возможность запускать веб-приложения.
В этом топике мы рассмотрим простое приложение «ХабраХабр шпион 1.0», которое будет выдавать пользователю информацию о хабравчанах. Использовать для этого мы будем стандартный API.

Для начала рассмотрим процесс добавления веб-страницы в качестве приложения.

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

Чтобы сохранить страницу как приложение, нам понадобится стандартный для среды GNOME веб-браузер Epiphany версии не ниже 3.2, однако в репозиториях моей любимой Ubuntu оказался только 3.0.

Поэтому копируем в терминал следующий код:

sudo add-apt-repository ppa:webupd8team/gnome3
sudo apt-get update
sudo apt-get install epiphany-browser

Если вы используете другой дистрибутив, то обязательно проверьте какая версия в нём стоит.

Теперь, когда Epipnany установлен, открываем нужную нам веб-страницу и жмём Файл -> Сохранить как веб-приложение.

После этого появляется диалог, в котором нас просят ввести название приложения. По-умолчанию это заголовок страницы.

Что же касается иконки, то она берётся из тега apple-touch-icon страницы. Если её там нет, то Epiphany делает скриншот страницы и использует его.

Пишем код

Итак, начнём с написания самого приложения. Пишем его также, как обычную веб-страницу.

Ниже представлен HTML код главной и единственной страницы, которая будет отдаваться пользователю:

<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <!-- Заголок нашего окна: -->
  <title>ХабраХабр шпион 1.0</title>
  <link rel="stylesheet" href="style.css" type="text/css">
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="script.js"></script>
  <!-- Иконка для нашего приложения: -->
  <link rel="apple-touch-icon" href="icon.png"/>
</head>
<body>
  <!-- Далее идёт обычный HTML код - ничего интересного -->
  <div id="logo"></div>
  <div id="welcome">Введи сюда имя (логин) хабропользователя:</div>
  <div id="form">
    <input type="text" id="login" />
    <input type="button" id="go" value="Поехали!" />
  </div>
  <table id="result">
    <tr>
      <td class="gray">Имя пользователя:</td>
      <td id="name"></td>
    </tr>
    <tr>
      <td class="gray">Карма:</td>
      <td id="karma"></td>
    </tr>
    <tr>
      <td class="gray">Рейтинг:</td>
      <td id="rating"></td>
    </tr>
    <tr>
      <td class="gray">Место:</td>
      <td id="ratingPosition"></td>
    </tr>
  </table>
  <div id="footer"> kafeman</div>
</body>
</html>

Сохраняем страницу на сервере и приступаем к написанию JavaScript.

Для того, чтобы получить информацию о пользователе нужно сделать запрос к habrahabr.ru/api/profile/логин и получить данные о пользователе.

Однако тут же возникает первая проблема — браузер не даст нам сделать AJAX'ом запрос на другой домен.

Решение «в лоб» — ставим на своём домене специальный скрипт, который будет запрашивать нужную страницу.

Вариант на PHP:

<?php

header('Content-type: application/xml');

/* $_GET['user'] не фильтруется, будьте осторожны */
$url = 'http://habrahabr.ru/api/profile/'.$_GET['user'].'/';

$handle = fopen($url, "r");

if ($handle)
{
    while (!feof($handle))
    {
        $buffer = fgets($handle, 4096);
        echo $buffer;
    }
    fclose($handle);
}

?>

Теперь по запросу api.php?user=логин мы получаем тоже, что и по запросу habrahabr.ru/api/profile/логин.

Это повысит нагрузку на ваш сервер. Кроме того, каждый запрос будет забирать довольно много времени (до нескольких секунд), по этому обязательно уведомляйте пользователя о том, что программа работает, а не висит.

Например, так:

А теперь, собственно, JavaScript.

$(document).ready(function() {

  $('#go').click(function() {

    /* Сообщаем пользователю, что запрос пошёл... */
    $('title').text('Вычисляю пользователя...');

    $.ajax({
      url: 'api.php?user=' + $('#login').val(),
      dataType: 'xml',
      success: function(habr) {
        /* Если пользователь не найден, то сообщаем об этом */
        if ($(habr).find('error').text() == '404')
          alert('Пользователь не обнаружен!\nВозможно, он использует магию, чтобы скрыться от вас.');
          
        $('#name').html( $(habr).find('login').text() );
        $('#karma').html( $(habr).find('karma').text() );
        $('#rating').html( $(habr).find('rating').text() );
        $('#ratingPosition').html( $(habr).find('ratingPosition').text() );

        /* Возвращаем заголовок в исходное состояние */
        $('title').text('ХабраХабр шпион 1.0');
      }
    });
  });
});

Всё! Теперь немного дорабатываем.

Рисуем иконку. Я использовал формат png, чтобы добиться прозрачности: