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

Стварэнне мабільнага прыкладання з выкарыстаннем WordPress, Ionic і AngularJSFinal product image

by
Difficulty:IntermediateLength:LongLanguages:

Belarusian (беларуская мова) 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. Змена base 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, and angular-ui-router.js

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

Залежнасці Развіцця

Залежнасці развіцця ў асноўным WebPack пагрузчыкі. Пагрузчыкі з'яўляюцца функцыямі, якія прымаюць крыніца файла рэсурсаў, прымяняюцца некаторыя змены, і якая вяртае новы крыніца. Нам патрэбныя грузчыкі, якія апрацоўваюць .scss, .js (ES6), .html, і .json. Вы можаце ўбачыць поўны спіс залежнасцяў развіцця на GitHub.

5. Архітэктура прыкладанняў

Я распрацоўкі прыкладанняў AngularJS на працягу доўгага часу і пасля шмат эксперыментаваў я прыхільнік наступную архітэктуру:

  • a file that can be edited live under the src/ or /lib folder
  • кожны модуль AngularJS мае патрэбу ў патрэбную тэчку
  • кожны модуль файлаў *.module.js павінен вызначыць унікальнае прастору імёнаў (і гэта адзінае месца, дзе з'яўляецца гэта прастора імёнаў)
  • кожны модуль файлы *.module.js павінен аб'явіць ўсе залежнасці (нават калі залежнасці ўжо ўпырскваецца ў дадатку)
  • every module file *.module.js must declare all its configs, controllers, services, filters, etc.
  • кожны config, controller, service, filter і г.д., павінны экспартаваць функцыю (CommonJS)
  • калі модуль неабходны пэўны стыль, файл .scss павінен жыць у модулі

Гэтыя рэкамендацыі з'яўляюцца магутнымі, як яны запэўніваюць, што вы мець слабосвязанные модулі, якія могуць сумесна выкарыстоўвацца некалькімі праграмамі, не сутыкаючыся з праблемамі.

Гэта тое, што структура тэчак прыкладання выглядае наступным чынам:

Кропка ўваходу

Пры выкарыстанні Webpack, кропка ўваходу неабходна. Наш пункт уваходу lib/index.js. Ён змяшчае асноўныя залежнасці нашага прыкладання (такія як ionic.bundle, які змяшчае AngularJS), нашы хатнія модулі, і дадае кропку ўваходу Sass.

Цяпер, калі мы імпартавалі нашу залежнасць мы можам стварыць модуль прыкладання. Давайце назавем наша дадатак prototype. Ён мае ionic, wp-api-angularjs, і нашы хатнія модулі ў якасці залежнасцяў.

Пасля таго, як модуль будзе створаны, мы можам экспартаваць яго ў якасці стандартнага модуля CommonJS.

Гэта выдатны прыклад таго, што модуль AngularJS павінен выглядаць.

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

Routing architecture

Наша дадатак мае бакавое меню <ion-side-menu ui-view="menu"> у якім модуль Меню будзе аказаны. Яна таксама мае раздзел кантэнту <ion-nav-view name="content"> у якім будуць з'яўляцца модулі Home і Post.

Дырэктыва ui-view з'яўляецца часткай UI-маршрутызатар, які выкарыстоўвае Іённы. Гэта сведчыць $state (UI-маршрутызатар служба) дзе размясціць свае шаблоны. Аналагічным чынам, дырэктыва name прыкладаецца да <ion-nav-view> звычай іённыя дырэктыва, якая выкарыстоўвае ui-view знізу. Вы можаце разгледзець абедзве дырэктывы ідэнтычныя.

Вось спрошчаная версія root стану, стан, што ўсе модулі доля:

Для атрымання дадатковай інфармацыі аб найменных відах, калі ласка, звярніцеся да дакументацыі на GitHub.

Модуль меню

Menu Module

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

Найбольш цікавай часткай з'яўляецца канфігурацыя. Мы не хочам, каб стварыць стан для модуля меню, як ён даступны ўсюды. Замест гэтага, мы ўпрыгожваем стан root са зместам меню. З ui-view="menu" вызначаюцца ў root стане, мы павінны выкарыстоўваць menu@root, каб звярнуцца да яго.

Галоўная Модуль

Home Module

home.module.js

Модуль Home адлюстроўвае latests паведамленні вашага сайта WordPress. It has a config file, a controller, and it depends on the following libraries:

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

home.config.js

Конфіг дадае новы стан, root.home, с /home URL, які мае шаблон і кантролер (як жыве ў модулі).

home.controller.js

Гэта спрошчаная версія логікі Галоўнай кантралёры. Ён змяшчае дзве функцыі:

  • 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.