SHARITY. Sluttrapport. Benjamin Aarstad Nygård s Vegard Lokreim s Pål Morten Eid s Magnus Lunde s188075

Transkript

1 SHARITY Sluttrapport Benjamin Aarstad Nygård s Vegard Lokreim s Pål Morten Eid s Magnus Lunde s188075

2 PROSJEKT NR Studieprogram: Informasjonsteknologi Postadresse: Postboks 4 St. Olavs plass, 0130 Oslo Besøksadresse: Holbergs plass, Oslo TILGJENGELIGHET Åpen BACHELORPROSJEKT HOVEDPROSJEKTETS TITTEL Sharity DATO Telefon: Telefaks: ANTALL SIDER / BILAG 56 / 2 PROSJEKTDELTAKERE Vegard Lokreim s Benjamin Aarstad Nygård s Pål Morten Eid s Magnus Lunde s INTERN VEILEDER Kirsten Ribu OPPDRAGSGIVER Simplenæss KONTAKTPERSON Benjamin Aarstad Nygård SAMMENDRAG Sharity er en veldedighetsapplikasjon som i hovedsak består av 2 deler: - En mobilapplikasjon - En webapplikasjon Mobilapplikasjonen er et verktøy som skal gjøre det lettere for brukere å lese om og gi støtte til prosjekter de interesserer seg i. Webapplikasjonen er et verktøy som skal gjøre det lettere for veldedige organisasjoner å gi mobilapplikasjonens brukere informasjon om deres prosjekter, og oppdatere dem med nyheter når de måtte ønske. En viktig del av Sharity er at giverne kan utfordre sine venner til å gjøre det samme, og forhåpentligvis vil dette føre til at flere donerer til gode formål. Til sammen håper vi Sharity-systemet kan gjøre verden til et enda bedre sted å leve i fremtiden. 3 STIKKORD Veldedighet Tilgjengelighet Intuitivt i

3 Forord Gruppen kom i kontakt med oppdragsgiveren, Simplenæss, via Anders Eckhoff som gikk samme studielinje som oss, bare ett år tidligere. Simplenæss er et lite firma startet opp av Tony Næss i 2012 og har sitt ekspertområde innen design. De hadde en idé om en veldedighetsapp, men hadde ikke tid eller ressurser til å gjøre noe ut av tankene, derfor var de veldig glade for at vi tok kontakt. Gruppen og oppdragsgiver gikk inn i en kontrakt, og prosjektet fikk det midlertidige navnet Sharity. Oppdragsgiver mente at det var et behov og rom på markedet for en applikasjon hvor potensielle givere enkelt kunne donere penger til veldedige organisasjoner etter sin egen økonomi. Vegard Lokreim har jobbet for bl.a. Plan Norge og SOS barnebyer, og vet mye om når og hvorfor giverne donerer. Det viser seg at det doneres mest penger når det oppstår naturkatastrofer eller f.eks. når giveren får tilbakemelding på at donasjonene nytter. Sharity er en produktoppgave som til slutt har endt opp som en mobilapplikasjon og en kundebehandlingsside. Mobilapplikasjonen er et hjelpemiddel for givere til veldedige formål, slik at de lettere kan donere penger til organisasjoner de ønsker å støtte. I tillegg kan de følge organisasjoner og holde seg oppdatert på hva pengene blir brukt til. Disse giverne kan dele sine donasjoner på Facebook og utfordre sine venner til å gjøre det samme. Slik håper vi at det går en slags konkurranse blant venner i å donere til veldedighet. Dette gjør forhåpentligvis appen morsom å bruke. Utenom mobilapplikasjonen er det en kundebehandlingsside tiltenkt de veldedige organisasjonene. Her kan de legge til og endre prosjekter og nyheter, samtidig som de kan få ut grafisk statistikk over alle donasjoner, følgere, prosjekter og nyheter. Vi tror dette i stor grad vil hjelpe veldedige organisasjoner under videre innsamling av donasjoner. Til slutt vil vi takke veileder ved Høgskolen i Oslo og Akershus, Kirsten Ribu, for mange og konstruktive tanker og tilbakemeldinger rundt prosjektet og hennes motiverende ånd. En takk også til Tony Næss og Simplenæss for deres kreativitet og nyskapning. ii

4 Sammendrag En kort gjennomgåelse av prosjektet Sharity er en veldedighetsapp til smarttelefoner med en tilhørende kundebehandlingsrelasjonsside i form av en nettside. For å komme fram til denne løsningen gikk vi ut fra denne problemstillingen: «Hvordan utvikle en app som senker terskelen for å donere penger til veldedige organisasjoner og gjøre dette mer tilgjengelig for folket.» Denne problemstillingen har altså resultert i 2 hoveddeler; En mobilapplikasjon(app) og en webapplikasjon(nettside) som sammen har det foreløpige navnet Sharity. Mobilapplikasjonen er et ekstra verktøy for veldedige organisasjoner slik at de forhåpentligvis kan samle inn mer penger til sine saker, og webapplikasjonen er en kunderelasjonshåndterings-side for organisasjonene, slik at de enklere har kontroll på sin(e) side(r) i appen. Appen gir brukere mulighet til å finne og lese om de organisasjonene de ønsker, de kan følge de sakene som interesserer dem, de kan donere penger til prosjekter/saker de mener er viktig, og de kan utfordre sine venner til å gjøre det samme. Nettsiden gir de veldedige organisasjonene et grensesnitt hvor de enklere kan legge inn nye prosjekter og nyheter i appen. Samtidig kan de få en grafisk oversikt over brukerne knyttet til sin organisasjon, dvs. de får en totaloversikt over brukernes donasjoner og aktiviteter i appen. Ved at brukeren kan holde seg oppdatert på sine hjertesaker og utfordre sine venner, håper vi at det skal bli mer attraktivt for den potensielle giver å gi til veldedige organisasjoner. Vi tror og håper at dette systemet kan bidra til en bedre verden over tid ved at veldedige organisasjoner kan motta større summer totalt sett i løpet av et år. Gruppenettside: Appen: Link: Registrer bruker selv. Nettsiden: Link: Brukernavn: Passord: lege Kan selvsagt registrere en organisasjon selv også. iii

5 Innhold BACHELORPROSJEKT... i Forord... ii Sammendrag... iii Innledning... 3 Organisering av rapporten... 3 Om oppgaven... 3 Problemstilling... 3 Begrunnelse av problemet... 3 Oppsummering av løsningen... 4 Oppdragsgiver... 4 Vår bakgrunn... 4 Bakgrunn... 5 Kontekst... 5 Nye teorier... 5 Kost/ nytte analyse... 5 Kravspesifikasjon... 6 Leserveiledning:... 6 Mål for appen:... 6 Mål for CRM:... 6 Funksjonelle krav... 6 Ikke-funksjonelle krav... 7 Fremgangsmåte/Planlegging og metode... 9 Produktet Mobilapplikasjonen(frontend) Mobilapplikasjonen(backend-bruker) Mobilapplikasjonen(backend-bruker) CRM(frontend) CRM(backend) Diskusjon Hvordan løser oppgaven oppdragsgivers problem? Prosjektets kvalitet Brukeres tilbakemelding Oppdragsgivers tilbakemelding Konklusjon Evaluering av resultater og funn Hva ble oppnådd? Hvor nyttig er produktet for arbeidsgiver? Egenevaluering Videre arbeid: Referanser

6 Teknisk spesifikasjon Programmets oppbygning og funksjonalitet Teknologisk plattform Operativsystem Oppdeling i moduler Ikke-funksjonelle krav Verktøy og kodestandarder HTML 5 Hyper Text Markup Language Bootstrap Basecamp Github Brukerveiledning CRM:... XIII REGISTRERING/LOGG INN... XIII HJEM... XV MENY... XVII PROSJEKT... XIX NYHET... XXIII STATISTIKK... XXV INNSTILLINGER... XXVII Testing... I 2

7 Innledning Organisering av rapporten Denne rapporten er satt opp slik at leseren først får en innledning i bakgrunnen for oppgaven og kravene som er satt fra oppdragsgiver og gruppens side. Videre tar den opp planleggingen og arbeidsprosessen gjennom hele prosjektperioden. Deretter fortelles det om resultatet, etterfulgt av drøfting av feilkilder, prosjektets kvalitet og lignende. Etter dette konkluderer og evaluerer vi prosjektet og sluttresultatet. Til slutt er det lagt ved referanser, tekniske spesifikasjoner, en brukerveiledning og andre vedlegg. Vi kan si at rapporten er satt opp i kronologisk rekkefølge relatert med arbeidsprosessen. Det som ble gjort først i prosjektperioden står først, og vice versa (les: motsatt). Om oppgaven Sharity er en veldedighetsapp med en tilhørende CRM-nettside(Kunderelasjonsbehandling). Mobilapplikasjonen skal virke på smarttelefoner og CRM-siden på datamaskiner, tablets- og mobilnettlesere. Problemstilling «Hvordan utvikle en app som senker terskelen for å donere penger til veldedige organisasjoner og gjøre dette mer tilgjengelig for folket.» Formålet ved prosjektet er å utvikle en mobilapplikasjon som skal gjøre det enklere for den glade giver å donere penger til prosjekter og organisasjoner de mener er viktig, samtidig som de kan utfordre sine venner til å gjøre den samme dyden. Begrunnelse av problemet Simplenæss har sett et tomrom og en mangel på en enkel og morsom måte å donere penger til veldedige formål på. Den dag i dag må disse organisasjonene gå ut på gaten og «mase» på folket slik at de kan donere, eller eventuelt ringe rundt og spørre om folket er villige til å gi noen kroner til et godt formål. Denne formen for å be om penger kan virke masete og slitsom for de potensielle giverne og gjør det mindre gøy. Mobilapplikasjonen skal gjøre det enklere for alle å donere penger. Ikke alle vil gi 300kr i måneden til samme organisasjon, men heller gi 50kr her, 100kr der osv. Dette gjør at brukeren ikke trenger å forplikte seg til et fast avdrag hver mnd., men kan heller gi penger når de føler de har noen kroner til overs. Det skal likevel være mulig å sette opp et fast trekk for hver mnd. for de som ønsker det, men da kan de velge hvilken sum de har lyst til å gi, i motsetning til at en organisasjon sier at du må gi 300kr hver måned. Da kan brukeren sette opp beløp som passer deres økonomi. I tillegg vil det gjøre det litt mer gøy når man kan utfordre sine venner til å gjøre det samme. Simplenæss og vi, håper og tror dette vil gjøre at giverne donerer mer penger totalt sett, og det er selvsagt en gevinst for hele omverdenen. Brukerne av applikasjonen vil også kunne se informasjon om prosjekter og nyheter fra forskjellige organisasjoner som forteller hvor og hvorfor de trenger penger, eller f.eks. en oppdatering på et prosjekt så man kan se at veldedighet nytter. Det er klart at det er morsommere å gi når giveren får tilbakemeldinger og oppdateringer på hvordan det går i evt. et kriserammet område. 3

8 Oppsummering av løsningen Gruppen utviklet en mobilapplikasjon med prosjektnavnet Sharity, i tillegg utviklet vi en kundebehandlingsside på nett for organisasjonene slik at de lettere kan styre sin organisasjon i appen. Sharity-systemet er utviklet slik at det skal være enkelt å gi til veldedige organisasjoner og lett for organisasjoner å holde oversikt over hvilke saker giveren er interessert i og ønsker å gi til. Brukere av mobilapplikasjonen vil ha mulighet til å finne frem til de organisasjoner de vil, den organisasjonens prosjekter og nyheter, donere til de prosjektene de vil og utfordre sine venner til å gjøre det samme. Mobilapplikasjonen er utviklet for kryssplattform og skal derfor fungere på alle smarttelefoner. En organisasjon vil i hovedsak benytte seg av webgrensesnittet til Sharity. Her kan de opprette nye prosjekter og nyheter, endre sin organisasjons informasjon og se statistikk over alt de måtte ønske. Webgrensesnittet er utviklet slik at det skal fungere i moderne versjoner av Mozilla Firefox, Google Chrome, Opera og Safari, og er laget på en responsiv måte slik at den skal passe alle skjermstørrelser og oppløsninger. Oppdragsgiver «Simplenæss er et norsk selskap som ble etablert i 2012 av Tony Næss(heretter Tony) og har per , fire ansatte. Simplenæss driver i hovedsak med design og utvikling av nettsteder og applikasjoner for digitale flater. Kundegruppen varierer fra små- / mellomstore bedrifter til større aktører som REMA 1000, Reitangruppen og Sparebankstiftelsen DNB. Simplenæss er en digital samarbeidspartner til en av Norges mest ettertraktede reklamebyråer innenfor retail, Fjeldheim & Partners» 1. Sharity er i grunn litt utenfor firmaets interesseområde, og de ser nok ikke på dette som en potensiell stor inntekt. Dette har vi ikke pratet noe særlig om, men vi antar de ser for seg å ta en minimal andel av hver donasjon, for å kunne drifte, opprettholde og forbedre systemet. Vår bakgrunn Gruppe 32 består av fire studenter fra Høgskolen i Oslo og Akershus, hvor samtlige går ingeniørfag data. Prosjektgruppen møttes mer eller mindre tidlig i utdanningsløpet og har siden vært venner og samarbeidspartnere ved flere skoleprosjekter. Vi ser på dette som en stor fordel da vi føler oss trygge på hverandre, vet hva de andre er gode for og har et likt ambisjonsnivå. Gruppen har en god sammensetning av interesser og kompetanse, som gjør at vi utfyller hverandre veldig godt. Ingen på gruppen har tidligere erfaring innen for arbeidslivet i denne sjangeren, men vi har stort pågangsmot og motivasjon for å lykkes. Vi mener at om man setter sammen ulik kompetanse i en gruppe og får de til å arbeide godt sammen vil man oppnå meget gode resultater. Til sammen har vi litt erfaring innen HTML og CSS, Java, PHP og MySQL, men ingen av oss har vært noe særlig borte i Javascript, Ajax, jquery og JSON. På dette punktet hadde vi alle en del å lære. I tillegg hadde vi en del å lære om Bootstrap-rammeverket for å få responsiviteten vi ønsket. 4

9 Bakgrunn Kontekst Arbeidet står i sammenheng med kriserammede områder over hele verden og arbeidet med å hjelpe mennesker og dyr i nød, forskning av nye metoder for f.eks. medisin. osv. Vi ser bl.a. at denne appen kunne vært veldig nyttig under innsamling av penger til de kriserammede i Nepal i disse tider og for å få frem behovet for donasjoner til folket. En veldig drøy sammenligning kan være veldedighetskonserter eller tv-innsamlinger som er laget for å lede oppmerksomheten mot et kriserammet område. Men vi vil ikke påstå selv at dette er en god sammenligning da disse har varighet over maks 1-3 dager, imens dette systemet vil være aktuelt året rundt og i tillegg kan skape blest rundt aktuelle kriseområder. Det er vanskelig å sammenligne selve prosjektet med noe annet, da hverken vi eller oppdragsgiver vet om noe liknende system. Utover dette vil vel systemet kunne sammenlignes med andre mobilapplikasjoner til diverse plattformer og da spesielt andre kryssplattform applikasjoner. Nye teorier Gruppen måtte lære følgende nye teknologier under prosessen: Javascript, Ajax, JQuery, JSON, Bootstrap, jquery Mobile First, litt PHP, Phonegap, og ikke minst det å få disse teknologiene til å samkjøre og snakke sammen. Kost/ nytte analyse Prosjektet vil forhåpentligvis komme til stor nytte for veldedige organisasjoner i fremtiden, siden dette systemet skal bidra til å gjøre innsamling av donasjoner enklere. Og fordi giverne kan gi penger til de sakene de måtte ønske, uten å måtte «mases» på av de gjeldende organisasjonene. Samtidig kan organisasjonene se forskjellig statistikk som de kan dra nytte av for å motta enda flere donasjoner. Derfor ser vi på dette som en «vinn-vinn»-situasjon for begge parter som skal bruke dette systemet, og ikke minst at det kan bli en gevinst for verdenssamfunnet på lang sikt. Med tanke på oppdragsgivers side av saken, så ville nok ikke dette prosjektet kommet på markedet på noen år om ikke vi hadde tatt denne oppgaven nå. For Simplenæss var dette kun en idé de hadde tenkt på over lengre tid, men ikke har hatt tid og ressurser til å gjøre noe med. Derfor ble de veldig engasjerte når vi tok kontakt. Videre vet vi ikke om Simplenæss vil få noe økonomisk gevinst av dette, da dette skal og burde være et system som ikke skal gi en stor økonomisk gevinst til eier. Likevel antar vi at de må motta noen økonomiske midler på et eller annet vis for å klare å opprettholde og drive dette systemet. 5

