Добавление нативных штрихов в ваше гибридное приложение

Добавление нативных штрихов в ваше гибридное приложение

Первоначально написано TJ VanToll

Разработка гибридных приложений может быть сложной. Задача состоит в том, чтобы использовать HTML, CSS и JavaScript для создания приложений, которые чувствуют себя как дома на нескольких мобильных платформах с различными парадигмами пользовательского интерфейса. Как разработчики гибридных систем, мы часто спорим о достоинствах репликации собственных пользовательских интерфейсов в JavaScript и подбрасываем фразы, такие как эффект сверхъестественной долины , но мы часто упускаем из виду тот факт, что Cordova предоставляет нам доступ к собственным компонентам пользовательского интерфейса ОС напрямую.

Например, популярные гибридные UI-фреймы Ionic и Kendo UI Mobile имеют элементы управления ActionSheet — вот Ionic и вот Kendo UI Mobile — но я не уверен, зачем вы их используете, так как оба подвержены эффекту странной долины (иначе они выглядят) «Отключен» для пользователя), и есть плагин Cordova, который делает его простым для непосредственного использования нативного элемента управления .

Использование собственных элементов пользовательского интерфейса имеет множество преимуществ: вы предоставляете пользователям знакомый пользовательский интерфейс, избегаете создания (и доставки) ненужных виджетов на основе JavaScript и получаете пользовательский интерфейс, соответствующий ОС, на которой работает приложение. Если ничего другого, вы набираете несколько бонусных баллов в процессе проверки Apple . В этой статье вы узнаете о нескольких плагинах Cordova, которые легко вставить, и о том, как интегрировать их в ваш рабочий процесс.

В этой статье предполагается, что вы используете либо Cordova CLI, либо AppBuilder CLI для установки плагинов Cordova. Вот руководство по началу работы с Cordova CLI , а вот одно для AppBuilder .

Диалоги

Установка : добавить плагин cordova org.apache.cordova.dialogs или получить плагин appbuilder org.apache.cordova.dialogs
Документация : https://github.com/apache/cordova-plugin-dialogs/blob/master/doc/index.md

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

Оповещения

Оповещение — это самый простой тип нативного взаимодействия, которое вы можете добавить в свое приложение Cordova, так как это вызов метода с очень простым API. Например, следующий код показывает собственное предупреждающее сообщение:

navigator.notification.alert(
    "Whassssssssuuuuupppp",             // the message
    function() {},                      // a callback
    "My Very Professional Application", // a title
    "OK"                                // the button text
);

Вот как выглядит это предупреждение на моих устройствах Android, iOS и Windows Phone (слева направо):

Запрашивает

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

navigator.notification.prompt(
    "Please give this order a name", // the message
    function( index ) {
        switch ( index ) {
            case 1:
                // The first button was pressed
                break;
            case 2:
                // The second button was pressed
                break;

        }
    },
    "Coffee World",     // a title
    [ "Ok", "Cancel" ], // text of the buttons
    "My order"          // the default text
);

Вот как выглядит приглашение на тех же трех мобильных устройствах:

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

Диалог подтверждения

Последний тип диалога, подтверждаю, это тот, который я использую чаще всего. Большинству приложений необходимо подтвердить действие пользователя или предоставить пользователю набор параметров, а диалоговое окно подтверждения облегчает создание этого пользовательского интерфейса. Например, следующий вопрос задает пользователю вопрос «да / нет»:

navigator.notification.confirm(
    "Delete the *whole* internet?", // the message
    function( index ) {
        switch ( index ) {
            case 1:
                // The first button was pressed
                break;
            case 2:
                // The second button was pressed
                break;
        }
    },
    "NSA Admin Panel", // a title
    [ "Yes", "No" ]    // text of the buttons
);

Вот как выглядит этот интерфейс:

Метод verify () также интеллектуально обрабатывает диалоги, которые используют три кнопки, как в следующем коде:

