Kort%Reloaded! Studienarbeit%

Transkript

1 Kort%Reloaded Studienarbeit% AbteilungInformatik HochschulefürTechnikRapperswil Frühjahrssemester2013 Autoren: CarmeloSchumacher,AnnritaEgli Betreuer: ProfessorStefanKeller Projektpartner: bitforgeagzürich Experte: ProfessorStefanKeller Gegenleser: ProfessorAndreasRinkel

2 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 Erklärung Icherklärehiermit, dassichdievorliegendearbeitselberundohnefremdehilfedurchgeführthabe, ausserderjenigen,welcheexplizitinderaufgabenstellungerwähntistodermit dembetreuerschriftlichvereinbartwurde, dassichsämtlicheverwendetenquellenerwähntundgemässgängigen wissenschaftlichenzitierregelnkorrektangegebenhabe. Ort,Datum: Ort,Datum: Name,Unterschrift: Name,Unterschrift: 2

3 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 Abstract Ausgangslage) Kort isteininnovatives,locationnbasedwebappfüriphone,androidundtabletszur VerbesserungfehlenderDateninOpenStreetMap.EingereifterPrototypdavonwurde alsbachelorarbeitimhs2012anderhsrentwickelt(vgl.website: Aufgabe) ZieldieserArbeitwares,diedurchschnittlicheAnzahlInteraktionenderUsermitder KortNAppzuerhöhensowiedenaktivenSpielerstammauszuweiten.Diessolltemittels einemerweitertenfunktionsumfang,derintegrationneuerfehlerquellenundeiner verbessertenspielprozessführungerreichtwerden. Ergebnis) DerFunktionsumfangderKortNAppwurdeumzeitlichbeschränkte,ortsbasierteKortN Aktionensowieeininternes,aufeinemAtomNFeedbasiertesNewssystemerweitert. DamitstehendenKortNAdministratorenneuWerkzeugezurVerfügung,umdas SpielverhaltengezieltanzuregenunddasGefühlderCommunityNZugehörigkeitzu stärken.dielogikzureinbindungvonfehlernalsspielmissionenwurdeüberarbeitet undeinezusätzlichedatennquelleintegriert(datenbankeosmdboneaminstitut). DamitkönnenneueFehlertypenaufgenerischeArtundWeiseerstelltundfürdasSpiel nutzbargemachtwerden,wasdieattraktivitätfürdenspielerunddennutzenfürdas OpenStreetMapNProjekterhöht.Überprüfungen,diefürdieGütederbeantworteten Missionenverantwortlichsind,werdennunzusammenmitdenMissionenaufder Spielkarteangezeigt,wasdenAnreizzurBearbeitungdurchdieNutzererhöhensoll. ZudemwurdenweitereVerbesserungenundFehlerbereinigungenumgesetzt. 3

4 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 Management(Summary Ausgangslage) Kort isteininnovatives,locationnbasedwebappfüriphone,androidundtabletszur VerbesserungfehlenderDateninOpenStreetMap.EingereifterPrototypdavonwurde alsbachelorarbeitimhs2012anderhsrentwickelt. ZieldieserFortsetzungsarbeitwares,diedurchschnittlicheAnzahlInteraktionender UsermitderKortNAppzuerhöhensowiedenaktivenSpielerstammauszuweiten.Dies sollteübereinenerweitertenfunktionsumfang,neuenfehlerquellenundeiner verbessertenspielprozessführungerreichtwerden. DieursprünglicheAufgabenbeschreibungsahlediglichdieImplementationder Clientseitevor.DieServerseitesollteeinMasterstudentalsProjektarbeitdurchführen undunsviaapizurverfügungstellen.dieserbrachjedochseinearbeitab.umdaskortn Projektdennochabschliessenzukönnen,übernahmenwirauchdieImplementationder Serverseite. Vorgehen)/)Technologien) UmStörungenimlaufendenBetriebderKortNApplikationzuvermeiden,wurde entschieden,eintestsettinganalogzurliveversionaufzubauenundaufdiesemzu entwickeln.dazuwurdedieba_hunzikeroderbolzernversiongeforktundeine EntwicklungsversionderDatenbankaufeinemeigenenvServerderHSRaufgesetzt. NachProjektabschlusswurdedieEntwicklungsversionviaPullNRequestmitder produktivenversiongemergt. BeidenvonunsverwendetenTechnologienlegtenwirdenFokusaufOpenSourceN Produkte.AnzuschaffengabeslediglichdieWebstormIDEvonJetBrains. Ergebnisse) DerFunktionsumfangderKortNAppwurdeumzeitlichbeschränkte,ortsbasierteKortN Aktionensowieeininternes,aufeinemAtomNFeedbasiertesNewssystemerweitert. DamitstehendenKortNAdministratorenneuWerkzeugezurVerfügung,umdas SpielverhaltengezieltanzuregenunddasGefühlderCommunityNZugehörigkeitzu stärken.dielogikzureinbindungvonfehlernalsspielmissionenwurdeüberarbeitet undeinezusätzlichedatennquelleintegriert(datenbankeosmdboneaminstitut). DamitkönnenneueFehlertypenaufgenerischeArtundWeiseerstelltundfürdasSpiel nutzbargemachtwerden,wasdieattraktivitätfürdenspielerunddennutzenfürdas OpenStreetMapNProjekterhöht.Überprüfungen,diefürdieGütederbeantworteten Missionenverantwortlichsind,werdennunzusammenmitdenMissionenaufder Spielkarteangezeigt,wasdenAnreizzurBearbeitungdurchdieNutzererhöhensoll. ZudemwurdenweitereVerbesserungenundFehlerbereinigungenumgesetzt. ) 4

5 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 Ausblick) WährendunsererStudienarbeithabenwirvieleIdeenfürdieVerbesserungvonKort umsetzenkönnen.essindabernachwievorideenvorhanden,wasnochgetanwerden könnteumdiekortnappnochspannenderzugestalten. EinwichtigerFortschrittwäredasautomatischeuploadendervondenKortNUsern vollständiggelöstenaufgabenaufopenstreetmap.zurzeitwerdendielösungenauf derwebsitevonkortaufgelistetundkönnenvondortausvonhandaufopenstreet Mapübertragenwerden.DadieseLösungenvondenKortNUsernbereitsüberprüft wurden,istdiesemanuelleübertragungeinaufwand,derautomatisierbarwäre. DieKortWebsite 1 wurdevonba_hunzikeroderbolzaufdeutscherstellt.damittlerweile sehrvielekortnuserdieappinenglischnutzen,wäreeineübersetzungderwebsite zumindestaufenglischwünschenswert. DieStatistikenaufderWebsitekönntenerweitertwerdenmitStatistiken,dieausKortN Aktionenhervorgehen.DadiebestehendenStatistikenzumTeilverwirrenddargestellt werden,wäreeinegenerellerevisionderstatistikseiteangebracht. MitdieserRevisionwärenauchzusätzlicheHighscoresdenkbar.MankönnteTabellen fürdiefleissigstenkortnuserinverschiedenenzeitabschnittenerstellen,wiezum BeispielwerletztenMonatammeistenPunktegesammelthatoderwerdiemeisten Badgesgesammelthat. 5 1http://