10 Kravspesifikasjon Her vil alle funksjonelle og ikke-funksjonelle krav til systemet være beskrevet, og det vil bli beskrevet hvordan vi har arbeidet med denne underveis. Leserveiledning: Kravspesifikasjonen starter med målene for de to delene av systemet, så kommer de funksjonelle kravene og ikke-funksjonelle kravene. Til slutt er det beskrevet litt om endringshåndtering. Mål for appen: - Lage en mobilapplikasjon hvor brukere kan registrere seg og donere penger til de organisasjonene og prosjektene de ønsker. - Brukerne skal få en brukervennlig opplevelse. - Appen ser tiltalende ut og at den er morsommere å bruke enn konvensjonelle metoder. Mål for CRM: - Lage et CRM som lar organisasjonene opprette nye prosjekter og nyheter, i tillegg kan de endre og slette prosjekter og nyheter - Det skal være en tiltalende statistikkdel som organisasjonene kan dra nytte av med tanke på videre innsamling av penger. Litt kynisk fortalt kan de bruke denne delen til å finne hvordan de på best mulig måte skal få samlet inn mest mulig penger. - Siden skal være brukervennlig og by på minst mulig utfordringer for brukeren. - Den skal være effektiv og lite tidkrevende. Funksjonelle krav De funksjonelle kravene definerer hvilke punkter systemet SKAL gjøre, BØR gjøre og eventuelt andre tilleggsfunksjoner som er ØNSKET å gjøre. Prioritert funksjonalitet: Systemet SKAL kunne Appen: Registrering og logg inn Brukeren skal kunne sortere og søke på organisasjoner og prosjekter ut i fra forskjellige kriterier. Brukeren skal kunne donere penger til valgfri donasjon/prosjekt med en valgfri valør Brukeren skal kunne legge til venner. Brukeren skal kunne utfordre venner til å donere, både ved direkte utfordring i appen. Brukeren skal kunne abonnere på prosjekter. Prosjektene som brukeren abonnerer på skal bli prioritert på oversikt-siden Brukeren skal kunne se hvor mye h*n har donert den siste måneden og totalt Brukeren skal kunne lese om organisasjonene, og om nye prosjekter og nyheter skrevet av organisasjonene. En organisasjon skal kunne starte på registrering av organisasjon på appen og ha mulighet til å fortsette registreringen på nett. CRM: En organisasjon skal kunne registrere seg til appen via CRMet En organisasjon skal kunne fortsette registreringen de startet i appen på CRM. 6

11 En organisasjon skal kunne se statistikk over diverse forskjellige aspekter bl.a; donasjoner, abonnenter, prosjekter og nyheter En organisasjon skal kunne registrere nye prosjekter og nyheter knyttet til deres organisasjon. En organisasjon skal kunne endre informasjonen om sin organisasjon En organisasjon skal ha en oversikt over alle prosjekter og alle nyheter, og ha muligheten til å se på et/en enkelt prosjekt/nyhet, i tillegg til å kunne endre disse. Ønsket funksjonalitet: Systemet BØR kunne Appen CRM Brukeren kan logge inn med Facebook Brukeren kan dele/utfordre på Facebook. Når en nyhet blir publisert skal det sendes et push-varsel til de brukerne som abonnerer på organisasjonen/prosjektet. Ikke-funksjonelle krav Ikke-funksjonelle krav er ved hvilke rammer systemet skal implementere de funksjonelle kravene. Vi har delt dette opp i produktkrav, prosesskrav og eksterne krav Brukervennlighet: - Språket på applikasjonen og nettsidene skal være på norsk bokmål. - Språket skal inneholde et minimum av fremmedord og fagspråk. - Bruker skal kunne bruke systemet etter kort opplæring eller selv ved å sette seg inn i systemet. Effektivitetskrav: - Alle nettlesere bør laste siden innen normal hastighet (5-6sek). - Funksjoner skal gjennomføres uten brems i systemet. Pålitelighetskrav: - Alle data skal lagres trygt i en database og bli der til de fjernes av bruker. - CRMet skal alltid være tilgjengelig. Estetiske krav: - Appen skal i hovedsak bruke symboler sammen med tekst for lett forståelse. - Nettsidene skal ha beskrivende knapper og tekst. - Fargene skal være gjennomgående gjennom hele appen. - App og nettsider skal være enkelt satt opp slik at det er lett å finne frem. Rammekrav: - App skal lages for alle skjermstørrelser og nettsidene skal lages for alle nettlesere og skjermstørrelser. - Programmeringspråk som skal brukes: HTML, PHP, CSS, MySql, Jacascript og JQuery. - Bootstrap brukes som template og rammeverk for responsivitetens skyld og styles videre med CSS. Prosesskrav: Prosesskrav er kravene til prosessen rundt utviklingen av systemet, dette vil si krav til utviklingsmetodikk, leveranse og implementasjon. Utviklingsmetodikk: - Utviklingsmetoden vi har brukt i dette prosjektet er SCRUM med korte iterasjoner. 7

12 Leveransekrav: - Kravet for leveranse er likt det skolen har satt som endelig frist for prosjektinnlevering. Endelig levereranse: - Mobilapplikasjonen skal kunne kjøres med valgfri smarttelefon eller tab/pad. - Nettstedene skal være lastet opp på skolens server og skal kjøres fra valgfri enhet med nettilgang og en nettleser. Implementasjonskrav: - Produktet skal utvikles for siste versjon av; Mozilla Firefox, Opera, Safari og Google Chrome - Produktet skal være responsivt og utvikles for alle oppløsninger. - Produktet skal bruke webprogrammering i PHP, HTML/CSS rammeverk, MySql opp mot database, javascript/ajax og JQuery som støtte til andre funksjoner, og Bootstrap som rammeverk for hjelp til responsivt design. Endringshåndtering Her skal vi ta for oss hvem som har mulighet til å foreslå endringer og hvordan en endring kan slå gjennom. Hvem kan foreslå endringer? Endringer kan bli gjort av interessenter, i dette tilfellet vil det si: Tony Næss (oppdragsgiver og eier av idéen til prosjektet og Simplenæss), og gruppen (vi) som utvikler produktet. Tony kan ha forslag til endringer der han mener at ting burde være annerledes, og vi kan komme til han med forslag til endringer om vi syns det er fordelaktig for produktet. Hvordan få gjennom en endring? Om et forslag til endring har kommet opp i gruppen må hele gruppen rask bli enige om at dette er en ønsket endring eller ikke, før man så tar det videre til oppdragsgiver. Det er fordelaktig at alle interessenter er enige om en endring, men til syvende og sist er det Tony sitt hjertebarn og hans produkt. Derfor kan han legge ned veto om han mener at ting skal endres/ikke endres. Det som er viktig i en endringsprosess er at det ikke skaper problemer for prosjektet tidsmessig, slik at arbeids- og fremdriftsplaner kan følges videre uten store justeringer. Om en endring fører til at funksjonelle og ikke-funksjonelle krav ikke lenger er relevante, må nye krav settes i samarbeid med oppdragsgiver. Feilhåndtering Om det er feil eller mangler i systemet må dette rettes før en ny iterasjon kan begynne eller hele funksjonen med mangler må avbrytes og evt. ta det igjen opp senere når vi har tid. Dette er slik for å forhindre skade på eksisterende og ny kode. Grunnen til dette er fordi eventuell ny kode kan slutte å fungere om man fikser problemet senere. Endringer underveis Tony har ved flere anledninger ønsket seg endringer utseende på mobilapplikasjonen, og vi har i grunn latt han bestemme mye om hvordan denne skal se ut. Vi vurderte det som at han tross alt er den av oss som har en del erfaring med design og derfor ble det stort sett slik han befalte. Av og til var det litt slitsomt med hans mening om å endre knapper, layout osv, og vi følte dette senket fremdriften i prosjektet. Noe det helt klart gjorde, men vi måtte tro på han når han mente at endringene var til det bedre. Utenom noen utseendemessige endringer har han ikke villet endre noe på funksjonene vi ble enige om, så kravspesifikasjonen har ikke hatt de store endringene siden vi skrev den sammen i Januar. 8

13 Fremgangsmåte/Planlegging og metode I dette kapittelet vil vi beskrive planleggingen og fremgangsmåten, samt metodene som ble brukt i denne perioden. I midten av Januar skrev vi kontrakt med Simplenæss og startet planleggingen av prosjektet. Til å begynne med ga Tony oss en bedre innføring i hva slags produkt han ønsket. I utgangspunktet ønsket han seg kun en prototype på en mobilapplikasjon som han kunne ta med seg til Innovasjon Norge 2 for å søke støtte, men gruppen skjønte fort at dette ikke var nok til en bacheloroppgave. Derfor diskuterte vi mer rundt dette og kom fram til at vi skulle lage en kryssplattform mobilapplikasjon og et CRM 3. Tony og hans ansatte har ikke mye erfaring rundt programmering som dette, så vi fikk i første omgang en oppgave om å kartlegge hvilke programmeringsspråk og rammeverk som passet dette prosjektet best. Etter å ha forhørt oss med veileder og gjort mye research selv, var dette det teknologikartet vi endte opp å sende tilbake til Tony: Vi fant ut at med hjelp av PhoneGap 4 kunne vi få bygget en kryssplattform mobilapplikasjon med i hovedsak HTML og CSS som front-end og Javascript som backend. Dette ga oss noen utfordringer i det at ingen av oss hadde vært noe særlig borte i Javascript tidligere, og derfor måtte vi lære oss et nytt språk. Videre fant vi ut at funksjoner kunne effektiviseres med JQuery, Ajax og JSon. Og for å få kommunisert opp mot databasen måtte vi gå fra Javascript til PHP. Videre mente Tony at mobilapplikasjonen skulle inneholde en push-funksjon (se bilde 2.), derfor måtte vi også ta i bruk plugins (Java for Android og Objective C for ios) for å få dette til. Tony kom selv også med noen forslag til språk og rammeverk, bl.a. ruby og sencha touch. Vi valgte å programmere appen i phonegap ettersom dette var det vi fant mest kilder for og virket best etablert og vel dokumentert

14 Ved neste møte med Tony satte vi oss ned og lagde en kravspesifikasjon sammen. Dette var veldig nyttig for oss slik at vi fikk en god oversikt over hva han forventet seg ut av systemet, hva vi oppfattet som realistisk, også fikk vi diskutert hva vi mente burde være med. Videre pratet vi om hvordan prosessen skulle utføres og Tony hadde flere innspill her også: Basecamp 5 skulle brukes til å sende filer frem og tilbake mellom gruppen og Simplenæss, i tillegg til at vi alle skulle synkronisere våre telefoner opp mot Basecamps kalender slik at vi til en hver tid visste hva som måtte gjøres. Kommunikasjonen mellom gruppen og Simplenæss skulle heretter foregå på Slack 6 og utstyret som skulle brukes var våre personlige datamaskiner. For å gjøre det så lett som mulig for oss å jobbe på samme prosjekt samtidig opprettet vi også et repository på Github. Etter det møtet startet vi med gruppenettsiden, forprosjektrapporten og fremdriftsplanen som skulle leveres snarest til Høgskolen. Vi satte opp en generell fremdriftsplan så langt fram i tid vi klarte og baserte den på at vi skulle bruke SCRUM 7 med korte intervaller. Vi må innrømme at det var litt vrient å få oversikt over alt som skulle gjøres på et så tidlig stadium i prosjektet og at vi derfor burde ha endret denne underveis. Det har vi dessverre vært litt for dårlige på, men vi har vært flinke til å notere ned alt av ting som må gjøres på et felles sted og fordelt oppgavene fint likevel. Så det har løst seg på en brukbar måte. Nytten ved å sette opp modeller Vi ser at nytten ved å sette opp modeller i forkant av prosjektet er veldig stor. Det hjelper deg å sette mer perspektiv på hele prosessen som må til, samtidig som du får mye bedre oversikt over hva som skal gjøres underveis. For vår del var det livsviktig å få laget et teknologikart bl.a. Til tross for at dette teknologikartet ikke er 100% likt det vi lagde i starten, så fikk vi en generell oversikt over hvilke teknologier som måtte til og hvordan de måtte jobbe med hverandre. Å sette opp en måte å arbeide på slik som SCRUM, gjør også at arbeidsprosessen blir mer strukturert og hele teamet vet hva de skal gjøre til en hver tid. Basecamp og Slack har vært gode hjelpemidler for gruppen når vi skal kommunisere mot oppdragsgiver. Det har vært med på å gi oppdragsgiver en god oversikt over vår progresjon utover i prosjektperioden. Generelt sett tørr vi å påstå at ved å sette opp modeller tidlig i prosessen, vil hele prosessen og prosjektet bli mer strukturert og nøyaktig. 10

15 Produktet Mobilapplikasjonen(frontend) Logginn Øverst på loggin skjermen er av en headerdiv. Headerdiven er et gjennomgående tema i appen og er en mørk blå <div> øverst, ca en halv cm høy og 100% bred og under der sidetittelen som her er en <span>-tag med teksten Logg inn. Deretter er det to <input>felter til brukernavn og passord samt to <buttons> for å logge inn eller registrere ny bruker. Input for brukernavn / epost er av type text, mens passord inputen er av type password for å skjule hvilke inputs som er gjort. Disse inputfeltene og knappene er lagt i et table for å holde dem på samme linje. Foran inputfeltene er det en img med et ikon av en hvit sirkel. Oversikt Øverst er headerdiv (alt det blå) og headertop (det mørkeblå) med en <p>-tag som er sidetittel, Sharity. Etter dette kommer en <div> med en klasse main_content som har en liten margin til toppen og bredde 90% sentrert på skjermen. Deretter er det en <div>med alle delene av den grå boksen som inneholder sortering og søkefelter. Søkefeltet er en vanlig <input> av type text som oppdaterer listen nedenfor ettersom det skrives inn søkekriterier. Under denne boksen kommer organisajonslisten / prosjektlisten som er en i utgangspunktet tom <ul>- som må fylles ved bruk av javascript/jquery. Listen inneholder <li>-enheter som hver er formattert for å plassere innholdet korrekt. Til venstre er en <div class= li_left > som indikerer at den skal ligge til venstre. Den har en <img> som er logoen til prosjektet dersom den har en. I midten er en <div> med to <span>-tags, en for organisasjonsnavn og en for antall prosjekter. Den første <span> - en har display:block for å få sin egen linje. Til høyre en en <div> med en <img> som er et ikon av en pil som indikerer at det er mer å hente ved å trykke. Nederst på alle sider er det en <footer> som er fixed og dermed ikke flytter seg selv om det skrolles nedover siden. Den inneholder en data-role=navbar som gjør at jquery mobile behandler den som en navigerings meny. Den har en <ul> med fire <li> elementer til forskjellige deler av appen. Den delen av appen du er på har en mørkere grå bakgrunn fordi den har en active -klasse som gir den en annen styling, her backrgound=#eee. 11

16 Dersom det er kommet nye venneforespørsler eller utfordringer vil det dukke opp noen røde notifikasjoner i footeren. Dette er <div>er som blir dynamisk lagt inn ved funn av ny informasjon Organisajon I tillegg til den vanlige headeren er det også en tilbake-knapp i form av en <img class=back_btn> som blir bundet med javascript til å gå tilbake. Deretter er det en <div> med bakgrunnsbilde og logo. Bakgrunnsbildet har max-length:100% og max-height:100% for at både høye og brede bilder skal vises riktig, all overflødig plass blir grå bakgrunn. Bildet sentreres i midten ved at det har postition:absolute og både top, left, bottom,right er 0 med margin:auto. Logoen er absolute plassert <div> som har border-radius:50% for å gjøre den sirkelformet og inni er et <img> element. Deretter kommer to linker, en av dem er et vanlig <a>-element mens det andre har en klasse som gjør at den ser ut som en knapp. Organisajonsinformasjonen er tre <span> elementer med henholdsvis kategori, tittel og om organisasjonen. De har klasser som grey, small, title og block som formatterer dem med ønskelige farger, størrelser og oppførsel. Deretter er en <div> med grå border-bottom og en <h4> inni med listetittelen Pågående prosjekter Deretter er en <ul> som er laget på samme måte som organisasjonslisten på Oversikt-siden. Nyhetslisten er laget på samme måte, men formattert annerledes. Et stort bakgrunnsbilde øverst laget som bakgrunnsbildet lenger oppe her. Deretter kommer en <article> med to <span> med prosjektnavn og dato. En <h2> inneholder nyhetstittel mens selve nyhetsteksten er surret inn i en <p>. Nederst en er <div class=article_separator> som er en rød strek for å skille mellom nyhetene. 12

