Html5 разработка веб приложений

Расписание курса

Описание курса

Аннотация:

Данный курс научит Вас тому, как кодировать программную логику в веб-приложениях, используя JavaScript, а также, как создавать страницы HTML5, чтобы разобрать и отправить данные c использованием формата HTML5. Помимо этого — создавать и изменять Объектную модель документа ( Document Object Model — DOM), создавать быстро реагирующие слои с CSS3, сохранять локальные данные с JSON и “рисовать” на HTML5 холсте (HTML5 canvas). Студенты смогут добавить интерактивность к веб-страницам, получая при этом необходимый практический опыт, применить динамические данные, используя AJAX, REST и WebSocket с JavaScript.

Аудитория:

• Разработчики приложений
• Разработчики
• Разработчики форм
• Разработчики J2EE
• Разработчики Java
• Разработчики Java EE
• Ведущие специалисты
• Технические консультанты

Преимущества для Вас:

Этот курс подготовит любого веб-разработчика с достаточным количеством знаний по JavaScript, HTML5 и CSS3, необходимых для создания сложных и современных сайтов, в том числе для тех, кто надеется участвовать в разработке “front-end” веб-приложений с использованием Java EE.

Цели курса:

• Создавать и запускать HTML5 приложения в среде NetBeans
• Писать код на языке JavaScript с использованием переменных, объектов, функций и массивов
• Создавать формы HTML5, чтобы запросить и обработать информацию
• Писать функции JavaScript для событий HTML5
• Управлять элементами HTML5 с использованием DOM
• Использовать JavaScript API
• Сохранять объекты, используя JSON API, Cookies и Local Storage
• Стиль HTML документов при наличии CSS3
• Использовать Media Queries и медиа-данные, чтобы адаптировать веб-страницу к различным размерам экрана
• Создавать замыкания (closures), прототипы и модули в JavaScript
• Создавать холст (Canvas), интервалы, взаимодействия вида Drag and Drop и манипуляции мышью в HTML5
• Применять AJAX при использовании RESTful Web Services
• Идентифицировать требуемые Back-End технологии для REST и WebSocket с Java EE7
• Использовать Selectors и манипуляторы DOM для обработки документов с jQuery
• Обрабатывать события и ответы сервера AJAX с jQuery

Предварительная подготовка:

• Базовый опыт в любом языке программирования
• Базовые знания по концепциям веб-технологий

Программа курса:

Введение
Изучение целей курса. Установка среды.

Основы Веб-приложения
Создание приложений HTML5 в NetBeans. Выполнение страниц HTML и их анализ при помощи средств разработки браузера. Отделение CSS и контента JavaScript от страниц HTML. Выполнение Приложений HTML5 в NetBeans. Практика: Создание Веб-приложения HTML5 с NetBeans 8. Практика: Разделение ресурсов JavaScript и CSS.

Основы JavaScript
Написание кода JavaScript для объявления переменных, объектов, функций и массивов. Создание массивов JavaScript для хранения данных. Определение Объектов JavaScript как хранилищ пары “ключ-значение”. Доступ к свойствам объекта. Практика: Написание кода JavaScript для прохождения тестов в Jasmine.

Сочетание HTML5 и JavaScript в Веб-приложениях
Создание документов HTML5. Создание Форм HTML5 для запроса информации и её обработки. Проверка допустимости форм ввода HTML5 . Написание функций JavaScript для событий HTML5. Управление элементами HTML5 с использованием DOM. Практика: Написание кода JavaScript для изменения элементов документа.

JavaScript API
Проверка пользовательского ввода с помощью JavaScript и регулярных выражений. Обработка нескольких значений с использованием JavaScript Collections. Управление датами с испоьзованием JavaScript Date API. Практика: Создание приложения “meal-divider”. Практика: Расчет общего количества в зависимости от возраста.

Данные Веб-приложения
Преобразование Объектов к виду JSON Strings. Разбор JSON Strings внутри JavaScript Objects. Сохранение Objects при помощи JSON API , Cookies и Local Storage. Практика: Сохранение пользовательского ввода при помощи JSON API и Local Storage. Практика: Восстановление сохраненных данных, в момент загрузки страницы.