6 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 Inhaltsverzeichnis) ITechnischerBerichtderArbeit 1. EinleitungundÜbersicht AufbauderArbeit Ergebnisse Schlussfolgerungen Begriffsdefinition...12 IIProjektdokumentation 5. Szenarios Szenario1,KortNAktion Szenario2,MissionennichtnurausUmkreisanzeigen Szenario3,AufträgeundÜberprüfungenaufeinerKarte/News KortNFrontend Dokumentation Design ControllerNPackage ModelNPackagemitremoteStores ModelNPackagemitlocalStores ModelNPackageohneStores ÜbersichtLibraries ErweitertesMapNKonzept ÜbersichtArchitektur MapMarkerNStates IconNKonzept LayersNControl NeueMasken/Workflows KortNAktion DefinitionenundRestriktionen Restriktionen NeueMasken/Workflows NeueKortNAktionerstellen SneakyPeak Highscore AbsoluteHighscore

7 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS RelativeHighscore News AtomNFeed Notifikation Permalink FacebookNLogin KortNBackend Webservices Übersicht Antworten/answer Highscore/highscore Auftrag/mission OpenStreetMap/osm KortNAktion/promotion Benutzer/user Überprüfung/validation Datenbank/db Fehlerquellen AnforderungenanFehlerquellen ÜbersichtFehlerquellen UpdateFehlerquellen ÜbersichtFehlertypen NeuerFehlertyphinzufügen Architektur Infrastruktur Datenbankserver DatenbankNWebservice Webserver(Heroku) Deployment TravisCI Konfigurationüber.travis.yml...70 IIIProjektmanagement 9. Sprints Sprint Ziele

8 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS Hauptaufgaben/FokussierungimSprint Termine ErledigteArbeiten Probleme Sprint Sprint Ziele Sprint Ziele Sprint Ziele SprintplanÄnderung Sprint Ziele Anforderungsspezifikation Rahmenbedingungen Sitzungsprotokolle KickoffNMeeting InputsvonStefanKeller: VorgehenbiszumnächstenMeilenstein/Sprint: Projektmeeting ProjektmeetingmitBANTeam ÜbergabedesProjekts Projektmeeting ProjektmeetingmitMichaelWolski Beschlüsse: Projektmeeting InputsvonSKE Projektmeeting Aufgabenstellungfestlegenundausdrucken Projektmeeting Traktanden Projektmeeting Protokoll Projektmeeting Traktanden

9 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS Protokoll Projektmeeting Traktanden Protokoll Projektmeeting Traktanden Protokoll Projektmeeting Traktanden Protokoll Projektmeeting Traktanden Protokoll Projektmeeting Traktanden Protokoll Projektabgabe...84 Tabellenverzeichnis Abbildungsverzeichnis 9

10 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 ITechnischer)Bericht)der)Arbeit 1. Einleitung)und)Übersicht) ZurVerbesserungvonOpenStreetMapgibtesdiverseAnsätze 2.EinerdavonistdieKortN App,welchewiralsFortsetzungsarbeitweiterentwickelnwerden. DieKortNAppwarimHerbstsemester2012alsBachelorarbeitvonJürgHunzikerund StefanOderbolz(imFolgendenBA_HunzikerOderbolzgenannt)erstelltworden.Das ganzeprojektistaufgithubverfügbar 3 :AufderLiveversionderKortNApp 4 sindbereits übertausenduserregistriertunddiemeistenvonihnenhabenschonmissionenaufder KortNAppdurchgeführt.DieKortNApphateineneigenenTwitterAccount 5 miteinpaar DuzendFollowernwomitNeuigkeitenüberdieAppverbreitetwerdenkönnen.Das ProjektderKortNAppwurdeanderDiplomfeiervomMärz2013alsbesteBachelorarbeit ausgezeichnet. 6 ZielunsererArbeitwares,diedurchschnittlicheAnzahlInteraktionenderUsermitder KortNAppzuerhöhensowiedenaktivenSpielerstammauszuweiten.Diessollteüber einenerweitertenfunktionsumfang,neuenfehlerquellenundeinerverbesserten Spielprozessführungerreichtwerden.DarauswurdendiefolgendenZieleabgeleitet: ZeitlichundräumlichbegrenzteKortNAktionen NewsaufbauendaufAtomNFeed MissionundÜberprüfungzusammenlegenN>erweitertesMapNKonzept (optional)sneakypeaknfunktion(erweiterungenwiez.b.anzeigevonmissionen ausserhalbdereigenenrayonsoderbugsbeheben) (optional)facebooknlogin (optional)relativehighscore DieursprünglicheAufgabenbeschreibungsahlediglichdieImplementationder Clientseitevor.DieServerseitesollteeinMasterstudentalsProjektarbeitdurchführen undunsviaapizurverfügungstellen.dieserbrachjedochseinearbeitab.umdaskortn Projektdennochabschliessenzukönnen,übernahmenwirauchdieImplementationder Serverseite.DarausergabensichzusätzlichdiefolgendenoptionaleZiele: (optional)webservicesanpassen (optional)neuefehlerquellen(eosmdbone) (optional)neuefehlertypen 10 2http://wiki.openstreetmap.org/wiki/Qualitätssicherung 3https://github.com/kort/kort 4http://play.kort.ch 5https://twitter.com/KortGame 6https://

11 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS Aufbau)der)Arbeit) DieseArbeitistindreiTeilegegliedert.ImerstenTeilistdertechnischeBerichtunserer Arbeit.DieseristinvierKapitelgegliedert:1.EinleitungundÜbersicht(diesesKapitel), 2.ErgebnisseunsererArbeit,3.DieSchlussfolgerungenund4.Begriffsdefinitionendes gesamtenprojekts. ImzweitenTeilbefindetsichdieProjektdokumentation.NachdenUserSzenarienin Kapitel5werdenim6.KapiteldieÄnderungendesKortFrontendsbeschrieben.Das7. KapitelenthältdieUmsetzungdeserweitertenMapNKonzeptsmitdenneuenFeatures. Im8.KapitelistdasBackendderAppbeschrieben. DerdritteTeilbeinhaltetdasProjektmanagment,im9.KapiteldieSprints,im10.Kapitel dieanforderungsspezifikationen,im11.kapiteldierahmenbedingungenund schliesslichim12.kapiteldieprotokolleunsererprojektmeetings. DerAnhangbestehtausdemLiteraturverzeichnis,Tabellenverzeichnisund Abbildungsverzeichnis. NebendiesemDokumentumfasstdieArbeitdieimplementierteWebNAppKort.Der dazugehörigesourcecodeistfreiiminternetzugänglichundaufderbeigelegtencd. Arbeitsresultat% Kort%(Web6App)% Repository% URL% % Ergebnisse)) TrotzTurbulenzenwährenddesSemestersaufgrundderabgebrochenenProjektarbeit desmasterstudenten,istesunsgelungen,alledefiniertenzieleumzusetzen.dazugehört dieimplementationderclientnsowiederserverseite.zuerwähnenistauchdas umfangreicherefactoringwelcheswiraufgrundderglossaränderungundunseren Erweiterungendurchführten. 3. Schlussfolgerungen) DerFunktionsumfangderKortNAppwurdeumzeitlichbeschränkte,ortsbasierteKortN Aktionensowieeininternes,aufeinemAtomNFeedbasiertesNewssystemerweitert. DamitstehendenKortNAdministratorenneuWerkzeugezurVerfügung,umdas SpielverhaltengezieltanzuregenunddasGefühlderCommunityNZugehörigkeitzu stärken.dielogikzureinbindungvonfehlernalsspielmissionenwurdeüberarbeitet 11