17 Prosjekt Organisasjonslogoen har flyttet på seg og blitt litt mindre og kan klikkes på. Ved siden av den store grønne donerknappen er det nå to <span> elementer som sier noe om du følger prosjektet og om du VIL følge prosjektet. En <span> med funksjon der altså, klikk på den og du følger prosjektet. Under kommer.main_content-<div>en med først to <span> elementer som sider hvor prosjektet holder til, et element til holder tittlen, mens et <p> element tar seg av om prosjektet. Deretter følger en <div class=listdiv> som gir litt margin oppover og en ny liste som er beskrevet i detalj tidligere. Noe nytt her er at nyhetsbildet kan trykkes på slik at det vises en <div data-role=popup> med en større versjon av bildet. Bildet er sentrert midt på skjermen, dette skjer automatisk og er gjort av jquery mobile for oss. Nyhet Denne er veldig lik prosjekt, forskjellen er at den ikke har informasjon om du følger eller ikke. Logoen er også blitt større og har flyttet på seg igjen. 13

18 Venner Inne i headeren er det kommet et ikon til høyre. Dette er en <img> og du kommer til Legg til venner -siden ved å trykke på den. I main_content kommer en <span> som er formattert til å vise antall nye venneforespørsler i rødt. Det dukker opp en blå link ved siden av dersom det er kommet noen nye. Under her kommer en liste igjen. Der det er X har vedkommende ikke gitt tillatelse til andre om å se donasjonene sine. Legg til venner Et table med bare én <tr> er en knapp videre til å søke i Sharity. Det skulle være to, der den andre skulle hente vennelisten fra facebook. Dette hadde facebook gjort umulig i 2014 en gang og vi måtte fjerne den fra planene våres. En ny liste, denne gangen med telefonkontakter vises og er laget som alle de andre listene. Søk etter venner Her er det et søkefelt og en liste med resultater. <input>-elementet er igjen knyttet til listen og oppdateres mens du skriver. 14

19 Innstillinger I headeren er en logg ut knapp til høyre i tillegg til de vanlige tingene. Innholdet starter med en <table> med én rad og tre kolonner. Hver av dem har en <a> og en <img>. Linkene er til forskjellige innstillinger. Innstillingene er skjult, men åpner seg når du trykker på dem. Hver skjulte <div> inneholder en <table> med <input>s av forskjellige slag, ettersom hva de kan stille på, det er blanding av sjekkbokser, radioknapper, dropdown-menyer og helt normale <input> felter til både text til endring av postnummer, og nummer til endring av CCV-kode på kort. Alle inputfelter har placeholdere som indikerer hva som skal stå i feltene. Over radioknappene i privat innstilllingene er det <h5> elementer som foreteller hva de forskjellige knappene endrer på. Det er også <span> elementer som holder for eksempel tilgjenglig kapital Det er flere skjulte elementer som kan åpnes videre; endring av passord er ikke synlig med en gang du åpner Persondata-innstillingene, det er en egen link som åpner seg videre. Nederst på alle innstillings-fanene er det Lagre og Avbryt-knapper med tilhørende ikon. Nedover finner vi venneforespørsellisten som presenteres av et <h4>element. Dersom det er ubesvarte forespørsler vises dette i en <span> under tittelen. Listen er laget som vanlig, men er formattert med to knapper under navnet forespørselen kommer fra, med bekreft eller avvis. Under denne listen kommer det en separator-<div> med klasse greyline. Denne gjør at den lager litt plass over og under seg og en border-bottom lager en strek midt i. Denne skal skille venneforespørslene fra abonnementene dine. Abonnementer står det i en <h4> med en tilhørende liste over alle prosjektene du følger. Igjen kommer en liste med <li> elementer bestående av bilde,prosjektnavn og dato i midten og til høyre en <a> som sørger for å avslutte abonnementet i listeelementet. Ved tomme lister på denne siden er den kun en <span> med teksten eller 15

20 Meg Under header er en rundt <img> av deg selv med påfølgende navn i en <div>. Denne har en border-bottom for å lage et skille. Dersom det er nye utfordringer til deg, viser deg seg en <span> med melding om dette, men hvis ikke, er denne skjult. Det står Statistikk i en <div> med border-bottom før det kommer en boks lignende den som er på Oversikt-siden. Det er store grønne <span>tall på øvre halvdel og beskrivende måned eller total under. Boksene er gråere enn vanlig bakgrunn og har synlige borders. Deretter er det to <div>er med hvert sitt <table> som egentlig en fancy link til henholdsvis donasjoner og utfordringer. Donasjonene er listet opp med <img> prosjektlogo på venstre side, <div>er og <span>s i midten med navn og sum flytende til venstre og dato flytende mot høyre og et <img> ikon til høyre som indikerer om den faste donasjonen er pågående eller avsluttet. En besvart utfordring Utfordringslisten er todelt med et vanlig liste-element synlig og en skjult del som åpner seg når du klikker på knappen til høyre med tilhørende pil ned, for å vise at det er mer nedover. Slik ser den ut åpnet, legg merke til pilretningen som endret seg. Den nylige åpnede diven er i hovedsak todelt, høyre og venstre del. Venstre siden er en formattert tekst med donasjonsinfoen som du ble utfordret på øverst og en Nei takk knapp nederst. På høyresiden er knappen som godtar utfordringen. Verdt å merke seg at da dette er en allerede besvart utfordring, er knappene utstyrt med opacity:0.7 for vise at dem ikke er i bruk, bare for å indikere hvilket valg som ble gjort. Her ble utfordringen ikke tatt, og dermed viste det seg en <img> med en hake over den valgte knappen. Over der igjen er det en <span> som sier når den ble besvart. Øverst til høyre er det en <img> med et» ikon i bakgrunnen for å indikere sitat med sitatet skrevet oppå. Under er det en grå <span> med navn på meldinges forfatter. 16

21 Organisajson-Oversikt Det er standard header øverst, deretter en grå <div> ca 1 cm høy og halvveis inni den på venstre side er organisasjonslogo i kjent rund form. Det følges på med en <span class=grey> for kategorien det jobbes i og en <h2> med organisasjonsnavnet. Videre kommer det en boks som minner om de fra Oversikt og Meg sidene, og er laget på samme måte. Under der en det en <a> skjult bak et <table> der man kommer til publiser nyhet, og under dette så kommer en nyhetsliste som er laget som nyhetslisten på organisasjons-siden. Det som er nytt her er en liten blå <span> rett etter nyhetsteksten som viser Rediger og som sender deg til rediger nyhet-siden. Publiser/rediger nyhet Disse to sidene er identiske med unntak av en ekstra dropdown på rediger nyhet-siden som er fylt med alle nyhetene for å finne frem til en annen nyhet å redigere. Ellers er det et <table> med dropdowns med alle prosjektene, input for nyhetstittel, textarea for nyhetsinnhold, preview<div> for visning av valgt bilde med tilhørende fjern<span>. En input til url adresse og en hent knapp for å vise bildet i preview-området. Nederst er det Publiser og Avbryt-knapper. Aktiviteter Her er det en dropdown som inneholder alle prosjektene og deretter et <table> med tre kolonner; en for linktekst, en for en liten rød rund divs som viser antall, og en for en høyrepil. Ved å trykke på disse kommer du til tabeller over de som har donert til eller følger prosjektet. Øverst er tilbakepila og tittel i headeren, men nå er det også en undertittel i form av en <span> som er lik tittel med mindre font-størrelse og litt margin-left Under er tabellen som har en <th> med svart bakgrunn og hvit tekst, mens <tbody> har svart tekst med annenhver lysgul og standard bakgrunnsfarge. Dette er gjort for å lettere skille mellom radene og det er gjort ved hjelp av css : #detailstable tr:nth-child(2n){ background: lightyellow; } Statistikk... er ikke ferdig i skrivende stund men er ventet å inneholde grafer og histogrammer av nyttig statistikk fra databasen. Det skal forsøksvis være to grafer ved siden av hverandre og flere av disse radene, alt ettersom hvor mye statistikk vi legger inn. Det kommer til å bli datovalgs-knapper som åpner en enhets native datovelger som skal gi statistikk fra enten valgt dato, eller et tidsintervall intervall. Innstillinger Her er det kun en loggut knapp, denne siden er ikke ferdig. 17

22 Mobilapplikasjonen(backend-bruker) Login Ved trykk på Login eller enter-tast blir dataene sjekket opp mot database for en match. Det sjekkes først på bruker, hvis det ikke er treff sjekkes det opp mot organisasjoner både på organisasjonsnavn og organisasjonsnummer. Ved ingen treff vises en feilmelding om feil brukernavn / passordkombinasjon. Hvis det var fylt inn en riktig kombinasjon, kommer man til oversiktsiden hvis du er en bruker eller din organisasjons oversikt dersom du logger inn som organisasjon. Registrering Alle felter i registrering har en input_underscored klasse og hver gang de blir enten fokusert eller mister fokus (blur) endres border-bottom-fargen. Fra opprinnelig grå, blir den blå ved fokus, svart ved blur og godkjent input mens den blir rød ved blur og ikke godkjent input. Epost-feltet sjekkes også mot et regexuttrykk for adresser og viser en feilmelding som vist på figuren dersom det ikke matcher en korrekt adresse. Alle felter lagres i et javascript-objekt for bruk senere til oppsummering og fullføring av registrering. Hvis Godkjenn brukervilkår -checkboxen er checked får du fullføre registreringen og data sendes via PHP til databasen, og du blir deretter sendt til loginskjerm. Oversikt På oversiktsiden vises alle organisasjonenei listeform. Man kan trykke på Sorter og det endres til prosjekter. Det gjøres et ajax-kall som henter prosjektene istedetfor organisajsonene og formatterer listen til å passe med prosjektinfoen. Man kan også søke gjennom den gjeldende listen. Listen oppdateres for hver bokstav som skrives i søkefeltet. Dette utføres av jquery Mobile ved å koble søkefeltet med listen slik: <input id="orgfilter" data-type="search" data-role="none" class="search" placeholder="søk organisasjoner og prosjekter"/>.. <ul name="organizationlist" id="orglist" data-filter="true" datainput="#orgfilter"> Ved å klikke på en organisasjon eller et prosjekt lagres ID en dems i HTML5 sin localstorage for henting av data ved lasting av nyheter, visning av sider, donasjoner, etc. Man går også til siden som ble klikket på og sideskiftet har en slide effekt. Denne effekten er på alle sider der men fortsetter videre fremover: oversikt > organisasjon > prosjekt > nyhet. 18

23 Footer Den statiske footeren er linker til de forskjellige sidene i appen. Den aktive linken den siden du er på har en mørkere bakgrunnsfarge enn de inaktive. Dette gjøres ved at den aktive linken alltid skal ha en active klasse som angir en annen bakgrunnsfarge enn standarden Siden footer er fixed og dermed alltid er nederst og også alltid er på skjermen har vi laget en funksjon som gjemmer denne når det skal skrives inn input. Dette har vi gjort pga footer legger seg på toppen av mobil-tastaturet og er da bare i veien. Ved blur vises den igjen: $(document).on("focus", "input", function() { $.mobile.activepage.find("footer").hide(); }); $(document).on("blur", "input", function() { $.mobile.activepage.find("footer").show(); }); Organisasjon Hver gang man kommer til denne siden kjøres det to skripts i bakgrunnen; showorganization() og getnews(). Disse lister ut henholdsvis all organisasjonsinfo som navn, beskrivelse og prosjekter, og skriver ut nyhetene til prosjektene. Lister skrives ut ved å hente ut antall prosjekter / nyheter og dens info, og for hvert prosjekt/nyhet lage et listitem ut av informasjonen fra databasen og legge dem til listen. Det aktiveres en brødsmulesti når du er på enten en organisasjon- prosjekt- eller nyhet-side. Denne ligger på toppen av siden, under overskriften. Disse kan klikkes på for å gå direkte til siden det refereres til. Dette er gjort enkelt ved å sjekke hvilken organinsajon / prosjekt / nyhet du er på og lage en rekke av span-tagger som kan klikkes på. Klikkes det på nyheter linken blir du automatisk skrollet ned til nyhetsdelen av siden. Klikkes det på prosjekt så vil prosjektid lagres i localstorage og bytte side til prosjekt-siden. Det samme skjer ved trykk å klikke på doner knappene, bare at da kommer man til doner-siden. På denne siden er det én knapp for å donere til organisasjon, og hvert prosjekt i listen har en doner knapp der donasjonen går til et spesifikt prosjekt. Prosjekt Mye av det samme som organisasjonssiden. Bakgrunnsbildet har også en organisasjonlogo som er en link til organisasjonssiden. Ved siden av den store doner knappen er det informasjon om du følger prosjektet eller ikke, og en tilhørende link som følger / slutter å følge prosjektet. Informasjonen endres direkte uten å laste siden på nytt ved hjep av ajax. Ved visning av prosjektsiden kjøres checksubstatus() som endrer informasjonen ettersom om det er registrert et subscription i databasen eller ikke: (utdrag) success : function(response){ $("#followerstatus").html(response.length == 0?"Følger ikke":"følger"); $("#changefollowerstatus").html(response.length == 0?"Følg Prosjekt":"Ikke følg"); } På denne siden blir nyhetene listet opp på samme måte som prosjektene på organisasjonssiden. Her kan du også klikke på nyhetsbildet i listen og det forstørres i en popup på skjermen. 19

24 Nyhet Mye av det samme som prosjektsiden. Doner Informasjon hentes fra localstorage og ytterligere info hentes fra databasen og skrives ut på skjerm for å vise hvilket prosjekt man faktisk gir penger til. Ved å trykke på avbryt fjernes donasjonsdata fra localstorage og du går tilbake til der du var. Ved å klikke på doner beløp knappen sjekkes det om du har fylt inn all informasjon riktig; heltall større enn null hvis det er et egendefinert beløp og det må velges engangsdonasjon eller fast trekk. Hvis man bytter mellom egendefinert eller forhåndsvalgt beløp blir den andre nullet ut. For eksempel hvis du først valgte 50kr fra radioknappene og heller til skrive inn 40kr blir radioknappen avsjekket når du fokuserer på egendefinert inputfelt, og omvendt. Hvis alt er fylt inn riktig sjekkes det om du faktisk har dekning på konto for donasjonen og det vises en feilmelding dersom det ikke er nok på kontoen. Ved dekning blir donasjonen registrert og du får muligheten til å utfordre vennene dine til å gjøre det samme. Avbryt og gå tilbake til prosjekt/organisasjon eller OK og gå til utfordre-siden. Utfordre Vennelisten din hentes og skrives ut med en checkbox etter hver venn. De som er sjekket når du trykker på utfordre knappen legges i en array og sendes med i function sendchallenges(to_list, donationid, message) -funksjonen for videre utsending av utfordring til alle i listen til å matche donasjonen bak IDen og med melding til mottager. Dersom du ikke har valgt noen i listen kan du heller ikke utfordre, det telles opp antall valgt, dersom det er 0 blir det feilmelding. Meldingen du kan sende med er på maks 160 tegn og er definert i HTML taggen for input. Trykk avbryt og utfordre- og donasjonsdata slettes og du kommer tilbake til siden du var på før du trykke på doner-knapp. Venner Når vennesiden lastes får legg til venner -ikonet øverst til høyre et klikkevent om å bytte til Legg til venner -siden. Det sjekkes hvor mange nye venneforspørsler som er kommet siden sist og viser dette. Dersom det er nye forespørsler vises det en link til Innstillinger der man kan bekrefte eller avvise forespørslene. Det sjekkes hvilke brukere som er på vennelisten din fra databasen og skriver disse ut i en venneliste der det informasjon om hvor mye de har donert, dersom denne informasjonen er tilgjenglig for deg. Ved å klikke på dem sjekkes det om brukeren har gitt tilgang til venner om å sjekke side og donasjoner. Dersom donasjoner er privat og siden ikke er, kommer du til siden, men donasjonsdata blir skjult og dersom siden er privat, kommer du ikke inn på siden og det kommer opp en melding om Ingen tilgang. Legg til venner På denne siden hentes telefonkontaktene dine ved hjelp av Phonegap sine scripts. Siden venter på at enheten er klar,for deretter å kjøre getcontacts funksjonen. Denne funksjonen bruker Phonegap sitt navigator-objekt for å kommunisere direkte med enheten til å hente ut navn og nummer til kontakten og skrive dem ut i listeform. Dersom nummeret er registrert i Sharity kan man gå til profilen dems, hvis ikke kan man trykke på en knapp som sender en melding til vedkommende. Her brukes også navigator-objektet, vi har en predefinert melding som inneholder en link der appen kan installeres fra, samt en hilsen fra den som inviterte. 20