Стиль приложений, использующих CSS3 и JavaScript
Применение CSS-стилей к документам HTML. Использование возможностей CSS3 для добавления динамических стилей к элементам с событиями. Использовать Media Queries и медиа-данные, чтобы адаптироваться к различным экранам. Использование JavaScript, для добавления и удаления стилей из элементов. Практика: Написание правил CSS, для установления стилей элементов в документе.

Продвинутый JavaScript
Определение Функций. Создание замыканий (closures) и объяснение компоненты Variable Scope. Написание функций JavaScript в виде модулей. Создание прототипов (Prototypes). Создание взаимодействий вида Drag-and-Drop с использованием JavaScript. Создание таймеров и задержек JavaScript, для получения анимации в HTML. Использование объекта HTML5 Canvas для рисования на страницах. Практики: Создание холста (Canvas), интервалов, Drag and Drop и манипуляции мышью.

AJAX и WebSocket
Использование AJAX с JavaScript для запроса данных от сервера приложений. Применение AJAX при использовании RESTful Web Services . Использование вызовов AJAX для создания взаимодействия вида"Server Push" . Определение альтернатив AJAX для использования в устаревшем коде. Понимание компоненты AJAX Security. Использование компоненты WebSocket, для создания взаимодействия вида Real-time Client/Server. Определение требуемых Back-End технологий для REST и WebSocket с Java EE7. Практики: Создание одностраничного приложения, использующего RESTand a Tic-Tac-Toe Game Client с WebSocket.

Разработка приложений с jQuery
Добавление jQuery и библиотек UI jQuery к вашим проектам. Использование Selectors и манипуляторов DOM для обработки документов. Обработка событий с jQuery. Анимация элементов и применение эффектов в документе. Обработка ответов сервера AJAX.

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

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

Для удобства все инструменты разбиты на три группы:

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

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

Редакторы кода

Komodo Edit

Мини-версия полноценной среды разработки Komodo IDE по умолчанию предоставляет базовые функции редактора, а подключаемые расширения добавляют поддержку синтаксиса разных языков и полезные опции, например, компиляцию препроцессоров CSS.

Komodo Edit не является признанным лидером среди аналогичных продуктов, но свои функции выполняет отлично. Особенно хорош редактор для обработки XML.

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

Vim – расширенный вариант классического редактора текстов Vi, используемого в системах UNIX. Редактирование кода изначально не было его предназначением, но расширения и плагины довели его практически до совершенства. Существует забавная обучающая онлайн-игра, которая помогает освоить Vim, – Vim Adventures. Также начинающим будет полезна небольшая шпаргалка.

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

GNU Emacs

Еще один базовый редактор кода Linux-систем GNU Emacs сложнее, чем тот же Vi, но при этом мощнее и имеет большую функциональность:

• несколько режимов редактирования, синтаксическое выделение кода для разных языков;
• подробная документация и руководство для начинающих пользователей;
• поддержка кодировки Unicode;
• использование визуального интерфейса или диалекта Emacs Lisp для тонкой настройки рабочей среды;
• хороший отладчик;
• дополнительные удобства, например, почтовый клиент, планировщик;
• менеджер расширений.

Adobe Brackets

Относительно молодой кодовый редактор Brackets сделал основной упор на визуализацию и упрощение работы с CSS-препроцессорами. Проектирование веб-страницы прямо в браузере становится очень быстрым и легким делом. Brackets – отличное решение для программистов и дизайнеров, имеющих дело с пользовательскими интерфейсами и фронтендом в целом.

• визуализация HTML-кода и стилей, возможность просмотра изменений в режиме реального времени и мгновенного редактирования;
• работа с PSD-файлами, возможность импорта изображений без использования Adobe Photoshop;
• удобная компиляция CSS-препроцессоров.

Visual Studio Code

Многофункциональный, но компактный кодовый редактор VSC изначально был предназначен для обработки JavaScript и его расширений, но плагины позволяют добавить другие популярные языки, например, PHP и C#. Программа отлично поддерживает платформу Node.JS.

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