12 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 undeosmdbonealszusätzlichequelleintegriert.damitkönnenneuefehlertypenauf generischeartundweiseerstelltundfürdasspielnutzbargemachtwerden,wasdie AttraktivitätfürdenSpielerunddenNutzenfürdasOpenStreetMapNProjekterhöht. Überprüfungen,diefürdieGütederbeantwortetenMissionenverantwortlichsind, werdennunzusammenmitdenmissionenaufderspielkarteangezeigt,wasdenanreiz zurbearbeitungdurchdienutzererhöhensoll.zudemwurdenweitereverbesserungen undfehlerbereinigungenumgesetzt.hierzugehörtdasrefactoring,welcheszueiner sauberen,übersichtlichencodestrukturmiteinheitlichenbenennungenführte. 4. Begriffsdefinition) Tabelle%1%Begriffsdefinition% Term% Begriff% Kategorie% Beschreibung% % Badge% Badge Auszeichnungen Auszeichnung,dieeinSpieler gewinnenkann. Error%DB% FehlerNDB SWNKomponente Datenbankmanagementsystem mitfehlerndatenalsteilsw( KomponentedesKort(Systems (z.b.keepright). Highscore% Highscore Rangliste RanglistedererreichtenKoins, z.b.listederanzahlkoins allerspielerseitspielbeginn (absteigendgeordnet). Koin% Koin Belohnung Punkte,dieeinSpieler gewinnenkann.daswortist von'coin'(engl.münze) abgeleitet.das'k'isteine AnlehnunganKort. Kort%(mob.% Web%App% Kort(mobiles WebApp) SWNKomponente JavaScriptNApplikationals ClientzurKort0Website, realisiertinhtml5. Kort%Admin% KortNAdmin Persona,Rolle (kurzfürkortnadministrator) Nutzer,derdieKort0Website mitverwaltet. Kort%API% KortAPI SWNKomponente RESTAPIalsSchnittstelle zwischendemmobilen0web0 AppunddemServer, angebotenvoneinemserver. 12

13 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 Kort% Promotion% KortNAktion Belohnung erhöhtdiekoinseines Fehlertypsodermehrerer Fehlertypen.EineK.A.hat einentitel,einelebensdauer undeventuelleinebenannte räumlichebegrenzung. Kort%System% KortNSystem SWNKomponente GesamtheitallerSWN KomponentenvonKort. Kort%Website% KortWebsite SWNKomponente WebauftrittalsTeilNSWN KomponentedesKort(Systems, realisiertalscontent ManagementSystem(CMS). Mission% Auftrag Spieleinheit FehleroderfehlendeDatenin deropenstreetmapn Datenbank,dievoneinem Spielerkorrigiertwerden. Object% Objekt PunktaufKarte Spezielles"ObjektNvonN Interesse"(engl."PointNofN Interest",abgekürzt'POI'). Player% Spieler Persona,Rolle SynonymfürBenutzer/User. Solution% Lösung Spieleinheit Auftrag,dergelöstundmit genügenderanzahl Überprüfungengeprüftwurde. User% Benutzer Persona,Rolle Benutzer,derhauptsächlich dasmobile0web0appkortnutzt undeventuelldiekort0website. Validation% Überprüfung Spieleinheit Auftrag,derzuprüfenist (unabhängigvomspieler,der denauftraggelösthat).siehe auchlösung. DieTabelleistsortiertnachBegriff.AllemännlichenBegriffe,wiez.B.Spieler,gelten auchfürdieweiblicheform. 13

14 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 IIProjektdokumentation 5. Szenarios) 5.1 Szenario)1,)KortDAktion) NachdemAndydieKortAppentdeckthatte,benützteersieöftersundlösteeinige Missionen.SeiteinigerZeithaterabernichtmehranKortgedachtundöffnetedieApp schonlängernichtmehr.heuteistererneutmitdemzugzurarbeitunterwegswoer aufseinemhandyeinenotifikationentdeckt,welcheihmmitteilt,dassaufderkortnapp absoforteinekortnaktionstattfindet,beiwelcheresfürallegebäude,derennamen eingetragenwerden,fürdreitagendiedoppelteanzahlankoinsgibt.alsandyausdem ZugsteigtöffneterdieKortNAppundsiehtdort,dasseszweiGebäudeinseinerNähe gibt,welchebenanntwerdensollten.daandyandenbeidengebäudenvorbeiläuftum zurarbeitzukommen,kannerdienamendergebäudeindieappeingebenundfreut sichüberdiedoppelteanzahlkoinsdieerdafürerhält.ernimmtsichvor,wenner wiederzuhauseisterneutdiekortnappzuöffnenundnachnamenlosengebäuden Ausschauzuhalten. Ziele: WiederentdeckungvonKort MitKortNAktionmehrKoinsverdienen 5.2 Szenario)2,)Missionen)nicht)nur)aus)Umkreis)anzeigen) EdibenütztdieKortNAppoftundDankseinenvielenAktivitätenhältersichgutinden TopTenderHighscoreliste.MittlerweilegibtesinwederbeiihmzuHausenochan seinemarbeitsortoffenemissionenaufderkortnapp.alseraufderkarteetwashinund herscrollt,siehterinaktivemissionenwelcheeinigekilometervonseinemstandort entferntsind.nunweisser,dassimdorfwoseineschwesterwohnteinigemissionen mitderkortnappzulösensind.sobeschliesster,amwochenendeseineschwesterzu besuchenundimdorfherumzuschauen,umauchdiesemissionenerfüllenzukönnen.so wirderseineschönepositionaufderhighscorelistebeibehaltenkönnen. Ziele: WeiterentfernteMissionenentdecken. Highscoreverbessern 5.3 Szenario)3,)Aufträge)und)Überprüfungen)auf)einer)Karte)/)News) SeitMonikadieKortNAppzumletztenMalgebrauchthat,habensichÄnderungen ergeben.sieentdeckt,dassesaufderkartemehriconshatalsbeiihremletztenbesuch unddasseinigeiconsspeziellgekennzeichnetsind.dadernewsntabeinerote Notifikationaufweist,öffnetsiedieseundliest,dassneuAufträgeundÜberprüfungen 14

15 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 zusammengelegtwurden.alsowechseltsiewiederzurückzurkarte,wosiejetztalle offenenpunkteinihrerumgebungaufeinenblicksieht. Ziele: Newslesen AufträgeundÜberprüfungenerledigen 6. KortDFrontend) IndiesemKapitelsinddiewichtigstenElementedesFrontendsdokumentiert. DasKapitel2.10DokumentationbildetdiewichtigsteBasisfürdieDokumentationdes Codes. DerAbschnitt2.20DesignhatdieselbeStrukturwiedasKapitel4.20Designder BA_HunzikerOderbolz(S.16ff)undsolldiewesentlichenstrukturellenZusammenhänge descodesinformvondiagrammenzeigen.dieslässteinendirektenvergleichder beidenarbeitenzu,wodurchdieänderungenanderarchitekturschnellersichtlich werden. DiedarauffolgendenKapitelbieteneinevertiefteEinsichtindiewichtigstenneuen Features. 6.1 Dokumentation) WiebereitsbeiderVersionBA_HunzikerOderbolzwurdedaraufgeachtet,dassderCode konsequentmitdersenchaneigenendokumentationssprachejsduck 7 annotiertist.das damitautomatischerzeugteapifindetsichunter: Design) DiegrundlegendeArchitekturderApplikationwirddurchdasMVCNPatterndesSencha Touch2NFrameworksunddiegetroffenenArchitekturentscheideinderVersion BA_HunzikerOderbolzvorgegeben.ImFolgendensinddiestrukturellen ZusammenhängezwischendenControllerneinerseitsundModelundStores andererseitsinformvonklassendiagrammendokumentiert. 15 7https://github.com/senchalabs/jsduck

