WordPressin REST-rajapinnan käyttö Cordova ... · In addition to Cordova, PhoneGap development tools by Adobe were used. The tools enabled testing the app and its native features

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