Среда разработки Intel® HTML5

Среда разработки Intel® HTML5 (бета-версия) — это полнофункциональная облачная интегрированная среда (IDE), используемая при работе над приложениями HTML5 для различных мобильных платформ. Она создана на основе Cloud9* IDE и дополнена соответст¬вующими подключаемыми компонентами. В комплексе эти инструменты позволяют выполнять разработку клиентских приложений HTML5 на всех этапах — от редактирования и отладки до развертывания на различных платформах. Среда разработки работает в облаке. Для доступа к ней используйте браузер Google Chrome* на компьютере, который используется для создания приложения. Мы не гарантируем правильную работу IDE с другими браузерами для настольных ПК. У этого компьютера должно быть быстрое и надежное подключение к Интернету: это позволит добиться высокой производительности.

Приложения HTML5 содержат код HTML, CSS и JavaScript, а также изображения, аудио- и видеофайлы, значки и прочие ресурсы. Приложения HTML5 можно развертывать в виде "чистых" веб-приложений, предназначенных для запуска в браузере на различных устройствах. Работа приложений обычно обеспечивается веб-сервером, доступ к которому осуществляется по URL или с помощью закладки. Если приложение использует локальные ресурсы устройства (камеры, датчики и хранилища данных), оно должно получить доступ к ним через интерфейс API, который обеспечивает работу с компонентами платформы. Такие приложения называются гибридными. Они не выполняются непосредственно в браузере: для их работы применяется компонент, который называется веб-представлением. Гибридные веб-приложения обычно устанавливаются на устройства из магазина приложений для данной платформы.

Архитектура среды разработки HTML5 поддерживает межплатформенную разработку. Это означает, что достаточно один раз написать программу, и она будет работать на различных устройствах. Нет необходимости использовать отдельные языки программирования и пакеты SDK для создания приложений для каждой платформы. При использовании HTML5 исключается необходимость применения разных этапов проектирования и разработки для каждой мобильной платформы, на которой должна работать программа. Упрощается поддержка новых мобильных устройств по мере их появления. Кроме того, появляется возможность использовать код HTML5 и уже имеющийся опыт создания веб-страниц и приложений.

Среда разработки HTML5 включает примеры, иллюстрирующие различные алгоритмы программирования HTML5 для устройств и лучшие методики создания приложений, которые могут автоматически приспосабливаться к различным характеристикам и параметрам работы устройств: разрешению экрана, размеру, соотношению сторон и ориентации. Некоторые примеры приложений показывают как осуществлять доступ к ресурсам устройства с помощью интерфейса API Apache Cordova* (в прежних версиях он назывался PhoneGap*). API Cordova поддерживается множеством мобильных платформ, поэтому можно создать единую базу кода, которая будет работать на разных устройствах. Нет необходимости программировать на традиционных языках, таких как Apple Objective-C* или Java*.

Дополнительные сведения о создании кода приложений HTML5, способного работать на нескольких платформах, можно найти в статье Building Cross-platform Apps with HTML5.

Доступ к среде разработки Intel HTML5

Откройте браузер Chrome и перейдите в раздел HTML5 портала Intel® Developer Zone (Intel® DZ) по адресу http://software.intel.com/html5.Зарегистрируйтесь на портале, если вы не сделали этого раньше. Для этого нажмите на ссылку "Register" в правом верхнем углу страницы и введите имя, адрес электронной почты и другие необходимые сведения. На этом сайте содержится библиотека образцов приложений HTML5, фрагменты кода (в разделе «HTML5 Playground»), ссылки на различные информационные документы, документация по продуктам, а также ссылка на облачную среду разработки Intel HTML5. После входа на портал нажмите на ссылку, чтобы войти в среду разработки Intel HTML5. Для доступа к этой среде разработки используйте учетные данные портала Intel Developer Zone.

Рабочие области, папки и файлы

