Преобразование веб-сайта в собственное мобильное приложение с использованием темы ListingPro (в которой отсутствует API) в качестве примера.

Чтобы бизнес был актуален в современном мире, управляемом смартфонами, ему необходимо преобразовать свой веб-сайт в приложение. Но подождите, вы можете возразить: "У моего клиента уже есть адаптивный веб-сайт!" Отлично! Тем не менее, мобильные приложения растут с поразительной скоростью, и их отсутствие — верный способ отстать от конкурентов. Чтобы развеять все сомнения, я кратко приведу причины, по которым компании, присутствующие на мобильных устройствах (через нативные приложения), могут повысить ценность бренда;

  • Никто больше не хочет вводить URL-адрес в браузере. Люди хотят коснуться значка на своем телефоне (как и для всех сервисов, которыми они пользуются). 85% потребителей предпочитают нативные мобильные приложения мобильным веб-сайтам, поскольку им нужен быстрый и знакомый опыт работы с мобильным приложением.
  • Мобильные сайты отлично подходят для поиска, однако лояльные пользователи, которые чаще возвращаются, хотят найти приложение. Люди используют приложения чаще, чем поиск на мобильных устройствах. Бренд на домашнем экране пользователя — постоянное напоминание о сайте и контенте.
  • Бренд может быть во всех социальных сетях, но только часть пользователей когда-либо увидит сообщение, электронные письма также могут быть отправлены, но с коэффициентом открытия 25%, будет достигнута часть аудитории. Фирменное мобильное приложение обеспечивает прямую связь с пользователями, тем самым удерживая пользователей и превращая случайных посетителей в лояльных пользователей.
  • Преимущество нативных мобильных приложений заключается в использовании функций мобильного телефона, таких как камера, список контактов, GPS, телефонные звонки, акселерометр, компас и т. д. Такие функции устройства при использовании в приложении могут сделать взаимодействие с пользователем интерактивным и увлекательным. Более того, эти функции также могут уменьшить усилия, которые пользователи должны были бы приложить в противном случае. Например, пользователи, которые хотели бы узнать местонахождение предприятия, могут использовать GPS/навигацию, чтобы направить пользователя к предприятию (полезно на веб-сайтах, посвященных продуктам питания). Функции устройства могут значительно сократить время, необходимое пользователям для выполнения определенной задачи в приложении, и даже повысить конверсию.
  • Мобильные приложения могут быть выгодны по двум причинам: для контента внутри приложения и для контента веб-сайта, поскольку синонимичные слова будут использоваться в контенте для продуктов и услуг. Google в наши дни также ранжирует контент в приложении, и вы можете изменить свой контент в своем приложении, чтобы помочь вам с SEO вашего сайта.
  • Пользователи мобильных приложений теперь тратят больше на приложения, так как Google Play насчитывает более 2,2 миллиона приложений для различных целей, а также сообщает comScore, что количество мобильных пользователей превысило количество пользователей настольных компьютеров еще в 2014 году. Глобальный доход от мобильных приложений растет как на дрожжах и границы с тех пор. В результате общий доход от мобильных приложений достиг 35 миллиардов долларов в 2014 году, 45 миллиардов долларов в 2015 году и 58 миллиардов долларов в 2016 году. По оценкам, в 2017 году он принес колоссальные 77 миллиардов долларов дохода. Это указывает на то, что владельцы веб-сайтов получают не только больше клиентов, но и больше платящих клиентов, которые готовы тратить деньги.
  • Даже когда пользователи не используют активно мобильное приложение, им все равно напоминают о бренде, связанном с приложением. Значок приложения действует как мини-реклама бренда.
    Наличие приложения на устройстве пользователя помогает подсознательно влиять на его восприятие бренда. Такое поведение пользователей может быть связано с теорией обнаружения сигналов, которая предполагает, что пользователи обрабатывают даже те объявления, которые они проигнорировали на каком-то уровне в своем уме.
  • Мало того, что значительно больше пользователей выходят в Интернет с планшета или смартфона, чем с настольного компьютера, они делают это с большей целью электронной коммерции, чем когда-либо прежде. Во время напряженного сезона праздничных покупок в прошлом году треть всех онлайн-покупок была совершена пользователями мобильных устройств. Даже «Черная пятница» (6,2 миллиарда онлайн-доходов в 2018 году) не была застрахована от мобильной лихорадки, поскольку почти 40% продаж в традиционный день покупок из обычных магазинов приходилось на мобильное устройство. В Киберпонедельник (7,9 млрд онлайн-доходов в 2018 году) 54% посетителей пришли с мобильных устройств, а около 30% совершили покупки с мобильных устройств.

