Настройка среды разработки

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

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

Работа с кодом

Для написания разметки, JavaScript и CSS подходит любой из доступных на рынке инструментариев, включая Adobe Dreamweaver, Microsoft Expression Web, Aptana Studio или текстовый редактор. Некоторые инструментарии, как Dreamweaver (начиная с версии CS4), лучше подходят именно для работы с разметкой под мобильные устройства, потому как позволяют проверять на совместимость с мобильными веб-стандартами. В этом редакторе при создании нового документа, можно в качестве его типа выбрать XHTML Mobile (рисунок 4.1).

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

Эмуляторы и симуляторы

Наиболее полезными в нашей работе будут эмуляторы и симуляторы. В общем, эмулятор — часть программного обеспечения, которая переводит скомпилированный код с оригинальной архитектуры на платформу, на которой он работает. Эмулятор позволяет нам запускать и использовать одну операционную систему и ее приложения на другой ОС. В мире мобильной разработки, эмулятор — программа, которая эмулирует мобильные устройства и мобильные операционные системы, что позволяет нам тестировать и исправлять баги в мобильных веб-приложениях и просто посмотреть, как то или иное приложение работает на определенной мобильной ОС. И браузер и, даже операционная система «не знают», что работают на эмуляторе и этот факт позволяет выполнять точно такой же код, что и на реальном устройстве.

Рис. 4.1. Dreamweaver позволяет определить новые файлы как документы XHTML Mobile. Лучше не использовать шаблоны.

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

Эмуляторы разрабатываются производителями мобильных устройств или ОС и предлагаются разработчикам бесплатно как отдельный продукт или же вместе с Software Development Kit (SDK) для нативных разработок.

Существуют также эмуляторы только операционных систем, без привязки к какому-либо устройству. Например, такие эмуляторы есть для Windows Mobile и Android.

А есть еще симуляторы — не такое сложное приложение, которые имитирует только некоторые возможные сценарии поведения устройства, но не эмулирует ни аппаратную часть ни реальную операционную систему. Симуляторы более простые и не столь полезны, как эмуляторы. Симуляторы могут создаваться производителем мобильного устройства или любой другой компанией, предлагающей разные моделирующие средства для разработчиков. Также, как и симуляторами, которые не могут воспроизвести все функции устройства, мы можем встретить еще разные варианты инструментов, которые не несут особой пользы для мобильной разработки, но могут быть применимы для работы с другими технологиями (например, Java ME). Что касается мобильных браузеров, то здесь есть как эмуляторы с буквально по-пиксельным качеством эмуляции, так и те, которые не могут предложить оболочку, реально соответствующую настольному браузеру, или передать реальную графику или механизм рендеринга.

Для разработчика уже есть эмуляторы от Nokia, Symbian, BlackBerry, Android, Palm Pre и Windows Mobile и симулятор от Apple для iPhone (правда, только для Mac OS X). Несколько симуляторов мобильных браузеров предлагает Adobe (называется это программное обеспечение Adobe Device Central). При этом совсем нет ни симуляторов ни эмуляторов для устройств компаний Sony Ericsson, LG, Motorola или для тех девайсов Samsung, которые работают на базе собственной ОС (она еще используется на low- и mid-end устройствах).

Есть эмуляторы и для некоторых мобильных браузеров, например, для Opera Mini.

Список всех последних эмуляторов можно скачать по ссылке

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

Эмулятор Android

Эмулятор Android (рисунок 4.2) предоставляется вместе с SDK для разработки нативных Java приложений под Android. Скачать его можно бесплатно по ссылке , а базовый SDK и разные версии Android OS доступны отдельно. Эмулятор работает с Windows, Mac OS X и Linux: после загрузки создай на жестком диске папку и просто распакуй его туда.

В папке, в которую был распакован эмулятор есть android terminal command для Mac OS X и Linux и приложение SDK Setup.exe для Windows, которое запускает Android SDK и AVD Manager, где ты можешь загрузить и настроить платформы Android после установки базы SDK.

Если при попытке получить "Available Packs" (доступные обновления) в Android SDK и AVD Manager получается ошибка, то нужно перейти в меню Настройки и выбрать опцию "Force https:// sources to be fetched using.

В первый раз с открытием эмулятора Android могут быть некоторые сложности. Можно открыть его через IDE (например, через Eclipse), но в таком случае сначала нужно установить плагин Android и создать собственное пустое приложение. Еще как вариант, можно открыть эмулятор через окно консоли (при помощи Terminal или с командной строки — зависит от операционной системы) или через SDK и AVD Manager.

