Оптимизация онлайнового магазина, созданного в WebSphere Commerce, для Apple iPhone

В данной статье описывается создание с помощью WebSphere Commerce® специализированных страниц онлайнового магазина, предоставляющих возможность удобно работать клиентам, использующим мобильные устройства, например, Apple® iPhone™.

Росс Маккегни, архитектор программного обеспечения, IBM

Росс Маккегни (Ross McKegney) - архитектор программного обеспечения в отделе разработки WebSphere Commerce в лаборатории IBM в Торонто. В настоящее время он отвечает за архитектуру бизнес-инструментария следующего поколения на базе Web 2.0. Ранее он отвечал за среду исполнения и модель программирования SOA-компонентов WebSphere Commerce. До этого он работал в группе разработчиков программного обеспечения, создававшей сервер приложений для мобильных приложений, и хорошо знает на опыте сложности проектирования Web-приложений.



Марко Делюка, архитектор бизнес-решений, IBM

Марко Делюка (Marco Deluca) - архитектор бизнес-решений в группе поддержки решений WebSphere Commerce в лаборатории IBM в Торонто. Он имеет шестилетний опыт разработки и создания решений для WebSphere Commerce, а также более чем десятилетний опыт разработки и проектирования мультимедийно насыщенных приложений с использованием новейших технологий.



25.03.2009

Введение

Статья содержит общий обзор путей предоставления удобного доступа к существующим приложениям WebSphere Commerce пользователям мобильных устройств. В качестве примера мы используем Apple iPhone, представленный в июле 2007 года. Для этого есть две причины:

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

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

Новые возможности

Новшества, воплощенные в iPhone, подчеркивают общие тенденции развития сетевых технологий, отмеченные IBM®. Важен даже не сам iPhone, а те изменения в подходах к ведению бизнеса, которые порождает появление на сцене мобильных телефонов, оснащенных мощными браузерами. iPhone является лучшим примером из существующих, но все же не единственным - сходным функционалом обладает HTC Wizard (продается как T-Mobile® Wing, Cingular® 8125, и так далее.)

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

Учитывая то, что к настоящему моменту продано менее миллиона устройств iPhone, и только на территории США, трудно оправдать экономически инвестиции в онлайновый магазин, ориентированный исключительно на этот тип мобильных устройств. Однако мы считаем его важным индикатором более широкой тенденции: с появлением сетей 3G и EVDO в США и других странах и выходом на рынок все новых смартфонов, спрос на контент для мобильных устройств все более увеличивается. Можно представить себе множество сценариев, в которых розничные продавцы делают целевые предложения для пользователей мобильных устройств. Предположим такой сценарий использования в качестве примера: друзья и члены семьи могут искать в вашем реальном магазине детские товары в подарок для будущих родителей, просматривая реестр товаров, выбранных будущими родителями; будущие мать и отец могут вносить изменения в свой список желаемых товаров по мере понимания того, какие именно вещи им нужны.

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


Пример онлайн-витрины магазина

В данном разделе рассматривается пример витрины магазина на базе WebSphere Commerce, предназначенной для браузера Safari смартфона iPhone. Технические детали реализации описываются в дальнейших разделах. Ключевым фактором является то, что данное устройство имеет полнофункциональный Web-браузер, следовательно, мы избавлены от множества технических препятствий при демонстрации витрины. Главная наша задача – это построение интерфейса пользователя.

Для демонстрации преимуществ этого подхода мы начнем с примера магазина ConsumerDirect из WebSphere Commerce v6.0 с уже установленным Центром подарков. На рис. 1 показан процесс покупки в Центре подарков.

Рис. 1. Процесс покупки в Центре Подарков
Рис. 1. Процесс покупки в Центре Подарков

Краткий обзор сценария

Пользователь начинает с отформатированной для iPhone главной страницы, щелкает по ссылке, ведущей в секцию "Реестр подарков", и ищет реестр подарков, заведенный его другом. Найдя реестр, покупатель просматривает список требующихся другу вещей, а также, при желании, детальное описание каждой вещи. В нашей демонстрации рассматривается процесс просмотра реестра подарков пользователем, находящимся в реальном магазине. Мы показываем, какие возможности можно реализовать с минимальными затратами. Данная презентация была подготовлена в сжатые сроки для демонстрационных целей.