Рабочая область — это облачное пространство, где выполняется разработка приложений. При первом входе в IDE для вас будет автоматически создана рабочая область под названием html5. Она открывается каждый раз при входе в интегрированную среду разработки. В этой рабочей области будет открыто простое гибридное веб-приложение HTML5.

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

Чтобы просмотреть вводную информацию по работе со средой разработки, последовательно выберите Help > Take a Guided Tour в меню IDE.

Совет: Самый простой способ начать работу — создать копию образца приложения. С помощью команды File > Import Sample Application… выберите образец приложения HTML5 и скопируйте его в рабочую область. При этом будет создана папка на один уровень ниже папки, выбранной в настоящий момент. В новой папке на верхнем уровне будет находиться файл index.html. Можно скопировать несколько образцов приложений в одну рабочую область. Рекомендуется копировать каждый из них в отдельную папку.

Как правило, приложение должно представлять собой отдельный каталог, при этом в папке верхнего уровня будет находиться главный файл index.html . Другими словами, все вспомогательные файлы и папки приложения должны находиться внутри одной папки, в которой находится файл index.html. Это позволит избежать проблем при упаковке и экспорте приложения, а также соблюсти стандарты именования файлов, принятые в Cordova. Если файл index.html содержит ссылку, подобную ../common/reuseme.js, система отображает предупреждение. Дополнительные сведения см. в описании программы Packager.

С помощью меню File можно создавать файлы и папки разными способами. Команда File > Upload Files позволяет скопировать файлы и папки с компьютера в облачную рабочую область. Выберите папку в рабочей области, а затем используйте команду File > Download Folder , чтобы загрузить ZIP-файл, содержащий выбранную папку и все вложенные папки, находящиеся внутри нее. Также можно импортировать и экспортировать файлы между рабочей областью и хранилищем git с помощью команд git, которые вводятся с помощью терминала IDE.

Совет: При добавлении нового пустого файла лучше использовать команду File > New From Template…, а не File > New File. В первом случае будет создан файл известного типа, поэтому редактор попытается сразу же применить алгоритмы интеллектуального редактирования, предусмотренные для такого файла. Для некоторых типов файлов, например HTML, также предоставляются полезные начальные данные. Нужное имя файла и папку, в которой он будет находиться, можно выбрать позднее с помощью меню File > Save As…. Перемещать папки между файлами можно с помощью копирования и вставки, а также перетаскивания мышью.

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

Редактирование файлов

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

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

Следует особо отметить функцию «множественных курсоров». Можно установить в коде несколько точек курсоров, после чего вводимый с клавиатуры текст будет добавляться одновременно во всех этих точках. Для доступа к этой функции используйте команду меню Selection > Multiple Selections.

Элементы меню Edit, Find, Selection, View, иGoto предоставляют доступ к большому количеству команд редактора. Пользователи редактора vim по достоинству оценят привычный режим редактирования, доступный с помощью меню View > Vim Mode.

Для большинства команд меню предусмотрены сочетания клавиш, пользоваться которыми обычно удобнее, чем открывать элементы в меню при помощи мыши. Список сочетаний клавиш для команд редактора можно найти в справке (меню Help > Keyboard Shortcuts).

ПРИМЕЧАНИЕ: В текстовом редакторе изменения не сохраняются автоматически. Всегда помните о том, что необходимо достаточно часто сохранять данные. Это позволит избежать их потери, если соединение с сервером пропадет.

Предварительный просмотр и эмуляция устройства

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

  • Preview (на вкладке браузера)
  • Preview on Device
  • Execute in the Device Emulator

Команда Preview (предварительный просмотр) открывает выбранный HTML-файл на новой вкладке в текущем браузере на компьютере. Это простой и быстрый способ начального тестирования веб-приложений. При предварительном просмотре приложения в IDE не предоставляется никакой дополнительной поддержки. Этот вариант может быть не слишком полезен, если в вашем приложении используется интерфейс API Cordova, поскольку он не реализован в стандартных браузерах. Кроме того, размер экрана (окна просмотра) браузера на компьютере обычно значительно отличается от такового на мобильных устройствах.