В редактор встроен отладчик кода.

Atom от GitHub

Текстовый редактор Atom хорош уже в базовой конфигурации, а дополнительные настройки могут сделать его идеальным.

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

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

• умное автодополнение;
• удобный файловый менеджер;
• разделение рабочей области для удобства анализа нескольких файлов благодаря многопанельному интерфейсу;
• удобные механизмы поиска внутри проекта.

Sublime Text 3

Sublime Text — это удобный и быстрый редактор, работать с которым одно удовольствие. Он кроссплатформенный, нетребовательный к ресурсам компьютера и легко расширяемый. Бесплатная базовая версия предоставляет всю необходимую функциональность:

• подсветку синтаксиса распространенных языков;
• автодополнение;
• множественное выделение (очень удобно!);
• фолдинг (сворачивание блоков кода);
• удобные комбинации горячих клавиш;
• возможность разделить рабочую область на несколько окон;
• широкие возможности кастомизации.

Платная лицензия стоит $80, но никаких новых функций у продукта не появится.

Для Sublime создано очень много плагинов. С их помощью можно легко добавить дополнительные возможности:

• отладку;
• темы оформления;
• поддержку языков.

Сравнение текстовых редакторов

Интегрированные среды разработки (IDE)

Eclipse

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

NetBeans

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

В программе есть предустановленный анализатор кода для языка Java, поддержка C++ и PHP. Для удобства веб-разработчика встроены современные инструменты обработки HTML5 и JavaScript, включая платформу NodeJS и фреймворк AngularJS.

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

Geany

Одна из самых легких и быстрых сред для веб-разработки. Geany обеспечивает удобную работу с HTML, XML, PHP и другими языками веб-программирования.

• поддержка и подсветка синтаксиса множества языков;
• фолдинг (сворачивание блоков кода);
• автодополнение и подсказки;
• сниппеты;
• удобная навигация;
• управление проектом;
• менеджер плагинов;
• система обработки кода от компиляции до выполнения.

Light Table

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

JetBrains

Здесь не одна IDE, а сразу несколько. Компания создает специализированные среды разработки для разных языков – выбирайте по вкусу:

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

Из недостатков — повышенная требовательность к ресурсам системы и цена (у всех продуктов есть бесплатный пробный период — 30 дней).

Сравнение интегрированных сред для веб-разработки

Облачные IDE

Множество десктопных приложений давно переместились в "облако", включая и IDE. Быстро растет популярность удобных и доступных облачных сред для веб-разработки. Переход на принципиально новую технологию хранения данных и организации работы облегчает столь широко используемый инструмент, как GitHub.

Cloud9

Программа Cloud9 полностью написана на языке JavaScript. Работу серверной стороны обеспечивает NodeJS. Эта IDE – настоящий рай для веб-разработчика, неудивительно, что ее быстро освоили фронтендеры и дизайнеры.

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

• Vim-режим;
• удобный версионный контроль (Git, SVN);
• встроенные инструменты для контроля качества CSS- и JavaScript-кода.

Codeanywhere

Одна из самых удобных облачных сред для веб-разработки – IDE Codeanywhere. Она работает практически на всех платформах, включая мобильные. Теперь разработчик может программировать там, где ему удобно.

Редактор понимает синтаксис базовых языков веб-программирования (HTML, CSS, JavaScript, PHP, SQL) и ряда других. Интегрированный Dropbox и SFTP-клиент позволяют обмениваться файлами с другими разработчиками и осуществлять резервное копирование.

Eclipse Che

Многопользовательская система Eclipse Che объединяет в себе среды для разработки и выполнения кода. Система поиска и установки плагинов позволяет настроить инструмент в соответствии с потребностями программиста.

Che представлена в двух конфигурациях. Многопользовательская версия способна обслуживать несколько изолированных друг от друга рабочих мест, а также управлять доступом пользователей с разными правами с помощью Permissions API. Аутентификация и регистрация новых пользователей контролируется механизмом KeyCloak. Для хранения пользовательских данных используется СУБД PostgreSQL. В однопользовательской версии эти компоненты отсутствуют.