Все еще не убеждены? К счастью для меня, ребята из Go-Globe провели анализ и представили следующую наглядную статистику, так что я позволю ей говорить;

Если мне удалось убедить вас (и не смутить) в преобразовании этого веб-сайта в мобильное приложение, давайте приступим к основам. Тсс…«все мобильные приложения — это просто набор кодов (написанных на java, kotlin и т. д.), которые управляют данными и ресурсами (файлы .png, .xml и т. д.), благодаря чему приложение выглядит красиво»…теперь это секрет, который некоторые разработчики не знают (или не понимают). Обработанные данные можно получить с датчиков мобильного устройства, таких как экран, камера, память, GPS, динамики, акселерометр, компас и т. д., или с сервера. При преобразовании веб-сайта в мобильное приложение нам нужно получить данные с сервера веб-сайта без его взлома (мы не хотим попасть в тюрьму).

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

  • Почему бы нам не использовать прогрессивные веб-приложения, PWA, чтобы легко и быстро получить мобильное приложение, не придумывая, как получить данные с веб-сайта?

PWA — это относительно новая технология, разработанная Google, позволяющая мобильным устройствам добавлять веб-сайт или веб-приложение на главный экран смартфона и иметь возможность взаимодействовать с ним в автономном режиме. Чтобы превратить обычное веб-приложение в прогрессивное веб-приложение, вам просто нужно добавить значок на домашний экран, манифест веб-приложения и сервис-воркер, который позволяет сайту работать в автономном режиме и загружаться быстрее, а также отправлять push-уведомления. Однако эта технология представляет собой всего лишь оболочку браузера, а не полнофункциональное приложение, поэтому технически это все еще веб-сайт. Пользователи не получат родной опыт работы с приложением (взаимодействия, анимация, производительность и некоторые датчики устройства), поскольку пользовательский интерфейс — это просто полноэкранное окно браузера без строки URL, которая может работать в автономном режиме.

  • Хорошо, хорошо… как насчет гибридных мобильных приложений, которые работают во встроенной среде браузера (WebView), будет проще получать данные, и они также могут взаимодействовать с аппаратными API смартфона, чтобы включить функции устройства (геолокация, камера и т. д.).

Пользовательский интерфейс приложения, созданного с помощью этой платформы, не будет таким гладким, как в нативном приложении. Внешний вид интерфейса аналогичен интерфейсу веб-сайта (то есть задержки кликов 300 мс, фантомные клики при прокрутке и т. д.). Конечно, есть модули и фреймворки, которые предлагают компоненты пользовательского интерфейса, разработанные так, чтобы быть похожими на нативные приложения, но они все еще не соответствуют нативному интерфейсу. Приведенная выше статистика показывает, что колоссальные 85% мобильных пользователей предпочитают нативные мобильные приложения, нет смысла создавать приложение, которое мало кто будет использовать…. Это пустая трата времени.

  • Как насчет того, чтобы заставить веб-разработчиков разработать подключаемый модуль, предоставляющий RESTful API таким образом, чтобы мы могли использовать распространенные методы HTTP, такие как GET, POST, PUT и DELETE, для получения данных с сервера веб-сайта.

Это блестящая идея (если вы заблудились, прочитайте эту статью, чтобы узнать, что такое RESTful API), но вы только что убедили своего клиента преобразовать свой веб-сайт в нативное мобильное приложение, что будет стоить ему денег ($$$ ), поскольку нативные мобильные приложения довольно дороги в разработке, а добавление затрат на веб-разработчика может привести к тому, что вы потеряете клиента. Даже если у вашего клиента достаточно денег, плагины наиболее выгодны, если их использование ограничено. Если кто-то использовал слишком много плагинов на своем веб-сайте, сайт может задерживаться для загрузки сайта, или иногда они могут падать, или у них могут возникнуть проблемы с безопасностью для их сайта. Позвольте мне объяснить немного подробнее;
Производительность веб-сайта. Каждый плагин добавляет на ваши веб-сайты свои файлы PHP, JavaScript и другие файлы, что может снизить производительность.< br /> Проблемы безопасности. Некоторые плагины могут иметь плохой код или не обновляться в течение длительного времени, что может упростить взлом вашего сайта.
Сбой веб-сайта. Если вы установили на свой веб-сайт множество подключаемых модулей, между ними могут возникнуть конфликты, что приведет к сбою вашего сайта.

  • Тогда какого хрена вы рекомендуете?