16 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS ControllerDPackage)) Abbildung%1%Controller%Package% ModelDPackage)mit)remote)Stores) Abbildung%2%Model6Package%mit%remote%Stores%I% 16

17 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 Abbildung%3%Model6Package%mit%remote%Stores%II% 17

18 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS ModelDPackage)mit)local)Stores) Abbildung%4%Model%Package%mit%local%Stores% ModelDPackage)ohne)Stores) Abbildung%5%Model%Package%ohne%Stores% 18

19 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS Übersicht)Libraries) [BA_HunzikerOderbolzS.33] Tabelle%2%Übersicht%Libraries% Library% Version% Verwendung% Sencha%Touch%2% FrameworkzurErstellungvonmobilenWebNApps Sencha%Cmd%2% BuildNToolvonSencha Leaflet% AnzeigevonOpenStreetMapNDatenaufderKarte leaflet6osm% GitRevision 38665cc6c0 LeafletNPluginzurAnzeigevonOpenStreetMapN ObjektenaufderKarte Ext.ux.LeafletMap% SenchaTouchNPluginzurEinbindungeinerLeafletN KarteinSenchaTouch Ext.i18n.Bundle6% touch% GitRevision b4a0beaeb8 SenchaTouchNPluginzurInternationalisierungder Oberfläche 7. Erweitertes)MapDKonzept) InderKortNVersionBA_HunzikerOderbolzwurdenlediglichMissionenaufderLeafletN Karte(Tab'Map')dargestellt.ValidierungenwurdenineinemseparatenTabmittels Listenansichtpräsentiert.ImRahmendieserErweiterungsarbeitwurdendiesezwei Tabszusammengelegt,sodassnunsowohlMissionenalsauchValidierungen gemeinsamaufderleafletnkartedargestelltwerden.derursprünglichetab'check' wurdedadurchobsolet.zusätzlichkannneueinermissionundeinervalidierungauch nocheinekortnaktionzugeordnetwerden(siehekapitel4.kortnaktion).damitdie unterschiedlichenelementeninderleafletnterminologiemarkersgenanntn voneinanderunterscheidbarsind,musstedasmapnkonzeptvollständigüberarbeitet werden.dienotwendigenanpassungenbetrafensowohldengrafischen,wieauchden logischenteilderapplikation. 19

20 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS Übersicht)Architektur)) DieGrundideederangepasstenMapNLogikkannambestenanhandderBeziehungender neuenkontrollerklassenbeschriebenwerden: Kort.controller.Map Kort.controller.MapValidation Kort.controller.Map AbstractType Kort.controller.MapMission Abbildung%6%Beziehungen%der%Kontrollerklassen% DerKort.controller.MapfungiertdabeialsMasterNController.Erkapseltüber entsprechendeapinfunktionendieinteraktionmitdemleafletnpluginundverarbeitet dieeventsderhauptnavigationselementedesmapntabs. Klassen,diesogenannteMarkersaufdieLeafletNKarteplatzierenmöchten,erbenvon demalsabstrakteklassekonzipiertenkort.controller.mapabstracttype.diesestelltdie GrundfunktionfürdasZeichnenvonLeafletNMarkerszurVerfügungunddefiniertden grundlegendenupdateprozessderabstraktdeklariertendatenstoresunddie BenachrichtigungdesMainkontrollersüberdengegenwärtigenUpdatestatus.Auchhat erdiefürdieinteraktionzwischendembenutzerunddenmarkersaufderkartenötigen ListenerregistriertunddelegiertdieEventsandiekonkretenKinderklassen. Kort.controller.MapValidationundKort.controller.MapMissiondefinierenlediglichdie konkretelogik,wasbeieinemklickaufdenentsprechendenmarkertypgeschehensoll unddefiniereneinenkonkretenstore,überdenmissionsnbzw.validierungsdaten geladenwerdensollen. UmdieLatenzderApplikationmöglichstkurzzuhalten,wurdedaraufgeachtet,dass jeglichekommunikationmitdemserverasynchronundparallelausgeführtwird.eine blockierendelademaskewurdelediglichbeimapplikationsstartimplementiert,umzu verhindern,dassderbenutzerzubeginnaufeineleeremaptrifft.weitere Ladevorgänge,wiesiez.B.inZusammenhangmitderSneakyNPeakNFunktion(siehe Kapitel07.70Sneaky(Peak)auftreten,werdennichtblockierendausgeführtundlediglich eindiskreterladeindikatorinderrechtenobereneckederapplikationinformiertden BenutzerüberdenaktuellenLadestatus. DasZusammenspielzwischendeneinzelnenKomponenten,diefürdieMapzuständig sind,funktioniertübereinerelativkomplexeeventlogik.imanhangdieserarbeitfinden sichausführlichesequenzdiagramme,diedieinteraktionzwischendenbeteiligten Instanzenzeigen. 7.2 MapMarkerDStates) GrundsätzlichkanneinFehlertypneuindenfolgendenvierverschiedeneStates auftreten: 20

21 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 Tabelle%3%Die%vier%States%der%Fehlertypen% State% Bedeutung% % missionstate% missionpromotionstate% validationstate% EinMissionsobjekteinesFehlertyps EinMissionsobjekteinesFehlertyps,fürdaszudemeine KortNAktiondefiniertist EinValidierungsobjekteinesFehlertyps validationpromotionstate% EinValidierungsobjekteinesFehlertyps,fürdaszudem einekortnaktiondefiniertist ZusätzlichgibtesnochdenStateinactive,derzusätzlichzueinembestehendenStatus gesetztwerdenkann.dieserzeigtan,dasssichdasbetreffendemapnobjektausserhalb desdefiniertenbearbeitungsradiusbefindetundsomitnurbetrachtet,nichtabergelöst werdenkann. DieStateswerdenüberdaspseudoNEnum'mapMarkerState'imConfigFile (Kort.util.Config)definiert. 7.3 IconDKonzept) FürdieKortNAktionIconsfertigtenwirzuerstverschiedeneEntwürfean.Dabeimussten wirauchandenübernächstensprintdenken,beiwelchemwirdiemissionenund ÜberprüfungenineinenReiterzusammenlegen.AuchdortwirdeinIcongebraucht, welchesspeziellgekennzeichnetist,nämlichalsüberprüfung.isteineüberprüfung gleichzeitigeinekortnaktion,somüssenbeidezeichenaufdemiconersichtlichsein.die ErstellungdieserIconsforderteunsereganzeKreativitätundDesignkünste. DieDarstellungderIconsstellteunsauchindiesemSprintvoreineHerausforderung. DieIconssolltenkonsistentsein,alsojederFehlertypsollteimmerdasselbeIconhaben, esmussjedochzwischenaufgabeundüberprüfungunterschiedenwerdenkönnenund ersichtlichsein,wennessichumeinekortnaktionhandelt(aussprint2).wichtigist auchdiegenerischeeinbindungindiekarte.schlussendlichistunsabereinevisuell ansprechendeundfunktionalegestaltungdericonsgelungen. InaktiveItemswelchedurchdieSneakyPeakFunktionangezeigtwerden,sind schwarzweiss. 21

