Пользователь
0,0
рейтинг
24 апреля 2011 в 21:49

Разработка → Разработка мобильных приложений на PhoneGap и jQuery Mobile



PhoneGap — это OpenSource платформа, позволяющая разрабатывать мобильные приложения на HTML, JavaScript и CSS под различные платформы (практически без изменения кода приложения) в их число входят: iOS, Android, Blackberry, WebOS, Symbian и Windows Mobile на подходе. Прелесть его в том, что он не требует навыков разработки под конкретную платформу. Вы пишете свое приложение на JavaScript, используете HTML и CSS для разметки. Вы пишете мобильное приложение как обычный сайт или веб-сервис.
Движок PhoneGap расширяет API браузера и добавляет следующие возможности: доступ к акселометру, доступ к камере (пока только фото), доступ к компасу, доступ к списку контактов, запись и прослушивание аудио файлов, предоставляет доступ к файловой системе, позволяет работать с разными HTML5 хранилищами localStorage, Web SQL и т.п а также позволяет безболезненно обращаться к любому кросс-доменному адресу.
Кроме платформы PhoneGap имеет, пока бесплатный, билдер приложений под все устройства в один клик.

jQuery Mobile


Думаю все знают, но напомню ещё раз. jQuery Mobile — это надстройка над jQuery, позволяющая безо всяких проблем разрабатывать мобильные веб сайты и мобильные веб приложения.

Если вы знаете HTML, JavaScript, CSS, jQuery и испытываете проблемы с Java, Objective-C и другими, но желаете попробовать свои силы в мобильной разработке, то эта статья для вас.

Мы будем создавать мобильное приложение под Android (iOS требует значительно больших усилий для тестового приложения: Mac Only, нужен сертификат разработчика) под названием Tumblr Reader (не хотел создавать ещё один хабраридер).

Установка пакета программ для разработки


Если у вас стоит Eclipse + ADT Plugin, то эту часть можно пропустить. Оригинальная статья.
Подробная статья.
1. Скачайте и установите Eclipse Classic
2. Скачайте и установите Java Platform (JDK)
3. Скачайте и установите Android SDK
Запустите SDK Manager, выберете все модули и установите их все (займет минут 20)
4. Установите ADT Plugin
5. Сконфигурируйте ADT Plugin — вам необходимо указать путь до Android SDK иначе ничего не получится
6. Скачайте последнюю версию PhoneGap (на момент написания она была 0.9.4)

Создание эмулятора Android


Откройте SDK Manager (он может открыть различные окна, закройте их) выберите Virtual devices, нажмите New…
Создайте эмулятор как показано на скришноте:


Важно: Необходим именно Android 2.2. Если вы под Windows и в имени пользователя есть не ANSI символы, то вам необходимо после создания виртуалки сделать следующее: переместите c:\Users\ВашИмя\.android\avd\Android-2_2.avd в какую-нибудь другую папку, например в c:\Android\Android-2_2.avd, откройте файл Android-2_2.ini и измените path= на соответствующий.

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


1. Запустите Eclipse в меню File выберите New > Android Project

Скриншот с официального туториала

2. В корневой директории проекта создайте 2 папки /libs и /assets/www
Из архива phonegap-0.9.4 скопируйте phonegap.jar в /libs
Выполните Git чекаут в /assets/www из репозитория: git://github.com/azproduction/phonegap-tumblr-reader.git или скачайте архивом из github.com/azproduction/phonegap-tumblr-reader/archives/master и распакуйте в /assets/www В репозитории готовое приложение, чтобы вам не пришлось копипастить из статьи.

3. Добавьте phonegap.jar в Build Path для этого нажмите правой кнопкой на корень проекта, выберите Properties, в списке выберите Java Build Path, выберите вкладку Libraries, нажмите Add JARs… и укажите путь до phonegap.jar


4. Откройте файл TumblrReader.java, который лежит в папке src/
4.1. Замените Activity на DroidGap
4.2. Замените setContentView() на super.loadUrl("file:///android_asset/www/index.html");
4.3. Добавьте import com.phonegap.*;


