Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. iOS
Code

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

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

Введение

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

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

Modules

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 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 Module

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

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

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

Home 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
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.