25 Melding Når brukeren skal få informasjon om forskjellige ting har vi laget en meldingsfunksjon der vi lager meldingen i en variabel, sender denne med i funksjonen og den vises på skjermen: var message = "Ingen tilgang"; showmessage(message); Denne meldingen vises midt på skjermen i 2 sekunder før den fader ut. function showmessage(message){ $(".messagediv div").html(message).css("padding","3pt").fadein().delay(2000).fadeout() } Innstillinger Øverst er det tre linker med innstillinger som hver åpner en fane. Disse fanene opptar samme område på skjerm så hver gang det velges en link, har vi gjort en sjekk på om de andre fanene er åpne og lukke dem dersom de er det for så åpne den valge fanen. Siden dette skjer animert må man også ha en delay på åpning av fane dersom det var en åpen fra før. Pila til linken viser hvilken fane som er åpen så denne må også byttes ved å sende link-knappen til changeiconarrow-funksjonen. var windowswereopen = false; if($("#btn_settings_persondata").attr("id")!= btn.attr("id")){ if($("#div_persondata").is(":visible")){ windowswereopen = true; $("#div_persondata").toggle("fast",function(){ changeiconarrow($("#btn_settings_persondata")); }); } }... if(windowswereopen){ div.delay("fast").toggle("fast",function(){ changeiconarrow(btn); }); }else{ div.toggle("fast",function(){ changeiconarrow(btn); }); } I disse fanene kan man sjekke og endre en del av dataene om deg, kortene dine og privat-innstillingene dine. Dette gjøres ved å sjekke inputs ved jquery og sende det videre til PHP som endrer dette i databasen. Det vises en melding om hva som er endret. Venneforespørlser og abonnementlister lages som alle de andre listene, og valgene du gjør oppdateres i database med ajax og PHP. En Loggut knapp sletter all informasjon i localstorage og sender deg til Logg in-siden.. 21