22 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 Mission% Kort6Aktion% Überprüfung% Kort6Aktion%und% Überprüfung% Abbildung%7%Icons%mit%Kennzeichnung%der%verschiedenen%Status% 22

23 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS LayersDControl) DurchdieZusammenlegungvonAuftragundÜberprüfungwerdendemUserunter UmständensehrvieleoffeneAufgabenangezeigt.DamitderUsertrotzdemdie Möglichkeithat,sichnurÜberprüfungenodernurAufträgeanzuzeigen,erstelltenwir zweiverschiedenelayer,welchederusermittelscheckboxeseinnoderausblenden kann.dazufügtenwirdenleafletnmarkerndertypenauftragundüberprüfung einzelnelayerhinzu,derensichtbarkeitübereinlayerncontrolgesteuertwerdenkann. DamitkönnennunwahlweisenurAufträge,ÜberprüfungenoderbeideTypenaufder Karteangezeigtwerden. Abbildung%8%Checkboxes%oben%rechts%um%einzelne%Layer%ein6%oder%auszublenden% Wirdachtendarübernach,einzusätzlichesFeatureeinzubauen,beiwelchemalle unterschiedlichetypenvonaufträgenaufdemlayerncontrolzunundweggeschaltet werdenkönnten.vondieservariantesahenwiraberausplatzgründenab.dieanzeige derauswahldieserlayerwürdeeinengrossenteilvonkleinenbildschirmen verdecken. 7.5 Neue)Masken/Workflows) AufderbisherigenKortNAppwarendieÜberprüfungenineinemseparatenTab,dieUser musstenalsoaktivdorthinwechselnumüberprüfungenzutätigen.wirändertenden 23

24 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 WorkflowbeieinerÜberprüfungsoab,dassernunähnlichwiebeieinemAuftrag abläuft. Workflow%bis%anhin:%% TabPrüfenauswählenN>ListemitÜberprüfungenwirdangezeigt. KartenansichtauswählenN>KartemitÜberprüfungenwirdangezeigt. IconanklickenN>Antwortscreenerscheint,womanja/neinauswählenkannN>Frage beantworten. NachdemBeantwortensiehtderUserwievieleKoinsersoebenfürdieseÜberprüfung erhaltenhat. Workflow%neu%mit%ValidationMessageBox.js:% KortNAppstartenNKartemitAufträgenundÜberprüfungenwirdangezeigt. AufÜberprüfungsiconklickenN>ValidationMessageBox.jserscheintmitderInformation überdieanzahlkoins,diederuserfürdiebeantwortungerhält. AufBeantwortenklickenN>Antwortscreenerscheint,womanja/neinauswählenkannN >Fragebeantworten. 7.6 KortDAktion) DasZieleinerKortNAktionistes,dieUserdurchzeitlichundörtlichbeschränkte besonderebelohnungenzumgebrauchderkortnappzuanimieren.inder BA_HunzikerOderbolzwurdediesesFeaturefolgendermassenbeschrieben: Als zusätzlichemotivationkönntenzeitlichbegrenzteaktionendurchgeführtwerden.dies sollbenutzerdazuanimieren,dieappimmerwiederzuverwenden.möglicheaktionen wärenbeispielsweisediekonzentrationaufeinenfehlertyp( Gib0allen0Restaurants0in0 deiner0umgebung0einen0namen0und0erhalte0diese0woche0die0spezielle0restaurant( Auszeichnung )oderaufeineregion( Korrigiere0jeden0Tag0im0Dezember0Fehler0in0Zürich0 und0erhalte0die0zürich(silvester(auszeichnung ) Definitionen)und)Restriktionen) EineKortNAktionbestehtausdenfolgendenAttributen: Tabelle%4%Attribute%der%Kort6Aktionen% Attribut-Name Beschreibung Titel Start 24 Jede Kort-Aktion hat einen Titel. Dieser darf aufgrund des beschränkten Platzes der Designvorgabe nicht länger als 40 Zeichen lang sein. Eine Kort-Aktion hat einen definierten Startzeitpunkt (Datum und Uhrzeit).

25 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 Ende Zugeordnete/er Fehlertyp/en Regionale Beschränkung Eine Kort-Aktion hat einen definierten Endzeitpunkt (Datum und Uhrzeit). Eine Kort-Aktion wird einem oder mehreren Fehlertypen zugeordnet. Eine Kort-Aktion ist räumlich beschränkt. Die Beschränkung wird über ein Multipolygon definiert. EineMissionodereineValidierungwirddemnacheinerKortNAktionzugeordnet,wenn a. derzeitpunktderclientseitigenabfrageimzeitlichenintervall[start,ende]der Aktionliegtund b. derfehlertypdermission/validierungmiteineminderaktiondefinierten Fehlertypübereinstimmtund c. dergeometrischepunktdermission/validierunginnerhalbdesfürdieaktion definiertenmultipolygonsliegt InderBeziehungeinerKortNAktionmiteinemFehlertypwirddiezusätzlicheAnzahl KoinsderMissionenundValidierungenfestgelegt,diefürdieseKortNAktiongelten: Abbildung%9%Beziehung%Kort6Aktion%zu%Fehlertyp% Restriktionen) DurchdieimvorherigenAbschnittdefiniertenEigenschaftenfürKortNAktionenistes prinzipiellmöglich,dassaufeinekonkretemission/validierungzweikortnaktionen kommen.diesistaufgrunddergewähltenarchitekturlösungnichtzulässigundführt zuundefiniertemverhaltenderapplikation.eswurdedefiniert,dassderadministrator fürdieeinhaltungdieserbeschränkungzuständigist Neue)Masken/Workflows) BeimAuswähleneinesIconseinerKortAktion,erscheintdiePromotionMessageBox.js. Dortwirdangezeigt,wievieleextraPunktefürdasLösendieserAufgabevergeben werden.danebenbefindetsicheininfonbutton.imhintergrundbefindetsichein orangenerkreis.wenneinuserdeninfonbuttondrückt,rücktderkreisinden 25

26 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 VordergrundundzeigtdieInformationenwieZusatzpunkteundZeitdauerderKortN Aktionan. ImKortNAktionNKreiswirdderTitelderKortNAktionangezeigt.DieserTitelsollte eigentlichinverschiedenensprachenvorhandensein,fürdieverschiedenen EinstellungenderBrowser.Wirbeschlossenjedoch,dassdenKortNAktionenfixeTitel vergebenwerdensolltenundzwarindersprache,welcheinderregiongesprochen wird,wodieaktionstattfindet. Abbildung%10%MissionMessageBox%einer%Kort6Aktion%mit%Infobutton% Abbildung%11%ValidationMessageBox%mit%einer%Kort6Aktion%mit%Infobutton% 26

