Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
WordPressinREST-rajapinnankäyttöCordova-mobiilisovelluksessaMikkoHytönenOpinnäytetyöJoulukuu2016MediatekniikankoulutusohjelmaInsinööri(AMK)
Kuvailulehti
Tekijä(t)Hytönen,Mikko
JulkaisunlajiOpinnäytetyö,AMK
Päivämäärä joulukuu2016
Sivumäärä30
JulkaisunkieliSuomi
Verkkojulkaisulupamyönnetty:x
TyönnimiWordPressinREST-rajapinnankäyttöCordova-mobiilisovelluksessa
Tutkinto-ohjelmaMediatekniikkaTyönohjaaja(t)PasiManninenToimeksiantaja(t)Into-DigitalOy
Tiivistelmä
OpinnäytetyötoteutettiinInto-DigitalOy:lle.Toimeksiantajantavoitteenaolitoteuttaaasi-akkaallesivustouudistusjasenrinnallemobiilisovellusiOS-jaAndroid-laitteille.Sovelluk-senlähtökohtanaolileikkimielinentilausosio,jonkarinnallehaluttiintuodasivustonsisäl-löt.Lisäksisovellukseenpäätettiintoteuttaalisäarvoatuoviaominaisuuksia,kutensisällönjakaminenjailmoituksetsisältöpäivityksistäsovelluksenkäyttäjille.
SovelluspäätettiintoteuttaaApacheCordova-sovelluskehitysalustalle,jokaontarkoitettusovellustenkehittämiseenuseallemobiilikäyttöjärjestelmälleyhtäaikaisesti.Cordovallaso-velluskehitystapahtuimoderneillaweb-tekniikoillajajärjestelmienvalmiitatoimintojapys-tyttiinhyödyntämäännatiivilaajennustenavulla.CordovantukenakäytettiinAdobenPho-neGap-kehitystyökaluja,joidenavullasovellustajanatiivitoimintojapystyttiintestaamaantehokkaastijalangattomastilähiverkossa.
SivustouudistukseenvalittiinWordPress-sisällönhallintajärjestelmä,jokatoimimyössovel-luksentaustapalvelunasisäänrakennetunrajapinta-arkkitehtuurinjalaajennustenavulla.SisällönhallintaalaajennettiinvastaamaanasiakkaantarpeitaomillasisältötyypeilläjaAd-vancedCustomFields-laajennuksentietokentillä.
Lopputuloksenatoimeksiantajanasiakassaitilaamansauudensivustonjamobiilisovelluk-sen.Toimeksiantajalletoteutustoimiireferenssinäjapohjatoteutuksenavastaavilleprojek-teille.Toteutukseentehtiinuseitajatkossahyödynnettäviäratkaisuja,kutenWordPressinrajapinnankäyttöönottosekäyleispäteväprosessisenhyödyntämisellesovelluksissa.Sa-moinpush-viestienkäyttöönottoajaintegrointiaWordPress-sisällönhallintaanvoidaantar-jotajatkossatoimeksiantajanasiakkaille.
Avainsanat(asiasanat)mobiilisovellukset,Cordova,PhoneGap,WordPressMuuttiedot
Description
Author(s)Hytönen,Mikko
TypeofpublicationBachelor’sthesis
DateDecember2016Languageofpublication:Finnish
Numberofpages30
Permissionforwebpubli-cation:x
TitleofpublicationUseofWordPressRESTAPIinCordovamobileapplication
DegreeprogrammeMediaEngineering
Supervisor(s)Manninen,PasiAssignedbyInto-DigitalOy
Abstract
TheprojectwasassignedbyInto-DigitalOywiththeobjectivetobuildanewwebsiteandacompanionmobileappforaclient.TheappwouldbeavailableforiOSandAndroidde-vices.Themainideafortheappwastopresentaplayfulorderinginstructionsectioncom-plementedbycontentfromthewebsite.Toaddvalueforusers,someadditionalfeatureswereplanned;e.g.toletuserssharecontentandnotifythemaboutcontentupdates.
TheappwasdevelopedusingApacheCordovaapplicationdevelopmentframework,whichsupportspublishinginmultipleoperatingsystems.UsingCordova,anappwasbuiltwithmodernwebtechniques,andnativefeaturescanbeaccessedthroughnativepluginarchi-tectureandpluginsdevelopedbyCordovacommunity.InadditiontoCordova,PhoneGapdevelopmenttoolsbyAdobewereused.ThetoolsenabledtestingtheappanditsnativefeaturesoniOSandAndroiddeviceswirelesslyinalocalnetwork.
WordPresscontentmanagementsystemwasusedtobuildthewebsite.Theappwascon-nectedtoWordPressthroughbuilt-inRESTAPIarchitectureandplugins.Thecontentman-agementwascustomizedtomeettheneedsoftheclientusingcustomposttypesandAd-vancedCustomFieldsplugin.
Inconclusion,thewebsiteandthemobileappwerebuiltsuccessfullyandtheclient’sre-quirementsweremet.ForInto-Digital,theprojectwillbeusedasareferenceandasabaseimplementationforsimilarprojectsinthefuture.Severalaspectsoftheimplementationarereusable,e.g.settinguptheWordPressRESTAPIandagenericprocessforaccessingitandcachingtheresultsforofflineuseinanapp.AnotherreusableaspectissettinguppushnotificationsandintegratingthemtoWordPresscontentmanagement.
Keywords/tags(subjects)mobileapplications,Cordova,PhoneGap,WordPressMiscellaneous
1
Sisältö
1 Lähtökohdat..........................................................................................................3
1.1 Toimeksiantaja...........................................................................................3
1.2 Tavoitteet...................................................................................................3
2 ApacheCordova....................................................................................................4
2.1 Yleistä.........................................................................................................4
2.2 Tuetutkäyttöjärjestelmät...........................................................................5
2.3 Natiivilaajennukset.....................................................................................5
2.4 Kehitystyökalujenvalinta...........................................................................6
2.4.1 Johdanto................................................................................................6
2.4.2 PhoneGap..............................................................................................7
3 WordPressinREST-rajapinta..................................................................................8
3.1 WordPress..................................................................................................8
3.2 REST-rajapinta............................................................................................9
3.2.1 Johdanto................................................................................................9
3.2.2 Rajapinnanrakenne.............................................................................10
3.2.3 Sivustonrakenne.................................................................................10
3.2.4 AdvancedCustomFields-laajennus....................................................11
3.2.5 Rajoitukset...........................................................................................12
4 Mobiilisovellus.....................................................................................................12
4.1 Käyttöliittymä...........................................................................................12
4.1.1 Rakenne...............................................................................................12
4.1.2 ValitutHTML5-tekniikatjaJavaScript-kirjastot....................................13
4.1.3 Ractive.js-käyttöliittymä......................................................................14
4.2 Sovellusarkkitehtuuri................................................................................16
4.3 Offline-käyttö...........................................................................................18
4.3.1 Johdanto..............................................................................................18
2
4.3.2 LocalStorage-tietokanta.......................................................................18
4.3.3 Online-synkronointi.............................................................................19
4.4 Push-viestit...............................................................................................20
4.4.1 Johdanto..............................................................................................20
4.4.2 Välityspalvelut.....................................................................................20
4.4.3 Käyttöönotto........................................................................................20
4.4.4 Käyttäjänrekisteröinti.........................................................................21
4.4.5 Käyttö...................................................................................................22
4.5 Natiivijaot.................................................................................................23
4.6 Seuranta...................................................................................................24
4.7 Muutlaajennukset...................................................................................25
5 Tulokset...............................................................................................................26
6 Pohdinta..............................................................................................................27
Lähteet........................................................................................................................29
Kuviot
Kuvio1.Käytetyimmätsisällönhallintajärjestelmät......................................................9
Kuvio2.Sovelluksenkäyttöliittymä:tilausosiojavalikko...........................................13
Kuvio3.Sovelluksenarkkitehtuuri..............................................................................17
Kuvio4.Sovelluksenrajapintapyynnöt.......................................................................18
Kuvio5.Käyttäjänrekisteröiminenpush-viestienvälityspalveluun............................22
Kuvio6.Push-viestienlähettäminen...........................................................................23
Kuvio7.KäyttöjärjestelmänjakodialogiAndroidilla....................................................24
Taulukot
Taulukko1.Cordovantukematkäyttöjärjestelmät.......................................................5
3
1 Lähtökohdat
1.1 Toimeksiantaja
TyöntoimeksiantajaoliInto-DigitalOy,HelsingissäjaJyväskylässätoimivadigitaali-
senmediantoimisto.Into-Digitaltekeepääasiassatoteutuksiamarkkinointiviestintä-
alantarpeisiin:muunmuassasivustoja,teemasivuja,display-mainoksiajamobiiliso-
velluksia.
1.2 Tavoitteet
Toimeksiantajantavoitteenaolitoteuttaaasiakkaallesivustouudistusjasenrinnalle
mobiilisovellusiOS-jaAndroid-laitteille.Opinnäytetyössätarkastellaanerityisestimo-
biilisovelluksentoteutustahyödyntäensivustoarajapintojenvälityksellä.
Toteutettavansovelluksenlähtökohtanaolileikkimielinentilausohje,jotakäyttäjä
pystyyseuraamaanvaihekerrallaan.Tämänideanrinnallesovellukseenpäätettiin
tuodamukaansivustonsisällötsekätoteuttaasovelluksellelisäarvoaantaviaominai-
suuksia,kutensisältöjenjakaminenjailmoituksetsisältöpäivityksistä.Taustallesovel-
lukseensuunniteltiinseurantamittareita,joidenperusteellasovelluksenkäyttäjämää-
ristä,ominaisuuksienkäytöstäjakäyttäjäryhmistäsaataisiintilastoja.
ToimeksiantajaonerikoistunutWordPress-sivustoihinjaWordPressinsisällönhallin-
nanhyödyntämiseenerikoistoteutuksissa.Tästäsyystäseoliilmeinenvalintasivusto-
uudistuksenpohjalle.Sovellustarjosimyösmahdollisuudenlaajentaayrityksenosaa-
mistaWordPressinuuteen,sisäänrakennettuunrajapinta-arkkitehtuuriin.
ToimeksiantajallaolimyösaiempaakokemustaApacheCordovasta,jonkapäälleso-
velluspäätettiintoteuttaa.Kokemuksenlisäksivalinnassaolitaustallamahdollisuus
laajentaamyöhemminWindows-laitteillesekäCordovanpohjautuminenweb-teknii-
koihin,mikäontoimeksiantajanydinosaamista.Toteutusolitoimeksiantajalleensim-
mäinentälläteknologiayhdistelmälläjatoimiisekäreferenssinäettäpohjatoteutuk-
senavastaavilleprojekteille.
4
2 ApacheCordova
2.1 Yleistä
ApacheCordovaonavoimenlähdekoodinsovelluskehitysalusta,jokaonensisijaisesti
tarkoitettusovellustenkehittämiseenuseallemobiilikäyttöjärjestelmälleyhtäaikai-
sesti.Cordovatarjoaakullekintuetullekäyttöjärjestelmällenatiivinrungonsekäraja-
pinnannatiiveihintoimintoihinjasensoreihin.Varsinainenkehitystapahtuujärjestel-
märiippumattomastimoderneillaweb-tekniikoilla.(CordovaOverview2016.)
Tällaistamalliakutsutaanhybridisovelluskehitykseksi.Lopullinensovellusonkäyttä-
jännäkökulmastatäysinnatiivi,muttakäyttöliittymääjalogiikkaaajetaanselainnäky-
mässä,jokatäyttääkokonäyttöalan.Sovelluksensaamyöserivalmistajiensovellus-
kauppoihin.Julkaisuprosessitovatkuitenkinjärjestelmäriippuvaisia,eikäCordovaota
niihinkantaa.
Useallekäyttöjärjestelmällekehitettäessätämäkehitysmallisäästääresursseja,yhte-
näistääkäyttökokemuksenjapäivitykset.Resurssejasäästyy,koskaominaisuuksiaei
tarvitsetoteuttaauseaankertaan,useallaohjelmointikielellä.Tästäsyystämyöskehi-
tystiimionmahdollistapitääpienempänä.Web-tekniikoillatoteutettukäyttöliittymä
käyttäytyypitkältisamallatavallaerijärjestelmissäjaonluonnostaanskaalattavissa
erinäyttöko’oille.Koskaominaisuudettoteutetaankerralla,onpäivityksethelpompi
julkaistaerikäyttöjärjestelmillekerralla.Erisovelluskauppojenhyväksyntäprosessit
voivattosinviivyttääpäivitystä.
Hybridisovellustenkehityksessäonmyöshaasteita.Päällimmäisenäonsaadakäyttö-
liittymätuntumaannatiiviltajareagoimaanyhtänopeastikuinnatiiveissasovelluk-
sissa.Selaimiennykykehityksenmyötätämäonlähinnäoptimointikysymys.Toinen
haasteovatkäyttöjärjestelmieneroavuudet.Esimerkiksikäyttöliittymiengraafiset
ohjeistotvoivatollaristiriitaisia,laitteenfyysisetpainikkeetjasensoriteroavatjase-
laintenominaisuudeteivätolesamallatasolla.
5
2.2 Tuetutkäyttöjärjestelmät
Cordovatukeemarkkinoidenyleisimpiämobiilikäyttöjärjestelmiä,joistaparhaitentu-
ettujaovatiOSjaAndroid.WindowsPhonelleonollutversiosta8lähtientuki,joka
parantuimerkittävästiversioissa8.1ja10,kunMicrosoftyhtenäistityöpöytä-jamo-
biilikehitysalustansa.LisäksiCordovallaonmahdollistakehittäätyöpöytäsovelluksia
Windowsille,OSX:llejamacOS:llesekäUbuntulle(ks.taulukko1).
Taulukko1.Cordovantukematkäyttöjärjestelmät(PlatformSupport2014)
Android Black-
Berry10
iOS Ubuntu Windows
Phone8
Windows
(8.1,10,
Phone8.1)
OSX,
macOS
cordova
CLI
✔Mac,
Windows,
Linux
✔Mac,
Windows,
Linux
✔Mac ✔Ubuntu ✔Windows ✔ ✔Mac
Embedded
WebView
✔ ✘ ✔ ✔ ✘ ✘ ✔
Plugin
Interface
✔ ✔ ✔ ✔ ✔ ✔ ✔
2.3 Natiivilaajennukset
Hybridisovelluskehityksentärkeinedellytysonpystyähyödyntämäänsamojatoimin-
tojakuinnatiivillaohjelmointikielellä.Näinhybridisovelluspystyykilpailemaannatii-
visovellustenkanssajatarjoamaankäyttäjillelisäarvoatavalliseenverkkosivuunnäh-
den.Sovelluskaupatvoivatjopavalvoatätä,esimerkiksiApplevoihylätäsovelluksen
jokaeieroaverkkosivusta(AppStoreReviewGuidelinesn.d.).
Cordovassatämäonratkaistulaajennusrajapinnalla,jonkaavullaalustaapystyyva-
paastilaajentamaan.Laajennuksentoiminnotohjelmoidaannatiiveillakielilläjaniille
määritelläänrajapintaankutsut,joidenkauttatoimintojapystytäänkäyttämäänJava-
Scriptillasovelluksenlogiikasta.(CordovaOverview2016.)
6
Laajennustentoteuttaminenontäysinavointa.Cordovajasenpäällerakennetut
alustattarjoavatlaajennuksiayleisimpiintarpeisiin,muttapääosanlaajennuksistato-
teuttaakehittäjäyhteisö.Laajennustenjakelutapahtuupääasiassajulkistennpm-ja
git-repositorioidenkautta,joidenkauttaasentamistaCordovatukeesuoraan.
2.4 Kehitystyökalujenvalinta
2.4.1 Johdanto
Cordovaavoikäyttääsellaisenaanalustanmukanatulevillakomentorivityökaluilla.
Muttakoskaalustaonavoin,senpohjaltaonrakennettuuseitakehitystyökalujaja-
malleja.Vaihtoehtoisettyökalutratkaisevathybridisovelluskehityksenhaasteitaosa-
alueilla,joihinCordovaeiotakantaa.
Osavaihtoehdoistatarjoaavalmiitakäyttöliittymäratkaisuja,jotkavoivatnopeuttaa
natiivintuntuisensovelluksenkehittämistä,taivalmiitaprojektipohjia,joissaonesi-
asennettunatiettyynkäyttötapaukseentarvittavatlaajennukset.Esimerkkinäensin
mainitusta,IonicinratkaisussakäyttöliittymätoteutetaanAngularJS-alustanpäälleja
mukanatuleelaajakirjastokäyttöliittymäkomponentteja(IonicComponent
Documentationn.d.).Tällainenonerityisenhyväratkaisu,mikälisovelluksenkäyttö-
liittymästähalutaanmyösnatiivinnäköinen.JälkimmäisestäesimerkkinäPhoneGap
tarjoaavalmiinprojektipohjanmuunmuassapush-viestienkäyttöönottoonjavas-
taanottamiseen(PushNotifications2016).
Sovelluksenhelppotestaaminennopeuttaakehitystäjavianetsintää.Cordovassavar-
sinkinnatiivientoimintojentestaaminenonhidasta,koskasevaatiisovelluksenkään-
tämistäjaasentamistaalustakohtaisillatyökaluilla.Laitteentuleemyösyleensäolla
kytkettytietokoneenUSB-liitäntään.Käyttöliittymääonmahdollistatestatasuoraan
työpöytäselaimessa.EsimerkiksiPhoneGapjaMonacatarjoavatkehittyneempiätes-
taustyökaluja.Molemmattukevattestaamistasuoraanlaitteellaverkonylijapysty-
vätpäivittämäänmuutoksettoteutukseenautomaattisesti.Myösennaltamäärätty-
jenlaajennustentestaaminenonmahdollistasuoraan.
Sovelluksenkääntäminenjajulkaiseminenuseallealustallevaatiinormaalistikehittä-
jältäpaljontyötäjakokemusta.Kullekinalustalleonomatkehitystyökalunsa,joiden
7
käyttöönottojakäyttötuleeopetella.Tähänratkaisunaontarjollapalveluita,jotka
kääntävätetänävirtuaalikoneillasovelluksestajulkaisukelpoisenpaketin.Esimerkiksi
PhoneGapillajaMonacallaonomatpalvelunsa,joihinkehittäjäpystyylähettämään
projektinsapaketoitavaksi.
Lisäksiratkaisuvoitarjotaverkkopalveluitajarajapintojatiedonhallintaanjavälityk-
seen.EsimerkiksiMonacatarjoaapalveluitamuunmuassakäyttäjienhallintaansekä
push-viestienjasähköpostienlähettämiseenselainkäyttöliittymänkautta(Monaca
Backendn.d.).Tällöinkehittäjäeivälttämättätarvitsesovelluksentaustallelainkaan
omaapalvelinlogiikkaajatietokantaa.
2.4.2 PhoneGap
TähänprojektiinvalittiinpohjaratkaisuksiPhoneGap.PhoneGaponAdobentuote-
nimiCordovallesekäsitätukevilletyökaluillejapalveluille(Productsn.d.).Työkalui-
hinkuuluvatPhoneGapDesktopappjaPhoneGapDeveloperapp.Maksullisenapal-
velunaAdobetarjoaaPhoneGapBuild-palvelua.PhoneGapeiotakantaakäyttöliitty-
mäntoteutukseen,mikäolieduksitässätoteutuksessa.Markkinointiinsuunnatunso-
velluksenkäyttöliittymähaluttiinrakentaajaoptimoidaalustaalkaenitse.
PhoneGapDesktopappnopeuttaaprojektinperustamistajakehittämistäverrattuna
Cordovankomentorivityökaluihin.Senkäyttöliittymänkauttapystyyperustamaan
projektinjaajamaanpaikallistatestauspalvelinta.Testauspalvelinkäsitteleeauto-
maattisestimuutoksetlähdekoodiin,jolloinsovellustaeitarvitsejatkuvastikääntää
testaamistavarten.TestauspalvelimeenvoiyhdistäätyöpöytäselaimellataiPhone-
GapDeveloperappilla.
PhoneGapDeveloperapponmobiilisovellus,jokaonladattavissasovelluskauppojen
kauttaiOS-,Android-jaWindowsPhone-alustoille.Senavullavoiyhdistääjokojulki-
siinPhoneGap-demoihintaiyleisemminomaantestauspalvelimeenlähiverkossa.Yh-
distämisenjälkeenselataaautomaattisestimuutoksettestauspalvelimelta.Näinke-
hittäjäpystyynopeastitestaamaansovelluksensakäyttöliittymäänatiivissaympäris-
tössä.Testaussovelluseitueautomaattisestilaajennuksia,muttatukeeennaltamää-
rättyäjoukkoasuosittujalaajennuksia.Esimerkiksipush-viestejäpystyytestaamaan
8
heti,kunilmantestaussovellustanevaativatalustakohtaisia,monivaiheisiasertifioin-
tejajarajapinta-avaimiasekäpalvelimen,jokahoitaaviestienlähettämisen.
PhoneGapBuildonmaksullinenpilvipalvelu,jokahoitaasovellustenjulkaisemisenja
paketoinninsovelluskauppojavartenkehittäjänpuolesta.PalvelutukeeiOS-,
Android-jaWindowsPhone-alustojasekäpitkältisamojaennaltamäärättyjälaajen-
nuksiakuinPhoneGapDeveloperapp.Normaalistijulkaiseminentapahtuualustakoh-
taisillakehitystyökaluilla,joistaosaonlisäksisaatavillavaintietyillekäyttöjärjestel-
mille.Palvelusiisyhtenäistääjanopeuttaajulkaisuprosessiavarsinkin,jossovellus
julkaistaanuseammallealustalle.
3 WordPressinREST-rajapinta
3.1 WordPress
WordPressonmaailmankäytetyinverkkosivustojensisällönhallintajärjestelmä.
W3TechsinseurannanmukaanWordPressinmarkkinaosuusoli58,5%sisällönhallin-
tajärjestelmienkeskenjakäyttöaste27,1%seurattujensivustojenkeskenmarras-
kuussa2016(ks.kuvio1).WordPressonavointalähdekoodiajailmainen,jasenkes-
keisiäominaisuuksiaovatyksinkertainenkäyttöliittymä,laajennettavuusyhteisönke-
hittämienlisäosienkauttajaautomaattisettietoturvapäivitykset.
9
Kuvio1.Käytetyimmätsisällönhallintajärjestelmät(Usageofcontentmanagementsystemsforwebsites2016)
3.2 REST-rajapinta
3.2.1 Johdanto
RESTonverkossayleistynytmalli,jokatarjoaaverkkopalveluilleyhtenäisenjahelppo-
lukuisentavantoteuttaarajapintoja.Verkossarajapintamuodostuuhierarkkisistare-
surssilinkeistä(ks.luku3.2.2)jaHTTP-pohjaisistaoperaatioista(Glossary2015):
• GET-pyyntöhakeeyksittäisentietueentaijoukontietueita• PUT-pyyntökorvaayksittäisentietueentaijoukontietueita• POST-pyyntölisäätietueenjoukkoon• DELETE-pyyntöpoistaayksittäisentietueentaijoukontietueita
YleisestiREST-rajapintojenkanssakommunikaatiotapahtuuverkossajokoJSON-tai
XML-formaatissa.Mallieiotatähänkantaa,jayksittäinenrajapintavoitukeayhtätai
useampaaformaattia.WordPressinsisäänrakennetturajapintatukeeoletuksenaai-
noastaanJSON-formaattia.
Rajapintaonollutsisäänrakennettunajoulukuussa2015julkaistustaversiosta4.4läh-
tien(Mullenweg2015)jajositäennenerillisenälisäosana.Sisäänrakennettuversio2
tarjoaakehikonrajapinnoille,muttajulkisetpäätepisteetpitääottaakäyttöönjoko
0 10 20 30 40 50 60 70
Blogger
Magento
Drupal
Joomla
WordPress
Markkinaosuus(%) Käytössäsivustoilla(%)
10
virallisellaWordPressRESTAPI(Version2)-lisäosallataitoteuttamallaomatpääte-
pisteetprojektintarpeidenmukaan.Lisäosatarjoaapääsynläheskaikkeensivuston
julkiseensisältöön,lukuunottamattametatietoja(ks.luku3.2.5).Nämävalmiitpää-
tepisteetpyrkivätolemaankaikenkattavia,minkäkääntöpuolenaomienpäätepistei-
dentoteutusvoiollatarpeentiedonsiirronjasuorituskyvynoptimoimiseksi.
Rajapintatukeemyöskirjautumista.Kirjautuneenkäyttäjännimissävoidaanhakea
myösjulkaisematontasisältöäsekäsuorittaaylläpitotoimenpiteitä.Tälleeikuiten-
kaanolluttarvettatässäprojektissa.
3.2.2 Rajapinnanrakenne
WordPressintarjoamarajapintaonvahvastiristiinlinkitettyjaitseäändokumentoiva.
Rajapinnanjuuripäätepisteestäosoitteessa/wp-json/onhaettavissakaikkirajapin-
nannimiavaruudetjaniidenmäärittelemätpäätepisteet,mukaanlukienkehittäjän
itselisäämät.
WordPressRESTAPI(Version2)-lisäosakäyttäänimiavaruutta/wp/v2.Senoudattaa
pitkältiWordPress-sivustonrakennetta:
• /types:sisältötyypit,oletuksenapost,pagejamedia• /statuses:sisältöjentilat,oletuksenapublishelijulkinen• /taxonomies:sisältöjentaksonomiat,oletuksenacategoryjapost_tag• /comments:käyttäjienkommentitsisällöille• /[slug]:tietynsisältötyypinsisällöttaitaksonomiantermitovathaettavissa
slug-nimillä
SlugonWordPressintermiverkko-osoitteissakäytettävilletunnisteille.Nevoivatsi-
sältäävainpieniäkirjaimiajatarvittaessaväliviivojasanojenvälissä.Esimerkiksisivus-
tonkaikkisivutonmahdollistahakeapäätepisteeltä/pages,eliosoitteesta/wp-
json/wp/v2/pages.
3.2.3 Sivustonrakenne
TässäprojektissaWordPressinsisältörakennettalaajennettiinomillasisältötyypeillä
jataksonomioilla.Määrittelemälläsisältörakenneasiakkaantarpeidenmukaansel-
11
keyttääsekäsisällönhallintaaettärajapinnantoteutustajakäyttöä.Omatsisältötyy-
pitlisättiinsivustonerisisältöosioille:Galleria(gallery),Tuotteet(products)jaHisto-
ria(history).Galleriaavartenluotiinmedia-taksonomiamateriaalienluokitteluun.
Myössisäänrakennettujasisältötyyppejäkäytettiinniidensoveltuessatarkoitukseen.
Yksittäisiintekstisivuihinkäytettiinvalmistapage-sisältötyyppiä.Käyttämätönpost-
sisältötyyppipiilotettiinkokonaansisällönhallinnasta.
Uudetsisältötyypitjataksonomiatlisätäänluontivaiheessarajapinnalla/wp/v2-nimi-
avaruuteenantamallarekisteröintifunktiolleargumenttishow_in_restarvollatrue.
register_post_type('gallery', array( … 'show_in_rest' => true, 'rest_base' => 'gallery' ) ); register_taxonomy('media', array('gallery'), array( … 'show_in_rest' => true, 'rest_base' => 'medium' ) );
3.2.4 AdvancedCustomFields-laajennus
ProjektissakäytettiinkattavastiAdvancedCustomFields-laajennusta.ACF:navulla
sivustonylläpitäjäpystyylaajentamaanjajäsentelemäänsisällönhallintaauusillasi-
sältökentilläja-rakenteilla.Hyvinsuunniteltunasehelpottaaylläpitoajaeriyttääyllä-
pidettävänsisällönsenjulkisesta,visuaalisestaesittämistavasta.ACFtallentaakuiten-
kintiedotyhtenäisestiWordPressinmetatietoihin.Laajennuksenperusversioonil-
mainen,jasiitäonolemassapro-versio,jokatarjoaauseitahyödyllisiälisäominai-
suuksia.(Condon2016.)
KoskametatiedoteivätolesaatavillajulkistenREST-päätepisteidenkautta(ks.luku
3.2.5),ACF-tiedottuleejokohakeaitsetailisätäautomaattisestijulkisiinpäätepistei-
siinACFtoRESTAPI-laajennuksenavulla.
12
ACFtoRESTAPIlisääautomaattisestiACF-sisällötosaksi/wp/v2-nimiavaruutta.Esi-
merkiksituoteartikkelintiedoistalöytyyacf-niminentietue,jonkaaltalöytyytuot-
teelleliitetytlisätiedot,kutenvalmistusaineetjaravintosisältö.Lisäosatarjoaamyös
oman/acf/v2-nimiavaruudenyksittäistentietojenhakemiseenjamuokkaamiseen.
3.2.5 Rajoitukset
REST-rajapinnanolennaisinrajoitusonmetatietojenkäsittelyssä.Julkistenpäätepis-
teidenkauttametatietoihineipääselainkaan,koskanevoivatjulkisensisällönlisäksi
sisältääylläpitäjienyksityisiäjasivustonsuojattujatietoja.Lisäksimetatiedotvoivat
sisältääserialisoituadataa,jonkakäsittelyonestettymyösteknisistäjatietotur-
vasyistä.(CommonProblems2016.)
Näitärajoituksiaonmahdollistakiertääharkitenvalmiillalaajennuksillajaitseteh-
dyilläpäätepisteillä.Jälkimmäisessävaihtoehdossahaettavattiedotonmyösmahdol-
listarajoittaatoteutuskohtaisesti.
4 Mobiilisovellus
4.1 Käyttöliittymä
4.1.1 Rakenne
Sovellukseensaatiinasiakkaaltarautalangatjagraafisetelementit.Mobiilisovelluk-
sissakäytetäänyleisestikiinteäälatauskuvaakäynnistyksenaikana,tässätapauksessa
käytettiintasaisenmustaakuvaa.Käynnistymisenjälkeenmustalletaustalleanimoi-
tiinlogo,käyttöliittymäelementitjaaloitusnäkymä.Sovellusalkaatilausosiosta,jossa
käyttäjävoiseuratavaihevaiheeltaohjeitatilaamiseen.Vaiheidenvälilläliikutaan
jokosivullepyyhkäisemällä,nuolipainikkeistataiotsikoistanapauttamalla.Valikko-
painikkeenkauttapääseemuihinsovelluksenosioihin:galleria,tuotteetjahistoria
(ks.kuvio2).
13
Kuvio2.Sovelluksenkäyttöliittymä:tilausosiojavalikko
Galleria-osiossalistataanallekkainasiakkaanmarkkinointimateriaalia.Listaustavoi
rajatamediantyypinmukaan,esimerkiksiYouTube-videoihin,printtimainoksiintai
ulkomainoksiin.Galleriaonsovelluksenaktiivisinosio,sensisältöpäivittyysäännölli-
sestijakäyttäjilläonmahdollisuusjakaagallerianmateriaalia.Materiaalinohessa
näytetäänkäyttöjärjestelmängraafisenohjeistonmukainenjakopainike,jokaavaa
käyttöjärjestelmänjakotoiminnon(ks.luku4.5).
Tuotteetesitetäänpyyhkäisemällänavigoitavinatuotekortteina,samallarakenteella
kuintilausosionvaiheet.Historia-osiostalöytyyaikajanaasiakkaanbrändillemerkittä-
vistävuosista.Vuodetesitettiinjanallavisuaalisestisiten,ettänevuorottelevatjanan
vasemmallajaoikeallapuolella,lähtienalkuvuosistajapäättyennykyhetkeen.
4.1.2 ValitutHTML5-tekniikatjaJavaScript-kirjastot
SovelluksenkäyttöliittymätoteutettiinJavaScript-pohjaisesti,jottakaikkisenosa-alu-
eetolivatoptimoitavissajajottasesaatiinvaikuttamaanmahdollisimmannatiivilta.
KäyttöliittymäkirjastoksivalittiinRactive.js,jokasitoosisällönelidatanHTML-pohjiin,
joistakäyttöliittymäkoostuu(Harris2016).Tämätarkoittaa,ettämuutoksetsisältöön
päivittyvätautomaattisestikäyttöliittymäänjasovelluslogiikantarvitseehuolehtia
vaindatastatietämättämitäänsenesitystavasta.
14
Lisäksikäyttöliittymänosa-alueidentoteutuksessakäytettiinRactiveatukeviaJa-
vaScript-kirjastoja.KosketusnäyttöjenkosketustenkäsittelyynkäytettiinHammer.js-
kirjastoa,jokamuuttaakosketusnäytöiltäsaatavandatanhelpostikäsiteltäviksita-
pahtumiksi,kutennapautuksiksijapyyhkäisyiksi.Hammer.jsonintegroituRactiveen
ractive-touch-laajennuksella(Cruz2015).Yleinenkäyttötapaussovelluksessaolisisäl-
lönvaihtaminenpyyhkäisemälläsivuille.TähänkäytettiinSlick-karusellikomponent-
tia,jokahoitaasivuttaissiirtymätsulavasti,skaalautuunäyttökoonmukaanjaonoh-
jattavissaJavaScriptilla(Wheeler2016).NäidenlisäksikäytettiinjQuery-yleiskirjastoa
viestintäänkomponenttienvälilläjapaikkaamaanosa-alueita,joihinedellämainitut
eivätsoveltuneetjajotkaolisivatolleettyöläämpiätoteuttaapelkälläJavaScriptilla.
Datansäilyttämiseenjakäyttäjienvalintojenmuistamiseenkäytettiinselaimiinsi-
säänrakennettuaLocalStorage-rajapintaa.
4.1.3 Ractive.js-käyttöliittymä
Ractive.js:lläkäyttöliittymänvoikoostaakomponentteina,jotkaliitetääntavalliseen
HTML-dokumenttiin.YksittäinenkomponenttikoostuuHTML-pohjasta,datastajata-
pahtumienkäsittelystä.TavallisenHTML:nlisäksiRactivenpohjissakäytetäänlaajen-
nettuamustache-syntaksiadatansitomiseensekäomiaattribuuttejatapahtumien
käsittelyynjasiirtymäanimaatioidenkiinnittämiseen(Harris2016).Yksinkertaisin
tapatoteuttaapohjaonsisällyttääseHTML-dokumenttiinscript-elementtinä,johon
voidaanviitataid-attribuutilla.
15
<script id="order-template" type="text/ractive"> <main id="main" class="site-main swipe-navigation" role="main"> {{#each instructions}} <article id="order-{{index}}" class="step"> <div class="entry-content"> <h3>{{instruction}}</h3> {{#graphic}} <div class="graphic"><img class="wp-post-image" src="{{graphic}}" alt="" on-load="downsize" /></div> {{/graphic}} </div> </article> {{/each}} </main> <button on-tap="previousstep" class="previous-step step-ar-row"></button> <button on-tap="nextstep" class="next-step step-arrow"></but-ton> </script>
Kaikkimustache-tyylinensyntaksionkahdenaaltosulunsisässäjaensinvoitullaope-
raatio,jotaseuraaainamuuttuja.Esimerkkipohjassainstructionsontaulukko,jonka
jokaiselletietueelleluodaan#each-operaatiollaarticle-elementti.Mikälitietueellaon
kuvagraphic-muuttujassa,luodaansilleelementti#-operaatiolla,jokavastaaif-ehto-
lauseketta.Mikäliaaltosuluissaonainoastaanmuuttujailmanoperaatiota,muuttu-
jansisältötulostetaantekstinä.KolmellaaaltosulullaonmahdollistatulostaaHTML-
sisältöä.
Lisäksipohjassaonkäytettyon-load-jaon-tap-attribuuttejatapahtumienkiinnittämi-
seen.Attribuutinarvonaannetaantapahtumannimi,toisinkuinperinteisissäJa-
vaScript-attribuuteissa,joissaarvoonsuoritettavaaohjelmakoodia.Pohjaotetaan
käyttöönJavaScript-logiikassaluomallauusiRactive-instanssi.Allaolevassaesimerkki-
koodissaluodaaninstanssi,jolleannetaanargumenttinaaiemmanHTML-pohjanidja
idHTML-elementille,johoninstanssikiinnitetään.Viimeisenäargumenttinaannetaan
data-muuttuja,jokavälitetäänHTML-pohjalle.Muutoksetdata-muuttujaanpeilataan
16
automaattisestipohjaan.Instanssinluomisenjälkeensiihenkiinnitetääntapahtumien
käsittelijätpohjassaannetuillanimillä.
app.view.order = new Ractive({ template: '#order-template', el: '#order-view', data: { instructions: [], } }); app.view.order.on('downsize', app.downsize); app.view.order.on('nextstep', app.nextstep); app.view.order.on('previousstep', app.previousstep);
Ractivesoveltuiprojektiinhyvin,koskaseolihelpposovittaaerilliseenlogiikkaanja
HTML-pohjiinpystyttiinhyödyntämäänWordPress-sivustonlähdekoodeja.Käyttä-
mälläRactiventap-tapahtumiaJavaScriptinclick-tapahtumiensijastapystyttiinmyös
kiertämäännoin300millisekunninviivetapahtumansuorittamisessa.Oletuksena
kosketusnäyttölaitteillaonselainpohjaisissatoteutuksissaviivettä,koskaselaimenpi-
tääodottaasuorittaakokäyttäjätuplanapautuksen.Sovelluksessaviiveenkiertämi-
nenonolennaista,koskaviivesaasovelluksenkäyttöliittymänvaikuttamaanlaiskalta.
4.2 Sovellusarkkitehtuuri
SovelluslähteeliikkeelleCordovanperusrakenteella.HTML-dokumentinlopussala-
dataanJavaScript-kirjastot:ensinCordovanoma,sittenkehittäjänvalitsematjalo-
puksikehittäjänomalogiikka.Näidenlatauduttuakiinnitetäänkäsittelijätkeskeisille
tapahtumille,kutenverkkoyhteydenmuutoksille,sovelluksensulkemisellejauudel-
leenavaamiselle.TässävaiheessaCordovanlaajennukseteivätolevieläkäytössäja
logiikantuleeodottaadeviceready-tapahtumaaCordovalta.
KunCordovaonladannutlaajennukset,voidaanvarsinainensovelluslogiikkakäynnis-
tää.Ensimmäisenäpyritäänalustamaansovelluksenvälimuistioffline-käyttöävarten
(ks.luku4.3),otetaankäyttöönpush-viestit(ks.luku4.4)jaluodaantilausosionkäyt-
töliittymäinstanssi.Seuraavaksikäyttöliittymällehaetaansisällötkeskitetyllärajapin-
tapyyntömetodilla.Metodihakeeensintilausosiondatanvälimuististajapalauttaa
senvälittömästicallback-metodille,jottakäyttöliittymäonhetikäytettävissä.Sitten
17
metodivälittääpyynnönREST-rajapinnallejasaatuaanvastauksenpäivittäävälimuis-
tinjapalauttaapäivitetyndatan(ks.kuvio3).Dataviedäänkäyttöliittymäinstanssille,
jokapeilaamuutoksetautomaattisestikäyttöliittymään.
Kuvio3.Sovelluksenarkkitehtuuri
Käyttäjänvaihtaessaosiotasuoritetaansamaprosessikaikillelopuilleosiolleyhtäai-
kaa.Ajatuksenaoli,ettäyksihiemanpidempilataustarjoaaparemmankäyttökoke-
muksenkuinlataaminenjokaisenosionkohdalla.Osioilleluodaansiiskäyttöliitty-
mäinstanssitjahaetaansisällötrinnakkaisillarajapintapyynnöillä(ks.kuvio4).Lo-
giikkapitääkirjaasuoritetuistapyynnöistäjatekeevielätaustallatoimenpiteitä,kun
kaikkiinpyyntöihinonsaatuvastaus.
Mikälikäyttäjäonhyväksynytpush-viestit,tuleegalleriapäivityksistäilmoitus.Josso-
vellusonkäynnissä,niinnäytetäänilmoitussovelluksessa,muussatapauksessasenä-
kyykäyttöjärjestelmäntilarivillejamahdollisestilukitusnäkymässä.Joskäyttäjäavaa
ilmoituksen,avautuusovelluksengallerianäkymä,jossauusisisältöonnähtävissä.
Galleriassakäyttäjävoimyösjakaasisältöänatiivillajakodialogilla(ks.luku4.5).
18
Kuvio4.Sovelluksenrajapintapyynnöt
4.3 Offline-käyttö
4.3.1 Johdanto
Sovelluksenkeskeisetsisällöttuliollakäytettävissämyösilmanverkkoyhteyttä.Tä-
häntarkoitukseentoteutettiinLocalStorage-pohjainenpaikallinentietokantajasynk-
ronointiprosessi,jokahoitaasäännöllisestimuuttuvansisällönpäivittymisen.
Lisäksisovellukseensisällytettiinsiemendataa,jollatietokantaalustetaan.Näinsovel-
luksentärkeimmätosiotovatkäytettävissä,vaikkeilaitteellaolisiensimmäiselläkäyn-
nistykselläverkkoyhteyttä.Jakäänteisestitärkeimmätkinosiotovatpäivitettävissä,
koskanekäyttävätalustettuatietokantaasensijaan,ettädataolisikiinteästiupotet-
tunalähdekoodiin.Alustaminentapahtuuensimmäiselläkäynnistyskerrallajatarvit-
taessasovelluspäivityksenjälkeen.
4.3.2 LocalStorage-tietokanta
LocalStorageonyksinkertainenlistaavain-arvo-parejajasoveltuuREST-rajapinnan
pyyntöjenpitkäaikaiseentallentamiseen.Avaimenatoimiirajapintapyynnönosoite,
jaarvoksitallennetaanJSON-muotoinenmerkkijono.NäinLocalStorageavoikäyttää
19
saumattomastirajapintapyyntöjenvälimuistina,eikävarsinaisenlogiikantarvitsetie-
tää,saatiinkopyydettydatapalvelimeltavaisuoraanvälimuistista.
LocalStoragesoveltuukuitenkinvainrajallisellemäärälletietoa.Yhdensivustontai
sovelluksenkäyttämätilaonrajoitettu,pienimmillään5megatavuun.LisäksiLocal-
Storagensuorituskykyhuononeemerkittävästisuurillamäärillätietoa.Tällöinkan-
nattaaharkitalaajennustenkäyttöä,joillavoitallentaavapaastilaitteentiedostojär-
jestelmääntaiesimerkiksiLocalStorageatehokkaampaanSQLite-tietokantaan.
(Storage2016.)
TämänprojektintarpeisiinLocalStoragentilaontäysinriittävä,eikärajapinnanväli-
muistinakäyttövaadisuorituskykyynvaikuttaviatoimenpiteitä.Erirajapintapyyntöjä
onrajallisesti,eikäniidenmääräkasvaajanmyötä.JSON-merkkijonojenkäsittelyon
ainoakuormittavatoimenpide,muttasesuoritetaanrajapintapyynnöillevälimuisti-
ratkaisustariippumatta.
4.3.3 Online-synkronointi
Sovelluspyrkiipäivittämääntietokannantiedotjokaisellakäynnistyskerralla,joslait-
teellaonverkkoyhteys.Kaikkeatietoaeikuitenkaanpäivitetäkäynnistyksenyhtey-
dessä,vaantarpeenmukaan.Ainoastaanaloitusnäkymäntiedotpyritäänhakemaan
hetikäynnistyksessä.Muidenosioidentiedothaetaan,kunkäyttäjäsiirtyyniihinnavi-
gaationkautta.Näinsynkronointivaikuttaaminimaalisestisuorituskykyynaloitusnä-
kymässä.Muissaosioissataasvoiollahavaittavalatausviive,jokakuitenkinminimoi-
daankäyttämälläpaikallisentietokannantietojajosynkronoinninaikana.Tämäopti-
mointinoudattaamyösasiakkaanprioriteetteja:heillealoitusnäkymäontärkeinosio,
jamuusisältöonvainsitätukemassa.
Varsinainensynkronointiprosessionerittäinkevyt.Rajapinnaltaladataanvainmuu-
tamakilotavutietoaaloitusnäkymään,jakehitysvaiheessakaikkienosioidentiedon-
siirtoolialle20kilotavua.Siirtomääräänvaikuttaamerkittävästi,ettärajapintapalve-
limellaonkäytössäpyyntöjengzip-pakkaus.Pakkauspienentäämerkittävästiteksti-
muotoisentiedonsiirtoa,esimerkkitapauksessatiedonsiirtoolivain16%pakkaamat-
tomastadatasta.Synkronoinninlisäksiliikennettävoikuitenkintullakuvienjavideoi-
denlataamisestasivustoltajaulkopuolisiltatarjoajilta.
20
4.4 Push-viestit
4.4.1 Johdanto
Sovelluksenkeskeinenominaisuusonvastaanottaapush-viestejäsisältöpäivityksistä.
Push-viestitarkoittaasovelluskohtaistailmoitusta,jokatuleekäyttäjänlaitteelleriip-
pumattasiitä,onkosovelluskäynnissä.Käyttäjämyöskontrolloi,mitäviestejähaluaa
vastaanottaa.Näistäsyistäviestiarkkitehtuurionuseimmitentoteutettukäyttöjärjes-
telmäntasollajaviestitkulkevatkeskitetynvälityspalvelunkautta.
4.4.2 Välityspalvelut
Välityspalvelutovatpitkältikäyttöjärjestelmäkohtaisia.iOS-järjestelmäänoninteg-
roituApplePushNotificationService(APNS)jaAndroidilleontällähetkelläGoogle
CloudMessaging(GCM)jasenvähitellenkorvaavaFirebaseCloudMessaging(FCM).
MolemmatGooglenpalvelutkuitenkintukevatmyösiOS-laitteillelähettämistävälit-
tämälläviestejäedelleenAPNS:lle.
4.4.3 Käyttöönotto
Koskaarkkitehtuurieioleaivanyksinkertainenjarajapintojaonuseita,onpush-vies-
teihintarjollalukuisialaajennuksiajakolmannenosapuolenpalveluita.PhoneGapilla
onviesteilleomalaajennusjatukiniidentestaamisellekehitystyökaluissa.Laajennus
hoitaaalustariippumattomastilaitteidenrekisteröinninvälityspalveluihinjaviestien
vastaanottamisen.WordPressilletaasonPushNotificationsforWordPress-laajen-
nus,jokahoitaakäyttäjätunnisteidentallentamisenjaviestienlähettämisenkäyttä-
jille.Kehittäjänvastuullejäävielävälityspalveluidenkäyttöönotto.
Välityspalvelutvaativatkäyttöönotossasovelluksenrekisteröimisen,jolloinkehittäjä
saapääsyoikeudenpalvelunrajapintaan.APNS:äävartentämävaatiisertifikaattitie-
dostonluomistajapush-oikeutuksenliittämistäsovelluksenprofiiliinApplenDevelo-
per-sivustolla(AddingCapabilities2016).Googlelletaasilmoitetaansovelluksentun-
nistejapalvelimenosoite,jotavastaansaadaanrajapinta-avainjasovelluskohtainen
tunniste(SetupaGCMClientApponAndroid2016).Sertifikaattijarajapinta-avain
tallennetaanWordPress-laajennuksenasetuksiinjasovelluskohtainentunnistePho-
neGap-laajennuksenasetuksiin.
21
4.4.4 Käyttäjänrekisteröinti
Ensimmäiseksikäyttäjältäpyydetäänsovelluksessalupalähettääpush-viestejä,jol-
loinlaiterekisteröidäänsovelluksentunnisteellevälityspalvelussa.Sovellussaaväli-
tyspalvelultakäyttäjätunnisteen,jokatuleetallentaamyöhempääkäyttöävartenesi-
merkiksipalvelimentietokantaan(ks.kuvio5).
// Laajennuksen käyttöönotto ja lupakyselyn // esittäminen ensimmäisellä käyttökerralla var push = PushNotification.init({ "android": { "senderID": "453044274800", "icon": "notification" }, "ios": { "sound": true, "vibration": true, "badge": true }, "windows": {} }); // Laitteen rekisteröinti onnistui push.on('registration', function(data) { // data.registrationId sisältää laitteen tunnisteen, // joka lähetetään WordPress-laajennukselle talteen });
// Laitteen rekisteröinti epäonnistui, yleensä johtuen // virheellisistä asetuksista kehitysvaiheessa
push.on('error', function(e) { });
22
Kuvio5.Käyttäjänrekisteröiminenpush-viestienvälityspalveluun
4.4.5 Käyttö
Kunkäyttäjillehalutaanvälittääviesti,selähetetäänsivustoltakäyttäjätunnisteiden
kanssavälityspalvelulle,jostakäyttäjänlaitesaaviestin.Joskäyttäjävalitseeviestin,
avaakäyttöjärjestelmävälityspalvelimellerekisteröidynsovelluksenjavälittääsille
viestiinkiinnitetyndatan(ks.kuvio6).
push.on('notification', function(data) { // Käyttäjä sai viestin ja aktivoi sen, // data sisältää tietoa WordPress-laajennukselta });
23
Kuvio6.Push-viestienlähettäminen
4.5 Natiivijaot
Jakotoimintoavartenotettiinkäyttöönkolmannenosapuolensocialsharing-laajen-
nus.Sentoimintaperiaateonhyvinyksinkertainen:laajennuksellelähetetäänotsikko,
viestijajaettavatiedostottaiverkko-osoite,jolloinseavaakäyttöjärjestelmänjako-
dialoginjakäyttäjävoijakaasisällönmillätahansajakamistatukevallasovelluksel-
laan.Käytännössätoteutusvaatiikuitenkintasapainoiluakäyttöjärjestelmienjaso-
vellustenkäyttäytymisenmukaan.(Verbruggen2016.)
Sovelluksessajakotoimintokiinnitettiingalleriaosionkaikkienmateriaalienyhteyteen
(ks.kuvio7).Koskaotsikkotietoakäyttivätvainharvattestatuistajakosovelluksista,
eikävarsinaistapidempääviestiäollut,käytettiinotsikkonajaviestinäsamaatekstiä.
JosjaettavasisältöoliYouTube-video,niinlaajennuksellevietiinvideonverkko-osoite
url-muuttujassa.Useimmattestatuistasovelluksistaosasivatupottaavideonsuoraan
jakoontainäyttääesikatselun,jostaaukeaaYouTube-sovellus.Muissatapauksissavi-
deolinkkiaukeaavähintäänlaitteenselaimeen.Kuvientapauksessalaajennukselle
vietiinkuvanosoitefiles-taulukkoonjaurl-muuttujajätettiintyhjäksi.Testatutsovel-
luksetjakoivatkuvanluotettavastivain,josjakooneiliitettyerillistäjako-osoitetta.
24
Tällöinkuvatulilähesainanäkyviinsuoraanjakoon,olipakyseessämultimediaviesti
taisosiaalisenmediankanava.
function share (event, subject, image, url) { if ('socialsharing' in window.plugins) { var options = { subject: subject, message: subject, url: url, files: null }; if (image) { options.files = [image]; } window.plugins.socialsharing.shareWithOptions(options); }
},
Kuvio7.KäyttöjärjestelmänjakodialogiAndroidilla
4.6 Seuranta
Sovelluksenasennustenseurantaonnistuusovelluskauppojenhallintapaneeleista,
joistanäkeeasennustenkokonaismääränjaaikajananasennuksistapäiväntarkkuu-
della.Tarkempaakäytönseurantaavartensovellukseenasennettiingoogle-analytics-
25
laajennus.LisäksiharkittiinFacebook-laajennuksenjasenseurannankäyttämistä,
muttasilleeilopultakoettutarvetta.
SeurantaavartensovellustuleerekisteröidämobiilisovelluksenaGoogleAnalytic-
sissa.Käyttöönottoavartensaadaanvastaavatunniste(TrackingId)kuinverkkosivus-
tonseurantaan.Sovelluksenosioidenvälillänavigointiseurataansivulatauksinaja
kaikkimuuttoiminnottapahtumina.Tilausohjettaseurataantarkimmin,jottapysty-
täänmittaamaankäyttäjienkiinnostusta.Ensinmitataanaloittaakokäyttäjäohjeen
käytönsiirtymälläensimmäisestävaiheestaeteenpäin.Jokainenvaihekirjataanjär-
jestysnumeronmukaan,jottanähdäänkuinkapitkällekäyttäjätkeskimäärinselaavat
ohjettajakuinkamontaprosenttiajatkaaseuraaviinvaiheisiin.Joskäyttäjäseuraa
ohjettaloppuunsaakka,kirjataanselopuksiomanatapahtumaan.Tilausosionlisäksi
seurataankäyttäjänliikkumistatuotekorttienvälilläsekäpaljonkokäyttäjätjakavat
gallerianmateriaaliajamitämateriaaliajaetaaneniten.
TässäprojektissaFacebookinseurannastaluovuttiin,muttasillevoiollakäyttöäjat-
kossa.AnalyticsintapaansovellustuleerekisteröidäFacebook-sovellukseksi.Tämän
jälkeenlaajennusotetaankäyttöönFacebookinantamillatunnisteillajaseurannan
perusominaisuudettoimivatautomaattisesti.Facebookmittaasovelluksenasennus-
jakäynnistyskerratsekäkäyttäjiendemografiatietoja,kutensukupuoli-jaikäja-
kaumaa.Facebookpystyykeräämäändemografiatietoja,koskasesaatietoakäyttä-
jistään,josnäilläonsamallalaitteellaasennettunamyösFacebook-sovellus.Jatkossa
kerättyjätietojapystyykäyttämäänmyösmainostenkohdentamiseensovelluksen
käyttäjilleFacebookissa.
4.7 Muutlaajennukset
EdelläkäsiteltyjentoiminnallistenlaajennustenlisäksiCordovalleonlukuisiayleis-
hyödyllisiälaajennuksia.Network-information-laajennusseuraaverkontilaajailmoit-
taatilanmuutoksista.Sovelluksessasitäkäytetäänrajapintapyyntöjenyhteydessä
tarkkailemaan,onkokäyttäjäonline-tilassa.Mikäliverkkoyhteyttäeioletaisekat-
keaapyyntöjenvälissä,sovellusturvautuuoffline-välimuistiin.Device-laajennustun-
nistaalaitteenkäyttöjärjestelmänjaversion.Optimitilanteessasovelluslogiikkaeiole
26
riippuvainenjärjestelmästä,muttalaajennuksestaonsiltihyötyä.Sovelluksessakäyt-
töjärjestelmätietoatarvitaanpush-viestienrekisteröintiinjalisäksisevietiinHTML-
dokumenttiinluokkana.HTML-luokanavullatyylejäpystyttiinhelpostikohdistamaan
järjestelmänmukaan,esimerkiksijakopainikkeissajärjestelmienomiajakosymbo-
leita.
iOS-alustalleasennettiinwkwebview-engine-laajennus,jokaottaakäyttöön8-version
mukanajulkaistunWKWebView-selainkomponentin.Cordovakäyttääyhäoletuksena
vanhaaUIWebView-komponenttia,jokaeioleenäätäysinajantasainen.Esimerkiksi
näkymiävierittäessävanhakomponenttipysäyttääkäyttöliittymänjavieritykseen
pystyttiinreagoimaanvastasenloputtua.Uudenkomponentinsaakäyttöönlaajen-
nuksella,muttatällähetkelläCordovanvirallisessalaajennuksessaonuseitahaas-
teita.SovelluksessakäytetäänIonicinjatkokehittämääversiota,jossauseimmathaas-
teetonratkaistu.(CordovaWKWebViewEngine2016.)
Näidenlisäksikäytössäolivatsplashscreen-jastatusbar-laajennukset.Kunkäyttöjär-
jestelmänkontrolloimalatauskuvakatoaahetisovelluksenkäynnistyttyä,
splashscreen-laajennusjatkaasennäyttämistäkäyttöliittymäelementtinäjakehittäjä
voiitsepiilottaasenalustettuaankäyttöliittymänjatoteuttaasulavammansiirtymän
sovellukseen.Statusbar-laajennuksellapystytäänkontrolloimaankäyttöjärjestelmän
tilarivinnäkyvyyttäsovelluksenkäytönaikana.
5 Tulokset
Projektissaasiakkaalletoteutettiinmobiilisovellusjasivustouudistus.Lopputulosvas-
tasiasiakkaanmäärittelyäjakaikkisuunnitelluttoiminnotsaatiintoteutettua.Projek-
tintyömääräpysyipitkällearvioidussa,muttaylittyihiemankommentointikierrosten
yhteydessä.Projektintekniseentoteutukseenarvioitiin25työpäivääjalopultasiihen
käytettiinnoin27,5työpäivää,mikäoli10%ylitysarvioidusta.Aikataulullisestipro-
jektieiollutkiireellinen,kirjoitusvaiheessatoteutusonluovutettuasiakkaallesisäl-
lönsyöttöävartenjaodottaajulkaisua.
Projektissatoteutettiinmyösuseitaratkaisuja,joitatoimeksiantajapystyyhyödyntä-
määnvastaavissaprojekteissa.Mobiilisovellukseentoteutettiinyleispäteväprosessi
27
REST-rajapinnanhyödyntämiseen.Tekemällärajapintapyynnötkeskitetystijatallen-
tamallaneLocalStorage-pohjaiseenvälimuistiin,sovelluspystyikäyttämäänonline-
sisältöätehokkaastiriippumattaverkkoyhteydennopeudestataitilasta.Samoin
push-viestienkäsittelystätoteutettiinesimerkkiratkaisu.Sovelluksessaotettiinpush-
viestitkäyttöönkäyttäjänluvalla,rekisteröitiinkäyttäjänlaiteviestipalveluunjakäsi-
teltiinpush-viestinyhteydessäsaatuadataa.Lisäksisovellukseentoteutettiinpohja-
ratkaisutnatiivienjakotoimintojenkäyttämiseensekäsovelluksenkäytönseurantaan
GoogleAnalyticsilla.
MyösWordPressinsisällönhallintaantehtiinhyödynnettäviäratkaisuja,kutenREST-
rajapinnankäyttöönottojapush-viestilaajennuksenvalinta.Rajapinnankäyttöön-
otossaratkaistiinmyösomiensisältötyyppienjaACF-laajennuksellatehtyjentieto-
kenttienlisääminenrajapintaan.Valitunpush-viestilaajennuksenavullasisällönhal-
lintahoitaasekälaitetunnisteidenrekisteröinnin,ettäpush-viestienlähettämisen
saumattomastisisältöpäivityksienyhteydessä.
Kokonaisuudestasaatiinmyöstoimeksiantajallereferenssimyynninkäyttöön.Keski-
tetystiylläpidettävääsivusto-jamobiilisovelluskokonaisuuttaonhelppotarjotaasi-
akkaille.Tässävaiheessareferenssinperusteellaonsaatuyksitarjouspyyntövastaa-
vastatoteutuksesta.
6 Pohdinta
Opinnäytetyönkirjallisessaosuudessatarkasteltiinmobiilisovelluksenjasivustonra-
japinnantoteutusta.TyössäkäsiteltiinensinyleisestiApacheCordovaajaWordPres-
sinREST-rajapintaajasenjälkeenmobiilisovelluksenkeskeisiäominaisuuksia.
Cordovanohessatutustuttiinmyösmuutamaansiihenpohjautuvaankehitysratkai-
suunjaniidenhyötyihin.Ioniconerinomainenratkaisunatiivinkäyttöliittymänko-
koamiseen,muttaeitarjonnuttyökalujasovelluksentestaamisenlaitteilla.Monacaja
AdobePhoneGaptaaseivätotakantaakäyttöliittymäntoteutukseen,muttatarjosi-
vattestaustyökalujasekämaksullisialisäpalveluita.Monacallaolikattavammatpalve-
lut,joilleeikuitenkaantässäprojektissaolluttarvetta.Senpalveluidenavullaolisi
kuitenkinmahdollistatoteuttaavastaavasovellusilmanomaasivustoataustalla.Pro-
28
jektinkehitykseenvalittiinPhoneGap,koskasentestaustyökalutolivaterittäinhelp-
pokäyttöisetjanatiivejatoimintoja,kutenpush-viestejäpystyttiintestaamaanlen-
nosta.
WordPressinsisäänrakennettuREST-rajapintaolivarsinhelppoottaakäyttöön.Asen-
tamallavirallinenlaajennussaatiinkäyttöönvalmiitpäätepisteet,jotkakattavatlähes
kaikenjulkisensisällön,myösomatsisältötyypit.Niidenlisäksiyhteisöonkehittänyt
runsaastilaajennuksia,jotkalaajentavatvalmiidenpäätepisteitämahdollisuuksia.
Valmiinratkaisunkattavuusolimyössenmahdollinenheikkous.Mikälisisältöäon
paljon,voiollatarpeentoteuttaaomatsuppeammatpäätepisteettiedonsiirronja
suorituskyvynoptimoimiseksi.
Sovelluksenarkkitehtuuristatulihyvinsuoraviivainenpääasiassavalittujenteknologi-
oidenyhteensopivuudenansiosta.SivustonREST-rajapinnaltaolihelppohakeatarvit-
tavatsisällötjarajapinnanJSON-muotoinendatapystyttiintallentamaankeskitetysti
offline-käyttöävartensovelluksenvälimuistiin.Datasaatiinvietyäsaumattomasti
käyttöliittymällekäyttämälläRactive.js:nHTML-pohjiajaautomaattistadatanpei-
lausta.Varsinaisessasovelluslogiikassapääpainopysyidatanjatapahtumienkäsitte-
lyssäsekävarsinaistenmääriteltyjentoimintojentoteutuksessa.
Vaikkeisovellustavieläjulkaistu,onjulkaisuprosessistaaikaisempaakokemustajaso-
velluskauppojakäytettiinsovelluksentestijakeluun.Sovellusontarkoitusjulkaista
ApplenAppStoreenjaGooglePlay-kauppaan.Aiemmissajulkaisuissahaastavintaon
ollutaikataulutus,koskapalveluntarjoajienhyväksyntäprosessitkestävätvaihtele-
vasti,eivätkävälttämättämeneläpiensimmäiselläyrityksellä.Sovellusonkuitenkin
jopäässytläpiApplenesihyväksynnästätestijakelunyhteydessä.Applenhyväksyntä-
ajatovatmyöslaskeneettänävuonnakeskimäärinallekolmeenvuorokauteen(iOS
AppStore-RollingAnnualTrendGraph2016).Googlenautomatisoitu
hyväksyntäprosessiviekokemuksenperusteellaallevuorokauden.
Uskoisin,ettäsovelluksenjulkaisutuleeonnistumaanilmansuurempiaongelmia.
Jokatapauksessaprojektionomaltaosaltaniauttanutsuoraviivaistamaanhybri-
disovellustenkehitystäjatuonuttietämystävaihtoehtoisistaratkaisuistajatyöka-
luistamyöstuleviinprojekteihin.
29
Lähteet
AddingCapabilities.2016.ArtikkeliAppleDeveloper-sivustolla.Viitattu8.12.2016.https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html
AppStoreReviewGuidelines.N.d.ArtikkeliAppleDeveloper-sivustolla.Viitattu12.11.2016.https://developer.apple.com/app-store/review/guidelines/#minimum-functionality
CommonProblems.2016.ArtikkeliWPRESTAPI-sivustolla.Viitattu17.8.2016.http://v2.wp-api.org/guide/problems/
Condon,E.2016.AdvancedCustomFields.Viitattu17.8.2016.https://wordpress.org/plugins/advanced-custom-fields/
CordovaOverview.2016.ArtikkeliApacheCordova-sivustolla.Viitattu8.12.2016.https://cordova.apache.org/docs/en/latest/guide/overview/index.html
CordovaWKWebViewEngine.2016.ArtikkeliGithub-sivustolla.Viitattu6.12.2016:https://github.com/driftyco/cordova-plugin-wkwebview-engine
Cruz,R.S.2015.Ractive-touch.Viitattu8.12.2016.https://github.com/rstacruz/ractive-touch
Glossary.2015.ArtikkeliWPRESTAPI-sivustolla.Viitattu8.12.2016.http://v2.wp-api.org/glossary.html
Harris,R.2016.Mustaches.Viitattu8.12.2016.http://docs.ractivejs.org/latest/mustaches
Harris,R.2016.Ractive.js-Next-generationDOMmanipulation.Viitattu2.12.2016.https://github.com/ractivejs/ractive
IonicComponentDocumentation.N.d.ArtikkeliIonicFramework-sivustolla.Viitattu1.12.2016.http://ionicframework.com/docs/v2/components/
iOSAppStore-RollingAnnualTrendGraph.2016.TilastoAverageAppStoreReview
Times-sivustolta.Viitattu8.12.2016.http://appreviewtimes.com/ios/annual-trend-
graph
MonacaBackend.N.d.ArtikkeliMonaca-sivustolla.Viitattu6.12.2016.https://docs.monaca.io/en/manual/backend/
Mullenweg,M.2015.WordPress4.4“Clifford”.WordPress.org8.12.2015.Viitattu12.11.2016.https://wordpress.org/news/2015/12/clifford/
30
PlatformSupport.2014.ArtikkeliApacheCordova-sivustolla.Viitattu17.8.2016.http://cordova.apache.org/docs/en/latest/guide/support/index.html
Products.N.d.ArtikkeliAdobePhoneGap-sivustolla.Viitattu17.8.2016.http://phonegap.com/products/
PushNotifications.2016.ArtikkeliAdobePhoneGap-sivustolla.Viitattu6.12.2016.http://docs.phonegap.com/tutorials/develop/push-notifications/
SetupaGCMClientApponAndroid.2016.ArtikkeliGoogleDevelopers-sivustolla.Viitattu8.12.2016.https://developers.google.com/cloud-messaging/android/client
Storage.2016.ArtikkeliApacheCordova-sivustolla.Viitattu20.11.2016.https://cordova.apache.org/docs/en/latest/cordova/storage/storage.html#localstorage
Usageofcontentmanagementsystemsforwebsites.2016.TilastoW3TechsWebTechnologySurveys-sivustolla.Viitattu20.11.2016.https://w3techs.com/technologies/overview/content_management/all
Verbruggen,E.2016.PhoneGapSocialSharingpluginforAndroid,iOSandWindowsPhone.Viitattu3.12.2016.https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin/
Wheeler,K.2016.Slick.Viitattu8.12.2016.https://github.com/kenwheeler/slick