Preview on Device (предварительный просмотр на устройстве): эта команда отображает QR-код выбранного HTML-файла. Так вы можете быстро открыть приложение в мобильном браузере. Как и описанная выше операция Preview, этот вариант может быть не слишком полезен, если в вашем приложении используется интерфейс API Cordova, поскольку он не реализован в стандартных браузерах, в том числе и на мобильных устройствах (по причинам, связанным с безопасностью). При использовании этой команды появляется диалоговое окно с URL-адресом выбранного HTML-файла, преобразованным в QR-код. Мобильное устройство должно быть оснащено камерой и приложением для сканирования QR-кодов. Это позволит расшифровать URL и открыть его в браузере устройства.

Дополнительные сведения о QR-кодах читайте в соответствующей Learning About QR Codes.

Если выбрать Device Emulator, приложение будет запущено в среде эмулятора на основе API Cordova. При этом можно выбрать размер экрана, распространенный на мобильных устройствах. Также вы можете вызывать системные события и контрольные системные параметры, такие как расположение и направление компаса. Это позволяет быстро увидеть, как ваше приложение будет выглядеть и работать на различных устройствах (и вам не потребуется их покупать). Дополнительные сведения можно найти в статье Getting Started Guide: Intel® HTML5 Development Environment/Device Emulator. Чтобы запустить приложение в эмуляторе устройства, используйте элемент меню Tools > Device Emulator или щелкните . При использовании предварительного просмотра или эмулятора устройства можно тестировать приложение с помощью отладчика веб-браузера. В браузере Chrome он поддерживает средства разработки Chrome и консоль JavaScript.

Выполнить приложение можно двумя способами:

  • на физическом устройстве;
  • на эмуляторе уровня платформы.

«Чистое» веб-приложение можно запустить в браузере на целевой системе. В этом случае облачная среда разработки служит в качестве сервера, на котором размещено приложение. Достаточно открыть в веб-браузере устройства тот же URL, который отображается при предварительном просмотре. Обратите внимание, что браузер устройства сможет получить доступ к файлам проектов в среде разработки только после входа в нее, поскольку ваши файлы являются конфиденциальными. Для получения доступа откройте в браузере на устройстве портал Intel® Developer Zone (Intel® DZ) и выполните вход. После входа на портал у вас должен появиться доступ к файлам проектов. Не запускайте саму среду разработки в мобильном браузере.

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

Эмулятор уровня платформы обычно является компонентом пакета для разработки программного обеспечения (SDK) и не входит в состав среды разработки Intel HTML5. Чтобы начать работу с этим эмулятором, установите пакет SDK платформы.

Рекомендации по применению различных стратегий отладки см. в статье Best Practices for Debugging Cross-platform HTML5 Applications.

Программа Packager

Используйте программу Packager, когда гибридное приложение HTML5 будет готово к запуску на физическом устройстве (или на эмуляторе уровня платформы, таком как эмулятор Android*). Поскольку гибридное приложение невозможно запустить в браузере, необходимо развернуть его в качестве автономного. Впрочем, может потребоваться упаковывать и «чистые» веб-приложения в зависимости от предполагаемого способа их развертывания.

Чтобы запустить мастер для подготовки вашего приложения к упаковке с помощью службы PhoneGap Build, используйте меню Tools > Packager в среде разработки. Выберите папку верхнего уровня для приложения, которое нужно экспортировать. Эта папка должна содержать файл index.html. Будут экспортированы все файлы, находящиеся в дереве ниже этой папки. Нажмите кнопку Next.

