7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. iOS

Создание мобильного приложения с использованием WordPress, Ionic и AngularJS

Read Time: 13 mins

Russian (Pусский) translation by Alex Grigorovich (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Введение

В этом уроке я расскажу вам шаг за шагом, как создать современное, гибридное, мобильное (iOS и Android) приложение для вашего сайта на WordPress с использованием новейших технологий. Мы будем использовать Ionic Framework, ECMAScript 6, npm, webpack и Apache Cordova.

В конце этого урока вы получите готовое приложение. Оно будет иметь только три модуля. Модуль, который отображает последние сообщения - Home, и модуль, который отображает сообщения - Post и и модуль, который отображает меню - Menu.

ModulesModulesModules

1. Инструменты

Ionic Framework

Красивый SDK с открытым исходным кодом для разработки фронтэнда потрясающих мобильных приложений с использованием веб-технологий.

Экосистема фреймворка Ionic велика, включает Ionic CLI (командную строку), Ionic Push (push-уведомления) и Ionic Platform (бэкэнд).  В настоящее время это один из лучших проектов с открытым исходным кодом на GitHub,набравший  более 19 000 звезд и с помощью которого создано более 600 000 приложений.

Ionic способен реализовать все потребности вашего приложения. Однако в этом уроке мы сосредоточимся только на Ionic Framework (или Ionic SDK), который представляет собой набор директив AngularJS (веб-компонентов) и сервисах.

ECMAScript 6 (ES6)

ECMAScript 2015 (6-е издание) - это текущая версия стандарта спецификации языка ECMAScript. ES6 официально утвержден и опубликован в качестве стандарта 17 июня 2015 года Генеральной Ассамблеей ECMA.

ECMAScript 6 дает вам доступ к множеству новых функций, многие из которых созданы по примеру CoffeeScript, в том числе использование стрелок в функциях, генераторы, классы и конструкции let. Хотя ES6 одобрен совсем недавно, вы можете использовать его уже сейчас, используя компилятор JavaScript, такой как Babel.

Диспетчер пакетов Node (npm)

Node Package Manager - самый популярный менеджер пакетов в мире. Количество пакетов в нем растет быстрее, чем в Ruby, Python и Javа вместе взятых. npm работает на Node.js.

Почему не Bower?

Мы выбираем npm, потому что использовать Bower и npm в одном проекте сложно, а поддержка CommonJS в Bower не проста. CommonJS определяет формат модуля для разрешения области JavaScript вне браузера, а npm поддерживает это. Модули COMMОJS могут потребоваться при использовании  ES5 или ES6.

webpack

На мой взгляд, webpack является новым словом в игровой индустрии, обходя сложные сценарии Grunt или Gulp, которые вам нужны для обслуживания webpack позволяет вам запрашивать файлы любого типа (.js, .coffee, .css, .scss, .png , .jpg, .svg и т. д.) и направлять их через загрузчики для создания статических файлов, доступных вашему приложению.

Разница между Grunt и Gulp заключается в том, что большинство ваших потребностей (минимизация и компиляция) может  быть выполнена, в виде  добавления некоторой конфигурации, нет необходимости создавать полноценные скрипты. Например, запрос  файл Sass, его компиляция, создание приставок и вставка полученного миниатюрного CSS в ваше приложение будет так же легко, как написать строчку кода ниже:

Я не думаю, что мне нужно демонстрировать  пример, используя Gulp или Grunt. Думаю, вы понимаете, о чем я говорю.

2. Нам понадобится

Работа над этим уроком предполагается, что у вас есть:

  • базовое знание AngularJS и Ionic
  • веб-сайт на WordPress, готовый к работе (с завершенной  установкой)
  • сервер с Node.js, npm, Bower (они нам понадобятся  в некоторых случаях)
  • И установленный Git с возможностью записи в папку проекта без sudo.

3 Установка

Прежде чем мы начнем, вам нужно будет установить две штуки:

  • плагин WordPress, который превращает ваш блог в RESTFUL  API
  • и само приложение

RESTFUL API

Чтобы обрабатывать записи установленного сайта на WordPress, необходимо установить плагин WP REST API.  Убедитесь, что вы установили версию 1.2.x, поскольку версия 2.x находится в процессе разработки.

  1. В WordPress перейдите в раздел Плагины> Добавить новый/Plugins > Add New.
  2. Найдите WP REST API (WP API).
  3. Нажмите Установить сейчас , чтобы установить плагин.
  4. Если установка прошла успешно, нажмите «Активировать плагин», чтобы активировать его.

Если установка прошла успешно, откройте браузер и введите http://example.com/wp-json. Вы должны будете увидеть результат, подобный приведенному ниже.

Приложение

Чтобы установить приложение, скопируйте репозиторий, используйте следующие команды.

Затем создайте файл конфигурации и установите все требуемые компоненты.

Чтобы убедиться, что приложение и REST API работают вместе, откройте config/config.json. Это ваш  файл конфигурации, который игнорирует Git. Затем измените базовый URL-адрес API на тот, который подходит для вашего сайта на WordPress.

Запустите npm run devserver и откройте ссылку http:// localhost:8080/webpack-dev-server/ в браузере. Если все работает правильно, вы увидите запущенное приложение , которое отображает ваши записи из WordPress. Я создал демонстрационное приложение, чтобы показать вам, чего можно ожидать.

Теперь, когда вы видите результат , позвольте рассказать о деталях. Обратите внимание на то, что этот код  упрощен. Вы можете найти исходный код на GitHub.

4. Зависимости

Команда npm install установила несколько библиотек. Некоторые из них являются необходимыми сразу, а остальные – будут необходимы в процессе разработки.

Необходимые компоненты

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

Обратите внимание, что ваше приложение напрямую не зависит от AngularJS, потому что ionic-sdk уже включает в себя файлы angular. Js, angular-animate.js, angular-sanitize.js и angular-ui-router.js.

wp-api-angularjs (Клиент WordPress WP API для AngularJS) представляет собой набор сервисов AngularJS, которые позволяют связываться с плагином API REST, установленному ранее. Вы можете увидеть полный список необходимых компонентов на GitHub.

Компоненты необходимые при разработке

Компонентами необходимыми при разработке в основном являются загрузчики webpack. Загрузчики - это функции, которые берут исходный код из файла, проводят некоторые изменения и возвращают новый исходный код в источник. Нам нужны загрузчики, которые обрабатывают файл ы типа .scss, .js (ES6), .html и .json. Вы можете увидеть полный список необходимых компонентов для разработки на GitHub.

5 Архитектура приложения 

Я разрабатываю приложения, используя AngularJS, в течение длительного времени, и после многих экспериментов я выбрал для себя понравившуюся архитектуру:

  • файлы, которые можно редактировать в находятся в папке src/ или /lib
  • каждому модулю AngularJS нужна отдельная папка
  • каждый файл модуля *.module.js должен содержать уникальное имя (и быть единственным местом, где оно используется)
  • каждый файл модуля *.module.js должен обозначать все свои необходимые компоненты (даже если эти компоненты уже встроены в приложение)
  • каждый файл модуля *.module.js должен содержать свои настройки, контроллеры, службы, фильтры и т.д.
  • каждая конфигурация, контроллер, сервис, фильтр и т. Д. Должен экспортировать функцию (CommonJS)
  • если модуль нуждается в определенном стиле, файл .scss должен находиться вместе с этим модулем.

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

Вот как выглядит структура папок приложения:

Точка входа

При использовании веб-пакета необходима точка входа.  Наша точка входа - lib/index.js. Она содержит основные зависимости приложения (например, ionic.bundle, который содержит AngularJS), наши произвольные модули и добавляет точку входа для Sass.

Теперь, когда мы импортировали компоненты, мы можем создать модуль приложения. Давайте дадим имя прототипу нашего приложения. У него есть компоненты ionic,wp-api-angularjs и наши самописные модули в качестве необходимых для работы.

После создания модуля мы можем экспортировать его в качестве стандартного модуля CommonJS.

Здесь вы увидите отличный пример того, как должен выглядеть модуль AngularJS.

Маршрутизация

Routing architectureRouting architectureRouting architecture

Наше приложение имеет боковое меню <ion-side-menu ui-view="menu">, в котором будет отображаться модуль меню. В нем также есть раздел содержимого <ion-nav-view name="content"> , в котором будут отображаться модули Home и Post.

Директива ui-view является частью UI-маршрутизатора, используемого Ionic. Он сообщает переменной $state (услуга UI-router), где размещать ваши шаблоны. Аналогично, директива name, прикрепленная к тегу <ion-nav-view>, представляет собой настраиваемую Ionic-директиву, которая использует ui-view в нижней части. Вы можете считать обе директивы одинаковыми.

Вот упрощенная версия статуса root, статуса, в котором все модули распределены:

Дополнительные сведения о названиях представлений смотрите в документации на GitHub.

Модуль меню

Menu ModuleMenu ModuleMenu Module

Модуль меню очень прост. Его цель - добавить меню внутри тега <ion-side-menu>. Без этого модуля боковое меню будет пустым. Модуль меню добавляет только файл конфигурации, который содержит компоненты ionic и ui.router.

Самая интересная часть - это конфигурация. Мы не будем создавать отдельное состояние для модуля меню, поскольку оно всегда доступно. Вместо этого мы добавим состояние root для его содержания.  Когда тег ui-view = "menu" будет определён в состоянии root, нам нужно будет использовать конструкцию menu@root для ссылки на него.

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

Home ModuleHome ModuleHome Module

home.module.js

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

  • ionic
  • ui.router
  • wp-api-angularjs

home.config.js

Конфигурация добавляет новое состояние root.home с URL-адресом /home, в котором есть шаблон и контроллер (оба находятся внутри модуля).

home.controller.js

Это упрощенная версия логики контроллера Home. Он содержит две функции:

  • loadMore: Эта функция заполняет данными vm.posts. Она использует службу $wpApiPosts, которая является частью библиотеки wp-api-angularjs.
  • refresh: Эта функция снова удаляет записи и вызывает функцию loadmore.

home.html

В шаблоне есть директива  ion-refresher, которая позволяет пользователям перезагружать страницу, потянув её на экране вниз. А также есть  директива ion-infinite-scroll, которая вызывает функцию loadMore по завершению. Сообщения отображаются с помощью директивы ng-repeat.

Совет. Используйте выражение track by для лучшей производительности. Он минимизирует манипуляции с DOM, когда сообщение обновляется.

Почтовый модуль

В модуле Post отображается только одно сообщение. Он содержит конфигурационный файл, контроллер, и зависит от тех же библиотек, что и модуль Home.

post.module.js

Подобно модулю Home, конфигурация добавляет новое состояние root.post с URL  /post/: id. Он также регистрирует вид и контроллер.

post.config.js

post.controller.js

Контроллер получает сообщение, указанное в ссылке  /post/:id через переменную $stateParams (услуга маршрутизатора UI).

post.html

В шаблоне есть директива ion-spinner, которая отображает загрузчик, в то время как данные извлекаются через API из WordPress. Когда сообщение загружается, мы используем карточку для рендеринга аватара автора, заголовка и содержимого сообщения.

Совет. Используйте выражение bindOnce,:: (введенное в Angular 1.3), чтобы избежать проверки данных, которые не будет меняться.

Стиль оформления (Sass)

Файл bootstrap.scss, который мы импортировали в нашей точке входа, прост:

Во-первых, мы импортируем наши переменные. Затем мы импортируем стили Ionic.  Импорт наших переменных, перед стилями Ionic позволяет нам перезаписать любые переменные Sass, которые объявлены в Ionic.

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

6. Android and iOS

Установка

Выполните следующие команды внутри папки проекта и выберите платформу, на которой хотите собрать приложение.

Помимо установки платформ в папке /platform, скрипт установит еще один плагин.  Для демонстрации нам нужен плагин cordova-plugin-whitelist. Необходимо разрешить приложению отправлять запросы через API-интерфейс WordPress, который мы создали ранее.

Если вы откроете файл config.xml, вы увидите, что мы открываем доступ из любого источника (<access origin="*" />). Конечно, это только для демонстрационных целей. Если вы разрабатываете приложение для публикации, убедитесь, что вы ограничиваете доступ следующим образом:

Android

Необходимые компоненты

  • Android SDK
  • Ant

Запуск команды npm run Android  - это ярлык для команд rm -rf www/* && webpack && cordova run android. Это удаляет всё в папке www, выгружает в него не сжатую версию приложения и запускает команду android. Если Android-устройство подключено (запустите adb devices чтобы убедиться в этом), команда загрузит приложение на устройство, в другом случае будет использован эмулятор Android.

iOS

Необходимые компоненты

  • OS X
  • Xcode

Если у вас нет устройства Apple, вам нужно установить iOS Simulator.  Он хорош и лучше, чем эмулятор Android.

Запуск команды npm run runIosEmulator – это ярлык для команд rm -rf www/* && webpack && cordova run ios. Команда npm run runIosDevice  - это ярлык для команд rm -rf www/* && webpack && cordova run ios -device.

Заключение

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

  • создавать слабосвязанные модули, которые соответствуют спецификациям CommonJS
  • импортировать модули CommonJS для ECMAScript 6
  • использовать  REST API WordPress (с wp-api-angularjs)
  • использовать Ionic Framework для создания отличного пользовательского интерфейса
  • использовать webpack для сборки приложения
  • использовать программу Cordova для запуска приложения на iOS и Android

Если вы хотите развиваться дальше, взгляните на проект, который я создал несколько месяцев назад, WordPress Hybrid Client.

Гибридный клиент WordPress

Гибридный клиент WordPress (WPHC) - это проект с открытым исходным кодом, доступным на GitHub, который позволяет бесплатно создавать версии вашего сайта WordPress на iOS и Android. WPHC основан на том же наборе технологий, что и в этом уроке.

WPHC включает в себя следующие функции:

  • всплывающие уведомления
  • закладки (автономный режим)
  • поддержку Google Analytics
  • автоматическое обновление контента
  • кнопки для социальных сетей
  • настройки чтения (размер пост-шрифта)
  • поддержку нескольких языков (английский, французский, китайский)
  • бесконечную прокрутку
  • подсветку кода для технических блогов
  • кэширование изображений
  • рейтинг приложений
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.