27 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 Abbildung%12%Information%über%die%Kort6Aktion% Neue)KortDAktion)erstellen) SolangenochkeinWebinterfacefürdieAndiminstrationderKortNAktionenzur Verfügungsteht,könnenneueKortNAktionendirektüberdieDatenbankerstelltwerden. DazuwirdzuersteineneueKortNAktiondefiniertunddanacheinemodermehreren Fehlertyp/enzugeordnet: 1.%Neue%Kort6Promotion%in%Tabelle%kort.promotion%einfügen:% INSERT INTO kort.promotion(title,lang,startdate,enddate,region,geom) VALUES ( ); 'FOSSGIS-Promotion', 'de_de', TIMESTAMPTZ ' :00:00+02, TIMESTAMPTZ ' :00:00+02', 'Deutschschweizer Grenze', public.st_geomfromtext('multipolygon((( , , , , )))', 4326) 2.%Bestehende%Kort6Promotionen%mit%Fehlertyp/en%verknüpfen:% UmeineKortNAktionmiteinemFehlertypzuverknüpfen,wirddazueinentsprechender EintraginderHilfstabellekort.promo2mission0eingefügt.DieseTabellebildetdien:m BeziehungzwischenAktionundFehlertypabundstelltdieBeziehungüberdie FremdschlüsselaufdieidderTabellekort.Promotionunddenerror_typderTabelle 27

28 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 kort.error_typeher.zudemwerdenaufdieserstufedieausderbeziehungabgeleiteten Attributemission_extra_coinsundvalidation_extra_coinsdefiniert.Umbeispielseweise eineaktionmitderangenommenenid=22mitdemfehlertyp'missing_cuisine'zu verknüpfen,wirdderfolgendeeintraggemacht: INSERT INTO kort.promo2mission(promo_id, error_type, mission_extra_coins, validation_extra_coins) VALUES ( ); 22, 'missing_cuisine', 10, Sneaky)Peak) Dawirannehmen,dassdieSituationwieinSzenario2inKapitel5.2beschriebenöfters vorkommenwird,setztenwirunsdieimplementationdersneakypeakfunktionzum Ziel.UnsereIdeewar,demUserdieMöglichzeitzugeben,dassersehenkannwo AufträgeundÜberprüfungenoffensind,auchausserhalbseinesRayons. WirentschlossenunseinLimitzusetzen,sodassimmernurhöchstensje25inaktive MissionenundÜberprüfungenangezeigtwerden.DiesesindaufdemZentrumderKarte woderuserhingescrollthat.damitdieseiconsnichtdieganzezeitvomservergeladen werdenmüssen,habenwireingestellt,dassdieiconserstzuladenbeginnenwennder UserzweiSekundenohnezuScrollenaufeinemAusschnittderKartewar.Im Aktualisierungsbuttonwirdangezeigt,wenndieFunktionamLadenist.Diese inaktiven MissionenundÜberprüfungenwerdenmiteinemschwarzNweissenIcon gekennzeichnet.dasiconzeigtebenfallsan,obessichumeinemissionoder ÜberprüfunghandeltundobeszueinerKortNAktiongehört.DieSneakyPeakFunktion kannmitdementsprechendenbuttoneinnundausgeschaltetwerden.tipptderuserein inaktivesiconan,sowirdihmeinemessageboxangezeigtmitderoffenenfragezu diesemicon.deruserbekommthieraberkeinemöglichkeitdiesefragezu beantworten,erkannnurdiemessageboxwiederschliessen. 28

29 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 Abbildung%13%Inaktive%Icons%Dank%der%Sneaky%Peak%Funktion% Abbildung%14%Messagebox%einer%inaktiven%Missing6Cuisine6Mission% 7.8 Highscore) NeustehenzweiArtenfürdieAnzeigederHighscoreszurVerfügung. 29

30 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS Absolute)Highscore) DiesistdieAnsichtwiesieauchinderbisherigenAppbekanntwar.Diebesten10User werdendortaufgelistet,anelfterstellestehtderrangdesaktuellenbenutzersmit seinerpunktzahl Relative)Highscore) WirvomUserderTab Relativ ausgewählt,siehterseineumgebungderhighscoreliste, dortkannersehenwievielepunkteerbenötigtuminderranglisteemporzuklettern. 7.9 News) WirbauteneinenneuenTabindieApp: News.IndiesemTabgibteszwei verschiedeneviews:öffnetderuserdentabsosiehtereineliste,woallenews aufgelistetsind.beimauswähleneinesnewseintragserscheintdiedetailviewmittitel, ErscheinungsdatumundBeschreibung. Abbildung%15%News%List% % % % Abbildung%16%News%Detailview% DieNachrichtenerscheinenaufderNewslistsortiertnachPublikationsdatum,die ungelesenennachrichteninfetterschriftundmiteinemsterngekennzeichnet.sobald dernewseintraginderdetailnviewangeschautwurde,erscheinterimnormalenfont. FürdiePräsentationderNewswurdeeinminimalerRSSNAtomNReaderimplementiert. DieLösungberuhtaufzweiStores,demNewsRemoteNStore,dermittelsXMLNReaderden 30

31 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 AtomNFeedparst,unddemNewsLocalNStore,derdieNewsausdemRemoteStore synchronisiertundeinenpersistentenlokalenstatedavonanlegt.dieanzeigealsliste basiertaufdendatendesnewslocalnstores.ausgehendvommodelnfeld'unread' werdendiezweistates'unread'=trueund'unread'=falseunterschieden.wirdaufder news.listeinlistenelementangeklickt,sowirdüberdennewsncontrollerdiedarin definiertefunktiononnewslistitemtapaufgerufen,diedenstatedesbetroffenen Recordsauf'unread'=falsesetzt,denStoresynchronisiertunddanachneulädt.Die DetailViewwirdzumentsprechendenRecordgepusht.InderFolgewirddieList aktualisiertundderbadgetextdynamischangepasst.mitdembacknbuttonkannwieder zurnews.listzurückgekehrtwerden. DieDatenhoheitwurdeandenAtomNFeedübertragen.Dasheisst,wenneinAdmindie AtomNFeedEntrieslöscht,werdendieseauchausdemNewsLocalNStoreentfernt. PerDefaultwerdendemUseralleNewsinallenSprachenangezeigt.Diesistmomentan sinnvoll,damomentanallenewsinenglischabgefasstseinwerden.imnewsntabgibtes einensettingsnbutton,mitwelchemderuserdaseinstellungspanelöffnet,wo ausgewähltwerdenkann,vonwelchensprachenerdienewsangezeigtbekommen möchte.dieseeinstellungenwerdenimlocalstorageimuserlocalnmodelgespeichert, wasalsfilteraufdennewslocalnstorewirkt. 31

32 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 Abbildung%17SettingsPanel%für%Sprachauswahl% AtomDFeed) DieAtomNFeedNURLkanninKort.util.Configdefiniertwerden: newsatomfeedurl: './resources/stores/news_default.xml' DasSprachattributxml:langwirdimTitelderEntrydefiniert. Beispiel von zwei Newseinträgen in verschiedenen Sprachen: <?xml version="1.0" encoding="utf-8"?> <feed xmlns=" 32 <title>kort Newstitle></title> <link href=" <updated> t18:30:02z</updated> <author> <name>kort Team</name> </author>

