Инструменты разработчика

Этот документ содержит общие рекомендации для программирования, отладки и размещения гаджетов.

Содержание

  1. Советы по написанию и отладке программ
    1. Начните с малого
    2. Изучите существующие гаджеты
    3. Используйте консоль JavaScript (в браузере Firefox)
    4. Проверяйте свои догадки
    5. Дополнительные инструменты
  2. Размещение с помощью Google Gadgets Editor
    1. Команды меню Файл
    2. Публикация гаджета из GGE
  3. Хостинг в службе Код Google
    1. Создание нового проекта
    2. Проверка проекта
    3. Отправка файлов

Советы по написанию и отладке программ

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

Начните с малого

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

Изучите существующие гаджеты

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

Используйте консоль JavaScript (в браузере Firefox)

С помощью браузера Firefox можно тестировать разрабатываемые гаджеты на iGoogle. Если гаджет не работает должным образом, откройте консоль JavaScript Tools > JavaScript Console, выберите Errors и проверьте, нет ли в вашем гаджете ошибок синтаксиса JavaScript. Перед каждым тестированием не забывайте удалять из консоли прежние сообщения об ошибках.

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

Проверяйте свои догадки

Проверяя свои предположения во время процесса разработки, вы можете сохранить свое время и силы. Вы уверены, что значение переменной именно такое, как вы думаете? Вы точно знаете, что в используемом массиве содержатся элементы? А может случиться так, что функция, которая, "похоже, не работает как положено", вообще не вызывается? Проверить свои догадки можно, распечатывая сообщения о состоянии на разных этапах разработки программы. Например, следующий гаджет имеет функцию print(), которая пишет сообщения отладки в debug_div, если метка debug имеет ненулевое значение:

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
<ModulePrefs title="Debug Example" height="200"/>
<UserPref name="myname" display_name="Name" required="true" />
<UserPref name="mycolor" display_name="Color" default_value="Pink" datatype="enum" >
<EnumValue value="Blue" />
<EnumValue value="Yellow" />
<EnumValue value="Pink" />
<EnumValue value="Gray" />
</UserPref>
<Content type="html">
<![CDATA[
<div id="content_div" style="font-size:20pt; padding:5px; text-align: center;"></div>
<div id="debug_div" style="font-size:9pt; padding:5px; color: red;"></div>
<script type="text/javascript">
// Get userprefs
var prefs = new gadgets.Prefs(); // debug flag. When its value is non-zero, debugging messages are displayed var debug = 1; // The string containing debugging messages
var debug_html = ""; // Display date
function displayDate (){ // DEBUG: is the function getting called?
print("In displayDate function<br>");
// Create Date object
var today = new Date();
// Get current time
var time = today.getTime();
var content_html = "";
var element = document.getElementById('content_div');
element.style.backgroundColor=prefs.getString("mycolor");
element.style.height=100;
// DEBUG: print out prefs values
print("The background color is " + prefs.getString("mycolor") + "<br>");
print("The name is " + prefs.getString("myname") + "<br>");
content_html += today.toDateString();
// Write content HTML to div
document.getElementById("content_div").innerHTML = content_html;
}
// Outputs debug messages if debug flag has a non-zero value
function print(msg) {
if (debug) {
debug_html += msg;
// Write debug HTML to div
document.getElementById("debug_div").innerHTML = debug_html;
}
}

gadgets.util.registerOnLoadHandler(displayDate);
</script>
]]>
</Content>
</Module>

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

Дополнительные инструменты

С помощью следующих надстроек для браузера Firefox можно получить более детальное представление о гаджетах на этапе разработки.

  • Firebug обеспечивает средства разработки и проверку с помощью DOM.
  • Web Developer добавляет в браузер меню и панель инструментов, содержащую инструменты для веб-разработчика.

Размещение с помощью Google Gadgets Editor

Если у вас не доступа к серверу, где можно хранить XML файлы гаджетов, Google Gadget Editor (GGE) – отличное средство быстро редактировать и размещать гаджеты. Для использования GGE нужно войти в аккаунт Google (в противном случае вы не сможете сохранить свой гаджет). Например, если изменить сообщение "Hello, world!" на "Hello, gadget developers!!" и использовать Файл > Сохранить Как для сохранения спецификации гаджета под новым именем, GGE разместит новую спецификацию гаджета под указанным вами именем.

Примечание. GGE пока что не полностью поддерживает API gadgets.*, поэтому включены не все функции. GGE можно использовать для редактирования и размещения файлов, но там нельзя предварительно просматривать гаджеты.

Команды меню Файл

Вкладка Редактировать имеет выпадающее меню Файл, которое включает следующие команды. GGE использует ваш аккаунт Google, чтобы определить те файлы, которые принадлежат вам, поэтому вы должны зайти в систему, чтобы использовать большинство этих команд.