Исходный код примера описан в разделе Пример кода для Реестра Подарков. Мы иллюстрируем ценность для бизнеса создания мобильного интерфейса реестра подарков и показываем, что усилия в основном направлены на пользовательский интерфейс, а в остальном используется уже имеющаяся инфраструктура. Нам не пришлось писать ни строчки кода для WebSphere Commerce, чтобы заставить сценарий работать. Мы просто создали альтернативные файлы JSP для каждой Web-страницы, которую хотели показывать в iPhone, и зарегистрировали их в конфигурационном файле Struts для WebSphere Commerce. Скриншоты, приведенные ниже, получены с помощью эмулятора iPhone. Обратите внимание, что скриншоты сняты в полную длину, чтобы показать всю страницу. При отображении в iPhone страницы не умещаются на экране целиком и прокручиваются.

Домашняя страница приложения ConsumerDirect

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

Рис. 2. Домашняя страница ConsumerDirect
Рис. 2. Домашняя страница ConsumerDirect

Раздел "Реестр подарков"

Пользователь может без труда перейти в "Реестр подарков" и найти реестр, добавленный его другом.

Рис. 3. Поиск реестра
Рис. 3. Поиск реестра

Просмотр списка реестров

После ввода критериев поиска и нажатия кнопки поиска пользователю выдается список подходящих реестров.

Рис. 4. Просмотр списка реестров
Рис. 4. Просмотр списка реестров

Просмотр содержимого реестра

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

Рис. 5. Просмотр содержимого реестра
Рис. 5. Просмотр содержимого реестра

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

Просмотр дополнительной информации о продукте

Пользователь может при желании раскрыть любой из элементов списка для просмотра дополнительной информации о товаре.

Рис. 6. Просмотр дополнительной информации о товаре
Рис. 6. Просмотр дополнительной информации о товаре

Преимущества

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


Реализация витрины онлайн-магазина WebSphere Commerce для iPhone

Держа в уме описанный сценарий, давайте рассмотрим реализацию альтернативного интерфейса для пользователей iPhone магазина, построенного на WebSphere Commerce.

Вариант 1. Витрина магазина с использованием Struts

Создание онлайн-магазина, адаптированного к iPhone, на основе вашего существующего магазина с использованием Struts и JSP: Браузер Safari смартфона iPhone поддерживает SSL и cookies, так что ваши клиенты, пользующиеся iPhone для просмотра текущего Web-сайта на основе Struts, могут просматривать его без значительных архитектурных изменений. Для этого достаточно просто установить другие размеры шрифтов ваших страниц (хотя iPhone необыкновенно эффективен в увеличении и уменьшении Web-страниц), но при этом покупатели не смогут увидеть динамическое содержимое, созданное с помощью Flash. Учитывая это, предположительно простейшим путем дать пользователям iPhone доступ к онлайн-магазину будет добавление дополнительных вариантов отображения, предназначенных специально для формата iPhone. Вы можете использовать тот же самый код, что и в текущем сайте магазина, спроектировав основные потоки исполнения через изображения-ссылки (так как на них легче нажимать) вместо текстовых ссылок. Ваши клиенты, пользующиеся смартфонами, видимо, и не ожидают доступа ко всем возможностям, имеющимся у клиентов полноценных браузеров. С небольшими затратами вы можете предоставить им возможность доступа к информации на сайте. Мы выбрали именно Struts-реализацию для сценария, описанного выше.

Вариант 2. Шлюз для мобильных устройств, например, WebSphere Everyplace Mobile Portal

Витрина вашего онлайн-магазина с использованием шлюза для мобильных устройств создает представление, предназначенное для конкретных смартфонов: Портал для мобильных устройств, который с точки зрения WebSphere Commerce представляет собой просто пользователя браузера, производит в режиме реального времени преобразует представление информации в форму, требуемую для мобильного устройства. Этот процесс выполняется с использованием базы данных, содержащей тысячи профилей возможных устройств, каждый из которых содержит данные о дисплее, устройствах ввода и других аспектах конкретного устройства. Примеры шлюзов мобильных устройств, уже работающих с WebSphere Commerce, можно увидеть на OpenStream и MShift. Данные шлюзы доступны как сервисы и как программные продукты. Шлюзы поддерживают взаимодействие клиентов через:

  • Мобильные браузеры
  • Отсылку и получение SMS и MMS
  • Систему распознавания голоса "Click-to-speak" (OpenStream)