Рис. 4.2. После загрузки Android SDK, откройте менеджер и скачайте платформы, которые вы хотите. Google API, необходимы для разработки с использованием сервисов Google.

Через некоторое время после установки Android SDK ты, скорее всего, захочешь обновить его и поставить новый пакет. Если при обновлении ты получаешь XML ошибку, то, видимо, у тебя устаревшая версия AVD manager — зайди на сайт и скачай SDK заново.

После установки платформы нужно при помощи SDK и AVD Manager создать новое виртуальное устройство. Для создания нового устройства нужно выбрать целевую (установленную) платформу, название, размер экрана и другие специфические аппаратные функции, которые можно увидеть на рисунке 4.3. Когда новое устройство создано, можно переходить к вкладке Виртуальные устройства (Virtual Devices) и нажать «Запуск», после чего увидишь окно, как на рисунке 4.4.

Также ты можешь устанавливать инструменты от других производителей, например Droid device для Motorola. В частности, в случае с Motorola нужно будет скачать (бесплатно) MotoDev Studio для Android на.

ПО от Motorola даже может упростить установку SDK и запуск эмулятора, правда, только если ты сначала (до установки самого SDK) поставишь MotoDev Studio для Android IDE, поскольку после загрузки и запуска MotoDev Studio запросит разрешения загрузить и автоматически настроить SDK и остальные платформы.

Рис. 4.3. После установки SDK и платформы, необходимо создавать виртуальные устройства, для каждого сочетания размеров экрана и платформы.

При открытом эмуляторе ты можешь открыть мобильный веб-сайт при помощи мыши и браузера (напомню, что все устройства Android поддерживают тач) введя URL в его адресную строку. До версии Android 2.0 эмулятор не поддерживает открытие локальных файлов, поэтому тебе нужно будет сделать локальный веб-сервер (например, Apache) или загрузить файлы на веб-сервер в Интернете.

Рис. 4.4. На данный момент, вы можете открыть браузер как если бы вы пользовались устройством Android. Вы можете использовать мышку эмулятора на экране подражая жестам пользователя.

Эмуляторы Nokia

Вообще с появления понятия «разработка для мобильных» у Nokia всегда были самые лучшие эмуляторы. Вместо отдельного эмулятора для каждого устройства тебе предлагаются эмуляторы для любой версии любой платформы. Эмуляторы для серии 40 (для mid- и low-end устройств) и для S60 (Symbian смартфоны) можно скачать на. Есть, правда отдельные эмуляторы для некоторых моделей со специфическими возможностями, как Nokia N97 (устройстве S60 5-го поколения).

Также в инструментарии Nokia есть Nokia Mobile Browser Simulator, разработанный в году для тестирования мобильных веб-сайтов для старых WAP 1.0 и первых WAP 2.0 устройств. Этот симулятор доступен для разработчика и сегодня, но он уже давно устарел и смысла в его использовании нет.

К сожалению, эмуляторы для Series 40 и S60 (представлены на рисунке 4.5) работают только с ОС Windows, а у некоторых из них (более старых) есть еще и проблемы совместимости с Windows Vista и Windows 7. Хорошим решением будет установить как минимум три последних эмулятора для каждой платформы, например для Series 40 6th edition, Series 40 5th edition FP1 (Feature Pack 1) и Series 40 3rd edition FP2.

Рис. 4.5. Это браузер на основе эмулятора Nokia S40. Если вы используете Файл → Открыть, вы должны в первую очередь ввести https://.

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

Для Maemo или MeeGo не существет эмуляторов для тестирования мобильных веб-сайтов, но можно загрузить MeeGo для нетбуков и запустить его на виртуальной машине.

Эмуляторы Nokia добавляют свои ярлыки в меню «Пуск», так что найти их все будет несложно. После запуска эмулятора можно открыть браузер и ввести в адресную строку URL или же воспользоваться меню File→Open, что позволит ввести или вставить URL или открыть файл в твоей локальной файловой системе. Эмулятор автоматически откроет браузер.

В некоторых последних эмуляторах для S40 есть активная по умолчанию возможность интеллектуального ввода текста и при ее использовании отключается возможность воспользоваться для ввода QWERTY клавиатурой. Перед началом использования таких эмуляторов, нужно отключить функцию интеллектуального ввода.