Эй… успокойтесь, не нужно напрягаться. Если вы столкнулись с проблемами, с которыми я столкнулся, когда разрабатывал нативное мобильное приложение для ListingPro, которое включает в себя: отсутствие API, необходимость быстрого доступа к функции телефона (геолокация) насколько это возможно и скорость, то вы используете AJAX (подождите… я объясню). Пример здесь, тема ListingPro — это сайт-каталог WordPress, такой как Yelp, Yellow Pages, Foursquare, HotFrog и т. Д. (Вы поняли). Его данные представляют собой просто список, который содержит информацию о предприятиях в определенной нише, и наличие собственного мобильного приложения для этого неизбежно, поскольку пользователи захотят найти рядом с ними услугу (например, парикмахерскую) и способ добраться туда как как можно быстрее, используя функцию геолокации на своем телефоне. Веб-приложение или гибридное приложение может разочаровать пользователя из-за медленного времени отклика по сравнению с родным мобильным приложением.

Теперь вернемся к рекомендуемому решению AJAX. Это сокращение от «Асинхронный JavaScript и XML», которое позволяет веб-приложениям асинхронно (в фоновом режиме) отправлять и получать данные с сервера, не мешая отображению и поведению существующей страницы. Отделив уровень обмена данными от уровня представления, Ajax позволяет веб-страницам и, соответственно, веб-приложениям динамически изменять содержимое без необходимости перезагрузки всей страницы. На практике современные реализации обычно используют JSON вместо XML. Затем веб-страница может быть изменена с помощью JavaScript (в нашем случае мы будем использовать java) для динамического отображения и предоставления пользователю возможности взаимодействовать с новой информацией/данными. Вооружившись этими знаниями, мы можем заменить уровень представления, который представляет собой веб-страницу, нашим мобильным приложением, поскольку Ajax теперь действует как уровень обмена данными. Чтобы подключиться к серверу и выполнять запросы Ajax, нам понадобится URL-адрес, а в WordPress все запросы AJAX должны направляться по следующему URL-адресу: «http://www.example.com/wp-admin/». admin-ajax.php”

Хватит всех этих долгих разговоров, давайте напишем немного кода. Но до этого я использовал вот такие инструменты;

  • JSoup (библиотека Java):

JSoup — это анализатор HTML веб-страницы, основанный на платформе Java, который может напрямую анализировать URL-адрес, текстовое содержимое HTML и предоставляет набор очень удобных API-интерфейсов для управления данными с помощью операций, аналогичных jQuery. Поскольку мы заменяем веб-страницу (которая использует jQuery/javacript для взаимодействия с Ajax) мобильным приложением, эта библиотека подходит лучше всего. Кроме того, данные, возвращаемые запросом Ajax, могут быть в формате JSON, XML или HTML, и библиотека JSoup может обрабатывать их все.

  • Студия Android:

Я пишу собственное мобильное приложение для Android, так что это официальные инструменты для написания (с использованием java и/или kotlin) и компиляции приложений для Android, чтобы получить готовый к установке файл .apk.

Шаги для получения данных с веб-сайта с помощью AJAX

ШАГ 1:

Если вы перейдете по URL-адресу; "http://www.example.com/wp-admin/admin-ajax.php", вы попадете на скрипт admin-ajax.php, который выведет -1 или 0. Это потому, что вы не указали какую-либо функцию/действие для вызова сценария ajax.

В загруженном вами файле темы (файл .zip, который был установлен для веб-сайта)... да, вам понадобится исходный код веб-сайта... найдите хуки ajax, которые начинаются с "add_action('wp_ajax_" . Это даст вам все действия, которые можно вызвать из сценария ajax.