navigator.notification.confirm(
    "Could you take a minute to rate my app?", // the message
    function( index ) {
        switch ( index ) {
            case 1:
                // The first button was pressed
                break;
            case 2:
                // The second button was pressed
                break;
            case 3:
                // The third button was pressed
                break;
        }
    },
    "Desperate for reviews",                   // a title
    [ "Sure", "Remind me later", "NO! STOP!" ] // text of the buttons
);

Вот как мои три устройства отображают это диалоговое окно с тремя кнопками:

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

ActionSheets

Установка : Cordova Plugin добавить https://github.com/Telerik-Verified-Plugins/ActionSheet или AppBuilder плагин выборки https://github.com/Telerik-Verified-Plugins/ActionSheet
Документация : http://plugins.telerik.com / плагин / actionsheet

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

После установки API-интерфейс ActionSheet представляет собой простой метод show (), доступный по адресу window.plugins.actionsheet.show (). Для простейшего использования передайте show () объект с двумя свойствами — buttonLabels и title — а также функцию обратного вызова. Вот пример:

window.plugins.actionsheet.show({
    buttonLabels: [ "Delete it", "Email it", "Tweet it" ],
    title: "What would you like to do with this image?"
}, function( buttonIndex ) {
    // buttonIndex == 1 if the user chose "Delete it"
    // buttonIndex == 2 if the user chose "Email it"
    // buttonIndex == 3 if the user chose "Tweet it"
});

И вот скриншот, который показывает, как свойства buttonLabels и title отображаются на реальных устройствах:

Плагин содержит более продвинутые опции для дополнительной настройки. Например, addDestructiveButtonWithLabel добавляет кнопки с красным текстом на iOS / Windows Phone; опция addCancelButtonWithLabel добавляет кнопку отмены для iOS; и параметры androidEnableCancelButton / winphoneEnableCancelButton включают кнопку отмены для Android и Windows Phone соответственно. Вот пример, который показывает все эти опции в действии:

window.plugins.actionsheet.show({
    buttonLabels: [ "Email it", "Tweet it" ],
    title: "What would you like to do with this image?",
    addDestructiveButtonWithLabel: "Delete it",
    addCancelButtonWithLabel: "Cancel",
    androidEnableCancelButton: true,
    winphoneEnableCancelButton: true
}, function( buttonIndex ) {
    // buttonIndex == 1 if the user chose "Delete it"
    // buttonIndex == 2 if the user chose "Email it"
    // buttonIndex == 3 if the user chose "Tweet it"
});

И вот как этот элемент управления отображает:

В общем, ActionSheet — это хороший элемент управления, который можно использовать в любое время, когда вам нужно представить пользователю список действий, которые он может выполнить. Например, приведенный выше пример позволяет пользователю выполнять различные действия с изображением. Чтобы продемонстрировать еще один классный плагин Cordova, давайте посмотрим, как вы можете расширить этот пример с помощью функции обмена.

SocialSharing

Установка : Cordova Plugin добавить https://github.com/Telerik-Verified-Plugins/SocialSharing или AppBuilder плагин выборки https://github.com/Telerik-Verified-Plugins/SocialSharing
Документация : http://plugins.telerik.com / плагин / socialsharing

Как следует из его названия, плагин SocialSharing позволяет вам делиться различными вещами — текстом, файлами, URL-адресами и т. Д. — с помощью встроенного виджета общего доступа на вашем устройстве. Самый простой способ использовать плагин SocialSharing — вызвать его метод share (), который доступен в window.plugins.socialsharing.share (). Например, рассмотрим следующее:

window.plugins.socialsharing.share( "Hello World" );

Это позволяет пользователю обмениваться сообщениями («Hello World») с помощью социальных служб, уже настроенных на его устройстве. Вот как это выглядит:

Если вы хотите поделиться с определенной службой напрямую, у плагина есть методы shareViaEmail (), shareViaTwitter (), shareViaFacebook (), shareViaWhatsApp () и shareViaSMS () (хотя обратите внимание, что для Windows Phone доступен только shareViaEmail ()). В приведенном ниже коде я расширил наш предыдущий пример изображения, чтобы позволить пользователям использовать метод shareViaEmail ():

window.plugins.actionsheet.show({
    buttonLabels: [ "Email it", "Tweet it" ],
    title: "What would you like to do with this image?",
    addDestructiveButtonWithLabel: "Delete it",
    addCancelButtonWithLabel: "Cancel",
    androidEnableCancelButton: true,
    winphoneEnableCancelButton: true
}, function( buttonIndex ) {
    switch ( buttonIndex ) {
        case 2:
            window.plugins.socialsharing.shareViaEmail(
                "Because your inbox wasn't full enough", // message
                "Meme of the day", // subject
                [ "[email protected]" ], // to addresses
                null, // cc addresses,
                null, // bcc addresses
                [ "http://cdn.meme.am/instances/300x300/55260957.jpg" ], // files
                function() {}, // success callback
                function() {} // error callback
            );
            break;
    }
});

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

Теперь давайте реализуем кнопку «Tweet it» с помощью метода shareViaTwitter (). Обратите внимание: поскольку shareViaTwitter () не поддерживается в Windows Phone, я открываю Twitter в браузере приложения .

window.plugins.actionsheet.show({
    buttonLabels: [ "Email it", "Tweet it" ],
    title: "What would you like to do with this image?",
    addDestructiveButtonWithLabel: "Delete it",
    addCancelButtonWithLabel: "Cancel",
    androidEnableCancelButton: true,
    winphoneEnableCancelButton: true
}, function( buttonIndex ) {
    var url = "http://cdn.meme.am/instances/300x300/55260957.jpg";
    switch ( buttonIndex ) {
        case 2:
            window.plugins.socialsharing.shareViaEmail(...);
            break;
        case 3:
            // SocialSharing plugin does not currently support Windows Phone
            if ( /^Win/.test( device.platform ) ) {
                window.open( "http://twitter.com/share?text=My%20awesome%20meme&url=" + url, "_blank" );
                return;
            }
            window.plugins.socialsharing.shareViaTwitter(
                "My awesome meme", // message
                url, // file
                null, // url
                function() {}, // success callback
                function() {} // error callback
            );
            break;
    }
});

В gif ниже я показываю новую функциональность кнопки «Tweet it» на моих устройствах:

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

Давайте посмотрим на еще один классный плагин: переходы нативной страницы

Нативные переходы страниц

Установка : плагин cordova добавляет извлечение плагина appbuilder https://github.com/Telerik-Verified-Plugins/NativePageTransitions или извлечение плагина appbuilder извлекает извлечение плагина appbuilder https://github.com/Telerik-Verified-Plugins/NativePageTransitions
Документация : http: / /plugins.telerik.com/plugin/native-page-transitions

Переходы страниц являются одной из краеугольных функций любой мобильной структуры пользовательского интерфейса. Ионные имеют их ; У jQuery Mobile есть они ; Онсен имеет их ; и у Kendo UI Mobile они тоже есть . Тонны исследований были направлены на то, чтобы сделать эти переходы плавными и четкими на этих устройствах, но ни один веб-переход не будет соответствовать тем, которые изначально доступны для каждой мобильной ОС.

Плагин Native Page Transitions позволяет легко связать эти переходы с помощью простого JavaScript API. Все, что вам нужно сделать, это вызвать window.plugins.nativepagetransitions.slide () или window.plugins.nativepagetransitions.flip () с несколькими простыми аргументами. На рисунке ниже я показываю, как slide () и flip () выглядят на устройстве iOS:

Круто, верно? Но обратите внимание, что в этом гифке я на самом деле не перехожу ни на что. То есть в конце перехода я на той же странице, с которой начал. На самом деле обновление представления — это то, где происходит настоящее волшебство плагина Native Page Transitions.

