Create et mobilprogram Bruke WordPress, Ionic, og AngularJS
297
Del
108
Share < .no> Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Hva du skal lage
Innledning
I denne opplæringen, vil jeg forklare deg trinn for trinn hvordan du kan skape et moderne, hybrid, mobilapplikasjon (iOS og Android ) av din WordPress nettside ved hjelp av den nyeste teknologien. Vi skal bruke Ionic Work, ECMAScript 6, NPM, Webpack, og Apache Cordova.
På slutten av denne opplæringen vil du få følgende program. Den har bare tre moduler, et hjem modul som viser dine siste innlegg, et innlegg modul som viser en bestemt stilling, og en meny modul som viser menyen.
1. Verktøy
Ionic Work
vakker, åpen kildekode front-end SDK for utvikling av fantastiske mobile applikasjoner med web-teknologi.
Ionic Work økosystem er stor, inkludert Ionic CLI (kommandolinjeverktøyet), Ionic Push (lett push-varsling), og Ionic Platform (backend tjenester). Det er i dag en av de beste åpen kildekode-prosjekter på GitHub med mer enn 19.000 stjerner og over 600.000 apps opprettet.
Ionic dekker alle programmets behov. Men for denne opplæringen vil jeg bare fokusere på Ionic Work (eller Ionic SDK), som er et sett av AngularJS direktiver (Web Components) og tjenester.
ECMAScript 6 (ES6)
ECMAScript 2 015 (sjette Edition) er den gjeldende versjonen av ECMAScript Språk Specification standard. ES6 fikk offisielt godkjent og publisert som en standard på 17 juni 2015 av ECMA generalforsamling.
ECMAScript 6 gir deg tilgang til en rekke nye funksjoner, mange av dem er inspirert av CoffeeScript, blant annet som pil funksjoner , generatorer, klasser, og la scoping. Selv om ES6 fikk godkjent nylig, kan du bruke det akkurat nå bruker en Javascript-kompilator, slik som Babel.
Node Package Manager (NPM)
Node Package Manager er den mest populære pakkebehandler i verden. Antall pakker vokser raskere enn Ruby, Python og Java kombinert. NPM kjører på node.js.
Hvorfor ikke Bower?
Vi velger NPM, fordi du bruker både Bower og NPM i samme prosjekt er smertefullt og CommonJS støtte med Bower er ikke enkelt. CommonJS definerer en modul format for å løse Javascript omfang utenfor nettleseren og NPM støtter dette. CommonJS moduler kan være nødvendig å bruke ES5 eller ES6
//ES5var vinkel = krever ('kantete');. //ES6import vinkel fra "kantete";
Webpack
Etter min mening, har Webpack vært en game changer i bransjen, avslutter komplisert Grunt eller Gulp skript som du trenger for å vedlikeholde. Webpack kan du kreve alle typer filer (JS, .coffee, CSS, .scss, PNG, JPG, .svg, etc.) og rør dem gjennom lastere å generere statisk eiendeler som er tilgjengelige for din søknad.
Forskjellen med Grunt og Gulp er at de fleste av dine behov (minifisering og kompilering) kan dekkes ved å bare legge noen konfigurasjon, er det ingen grunn til å lage skript. For eksempel, krever en Sass fil, kompilere den, autoprefixing det, og injisere den resulterende minified CSS inn din søknad vil være så enkelt som dette: product: {test: /\\.scss$/, loader: "stil css! autoprefixer! sass "}
Jeg tror ikke jeg trenger å vise deg tilsvarende hjelp Gulp eller Grunt. Jeg tror du får min.
2. Forutsetninger
Denne opplæringen forutsetter at du har:
en grunnleggende kunnskap om AngularJS og Ionic
en WordPress nettside klar som skal spørres (en lokal installasjon er fint)
en maskin med Node.js, NPM, Bower (vi trenger det for noen avhengigheter)
Git installert med skrivetilgang uten sudo på prosjektmappen
< h2> 3. Installasjon
Før vi kommer i gang, må du installere to ting:
en WordPress plugin som gjør bloggen din til en fredfylt API
selve programmet < .no>
RESTFUL API
For å hente innleggene for din WordPress installasjon, du må installere WP REST API plugin. Sørg for at du installerer versjon 1.2.x som versjon 2.x er på vei
- Søk etter WP REST API (WP API).
- Klikk Installer nå for å installere plugin.
- Hvis installeringen er fullført, klikker du på Aktiver Plugin for å aktivere det.
Hvis installasjonen var vellykket, åpne en nettleser og skriv http://example.com/wp-json. Dette bør gi deg et svar som ligner på det nedenfor product: {"name": ". Lorem Ipsum blogg", "description": "Just another WordPress site", "URL": "http://yourDomainName.com/wp-json "," ruter ": {}," autentisering ": {}," meta ": {}}
Application
For å installere programmet, klone depotet, ved hjelp av følgende kommandoer.
# Clone depotet og gi den et navn (her myTutorial) $ git clone http://github.com/tutsplus/Hybrid-WordPressIonicAngularJS.git myTutorial # Åpne prosjektet $ cd myTutorialDeretter oppretter du en konfigurasjon fil og installere avhengigheter.
# Kopier standard config til din personlige config $ cp config /default.config.json config /config.json # Installer avhengig $ NPM installereFor å sikre at både programmet og REST API arbeid sammen, åpne config /config.json. Dette er din personlige konfigurasjonsfil, som er ignorert av Git. Endre basisnettadressen til API til en for din WordPress installasjon product: {"api": {"baseURL": "http://yourDomainName.com/wp-json"}}.
Kjør NPM løp devserver og åpne http: //localhost: 8080 /Webpack-dev-server /i en nettleser. Hvis alt fungerer som forventet, bør du være i front av et program som kjører som viser din WordPress innlegg. Jeg har laget en demo applikasjon for å gi deg en idé om hva du kan forvente.
Nå som du kan se resultatet av det vi er ute etter, la meg gå gjennom detaljene. Legg merke til at følgende kodeeksempler er forenklet. Du kan finne kildekoden på GitHub.
4. Avhengig
NPM installasjonskommandoen installert flere biblioteker. Noen av dem er direkte avhengig mens resten er utviklingsavhengigheter.
Direkte Avhengig
De direkte avhengig er avhengig at dine bruksbehov for å kjøre skikkelig når bygget.
"Avhengigheter" : {"ionisk-SDK": "^ 1.0.0", "wp-api-angularjs": "^ 1.0.0"}Legg merke til at programmet ikke direkte avhenge AngularJS, fordi ionisk-SDK allerede inkluderer angular.js, kantete-animate.js, kantete-sanitize.js og kantete-ui-router.js.
wp-api-angularjs (WordPress WP API klient for AngularJS) er et sett av AngularJS tjenester som lar kommunikasjon med REST API plugin som du har installert tidligere. Du kan se en fullstendig liste over avhengigheter på GitHub.
Utvikling avhengig
Utviklingsverktøy avhengig er for det meste Webpack lastere. Lastere er funksjoner som tar kilden til en ressurs fil, gjelder noen endringer, og returnerer den nye kilden. Vi trenger laster som håndterer .scss, JS (ES6), HTML, og .json. Du kan se en fullstendig liste over utviklingsavhengigheter på GitHub.
5. Application Architecture
Jeg har vært å utvikle AngularJS applikasjoner i lang tid, og etter mye eksperimentering jeg har forpliktet seg til følgende arkitektur:
en fil som kan redigeres direkte under src /eller /lib mappen
hver AngularJS modulen trenger en skikkelig mappe
hver modul fil * .module.js må definere en unik navne (og være det eneste stedet hvor dette navne vises)
hver modul fil * .module.js må erklære alle sine avhengigheter (selv om avhengig allerede injisert i app)
hver modul fil * .module.js skal oppgi all sin configs, kontrollere, tjenester, filtre, etc.
hver config, controller, service, filter, etc. må eksportere en funksjon (CommonJS)
Hvis en modul behov en bestemt stil, må .scss filen leve i modulen
Disse anbefalingene er kraftig som de forsikrer at du skal ha løst koblede moduler som kan deles av flere programmer uten å kjøre inn i problemer.
Dette er hva søknaden mappestrukturen ser slik ut:
lib /├── meny /│ └── menu.module.js│ └── menu.html├── home /│ └── hjem .module.js│ └── home.config.js│ └── home.controller.js│ └── home.html├── post /│ └── post.module.js│ └── post.config .js│ └── post.controller.js│ └── post.html├── SCSS /│ └── _variables.scss│ └── bootstrap.scss├── index.js├── index.html < h3> Entry Point
Når du bruker Webpack, er nødvendig et inngangspunkt. Vår inngangspunkt er lib /index.js. Den inneholder vår programmets grunnleggende avhengigheter (for eksempel ionic.bundle som inneholder AngularJS), vår hjemmelagde moduler, og legger til Sass inngangspunkt
//Ionic, Hjørne &.; WP-API clientimport 'ionisk-SDK /release /js /ionic.bundle'; import 'wp-api-angularjs /dist /wp-api-angularjs.bundle'; //Vår modulesimport modHome fra './home/home. module.js '; import modPost fra' ./post/post.module.js';import modMenu fra './menu/menu.module.js';//stil entry pointimport' ./scss/bootstrap';Nå som vi har importert våre avhengigheter kan vi skape vår applikasjonsmodul. La oss kalle vår app prototype. Det har ioniske, wp-API-angularjs, og våre hjemmelagde moduler som avhengigheter.
//Opprett vår prototype modulelet mod = angular.module ('prototype', ['ionisk', 'wp-api-angularjs' , modHome, modMenu, modPost]);Når modulen er opprettet, kan vi eksportere den som en standard CommonJS modul
eksport standard mod = mod.name;.Dette er et godt eksempel på hva en AngularJS modulen skal se ut
Ruting
Vår søknad har en sidemenyen. < ion-side-menyen ui-view = "-menyen "> hvor Meny modulen vil bli gjengitt. Den har også en innholdsseksjon < ion-nav-view name = "innhold" > der Hjem og Post modulene vil vises.
ui-view-direktivet er en del av UI-ruter som Ionic bruker. Det forteller $ state (UI-router tjeneste) hvor du skal plassere dine maler. Tilsvarende navnet direktiv knyttet til < ion-nav-view > er en tilpasset Ionic direktiv som bruker ui-view under. Du kan vurdere både direktiver identisk
Her er en forenklet versjon av roten staten, staten at alle moduler aksje.
Eksport standardfunksjon ($ stateProvider) {'ngInject'; Avkastningen $ stateProvider.state ('root', {abstract: true, synspunkter: {'@': {mal: `< ion-side-menyer > < ion-side-meny-innhold > < ion-NAV- bar class = "bar-positive" > < /ion-nav-bar > < ion-nav-view name = "innhold" > < /ion-nav-view > < /ion-side-menyen -innholdet > < ion-side-menyen side = "left" ui-view = "meny" > < /ion-side-meny > < /ion-side-menyer > `}}});} < p> For mer informasjon om navngitte visninger, se dokumentasjonen på GitHub.
Meny Module
lib /├── meny /│ └── menu.module.js│ └── menyen. htmlMeny-modulen er meget enkel. Formålet er å legge til en meny inne < ion-side-meny >. Uten denne modulen, vil sidemenyen være blank. Menyen modulen erklærer bare en config-fil, har den ionisk og ui.router som avhengigheter.
Import modConfig fra './menu.config';let mod = angular.module (' prototype.menu ', [' ionisk ' «ui.router ']); mod.config (modConfig); eksport standard mod = mod.name;Det mest interessante er konfigurasjonen. Vi ønsker ikke å skape en stat for Meny-modulen som den er tilgjengelig overalt. I stedet dekorere vi roten stat med menyen innhold. Med ui-view = "meny" er definert i roten staten, må vi bruke menyen @ root å referere til det
eksport standardfunksjon ($ stateProvider) {'ngInject.'; $ stateProvider.decorator ('utsikt', (statlige, forelder) = > {la utsikt = forelder (stat); if (state.name === 'root') {utsikt ['meny @ root'] = {mal : require ("./menu.html")};} returnere utsikt;});}
Home Module
lib /├── home /│ └── home.module.js│ └── hjem .config.js│ └── home.controller.js│ └── home.htmlhome.module.js
The Home modulen viser latests innlegg fra din WordPress nettside. Den har en config-fil, en kontroller, og det avhenger av følgende biblioteker:
ionisk
ui.router
wp-api-angularjs
import modConfig fra './home.config';import modController fra' ./home.controller';let mod = angular.module ('prototype.home', ['ionisk', 'ui.router', ' wp-api-angularjs ']); mod.config (modConfig); mod.controller (' HomeController ', modController); eksport standard mod = mod.namehome.config.js
config legger til en ny stat, root.home, med /home URL som har en mal og en kontroller (begge bor innenfor modulen)
eksport standardfunksjon ($ stateProvider) {'ngInject.'; $ stateProvider.state ('root.home', {url: "/home", visninger: {'innhold @ root': {mal: require ("./home.html"), controller: "HomeController som homeCtrl"} }});}home.controller.js
Dette er en forenklet versjon av Home kontrolleren logikk. Den inneholder to funksjoner:
loadMore: Denne funksjonen fylles vm.posts. Den bruker $ wpApiPosts tjeneste, som er en del av wp-api-angularjs bibliotek
refresh:.. Denne funksjonen fjerner innlegg og kaller loadMore igjen
eksport standardfunksjon ($ omfang, $ logg, $ q, $ wpApiPosts) {'ngInject'; Var vm = dette; vm.posts = []; vm.loadMore = loadMore; vm.refresh = refresh; funksjon refresh () {vm.posts = null; loadMore () endelig. (() = >. $ omfang $ kringkasting ('scroll.refreshComplete')); } Funksjon loadMore () {return $ wpApiPosts $ getList () da ((respons) = > {vm.posts = (vm.posts) vm.posts.concat (response.data):..? Response.data; $ . omfang $ kringkasting ('scroll.infiniteScrollComplete');}); }}home.html
Malen har en ion-oppfrisknings direktiv som tillater brukere å laste siden på nytt ved å trekke den siden ned. Det har også en ion-uendelig-scroll direktiv som kaller loadMore funksjonen når nådd. Innlegg vises ved hjelp av ng-repeat direktivet
. Tips: Bruk sporet av uttrykk for bedre ytelse. Det minimerer DOM manipulasjon når et innlegg blir oppdatert
. ≪ ion-view > < ion-nav-title > Hjem < /ion-nav-title > < ion-innhold > < ion-oppfrisknings trekke-text = "Dra for å oppdatere" on-refresh = "homeCtrl.refresh ()" > < /ion-oppfrisknings > < div class = "list-kortet" ng-repeat = "post i homeCtrl.posts spor ved post.ID" > <! - THE POST DETALJER - > < /div > < ion-uendelig-scroll umiddelbar check = "true" on-uendelig = "homeCtrl.loadMore ()" > < /ion-uendelig-scroll > < /ion-innhold > < /ion-view >
Post Module
lib /├── post /│ └── post.module.js│ └── post.config.js│ └─ ─ post.controller.js│ └── post.htmlPost modul viser bare ett innlegg. Den har en config-fil, en kontroller, og det avhenger av de samme Librairies som startmodulen.
post.module.js
import modConfig fra './post.config';import modController fra' ./post.controller';let mod = angular.module ('prototype.post', ['ionisk', 'ui.router', 'wp-api-angularjs']); mod.config (modConfig); mod. kontrolleren ('PostController', modController); eksport standard mod = mod.nameI likhet med start modulen, legger config en ny stat, root.post, med /post /: id URL. Den registrerer også en visning og en kontroller
post.config.js
eksport standardfunksjon ($ stateProvider) {'ngInject.'; $ stateProvider.state ('root.post', {url: "/post /: id", visninger: {'innhold @ root': {mal: require ("./post.html"), controller: "PostController som postCtrl "}}});}post.controller.js
Kontrolleren henter posten spesifisert i url /post /: id via $ stateParams tjeneste (UI router tjeneste).
eksport standardfunksjon ($ omfang, $ logg, $ wpApiPosts, $ stateParams) {'ngInject'; Var vm = dette; vm.post = null; $ omfang $ på ('$ ionicView.loaded', init.); funksjonen init () {$ wpApiPosts $ får ($ stateParams.id) .og ((respons) = > {vm.post = response.data;}).; }}post.html
Malen har en ion-spinner direktiv som viser en loader mens data blir hentet fra WordPress REST API. Når innlegget er lastet, bruker vi en Ionic kort å gjengi forfatteren avatar, den tittelen, og innholdet i posten
. Tips: Bruk bindOnce uttrykk, ::, (innført i Vinkel 1.3 ) for å unngå å se på data som ikke vil endre seg over tid
. < ion-view > < ion-nav-title > {{postCtrl.post.title}} < /ion-nav-title > < ion-innhold > < ion-spinner ng-if = "postCtrl.post!" > < /ion-spinner > < div class = "list-kortet" ng-if = "postCtrl.post" > < div class = "element element-avatar" > < img ng-src = "{{:: postCtrl.post.author.avatar}}" > < h2 > {{:: postCtrl.post.author.name}} < /h2 > < p > {{:: postCtrl.post.date | dato: 'medium'}} < /p > < /div > < div class = "element element-body" > < img class = "full-image" ng-src = "{{:: postCtrl.post.featured_image.attachment_meta.sizes.medium.url}}" > < h2 > {{:: postCtrl.post.title}} < /h2 > < p ng-bind-html = ":: postCtrl.post.content" > < /p > < /div > < /div > < /ion-innhold > < /ion-view >
Stil (Sass)
lib /├── SCSS /│ └── _variables.scss│ └── bootstrap.scssbootstrap .scss fil som vi importerte i vår inngangspunkt er så enkelt som dette:
import "./variables";@import" ~ ionisk-SDK /SCSS /ionisk ";Først importerer vi våre variabler. Vi importerer Ionic stiler. . Importerer våre variabler før Ionic tillater oss å overskrive hva Sass variabler Ionic har erklært
For eksempel, hvis du ønsker det positive farge å være rød i stedet for blå, kan du overskrive det slik:
$ positive !: rød standard;
6. Android og iOS
Installasjon
Kjør følgende kommandoer inne i prosjektmappen og valgte plattform du ønsker å bygge for.
$ Cp config.dist.xml config.xml $ NPM løp installCordovaWhich plattformer ønsker du å bygge? (android ios):I tillegg til å installere plattformer innenfor /plattformer mappe, vil skriptet installere ett plugin. For demoen, trenger vi Cordova-plugin-hviteliste plugin. Det er nødvendig å tillate programmet å søke i WordPress REST API vi opprettet tidligere
Hvis du åpner config.xml, vil du se at vi gir tilgang til noen form for opprinnelse (<. Tilgang opprinnelse = "* "/>). Selvfølgelig er dette bare for demo formål. Hvis du distribuerer din søknad til produksjon, så sørg for at du begrense tilgangen slik:
< tilgang opprinnelse = "http://example.com" />
Android
Forutsetninger
Android SDK
Ant
Kjøre NPM kjøre runAndroid kommandoen en snarvei for rm -rf www /* & & Webpack & & Cordova kjøre android. Dette fjerner alt i www-mappen, dumper en ikke-minified versjon av programmet i den, og kjører android kommandoen. Hvis en Android-enhet er koblet til (kjøre ADB-enheter for å være sikker), kommandoen vil laste ned programmet på enheten, ellers vil den bruke Android emulator.
# Kjør Android $ NPM kjøre runAndroid
iOS AnmeldelserForutsetninger
OS X
Xcode
Hvis du ikke har en Apple-enhet, bør du installere iOS Simulator. Det er veldig bra og bedre enn Android emulator
$ sudo NPM installere -g iOS-simRunning NPM løp runIosEmulator er en snarvei for rm -rf www /* &. &Amp; Webpack & & Cordova kjøre ios. NPM run runIosDevice kommandoen er en snarvei for rm -rf www /* & & Webpack & & Cordova kjøre iOS --device.
# Kjør iOS $ NPM løp runIosEmulator $ NPM kjøre runIosDevice
Konklusjon
Med denne opplæringen, har jeg forsøkt å vise deg hvor enkelt det er å lage en hybrid , mobilapplikasjon for din WordPress nettside. Du skal nå kunne:
opprette løst koblede moduler som respekterer CommonJS specs
import CommonJS moduler med ECMAScript 6
bruke WordPress REST API klientsiden ( med wp-api-angularjs)
innflytelse Ionic Framework for å lage et flott brukergrensesnitt
bruk Webpack å pakke din søknad
bruke Cordova å kjøre programmet på iOS og Android
Hvis du ønsker å gå videre, så ta en titt på et prosjekt jeg laget for noen måneder siden, WordPress Hybrid Client.
WordPress Hybrid Client
WordPress Hybrid Client (WPHC) er en åpen-kildekode tilgjengelig på GitHub som hjelper deg å lage iOS og Android-versjoner av din WordPress nettside gratis. WPHC er basert på samme teknologi stabelen som vi brukte i denne opplæringen
WPHC inkluderer følgende funksjoner:.
- push-varslinger
bokmerker (frakoblet modus)
Google Analytics støtte
automatisk innhold oppdateringer
sosiale knapper
tilgjengelighet (post skriftstørrelse)
flere språk (engelsk, fransk, Chinese)
uendelig scroll
syntax highlighter for tech blogger
bilde caching
app fra
I WordPress, gå til Plugins >.; Legg til ny.