Привет, %username%!
Возможно, ты слышал, что в графической оболочке GNOME 3.2 есть возможность запускать веб-приложения.
В этом топике мы рассмотрим простое приложение «ХабраХабр шпион 1.0», которое будет выдавать пользователю информацию о хабравчанах. Использовать для этого мы будем стандартный API.
Для начала рассмотрим процесс добавления веб-страницы в качестве приложения.
В общем случае, веб-приложение — это обычная веб-страница, которая отображается в меню как программа и открывается в отдельном окне.
Чтобы сохранить страницу как приложение, нам понадобится стандартный для среды GNOME веб-браузер Epiphany версии не ниже 3.2, однако в репозиториях моей любимой Ubuntu оказался только 3.0.
Поэтому копируем в терминал следующий код:
Если вы используете другой дистрибутив, то обязательно проверьте какая версия в нём стоит.
Теперь, когда Epipnany установлен, открываем нужную нам веб-страницу и жмём Файл -> Сохранить как веб-приложение.
После этого появляется диалог, в котором нас просят ввести название приложения. По-умолчанию это заголовок страницы.
Что же касается иконки, то она берётся из тега apple-touch-icon страницы. Если её там нет, то Epiphany делает скриншот страницы и использует его.
Итак, начнём с написания самого приложения. Пишем его также, как обычную веб-страницу.
Ниже представлен HTML код главной и единственной страницы, которая будет отдаваться пользователю:
Сохраняем страницу на сервере и приступаем к написанию JavaScript.
Для того, чтобы получить информацию о пользователе нужно сделать запрос к habrahabr.ru/api/profile/логин и получить данные о пользователе.
Однако тут же возникает первая проблема — браузер не даст нам сделать AJAX'ом запрос на другой домен.
Решение «в лоб» — ставим на своём домене специальный скрипт, который будет запрашивать нужную страницу.
Вариант на PHP:
Теперь по запросу api.php?user=логин мы получаем тоже, что и по запросу habrahabr.ru/api/profile/логин.
Это повысит нагрузку на ваш сервер. Кроме того, каждый запрос будет забирать довольно много времени (до нескольких секунд), по этому обязательно уведомляйте пользователя о том, что программа работает, а не висит.
Например, так:
А теперь, собственно, JavaScript.
Всё! Теперь немного дорабатываем.
Рисуем иконку. Я использовал формат png, чтобы добиться прозрачности:
Сохраняем всё как веб-приложение. Как описывалось ранее, открываем страничку в Epiphany и жмём Ctrl + Shift + A.
Появится диалог:
Жмём «Создать». Всё! В подтверждение ваших действий появится уведомление:
Найти же приложение можно в разделе «Прочие» главного меню:
Не забудьте про обработку ошибок:
UPD: Знаю про опечатку в скриншоте снизу. В коде исправил.
Всё!
Возможно, ты слышал, что в графической оболочке 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, чтобы добиться прозрачности:
Сохраняем всё как веб-приложение. Как описывалось ранее, открываем страничку в Epiphany и жмём Ctrl + Shift + A.
Появится диалог:
Жмём «Создать». Всё! В подтверждение ваших действий появится уведомление:
Найти же приложение можно в разделе «Прочие» главного меню:
Не забудьте про обработку ошибок:
UPD: Знаю про опечатку в скриншоте снизу. В коде исправил.
Всё!