Вы можете также использовать методы отсылки SMS/MMS для кампаний продажи, извещений об отправке и рассылки других видов сообщений.

Примечание: Если доступ с iPhone организован с использованием Варианта 1, то шлюзы используют это представление как "общий интерфейс для мобильных устройств", преобразуя его для поддержки сотен других телефонных платформ, таких как iMode®, Symbian®, Blackberry® и Windows® Mobile 5.


Пример кода для "Реестра подарков"

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

  • Минимальное количество HTML и расширенное использование страниц стилей (так как HTML, в отличие от CSS, необходимо подгружать при каждом запросе).
  • Меньшее количество пробелов и пустых мест в HTML.
  • Меньший размер изображений для дизайна сайта и товаров.

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

Файлы исходных кодов из Исходных кодов примера показаны на рис. 7.

Рис. 7. Состав программного кода примера
Рис. 7. Состав программного кода примера

Пример включает файлы модифицированных страниц JSP, таблицу стилей, файлы конфигурации Struts и политики управления доступом. Все изменения, сделанные в JSP, имеющихся в вашей инсталляции, помечены следующими тегами:

<%-- Begin:  Modified code for article --%>// изменения кода ...
<%-- End:  Modified code for article --%>

В основные страницы JSP добавлены методы Javascript для определения того, что клиент пользуется iPhone. Если это так, метаданные перенаправляют страницу на новую страницу для мобильных устройств. Это нормальный подход для примера. Однако клиентам, решившим адаптировать свой сайт для мобильных устройств, мы рекомендуем добавить в логику сайта адаптер устройств, который будет перенаправлять таких пользователей независимо от точки входа на общий сайт.

Условия использования примера

Вам потребуется следующее:

  • Установленный WebSphere Commerce 6.x.
  • Опубликованная модель магазина ConsumerDirect.
  • Подключенный компонент "Центр подарков" WebSphere Commerce.

Установка примера

  1. Скопируйте все JSP в вашу директорию ConsumerDirect. Директория в среде разработки должна выглядеть так:
    <wc_install_dir>\workspace\Stores\WebContent\ConsumerDirect\
  2. Скопируйте файл конфигурации Struts, struts-config-ext-pda.xml, в директорию WEB-INF магазина. Например:
    <wc_install_dir>\workspace\Stores\WebContent\WEB-INF\ struts-config-ext-pda.xml
  3. Отредактируйте файл web.xml, чтобы подключить struts-config-ext-pda.xml. Местонахождение файла web.xml:
    <wc_install_dir>\workspace\Stores\WebContent\WEB-INF\web.xml
  4. Скопируйте файл управления доступом PDAAccessControlPolicy.xml в директорию xml\policies\xml. Например:
    <wc_install_dir>\xml\policies\xml\PDAAccessControlPolicy.xml
  5. Откройте консоль командной строки DOS и перейдите в директорию: <wc_install_dir>\bin.
  6. Введите команду acpload.bat для загрузки новых правил политики безопасности.
  7. Теперь, когда вы установили код примера, перезапустите сервер и откройте витрину вашего онлайн-магазина с помощью iPhone, используя URL:
    http://<your_host_name>/webapp/wcs/stores/servlet/ConsumerDirect/index.jsp

Заключение

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

Благодарности

Авторы хотели бы поблагодарить Джо Спида из отдела продаж WebSphere Commerce за рецензирование проекта данной статьи и ценные замечания по поводу мобильных шлюзов, разработанных другими компаниями.


Загрузка

ОписаниеИмяРазмер
Примеры кода для этого учебного пособияiPhoneSampleCode.zip47KB

Ресурсы

Научиться

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=WebSphere
ArticleID=378372
ArticleTitle=Оптимизация онлайнового магазина, созданного в WebSphere Commerce, для Apple iPhone
publish-date=03252009