Мастер запросит основные сведения о приложении, необходимые для создания или изменения файла config.xml. Файл config.xml является «манифестом» и описывает ваше приложение: в нем указывается название приложения; значок вашего приложения на экране мобильных устройств; компоненты и права доступа, используемые вашим приложением (чтобы пользователь мобильного устройства, на которое будет устанавливаться ваше приложение, смог предоставить необходимое разрешение); а также все прочие основные атрибуты, необходимые для различных целевых мобильных устройств. Формат этого файла соответствует спецификации виджетов W3C. Если в папке верхнего уровня существует файл config.xml, то параметры мастера будут взяты из этого файла. Если на компьютере разработки уже существует файл config.xml, нажмите кнопку Upload config.xml, чтобы использовать параметры из этого файла. После ввода всех необходимых параметров нажмите кнопку Next. Результаты будут сохранены в файле config.xml.

После этого осталось лишь загрузить ZIP-файл, содержащий файл манифеста и все файлы приложения, на компьютер разработки. Этот готовый ZIP-файл пригоден для использования программой PhoneGap Build, доступной по адресу http://build.phonegap.com.

PhoneGap Build — это независимая служба, никак не связанная со средой разработки Intel HTML5. Для ее использования требуется отдельный идентификатор пользователя. Некоторые функции этой службы предоставляются бесплатно, другие требуют оплаты. Процесс работы с ней заключается в следующем: нужно отправить приложение (только что созданный ZIP-файл), чтобы служба PhoneGap Build преобразовала его в исполняемые файлы для каждой поддерживаемой платформы. По завершении упаковки можно загрузить получившиеся исполняемые файлы для целевых систем на компьютер разработки, после чего следует перенести их на фактические устройства или отправить в магазин приложений.

Окна команд, консоли и терминала

Среда разработки поддерживает текстовые команды, соответствующие всем действиям, которые можно выполнить с помощью графического пользовательского интерфейса. Это дает возможность создавать сценарии для автоматического выполнения последовательностей команд среды разработки. Для вывода списка всех доступных команд используется команда help.

Окно команд — это окно высотой в одну строку, находящееся в нижней части среды разработки. Введите одну команду в окне команд и нажмите клавишу ВВОД для ее выполнения. Результат появится в окне консоли. Отобразить и скрыть окна команд и консоли можно с помощью меню View.

Окно команд подходит для небольшого количества команд. Гораздо более мощная среда командной строки предоставляется в окне терминала. Используйте меню View > Terminals > New Terminal, чтобы открыть окно терминала, или щелкните Open a Terminal в окне команд. Окно терминала — это эмулятор полноэкранного терминала с полной поддержкой оболочки GNU bash. Окна терминала отображаются в виде вкладок в области редактирования. Чтобы закрыть окно терминала, щелкните элемент управления «X» на вкладке этого окна.

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

Интеграция с Git

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

Если нужно только импортировать существующее общедоступное хранилище git в рабочую область среды разработки HTML5, введите в окне команд следующую команду:

  • git clone name-of-remote-git-repository

Где "name-of-remote-git-repository" — имя удаленного хранилища git, которое нужно клонировать в рабочую область среды разработки HTML5. Точное имя хранилища и формат команды git clone зависят от расположения и сервера, на котором находится удаленное хранилище git. Для получения дополнительных сведений см. документацию к этому удаленному серверу.

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

Рабочая область среды разработки HTML5 автоматически инициализируется с базовым файлом конфигурации git, папками и ключами SSH в домашней папке, которая находится на один уровень выше папки рабочей области. Идентификатор git, хранящийся в этой конфигурации по умолчанию, инициализируется с адресом электронной почты, который вы использовали при регистрации для входа в среду разработки HTML5. Можно просмотреть и отредактировать файл конфигурации git с помощью команды git config в окне терминала (View > Terminals > New Terminal).

Командная строка git в окне терминала позволяет получить доступ к частным хранилищам git, например размещенным на GitHub, по безопасному подключению SSH. Пара ключей SSH, необходимых для идентификации на серверах git, находится во вложенной папке .ssh внутри домашней папки (cd ~) в рабочей области. Для доступа к частным хранилищам git из среды разработки HTML5 нужно сначала зарегистрировать на сервере git открытый ключ, хранящийся в этой рабочей области и связанный с вашей учетной записью.