Neutron Drive

Большинство сложных проектов применяют уже созданные и испытанные ранее решения. Так, облачная среда Neutron возникла на базе редактора кода Ace. Новая IDE имеет встроенный SFTP-клиент, что позволяет программисту легко изменять файлы на удаленном сервере и сразу же видеть внесенные изменения.

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

Orion

Orion – относительно молодой продукт, возникший на базе легендарной Eclipse Java IDE. Многолетний опыт мощного и проверенного инструмента был перенесен в облако, сохранив привычный интерфейс.

Основная сфера применения среды – разработка фронтенда, поэтому имеется хорошая поддержка HTML, CSS и JavaScript с различными надстройками.

На текущий момент работа над продуктом еще ведется: в скором времени можно ожидать появления новых функций и добавления других языков программирования.

Вступление

К счастью, есть более чем один способ написать приложение для мобильного телефона. Можно сделать сайт, упаковать его специальным образом, и вуаля, вот вам и приложение! Именно такой подход предлагает нам проект phonegap.com именно об этом методе и пойдет речь в этой статье.

Уверен что ни стоит обсуждать экономическую целесообразность данного подхода. Она на лицо. Да, знаний нужно больше чем у среднестатистического веб разработчика, но все же, это сайт! Это понятно! Это тот же HTML, это тот же броузер, тот же Javascript. Найти разработчика ни так сложно, как скажем “нативного”. А уж если умножить на кроссплатформенность данного решения, так и вообще может показаться что это панацея. Конечно, мы то с вами знаем, что ни какой “пилюли” не существует, но в ряде случае, это действительно best practic

Итак, мое рабочее задание звучало так: Разработать клиентское приложение, под ОС Android. Приложение — игра. Квест. Суть игры заключается в следующем: группа людей, желающих интересно отдохнуть, делятся на команды. Каждой команде дается по смартфону. В смартфоне приложение. Открываем приложение. Приложение соединяется с сервером и оттуда приходят вопросы. Для каждой команды они свои. Вопросы могут выглядеть как обычные вопросы с вариантами ответов, ну скажем Сколько лет городу Санкт-Петербург?, так и вопросы локации. Найдите парадный вход в инженерный замок. Команда двигается, находит вход, нажимает Мы на месте и координаты уходят на сервер. От сервера ответ, верно или нет. Есть также вопросы фотографии. Например Сфотографируйте себя на фоне инженерного замка. В сумме, все ответы оцениваются и в итоге одна из команд выигрывает, набирая больше очков. Вкратце все.

Шаг 1 — протитипы

В общем задание нам понятно. Предположим что техническое задание уже составлено. Что еще? Нужны прототипы. Вот они:

Шаг 2 — макеты

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

Шаг 3 — выбираем фреймворк

Возьмем Sencha Touch. Фреймворк сделан на подобие ExtJS. Большое количество классов. Компонуем их, настраиваем — получаем приложение. Доступ к HTML элементам есть, но на уровне фреймворка управлять элементами крайне не разумно. Грубо говоря, поменять стандартное визуальное отображение элементов крайне затруднительно. Зато данные от сервера получать в формате JSON одно удовольствие.

И наоборот. Jquerymobile это доступ к элементам, по сути расширенный Jquery. Добавляются теги к элементам. После загрузки фреймворк по этим тегам дополняет элементы стилями и другими элементами. Вот только подружить фрейморк с JSON данными от сервера у меня не получилось. Jquerymobile ждет от сервера html код. Безусловно можно получать JSON и его на стороне клиента преобразовывать в html код, что собственно и делает Sencha. Но это ни есть хорошая практика. Это идет в разрез с идеологией фреймворка. Возникает огромное количество проблем, решить которые крайне сложно.

Стоп. А зачем нам фреймворк? Что первый, что второй, по сути, это, так сказать, готовая элементная база, готовые решения, цель которых помочь вам сделать приложение (сайт) визуально похожим на нативное приложение. А нужно нам это? Нет. А как же PhoneGap? А что он, ему все равно, что вы используете. Ни где ни каких ограничений нет. Ну тогда давайте просто сверстаем приложение, как обычный сайт и дело с концом!