6. Откройте AndroidManifest.xml, допишите следующий код (он дает доступ к определенным ресурсам) нам нужен только android.permission.INTERNET:
<supports-screens
        android:largeScreens="true"
        android:normalScreens="true"
        android:smallScreens="true"
        android:resizeable="true"
        android:anyDensity="true"
        />
        <uses-permission android:name="android.permission.INTERNET" />

Если вы будете экспериментировать с АПИ, то добавьте все опции:

        <uses-permission android:name="android.permission.CAMERA" />
        <uses-permission android:name="android.permission.VIBRATE" />
        <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
        <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
        <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
        <uses-permission android:name="android.permission.READ_PHONE_STATE" />
        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.RECEIVE_SMS" />
        <uses-permission android:name="android.permission.RECORD_AUDIO" />
        <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
        <uses-permission android:name="android.permission.READ_CONTACTS" />
        <uses-permission android:name="android.permission.WRITE_CONTACTS" />   
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />   
        <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

в activity тег добавьте android:configChanges="orientation|keyboardHidden"


7. Запустите ваше приложение в эмуляторе: Run As > Android Application если вы сделали все правильно, то должен открыться эмулятор с вашим приложением.

Создание Tumblr Reader


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

Cкелет приложения index.html

Я не останавливаюсь на принципах создания jQuery Mobile страниц. Вы можете прочитать сами.
Создаем index.html в папке /assets/www
<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

Подключаем необходимые скрипты
    <head>
        <title>Tumblr Reader</title>
        <!-- Стили jQuery Mobile и наши  -->
        <link rel="stylesheet" href="libs/jquery.mobile.css" />
        <link rel="stylesheet" href="css/main.css" />

        <!-- jQuery & jQuery Mobile -->
        <script type="text/javascript" charset="utf-8" src="libs/jquery.js"></script>
        <script type="text/javascript" charset="utf-8" src="libs/jquery.mobile.js"></script>

        <!-- Скрипт phonegap -->
        <script type="text/javascript" charset="utf-8" src="libs/phonegap.js"></script>
        
        <!-- Это наш основной скрипт -->
        <script type="text/javascript" charset="utf-8" src="js/main.js"></script>
    </head>

В body добавляем jQuery Mobile страницу — «Список мелких картинок» aka Dashboard
        <!-- Список мелких картинок -->
        <div data-role="page" id="dashboard">
            <div data-role="header" data-position="fixed">
                <!-- По клику откроет страницу options -->
                <a href="#options" data-icon="gear">Options</a>
                <h1>Dashboard</h1>
            </div>

            <div data-role="content">
                <div class="ui-grid-b" id="dashboard-list">
                <!-- Сюда будут отрисовываться мелкие картинки -->
                </div>
            </div>
        </div>

При клике на мелкую картинку будет открываться страница с большой, добавляем страницу «Большая картинка»
        <!-- Большая картинка -->
        <div data-role="page" id="dialog">
            <div data-role="header">
                <!-- Кнопка Назад -->
                <a data-rel="back" data-icon="back">Back</a>
                <h1>Image</h1>
                <!-- Ссылка на полную версию - по клику откроется в браузере -->
                <!-- about:blank будет заменяться на соответствующую ссылку -->
                <a href="about:blank" data-icon="search" data-theme="b" id="full-image">Full</a>
            </div>

            <div data-role="content">
                <!-- about:blank будет заменяться на путь к большой картинке -->
                <p><img src="about:blank" /></p>
            </div>
        </div>

По умолчанию картинки будут загружаться с design.tumblr.com (первое, что пришло в голову), добавим страницу настроек, чтобы имя можно было менять:
        <!-- Настройки -->
        <div data-role="page" id="options">
            <div data-role="header">
                <h1>Options</h1>
            </div>

            <div data-role="content">
                <div data-role="fieldcontain">
                    <label for="name">Tumblr user:</label>
                    <!-- Имя Tumblr пользователя -->
                    <input type="text" name="name" id="options-name" value="" />
                </div>
                <!-- По клику сохранится имя и откроется "Список мелких картинок" -->
                <a data-role="button">Ok</a>
            </div>
        </div>

Полная версия github.com/azproduction/phonegap-tumblr-reader/blob/master/index.html

Скелет готов, добавим немного css (файл css/main.css)
#dashboard-list div,
#dialog p {
    text-align: center;
}