Чтобы получить копию открытого ключа, откройте панель мониторинга, щелкнув небольшой значок в виде стрелочного индикатора в правом верхнем углу среды разработки HTML5 (рядом с синей эмблемой Intel). При наведении указателя мыши на этот значок появится подсказка «dashboard». На панели мониторинга в разделе «Account Settings» щелкните «Show your SSH key», затем нажмите зеленую кнопку «COPY». Ключ SSH будет скопирован в буфер обмена. После этого можно скопировать этот ключ в соответствующий файл конфигурации или в реестр на удаленном сервере git. При копировании ключа SSH на удаленный сервер git соблюдайте осторожность, чтобы случайно не добавить в ключ новые строки или пробелы.

Например, чтобы зарегистрировать открытый ключ с вашей учетной записью GitHub, выполните следующие действия:

  • Войдите в рабочую область среды разработки HTML5.
  • Откройте панель мониторинга, щелкнув «RPM gauge» в правом верхнем углу рабочей области.
  • Щелкните строку «Show your SSH key» в разделе «ACCOUNT SETTINGS».
  • Нажмите кнопку «COPY», чтобы скопировать ключ SSH в буфер обмена.
  • Войдите в свою учетную запись GitHub account.
  • Щелкните значок параметров учетной записи.
  • Выберите "SSH Keys" в меню параметров.
  • Нажмите кнопку «Add SSH key».
  • Введите описательное название (например, «Среда разработки Intel HTML5»).
  • Вставьте содержимое буфера обмена в раздел «Key».
  • Нажмите кнопку «Add key».

После выполнения всех описанных выше действий все выполняемые из окна команд или из окна терминалов команды git, задействующие протокол SSH (например, git@github.com/<user>/<repo>.git), будут автоматически использовать ключи, сохраненные в рабочей области, для идентификации на удаленном сервере git. Можно импортировать существующее хранилище git с удаленного сервера с помощью команды git clone. При этом файлы будут импортированы в текущую рабочую папку. Убедитесь в том, что в данный момент открыта рабочая, а не домашняя папка. Если вы не уверены, какая именно папка в дереве рабочей области является активной в данный момент, закройте окно терминала и откройте новое. При этом текущей папкой станет папка рабочей области.

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

ПРИМЕЧАНИЕ: Главная папка хранилища автоматически инициализируется в качестве хранилища git.

Для отслеживания и применения правок перейдите в управляемую папку хранилища git и выполните соответствующие команды git snapshotting.

ПРИМЕЧАНИЕ: Настройка редактора по умолчанию не предусматривает создание команд фиксации, поэтому необходимо использовать параметры фиксации -m или -F либо настроить git для использования одного из встроенных редакторов Linux, например, vi. Редакторы для Linux доступны только в окне терминала, они не будут работать в окне команд.

Используйте команду git push для экспорта приложения или проекта. Эта команда передаст последнее состояние фиксации в удаленное хранилище.

Дополнительные сведения о работе инструмента git см. в этом руководстве по git.

Ресурсы

  • Раздел HTML5 портала Intel Developer Zone (Intel DZ) находится по адресу http://software.intel.com/html5. Можно открыть среду разработки с этой страницы, выполнив вход на портал Intel DZ.
  • В среде разработки Intel HTML5 документация и видео доступны посредством меню Help.
  • Для получения дополнительных сведений PhoneGap Build, а также для регистрации для работы с PhoneGap Build перейдите по адресу http://www.phonegap.com.
  • Справочник по API Apache Cordova: http://docs.phonegap.com.
  • Программа Adobe PhoneGap Build: http://build.phonegap.com.
Пожалуйста, обратитесь к странице Уведомление об оптимизации для более подробной информации относительно производительности и оптимизации в программных продуктах компании Intel.