Как создать современное гибридное мобильное приложение на своем веб-сайте на Wordpress

В этом руководстве мы объясним вам, как создать современное гибридное мобильное приложение на вашем веб-сайте WordPress.

Мы будем использовать такие технологии, как:

  • Веб-сайт WordPress с несколькими дополнительно загруженными плагинами. Мы сделали упор на то, что вы не знаете основ PHP, и, выбирая плагины, мы ограничились только бесплатными решениями, которые находятся в свободном доступе.
  • Ionic, Angular.js, Node Package Manager (npm), Gulp, Cordova - решения, которые помогут нам создать наше мобильное приложение.

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

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

Шаг 1. Требования

  • Работающий сайт на WordPress;
  • Машина с установленными Node.js, npm, Ionic, Cordova;
  • Базовые знания Angular.js, Ionic и npm.

Шаг 2. Создание веб-сайта

Вам потребуется установить несколько дополнительных плагинов для приложения с WordPress REST API.

Плагин WP REST API позволяет получить все данные веб-сайта в формате JSON для приложения.

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

ACF to REST API - это плагин, который позволяет REST API для настраиваемых полей получать данные в формате JSON.

WP REST API Cache - это дополнительный плагин, который значительно ускоряет время ответа вашего сервера приложений. Лучше установить его, когда все настройки сайта будут выполнены.

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

Затем перейдите в раздел Custom Fields и создайте новую группу полей, как показано на рисунке.

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

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

Теперь все настройки WordPress закончены. Можем продолжить работу с приложением.

Шаг 3. Архитектура приложения

Мы использовали стандартный Ионный шаблон с боковой панелью, который не требует установки. В конце статьи вы найдете инструкции по установке последней версии приложения.

Приложение содержит несколько модулей и в будущем может быть расширено.

Модуль домашней страницы

Модуль Домашняя страница отвечает за настройки приложения, а также за исходную загрузку данных (стили, параметры, пользователи).

Необходимо изменить следующие настройки.

ApiBasePath определяет адрес вашего веб-сайта, плюс вам нужно добавить / wp-json в конце.

OptionsPageId определяет идентификатор страницы с настраиваемыми полями (посмотрите на изображение выше с областями, выделенными желтым цветом).

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

Этот модуль также настраивает боковую панель приложения в файле app.menu.html.

Модуль приема данных

Модуль Получение данных получает все необходимые данные: стили приложений, записи, пользователей и т. Д.

Модуль домашней страницы

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

Модуль страницы публикации

Модуль Страница сообщений отображает сообщения по идентификатору. Он получает конкретные данные записи после щелчка по списку на домашней странице.

Шаг 4. Структура файлов

Давайте в качестве примера рассмотрим файловую структуру модуля домашней страницы.

Module.js объявляет модуль.

Routes.js добавляет новое состояние и загружает данные сайта WordPress. Он также объявляет контроллер как синтаксис.

Controller.js определяет, какие данные будут отображаться на странице. Также он может дополнительно загружать следующие посты.

Home.html отображает главную страницу модуля. Он содержит блок ‹posts› ‹/posts›, который будет обрабатываться компонентом.

Component.js и template.html отображают список сообщений.

Шаг 5. Android и iOS

Вам необходимо выполнить следующие команды, чтобы загрузить все необходимые библиотеки и зависимости:

git clone https://github.com/S-PRO/app-press.git

cd app-press / wpapp

npm install

Выполните команду Android:

ионная платформа добавить андроид

ионный запуск android

Выполните команду iOS:

ионная платформа добавить iOS

ионный запуск ios

Шаг 6. Возможный дополнительный функционал

Если хотите пойти дальше, можно добавить следующие функции:

  • Отображение видео и изображений.
  • Push-уведомления о новых сообщениях.
  • Динамическое меню.
  • Расширение стилей.
  • Поддержка языка и размера шрифта.
  • Поддержка аналитики и социальных кнопок.

Заключение

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

Если вам это понравилось, покажите свою поддержку, хлопнув нас, чтобы поделиться с другими людьми на Medium.

Подпишитесь на нас в Facebook, Instagram, LinkedIn, Behance, Medium и посетите наш корпоративный блог, чтобы узнать больше новостей и статей об интеллектуальных решениях.

Есть вопросы? Смело обращайтесь к нам!

Изначально написано для блога S-PRO.