Логика приложения js/main.js

Сперва изучим Tumblr API в разделе JSON output немного описан формат JSON: по ссылке
http://%user%.tumblr.com/api/read/json
нам придет JavaScript вот такого формата:
var tumblr_api_read = {/* тут какие-то данные ... */}

Жаль, что не чистый JSON(P), но у нас есть jQuery.getScript, которая все разрулит за нас. Больше ничего о формате неизвестно. По исходнику стало понятно, что tumblr_api_read.tumblelog.title это заголовок блога, а tumblr_api_read.posts это массив постов формата:
[{
   'type': 'photo',
   'photo-url-1280': 'http://...',
   'photo-url-250': 'http://...',
   'photo-url-75': 'http://...',
   /* и ещё что-то не нужное для нас */
}, ...]

Мы будем использовать только эти поля, поэтому остальные не описываю.

Рендер для отрисовки списка картинок

Каждая картинка будет вида:
<div class="ui-block-a">
    <a href="#dialog">
        <img data-full-src="http://..." data-big-src="http://..." src="http://..." />
    </a>
</div>

Код рендера:
/**
 * Отрисоывывает тумбнайлсы
 *
 * @param {Object} posts
 *
 * @returns {String}
 */
var render = function (posts) {
    var view = '',
        // Используем правильный индекс т.к.
        // Берем не все посты
        index = 0;

    // Собираем
    posts.forEach(function(post){
        // Нужны только фотографии
        if (post.type !== 'photo') {
            return;
        }

        view +=
        '<div class="ui-block-' + suffix[index % 3] + '">' +

            // При клике автоматом откроется страница dialog
            '<a href="#dialog">' +
                '<img data-full-src="' + post['photo-url-1280'] + '" data-big-src="' + post['photo-url-250'] + '" src="' + post['photo-url-75'] + '" />' +
            '</a>' +
        '</div>';

        index++;
    });
    
    return view;
};

Загрузчик данных с Tumblr API

Загрузчик дергает URL
http://%user%.tumblr.com/api/read/json
и получает соответствующие данные, используя данные мы отрисовываем список картинок.
/**
 * Загружает и отрисовывает контент
 *
 * @param {String} [user='tumblr']
 */
var load = function (user) {
    user = user || 'tumblr';

    // Включаем крутилку
    $.mobile.pageLoading();

    // Добавляем на всякий случай
    var timeoutId = window.setTimeout(function () {
         $.mobile.pageLoading(true);
    }, 3000);
    
    // Загружаем
    $.getScript('http://' + user + '.tumblr.com/api/read/json', function (data, status) {

        // Если все хорошо
        if (status === 'success'){
            // Меняем заголовок
            $dashboard.find('h1').text(tumblr_api_read.tumblelog.title);

            // Рендерим контент
            $('#dashboard-list').html(render(tumblr_api_read.posts));
        } else {
            // Что-то не так
            alert('Error occurred while loading ' + user);
        }

        // Останавливаем крутилку
        $.mobile.pageLoading(true);

        // Убиваем таймер
        window.clearTimeout(timeoutId);
    });
    
};

Инициализатор приложения

Он инициализирует имя пользователя из localStorage, выполняет предварительную загрузку и делает другие операции по мелочи.
var init = function () {
    // Если 1 раз инициализировался, не вызываем повторно
    if (init.called) {
        return;
    }
    init.called = true;

    // Инициализация блоков
    $dashboard = $('#dashboard');
    $dashboardList = $('#dashboard-list');
    $dialogImg = $('#dialog').find('img');
    $fullImg = $('#full-image');
    $options = $('#options');
    $optionsName = $('#options-name');

    // Клик на любой тумбнайл
    $dashboardList.delegate('a', 'click', function () {
        var $img =  $(this).find('img');

        // Меняем опции диалога
        $dialogImg.attr('src', $img.data('big-src'));
        $fullImg.attr('href', $img.data('full-src'));
    });

    // Загружаем или берем значение по умолчанию
    currentUser = window.localStorage.getItem("tumblr-reader-user") || 'design';

    // Закидываем в опции
    $optionsName.val(currentUser);

    // Нажатие кнопки ОК в опциях
    $options.find('a').click(function () {
        var newUser = $optionsName.val();

        // Если пользователь поменялся
        if (currentUser !== newUser) {
            // Меняем текущего пользователя
            currentUser = newUser;

            // Сохраняем опции
            window.localStorage.setItem("tumblr-reader-user", currentUser);

            // Загружаем данные с тумблера
            load(currentUser);
        }

        // Переходим на главную
        $.mobile.changePage('#dashboard');
    });

    // Первичная загрузка
    load(currentUser);
};
    