Если вы ленивы (как я!), вы можете быстро использовать Notepad++, чтобы найти текст («add_action('wp_ajax_») во всех файлах разархивированной папки из загруженной темы веб-сайта. Выберите в меню Поиск › Найти в файлах, но если вам больше нравятся сочетания клавиш, используйте вместо этого Ctrl-Shift-F, чтобы открыть окно поиска.

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

  1. Найти что: это строка поиска, которую вы хотите, чтобы Notepad++ нашел в файлах, и в нашем случае это «add_action(‘wp_ajax_»
  2. Каталог: это корневая папка, содержащая все файлы, которые вы хотите найти. Notepad++ также ищет все подпапки по умолчанию, и в нашем случае это папка, в которую мы распаковали загруженную тему для веб-сайта.

Нажав кнопку «Найти все», вы получите все хуки ajax для темы ListingPro.

ШАГ 2:

Настройте параметры данных, которые будут использоваться для выполнения ajax-вызова. В этом примере мы будем использовать следующий хук ajax;

add_action(‘wp_ajax_quick_preivew_cb’, ‘quick_preivew_cb’);
add_action(‘wp_ajax_nopriv_quick_preivew_cb’, ‘quick_preivew_cb’);

В этом хуке ajax действием здесь является "quick_preview_cb", и его реализация из исходного кода показывает, что для этого требуется идентификатор компании (postID) и одноразовый номер (версия 2.0 и ниже темы ListingPro). не нуждается в одноразовом номере). Одноразовый номер похож на хэш безопасности для предотвращения атак и ошибок, он создает уникальные идентификаторы для проверки, исходит ли запрос ajax с веб-сайта или нет. Ниже приведен фрагмент реализации действия из исходного кода;

if(!function_exists(‘quick_preivew_cb’)){
 function quick_preivew_cb() {
 check_ajax_referer( ‘lp_ajax_nonce’, ‘lpNonce’ );
 // Nonce is checked, get the POST data and sign user on
 if( !wp_verify_nonce(sanitize_text_field($_REQUEST[‘lpNonce’]),   ‘lp_ajax_nonce’)) {
  $res = json_encode(array(‘nonceerror’=>’yes’));
  die($res);
 }
 $output = ‘’;
 
 $LPpostID = sanitize_text_field($_REQUEST[‘LPpostID’]);
 $data_return = array();

Это действие возвращает рейтинг, местоположение, статус (открыто или закрыто) и номер телефона предприятия. Параметры данных, которые представляют собой HashMap ключа и значения (обе строки) и URL-адрес ajax, настроены следующим образом;

String ajaxCall = “http://www.example.com/wp-admin/admin-ajax.php”;
HashMap<String, String> data = new HashMap<>();
data.put(“action”, “quick_preivew_cb”);
data.put(“LPpostID”, **place the business ID**);
data.putAll(** gotten nonce Data **);

ШАГ 3:

Настройте вызов метода Jsoup для получения данных в формате HTML;

try {
String json = Jsoup.connect(ajaxCall).userAgent(“Mozilla”).ignoreContentType(true).data(data).method(Connection.Method.POST)
 .header(“dataType”, “json”)
 .execute().body();
}catch(IOException e){
}

ШАГ 4:

Проанализируйте полученные данные json, чтобы получить рейтинг, местоположение, статус и номер телефона компании, которые затем могут быть отображены пользователю мобильного приложения, используя преимущества функций устройства, которых нет в веб-приложении или они работают медленно. Например, местонахождение полученного бизнеса может отображаться для мобильного пользователя на картах Google с возможностью указать пользователю мобильного приложения направление к бизнесу с помощью геолокации.

Вывод

Преобразование веб-сайта в нативное мобильное приложение дает множество преимуществ, которые необходимы владельцу бизнеса в 21 веке. Для разработчика мобильных приложений преобразование веб-сайта в мобильное приложение требует способа получения и обновления данных с веб-сайта способом, аналогичным веб-страницам веб-сайта. Если на веб-сайте отсутствует API и слишком много плагинов, установка плагина API может быть невыгодной, поэтому использование запросов AJAX для получения этих данных может быть героическим решением. Я надеюсь, что сэкономил вам часы на поиске решения проблемы преобразования веб-сайта без API в нативное приложение.