Эмуляторы Nokia S40 поддерживают использование localhost или 127.0.0.1 для получения доступа к локальным файлам.

Возможность запуска эмулятора Nokia на Mac OS X или Linux

Если ты всерьез решил заняться разработкой под мобильные устройства Nokia, то нужно чтобы у тебя был хотя бы один компьютер с Windows XP, пусть даже на виртуальной машине. Некоторые эмуляторы работают только с Windows XP, а некоторые только с Vista и/или 7. Надеюсь, что в ближайшем будущем такие проблемы уйдут. А вот для Mac OS X и Linux понемногу тоже начинают появляться эмуляторы.

Симулятор iPhone

Симулятор iPhone (рисунок 4.6) предоставляет разработчику бесплатную среду моделирования вместе с браузерным симулятором Safari. Работает симулятор только с операционной системой Mac OS X. Как мы помним, симулятор (в отличие от эмулятора) не может имитировать аппаратные возможности и его не возможно считать реальным показателем производительности проекта. Но, при этом, он идеально подойдет, чтобы оценить рендеринг сайта и работу твоего кода. Такая возможность особенно удобная для работы с локальными или удаленными файлами, где можно просто ввести URL с клавиатуры.

Рис. 4.6. iPhone Simulator позволяет поворачивать экран, как в реальном устройстве.

Сам симулятор входит в пакет SDK для разработки нативных приложений (скачать можно по адресу ). Кстати, загрузка и установка SDK может немного затянуться во времени, ведь он весит более 2 Гб. Если ты загрузишь последнюю операционную систему, то сможешь в ней переключаться между версиями при помощи меню Hardware→Version. Также в симуляторе можно выбрать, в каком устройстве тестировать сайт — в iPhone или iPad.

На момент написания этой главы еще не было возможности эмуляции реальных iPhone-браузеров на ОС Windows Linux, поэтому позже мы рассмотрим альтернативные методы эмуляции для ОС Windows.

Сразу же после открытия эмулятора ты можешь открыть приложение Safari и ввести URL в адресной строке. Чтобы открыть локальный файл используй file:/// - протокол адреса для локальных файлов (например, file:///Users/myUser/Desktop/test.html для открытия файла HTML с рабочего стола пользователя myUser).

Для Windows наиболее удачный эмулятор iPhone — MobiOne, в комплекте с которым идет и Visual Designer. Его можно бесплатно скачать на и вместе с MobiOne ты получаешь WebKit браузер, эмулирующий большинство версий iPhone. Плюс еще есть поддержка оболочки Palm webOS.

C iOS 3.0 могут возникнуть некоторые сложности со вставкой URL из буфера обмена: при вставке текста при помощи клавиатуры или меню Edit, он попадает во внутренний буфер обмена iPhone. После этого нужно еще раз вставить текст при помощи функций iPhone, нажав раз по текстовому полю и выбрав в контекстном меню пункт «Вставить» (рисунок 4.7).

Рис. 4.7. Вы можете использовать клавиатуру, или команду Правка → Вставить, чтобы вставить текст в буфер iPhone, а затем щелкните по полю ввода и нажмите Paste на экране чтобы вставить текст.

Эмулятор Palm