init.called = false;

// Девайс готов, этого события нет в браузере
document.addEventListener("deviceready", init, true);
    
// Оставляем для отладки в обычном браузере
$(init);

Исходник main.js: github.com/azproduction/phonegap-tumblr-reader/blob/master/js/main.js

Теперь наше приложение полностью готово и его можно запустить в Эмуляторе Run As > Android Application, если вы сделали мелкую правку и не хотите пересобирать приложение просто откройте index.html в любом WebKit браузере.

Собираем приложение под все платформы в PhoneGap Build


1. Вам необходимо отправить заявку на странице build.phonegap.com (мне ответ пришел через 5 минут)
2. На ваш почтовый адрес придет письмо с beta code используйте его в build.phonegap.com/people/sign_up
3. Как только вы авторизовались зайдите на build.phonegap.com/apps
4. Выберите опцию upload an archive or index.html file
5. Упакуйте содержимое /assets/www в .zip и отправьте архив, вместо архива можно использовать мой git репозиторий
6. Жмем Create, ждем немного пока PhoneGap Build собирает приложение под все платформы
Теперь ваше приложение доступно для скачивания build.phonegap.com/apps/9296 (моя сборка)

Ссылки


1. Если вам лень собирать и что-либо качать вы можете посмотреть приложение онлайн
2. Скачать готовое приложение под Android, webOS, Symbian можно тут (нужна регистрация в PhoneGap Build) iOS требует сертификат, Blackberry требует особых имен файлов поэтому их нет.
3. Скачать без регистрации Android 1 (Сборка PhoneGap Build требует лишних прав), Android 2 (ручная сборка требует только android.permission.INTERNET), webOS, Symbian
4. Репозиторий Tumblr Reader на GitHub

Документация


1. Документация PhoneGap
2. Вики PhoneGap: Android Eclipse Quickstart
3. API Tumblr
4. jQuery Mobile Docs

Я продемонстрировал простое приложение, которое может работать и как веб-страница, вы можете попробовать создать что-то более сложное, использующее API телефона. Предложения, пожелания, критика приветствуется!
Mikhail Davydov @azproduction
карма
449,5
рейтинг 0,0