Шаг 4 — верстаем

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

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

В отличии от десктоп броузера, броузер мобильного телефона (вероятно ни всех) добавляет рамку к элементам, на которых установлен фокус. Подобная рамка, при наведении фокуса, есть по умолчанию в Google Chrome, в момент когда мы вводим данные в очередное поле . Лечится это аналогично.

И самый последний нюанс это position:fixed. И это действительно проблема, ибо универсальных решений тут нет. Все упирается в сами мобильные броузеры, они просто не поддерживают, или поддерживают но не полностью, такой функционал. Ни получается закрепить панели управления одним решением для всех случаев. К примеру, jquerymobile, до версии 1.1, в случае если броузер не поддерживает position: fixed, эмулировал скроллирование и динамически менял позицию закреплённых элементов, что в общем-то не придавала реалистичности и порой выглядело “ни айс”.

Вот по этой ссылке есть описание мобильных броузеров, которые поддерживают position: fixed
bradfrostweb.com/blog/mobile/fixed-position
а также есть ссылки на Javascript библиотеки, которые эмулируют работу position: fixed и процесса скроллирования. К сожалению работу ни одного из них удовлетворительной назвать нельзя.

В моем конкретном случае, мобильная платформа была указана как Android 2.3, а она поддерживает position: fixed, но при этом пользовательский zoom работать не будет, что по сути в приложении ни к чему. Указываем в заголовке viewport

И прописываем стили

Шаг 5 — эмуляторы

Очевидно, что верстать и смотреть в броузере, в окне монитора, затруднительно. Разрешение андроид приложение, скажем 320×480, а какие размеры экрана у вашего монитора? На помощь приходят эмуляторы. Самый простой эмулятор уже есть в вашем броузере! Если вы загрузите сверстанные страницы в Google Chrome и нажмете Ctrl+Shift+I, броузер покажет вам инструменты разработчика. В правом нижнем углу вы можете найти иконку с шестеренкой, нажимайте на нее. Далее выбираем вкладку Override и вот он, ваш эмулятор. Выбираем User Agent и ставим галочку Device Metric. На первом этапе этого будет достаточно.

А еще есть эмулятор от самого PhoneGap! emulate.phonegap.com
Называется Ripple. Ставится в виде дополнений к Google Chrome. Ура! Наши возможности резко увеличились. В случае, если в своем приложении вы используете библиотеку cordova для расширения функционала приложения, скажем для работы с камерой телефона или компасом, то Ripple даст вам возможность симулировать данные процессы.

Ну и раз пошла речь про эмуляторы, нельзя ни сказать и про эмулятор, который ставиться вместе с Eclipse, если следовать инструкции от Phonegap
docs.phonegap.com/en/2.2.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android
Этот эмулятор уже ведет себя совсем как настоящее устройство. Все ошибки, какие были найдены на этом эмуляторе, все аналогичным образом были найдены и на устройстве. Ну и конечно нужно сказать, что пользоваться этим эмулятором оперативно сложно. Долго грузится, трудно текст набирать и т.д. Подходит он для самой последней стадии. Когда ваше приложение уже работает прекрасно на всех других ранее перечисленных эмуляторах.

Шаг 6 — программируем

Хоть статья и для программистов, размешать весь код тут просто глупо. Опишу в общем. Программирование веб приложение, по сути, ни отличается от программирование небольшого сайта. Тут те же методы и подходы, но выполнены на Javascript. Тот же MVC, те же паттерны: синглетон, компановщик и т.д.

Вот фронт контроллер

* В javascript нет магических методов. Если скажем в PHP мы можем использовать __call, и вызывать App.SomeSome(‘ ’), то тут нужно будем писать App.Run(‘SomeSome’, ‘ ’)

Вот пример контроллера:

Вот небольшой пример модели

Вот пример представления

По сути, тут тоже самое, что и в случае, если бы сайт писался на PHP. За исключением фундаментального принципа, Javascript — асинхронный язык и без callback тут ни как (если не использовать специальные библиотеки конечно же)