Команда Описание
Открыть Открывает гаджет, созданный и сохраненный через GGE ранее.
Сохранить Сохраняет редактируемую спецификацию гаджета. Если вы не сохраняли гаджет ранее, спрашивает название гаджета. При сохранении гаджета в GGE он автоматически его разместит. Перед публикацией гаджет должен быть размещен на общедоступном сервере, а GGE размещает гаджет и дает вам несколько способов его опубликовать.
Сохранить как Сохраняет редактируемый вами гаджет под указанными вами именем.
Переименовать Переименовывает редактируемый гаджет. Доступно после сохранения гаджета.
Добавить Позволяет найти в файловой системе ресурсы гаджета и сохранить их в среде GGE. Это может быть спецификация гаджета или другие ресурсы гаджета, например файлы изображений. После добавления ресурсов в GGE он их размещает. Это позволяет импортировать их в спецификацию гаджета, ссылаясь на их URL GGE.
Опубликовать Пункт меню Опубликовать дает следующие возможности публикации гаджета:
  • Добавить на мою страницу iGoogle
  • Опубликовать в каталог iGoogle
  • Добавить на веб-страницу

Команда доступна только после сохранения гаджета (которое приводит к размещению гаджета GGE). Дополнительная информация есть в Публикация гаджета из GGE.
Удалить Отображает список ваших гаджетов GGE и позволяет выбирать и удалять их.

Публикация гаджета из GGE

Команда Опубликовать меню Файл дает следующие возможности публикации гаджета:

  • Добавить на мою страницу iGoogle – Это добавляет ваш гаджет на страницу iGoogle. Это простейший способ проверить гаджет при разработке.
  • Опубликовать в каталог iGoogle – Переводит вас на страницу подачи iGoogle, где URL вашего гаджета заранее внесен в форму. Эту форму можно использовать для подачи гаджета в каталог содержания iGoogle. Гаджет не будет подан до тех пор, пока вы не нажмете Отправить. Это конечный шаг разработки гаджета после проверки и доводки гаджета. Этот этап не обязательно выполнять для использования и отправки гаджета друзьям. Этот вариант – для разработчиков гаджетов, которые хотели бы сделать свой гаджет доступным для всех.
  • Добавить на веб-страницу – Переводит вас на страницу синдикации программы Page Creator. Синдикация еще не поддерживается gadgets.* и API OpenSocial.

URL гаджета расположен в верхнем правом углу GGE. Полный URL можно получить, нажав ссылку.

Мы советуем тестировать разрабатываемый гаджет в максимально возможном количестве сред. Затем, когда он проверен и завершен, можно начать распространять его широкой аудитории, подав его в каталог содержания iGoogle.

Хостинг в службе Код Google

Простейший способ разместить спецификации и ресурсы гаджета – через GGE. Для разработчиков, которым нужна более мощная система контроля исходного кода, мы рекомендуем размещать гаджеты на Google Code: http://code.google.com/hosting. Это бесплатная служба, имеющая массу преимуществ для разработчиков гаджетов. Одно из основных преимуществ – контроль версии с помощью Subversion, системы контроля версии с открытым исходным кодом. В Subversion можно следить за изменениями и поддерживать различные версии гаджета. Доступна вся история изменений, что позволяет вам откатить назад или проанализировать различия между версиями. Дополнительная информация о Subversion есть в книге Subversion.

Для размещения гаджетов на Google Code, сперва нужно установить на компьютер программу ("клиент Subversion"), позволяющую загружать и сохранять файлы на code.google.com ("хранилище Subversion"). Большинство клиентов Subversion имеет графический интерфейс пользователя, обеспечивающий более удобный способ взаимодействия с Subversion, чем командная строка. В зависимости от вашей операционной системы можно выбрать один из клиентов. Устанавливайте тот, который совместим с вашей системой. Далее приводится несколько клиентов, которые мы рекомендуем использовать.

  • TortoiseSVN — это простой в использовании клиент Subversion для ОС Windows, интегрирующийся непосредственно с проводником Windows.
  • AnkhSVN – подключаемый модуль для Visual Studio, открывающий для Subversion доступ в IDE.
  • ZigVersion – клиент Subversion для ОС Mac OS X.
  • RapidSVN – межплатформенный графический интерфейс пользователя для Subversion.  Данный клиент поддерживает все три основные операционные системы: Windows, Mac OS X и Linux.

Здесь представлен полный список клиентов и подключаемых модулей.

Установив на свой компьютер Subversion, следуйте приведенным ниже инструкциям, чтобы начать размещение своих проектов в службе Код Google.

Создание нового проекта