Похожие публикации

Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (47)

  • +21
    >Если вы знаете HTML, JavaScript, CSS, jQuery и испытываете проблемы с Java, Objective-C и другими
    то подумайте еще раз, возможно разработка под мобильные платформы не ваше призвание.
    • +4
      Java, Objective-C это всего лишь инструменты для создания приложений. Клиентские веб разработчики тоже способны делать мобильные приложения не худшего качества — PhoneGap дает им прекрасную возможность.
      • +1
        Именно — это всего лишь инструменты, и мне непонятно позиция «я всю жизнь рубил деревья топором, потому гвозди забивать буду тоже топором»
        • +8
          В умелых руках топором можно и бомбардировщики сбивать. Я думаю, что веб-инструменты способны обеспечить качество мобильных приложений. В нашем деле главное качество и не важно чем оно будет обеспечено.
          • +8
            Если главное — качество, то тем более непонятно зачем такие инструменты.
            Сходу можно назвать минусы:
            1. никакущяя производительность.
            2. будет жрать память
            3. ненативный вид.
            4. отсутствие плавных анимаций, еффектов итд — того, чем все платформы так любят сейчас мерится
            5. отсутствие поддержки специфических для каждой платформы фич.

            можно продолжить дальше.
            • +4
              Я вот веб-разработчик. Если мне понадобится какая-нибудь мелкая утилитка для моего андроидофона, я не буду тратить неделю, чтобы набросать ее на Java, а сделаю за день на том, что мне хорошо знакомо.
              • +19
                С вашим случаем на 100% согласен.
                Если далеко идти за молотком один маленький гвоздь можно забить и топором.
                • 0
                  Есть еще вариант — вдруг молоток надо каждый раз сертифицировать ( проходить проверку в аппСторе).

                  В этом случае (если срочно) — только общедоступный топор.
            • +5
              Согласен с вами, в идеале лучше писать нативные приложения, но
              1. во многих случаях производительности браузера будет достаточно,
              2. если не нужна работа в фоне, то для одного приложения памяти вполне хватит,
              3. у веб-приложений вполне себе нативный вид: dev.sencha.com/deploy/touch/examples/kitchensink/ — потыкайте там в темы. Открывать в Chrome или Safari,
              4. плавные анимации там же,
              5. да, это аргумент, но если нужно сделать приложение под обе платформы, то важны не специфические фичи, а переносимость кода.
              • –3
                не в бровь, а в глаз, браво!
              • 0
                загрузил линк в хроме, удивился что все довольно неплохо выглядит. Потом зашел с айфона и понял, что все намного хуже, чем я мог представить.
                Простейшие анимации нереально тормозят, «нативный вид» почемуто отдает китайскими айфонами, производительности хватает только на то чтоб с УЖАСНЫМИ тормозами переключать елементы интерфейса. А что будет, если кроме интерфейса будет еще исполнятся хоть какаято логика?

                • 0
                  Ну с нативностью — это я приукрасил немного, но на айфоне контролы выглядят довольно прилично — большинство примеров я бы с первого взгляда не отличил от нативных, хотя некоторые и не совпадают с нативными, и анимация не тормозит (iPhone 4), на андроиде корявенько немного (наверное, из-за другого разрешения экрана контролы совпадают не пиксель-в-пиксель), но тоже тормозов не заметил — всё довольно живенько (LG Optimus Speed).
                  • +1
                    ну… какбы остается несколько вариантов
                    1. Ждем, когда умрет iPhone 3G и слабенькие андроиды (наверное год-полтора, а для андроидов еще дольше)
                    2. Забиваем на юзеров с прошлогодними телефонами — пускай у них тормозит
                    3. пишем нативные апп.
                    • +2
                      iPhone 3G уже присмерти — у меня на нём тормозит всё, включая интерфейс.
                      Некоторые нужные (нативные) программы уже не работают — молча вылетают сразу после запуска; видимо, памяти не хватает.
                      Нативная программа Meebo тормозит намного больше, чем веб-приложение Meebo :)
            • 0
              Вот например, достаточно не плохо pattern.dk/sun/
      • +3
        Начнем с того, что люди которые знают jQuery не могут называться людьми которые знают JavaScript. Это раз. Два, PhoneGap подходит только для создания «брэндового» приложения на коленке. Почему на коленке? Потому, что вменяемый заказчик отдаст это на аутсорс, а у ребят которые будут делать приложения уже есть десяток шаблонов для такого рода приложений. Не говоря уже о том, что PhoneGap медленный словно слоупок и проигрывает TitaniumApp практически во всем.
  • +5
    Теперь каждый может написать свое говно приложение для App Store!
    • 0
      Как впрочем и для остальных маркетов.
    • 0
      Не каждый говнописатель готов выложить 99$ за каждое приложение в App Store плюс не все проходят модерацию, вобщем качество достойное. Вот с Android Market не знаю какая ситуация.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Без аккаунта разработчика вы не скомпилируете приложение в Phone Gap, так как у вас не будет сертификатов. 99$ нужно заплатить один раз и тогда вы сможете год хоть миллион свои гавноприложений из PhoneGap публиковать. Только многие из них не пройдут проверку (особенно это касается интерфейса, он должен быть маквей, про это в правилах публикации отдельный пункт).
  • +1
    В последнем релизе JS-фреймворка QooXdoo разработчики начали экспериментировать с виджетами, заточенными под мобильные браузеры и в доках к релизу указали «Basic PhoneGap support». Надо будет пощупать.
  • 0
    Мануалы для мануалистов. Теперь и для Open Sourse)
  • +1
    Попробовал установить на андроид, и сразу передумал, когда увидел сколько он требует прав доступа. Это никуда не годится.
    • 0
      А под IOS не пробывали?
      • 0
        У меня нет возможности. Я считаю что требовать GPS и чтение SMS и ещё много всего для тестовой программы, которая показывает картинки — перебор. Я не говорю что здесь вирус, просто технология PhoneGap Build не понятна.
        • +1
          Вот ручной билд требует только android.permission.INTERNET
    • 0
      Честно говоря ему нужно только гонять данные по сети, никаких фичей телефона ему не надо. Видимо PhoneGap Build требует все что есть по умолчанию. Пересоберу руками.
  • +1
    В чём потайной смысл так сильно использовать data-атрибуты вместо классов? Кажется, классы подходят, как нельзя кстати?

    <div data-role="page" id="dialog">
    	<div data-role="header">
    		<!-- Кнопка Назад -->
    		<a data-rel="back" data-icon="back">Back</a>
    		<h1>Image</h1>
    		<!-- Ссылка на полную версию - по клику откроется в браузере -->
    		<!-- about:blank будет заменяться на соответствующую ссылку -->
    		<a href="about:blank" data-icon="search" data-theme="b" id="full-image">Full</a>
    	</div>
    
    	<div data-role="content">
    		<!-- about:blank будет заменяться на путь к большой картинке -->
    		<p><img src="about:blank" /></p>
    	</div>
    </div>
    

    ===>

    <div class="page" id="dialog">
    	<div class="header">
    		<!-- Кнопка Назад -->
    		<a rel="back" class="back">Back</a>
    		<h1>Image</h1>
    		<!-- Ссылка на полную версию - по клику откроется в браузере -->
    		<!-- about:blank будет заменяться на соответствующую ссылку -->
    		<a href="about:blank" class="search" id="full-image">Full</a>
    	</div>
    
    	<div class="content">
    		<!-- about:blank будет заменяться на путь к большой картинке -->
    		<p><img src="about:blank" /></p>
    	</div>
    </div>
    


    rel, кстати, валиден и без data
    • 0
      C data-аттрибутами работает jQuery mobile.
    • +1
      (голосом Йоды) Смысл тайный в цифре 5 кроется…
    • 0
      Это особенность jQuery Mobile. jQM восновном предназначен для допиливаяния существующих веб-страниц. Разработчики предполагают, что мы не хотим портить имеющиеся атрибуты (class) поэтому они используют data- атрибуты для определения ролей элементов на странице.
  • –2
    Мда, выкладывайте на маркет. Посмотрите какие рейтинги получит ваше приложение.
    Поставил и что я вижу:
    — Смена ориентации экрана при просмотре картинки — прыгает на главную страницу.
    — Просмотр картинки — картинка занимает 10% площади экрана и pinch-to-zoom не работает, нет стандартных zoom controls. Я уж не говорю про листалку сдвигом пальцев с права на лево.
    Я расцениваю это как издевательство над пользователем и более одной звезды программа на маркете бы не получила.
  • 0
    Скажите, а зачем приложению столько разрешений? И смс получать, и подробную информацию о местоположении.
    • 0
      Ответил выше. Этот билд требует только android.permission.INTERNET
    • 0
      Если вы про AndroidManifest.xml. Я код взял из туториала, подумал мало ли кто будет крутить АПИ телефона и может наткнуться на неожиданную ошибку. Добавлю примечание в статью.
  • +1
    Кросс-платформенность не есть благо как таковое.
    Пользователь, выбирая тот или иной телефон, фактически обозначает свои предпочтения. В т.ч. — к интерфейсу и способу работы с устройством. Но дело даже не в привычности иконок и построении интерфейса. Гораздо важнее — соблюдение идеологии мобильной платформы. Стандартные сценарии использования мобильного устройства сильно различаются у пользователей iOS, WM & Android.
    Даже если вы пишите какое-либо маленькое приложение, подумайте несколько раз, стоит ли экономить на нормальной разработке и использовать подобные кросс-платформенные решения.
    • +2
      Для разработчика — ещё какое благо!
      Представьте себе какой-нибудь сервис, который доступен через мобильные клиенты (скажем, Foursquare). На начальном этапе денег/времени/ресурсов очень не хватает (хотя лишними они не бывают не только на начальном этапе, но и вообще никогда :)). Постановка задачи: нужно написать клиентское приложение под распространённые мобильные платформы. И понеслось: Objective-C для iPhone, Java с Android SDK для Android, Java с BlackBerry SDK для BlackBerry, C++ с Qt для Symbian, на подходе C# для WP7. Разработчики смотрят на это дело, после чего обхватывают голову руками и долго, протяжно, с чувством: «Ой бляяяяяя.....»
      Или берут кросс-платформенный фреймворк и покрывают их все за один присест.
      • 0
        Послушайте меня внимательно.
        То, что в проекте на разработку потрачено меньше времени — это еще не благо для проекта в целом. Это просто на написание кода потрачено меньше времени. Но проект в большинстве стучаев состоит не только из написания кода. Будет ли это хорошо для результата — вот это вопрос! Даже из этого обсуждения видно, что всё равно гладкой работы под все без исключения устройства такая система не даёт, всё равно возникают проблемы на разных устройствах, и надо всё тестировать и проверять.
        Но моя мысль была даже не об этом. Такое упрощение программирования хорошо только в том случае, если речь идёт о некоей библиотеке интерфейса, резализующей, к примеру, API социального веб-ресурса, тогда да, скорее всего, кросс-платформенность в этом случае будет полезна. Ну, или написание какого-нибудь специфического драйвера over-HTML. Т.е. в тех случаях, когда не затрагивается взаимодействие с пользователем.
        Если же продукт непосредственно взаимодействует с пользователем, то тут простая кросс-платформенность — зло прямое. Ибо кросс-платформенность подразумевает, что продукт будет выглядеть одинаково на всех мобильных платформах, а это плохо. У каждой платформы свои особенности интерфейса, но кроме этого, свой типичный профиль использования. Т.е. пользователи разных мобильных платформ используют их для решения разных задач. Если приложение реализует нечто большее, чем «Hello world!», то надо прорабатывать сценарии взаимодействия, а они для каждой мобильной платформы скорее всего окажутся разными. Более того, после проработки сценариев вполне может оказаться, что для какой-нибудь платформы и нет необходимости реализовывать данное приложение! А для другой — маст хев!
        Можно ли не прорабатывать сценарии использования? Вам решать… Это зависит от того, насколько хорошего результата вы хотите добиться своим продуктом. Если вам интересно просто написать код, чтобы написать код — то сценарии не нужны. А если вы хотите заработать денег и выбиться в лидеры, то без этого не обойтись.
        • 0
          «Да-а-а, учитель....»

          Если стартапер будет с самого начала делать «как правильно» (прорабатывать сценарии, разбираться с платформо-специфичным фреймворком, писать нативное приложение под каждую платформу, ...), то он имеет все шансы или не запустить свой сервис вообще, или значительно сузить охват аудитории (ограничив набор платформ). Или вообще сдать позиции другому (с похожей идеей), который не заморачивался «как правильно». Почитайте классиков (того же Кавасаки): продукт надо выводить на рынок быстро (внимание: это не значит, что нужно выводить на рынок сырой продукт).
          И дело даже не столько в том, чтобы опередить конкурентов, а в том, что понять потребность рынка можно только продуктом. Никакие расчёты и исследования этого не заменят. Поэтому идеальный вариант в этом случае: быстро сделать работающий прототип, запустить, посмотреть на результат — и уже после того, как продукт «пошёл», заморачиваться (или не заморачиваться) нативными приложениями.
          Пока один будет делать «как правильно», потратит год и в итоге его сервис не пойдёт, второй 3-4 раза проведёт «разведку боем», нащупает работающую идею и уже после этого сделает «как надо».

          Отдельное спасибо за «кросс-платформенную библиотеку для API социального ресурса». Единая библиотека для Obj-C, Java, C++ и C# — это, должно быть, будет очень хорошая библиотека :)
          Особенно с учётом того, что подобное API в большинстве случаев — банальный набор REST/JSON-запросов, и куда проще реализовать соответствующий модуль нативно для каждой платформы, чем прикручивать костылями какой-нибудь JavaScript/Lua (на котором, скорее всего, она и будет реализована).
          • 0
            Ваш пример утопичен ровно в той же степени, что и мой. В некоторых случаях нет денег на повторый выпуск продукта. И в этом плане гораздо правильнее на начальном этапе определиться с приоритетной платформой и сосредоточить усилия на выпуске одного продукта, для одной платформы и сделать его хорошо. А уже потом прорабатывать варианты для других платформ.

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

            Вы пропагандируете подход всех китайско-тайваньских производителей телефонов: как можно быстрее заимплементить какую-либо фичу и выкинуть продукт на рынок. Такие продукты интересны гикам, но не массовому потребителю. Многие ли помнят сейчас HTC Universal? Один из самых-самых первых девайсов с поддержкой сетей 3G и функцией видео-вызова. Ну, сделали его, продали какие-то слёзы (хотя я тут видел мужика в тролейбусе с этим девайсом). Всех победили? Нет. Зато через много лет пришел Стив Джобс и сказал: «Ребята, вот девайс с прекрасно работающей функцией видео-вызова — iPhone 4!» И все iSheep-еры бросились в магазины.
            Безотносительно религиозности пользователей яблочной продукции, этот пример повторяет старый анекдот про двух быков — молодого и зрелого. "… нет, мы пойдем медленно-медленно и поимеем ВСЁ стадо!"

            Поэтому я и говорю, что кросс-платформенность, в своем понятии «быстро-быстро наштампуем приложений под все платформы» — это зло! Причем, не открытое зло, а зло, способное убить проект наиболее изощрённым способом — когда продукт уже либо готовится к выпуску, либо уже выпущен, т.е. когда уже поздно вносить кардинальные изменения. Я уже не раз лично сталкивался с проектами, которые когда-то были сделаны именно по этому принципу (быстренько портируем), но теперь находятся в состоянии стогнации, ибо уже упёрлись в ограничения, обусловленные использованием кросс-платформенных систем, а переписывать заново с нуля в native code уже никто не хочет или не может.

            Короче, давайте закончим этот спор. Я говорю о том, что кросс-платформенность это вещь, которой надо пользоваться с большой осторожностью, и что она несёт в себе вполне определённые риски (про что совсем нет упоминания в статье топикстартера), а вы пытаетесь аргументировать, что кросс-платформенность — это быстро, и это главное. Думаю, каждый останется при своем мнении…
            • 0
              >Вы пропагандируете подход всех китайско-тайваньских производителей телефонов: как можно быстрее заимплементить какую-либо фичу и выкинуть продукт на рынок. Такие продукты интересны гикам, но не массовому потребителю.

              Вы плохо читали то, что я написал. Или просто не понимаете, о чём я говорю.

              >Я говорю о том, что кросс-платформенность это вещь, которой надо пользоваться с большой осторожностью, и что она несёт в себе вполне определённые риски (про что совсем нет упоминания в статье топикстартера), а вы пытаетесь аргументировать, что кросс-платформенность — это быстро, и это главное.

              И снова я убеждаюсь в своём мнении: вы не поняли основной мысли. Не говоря уже о том, что я полностью разделяю вашу позицию «кросс-платформенность это вещь, которой надо пользоваться с большой осторожностью, и что она несёт в себе вполне определённые риски» (которая при этом никак не противоречит тому, о чём говорю я).

              Если вам показалось, что я вижу в мобильных кросс-платформенных фреймворках этакую «серебряную пулю» — то вам это действительно показалось. Однако у них есть определённая ниша. Доволно узкая, но есть.

              В общем, давайте действительно на этом закончим.
  • 0
    Попробовал поставить на Nokia 5800 — не работает. Открывается страница без скриптов и стилей.
  • 0
    Что-то не получается взлететь в простом приложении с русским языком, все везде в UTF8. в свойствах проекта-тоже, а все равно кракозябры
  • 0
    Приложение вылетает при запуске. Делал все по инструкции
  • 0
    An internal error occurred during: «Launching HelloPhoneGap».
    java.lang.NullPointerException

    При запуске выдаётся такое сообщение. В чём может быть дело? Всё делал в точности как в статье, никаких «пустых ссылок» не нашёл. Жаль, что не показывает где конкретно проблема — файл и номер строки.
  • 0
    Кто работал с phonegap, можно ли в нем открывать 2-е окно браузера фоном и дергать из него данные?

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