33 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 <id>urn:uuid:60a76c80-d399-11d9-b93c e0af6</id> <entry> <title xml:lang="en">new Promotion In Rheintal</title> <link href=" <id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa7a</id> <updated> t18:30:02z</updated> <content type="html">different english text</content> </entry> <entry> <title xml:lang="fr">nouvelle promotion dans la Romandie</title> <link href=" <id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa8a</id> <updated> t18:30:02z</updated> <content type="html">un texte en français</content> </entry> </feed> Notifikation) DamitdenUserndasLeseneinerNewsnachrichtnichtaufgezwungenwird,habenwir unsdazuentschlossen,demnewstabeinenbadgetextalsnotifikationhinzuzufügen.so siehtderuserobesneuenewshatundesstehtihmfrei,oberdienewsindernewsliste anschauenwill. Abbildung%18%:%Notifikation%neuer%News%durch%einen%Badgetext% DieNotifikationhabenwirmitderFunktion 33

34 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 updatenewsbadgetext: function() { this.gettabpanel().gettabbar().getcomponent(3).setbadgetext(ext.getstore('newslocal').getamountofunreadnews()); } imnotificationncontrollereingefügt. DerBadgeTextfürdenNewsNTabNButtonwirddynamischanhandderungelesenen NewsimNewsLocalNStoremitderFunktiongetAmountOfUnreadNewsbestimmt. WerdenimNewsLocalNStoreModelstatesverändertoderkommenneueNewsNItemsaus demnewsremotenstorehinzu,wirdsystemweitderevent'newsupdated'gesendet.der ControllerNotifications.jshörtaufdiesesEventundsetztdenBadgeTextaufden aktuellenwert(überdiehilfsfunktion'getamountofunreadnews',diedirekt innerhalbdesnewslocalnstoreimplementiertist).sobaldderuserdiesesneueitemin derdetailansichtangeschauthat,wirdderbadgetextentsprechendangepasst.sosieht deruserimmer,wievieleungelesenenewsnochvorhandensind.dienewswerden nachdatumsortiert.dienewsmüssenundkönnenvomusernichtgelöschtwerden.da wirdermeinungsind,dassveraltetenewsschlechtenewssind,stellenwirdemadmin dieanforderung,nichtmehraktuellenewszulöschen Permalink) WirdeinUsermittelseinerNewsübereineKortNAktioninformiert,wirdinder DetailansichteinLinksein,welcherdenUseraufdieMapführtundzwarzum MittelpunktderKortNAktion.SokannderUserdieGegendaufderKarteerkundengehen undsieht,sofernerdiesneakypeakfunktion(siehekapitelfehler%verweisquelle% konnte%nicht%gefunden%werden.sneakypeak)aktiviert,anhandderinaktivenicons mitsternwosichdiekortnaktionenbefinden.dazumusstenwireinenpermalink implementieren.einbeispielfüreinenpermalinkstehthier: lat und lng werdendiekoordinatendespunktsangegeben.derlinkkannauchum einenzoomlevelergänztwerden.derdefaultzoomlevelist15.willderusereinen anderenzoomlevel,kannerdemlinkein&z=[zoomlevel]anfügen.zumbeispiel: )FacebookDLogin) AlszusätzlichesFeatureerledigtenwirwährenddiesemSprintdieImplementationdes FacebookoAuth.DieswareinWunschvonKortNUsern 8 undwurdebereitsinder Bachelorarbeit 9 alswünschenswertesfeatureerwähnt.dazupasstenwirzuerstaufdem StartscreendasGUIan,indemwirunterdenGoogleNLoginbuttondenFacebookN Loginbuttonhinzugefügten.DanachkonntenwirderAnleitungaufFacebook 10 folgen 34 8https://github.com/kort/kort/issues 9https://github.com/kort/kortNdocu/blob/master/_DOCUMENTATION/baNkortN jhunzike_soderbol.pdf 10https://developers.facebook.com

35 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 umfacebookalsweiterenoauth2.0provideraufzunehmen.nunkönnensichdie KortuserauchmittelsihresFacebookNAccountbeiderKortNAppanmelden. 35

36 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS KortDBackend) 8.1 Webservices) AlsplattformunabhängigesKommunikationsparadigmazwischendenverteilten InstanzenwurdeRESTeingesetzt.DieRESTNWebserviceswurdenmitdemPHP MicroframeworkSlimerstellt. DieStrukturderWebservicesmusstegegenüberderVersionBA_HunzikerOderbolznur leichterweitertwerden(siehenachfolgendeskapitel8.1.1übersicht).alsbasisfürdie AuflistungderWebserviceswurdewomöglichdieAusführungenausderBachelorarbeit BA_HunzikerOderbolz'10.2RESTNSchnittstellen'übernommen. KomplexereAnpassungenergabensichjedochinZusammenhangmitdenKortNAktionen andenhilfsmethodenderklassenbughandler,validationhandler,fixhandlerund VoteHandler,überdieDatenmittelsDatenbankaufrufeabgerufenundaufbereitet werden.umfangreichekommentarezudenverändertensqlnqueriessinddirekt innerhalbderentsprechendenklassenimverzeichnisserver/php/webservice/zu finden Übersicht) Client%<66>%Webserver%(Heroku)%% Tabelle%5%Übersicht%Kommunikation%von%Client%und%Webserver% Typ% Pfad% Zweck% Δ%BA_HunzikerOderbolz% GET% answers/<type> AlleAntworteneines Fehlertyps<type> GET%% highscore/absolute Benutzersortiertnach AnzahlKoinsplusNfalls nochnichtim AntwortsetenthaltenN deraufrufendebenutzer GET% highscore/relative Benutzersortiertnach AnzahlKoins GET% 36 mission/position/ <lat>,<lng> Limitierte#Missionen nearestneighborn Sortiertnachdem Punkt(<lat>,<lng>) VORHER highscore/ NEU VORHER/bug/position/ <lat>,<lng>+ergänzte RÜCKGABE POST% mission/fix Lösungsenden VORHER/bug/fix GET% osm/<type>/<id> OSMObjektvomTyp {node,line}undid GET% promotion/ AlleKortNAktionen NEU N

37 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 GET%% user/<secret> BenutzerdatenvonUser mit<secret>laden,falls MatchmitDatenbank (<secret>optional) N GET% user/<id>/badges BadgedesUsersmit <id>laden GET%% user/<id>/logout Usermit<id>ausloggen N N PUT%% user/<id> BenutzerdatenvonUser mit<id>modifizieren GET% validation/position/ <lat>,<lng> Limitierte# Überprüfungen neighbornsortiertnach dempunkt(<lat>,<lng>) POST% validation/vote Überprüfungsenden N ERGÄNZTERÜCKGABE N Webserver%(Heroku)%<66>%Datenbankserver%(sinv edu.hsr.ch)% Tabelle%6%Übersicht%Kommunikation%von%Webserver%und%Datenbankserver% Typ% Pfad% Zweck% Δ%BA_HunzikerOderbolz% GET% % db/<table>/<fields> DatenvonPostgresN Datenbankabrufen POST% db/<table>/<fields> DateninPostgresN Datenbankeinfügen PUT% db/<table>/<fields> DateninPostgresN Datenbankmodifizieren POST% db/transaction GenerischeTransaktion aufpostgresndatenbank ausführen N N N N Antworten)/answer)) [BA_HunzikerOderbolzS.59] BeieinigenFehlertypenwirdeineAuswahlanmöglichenAntwortenvorgegeben.Um dieseantwortenvorzuladen,wirdder/answernwebserviceverwendet.dieserliefert alleantwortenderverschiedenenfehlertypenzurück. Antworten%laden% Tabelle%7%Webservice%Antworten%(GET%/answer)% URL 37

