Разработка плагина для PhoneGap

    В настоящее время развитие кроссплатформенной разработки мобильных приложений набирает всё большие обороты. В этой статье я бы хотела обратить внимание на еще одно средство для реализации таких приложений — PhoneGap. Это бесплатный фреймворк с открытым исходным кодом для создания мобильных приложений.

    PhoneGap позволяет создавать iOS, Android, Windows Phone, BlackBerry, Bada, Symbian, webOS приложения на HTML с использованием JavaScript. Количество скачиваний данного фреймворка уже привысило 1 миллион, а количество разработчиков достигает 400 000.



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

    Для начала вам следует скачать PhoneGap на официальном сайте. В момент написания статьи его последняя версия была 2.0.0. Не будем заострять внимание на создании проекта, данный процесс описан здесь. В качестве платформы для разработки я выбрала Android.

    Для начала приведу пример уже существующего плагина для запуска видеокамеры:

    $('#makeVideo').click(function() {
    	navigator.device.capture.captureVideo(captureSuccess,
    		captureError, {
    			limit : 1
    		}
            );				
    	function captureSuccess(mediaFiles) {
    		console.log("Capturing video successfully finished");	
    	}
    	function captureError(error) {
    		console.log("Video capture error + " + error.code);
    	}
    });
    

    При создании своего собственного плагина необходимо начать с написания java класса:

    public class IntentPlugin extends Plugin {
    …
    }
    

    Здесь создадим несколько простых методов, которые будут срабатывать по нажатию кнопок в нашем phoneGap приложении (они могут быть как с параметрами, так и без них).

    Метод запуска фотокамеры:

    private void openPhotoCamera() throws IOException {
    	Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
    	this.cordova.getActivity().startActivity(intent);
    }
    

    Метод запуска браузера:

    private void openBrowse(String url) throws IOException {
    	Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
    	this.cordova.getActivity().startActivity(intent);
    }
    

    Метод запуска карты:

    private void openMap(String url) throws IOException {
    	Intent intent = new Intent(android.content.Intent.ACTION_VIEW, Uri.parse(url));
    	this.cordova.getActivity().startActivity(intent);
    }
    

    Далее следует создать перегруженный метод:

    @Override
    public PluginResult execute(String action, JSONArray args, String callbackId) {		
    	PluginResult.Status status = PluginResult.Status.OK;
    	String result = "";
    	try {
    		if (action.equals("makePhoto")) {
    			openPhotoCamera();
    		} else if (action.equals("lookAtBrowse")) {
    			openBrowse(args.getString(0));
    		} else if (action.equals("lookAtMap")) {
    			openMap(args.getString(0));
    		} else {
    			status = PluginResult.Status.INVALID_ACTION;
    		}
    		return new PluginResult(status, result);
    	} catch (JSONException e) {
    		return new PluginResult(PluginResult.Status.JSON_EXCEPTION);
    	} catch (IOException e) {
    		return new PluginResult(PluginResult.Status.IO_EXCEPTION);
    	}
    }
    

    где строки «makePhoto», «lookAtBrowse» и «lookAtMap» передаются нам из JavaScript файла.

    На данном этапе всё выглядит давольно просто. Далее необходимо включить созданный плагин в файл config.xml, который находится в res/xml. Это делается следующим образом:

    <plugin name="IntentPlugin" value="com.ruswizards.phonegapplugin.IntentPlugin"/>
    

    В новом JS файле создадим объект класса IntentPlugin:

    function IntentPlugin() {
    };
    if(!window.plugins) {
        window.plugins = {};
    }
    if (!window.plugins.intentPlugin) {
        window.plugins.intentPlugin = new IntentPlugin();
    }
    

    Рассмотрим процесс обращения к данному объекту на примере создания одной функции:

    IntentPlugin.prototype.makePhotoFunction = function(url) {
        cordova.exec(null, null, "IntentPlugin", "makePhoto", [url]);
    };
    

    Теперь при вызове makePhotoFunction("") мы будем обращаться к методу openPhotoCamera().
    То же самое и для остальных двух функций:

    IntentPlugin.prototype.lookAtBrowseFunction = function(url) {
        cordova.exec(null, null, "IntentPlugin", "lookAtBrowse", [url]);
    };
    IntentPlugin.prototype.lookAtMapFunction = function(url) {
        cordova.exec(null, null, "IntentPlugin", "lookAtMap", [url]);
    };
    

    В файл, где данные функции будут вызываться, следует добавить:

    <script type="text/javascript" charset="utf-8" src="intentPlagin.js"></script>
    

    Вот всё и готово, теперь мы можем вызвать соответствующие функции.
    Добавим в тело файла 4 кнопки:

    <a id="makeVideo" data-role="button">Create video</a>					
    <a id="makePhoto" data-role="button">Create photo</a>			
    <a id="lookAtBrowse" data-role="button">Open browse</a>
    <a id="lookAtMap" data-role="button">Open map</a>
    

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

    $('#makePhoto').click(function() {
    		window.plugins.intentPlugin.makePhotoFunction("");		
    });	
    $('#lookAtBrowse').click(function() {
    	window.plugins.intentPlugin.lookAtBrowseFunction("http://www.google.com");				
    });	
    $('#lookAtMap').click(function() {
    	window.plugins.intentPlugin.lookAtMapFunction("geo:52.431198,31.004899");			
    });
    

    Итак, всё работает! Надеюсь эта статья оставила положительное впечатление, а также дала некоторую полезную информацию о написании приложений на PhoneGap.
    Rus Wizards
    Компания

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

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 21

      0
      Мобильное Приложение кроме API для доступа к функциям телефона должно иметь интерфейс, распознавание жестов и еще много чего, что в Phonegap нету. Sencha Touch, если полностью интегрирует в себя API, выглядит более правильным, а главное быстрым решением. Я думаю те, кто создавал реальные приложения на HTML5, со мой согласятся.
        +2
        PhoneGap и Sencha Touch — разного рода фреймворки и не совсем корректно их сравнивать.

        PhoneGap позволяет создавать именно приложения для платформ: скомпилированные и выложенные в нужные сторы-маркеты, при этом дает доступ к внутренним API устройств: камере, телефонной книге etc., которые недоступны из HTML5 API.

        Sencha Touch — это набор контролов, анимаций etc., то есть это больше интерфейсный фреймворк.

        Если и сравнивать Sencha — то с jQuery Mobile.
          0
          смотрите мой комментарий ниже
          +2
          Вы сравниваете две совершенно разные вещи.

          Sencha Touch — JS-фреймворк для написания мобильных веб-приложений под современные вебкит-браузеры.

          PhoneGap — wrapper для создания гибридных приложений и в своей основе имеет веб-приложение, которое может быть написано на Sencha Touch, JQuery Mobile или же на чем угодно другом.
            0
            А по-моему это вы немного отстали от жизни :)
            Sencha Touch как раз и предназначен для гибридных приложений, умеет паковать native приложения — пруф
            И имеет API для работы с железом — пруф
            А еще есть что-то типа UI Designer — линк

            А jQuery Mobile, к сожалению, не пригоден для жизни вообще из-за жутких тормозов UI
              0
              У Sencha упаковщик (раппер) появился не так давно и это не часть JS-фреймворка. При жизни 1-ой версии Sencha Touch его еще не было. И как фреймворк Sencha Touch предназначен конкретно для разработки веб-приложений (упаковщик, визивиг — это все плюшки).

              Wrapper от компании Sencha по функционалу куда отстает от PhoneGap (даже если не брать в расчет количество плагинов оного).

              Разделяйте понятия, пожалуйста.

              Да и какая разница каким упаковщиком пользоваться (PhoneGap или от Sencha)? Суть в том, что в прошлом комментарии вы пытались сравнивать бананы с килограммами (Sencha Touch и PhoneGap).
                0
                Не соглашусь.

                PG и Sencha — оба JS фреймворка для работы с мобильными приложениями. Да, раньше я использовал их совместно для приложения, но сейчас есть такая тенденция, что Sencha догонит не такой уж богатый API phonegap, пользуясь неразберихой в компании после покупки их Adobe. И тогда PG (Cordova) точно останется на задворках истории или во внутренних проектах Adobe.

                Sencha Touch 2 существует уже достаточно давно, упаковщик и дизайнер — вовсе не плюшки, а именно то, что необходимо для достойной IDE (xCode — хороший пример).

                Но основная мысль у меня была такая, что Phonegap без UI — мало пригодная вещь. А хороший фреймворк для UI еще поискать надо.
                  +1
                  Еще раз повторюсь, PhoneGap не JS фреймворк! Это тулза-wrapper, которая предоставляет доступ к device specific features, оборачивая все в вебвью контейнер и предоставляя API на JS для этого. Вы можете завернуть любую html страницу с его помощью. И получить hybrid-приложение.

                  Нельзя сравнивать Sencha Touch и PhoneGap. Можно сравнивать Sencha Packaging Tool (часть Sencha SDK) и PhoneGap. И повторюсь, Sencha Packaging Tool очень уступает PhoneGap даже если не брать в расчет, что пакует только под iOS.

                    0
                    Да я и не сравниваю особо и не собираюсь вам что-то доказать.
                    Я говорю, что phonegap это только полдела для приложения. Очень много зависит от UI. (почувствовал на собственной шкуре, когда начал делать приложение с PG)

                    И еще — советую подробнее почитать Doc, перед тем, как вступать в спор. :)
                    Sencha пакует Android тоже
                      +1
                      Ну это ей плюс. Раньше только под iOS паковала. Да и у PhoneGap есть клауд, например.

                      Мое мнение, что Sencha Touch как JS-фреймворк — слишком огромный разжиревший монстр на ExtJS, который работает довольно медленно (во второй версии, правда, намного быстрее чем в первой).
                        0
                        для мультиплатформенной разработки лучше ST2 пока ничего не видел.
                        Может что посоветуйте? Кто что использует для UI?
                          0
                              +1
                              обычно все выглядит красиво, пока не начнешь использовать на настоящем устройстве и делать touch, pan, swipe и т.д.

                              вот тогда возникают проблемы.
                                0
                                Это факт. Особенно на старом андроиде или bb.
                              0
                              У Appcelerator Titanium сейчас есть возможность делать не только native под iOS/Android, но и WebApp
                                0
                                Titanium не понравился. Вы-то чем лично польщуйтесь? Список я и так могу найти :)
                                  0
                                  Это от заказчика зависит и от требований. Зачастую Sencha Touch и JQuery Mobile. Иногда lungoJS или кастомное решение на базе BackBone + zepto/JQuery.
              0
              Какое IDE рекомендуете?
                0
                Мы например используем NetBeans для html/js, Stylizer для css, Eclipse для android, XCode для iOS,
                  0
                  Intellij IDEA

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

                Самое читаемое