Отдельно хочется остановится на нюансах, а именно работа с фотокамерой смартфона. Из коробки javascript не умеет этого делать. На помощь приходит библиотека Cordova, которую предлагает подключить PhoneGap. А вот ссылка, на описание работы с камерой телефона

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

Но и это оказалось еще не все. Метод getPicture возращает base64 закодированную картинку, а вот данные между сервером и клиентом передаются в виде запросов JSONP.
Очевидно что передать такое количество данных через GET запрос невозможно. Серверная часть, кстати, не помню говорил я или нет, на PHP. Да, не самое лучшее решение, про WebSocket можно забыть. Проксирование тоже не сделать. Вероятно, решение данной проблемы была одна из самых сложных. А решение нашлось следующее. Время идет и стандартные классы расширяются, добавляются новые методы. Так вот класс XMLHttpRequest обзавелся новыми событиями. Кроме стандартного onreadystatechange появилось также событие onload. Если обработчик ответа от сервера “повешать” на него, и в заголовке Content-Type указать application/x-form-urlencoded, то броузер будет делать кроссдоменный запрос методом POST, что, собственно нам и нужно. Вот пример

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

Столкнулся я также и с проблемой Same Origin Policy. Решение этой проблемы лежит на серверной стороне. В конфигурационных файлах прописывается разрешение на кросс доменный запрос и дело с концом.

Хочется также отметить, что в случае, если вам не нужны расширенные функции работы с телефоном: акселерометр, компас, камера, медиа и т.д. подключать библиотеку cordova не обязательно (а это примерно 300 килобайт). Геолокация, кстати, доступна и без нее.

Шаг 7 — отлаживаем

Вот наше приложение готово. Сверстано и прекрасно работает на эмуляторе Ripple (см. раздел про эмуляторы). Начинается самое интересное, а именно отладка на телефоне. Но сначала, попробуем запустить приложение на эмуляторе, в eclipse. Перед каждым запуском приложения на эмуляторе, система просит отчистить проект. Project -> Clean. Не забываем это делать. Нажимаем Run — поехали!

После загрузки эмулятора, в панели LogCat Eclipse будет огромное количество сообщений. Первым вопрос который возникает — какие наши? Для того, чтобы видеть только свои ошибки, и в частности, видеть сообщения которые приложение выводит в консоль console.log, нужно настроить фильтр. В панели LogCat, слева, есть отдельный блок, Saved Filters. Открыв ее, вы конечно увидите пустой список, ибо фильтров у нас пока нет. Нажимаем на плюсик и видим окно

Вводим в Log Tag web console, как на картинке и теперь Log консоль будет показывать сообщения от вашего веб приложения.

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

Начинаем изучать ошибку. Очевидно что ошибка вызывается в момент получения данных с сервером. Ошибка говорит что приходит статус 0. Начинаем искать решение в Google, и вот что находим
simonmacdonald.blogspot.ru/2011/12/on-third-day-of-phonegapping-getting.html
stackoverflow.com/questions/11230685/phonegap-android-status-0-returned-from-webservice

Делаем вывод: вероятно нужно добавить статус 0, как верный статус, для продолжения обработки ответа сервера. Ищем, где же это сообщения JSCallback и находим его в файле cordova.js на строке 3740 (cordova-2.1.0.js)

Пробуем заменить if (xmlhttp.status === 200) на if (xmlhttp.status === 200 || xmlhttp.status === 0) и вуаля — ни какого эффекта!

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

Почему смена Хеша, приводила к такой ошибке, для меня осталось загадкой. Если у кого какие будут мысли на этот счет — велком.

Шаг 8 — запускаем

Чтобы запустить приложение уже не посредственно на телефоне, достаточно войти в решим настройки, выбрать раздел Разработка и там взвести галочку напротив пункта Отладка USB. Далее, нажимая RUN в eclipse, среда определит что у вас подключен телефон к USB, а я надеюсь вы уже это сделали, и начнет запускать приложение уже на аппарате.