26 Meg All informasjon om deg og dine donasjoner og mottatte utfordringer hentes og vises i de tilhørende HTML-taggene. Med forskjellige SQL-spørringer hentes det ut data fra måned og totalt som viser donasjonene dine denne måneden og totalt. Du kan gå videre ti donasjonslisten eller utfordringene dine. Donasjonslisten lages på samme måte som tidligere og sorteres etter siste donasjon. Et ikon på høyresiden viser om en donasjon er fast trekk og aktiv eller stoppet. Ved å trykke på denne får du valget om å stoppe / starte donasjonen. Ved endring av donasjon endres ikon og backend funksjon uten å oppdatere siden. Ved å trykke på selve donasjonen går du til organisasjonen eller prosjektet som har fått donasjonen. Utfordringslisten har en Mer informasjon knapp som viser/skjuler en fane ned fra listitem. Denne knappen har en pil som peker ned eller opp ettersom om fanen er åpen eller skjult. Datoene i listene er formattert til å vise feks: 4 timer siden, 21 dager siden, etc. Funksjonen som gjør dette lager først javascript date-objekt fra datoen i databasen, deretter et nå-objekt, tar differansen og gjør om til enten sekunder, minutter, timer eller dager, alt ettersom de overstiger henholdsvis 60 sekunder, 60 minutter eller 24 timer: function calctime (date) { // Split timestamp into [ Y, M, D, h, m, s ] var t = date.split(/[- :]/); // Apply each element to the Date function var then = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]).gettime(); var now = new Date().getTime(); } var secs = (now - then)/1000; if(secs < 60) return Math.floor(secs)+ " sekund"+(math.floor(secs)==1?"":"er"); var mins = secs/(60); if(mins < 60 ) return Math.floor(mins) + " minutt" +(Math.floor(mins)==1?"":"er"); var hrs = mins / 60; if( hrs < 24) return Math.floor(hrs) + " time"+(math.floor(hrs)==1?"":"r"); return Math.floor(hrs / 24) +" dag"+(math.floor(hrs / 24)==1?"":"er"); Mobilapplikasjonen(backend-bruker) Side Organisajonsdata og prosjektnyheter hentes og formatteres. Nyhetslisten har linker der man kan redigere tekst og bilde. Nyhets-IDen lagres i lenken og ved klikk hentes det frem igjen og legges inn i inputfeltene til Rediger nyhet der de kan endres. Man kan også knytte den til et annet prosjekt hvis det er ønskelig. Bilder kan brukes enten ved å velge en fil fra enheten ved å klikke på bilde feltet som er knyttet til et skjult inputfelt med attributt type=file som åpner for henting av fil. Eller man kan skrive inn (de fleste vil vel lime inn) en bildelink fra nettet. Bildet som er valgt forhåndsvises og det dukker også opp en link fjern som fjerner bildet hvis det ikke skulle brukes likevel. Velg avbryt for å forkaste endringer og gå tilbake eller lagre for å gjøre en UPDATE sql-spørring til databasen og man returnerer til en oppdatert organisajonsside der eventuelle endringer vises. 22

27 Aktiviteter Her er mer informasjon om donasjonene og følgerene. Ved sidelasting fylles en dropdown med alle prosjektene. Default verdi er Alle prosjekter. Ved å velge en av disse prosjektene kommer det opp hvor mange donasjoner som er kommet på prosjektet og hvor mange følgere. Disse kan trykkes på og det hentes ytterligere informasjon donasjonene / følgerene som legges i en tabell. Denne tabellen kan sorteres på alle kolonner; ID, navn/tittel,sum og når. For å få til dette har vi brukt jquery biblioteket tablesorter som har metoder for å sortere alfabetisk eller alfanumerisk som default, men man kan også lage egendefinerte søkekriterier. Dette måtte vi gjøre da vi hadde kolonner som inneholdt både tall og bokstaver som for eksempel sum : 20 kr. Denne kolonnen blir per standard sortert alfanumerisk pga det er bokstaver med. Da [10 kr, 20 kr, 100kr] blitt sortert som [10kr, 100kr, 20kr] pga 2 kommer etter 1-tall alltid kommer før 2-tall. Derfor måtte vi legge inn selve summen som et datafelt i <td>-en og sortere på datafeltet i stedet for innholdet i kolonnen. Det samme måtte vi gjøre for å sortere på den formatterte datovisningen som sier hvor lenge det er siden feks en donasjon ble gjort i stedet for datoen (som er sorterbar da den er i form YYYY MM DD). Vi la inn datoen som millisekunder i et dato-felt i <td>-tagen og ba tablesorter sortere på dette istedet for kolonnen som inneholdt feks 7 dager siden, '3 timer siden, 9 minutter siden, disse verdiene hadde blitt sortert på tallet i starten, noe som ofte hadde blitt feil. $.tablesorter.addparser({ id: 'kronersort', is: function (s) { return false; }, format: function (s, table, cell, cellindex) { // get data attributes from $(cell).attr('data-something'); // check specific column using cellindex return $(cell).attr('data-kroner'); }, // set type, either numeric or text type: 'numeric' });... $("#detailstable").tablesorter({ headers: { 2:{ sorter:'kronersort' }, 3: { sorter: 'timesort' } } }); Kolonne 2 sorterer på kronersort som hentes fra data-kroner i <td>-taggen Statistikk Per 24/5 er dette ikke ennå implementert så kan ikke si hvordan vi gjorde dette. Vi ser for oss at vi tar i bruk et bibliotek som har med diagrammer der vi henter ut den informasjonen vi vil vise frem, feks et diagram over dag til dag donasjoner. Vi vil også ha ren tekstlig statistikk som gjennomsnittlig donasjoner og nyheter per dag og lignende. Dette henter vi ved skreddersydde SQL-spørringer gjennom ajax og PHP. Statistikk skal vises kunne vises som per prosjekt eller som hel organisajon. Innstillinger Det er per nå kun en logg ut-knapp som sletter all data fra localstorage og tar deg tilbake til logginnskjermen. 23

28 CRM(frontend) Index Den første siden man kommer til om man går til nettsiden til Sharity er denne: Dette er en kombinert innlogging- og registrerings-side, og vi har flere forskjellige knapper her. Noen av disse knappene er plassert i menyen øverst: - Sharity som sender deg til toppen av siden. - Logg inn som automatisk scroller deg til innloggingsdelen av siden. - Ny organisasjon som automatisk scroller deg til registreringsdelen av siden. Det er selvsagt også mulig å scrolle nedover til de forskjellige delene manuelt. Videre ligger det en beskrivelse av innholdet på nettsiden midt på siden. Inne i denne tekstboksen har vi igjen noen knapper: - Logg inn som har samme funksjon som «Logg inn» i menyen. - Ny organisasjon som har samme funksjon som «Ny organisasjon» i menyen. Logg inn Logg inn-delen består av en h-tag til overskrift, 2 inputfelter og 2 knapper. 24

29 Inputfeltene skal motta innloggingsinformasjon og når man trykker på Logg inn-knappen under, så sjekkes det om det stemmer overens med innloggingskriteriene i databasen. Den andre knappen som ligger under inputfeltene, Ny organisasjon, scroller deg automatisk ned til registreringsdelen av siden. Registrering Denne delen består av en h-tag som overskrift, 4 inputfelter med tilhørende labels, og en Fullførknapp. Her vil en organisasjon ha mulighet til å registrere seg til Sharity ved å fylle inn feltene. Dersom registreringen lyktes vil du automatisk sendes oppover til Logg inn-delen av siden og du kan logge inn som organisasjon. I fremtiden vil registrering av organisasjon måtte sjekkes opp mot rødlistede organisasjoner, som vil si at organisasjoner som er merket som «svindel» ikke kan registrere seg. Dette var ikke et ønske fra oppdragsgiver på dette tidspunktet, så det har derfor ikke blitt gjort her. 25

30 Registrering del 2 Når du akkurat har registrert din organisasjon og logger deg inn for første gang vil det dukke opp en side som spør etter enda mer informasjon om din organisasjon. Dette er en side som kun vil dukke opp etter innlogging, og kun om du ikke har fylt inn samtlige felter. Kun de feltene som ikke tidligere har blitt fylt inn vil komme opp på denne siden. Vi har gjort det slik fordi det skal være mulig å starte registrering av organisasjon i mobilapplikasjonen, og kunne fortsette på nettsiden etterpå. Siden vil i hovedsak bestå av inputfelter med tilhørende labels, i tillegg til placeholders som viser hvilket format vi ønsker at informasjonen skal skrives på. Det er også et placeholderbilde som vil ligge her. Brukeren må trykke på dette for å legge inn et bakgrunnsbilde eller en logo til sin organisasjon. Bildene blir ikke helt på samme format som det ser ut som på placeholderbildet, og dette er noe som kanskje burde forbedres i fremtiden for intuiteten og enkelhetens skyld. Vi anbefaler selvsagt å fylle inn samtlige felter slik at deres organisasjon sin side blir mer attraktiv for brukerne av appen. Det finnes også en Hopp over-knapp øverst i høyre hjørne. Vi har «gjemt» denne knappen litt, siden vi ønsker at organisasjoner skal fylle inn all informasjon. Om du trykker på denne knappen blir du sendt til organisasjonens Hjem-side uten å måtte fylle inn ytterligere informasjon. 26

31 Hjem Denne siden inneholder flere ting: - En oversikt over organisasjonens informasjon til venstre. - Inne i denne er det blitt laget en hyperlink av nettsiden som organisasjonen registrerte tidligere. - Det er også en Endre organisasjon-knapp nederst i høyre hjørnet inne i denne boksen. - En oversikt over brukerne i appens sin nylige aktivitet øverst til høyre. - En grafisk oversikt over donasjoner til organisasjonen i inneværende måned nederst til høyre. Meny (se bildet over) Menyen består av 7 knapper: - Sharity, som vil sende deg fra den siden du er på, til Hjem-siden. - Hjem, har samme funksjon som Sharity-knappen. - Prosjekt, som har to underkategorier: - Registrer prosjekt, som gir deg muligheten til å registrere et nytt prosjekt til organisasjonen. - Vis alle prosjekter, som lister opp alle prosjektene til organisasjonen - Nyhet, som har to underkategorier: - Registrer nyhet, som gir deg muligheten til å registrere en ny nyhet til et prosjekt. - Vis alle nyheter, som lister opp alle nyhetene til organisasjonen. - Statistikk, som har to underkategorier: - Enkel, hvor du kan se statistikk for en enkelt dag, måned eller år. - Sammenligning, hvor du kan sammenligne 2 dager, 2 måneder, eller 2 år. - Innstillinger, som har to underkategorier: - Velg tema, som gir deg muligheten til å endre fargepaletten til nettsiden. - Endre organisasjon, hvor du kan endre din organisasjon sin informasjon. - Logg ut, som logger deg trygt ut av nettsiden. 27

32 Menyen er laget med Bootstrap i likhet med resten av siden og dette vil forklares grundigere under overskriften «Responsivitet». Men grunnen til at vi nevner det her er at menyen og siden vil se annerledes ut ved mindre oppløsninger eller skjermstørrelser. (Se bildet til høyre.) Ved mindre oppløsning vil menyen krympe ned til 2 knapper: - Sharity, med samme funksjon som før. - En Åpne meny-knapp, som er ganske selvbeskrivende. Denne åpner altså menyen hvor de andre knappene ligger. Registrer prosjekt Denne siden inneholder en h-tag som overskrift, et placeholder-bilde som kan klikkes på for å laste opp et bakgrunnsbilde, inputfelter med tilhørende labels og 2 knapper. - Registrer prosjekt, vil lagre prosjektet i databasen om informasjonen er korrekt fylt ut. - Avbryt, vil sende deg til Hjem-siden og vil ikke lagre prosjektet i databasen. 28

33 Vis alle prosjekter Her finner du et søkefelt øverst på siden, hvordan dette fungerer vil stå nærmere forklart under backend-delen til CRMet lenger nede i dokumentet. I hovedsak vil søkefeltet dynamisk ta bort de prosjektene som ikke matcher det som er skrevet i inputfeltet etter hvert tastetrykk. Du finner også 0 til så mange prosjekter som er registrert, arrangert i div-tagger i rader på 4 og 4. Så om det er registrert 1 prosjekt vil det vises 1 prosjekt når du går inn på siden, og om du har registrert 8 prosjekter, vil 8 vises. På dette bildet er det ikke gjort noe søk og derfor vises samtlige 4 prosjekter. På dette bildet har det blitt autogenerert inn testprosjekter, og vi har søkt på «test». Da vises bare prosjekter med «test» i tittelen seg. Det kan også nevnes at prosjektene ligger i kronologisk rekkefølge i forhold til når de ble registrert. Derfor vil det prosjektet som ble registrert først ligger øverst til venstre, og de som har blitt registrert senere vil ligger til høyre for dette. Egentlig er det nok mest praktisk å ha de i omvendt rekkefølge av dette, slik at de nyeste prosjektene ligger øverst, siden disse sannsynligvis er mer aktuelle for organisasjonen. Dette er derfor noe som burde endres på i fremtiden. 29

34 Registrer nyhet Siden inneholder egentlig akkurat det samme som «Registrer prosjekt», med unntak av at det er færre inputfelter og det er lagt til en dropdown-meny. Dropdown-menyen er til for å velge hvilket prosjekt nyheten skal linkes med i databasen, og dermed bli vist i samsvar med dette prosjektet i mobilappen. Nederst på siden ligger det her også to knapper: - Registrer nyhet, som lagrer den innskrevne informasjonen i databasen - Avbryt, som sender deg tilbake til Hjem-siden. Vis alle nyheter Består av de samme elementene som «Vis alle prosjekter» som beskrevet tidligere 30

35 Enkel (statistikk) Denne statistikk-siden inneholder bare en dropdownmeny og 2 tomme div-bokser før du gjør noe mer. I dropdown-menyen kan du velge et sorteringskriterie, da vil det dukke opp et inputfelt. Det er gjort slik at brukeren skal forstå at dette er neste steg i prosessen. Om du trykker på inputfeltet vil du få valget mellom dager/måneder/år, alt ettersom hva du valgte i dropdown-menyen. Når dette kriteriet er valgt, vil det komme frem 3 knapper: - Kronert donert, viser grafisk hvor mange kroner som er donert over valgt sorteringskriterie. - Antall donasjoner, viser grafisk hvor mange donasjoner som er mottat over valgt sorteringskriterie. - Følgere, viser grafisk hvor mange følgere din organisasjon basert på valgt sorteringskriterie. I boksen til høyre for den grafiske fremvisningen vil det også komme frem en tekstlig statistikk over det valgte sorteringskriteriet. Sammenligning(statistikk) Denne siden følger mye de samme prinsippene som «Enkel»-siden. 31

36 I starten vil det bare være en dropdown-meny, men denne gangen 6 tomme div-bokser. Div-boksene har alle en overskrift hver som senere vil gi mer betydning. Dropdown-menyen inneholder samme sorteringskriterier som «Enkel»-siden, men om du velger et kriterie vil det denne gangen komme til syne to inputfelter. Du må da velge en dag/måned/år i hver av disse avhengig av hvilket kriterie du valgte. Helst forskjellige dager/måneder/år for å få noe nytte av denne siden. Da det komme frem et pie-chart i hver av de 6 forskjellige div-boksene. Om du scroller videre ned på siden vil du også få en tekstlig statistikk over begge de valgte dagene/månedene/årene. 32

37 Velg tema(innstillinger) Velg tema-siden inneholder en h-tag overskrift i en div-boks øverst på skjermen. Under denne div-boksen ligger det to div-bokser som deler plassen likt. Disse div-boksene inneholder eksempler på overskrifter, labels, p-tag skrift, et inputfelt og en a-tag. De to boksene har forskjellige farger slik at brukeren skal kunne få en slags forsmak på hvordan denne stilen ser ut. For å bytte stil trykker du enkelt og greit på a-tagen, altså den «linken» som sier Velg denne stilen! 33

38 Endre organisasjon Denne er egentlig veldig lik «Registrering del 2», da siden handler i stor grad om det samme. Siden har en h-tag som overskrift, med en del inputfelter med tilhørende labels, et tekstfelt med tilhørende label, 2 placeholder-bilder, og en Oppdater informasjon-knapp. I alle inputfeltene vil det allerede være fylt ut den informasjonen som ligger i database fra før, og du kan gjøre endringer på de feltene du vil. Hvis du deretter trykker på Oppdater informasjon-knappen vil den gamle informasjonen slettes, og den nye lagres. 34

39 Fargepalett Fargene på nettsiden er valgt slik at det skal være lett å lese og se innholdet på siden, derfor har vi store kontraster mellom bakgrunn og skrift. Samtidig har vi prøvd å få til at de ikke skal virke forstyrrende for brukeren over lengre tid. Videre har vi som tidligere nevnt gitt brukeren mulighet til å bytte «themes» om de måtte ønske det eller hvis de ikke liker fargepaletten i standard versjonen. Foreløpig er det bare 2 forskjellige valg: Standard fargepalett, den paletten nettsiden orginalt er laget i. Den alternative fargepaletten. For å beskrive hvilke bruksområdet disse fargene har fra venstre til høyre: - Farge 1: Brukes på knapper som fører til knytning mot databasen hvis de trykkes på. - Farge 2: Brukes som bakgrunn i menyen - Farge 3: Brukes som bakgrunn i div-bokser. - Farge 4: Brukes som farge til body og html - Farge 5: Brukes som skriftfarge over hele siden. Responsivitet Vi har brukt Bootstrap-rammeverket til å skape responsivitet i sidene, dvs at sidene skal passe uavhengig av skjermstørrelse og oppløsning. Bootstrap flytter rundt på div-bokser og flere andre tagger som gjør at siden vil se litt annerledes ut om du f.eks. minsker skjermstørrelsen. Et eksempel på hva dette skjer kan være på «Vis alle prosjekter» siden. Hvis du gjør om størrelsen i nettleseren din til det minste du klarer i bredde, vil hver enkelt div-boks legges i rader på 1 og 1, i motsetning til 4 og 4. Samtidig vil også menyen bli gjort om, som nevnt under «Meny»-overskriften. 35

40 CRM(backend) Registrering Om noen av feltene under registreringen ikke validerer vil rammen rundt inputfeltene bli rød. Hver gang brukeren trykker på en tast sjekkes det om input som er fylllt inn i <input>-taggen fyller kravene for input som er satt, for eksempel kan prosjektnavn kun inneholder bokstaver fra a-å og tall fra 0-9 samt mellomrom. Dette valideres slik: Når brukeren forlater <input>-taggen valideres innholdet, dersom det er fylt inn gyldig input vil teksten bli grønn, men dersom det er fylt inn ugyldig informasjon blir teksten rød. Dette er gjort slik: Godkjent registrering Samme dataflyt som i app, beskrevet i teknisk spesifikasjon side 45 Sender JSON-object med navn, organisasjonsnr, og passord til php. I php blir JSON-objektet dekodet og verdiene hentet ut. passordet blir hashet før det blir lagt i databasen. 36

41 Hashing av passord Passordet lagret i databasen blir aldri dekryptert når det skjekkes mot passordet brukeren taster inn. Det er altså en one-way hashfunksjon. Bruker en random salt på 22 tegn. Krypterer passordet sammen med blowfish algoritmen som går 7 runder og den tilfeldige salt. Dette gjør at det ikke er mulig å lage en liste med millioner av hashede passord og sammenligne hashene for å finne det orginale passordet, slik som er mulig med MD5, SHA-1, etc. (Rainbow table) MD5 er også mulig å brute force(prøve ut alle mulige kombinasjoner). Det som gjør det enda "enklere" er at forskjellige passord kan ha samme hash. Å hashe passordet sammen med en fast salt, er heller ikke bra nok siden noen med tilgang til koden kan finne salt og generere en ny rainbow table. Med at vi kobler sammen passordet, en tilfeldig salt og blowfish algoritmen som går flere runder gjør at passordet er umulig å knekke ved hjelp av rainbow table og brute force blir tilnærmet umulig å gjennomføre grunnet at blowfish algoritmen går flere runder som senker hastigheten uten at det går utover brukeren av systemet. En normal bruker av systemet vil ikke tenke over den lille forsinkelsen, men de med uærlige hensikter vil absolutt ikke like det. Når innleggelsen er godkjent slettes innputene for registrering og du blir sendt til innlogging hvor organisajonsnr allerede er fylt inn og det er bare å taste inn passordet. Dette er gjordet ved hjelp av JavaScript. ($('input[name=organizationnr]').val(organizationnr); $('input[name=password]').focus();) Registrere nyhet Informasjon som er fyllt inn i inputfeletene hentes ut ved bruk av jquery. Informasjonen sendes til PHP hvor det legges inn i databasen. Registrere prosjekt Samme som nyhet. Søke i nyheter $(«#search_bar»).on( change, function(){}); trigges hver gang informasjon i søkefeltet endres. det neste som skjer er at jquery henter ut teksten fra søkefeltet, sender spørring, for det som er fylt inn i søkefeltet, inn til databasen via php og får respons fra php. Resultatet dekodes og skrives ut til lister. Det som skjer da er at listen som returneres fra php, som matcher søket, blir lagt inn i en liste, hvor html koden er generert dynamisk, blir lagt til i en <div id=«liste»></div> tagg. Dette skjer ved: 1. Resultatet ittereres over ved bruk av en for-løkke og det produseres en listse med resultatene fra databasespørringen. 2. listen som produseres blir lagt til i <div> taggen ved: $( #liste ).html(generert liste); Innholdet i lista vil alltid endre seg etterhvert som input i <input> taggen endrer seg. Søke i prosjekter Samme som søke i nyhet. 37

42 Endre infomrasjon for organisasjon Informasjon fra input-feltene hentes ut av jquery og sendes til php, php kommuniserer med databasen og det utføres en UPDATE spørring med de feltene som er fyllt ut for endring. Endre prosjekt Hvert prosjekt har et unikt prosjektnummer, dette prosjektnummeret er også id for div-taggen som brukes til å vise frem prosjektet i front end. Når brukeren så klikker på endre så hentes id for divtaggen (= samme som prosjektnummeret). Denne id en sendes til server-backenden som er laget i php. I serverbackenden blir prosjektnummeret lagret som en session varibel. dette gjøres fordi vi bruker samme session variabel når vi skal hente ut informasjon fra databasen. Det vil si at dersom brukeren trykket på endre prosjekt for prosjektnummer 5. Så vil $_SESSION[ change_project_number ] = 5. Når så informasjonen som skal endres er fylt inn, settes dette inn i databasen: UPDATE WHERE projectid = $_SESSION[ change_project_number ]. Endre nyhet Her gjelder de samme prinsippene som ved endre prosjekt. Statistikk Nøkkelord: Chart.js, Bootstrap Datepicker, Ajax, JSON Brukeren kan velge mellom å se statistikk, for dag, måned eller år, hvor brukeren da får statistikk for antall følgere, antall donasjoner, antall kroner donert, gjennomsnittsdonasjon, nyheter publisert og antall prosjekter. For måned og år vises statistikk for antall følgere, antall donasjoner og kroner donert. Tallene vises som en graf med henholdsvis antall/sum for hver dag/måned. Brukeren kan sammenligne dager, måneder og år, da skreves det ut som piechart som representerer forholdet mellom valgte datoer med tall ved siden av, om ønskelig så finnes det også tekstlig statistikk i bunnen av siden skrevet i plain tekst. Til valg av dato har vi valgt å bruke Bootstrap-datepicker 8. Dette fordi den har den funksjonalliteten som vi trenger og den bygger på samme grensesnittet som vi bruker på resten av webløsningen. Vi kan endre slik at når det er f.eks år som det skal vises statistikk av så kan du bare velge årstall. 38

43 Bruker år som tilfeldig eksempel det samme blir gjennomført om det gjelder dag eller måned. Når vi velger et år si Blir datepicker popupen lukket. Statistikken blir hentet av funksjonen year(), som henter henter statistikken som skal skrives ut fra php ved hjelp XMLHttpRequest, og skriver den ut i span som heter "out". I phpfilen /orgstat/year.php gjøres det flere sqlspørringer til databasen som forløpende sender det som skal skrives ut tilbake ved hjelp "echo". Når dette er gjort skjules eventuelt den grafen som vises og knapper for visning av graf kommer til syne. Hvis vi trykker på en de knappene blir funksjonen f.eks showlinechartincomeyear() kallet på. Da blir datoen fra datepickeren hentet ut og det opprettes variabler for lagring av verdiene som kommer. Verdiene henter vi med et ajax-kall til php med årstallet som parameter. I php sendes det en spørring til databasen for å hente ut donasjoner fra det valget året før det opprettes et json_response object av typen array som skal sendes tilbake til ajax-kallet. I en while-løkke legges verdiene som skal sendes tilbake inn i arrayen ved hjelp av kallet array_push(). Når det ikke er flere rekker igjen fra sqlspørringen blir det arrayen skrevet tilbake til javascript. I ajax-kallet går vi nå inn i en for-løkke hvert object arrayet som vi fikk fra php, vi oppreter variabler for år, måneder og dager, som vi spliter datoen på, og bruker switch-case på måned for finne ut hvilken måned objectet i arrayen hører til, og sumen i det den måneden det er legges plussen på i den tidligere opprettede varabelen for gitt måned. Når det ikke er flere oppjekter i arrayen alle variablene lagt til i datasetet til linjediagramet og det blir oppdatert. Linjediagramet blir opprettet øverst i javascriptfilen, først ved at canvaset det skal vises i legges til en variabel, deretter ved at det opprettes en variabel for diagramet hvor varabelen til canvaset blir lagt til sammen med hvilket type diagram vi skal vise, linechartdata som angir labels og datasetet til grafen, og diverse innstillinger til grafen som vi ønsker. Når det er gjort vises linjediagrammet. 39

44 Diskusjon Her diskuteres det i hvilken grad systemet løser oppdragsgivers problem, hvordan løsningen står imot konkurrerende løsninger, prosjektets kvalitet, i tillegg til tilbakemelding fra brukere og oppdragsgiver. Hvordan løser oppgaven oppdragsgivers problem? Oppdragsgiver ønsket å utvikle en plattform hvor mennesker kan donere penger til veldedige organisasjoner som de ønsker å støtte. Dette har vi i stor grad klart å gjennomføre ved å lage en mobil applikasjon hvor brukeren kan registrere seg, navigere mellom de registrerte organisasjonene, lese om organisasjonene og donere penger. Sammenligning med konkurrerende løsninger: Vi valgte også å gi organisasjonene muligheten til publisere prosjekter og nyheter. Dersom brukeren ønsker å abonnere på et prosjekt, vil brukeren få varsler når organisasjonen publiserer nyheter for prosjektet. Dette vil til en viss grad kunne erstatte det gamle systemet hvor veldedige organisasjoner sender SMS og nyhetsbrev pr. epost for å samle inn penger i perioder hvor det er store behov for økonomisk bistand. Utover dette ser vi ingen tydelige konkurrerende løsninger, dette blir heller et ekstra hjelpemiddel for organisasjonene slik at de lettere kan samle inn bistand. Prosjektets kvalitet Prosjektet har noen gode og noen dårlige sider, men i alt er det egentlig preget av for dårlig planlegging. Hele prosjektet har de basisfunksjonene som ble ønsket av oppdragsgiver, og det er vel og bra. Men vi ønsket å få det til å bli enda bedre enn det er nå. Betalingsløsningen ble litt sånn halvveis siden vi utsatte den litt for lenge, i tillegg ville ikke oppdragsgiver gå med på å betale for å inkludere Nets 9 i denne omgang. Derfor har vi bare en betalingsløsning som funker for Android. Videre kom vi ikke så langt at vi rakk å implementere push-notifications. Vi testet dette utenom prosjektet og fikk det til å fungere der, men fikk problemer når vi skulle implementere dette i prosjektet. Noe vi er fornøyd med er at det er mulig å dele på Facebook, som er en viktig del av mobilapplikasjonen. Dette skal tross alt være en pådriver for at brukerne skal gi mer, og ikke minst gi appen publisitet. Alt i alt vil vi vel vurdere prosjektet vårt til omtrent gjennomsnittlig/gjennomsnittlig+, og sitter igjen med en bitter ettersmak om at ved bedre planlegging ville dette gått enda bedre. Brukeres tilbakemelding Brukerne som har testet mobilapplikasjonen sier at den er lett å finne frem i og de skjønner fort hva som er meningen med applikasjonen. De sier også at dette er en veldig god idé for en app, men at utseende kanskje blir litt blast/kjedelig i lengden. Videre synes de at det er veldig gøy at de kan utfordre sine venner til å donere når de har gjort det selv. Med tanke på CRMet har vi fått tilbakemeldinger på at det ser greit ut, ikke noe ekstraordinært, og et par sider virker litt uferdige (noe som er fasit også). Det er enkelt og oversiktlig å finne frem på siden. Noen har slitt litt med statistikk-delen, men de har funnet ut av det etter hvert. Ellers en fin side sier de. Oppdragsgivers tilbakemelding Helt i oppstarten til prosjektet ble vi fulgt godt opp og kom godt i gang. Like etter dette har vi fått lite oppfølging og tilbakemeldinger, så vi har måttet ta mye av ansvaret for avgjørelser selv. Likevel har de få tilbakemeldingene vi har fått vært positive og vi føler selv vi har utfylt oppdragsgivers krav for systemet. 40

45 Konklusjon Evaluering av resultater og funn Ting vi synes er bra: - Løsningen vi har kommet opp med er både intuitiv og brukervennlig. Det er enkelt å komme seg fra ett sted til et annet i både app og CRM. Uansett hvor i app/crm du er så kan du i løpet av få klikk komme deg til den siden du ønsker. - Enkle fargevalg, blått og hvitt som gir lite forstyrrelse for brukeren, og det skaper ikke problemer for de som er fargeblinde. - Tilgjengelig for brukeren. App- og smarttelefonmarkedet har blitt veldig stort med årene og dette gjør løsningen veldig tilgjengelig for folket. Ting som er mindre bra: - Alle funksjoner i mobilapplikasjonen er ikke kompatibel på alle operativsystemer. Betalingsløsningen for donasjon er bl.a. kun tilgjengelig på Android, noe som gjør appen ubrukelig på andre plattformer til annet enn å spre informasjon ut til brukerne om organisasjonene og prosjektene. - Applikasjonen og CRMet er kun tilgjengelig på norsk. Selvom den er tiltenkt det norske markedet er det en minoritet som jobber og bor i Norge som ikke forstår det. Dette er noe som gjør applikasjonen og CRMet utilgjengelig for disse. Hva kunne vært gjort annerledes: - I stedet for at donasjoner er koblet opp mot PayPal, kunne vi brukt Nets(Tidligere Bankenes BetalingsSentral., Siden dette er en betalingsløsning folket er kjent med gjennom f.eks. betaling med kort i butikk og netthandel. Dette ble gått bortfra grunnet kostnader dette ville medføre, som oppdragsgiver ikke var villig til å betale på dette tidspunktet. - Hvis planleggingen hadde vært bedre, kunne vi på et tidligere stadium i utviklingsprosessen funnet ut hva som trengs av funksjonalitet, tabeller/felter i databasen. Vi hadde da sluppet å gjøre samme oppgave flere ganger for at det skal funke ved implementering. - Vi kunne utviklet mobilapplikasjonen til kun en plattform slik at den kunne blitt perfekt, istedet for å prøve og få den kompatibel til alle plattformer. Dette hadde medført at alle funksjoner hadde vært bygget for den plattformen, og derfor skapt optimal ytelse. Hva ble oppnådd? Vi føler at vi har oppnådd et system som gjør alt oppdragsgiver ønsket seg og at dette produktet en dag i fremtiden kan bli en kjent applikasjon på det norske app-markedet. Selvsagt med litt videreutvikling på bl.a. design og noen tilleggsfunksjoner, samt også litt finpussing på eksisterende funksjoner. Hvor nyttig er produktet for arbeidsgiver? Vi tror at dette er en veldig god start for Simplenæss med tanke på at de vil ta det med til Innovasjon Norge for å videreutvikle systemet. Med dette systemet vil de kunne vise frem samtlige av funksjonene de har ønsket seg i applikasjonen og forklare dem hvordan de vil gjøre dette enda bedre med støtte fra Innovasjon Norge. Derfor vil vi si at arbeidsgiver i stor grad har nytte av produktet. Hva kunne vært gjort annerledes? Vi kunne gjort planleggingsprosessen mye grundigere for å få et enda bedre sluttprodukt. Litt for dårlig planlegging i starten har gjort til at det er oppstått noen problemer med f.eks. planlegging av sprinter og hvor lang tid disse sprintene skal ta. Dette har forplantet seg utover i prosjektet og produktet har ikke blitt så bra som vi ønsket at det skulle bli. Vi føler at planleggingen er hovedårsaken til at vi ikke har fått tid til å finpusse ting mer og dette har også gått ut over tiden vi har hatt til testing. Vi kunne også blitt enige om kommunikasjonsplattformer og fildelingsplattformer oss i mellom litt tidligere, slik at vi slapp å bruke tid på å sy sammen filer og dokumenter i starten. På det mer tekniske planet kunne vi lagdelt alt mye bedre. Vi kunne brukt MVC-modellen for å få 41

46 bedre filstruktur. Push-notifications kunne og burde også vært implementert, men tiden strakk dessverre ikke til for oss på dette punktet. Informasjon som blir lagret kunne vært enda sikrere lagret i databasene enn de er nå i dag. Prosjektet kunne vært objektorientert og vi kunne tatt i bruk metoder i PHP for å effektivisere arbeidet. Sistnevnte ser vi nytten av etter å ha laget mange av disse metodene selv siden vi ikke hadde bedre kunnskap til å begynne med. Egenevaluering Det har blitt litt «kaotisk» når vi har funnet nye oppgaver eller funksjoner som må gjøres, og vi har skjønt at med bedre planlegging og samarbeid ville vi kunne unngått dette. Så selvsagt vil dette være en viktig ting vi tar med oss videre! Vi har også fått en bekreftelse på at folk er veldig forskjellige i måten de liker å arbeide på; - noen liker å jobbe på samme sted - andre liker å jobbe individuelt og isolert - imens noen liker å jobbe individuelt, men på samme sted slik at man lett kan spørre og få svar fra andre i gruppen. Objektivt sett vil vi påstå at sistnevnte alternativ er det beste for prosjektets fremdrift og deltakernes oversikt over progresjonen. Gruppen vår har hatt en slags hybrid av dette hvor noen av oss får gjort mest når vi sitter alene uten folk rundt oss, imens andre lettere får gjort det de skal om de har gruppemedlemmene rundt seg. Dette har fungert helt ok, men igjen så tror vi dette kunne fungert bortimot perfekt med enda bedre planlegging. Det vi alle kan være helt enige om er at vi har lært MYE under denne arbeidsprosessen! Ikke bare som tidligere nevnt, hvordan arbeide i gruppe og planlegging, men også tekniske ting med tanke på oppgaven. Vi har alle måttet sette oss inn et nytt språk, Javascript, som ingen tidligere hadde noe erfaring med. JSon, Ajax, og JQuery har også vært en del av dette, og det har til tider vært frustrerende å ikke forstå alt. Noen har også måttet sette seg inn i Bootstrap, som kanskje ikke er det mest krevende å gjøre. Men det er så utrolig mange muligheter, og det gjelder for oss å finne de beste løsningene her også. De fleste av oss har vært borte i HTML og CSS før, men vi er langt i fra eksperter på området og har alle fortsatt mye å lære på denne fronten. Bl.a. har ingen av oss designet så mange nettsider tidligere, i alle fall ikke på noe annen måte enn at det skal fungere og se ok ut. Derfor har vi hatt en del forskjellige utseender på nettsidene og appen, men alt i alt så er vi sånn passe fornøyd. Noen sider er vi godt fornøyde med og andre ikke så fornøyde med. For å trekke frem noen sider vi er godt fornøyde med så har vi «vis alle prosjekter» og «vis alle nyheter» sidene på CRM-et, og organisasjonssiden i mobilappen. 42

47 Vis alle prosjekter-siden fra CRM-et Org-siden i app Av de vi ikke er like fornøyde med har vi «slett prosjekt» og «slett nyhet» på CRM. Disse fant vi rett og slett ikke noe layout vi ble fornøyde med, så de ser vi stort forbedringspotensiale i. Til slutt syns vi at selve mobilapplikasjonen ser litt kjedelig ut, likevel er den veldig enkel i utseende og skaper lite forstyrrelser for hovedinnholdet. Som en totalvurdering på oss selv vil vi si at vi har gjort en god oppgave som vi er brukbart fornøyd med, men at den fortsatt har en del forbedringspotensiale. Og med litt bedre planlegging og struktur kunne den blitt enda bedre. Videre arbeid: Foreløpig er det ikke inngått noen avtaler om å fortsette arbeidet etter studieslutt, men oppdragsgiver har vært åpen for at det kanskje er mulighet for det om skulle bli noe i nærheten av hva de ønsket seg. Dette ville eventuelt ikke gjelde alle på gruppen, men kanskje 1-2 mann har de nevnt. 43

48 Referanser Her oppgis alle kilder og all litteratur som er benyttet. Styleswitcher ( ) Hele temabyttescriptet er hentet herfra, og vi vil derfor ikke ta noe ære for dette. For hashing av passord ( ) Nets ( ) Generelt mye brukt til læring - Brukt til å finne attributter og liknende til forskjellige HTML-tags. - Brukt til å få et visuelt virkemiddel for læring underveis i prosessen. Brukt til å finne liknende problemer som vi har hatt for å finne en løsning som kan hjelpe oss. 44

49 Teknisk spesifikasjon Programmets oppbygning og funksjonalitet Produktet er hovedsakelig bygget på HTML5 og CSS3 som front-end, og hovedsakelig Javascript og PHP5 som back-end. På grunn av at løsningen er delt i to deler; mobilapplikasjon og webapplikasjon, har de to produktene litt ulik oppbygning. Mobilapplikasjon: Denne er bygget opp i et rammeverk som heter Cordova/Phonegap. Dette rammeverket gjør at vi som utviklere kan lage en app som er programmert i HTML5, CSS3 og Javascript, for så å bygge den om til en native Android/iOS/Windows phone/blackberry-app. Her brukes kun Javascript som backend på enheten, men kommuniserer med serverbackend laget av PHP. Dette var vi nødt til å gjøre da Javascript ikke kan kommunisere direkte med MySQL. PHP blir her et bindeledd mellom jquery og MySQL. Webapplikasjon: Denne er bygget opp ved noen av samme prinsipper som mobilapplikasjonen, men bruker også PHP som backend. HTML5 og CSS3 brukes til frontend, hvor Bootstrap rammeverket er med på å skape responsivitet. Backenden består i likhet med appen av en kombinasjon av Javascript og PHP. Begge løsningene kommuniserer med samme MySQL-database, så informasjonen som legges inn via webapplikasjonen blir tilgjengelig i mobilapplikasjonen og vice versa. Funksjonalitet: Mobilapplikasjonens hovedfunksjon er å informere potensielle givere om organisasjoners tiltak i forskjellige saker og hvorfor de søker bistand, i tillegg til at brukerne skal kunne donere penger til de organisasjonene de måtte ønske. Videre kan brukere følge organisasjoner og prosjekter for å få tilsendt oppdateringer, de kan se statistikk over egne donasjoner og de kan utfordre venner til å donere til samme formål som de selv har donert til. Webapplikasjonens hovedfunksjon er å opprette nye prosjekter, publisere nyheter og se statistikk over brukernes aktiviteter fordelt på dager, måneder og år. Det kan også gjøres endringer i organisasjonens informasjon, prosjekter og nyheter som er publisert. Eventuelt også slette prosjekter og nyheter om det måtte ønskes. 45

50 Teknologisk plattform Vi valgte å skrive en kryssplattform app som opptrer som en native app på enheten. Dette valgte vi fordi vi ønsket å utvikle en app som fungerer både på ios og Android, uten å måtte utvikle to separate apper. Appen er utviklet i HTML5 og CSS3 med Javascript som backend. Vi har benyttet oss av diverse javascriptrammeverk som for eksempel jquery og jquery mobile. Vi har brukt Phonegap for å utvikle og bygge en app som er kompatible med både Apple og Google sine operativsystemer. Phonegap er en versjon av rammeverket som heter cordova. Cordova er en plattform for å bygge native apper ut fra HTML, CSS og Javascript. Ved å bruke rammeverket Cordova/Phonegap er det mulig å legge til ulike plugins som er med på å forme appen, mer om dette tydeliggjøres senere i dette dokumentet. I alt har vi brukt HTML, CSS, JavaScript, PHP og MySQL. Ettersom appens backend drives av Javascript var det umulig med en direkte kobling opp mot database, Javscript kan av sikkerhetsmessige årsaker ikke kobles direkte mot MySQL database. Ettersom det heller ikke tillates å bruke PHP i Cordova/Phonegap var vi nødt til å sende databaseforespørsler til og fra database via Ajax. Siden Javscript kan kommunisere med Ajax ble det mulig å opprette en kobling til MySQL databasen. Dette gjøres ved at Javascript sender brukerinput til PHP filer som ligger på en server. Data blir sendt via Ajax. Informasjonen som mottas i PHP sendes så videre inn til SQL databasen og resultatet returneres tilbake til JavaScript fra PHP via Ajax, se illustrasjon nedenfor 46

51 Informasjonsflyt fra app til database: Når informasjon skal legges inn i databasen skjer dette ved at informasjon hentes fra HTML og sendes inn til PHP. jquery samler informasjonen og lager en SQL-spørring som sendes inn til et PHP-script. PHP behandler SQL-spørringen som mottas fra jquery via Ajax og setter dette inn i SQL databasen. Dette skjer slik: (Illustrasjonen viser hvordan data forflyttes når en bruker opprettes og lagres i databasen). Infromasjon hentes fra HTML ved bruk av jquery, i jquery opprettes det en SQL-spørring med all infromasjonen som hentes fra HTML. SQL spørringen som opprettes sendes til PHP via AJAX. PHP mottar SQL-sprørringen og setter det inn i databasen hvor det lagres. 47

52 Informasjonsflyt fra database til app: Når informasjon skal hentes fra databasen og skrives ut i appen sendes det en SQL spørring fra appen som sendes via Ajax til PHP og videre inn til MySQL databasen. resultatet fra spørringen behandles i PHP og sendes tilbake som et JSON objekt. JSON-objektet behandles i jquery på klieneten hvor det itereres over objektet og det bygges HTML som printes ut i appen og synliggjør data fra databasen for brukeren. SQL-spørring sendes fra appen til PHP SQL-spørringen sendes inn til databasen, databasen sender tilbake resultatet av spørringen og sender resultatet som et JSON-objekt. Resultatet blir slik: 48

53 Appen fylles av informasjon som opprettes av brukeren. Brukeren (Organisasjon) logger seg inn med brukernavn og passord via webapplikasjonen. I webapplikasjonen kan brukeren opprette prosjekter og nyheter. Brukere av appen (givere) kan donere penger til de ulike prosjektene. Ettersom at webapplikasjonen og appen skal kommunisere med hverandre har de samme database. Databasen blir da et bindeledd mellom de to adskilte prosjektene. Vi valgte å lage webapplikasjonen slik at organisasjoner som ønsker å registrere seg kan fylle ut informasjon i mengder som ellers ville vært ukomfortabelt å fylle inn via mobilappen, på grunn av lengden på innholdet. Webapplikasjonen følger samme prinsippene som appen, altså at informasjon hentes ut fra HTML ved bruka v Javascript/jQuery og sendes til Ajax, slik at Ajax kan sende informasjonen videre til PHP og så videre inn i SQL-databasen. Informasjonsflyt fra nettside til database - og vice versa Samme mønster som for mobilappen. Operativsystem Mobilapplikasjonen er gjort kompatibel med Android, ios, Windows Phone og Blackberry. Applikasjonen skal virke bra til alle skjermstørrelser og oppløsninger. Webapplikasjonen kjører ikke på et spesielt operativsystem, men i weblesere. Vi har brukt Bootstrap som gjør at nettsiden skal tilpasse seg forskjellige skjermstørrelser og oppløsninger, da f.eks. nettlesere på telefoner, tablets og alle pc-skjermer. Webapplikasjonen skal også fungere for nyeste versjon av Google Chrome, Opera, Safari og Internet Explorer. 49

54 Oppdeling i moduler Systemet er delt i 2 hovedmoduler; en mobilapplikasjon og en webapplikasjon. Disse er igjen delt inn i mindre moduler som består av; klientbackend, serverbackend og frontend. Hvordan disse jobber med hverandre og opp mot hverandre står beskrevet under «Teknisk spesifikasjon»-avsnittet. Kommentarbruk I PHP-filene som er knyttet til frontend til CRM er det benyttet helt enkel kommentering for å beskrive innholdet. Hver enkelt kommentarblokk avsluttes med «End of» eller «/kommentar». I CSSen er alt sortert etter om det er en knapp, input eller f.eks. en «boks» som skal ha innhold i seg. Sikkerhet Siden vi ikke har fått testet all verden kan vi ikke påstå at sikkerheten er veldig god. Vi bruker riktignok hashing av passord og en ekstern betalingsløsning, sånn sett burde systemet være relativt sikkert. Hadde vi hatt mer tid til overs hadde vi fått bedre tid til å teste sikkerheten til systemet og få utbedret problemer angående dette. Ikke-funksjonelle krav Pålitelighet: Systemet skal ikke sende noen meningsløse tilbakemeldinger som kan forvirre eller irritere brukeren, og alle klikkbare deler av siden skal ha godt beskrevne funksjoner. Robusthet: Systemet er utviklet med tanke på at det skal vare og derfor har vi benyttet oss av de seneste standardiserte programmeringsspråkene innenfor denne sjangeren. Ytelse: Applikasjonen reagerer med en gang brukeren trykker på en knapp eller lignende, slik at det ikke går utover brukeropplevelsen. Og koblinger opp mot database går så fort at brukeren ikke rekker å tenke noe over det. 50

55 Brukervennlighet: Systemet krever ikke mye opplæring siden det er såpass intuitivt. Vi kan se at brukere som er tilvendt å bruke apper vil forstå hvordan systemet virker før andre. Likevel vil det kreve minimal til ingen opplæring om brukeren er en uerfaren mobilappbruker. 51

56 Verktøy og kodestandarder Her vil det stå om hvilke verktøy og kodestandarder vi har benyttet i prosjektet. HTML 5 Hyper Text Markup Language 5 «HTML 5 er et markup language brukt til å strukturere og presentere innhold på internett. Pr. oktober 2014 er dette den nyeste offisielle standarden av HTML, lansert av W3C og WHATWG Forrige offisielle standard var HTML 4 som ble standardisert i HTML 5 sitt kjernemål er å forbedre språket med tanke på støtte for de nyeste mulitmediaer, samtidig som den skal kunne leses av mennesker og bli forstått av datamaskiner og andre enheter som nettlesere, parsere, osv. HTML 5 har også samlet andre markup languages og deres standarder, bl.a. er HTML 4, XHTML 1 og DOM Level 2 HTML en del av HTML 5.» ( Vi har tatt i bruk HTML 5 siden det er et enkelt og oversiktlig programmerings-«språk» og det er godt dokumentert på bl.a. Denne siden har vi brukt aktivt for å lære mer om bl.a. attributter og HTML 5 generelt. CSS 3 Cascading Style Sheets 3 «CSS er et språk som brukes til å definere utseende på filer skrevet i HTML. HTML skal utelukkende beskrive struktur og semantikk, mens oppsett farger og annen stilinformasjon skal beskrives ved hjelp av CSS. Et ubegrenset antall HTML-dokumenter kan peke til og styres av en og samme CSS-fil. Dette er praktisk med tanke på om man f.eks. vil endre fargebruken på siden, bakgrunnsbilder o.l. i alle dokumenter som peker til CSS-filen.» ( Vi har i stor grad tatt i bruk denne formen for CSS-bruk. Bl.a. peker alle HTML-filene i CRMet til samme CSS-fil. Dvs. vi har en main.css som bestemmer hvor på siden ting skal plasseres o.l. mens main-theme.css bestemmer fargebruken. Vi har også en alternate-theme-1.css som brukeren kan endre til om han vil. Da vil Javascriptet styleswitcher.js sette den valgte cssen som aktiv og den andre som inaktiv. Bootstrap Dette er et rammeverk som gjør det enklere for utviklere å lage responsive nettsider, dvs. at siden skalerer opp eller ned, altså endrer seg ut fra hvordan skjermstørrelsen og oppløsningen er. «Dette ble utviklet av Twitter i midten av 2010 og var da kjent som Twitter Blueprint. Et år senere ble det publisert til offentligheten og har vært veldig populært fra den gang av» ( ). Vi hadde lite forkunnskap før vi tok i bruk Bootstrap-rammeverket, så vi har ikke brukt mye av de mer avanserte delene. Vi har tatt i bruk bl.a. container, col inndeling, text-center, o.l. Container gir nettsiden en margin til høyre og venstre for innholdet og dette er veldig nyttig for at siden skal se ryddig og fin ut, samtidig som det gjør det enklere for folk som trenger å forstørre siden av forskjellige årsaker. Da vil ikke innholdet på siden endre seg noe særlig før den når et visst punkt. Col-lg-3, Col-md-4, col-xs-12, er eksempler på hvordan siden har blitt delt opp i grids. Her representerer tallet 3 at den aktuelle boksen skal ha 3/12 av siden. Står det 4 vil det si at den skal ha 4/12. Lg, md og xs er nyttig når du skalerer ned siden, lg står for large, md for medium og xs for extra small. 52

57 Disse bokstavene representerer altså skjermstørrelse og god bruk av dette, hjelper oss med å gjøre siden fin selv om den er nedskalert. Row er et annet kodeord innenfor Bootstrap, men vi har ikke tatt dette så mye i bruk siden vi ikke skjønte helt hva det betydde i begynnelsen. Vi har forstått det slik at dette er nyttig når du har flere rader med forskjellige størrelser nedover på siden. Og vi har derfor ikke sett noe nytte av å bruke dette i noe stor grad. Basecamp er en måte å styre et prosjekt på, altså en prosjektstyringsapplikasjon. Her kan man laste opp og dele filer, dele linker, skrive notater, legge inn bilder, og mer nyttig prosjektinformasjon. Det som er fint med Basecamp er at du ikke må inn på nettsiden deres for å oppdatere deg på ditt prosjekt. De har en mobilapplikasjon som du kan laste ned gratis, og bruke til å enkelt oppdatere deg på prosjektets fremdrift. ( Vi har i hovedsak brukt dette ved filoverføring fra oss til oppdragsgiver, og motsatt. I tillegg har vi brukt den til å laste opp modeller, wireframes og slikt, sånn at oppdragsgiver til en hver tid vet hva vi driver med. Slack er et kommunikasjonsverktøy laget for å brukes under et prosjekt. Denne plattformen gir deg muligheten til å starte egne undergrupper hvor f.eks. et frontend team kan diskutere, og et backendteam kan ha en egen gruppe hvor de kan diskutere aktualiteter. Slack har også en egen mobilapplikasjon som gjør det enklere å vite når noen lurer på noe og som gjør plattformen mer tilgjengelig. ( ) Vi har brukt denne plattformen kun til å kommunisere med oppdragsgiver, og til å stille dem spørsmål vi måtte lure på underveis. Dette har fungert veldig bra siden Tony og hans ansatte bruker denne plattformen hver dag på jobb, så de har vært godt tilgjengelige her. Kommunikasjon innad i bachelorgruppen har i hovedsak foregått på en felles chat på Facebook, da vi alle er aktive brukere av dette som de fleste andre. Sublime er en sofistikert tekst editor for kode, markup language o.l. Den har en rekke forskjellige funksjoner som «rydding» i kode, hvor linjer automatisk får riktig innrykk og slikt. Sublime har også god ytelse og et behagelig brukergrensesnitt. ( ) 53

58 Github er en plattform som oppmuntrer til godt samarbeid, kode gjennomgang og prosjektdeling. Dette lar oss jobbe med samme filer til samme tid uten å få store problemer med å sy filer sammen. Vi benyttet oss av et privat repository her siden oppdragsgiver ikke ønsker at idéen skal komme ut blant eventuelle konkurrenter. ( ) Phonegap støtter ikke PHP. Filer med filendelsen.php tas ikke med i appen, derfor ligger all php-kode på web-serveren. Vi har ikke programmert php-kode etter objektorientert standard. All backend som drives av php ligger i en egen mappe og filene "includes" hver gang de må brukes. HTML-kode som genereres av php ligger i egne filer som inkluderes i.php filene som ligger i pages-mappen. I stedet for objekt orientert php har vi programmert etter en kodestandard som heter "procedural php". Vi valgte å bruke procedural php fordi php var ganske nytt for oss og det var det enkleste å lære. En annen grunn til at vi brukte procedural php er at hoveddelen av oppgaven var appen, og php skulle i utgangspunktet kun spille en mindre rolle, likevel ble php en ganske stor del av prosjektet. I procedural php bruker man funksjoner i stedet for objekter. I objektorientert programmering er alt objekter og man lager objekter selv. I stedefor å kalle på query objekter, har vi etter procedural php brukt funksjonen mysqli_query funksjonen. Ettersom vi har utviklet i php5 har vi også brukt mysqli funksjoner, i stedet for de tidligere mysql funksjonene. I dette prosjektet har vi hovedsaklig brukt to JavaScript-rammeverk; jquery mobile og standard jquery. Vi valgte å følge denne kodestandarden da jquery er bedre dokumentert og derav lettere å feilsøke. Vi har i stor grad fulgt opp kodestandardene i jquery og kun brukt jquery sine metoder, i stedet for vanlig JavaScript metoder. For eksempel: ved å hente brukerinput fra en <input> tag har vi brukt: $("#id").val(); i stedet for JavaScript DOM: document.getelementbyid('textbox_id').value. dette gjorde vi fordi det rett og slett er enklere å skrive jquery. jquery mobile har vi kun benyttet oss av i mobilapplikasjonen. Dette rammeverket var nyttig for oss da jquery mobile har en rekke funksjoner som gjorde det mulig for oss å skrive appen i færrest mulig.html filer. Ved å gi de ulike <div>-taggene i html ulike data-roles gjorde ble det mulig å skrive appfrontend i få filer. En data-role forteller nettleseren/mobilen hvordan diven skal leses og plasseres. I stedet for å lage en.html-fil for hver side er det nok å opprette en <div> med data-role = "page". diver med data-role=page vil da leses som en hel side hvor all annen kode ikke vil være synlig. Inni en div med data-role="page" kan man plassere flere <div>-tagger. Header markeres med data-role="header", innholdet på siden markeres med data-role="content" og footer markeres med data-role="footer". Resultatet av at vi har fulgt denne kodestandarden så og si til punkt og prikke er at vi har klart å sammle hele appen til sp lite som tre.html filer. 54

59 I de tilfellene vi hadde behov for å kommunisere med sql-databasen brukte vi AJAX requests til å kommunisere med databasen. Dette gjorde det mulig for oss å kommunisere med databasen uten direkte bruk av.php filer i appen. I praksis er ikke AJAX en egen teknologi, men mer en sammling av teknologiene: HTML og CSS, DOM (Document Object Model) og XML. Vi har ikke brukt XML, i stedet for dette har vi brukt JSON-objekter (JavaScript Object Notation) som alternativ til XML. Ajax gjør det også mulig for oss at appen kan sende og motta infromasjon til og fra databasen uten at brukeren av appen trenger å refreshe siden. For å sende mengder av informasjon mellom app og databasen pakket vi data inn i JSON-objekter. JSON har vi brukt til å serialisere og sende data mellom app og database. Vi valgte å bruke JSON istedefor XML, da JSON er mye mer kompakt og fordi det fungerer utmerket sammen med AJAX. 55

60 Brukerveiledning Her vil du kunne lese om hvordan du skal navigere deg gjennom systemet. MOBILAPPLIKASJON: Registrering - Bruker Det første møte med appen er login-skjermen. Her kan du registrere deg som ny bruker eller logge inn dersom det allerede er gjort. Logg-inn Registrering 1/4 Ved å velge å registrere en ny bruker kan du velge mellom å registrere en vanlig bruker, eller å legge inn organisajonen din. Ved å velge en bruker kan du legge inn et bilde (valgfritt) og fylle inn noen av dine personalia som navn, telefonnr og epost. Eposten blir brukernavnet ditt for innlogging i appen. Deretter velger du et passord som må gjentas, før du klikker deg videre i registreringen. Steg 2 / 4 i registreringen er valgfritt og gjelder månedlig trekk fra betalingsløsning og inn til appen. Disse midlene er ikke til Sharity, men til din disposisjon for å donere til dine favoritt organisasjoner, eller prosjekter. Dersom du velger å hoppe over dette steget kommer du rett til oppsummeringen av registreringen, og ved å fortsette blir du sendt videre for å legge inn kredittinformasjonen din. Siste steg er oppsummeringen av 56

61 opplysningene dine og du kan fullføre ved å godkjenne brukervilkårene og klikke fullfør. Du er nå klar for innlogging i appen. Registrering 2/4 Registrering 4/4 - Oppsummering 3/4 Registrering Organisasjon Man skal også kunne starte å registrere en organisajson i appen for deretter å fylle på med mer informasjon ved bruk av CRM. For å gjøre dette klikker man på fanen 'Ny organisasjon' på første registrerings-side og fyller inn de tre sidene med organisasjonsinfo... 2/ /3 - Oppsummering Organisasjonsregistrering 1/3 I

62 Oversikt Når du logger inn kommer du til oversiktsiden der du kan søke i organisasjoner eller prosjekter eller du kan bla gjennom hele listen. Du kan få opp listen over organisasjoner (standard) eller ved å trykke på Sorter organisasjoner-feltet og på den måten bytte til prosjektlisten. Organisasjonslisten har logoen til organisasjonen, navn på organisasjon og antall prosjekter. Prosjektlisten viser prosjektlogo, prosjektnavn og tilhørende organisasjon. Du navigerer deg videre ved å trykke på valget ditt. Helt nederst på siden er det en fixed navigasjons-footer der du kan gå til forskjellige deler av appen. Denne footeren er med deg hele tiden. Du har fire hovedvalg: Meg, Oversikt, Venner og Innstillinger. Disse introduseres litt senere, men nå først har vi valgt å kikke nærmere på en organisasjon i listen, Amnesty. Oversikt Organisasjonssiden har navn, et bakgrunnsbilde og tillegg logoen på toppen. Det er en link til siste nyheter for alle prosjektene deres, og en donér-knapp der du kan gi støtte direkte til organisasjonen. Som vist på bildet står det hva slags arbeid Amnesty (her) jobber med, menneskerettigheter. Deretter kommer en beskrivelse av organisajonen. Etter dette kommer listen over prosjekter som Amnesty har lagt ut. Du kan velge å klikke deg inn for å sjekke ut prosjektet, eller donere direkte til prosjektet derifra. Under prosjektlisten kommer siste nytt fra organisasjonen. Det er hit du blir automatisk skrollet ved å trykke på nyhets-linken over. II

63 Organisasjon Prosjekt / nyhet Prosjekt Øverst er det igjen tittel og bakgrunnsbildet - til prosjektet denne gangen - og organisasjonslogo. Også her er den stor donér-knapp. Ved å trykke på denne går midlene direkte til dette prosjektet. Det er også en link Følg prosjekt der du kan velge å følge dette prosjektet, og å få en snarvei til dette fra innstillingene. Du kan velge å ikke følge lenger senere, fra samme sted. Under er det en tekst om prosjektet og deretter en liste over de siste nyhetene. Trykk på en av disse og du kommer til nyheten og listen over andre nyheter, siden er lik som prosjektsiden og bare at tekst og bilde er byttet med nyhetsinnhold. III

64 Doner Bilder i listene kan forstørres ved å trykke på dem, og ved å trykke på organisasjonslogo, går du til organisasjonssiden. Når du har valgt å donere kommer du til donasjons-siden der du velger beløp og om det skal være et engangsbeløp eller et fast månedlig trekk til prosjektet. Etter å ha trykket på Donér beløp Har du muligheten til å utfordre en eller flere på venne-listen din. Du kan også sende med en kort melding i utfordringen for å gi den et særpreg. Utfordre Når dette er gjort, vil mottakerene få opp en notifikasjon på appen sin neste gang de logger inn, om hvor mange utfordringer de har fått siden sist. Og (her) antall venneførespørsler. Notification 1 ny utfordring og 2 venneforespørsler IV

65 Venner Man kan som nevnt ha venner i denne appen. Det betyr at du kan utfordre dem i dine donasjoner og se hva de har donert til - dersom brukeren har valgt å ikke gjøre dette synlig for andre enn seg selv. Man kan få seg venner ved å bla igjennom de brukerene som allerede er registrert og sende dem en venneforespørsel dersom du finner en du kjenner. Her er det gjort et søk på ada og send en venneforespørsel til frk. Ada Ellefsen. Personsøk og venneforespørsel Her er et eksempel på en statusmelding som dukker opp når du gjør forskjellige ting på appen, for eksempel, sender eller avbryter venneforespørsler, avslutter abonnement ( følger et prosjekt) eller oppdaterer person- eller kort informasjon. Meldingen dukker opp på midten av skjermen og er der i 2 sekunder før den forsvinner. Appen kan også lete i kontaktene på telefonen og se om de er registrert i Sharity ved å gjøre et oppslag på telefonnummeret. Hvis ikke kan de inviteres ved å la appen sende en SMS med link til app-nedlasting. V

66 Telefonkontakter V enneliste Innstillinger Innstillinger På innstillingene kan du endre person-data, behandle kort, sjekke venne-forespørsler, endre innstillinger for visning av din side og donasjoner og gå til abonnementene dine, i tillegg til å logge ut. I persondata kan du endre dine info og endre passord, mens i behandle kort kan du legge til eller slette kort, avslutte eller starte faste trekk og hente mer penger fra kort nå, hvis du fant noe du vil donere til med en gang og det er tomt for midler. I Privatinnstillingene bestemmer du hvem som skal få se siden din og hvem som skal se donasjonene dine. Du kan velge at bare du selv ser dem, la vennene dine se, eller la alle få tilgang. Disse innstillingene er satt til å la venner se, dersom du ikke selv endrer dem her. VI

67 Person-innstillinger Kort-innstillinger Privat-innstillinger Ved å trykke på 'lagre' så iverksettes de nye innstillingene umiddelbart. Når du åpner en annen innstillingsfane, vil en eventuell annen åpen fane først lukke seg får den nye åpner seg, alt dette skjer animert for å unngå forvirring ved bytte av åpne faner. VII

68 Melding på vennesiden Bekreft / Avvis venneforespørsel Venneforespørsler kan godtas / avvises, og stoppes. Det kommer opp en melding med hva du valgte Eksempel på melding Abonnementer Abonnementlisten viser hvilken prosjekt du abonnerer på med bilde og tittel -, når du ble abonnement og om du vil Meg stoppe abonnementet. Dersom du trykke på tittelen eller bildet, kommer du til prosjektsiden. Meg På Meg-siden har du oversikt over hvor mye du har donert denne måneden og hvor mye du har donert totalt. Det er to 'knapper' under henholdsvis Aktiviteter og Utfordringer som går til donasjonslisten din alle du har donert til gjennom tidene og utfordringslisten som inneholder nye og gamle utfordringer du har mottatt. Utfordringsoversikten kommer du til både ved å trykke på knappen og linken øverst som kommer dersom du har mottatt en ny utfordring siden sist. VIII

69 Donasjonslisten Donasjonslisten består av bilde, tittel, sum som er donert, når donasjonen ble gjort (sist endret) og eventuelt informasjon om fast trekk er aktivt, eller om det er avsluttet. Ved å trykke på ikonet som (her) viser at donasjonen er gjentakende blir månedlig trekk avsluttet etter en dialogboks med bekrefting stoppet og ikonet bytter så det er tydelig at den ikke er aktiv. Ved å trykke på dette ikonet kan du starte måndelig trekk igjen. Inaktiv donasjon Under der kommer utfordringene du har fått nylig, samt alle dine tidligere motatte utfordringer, og hvordan du responderte på den. Når en utfordring bli besvart, flytter den seg over til listen over gamle utfordringer. Ny utfordring En ny utfordring kan klikkes på og den viser utvidet info om hvem som har fått og eventuelt kommer til å få donasjonen og beløpet. Den meldingen som sender sendte med i utfordringen vises til høyre. IX

70 Du har to valg; ta utfordringen, eller ikke. Ved å ta utfordringen kommer det opp en dialogboks som spør deg om du vil (her) donere 20kr til UNICEF og deres prosjekt 'Hjelp et barn idag'. Begge knappene sender utfordringen til 'Historie', der alle besvarte utfordringer ligger. Besvart utfordring Utfordringslister Organisasjon side Organisasjonssidene Når en organisasjon logger inn vil de komme til en side med oversikt over forskjellig informasjon tilknyttet organisasjonen og deres prosjekter. Det står hvor mange som følger, hvor mange donasjoner de har fått, hvor mye totalt som er kommet inn, og informasjon om hvor mange som følger prosjektene deres. De vil også kunne se alle nyheter som er tilknyttet prosjektene deres, publisere nye nyheter eller redigere nyheter som allerede er lagt ut. X

71 En nyhet Når man vil redigere en nyhet klikker man bare på rediger i nyhetslisten og man kommer til rediger nyhet. Der er all informasjon om nyheten satt inn allerede og man kan enkelt endre på det som må endres. Om man vil kan man også knytte det til et annet prosjekt. legger dem i feltene for redigering. Hvis man har trykket på feil nyhet, kan man også enkelt bla gjennom alle nyhetene øverst og velge den riktige nyheten å endre på. Når man bytter nyhet, henter appen all informasjon om nyheten og Nyhet til redigering En nyhet inneholder en tittel, tekst og et bilde som alle kan endres som man vil. Publiser nyhet tar deg til en nesten lik side som rediger nyhet. XI

72 Aktiviteter På aktivitetssiden vil man få ytterligere informasjon om donasjoner og følgere. Du kommer først en oversikt over hvor mange donasjoner og følgere på alle prosjekter tilsammen, men man kan også velge å se hvor mange av dem som er tilknyttet hvilket prosjekt. Ved å trykke på enten Donasjoner eller Følgere vil det komme en liste over de donasjonene som er gjort og av hvem, og man vil kunne se hvem som følger prosjektet. Aktiviteter Donasjons- og følger oversikt er ganske like med ID, navn og tidspunkt (og sum for donasjoner). Disse listene kan sorteres på alle verdier ved å trykke på tabellheaderen og da sorteres de både stigende og synkende ved flere klikk. Donasjoner oversikt Statistikk..og Innstillinger..er ikke ferdige ennå, men er tenkt å inneholde relevant statistikk over donasjoner, følgere, nyheter, prosjekter og lignende. Statistikken er implementert i CRM-delen av prosjektet. XII

73 CRM: Til å begynne med vil du få opp denne siden når du går inn på sharity webapplikasjonen: REGISTRERING/LOGG INN - Trykk på «ny organisasjon» i menyen i toppen av skjermen, eller «ny organisasjon»- knappen som du finner inne i den hvite tekstboksen midt på skjermen. Du vil da komme til denne siden: - Fyll inn organisasjonsnummer, organisasjonsnavn for din organisasjon og velg deg et passord. Trykk så på den grønn «Fullfør (1/2)» knappen. Nå vil du bli sendt til logindelen av siden: XIII

74 - Skriv inn organisasjonsnummeret og passordet du akkurat registrerte, og trykk på «Logg inn». Denne siden vil dukke opp første gang du logger inn: - Fyll inn alle feltene og trykk på bildene som sier «Trykk for å laste opp bilde» for å laste opp bakgrunnsbilde og logo til din organisasjon. - Fullfør ved å trykke på «Fullfør (2/2)». Hvis du fyller inn alle feltene vil denne siden aldri komme opp igjen, fordi du har fullført registreringen 100%. XIV

75 Hvis du ikke har fylt inn alle feltene, vil de manglende feltene dukke opp på samme side neste gang du logger inn. - Eventuelt kan du trykke på «Hopp over»-knappen øverst i høyre hjørne på skjermen, da vil du bli sendt til din organisasjons «hjem-side», men denne registrerings-siden vil dukke opp neste gang du logger inn også. HJEM Dette er siden du kommer til når du logger inn på webapplikasjonen. Her vil du se forskjellige ting: 1. Organisasjonens informasjon: - Her kan du se informasjonen som er skrevet inn om din organisasjon - Du kan trykke på «Endre organisasjon»-knappen, for å komme til siden hvor du har mulighet til å endre informasjonen om din organisasjon. XV

76 2. Siste aktivitet: - Her får du se kort hva som har skjedd siden sist du var innlogget på siden. Bl.a. vil det stå hvor mange følgere organisasjonen har fått, hvor mange donasjoner, og hvor mange kroner som har blitt donert siden forrige innlogging og lignende. 3. Statistikk over donasjoner for inneværende måned. - Her vil du se en grafisk statistikk fremvisning over donasjoner din organisasjon har mottatt i den inneværende måneden. XVI

77 MENY Menyen vil alltid ligge øverst på webapplikasjonen og her vil du ha forskjellige muligheter: Dette bildet er litt manipulert for at du lettere skal kunne se skriften på bildet. 1. Sharity og Hjem «Sharity» og «Hjem» vil føre deg til samme side, nemlig hjem-siden til din organisasjon. 2. Prosjekt Når du trykker på «Prosjekt»-knappen vil det komme opp 2 valg til; 1. Registrer prosjekt - Denne trykker du på om du ønsker å registrere et prosjekt til din organisasjon. 2. Vis alle prosjekter - Denne trykker du på om du ønsker å se alle prosjektene du tidligere har registrert. 3. Nyhet Når du trykker på denne knappen vil du også få 2 valg slik som på «Prosjekt», og valgene er ganske like; 1. Registrer nyhet - Denne trykker du på om du ønsker å registrere en nyhet til et prosjekt. 2. Vis alle nyheter - Denne trykker du på om du ønsker å se alle nyhetene du tidligere har skrevet. 4. Statistikk Når du trykker på denne knappen vil du få 2 valg; 1. Enkel - Trykker du på «Enkel» vil du kunne se statistikk for en enkelt dag, måned, eller år. 2. Sammenligning - Her kan du sammenligne dager, måneder og år med hverandre. XVII

78 5. Innstillinger Når du trykker på denne knappen vil du få 2 valg; 1. Endre organisasjon - Her kan du endre informasjonen om din organisasjon 2. Velg Tema - Her kan du endre fargene på nettsiden. 6. Logg ut Trykker du på denne logges du trygt ut av nettsiden. Logg ut: For å logge ut av webapplikasjonen trykker du på «Logg ut»-knappen helst øverst til høyre på hver side. (Helt til høyre i menyen). XVII I

79 PROSJEKT Registrer prosjekt: For å registrere et prosjekt må du trykke på registrer prosjekt i menyen. For å navigere menyen se forrige delpunkt i brukerveiledningen. Du vil ha denne siden foran deg: - Trykk på bildet som sier «Trykk for å laste opp bilde» for å laste opp et bakgrunnsbilde til prosjektet. - Fyll inn alle feltene med informasjonen til prosjektet du ønsker å legge inn i systemet. - Trykk på «Registrer prosjekt»-knappen nederst til venstre når de to foregående punktene er fullført. Vis alle prosjekter: Her vil du se en oversikt over alle prosjektene som har blitt lagt inn av din organisasjon. Over alle prosjektene ligger det et søkefelt hvor du kan søke etter prosjektenes titler. XIX

80 Hvert enkelt prosjekt vil ha 3 forskjellige valg 1. Vis Denne vil sende deg til en side som viser informasjonen til prosjektet du trykket «Vis» på. 2. Endre Denne knappen vil sende deg til en side hvor du kan endre informasjonen til prosjektet du trykket «Endre» på. 3. Slett Denne knappen sender deg til en bekreftelses-side hvor du må skrive inn organisasjonsnummer og passord for å bekrefte at du vil slette dette prosjektet. XX

81 Vis prosjekt Her kan du se informasjonen som er lagret til et prosjekt. For å komme til denne siden må du som nevnt i forrige punkt trykke på «Vis»-knappen til det prosjektet du ønsker å se. Hvis du ønsker å endre prosjektet du ser informasjonen til, trykk på «Endre» nederst i høyre hjørne. XXI

82 Endre prosjekt Her vil du kunne endre informasjonen til det prosjektet du trykket på «Endre»-knappen til. - Fyll inn de feltene som må rettes og trykk på «Oppdater informasjon»-knappen som er nederst på siden. Slett prosjekt Trykker du på slett prosjekt som nevnt tidligere under «Prosjekt», vil du komme til en side hvor du kan se informasjonen til prosjektet og kan skrive inn organisasjonsnummer og passord for å bekrefte sletting. - Skriv inn brukernavn og passord, deretter trykk på «Fjern prosjekt» nederst på siden. Denne siden er ikke ferdig utviklet, så vi tar forbehold om endringer i utseende, men funksjonaliteten vil være den samme. XXII

83 NYHET Registrer nyhet: For å registrere en nyhet må du trykke på registrer prosjekt i menyen. For å navigere menyen se forrige delpunkt i brukerveiledningen. Du vil ha denne siden foran deg: - Trykk på bildet som sier «Trykk for å laste opp bilde» for å laste opp et bakgrunnsbilde til nyheten. - Fyll inn alle feltene med informasjonen til nyheten du ønsker å legge inn i systemet. - Husk å velge hvilket prosjekt nyheten hører til! - Trykk på «Registrer nyhet»-knappen nederst til venstre når de to foregående punktene er fullført. Vis alle nyheter: Her vil du se en oversikt over alle nyhetene som har blitt lagt inn av din organisasjon. XXII I

84 Over alle nyhetene ligger det et søkefelt hvor du kan søke etter nyhetenes titler. Hver enkelt nyhet vil ha 3 forskjellige valg 1. Vis Denne vil sende deg til en side som viser informasjonen til nyheten du trykket «Vis» på. 2. Endre Denne knappen vil sende deg til en side hvor du kan endre informasjonen til nyheten du trykket «Endre» på. 3. Slett Denne knappen sender deg til en bekreftelses-side hvor du må skrive inn organisasjonsnummer og passord for å bekrefte at du vil slette denne nyheten. Vis nyhet: Her kan du se informasjonen som er lagret til en nyhet. For å komme til denne siden må du som nevnt i forrige punkt trykke på «Vis»-knappen til den nyheten du ønsker å se. XXI V

85 Hvis du ønsker å endre nyheten du ser informasjonen til, trykk på «Endre» nederst i høyre hjørne. Endre nyhet Her vil du kunne endre informasjonen til den nyheten du trykket på «Endre»-knappen til. - Fyll inn de feltene som må rettes og trykk på «Oppdater informasjon»-knappen som er nederst på siden. Slett nyhet Trykker du på slett nyhet som nevnt tidligere under «Nyhet», vil du komme til en side hvor du kan se informasjonen til nyheten og kan skrive inn organisasjonsnummer og passord for å bekrefte sletting. - Skriv inn brukernavn og passord, deretter trykk på «Fjern nyhet»-knappen nederst. STATISTIKK Enkel: Her kan du se statistikk for en enkelt dag, måned eller år av gangen. For å komme til denne siden må du trykke på «Statistikk»-knappen i menyen og deretter velge «Enkel» i undermenyen. Da vil du komme til denne siden. Merk: siden vil ikke se slik ut med en gang. For å få frem grafisk og tekstlig statistikk: - Trykk på dropdown-menyen hvor det står «Velg statistikktype», og velg ønsket tidsenhet. - Så må du trykke på det tomme tekstfeltet som nå har kommet til syne, og velge ønsket dag/måned/år. Allerede nå vil den tekstlige statistikken komme til syne til høyre på skjermen. - Trykk på «Kroner donert», «Antall donasjoner» eller «Følgere», alt etter hva du vil se grafisk XXV

86 fremstilt. Når en av disse er trykket vil grafen komme til syne på skjermen. Sammenligning: Her kan du se sammenligninger av statistikk for to dager, to måneder eller to år av gangen. For å komme til denne siden må du trykke på «Statistikk»-knappen i menyen og deretter velge «Sammenligning» i undermenyen. Da vil du komme til denne siden. Merk: siden vil ikke se slik ut med en gang. For å få frem grafisk og tekstlig statistikk: - Trykk på dropdown-menyen hvor det står «Hva vil du sammenligne?», og velg ønsket tidsenhet. - Så må du trykke på det første tomme tekstfeltet som nå har kommet til syne, og velge ønsket dag/måned/år. - Trykk så på det andre tomme tekstfeltet som kom til syne, og velg ønsket dag/måned/år. Nå vil statistikk komme til syne og en tekstlig statistikk ligger helt i bunnen av siden. XXV I

87 INNSTILLINGER Endre organisasjon: For å endre organisasjonens informasjon kan du trykke på enten «Endre informasjon» i informasjonsboksen på Hjem-siden, eller trykke på «Endre organisasjon» etter å ha trykket på «Innstillinger». Du vil da komme til denne siden: - Endre de feltene du vil endre og trykk på «Oppdater informasjon»-knappen helt nederst på siden. Da vil endringene bli lagret og informasjonen på Hjem-siden kan bekrefte dette. Velg tema: Du kan når som helst bytte fargetema på sidene ved å gå til «Velg tema» under «innstillinger»- knappen. - Trykk på «Innstillinger», deretter «Velg tema». Her får du valget mellom to forskjellige stiler - Trykk på «Velg denne stilen!» for å bytte til ønsket fargetema.. XXV II

88 Testing Her vil det stå hvordan vi har drevet med testing og resultatene av dette. Ingen oss på gruppen har tidligere drevet med testdreven utvikling, så vi har testet funksjonene manuelt kontinuerlig så lenge vi har jobbet med dem gjennom prosjektet. Formålet med testingen: - Funksjonene utfører ønsket oppgave på en tilfredstillende måte. - Avdekke eventuelle feil svakheter så kjapt som mulig. For kjapt å oppdage eventuelle designmessige feil har vi hovedsak testet forløpende i nettleser tilsvarende operativsystem på mobil enhet, dvs. Google Chrome for Android og Safari for ios. Dette er gjort fordi det er tidsbesparende i stedet for å "pushe" til enheten for hver oppdatering som tar litt lengre tid enn å trykke oppdater i nettleser, siden vi i løpet av prosjektet har oppdaget at nettleseren tolker koden tilsvarende som den mobile enheten. På den måten får vi luket ut store designmessige feil med engang. Underveis i prosjektet har vi gjort enhetstester av de enkelte funksjonene vi har jobbet med, dvs. at vi har testet funksjonene for seg selv uten satt de sammen resten prosjektet. Vi har dessverre ikke hatt tid til å drive med omfattende integrasjonstesting annet enn når vi har gått igjennom app/crm og skjekket at alt funker slik vi ønsker det skal gjøre. Under hele prosessen har vi selvsagt lagt inn mange alerts og liknende i funksjoner slik at vi med en gang ser om funksjonen gjør hva den skal gjøre. Dette har resultert i at basisfunksjonen fungerer som de skal, men det kan likevel hende at feilverdier o.l. blir skrevet inn, eller at unormal flyt oppstår. Derfor måtte vi selvsagt gjøre mer testing enn dette. I

89 For å hindre at det blir skrevet inn ugyldig informasjon i input-felter og lagret i databasen, har vi laget regulære uttrykk for både klient og server. Hvis det mot formodning skulle bli skrevet inn noen ulovlige tegn eller for lang tekst vil feltene få en rød border som indikerer at det er noe feil, og det vil ikke skje noe når du trykker på knappen som skal lagre informasjonen i databasen. Altså, brukeren vil forbli på den siden de ikke har fylt ut riktig. Utenom dette har vi dessverre ikke funnet tid til mer testing, og vi mener dette skyldes for dårlig planlegging. II