38 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 <type> (optional) Antworten auf Typ beschränken Methode GET Parameter - Antwort 200 OK Daten konnten erfolgreich geladen werden. Antworttyp JSON Beispiel:% GET missing_track_type Antwort:% { } "return":[ ] { }, "id":"1", "value":"grade1", "title":"asphalt, Beton oder Pflastersteine", "sorting":"110", "type":"missing_track_type" {... } } Highscore)/highscore) [nachba_hunzikeroderbolzs.62] ÜberdenHighscoreNWebservicekönnendieBenutzernachAnzahlKoinsgeladen werden.beimabsolutenhighscorewirdnimunterschiedzumrelativenhighscorender aufrufendebenutzerzusätzlichangefügt(fallsdiesernichtbereitsimantwortset enthaltenist). 38

39 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 Absoluter%Highscore%laden% Tabelle%8%Webserver%Highscore%(GET%/highscore/absolute)% URL Methode GET Parameter limitmaximaleanzahlderbenutzer Antwort 200 OK Daten konnten erfolgreich geladen werden. Antworttyp JSON Relativer%Highscore%laden% Tabelle%9%Webserver%Highscore%(GET%/highscore/relative)% URL Methode Parameter GET limitmaximaleanzahlderbenutzer Antwort 200 OK Daten konnten erfolgreich geladen werden. Antworttyp JSON Beispiele:% GET absolute?limit=10 GET relative?limit=10 Antwort:% { 39 "return":[ { "user_id":"3",

40 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 } ] }, "username":"tschortsch", "koin_count":"140", "fix_count":"12", "vote_count":"4", "ranking":"1", "you":true {... }... } Auftrag)/mission) [nachba_hunzikeroderbolzs.59ff] DerWebservice/missionlieferteinelimitierteAnzahlMissionen,nearestNneighborN SortiertinBezugaufeinenmitgegebenPositionspunktzurück. ZusätzlichkannüberdiesenWebserviceeineLösungzueinemFehlereingetragen werden. Missionen%laden% Tabelle%10%Webservice%Auftrag%(GET%/mission/position/<lat>,<lng>)% URL Methode Parameter <lat>,<lng> <lat>latitudederaktuellenposition <lng>longitudederaktuellenposition GET limitmaximaleanzahlderzuladendenfehler radiusradiusindemsichdiefehlerbefindenmüssen Antwort 200 OK Daten konnten erfolgreich geladen werden. Antworttyp JSON Beispiel:% GET position/47.1,8.1?limit=1&radius=

41 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 Antwort:% { "return":[ { "id":" ", "schema":"95", "type":"missing_track_type", "osm_id":" ", "osm_type":"way", "title":"typ des Wegs unbekannt", "description":"um welchen... "latitude":" ", "longitude":" ", "view_type":"select", "answer_placeholder":"typ", "fix_koin_count":"5", "txt1":"", "txt2":"", "txt3":"", "txt4":"", "txt5":"", "promo_id":"22", "extra_coins":"6", }, } ] {... }.. 41

42 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 Lösung%senden% Tabelle%11%Webservice%Auftrag%(POST%/mission/%fix)% URL Methode POST Parameter DiezusendendeAntwortmussalsJSONNObjektimBodygesendetwerden. Antwort 200 OK DieLösungkonnteerfolgreichgesendetwerden.Als AntwortwerdendieerspieltenPunkteund Auszeichnungenzurückgeliefert. 403Forbidden 400Badrequest DerBenutzeristnichtkorrekteingeloggtundkann somitkeinedatenandenserversenden. DasgesendeteJSONistnichtvalideoderesgab einenfehlerbeimschreibenderdatenindie Datenbank. Antworttyp JSON Beispiel:% POST { "id":"ext-record -230", "user_id":3, "error_id":" ", "schema":"95", "osm_id": , "message":"mcdonalds" } Antwort:% { "badges":[ { "name":"highscore_place_1" } 42

43 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 } ], "koin_count_new":"15", "koin_count_total":"55" OpenStreetMap)/osm) [BA_HunzikerOderbolzS.59] UmOpenStreetMapNObjekteaufderKarteanzuzeigen,werdenüberden/osmN WebservicedieentsprechendenOSMNDatengeladen.DerWebserviceleitetdenRequest andasosmapi 11 weiterundsendetdasresultatandiewebapplikationzurück. OpenStreetMap%Objekt%laden% Tabelle%12%Webservice%OpenStreetMap%(GET%/osm/<type>/<id>)% URL <type>osmnobjekttyp <id>iddesosmnobjekts Methode GET Parameter N Antwort 200 OK Datenkonntenerfolgreichgeladenwerden. Antworttyp XML Beispiel:% GET Antwort:% <?xml version="1.0" encoding="utf-8"?> <osm version="0.6" generator="openstreetmap server" copyright="openstreetmap and contributors" attribution=" org/copyright" license="

44 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 <node id=" " version="1" changeset=" " lat=" " lon=" " user="pfrauenf" uid="479871" visible="true" timestamp=" t20:05:48z"> </osm> <tag k="amenity" v="fast_food" /> </node> KortDAktion)/promotion) DerWebservice/promotionwirdverwendet,umalleKortNAktionenabzurufen. Kort6Promotionen%laden% Tabelle%13%Webservice%Kort6Aktion%(GET%/promotion)% URL Methode GET Parameter N Antwort 200 OK Datenkonntenerfolgreichgeladenwerden. Antworttyp JSON Beispiel:% GET Antwort:% { "return":[ { "id":"22", "title":"neue Kortpromotion22", "startdate":" ", "enddate":" " }, {... }... } ] 44

45 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 } Benutzer)/user) [BA_HunzikerOderbolzS.64ff] Der/userNWebservicedientzurAuthentifizierungdesBenutzers.Überihnkönnensich diebenutzerannundabmelden.zudemwerdendiebenutzerdatendarübergeladen. Benutzerdaten%laden% Tabelle%14%Webservice%Benutzer%(GET%/user/<secret>)% URL Methode Parameter <secret>(optional)usersecretwirdgesendetfallsderbenutzerbereits eingeloggtist. GET N Antwort 200 OK Datenkonntenerfolgreichgeladenwerden.Der WebserviceliefertdieBenutzerdatenzurück. Antworttyp JSON Beispiel:% GET Antwort:% { "return":{ "id":"3", "name":"j\u00fcrg Hunziker", "username":"tschortsch", "oauth_user_id":" @host.com", "oauth_provider":"google", "token":null, "fix_count":"2", "vote_count":"4", 45

46 Studienarbeit"KortReloaded"NAnnritaEgli,CarmeloSchumacherNFS2013 "koin_count":"40", "secret":"secret", "pic_url":" "logged_in":true } } Badges%eines%Benutzers%laden% Tabelle%15%Webservice%Benutzer%(GET%/%user/<id>/badges%)% URL Methode <id>iddesbenutzers GET Parameter N Antwort 200 OK Datenkonntenerfolgreichgeladenwerden.Der WebserviceliefertalleBadgeszurückmitder Angabe,obderBenutzerihngewonnenhatoder nicht. Antworttyp JSON Beispiel:% GET Antwort:% { "return":[ { "id":"1", "name":"highscore_place_1", "title":"1. Rang", "description":"erster Rang in der Highscore...", 46