На рынке эмуляторов Palm уже более 10 лет и его инструменты всегда были очень популярны. Мы уже говорили об истории Palm и Palm OS, так что сейчас рассмотрим только систему webOS, на которой работает устройство Palm Pre. На сайте Эмулятор работает с Windows, Mac OS X и Linux, но для этого тебе нужно установить Sun VirtualBox (бесплатный виртуальный инструмент,.

Если же ты хочешь установить SDK для старой Palm OS (сейчас это Garnet OS), то для этого нужно загрузить симуляторы.

В эмуляторе Palm открывай мышью меню приложений и выбирай Web to type a URL (Ввести адрес URL). Сначала (пока не привыкнешь) эмулятор может немного путать, потому что не поддерживает экранную клавиатуру (рисунок 4.8) и на изображении мы видим только экран устройства.

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

Если у тебя (как и у меня) ноутбук MacBook, то вместо кнопок End и Home (которых там нет) используй соответственно стрелки Function-right и Function-left.

Рис. 4.8. Эмулятор WebOS не имеет экранной клавиатуры, так что вам нужно знать горячие клавишы для эмуляции нажатия клавиш.

Как и Android, Palm эмулятор не поддерживает простое открытие локального файла и здесь тебе нужно будет использовать локальный веб-сервер и внутренний VirtualBox IP адрес для доступа к нему.

Симулятор BlackBerry

Компания Research in Motion (RIM) — производитель популярных мобильных устройств BlackBerry — отлично поработала над эмуляторами, правда, есть одна проблема: очень трудно решить, какой именно эмулятор выбрать для загрузки. На И, кстати, все программы работают только с операционной системой Windows.

В первую очередь нужно загрузить BlackBerry Email и MDS Services Simulator Package — благодаря этим прокси любой симулятор получает доступ к сети и может эмулировать почтовую службу и корпоративный сервер. На своем компьютере этот сервис тебе нужно будет запускать перед открытием браузера.

Скачать BlackBerry Smartphone Simulators можно по ссылке Перед загрузкой на сайте нужно сначала выбрать тип смартфона, который ты хочешь эмулировать (например, BlackBerry Tour 9630), а потом версию операционной системы.

Нажав на ссылку "view all BlackBerry Smartphone Simulator downloads" сможешь выбрать нужную версию симулятора из более чем 20 доступных вариантов, начиная с версии 3.6. Для каждой версии операционной системы есть свой набор симуляторов, который формируется с учетом версии устройства BlackBerry и оператора, с которым это устройство работает. Например, если ты выбираешь версию ОС 4.2, то можешь скачать симулятор BlackBerry 8100, который работает с одним из следующих операторов:

• Operator-less;
• Cingular Wireless;
• Vodafone;
• TIM;
• Telefonica;
• Rogers Wireless;
• T-Mobile USA;
• Orange;
• O2.

Кроме того, для одного и того же устройства, которое работает с одним оператором, доступны разные версии операционных систем. Перед загрузкой симулятора ты можешь выбрать универсальную прошивку (пункт Generik, то есть любой оператор) или же прошивку под конкретного оператора. Пример симулятора BlackBerry показан на рисунке 4.9. В таблице 4.2 показан список симуляторов и список соответствующих доступных устройств с учетом операторов.

Рис. 4.9. Симулятор BlackBerry на основе указателей, поэтому вам необходимо использовать экранные клавиши или клавиши со стрелками на настольной клавиатуре, чтобы просматривать сайт, как мобильный пользователь.

Установив эмулятор, не забудь перед началом работы с ним открыть BlackBerry MDS Services Simulator. Запусти эмулятор, открой браузер, введи URL файла к которому хочешь получить доступ и увидишь что-то похожее на рисунок 4.9. Эмуляторы BlackBerry не поддерживают открытие локальных файлов или же доступ к ним через localhost; можно использовать локальный IP-адрес твоего компьютера, если он подсоединен к сети или же общедоступный IP, если компьютер напрямую выходит в Интернет.

Эмуляторы Windows Mobile

Эмуляторы Windows Mobile можно загрузить вместе с Visual Studio или или же без IDE, в автономном режиме. Эмулятор нельзя скачать с бесплатной версией Express Visual Studio, и, к тому же, все эмуляторы работают только с ОС Windows.

Тебе нужно будет скачать:

• Microsoft Device Emulator;
• образ Windows Mobile emulator или образы от производителя;
• Virtual PC (для соединения с Интернетом);
• ActiveSync (только для Windows XP или Server) или Windows Mobile Device Center (только для Windows 7, Vista или Server);

Все пакеты программ доступны по ссылке.

i-mode HTML симулятор

Если есть вероятность, что твоими посетителями будут и жители Японии, то стоит протестировать твой сайт на совместимость с NTT DoCoMo i-mode устройствами. К счастью, для таких как я, кто не читает по-японски, компания сделала англоязычную версию сайта, на котором содержится вся необходимая разработчику информация. Симулятор для устройств NTT DoCoMo i-mode доступен для Windows.

Скачать i-mode HTML Simulator и i-mode HTML Simulator II можно по ссылке Первая версия симулятора предназначена для тестирования под устройства, выпущенные до мая год, а вторая, соответственно, с мая.

Fire Mobile Simulator — это плагин симулятор для Firefox для трех главных операторов Японии: Do-CoMo, Au и Softbank. И веб-страница и сам плагин на японском, но ведь есть онлайн-переводчики вроде Google Translate, который поможет получить нам всю необходимую информацию.

Эмулятор Opera Mobile

В году Opera выпустила первый эмулятор для своего браузера Opera Mobile, который работает с Mac OS X, Linux и Windows. Эмулятор выполняет точно такой же код, как и сам браузер, так что неточностей здесь не будет. Кроме браузера в пакете программ есть также Opera Widgets Mobile Emulator — декстопная версия виджета; работает с Symbian and Windows Mobile (это дополнение мы рассмотрим позже). С этим эмулятором, используя Dragonfly (debug сервис от Opera, который мы рассмотрим позже), ты также можешь делать отладку (debug) своих мобильных приложений.

Бесплатно загрузить эмулятор можно здесь Также ты можешь загрузить Opera Debug Menu, тут же полно полезных ссылок для разработчиков под Opera.

Симулятор Openwave

Мы уже говорили о браузере Openwave, который установлен во многих странах на low- и mid-end устройствах, произведенных до года. Не так давно компания была приобретена Myriad Group, но мы по прежнему можем скачать разные версии симулятора по адресу

Если ты пользуешься Visual Studio Development Server, то из-за соображений безопасности ты не сможешь получить доступ к твоим страницам ASP с мобильного эмулятора. Придется изменить свои настройки безопасности или использовать IIS.

Adobe Device Central

Мне очень нравится Adobe и многие из продуктов этой компании. Я даже руковожу Adobe User Group. Но, несмотря на то, что Adobe Device Central (инструмент для мобильной эмуляции для Flash и для мобильных веб-сайтов) отлично подходит для эмуляции Flash Lite, с обычными веб-сайтами все не так радужно.

Инструмент включается в Adobe Dreamweaver, Adobe Flash Professional и в некоторые другие комплекты программного обеспечения. В Adobe Device Central есть обновленный список устройств с учетом размеров экрана и Flash Lite возможностей. Но с точки зрения эмуляции браузера это всего лишь миниатюра Webkit браузера на рабочем столе. Adobe Device Central не обеспечивает реального (или максимально приближенного к реальности) моделирования поведения с точки зрения типографики, браузер-баров и рендеринга разметки.

Для тестирования сайта как на рисунке 4.10, открой исходный HTML в Dreamweaver и выбери File→Preview→Device Central или, если у тебя версия выше CS5, то используй File→Open.

Рис. 4.10. Не полагайтесь на рендеринг Adobe Device Central для мобильных устройств. Его лучшей особенностью является его большая библиотека возможностей мобильного устройства.

Сравнение эмуляторов и симуляторов

В таблице 4.3 показано сравнение способов доступа к файлам и буферу обмена на наших хост-машинах (host machines) в различных эмуляторах и симуляторах.

Для эмуляторов, где нет возможности вставки URL, ты можешь для более быстрого ввода в мобильном или эмуляторе создать бесплатный и оптимизированный под мобильные устройства короткий URL.

Онлайн симуляторы

Онлайн симуляторы это еще один способ тестирования при разработке для мобильных устройств.

Opera Mini Simulator. На сайте Opera По приведенной ссылке ты увидишь последнюю версию симулятора (на момент написания главы, это была версия 5.0), но, если тебе нужны более старые версии, например 4.2, то они расположены здесь.

Помни о том, что Opera Mini и другие установленные пользователем браузеры доступны как обычные нативные или как Java ME приложения, поэтмоу для их загрузки можешь использовать вообще любой эмулятор. Прекрасно подойдут эмуляторы Nokia, Windows Mobile и Black-Berry.

Opera также предлагает разработчиками эмулятор Opera Mobile (работает с Windows, Mac OS X и Linux), бесплатно его можно загрузить по ссылке.

ready.mobi. На сайте есть отличный онлайн инструментарий для тестирования (мы рассмотрим его позже), в комплекте с которым также есть симулятор для некоторых старых мобильных:

• Nokia N70
• Samsung Z105
• Sony Ericsson K850i
• Motorola v3i
• Sharp GX-10

Рис. 4.11. Opera Mini Simulator является бесплатным онлайн сервисом работающем на том же Java браузере, как и на реальных устройствах.

При использовании эмуляторов устройств Nokia, BlackBerry, Symbian, Windows Mobile и Android мы можем поверх эмулятора установить бруазеры, которые также можно скачать бесплатно (например, Opera Mini, Bolt, Opera Mobile или UC Browser).

iPhone web simulation. На некоторых веб-сайтах, вот как на

Куда дальше

• следующая — Среда разработки
• предыдущая — Глава 3. Архитектура и дизайн сайта. Дизайн и юзабилити
• содержание