При вызове одного из методов переходного плагина, плагин берет скриншот приложения, ждет немного, а затем выполняет переход по анимации из скриншота и в новом виде. Вы можете передать любой из методов плагина в свойство href, и он позаботится о времени для вас. Например, предположим, что у меня есть мобильное приложение Kendo UI с представлением, доступным на #play. Я могу выполнить собственный переход к этому виду, используя код ниже:

window.plugins.nativepagetransitions.slide({ href: "#play" });

Для забавы и для демонстрации того, как работает этот API, этот код непрерывно переключается между двумя представлениями (доступны в #play и #info) каждые две секунды:

setInterval(function() {
    if ( window.location.hash === "#info" ) {
        window.plugins.nativepagetransitions.slide({ href: "#play" });
    } else {
        window.plugins.nativepagetransitions.flip({ href: "#info" });
    }
}, 2000 );

Вот как эти переходы выглядят на моем устройстве iOS:

Гладко, верно? Существует множество дополнительных опций конфигурации для плагина Native Page Transitions, таких как настройка направления и задержки этих эффектов, но я считаю, что значение по умолчанию довольно хорошее. Если вы разрабатываете гибридные приложения, вы обязаны дать этому плагину шанс.

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

Как вы проверяете эти вещи?

Одна из причин, по которой разработчики Cordova традиционно избегали использования пользовательских плагинов, заключается в сложности их тестирования. Веб-разработчики чувствуют себя комфортно в браузере и любят придерживаться рабочих процессов, которые они знают и любят. Это одна из причин, по которой рабочие процессы, такие как ionic serve, которые позволяют вам разрабатывать Ionic в настольном веб-браузере, так популярны.

Но, полностью используя гибридную разработку, вы открываете целый новый мир возможностей, таких как пользовательские плагины, представленные в этой статье. Благодаря современным инструментам тестирование мобильных устройств стало еще проще. С AppBuilder вы можете развертывать свои приложения на устройствах Android и iOS с USB-подключением с помощью простых команд:

$ appbuilder deploy ios
$ appbuilder deploy android

Хорошо, хорошо, есть одна большая оговорка. Чтобы сборки iOS работали, вам нужно стать зарегистрированным разработчиком iOS ($ 99 / год), создать профили обеспечения в iOS Dev Center и импортировать их в AppBuilder. К сожалению, AppBuilder (или любой другой сервис) не может удалить ни одно из этих требований, поскольку Apple не предоставляет API для такого рода вещей. AppBuilder предоставляет исчерпывающую документацию, чтобы помочь вам в этом процессе. Если вы планируете публикацию в App Store, вам все равно придется пройти через этот процесс.

После того, как у вас есть приложения на ваших устройствах, увидеть изменения так же просто, как запустить appbuilder LifeSync. Добавьте параметр —watch, и ваши приложения будут мгновенно обновляться по мере внесения изменений.

$ appbuilder livesync ios --watch
$ appbuilder livesync android --watch

Круто то, что LiveSync также работает с плагинами Cordova. Здесь я играю с диалогом Cordova:

LiveSync также работает с пользовательскими плагинами Cordova. Здесь я играю с плагином Cordova StatusBar на моем устройстве iOS:

И когда вы тестируете на реальных устройствах, вы все равно можете выполнять удаленную отладку, к которой вы привыкли в Safari и Chrome.

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

Завершение

Используя изначально доступные элементы пользовательского интерфейса, вы можете заставить гибридное приложение чувствовать себя как дома в родном мире. Плагины, такие как диалоговое окно, ActionSheet, SocialSharing и Native Page Transitions, являются хорошим местом для начала, поскольку их легко добавить в любое существующее гибридное приложение. Хотя использование пользовательских плагинов Cordova традиционно было болезненным, современные инструменты упрощают добавление плагинов и их интеграцию в существующие рабочие процессы.

Изображение заголовка любезно предоставлено Брэндоном Карсоном