Чтобы создать новый проект, выполните следующие действия.

  1. Зайдите на http://code.google.com/hosting и зайдите в систему со своим аккаунтом GMail.  Если у Вас еще нет его, создайте его.
  2. Нажмите Создать новый проект.
  3. Введите информацию о новом проекте в соответствующих полях.
    • Создайте название для своего проекта в нижнем регистре, например my-gadgets. Помните, что название проекта становится частью URL проекта и не может быть изменено впоследствии.
    • Введите краткое изложение и описание.
    • Выберите лицензию на открытое программное обеспечение.Для получения дополнительной информации см. Лицензии на открытое программное обеспечение.
    • Дополнительный этап: назначьте метки, чтобы другим пользователям было проще найти ваш проект.
  4. Убедитесь, что все обязательные поля заполнены и нажмите Создать проект.
  5. Готово!  Вы будете перенаправлены на Главную страницу проекта. Проверьте, что URL выглядит примерно так: http://code.google.com/p/<project-name>/

Теперь у вас есть проект code.google.com. Хранилище Subversion было создано на основании названия проекта. Выберите вкладку Источник и нажмите ссылку Хранилище Subversion.

URL должен выглядеть примерно так: http://<project-name>.googlecode.com/svn/. Появится три ссылки на каталоги: branches, tags и trunk. Отправляемые в созданный проект файлы будут размещаться в папке /trunk. URL http://<project-name>.googlecode.com/svn/trunk/ стоит разместить в закладки, на будущее.

Проверка проекта

Файлы можно загружать только поле того, как будет выполнена проверка кода, помещенного в хранилище Subversion проекта Чтобы выполнить проверку, нужно знать следующее: URL хранилища (нужна версия с https, а не http в начале), имя пользователя и пароль. Узнать эту информацию можно на вкладке Источник своего проекта (http://code.google.com/p/<project-name>/source). Информация на странице должна выглядеть примерно так:

svn checkout https://<project-name>.googlecode.com/svn/trunk/ gadgets-test --username <username>

При запросе введите созданный пароль SVN.

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

Данные проверки могут меняться в зависимости от используемого клиента, но основная процедура для всех одна. Инструкции в данном разделе предназначены для пользователей TortoiseSVN.

Чтобы проверить проект, выполните следующие действия.

  1. Создайте в проводнике Windows новую папку и откройте ее.
  2. Щелкните правой кнопкой мыши и выберите Проверка SVN
  3. Введите URL хранилища и нажмите OK. Заметьте, что для этого этапа необходимо использовать версию URL хранилища с https. Это нужно для доступа для чтения и записи. При использовании версии, начинающейся с http, вы получаете только доступ для чтения и не сможете добавлять или отправлять файлы.
  4. Клиент TortoiseSVN подключится к серверу и попытается выполнить проверку подлинности. Нужно будет ввести имя пользователя и пароль. Введите имя пользователя и пароль, установите флажок Сохранить результаты проверки подлинности, а затем нажмите ОК.Если у вас не спрашивают имя пользователя и пароль, вернитесь на этап 3 и убедитесь, что URL хранилища начинается с https, а не с http.

После этого клиент подключается и выполняет полную проверку хранилища. Готово!

Если проверка прошла успешно, появится новая скрытая папка, /.svn.  Не удаляйте и не изменяйте ее.

Отправка файлов

После проверки проекта можно добавлять новые папки и файлы в каталог с помощью команд Subversion. Инструкции в данном разделе предназначены для пользователей TortoiseSVN.

Чтобы загрузить файл, выполните следующие действия.

  1. Создайте новый файл в своем каталоге <project-name>.googlecode.com/svn/trunk/ и сохраните его (например, new-gadget.xml). Файл можно положить прямо в /trunk или в подкаталог /trunk.
  2. Щелкните файл правой кнопкой мыши и выберите Добавить....  Файл будет просто помечен как добавленный; но он пока еще не отправлен на сервер. Если разместить файл в каталог, который еще не был добавлен в хранилище, нужно добавить и его. При добавлении каталога все его файлы тоже добавляются. Те же правила действуют при применении изменений. Нельзя отправить файл в хранилище, если не был отправлен его каталог.
  3. Внесите в файл необходимые изменения, чтобы его можно было отправить (загрузить).
  4. Когда файл будет готов к отправке, нажмите на него правой кнопкой мыши и выберите Отправить...

При запросе введите дополнительную заметку в журнале сообщений и нажмите ОК. Файл должен начать передаваться на сервер.

Как только файл будет полностью передан на сервер, отправка (загрузка) завершится и файл тут же станет доступным в Интернете на странице http://<project-name>.googlecode.com/svn/trunk/new-gadget.xml. Заметьте, что для ссылки (считывания) файлов в хранилище следует использовать версию URL хранилища, начинающуюся с http.

Можно создавать в хранилище структуры каталогов, которые будут отражаться в URL. Например, при добавлении и отправке нового файла в /a/b/c/new-gadget.xml этот файл размещается по адресу http://<project-name>.googlecode.com/svn/trunk/a/b/c/new-gadget.xml.

Больше сведений о хостинге проектов на Google Code можно узнать в разделе Частые вопросы.

В начало