Hovedprosjekt Høgskolen i Oslo. Gruppe 24. Tore Holmboe (s155547) Vegard Kamben (s148147) Anders Fohlin Kjøde (s155551) Haakon Nygård (s155535)

Transkript

1 Hovedprosjekt 2011 Høgskolen i Oslo Gruppe 24 Tore Holmboe (s155547) Vegard Kamben (s148147) Anders Fohlin Kjøde (s155551) Haakon Nygård (s155535) Stian Pettersen (s144449) en RSS-leser på tvers av touchenheter 1

2 PROSJEKT NR. 24 TILGJENGELIGHET Åpen Studieprogram: Postadresse: Postboks 4 St. Olavs plass, 0130 Oslo Besøksadresse: Holbergs plass, Oslo Hovedprosjekt Telefon: Telefaks: HOVEDPROSJEKTETS TITTEL myfeed - RSS-leser for touchenheter DATO ANTALL SIDER / BILAG 99 / 1 bilag (97 sider) PROSJEKTDELTAKERE Tore Holmboe (s155547) Vegard Kamben (s148147) Anders Fohlin Kjøde (s155551) Haakon Nygård (s155535) Stian Pettersen (s144449) INTERN VEILEDER Geir Skjevling OPPDRAGSGIVER netmongo KONTAKTPERSON Nils Hofgaard Dahl SAMMENDRAG Vårt oppdrag er å lage en nettapp (webbasert applikasjon) som skal motta og vise RSS-feeds på en spennende og intuitiv måte. Nettappen skal være optimalisert for alle typer touchenheter. For å oppnå dette målet, skal vi bruke det nyeste innen programmeringsteknologi. Ved å lage en app som fungerer på flere ulike touchenheter, slipper utviklere å lage en separat app til hvert operativsystem. Dette gjør at de sparer mye penger. 3 STIKKORD Touchenheter Nyeste teknologi På tvers av plattformer 2

3 1 Forord Dette er prosjektrapporten til applikasjonen myfeed, som er laget som et hovedprosjekt ved HiO, for netmongo. Applikasjonen er laget av Tore Holmboe, Vegard Kamben, Anders Fohlin Kjøde, Haakon Nygård og Stian Pettersen. Dette dokumentet viser til hvordan vårt prosjekt er laget, og prosessen på vei mot vårt mål. Prosjektet er laget for netmongo som en prøvemodell de senere skal kunne bygge videre på. Vi bruker en åpen kildekode, noe som gjør at alle som vil kan jobbe og modifisere på applikasjonen. Vi kom i kontakt med netmongo gjennom Nils Hofgaard Dahl, som er en bekjent av et av gruppemedlemmene. netmongo er en bedrift som spesialiserer seg på nettbaserte løsninger. Hensikten med dette prosjektet er å lære oss hvordan vi bruker de nyeste teknologiene innen programmeringsspråk og design. I tillegg til dette vil vi lage et produkt som ikke er å finne på markedet i dag. Vi vil takke Nils Hofgaard Dahl for opplæring og generell hjelp i prosjektprosessen. Han har hjulpet oss med mye, samtidig som han har hatt troen på oss. Vi forutsetter at den som leser dette dokumentet har generell kunnskap innen IT og webprogrammering. Rapporten er optimalisert for papir. 3

4 2 Innholdsfortegnelse Innhold 1 Forord Innholdsfortegnelse Ordforklaring Hensikten med systemet Mål og rammebetingelser Om bedriften Funksjonelle krav Strukturelle krav... 8 Prosessdokumentasjon...10 Produktdokumentasjon..30 Brukerdokumentasjon..75 Kilder.98 4

5 3 Ordforklaring Applikasjonsprogramvare Program som utnytter maskinens ressurser til en oppgave brukeren ønsker og få utført. Eksempler på applikasjoner kan være tekstbehandlere eller nettlesere. Omtales ofte bare som app, eller apps i flertall. Bar En bar er en menylinje. Dette vil bli brukt i henhold til design og programmering. Nettapplikasjon Program på internett eller i intranettet som brukes via en nettleser, og som ikke installeres på den lokale datamaskinen. RSS RSS (vanligvis skrevet ut som Really Simple Syndication), også kalt «levende bokmerker» eller «nyhetsmating», er en ordning der en nettleser på en datamaskin henter nyheter eller annet materiale fra internett fortløpende og automatisk. SCRUM Scrum definerer et team som selvdrevet og med store fullmakter til å nå definerte mål for programvareutviklingen. I henhold til denne metodikken er det ikke krav om spesifikasjoner eller detaljert planlegging av arbeidsoppgavene i prosjektgjennomføringen. Typisk gjennomføres et prosjekt i henhold til Scrum i iterasjoner på en uke opp til en måneds lengde kalt en Sprint. Web feed En web feed er en metode for å holde brukere kontinuerlig oppdatert på stoff. Brukere kan abonnere på feeds, og selv få den informasjonen de vil. Feeds blir vanligvis tilbudt av nettaviser, og sider som legger ut nyheter innen forskjellige sjangere. Ganttdiagram Ganttdiagram er et verktøy for planlegging og styring av prosjekter. Den grafiske fremstillingen av prosjektets oppgaver, milepæler, ansvarsforhold og tidsbruk bidrar til å skape oversikt og forutsigbarhet for alle involverte parter under prosessen. 5

6 4 Hensikten med systemet I dag er touch-enheter the next big thing. Dette gjør at det i dag og fremover vil komme en eksplosjon av nye produkter, ideer og selskaper som slenger seg med på bølgen. Applikasjoner (heretter; apps) er en veldig viktig del av denne interessen for touchenheter. Apples egen App Store estimerer per 22. januar 2011 at det har blitt lastet ned over 10 milliarder apps fra deres butikk alene. Dette er forventet til å stige med årene. Android Market er Google sin versjon av App Store. Per august 2010 var det estimert ca 1 milliard nedlastninger. Dette tallet forventes å være mye større i dag. Problemet med disse appene er at de enhetene de kjører på, nettbrett (tablet), mobiltelefoner, datamaskiner og så videre, alle har sitt eget operativsystem og kildekode. Dette medfører at utviklere må lage forskjellige apper til forskjellige enheter. Hensikten med vårt system er å lage en app som fungerer på tvers av de ulike plattformene. For å gjøre dette, lager vi appen vår som mer eller mindre en internettside, altså en nettapp. Ved å løse problemet på denne måten, vil en bruker kunne benytte appen på både nettbrettet, telefonen og datamaskinen. For å illustrere denne ideen best mulig, har vi valgt å lage en RSS-leser. Vi kan da hente informasjon fra mange forskjellige nettsteder inn i en liten applikasjon. 5 Mål og rammebetingelser Vi har fått i oppdrag å konstruere en nettapplikasjon for touchenheter. Denne appen skal bestå av en samling med RSS-framvisere fra forskjellige kategorier, hovedsaklig fra diverse nyhetssider. De to viktigste kriteriene for det endelige resultatet er at innholdet blir presentert på en spennende og stilig måte, samt at appen skal fungere på alle former for touchenheter. Appen skal konstrueres ved å bruke PHP5, HTML5, JavaScript og CSS3. I bunnen ligger ett rammeverk arbeidsgiver står for, som kalles IO. Dette rammeverket er ikke utgitt enda, men skal utgis som open source. Rammeverket er objektorientert og fullt skalerbart. 6

7 Vi har veldig liten erfaring innen JavaScript, og ikke minst IO rammeverket som vi aldri hadde hørt om før. Dette kan skape utfordringer for oss, og krever mer arbeid fra vår side for å løse oppgaven. Oppgaven har egentlig ikke noen faste rammer. Det er opp til oss hvor mye vi vil implementere i siden. 6 Om bedriften netmongo er et enkeltmannsforetak som drives av Nils Christopher Hofgaard Dahl. Han har over 10 års erfaring med utvikling av nettløsninger. Dette innebærer for eksempel utvikling av CMS, nettbutikker og nettportaler. Han har levert løsninger for mange av de store nettaktørene i Skandinavia, for eksempel Dagbladet, VG og NRK. Nils var tidligere Teknisk Sjef i Onsite Solutions AS, og har via den stillingen god erfaring med studentprosjekter. 7 Funksjonelle krav Systemet skal fungere like godt på alle håndholdte enheter, uavhengig av type eller opertivsystem. Tjenesten skal kunne brukes av alle gratis. Ved oppstart skal man ha et standardoppsett med feeds fra de største norske og internasjonale nyhetsaktørene. Brukere skal deretter ha mulighet til å selv legge til og fjerne forskjellige feeds avhengig av hva de er interessert i. Grensesnittet skal være optimalisert for mobile enheter, og ta i bruk navigasjonsmulighetene som er innebygd. Administrasjonsdelen skal ha full tilgang til oversikt over hele systemet. Det skal være mulig å vise en hovedliste over feeds som er i systemet, for deretter å kunne slette eller legge til nye feeds. Derfra skal man også kunne endre på hvilke feeds som vises på standardlisten for uregistrerte brukere. Administrator delen skal også ha mulighet til å kunne få opp en liste over registrerte brukere. Herfra kan administratoren slette brukere, eventuelt legge til nye. 7

8 8 Strukturelle krav Noe av det første vi fikk beskjed om var at systemet skulle få en stilig design. Utover det funksjonelle var dette noe netmongo la stor vekt på. Ved siden av dette var det meste opp til oss. netmongo har gitt oss ansvaret for å lage et stilig design. De vil ikke komme med noen preferanser eller rammer som vi skal jobbe etter. Applikasjonen skal også være brukervennlig, slik til at brukeren enkelt skal kunne finne ut av hva som er hva. 8

9 Prosessdokumentasjon Hovedprosjekt 2011 Høgskolen i Oslo Gruppe 24 Tore Holmboe (s155547) Vegard Kamben (s148147) Anders Fohlin Kjøde (s155551) Haakon Nygård (s155535) Stian Pettersen (s144449) en RSS-leser på tvers av touchenheter 9

10 Innhold 1 Planlegging og arbeidsmetode Arbeidsplan Kommentar til arbeidsplanen Milepæler Kommentar til milepæler GANNT-diagram Verktøy Facebook Gmail Dropbox Google Docs Hva måtte læres? Prosjektdagbok Kravspesifikasjonen og dens rolle Oppsummering av prosjektet Eventuelle utvidelser Swipe-funksjon Google Search Drag & Drop Eget utbytte

11 1 Planlegging og arbeidsmetode Vår overliggende plan fra starten av var å ofre mye tid til prosjektarbeidet. Vi planla å prøve å bruke et SCRUM-system som medførte treukers-sprinter. Vi skulle da i begynnelsen og slutten av hver sprint fortelle resten av gruppen hva som skulle gjøres og hva som hadde blitt gjort. Når vi for alvor kom i gang med prosjektet fant vi fort ut at dette var en veldig vanskelig arbeidsmåte for oss. Den første grunnen til dette er at vi har flere fag enn bare prosjektoppgaven. Dette medførte at vi ikke kunne sette av tre uker eksklusivt til prosjektoppgaven, da vi måtte levere obligatoriske oppgaver og gå i undervisningstimer. Den andre grunnen til at det var vanskelig å gjennomføre arbeidsmetoden var at vi måtte tilegne oss mye ny kunnskap før vi fikk startet å programmere. Dette førte til at vi kunne komme på gli og gjøre mye en uke, mens neste uke ble vi sittende fast med en enkelt funksjon. Dette gjorde at det ikke ble en fast strøm gjennom oppgaven, men vi måtte ta hver oppgave og hver dag som en ny utfordring. Arbeidsmetoden vi til slutt endte på, var hele tiden å ha en liste over hva som måtte gjøres i forhold til arbeidsplanen og milepælene. Denne listen ble lagt ut på en privat gruppe på Facebook, og ble kontinuerlig parallelt med prosjektets gang. For oss fungerte denne arbeidsmetoden veldig bra. Vi visste i god tid hva vi skulle gjøre før eventuelle innleveringer i andre fag. Dette gjorde at vi kunne fordele tiden vi hadde på en riktig og god måte, i motsetning til å velge å ignorere et fag for å jobbe med et annet over en periode på tre uker. Vi ble sammen enige når vi skulle møtes, og møttes så ofte gruppemedlemmene hadde mulighet. 2 Arbeidsplan Vi har erfart at det er en stor utfordring å planlegge så langt i forveien, og har derfor gjort små endringer underveis i arbeidsprosessen. Vi har brukt flere programmeringsspråk som vi ikke var så godt kjent med, og måtte derfor bruke en del ekstra tid for å lære oss disse. Av den grunn har det også blitt en del prøving og feiling. Det har vi sett på som en utfordring og det har vært en interessant og lærerik prosess. Det er også første gang vi har laget noe som er spesialdesignet for bruk på touch-enheter. 11

12 Arbeidsplanen ble satt opp i grove trekk i starten. Vi fant fort ut at vi måtte ha mer tid på å lære oss og utforske programmeringsspråkene. I oppstartsfasen av prosjektet satte vi opp en plan på hvordan prosjektet skulle gjennomføres. Dette ble gjort i forhold til hva som skulle gjøres, og hvor mye tid som skulle brukes på hver oppgave. Det ble satt opp en arbeidsplan, oversikt over milepæler, samt et Gantt-diagram for å illustrere dette. 12

13 Arbeidsplan per 28. januar 2011 Hva skal bli gjort? Snakke med veileder og få tilgang til en server på skolen Konfigurere server til vårt bruk, her skal vi få hjelp fra Nils Når skal det være ferdig? 26. januar Så tidlig som mulig etter vi har fått tilgang på server Lese oss opp på og lære de forskjellige programmeringsspråkene vi skal benytte (PHP5, jquery, HTML5, CSS3, IO) Lære oss hvordan en RSS-leser fungerer Sette oss inn rettigheter ved bruk av RSS-feeds fra nettsteder som vg.no, db.no og så videre. Utarbeide et stilig og godt design på nettappen Starte med programmeringen Finne ut hvile RSS-feeds vi vil tilby brukerne Finne et bra standardoppsett av RSS-feeds Utforme og lage en brukerveiledning på hvordan brukeren kan sette opp et egendefinert oppsett Testing og utbedring Så fort som mulig 4. februar 10. februar Så fort som mulig Så tidlig som mulig etter vi har fått tilgang på serveren 1. mars Når nettappen er ferdig Når nettappen er ferdig Når nettappen er ferdig Prosjektrapport 31. mai kl Forberedelse til framføring Framføring 13. juni juni 13

14 2.1 Kommentar til arbeidsplanen Det har skjedd mange endringer i forhold til arbeidsplanene vi laget i januar. Det første en kan legge merke til er at det første punktet som omhandler det å få tilgang på server, ikke lenger er relevant. Dette er på grunn av at Nils ved netmongo satte opp en server til oss på deres lokaler. Vi fikk da en ferdig konfigurert server, som var klar for å sette opp databaser på. Det en også kan legge merke til er at vi ikke fikk full tilgang til serveren før den 19. mai. For prosjektet sin del hadde ikke denne forsinkelsen så stor betydning, da de eneste vi trengte var å føre over de databasene vi allerede hadde laget lokalt, på serveren. Det andre vi kan se nærmere på er punktet som innebærer at vi skal sette oss inn i og lære nye programmeringsspråk. Dette var umulig å sette en fast dato på, i og med det er en kontinuerlig prosess. Vi lærer oss nye ting hele tiden når det gjelder programmering, og ingen av oss er på noen måte utlært enda. Dette førte til at vi ofte kunne møte på store problemer, som igjen førte til at det ble brukt mye tid på en enkelt funksjon. Denne usikkerheten gjorde at det var vanskelig for oss å sette faste datoer, i og med at det var umulig å vite når vi støtte på et problem, slik det ofte er innen programmering. Det å lære hvordan en RSS-leser fungerer, greide vi ganske greit. Det tok litt lenger tid en det vi forutså i arbeidsplanen, men medførte ingen store problemer eller forsinkelser. Når det gjelder tidspunkt for å starte med programmeringen, er dette satt til så tidlig som mulig etter vi har fått tilgang til server. Dette er ikke rett i og med vi fikk tilgang til serveren først nå i mai. Vi startet med programmeringen tidlig i prosjektet, i februar måned på egen server. Testing og utbedring har foregått kontinuerlig gjennom hele prosjektprosessen. Dette har blitt gjort da vi har blitt ferdig med en funksjon eller annen oppgave, for deretter å evaluere denne med gruppen og medstudenter. Vi har tatt til oss tilbakemeldinger, og endret på arbeidet vi har gjort, om det har vært nødvendig. Testingen har blitt utført relativt uformelt, uansett om det er vi som har stått for testingen, eller medstudenter. Når vi har brukt medstudenter har vi ganske enkelt vist frem nettappen, og latt dem selv utforske og prøve seg. Deretter har de gitt oss tilbakemelding på hva de likte, eller ikke likte. Når det bare er små endringer som blir gjort, har vi i fellesskap testet dem ut, og blitt enige om hva som fungerer best. 14

15 Vi har testet ut hvordan appen vår fungerer på flere forskjellige enheter. Innad i gruppen har vi hatt tilgang på ulike telefoner med Android operativsystem, og brukt disse til testing. Vi har også tidvis hatt tilgang på en ipad. Når vi ikke har hatt tilgang på ipad har vi brukt emulator på datamaskin. Vi har også brukt nevnte emulator til å teste netappen mot iphone. Dette har gjort at vi til enhver tid har hatt mulighet til å teste ut appen på de viktigste operativsystemene. 3 Milepæler Milepæler per 28. januar 2011 Hva? Når? Gjøre klar spesifikasjoner Til 27. januar Forprosjektrapport Fredag 28. januar kl Fungerende prototyp Testing / forbedring Ferdig produkt Før 20. april Før 1. mai 20. mai Prosjektrapport Tirsdag 31. mai, klokka Presentasjon juni 3.1 Kommentar til milepæler Samtidig som vi satte opp arbeidsplanen satte vi også opp en oversikt over milepæler. Disse milepælene er overordnede mål vi skal nå gjennom prosjektprosessen. De to første milepælene, gjøre klar spesifikasjoner og forprosjektrapport, gikk bra. Disse ble ferdig til ønskelig tidspunkt. 15

16 Milepælen å lage en fungerende prototype ble vanskelig å utføre, da det er vanskelig å definere en ferdig prototype. Vi har under prosjektets gang hatt flere utgaver av nettappen og designet, uten å kunne kalle det forskjellige prototyper. Vi greide ikke å møte fristen 20.mai for et ferdig produkt. Produktet ble ferdig den 23.mai, tre dager etter fristen. Dette var ikke noe stort problem, da vi fortsatte hadde god tid på å bli ferdig med hele prosjektet. Etter det ferdige produktet bestemte vi oss også for å lage en administratordel så en administrator kan redigere nettappen. Denne ble ferdig 26.mai. 16

17 4 Gannt-diagram Gannt-diagram per 28. januar 2011 Figur 4.1 Gannt-diagram 17

18 5 Verktøy I starten av prosjektet var vi gjennom flere forskjellige agile verktøy som skulle gjøre arbeidsprosessen enklere for gruppen. Disse fant vi gjennom søking på internett og tips fra Nils. De vi fant var enten for dyre eller for kompliserte å bruke. Vi fant til slutt ut at vi kom til å spare oss tid og arbeid ved å ikke bruke noen av disse. Vi endte opp med å bruke en kombinasjon av verktøy for å gjøre prosjektprosessen enklere for gruppen. Disse er: 5.1 Facebook Nettsamfunnet Facebook ble mye brukt under prosjektprosessen. Vi dannet en egen privat gruppe for prosjektoppgaven. Avtaler, oppmøtetider og eventuelle endringer ble annonsert her. I tillegg til dette brukte vi gruppen til spørsmål og svar rundt prosjektet, både faglig og ikke-faglig. Når arbeid var ferdig, brukte vi Facebook til å annonsere dette. Dette medførte at vi kunne stryke ut punkter på listen over oppgaver. I tillegg til dette fungerte Facebook som en logg for hva som ble gjort til hvilken tid. 18

19 5.2 Gmail Gmail er en nettleserbasert e-posttjeneste som er utviklet av Google. Gruppen lagde en felles konto som vi brukte til å kommunisere med Nils og andre når dette ble nødvendig. I tillegg til ren kommunikasjon, hendte det ofte at vi sendte e-poster til oss selv for å dele dokumenter, filer og så videre. 5.3 Dropbox Dropbox er en internettbasert tjeneste hvor man kan lagre filer direkte på et eget privat område. Vi opprettet en konto som vi brukte til å laste opp dokumenter og filer på. Dette var praktisk både som en måte å dele arbeid, og som en måte å ta backup av arbeid. 19

20 5.4 Google Docs Google docs er mer eller mindre et webbasert alternativ til Microsoft Office. Vi har tjenesten til å skrive på felles tekstdokumenter, samtidig for å samle dokumenter vi har blitt ferdig med. I tillegg til dette bruker vi Google Docs til å vise frem de dokumentene vi er ferdig med. Disse dokumentene blir linket til via gruppehjemmesiden. 6 Hva måtte læres? Det var mye nytt som måtte læres gjennom prosjektets gang. Programmeringsspråkene var her en stor faktor. Vi hadde vært borti tidligere versjoner av de fleste programmeringsspråkene fra før. Det som var den store utfordringen var å lære seg hvordan en skulle benytte de nyeste versjonene (HTML5, CSS3, PHP 5.3, jquery) til deres fulle potensial, som var en nødvendighet for å gjennomføre oppgaven. Vi måtte også lære oss å lage selve nettappen. Dette er ingen enkel oppgave i seg selv, da ingen av oss er profesjonelle programmerere. Prøving og feiling er et stikkord som utmerker seg i denne prosessen. Det var flere stunder frustrasjonen tok over når en hadde sittet i en uke for å løse et tilsynelatende simpelt problem. På den andre siden av skalaen var det utrolig tilfredsstillende når programmeringen gikk på skinner. Dette var med på å gi videre motivasjon og styrke til å kjempe seg gjennom enda en uke med feilsøking ved neste problem. Design var også en viktig del av prosjektet og derfor læringsprosessen. Vi måtte lære oss å være gode designere som gjorde kloke valg og lærte av våre feil. Det er en omfattende prosess å lage en design som tilfredsstiller alle. Designet ble utformet gjennom prøving og feiling, samt brukertesting. 20

21 7 Prosjektdagbok Når og hvor lenge? Hvem var der? Hva ble gjort? timer Hele gruppen Avtalte gruppe Startet på statusrapport Diskuterte arbeidsgiver Snakket med arbeidsgivere Bestemte oss for hvilket type arbeid vi vil prøve å gjennomføre Opprettet gmail-konto og dropbox-konto til gruppebruk timer Hele gruppen, utenom Tore Diskutert milepæler og satt opp en veldig grov plan I tillegg til dette har vi satt oss mer inn i SCRUM Vi har tatt opp det å bruke wordpress som hjemmeside, kontra den vi har i dag. Dette vil bli ytterligere diskutert senere timer Hele gruppen Vært på møte med Nils ved et konferansesenter på Ski. Vi har der hatt et lynkurs i IO-rammeverket I tillegg til dette har vi fått mye ny informasjon angående prosjektet. Vi har diskutert oss imellom hvordan vi tenker det skal bli Vi har også sett på milepæler og ulike frister som angår prosjektet ,5 timer Hele gruppen Vi har satt opp en scrum-side som vi skal følge gjennom prosjektets gang. Dette har vi gjort gjennom tjenesten PivotalTracker. Vi gikk deretter gjennom hvordan man skal bruke tjenesten I tillegg til dette har vi jobbet mer med hjemmesiden Vi har hatt et møte med Geir Skjevling som er vår veileder. Vi diskuterte lett rundt prosjektet og bestemte oss for å ha et nytt møte om ikke alt for lenge timer Hele gruppen Vi har alle jobbet med forskjellige deler av forprosjektet. Vi har kommet godt i gang og satser på å bli ferdig med forprosjektet iløpet av morgendagen 21

22 timer Anders, Haakon og Stian Vi har satt sammen, lest over og redigert forprosjektrapporten. Denne er nå ferdig og lastet opp på google docs I tillegg til dette har vi startet arbeidet på fremdriftsplan og arbeidsplan timer Hele gruppen Vi har laget ferdig en grov arbeidsplan I tillegg til dette har vi laget et grovt gantt-diagram som skal representere fremdriftsplanen Forprosjektet har blitt levert inn. Gå til dokumenter for å nå tak i dette. Forprosjektet inneholder selve forprosjektrapporten, arbeidsplan og fremdriftsplan timer Vegard og Tore timer Alle utenom Anders(Syk) Design, brainstorming HTML5 jobbing, design brainstorming Alle Mye selvstendig jobbing med å lære de ulike teknologiene, Særlig vekt på jquery og HTML5. Dette grunnet mye sykdom og ferie timer Vegard Jobbing med første versjon av selve RSS leseren timer Hele gruppen, utenom Tore (legetime) timer Hele gruppen, utenom Tore (sykdom) Vi har endelig komt oss skikkelig i gang igjen med hovedprosjektet etter lang tid med annet arbeid, sjukdom innad i gruppen og vinterferie Vi har blitt enig om foreløpig design av feederen I tillegg til dette har vi startet å utforme de ulike funksjonene (sliders, selve feeden, touch-funksjon med mer) Vi har jobbet med diverse ting rundt feederen Vi har leitet etter gode måter å løse problemer vi har støtt på I tillegg til dette har vi startet å tenke på hvilke ikoner vi skal bruke til de ulike funksjonene på verktøylinjen timer ,5 timer ekstra(18 tot) Hele gruppen Vegard Vi har jobbet videre med å framstille RSS-feeden. Her har vi hatt en god del framgang iløpet av dagen I tillegg til dette har vi laget ferdig ikonene som skal brukes til verktøylinjen Vegard jobbet i 18 timer totalt med en fullstendig ny leser. Den gamle i php viste seg å ikke lønne seg i 22

23 forhold til resten av funksjonaliteten som skulle komme i applikasjonen. Ny ble laget i jquery timer Hele gruppen Vi har arbeidet videre på den nye feeden, jobbet med menyer og forsket på registrering av brukere med hensyn til databaser Vi har også utført en enkel brukertest på ikonene våre, noe som førte til at vi skiftet på logg ut / logg inn til enklere og mer forståelige ikoner timer Hele gruppen, utenom Vegard (jobb) Vi har laget en ny design på menyen. Dette førte til mer testing. Tok i bruk ny kode til menyen, dette gikk ikke bra. Skal forandres timer Hele gruppen Mer opplesing på bruk av jquery, samtidig som vi testet det ut videre. Videre arbeid på brukergrensesnittet og ikonene timer Hele gruppen Funnet en fin form til bruk i brukerregistreringen. Lagde til forskjellige forslag til dette Lest på PHP Videre arbeid på brukergrensesnittet og ikonene timer Hele gruppen Jobbet med for til brukerregistrering Ferdig med nye ikoner timer Hele gruppen Fikset menyen Startet optimalisering for flere enheter Implementert form i popup-funksjon Testet i alle browsere, noen småfeil timer Hele gruppen Kommet i gang igjen etter å ha jobbet med obliger i andre fag. Fått på plass check-funksjon på form Midlertidig design ferdig Forsetter med optimalisering for enheter timer Hele gruppen Delt opp brukerregistrering lokalt med span vs flere sider Optimalisering for enheter Videre jobbing med designet, ikonene i hovedfokus timer Hele gruppen, utenom Vegard (jobb) Oppfrisking på PHP, SQL mot DB. 23

24 timer Hele gruppen Startet på brukerregistrering i DB og logg inn funksjon Videre testing av brukergrensesnitt Optimalisering fortsetter timer Hele gruppen Ferdig med registrering av brukerinfo. Sql-injection Startet på endringer av ikoner i brukergrensesnittet timer Hele gruppen Logg inn-funksjon klar. Begynt å se på v8js: js i PHP. For å kunne lukke popup når bruker er registrert / logget inn Ferdig med nytt utkast av design, både brukergrensesnitt og nye ikoner Startet fulltidsarbeid på rapporten timer Hele gruppen, utenom Vegard (jobb) Fått til å hente RSS-feeds fra DB inn i registreringsskjema. Begynt på script for registrering av feeds (insert array into dn) Laget til nye ikoner ut fra brukerundersøkelsen og i henhold til fargevalg Laget bakgrunn til brukergrensesnittet Laget ferdig det resterende designet Videre arbeid på rapporten timer Hele gruppen Gjort ferdig brukerregistrering og login Prøvd å finne løsning for å lukke popup Testet ut det nye brukergrensesnittet, positivt resultat Arbeidet videre med rapporten Påskeferie Selvstendig jobbing Vegard iphone optimalisering 4 timer. Div videre arbeid for alle timer Hele Gruppen Gått bortifra popup for nå. Database arbeid timer Hele Gruppen ipad og Iphone optimalisering Videre databasearbeid timer Hele gruppen Fått index til å hente info fra DB Videre arbeid med optimalisering Brukergrensesnitt og ikoner er nå mer eller mindre ferdig timer Hele gruppen, utenom Index henter nå info på innlogget bruker fra DB Koblinger og struktur i databaser 24

25 Anders Flere har nå satt i gang med prosjektrapporten timer Hele gruppen Jobbet med session innlogget, fått på plass index, mye knoting. Videre jobbing med prosjektrapporten timer Hele gruppen Legg til / slett er nå OK Begynt på egendefinert RSS-feed timer Stian og Vegard Videre arbeid på egendefinerte RSS-feeds timer Stian Oppsett til netmongo DB timer Hele gruppen Snakket med Torunn om tips angående SQL Fått til riktig listing med MySQL Videre jobbing med egendefinerte RSS-feeds Videre jobbing med rapporten timer Vegard Popup bokser for info del og alternativer timer Hele gruppen Videre arbeid med egendefinert. Har prøvd å feilet lenge, går bort fra denne funksjonen i denne omgang Jobbet videre med rapporten Videre arbeid med popup for info og alternativer på menyen timer Stian, Vegard og Haakon timer Hele gruppen, utenom Vegard (jobb) Rettet opp i småfeil Popup arbeid. Rydding i koden Prøvd å fikse hide/show Brukerinfo blir nå sendt på epost ved brukerregistrering Lastet opp koden til tnews.netmongo.com Videre jobbing med prosjektrapporten timer Hele gruppen Knotet med å få ting til å gå på skinner på tnew.netmongo.com Jobbet videre med rapporten Info popup ferdig, jobbet med verktøy popup. Forsøkt å få uavhengige popups. Nå reagerer de på samme kall. Skiftes en skiftes den andre timer Vegard Fikset popups uavhengig av hverandre ved å lage en ny instans av alle funksjoner og div tags! 25

26 timer Hele gruppen Fikset generelle feil Knotet med SQL-spørringer Arbeidet videre med rapporten Endelig ipad optimalisering/finpuss Popup finpuss timer Hele gruppen Startet på administratordelen Skriftet ut to ikoner (logg inn og logg ut) Arbeidet videre på rapporten, store deler er nå ferdig Går vekk ifra verktøy popup del for nå. Mangel på tid timer Hele gruppen Jobbet med administratordelen Arbeidet videre på rapporten. Flere og flere deler blir nå ferdig timer Hele gruppen Administratordel ferdigstilt Arbeidet med rapport timer Hele gruppen Arbeidet med rapport timer Hele gruppen Arbeidet med rapport timer Hele gruppen Ferdigstilt rapport Printing og binding av rapport 8 Kravspesifikasjonen og dens rolle Kravspesifikasjonen er i liten grad endret fra første versjon. Vi har jobbet mot de overordnede målene som ble spesifisert i kravspesifikasjonen hele tiden. Disse målene har vi nådd og de er implementert som funksjoner i det ferdige produktet. Funksjoner utover disse har vi laget ettersom vi har hatt ledig tid, eller har følt at de var nødvendige. Kravspesifikasjonen fungerte som et minstekrav til produktet vi nå sitter igjen med. Siden vi aldri fikk beskjed om at vi skulle utvikle et ferdig produkt, men heller utvikle ett godt utgangspunkt som netmongo skulle arbeide videre med, var vi beskjedne når vi utviklet kravspesifikasjonen. Vi skulle i 26

27 første omgang fokusere på det som var definert der, og deretter arbeide mer fritt med å utvikle nye funksjoner. I dag samsvarer kravspesifikasjonen ganske bra med det endelige produktet. Dette er nettopp fordi kravspesifikasjonen var såpass åpen, og vi fikk arbeide fritt med det vi så på som viktig for nettapplikasjonens helhet. 9 Oppsummering av prosjektet Da vi startet med hovedprosjektet hadde ingen av gruppemedlemmene noe erfaring med jquery. I tillegg til dette skulle vi bruke det siste innen HTML, PHP og CSS. Vi hadde ulik erfaring med disse teknologiene fra før, men vi måtte sette oss inn i hvilke nyheter HTML5, PHP5 og CSS3 hadde å tilby. På grunn av dette måtte vi sette av tid til å lære, samt å teste ut språkene. Planen var å prøve å utnytte den nyeste teknologien og lage noe nytt og sprekt. Det at vi skulle programmere med nye programmeringsspråk gjorde det vanskeligere for oss å planlegge hvilken funksjonalitet nettstedet skulle ha. Ikke minst det at vi skulle lage noe dedikert til håndholdte enheter med trykkfølsom skjerm gjorde utfordringen enda større, da ingen av oss hadde erfaring med dette. Derfor var det stor usikkerhet i begynnelsen om planlagt funksjonalitet og utseende lot seg gjennomføre. Av den grunn måtte vi være ekstra fleksible med tanke på endringer underveis. For å finne ut om det vi hadde i tankene kunne gjennomføres, måtte vi prøve å sette dem ut i livet. Etter en periode med prøving og feiling i utviklingsfasen viste det seg at noen ideer måtte forkastes, og endringer måtte til på grunn av tidsnød. 9.1 Eventuelle utvidelser Det ferdige produktet har all den nødvendige funksjonalitet, og det fungerer som det skal. Det er noen få ting vi tror ville gjort brukeropplevelsen enda bedre som vi gjerne skulle ha implementert. En av de tingene vi prøvde på, og som vi gjerne skulle hatt i det ferdige produktet, var at siden skulle vise bilder fra RSS-ene for å gjøre siden enda mer interessant. 27

28 9.1.1 Swipe-funksjon Vi ville også sørge for full integrasjon av swipe-funksjonen. Dette inkluderer da at man bare skal behøve å flytte fingrene over skjermen for å kunne bytte mellom forskjellige feeds eller kategorier. Dette kunne gitt brukeren en følelse å sitte med en digital avis i hånden. Vi hadde også planer om å utarbeide mer funksjonalitet for verktøyknappen i verktøybaren. Via denne menyen skulle man for eksempel kunne endre språk på hele appen. Brukeren skal også kunne endre på fargeoppsettet på siden. Dette innebærer da blant annet fargen på bakgrunnen og ikonene. Dette trenger vi litt mer testing på før det kan implementeres, og er dermed ikke med i denne versjonen av applikasjonen. Da vi føler dette er en tilleggsfunksjon som ikke har stor innvirkning på selve bruken av applikasjonen, valgte vi og ikke fokusere på å få med dette nå Google Search Vi hadde også planer om å innarbeide Googles søkemotor i applikasjonen. Denne ville gitt brukeren muligheten til å selv søke frem RSS-feeds som ikke finnes i hovedlisten som er innebygd i applikasjonen Drag & Drop En spennende interaktiv funksjonalitet som ikke kom med i denne versjonen er muligheten for å ha en drag and drop -funksjon. Brukeren vil ha muligheten til å dra bildeikonene rundt på navigasjonen, for å bytte plassering på dem. Det vil også gå an å slippe bildene utenfor navigasjonen for å slette dem. Dette gir deg et interaktivt alternativ for å slette dine feeds. Den samme funksjonaliteten ønskes på kategorifanen. Brukeren kan dra i fanene for å skifte posisjonen på dem etter eget ønske. Dette er en omfattende funksjon som tar tid å implementere. Dette er funksjoner som ble nedprioritert, da de ikke var viktige for den helhetlige funksjonen av produktet. Hadde vi hatt mer tid ville vi sannsynligvis greid å implementere flere av disse funksjonene. Derfor mener vi at siden har forbedringspotensiale, og er noe netmongo kan arbeide videre med. Applikasjonen har utviklet seg til noe vi kunne brukt selv. Vi synes den når målene vi satte, både med tanke på funksjon og design. Den er lett å bruke, da de forskjellige alternativene mer eller mindre er 28

29 selvforklarende. Det er heller ikke for mange alternativer for brukeren, slik at han/hun ikke blir forvirret av at det er for mange funksjoner. Samtidig gjør grensesnittet slik at informasjonen fra nyhetsstrømmene blir fremstilt på en svært ryddig måte. Det er enkelt å skille de forskjellige sakene fra hverandre, og det er også lett å se hvilken kilde nyhetsstrømmen kommer fra. 9.2 Eget utbytte Det var spesielt i perioden med prøving og feiling vi lærte veldig mye. Siden jquery var nytt for oss tok det en stund å få til ting slik vi ville. Vi satt ofte fast på det samme problemet i flere dager, mange ganger i løpet av utviklingsprosessen. Selv om vi hadde mye kunnskap innen HTML, PHP og CSS på forhånd, var det en stund siden vi hadde jobbet med det. Derfor var repetisjonen vi fikk når vi jobbet med dette prosjektet gull verdt. Etter vi hadde kommet oss inn i språkene igjen, gikk det relativt fort å sette seg inn i de nye funksjonene som har blitt implementert. Hadde vi hatt mer kunnskaper om programmeringsspråkene, og utvikling til håndholdte enheter på forhånd, ville applikasjonen blitt konstruert både raskere, og med høyere kvalitet. Vi løste derimot oppgaven på en god måte, og kom frem til ett resultat vi er fornøyd med. Det er ikke bare fra programmeringsdelen vi har lært noe av dette prosjektet. Prosjektstyring har også vært viktig under hele perioden. Prosjektstyringen har vist oss hvor mye det hjelper å ha struktur på det vi gjør. Det har også vist seg at det er enkelt å jobbe når vi har planer for hva vi skal gjøre, og når det skal gjøres. Samtidig har vi fått innblikk i hvor mye det betyr med god dokumentasjon. Vi har også lært mye om det å jobbe sammen. Prosjektets størrelse krevde at vi måtte ta det veldig seriøst allerede fra begynnelsen. Innad i gruppen fungerte vi nesten som en ordentlig bedrift. Vi fordelte arbeidsoppgaver etter gruppemedlemmenes styrker, men alle var innom det meste. Dette gjorde at vi fikk så mye ut av gruppens samlede kompetanse som mulig. Avhengig av hva slags arbeid vi kommer til å jobbe med i fremtiden, kan mye av det vi har lært i forbindelse med dette prosjektet være relevant. Selv om vi ikke kommer til å jobbe med utvikling, er 29

30 det nyttig å ha vært med på utviklingen av et relativt komplisert system. Samtidig er det alltid greit å ha ferdigheter innen HTML, PHP og JavaScript. Dette er teknologier som har kommet for å bli, og vi vil kunne bruke kunnskapen til webutvikling senere. Produktdokumentasjon Hovedprosjekt 2011 Høgskolen i Oslo Gruppe 24 Tore Holmboe (s155547) Vegard Kamben (s148147) Anders Fohlin Kjøde (s155551) Haakon Nygård (s155535) Stian Pettersen (s144449) 30

31 en RSS-leser på tvers av touchenheter 1 Forord Dette dokumentet tar for seg produktdokumentasjonen for myfeed. Dokumentet er i hovedsak forbeholdt de som skal drifte og videreutvikle-/vedlikeholde applikasjonen. Det forventes derfor at leseren har grunnleggende forståelse for webprogrammering. 2 Innhold 1 Forord Innledning Beskrivelse av applikasjonen Teknologier Rammebetingelser Utviklingsmiljø Nettlesere og enheter Beskrivelse av teknologier HTML CSS PHP JavaScript jquery AJAX mysql Beskrivelser av verktøy Dreamweaver CS Photoshop CS FileZilla

32 4.5.4 Microsoft Word 2007 / Open Office Microsoft Projects ipad- / iphone-emulator Datastrukturer og oppbygging Arkitektur Databasestruktur Tabellforklaringer bruker feed bruker_feed admin Beskrivelse av applikasjonen Generell beskrivelse Navigasjonsmodell Startoppsett Navigasjon Faner Show/Hide Steg 1: Verktøybar Steg 2: Brukerregistrering og login Steg 3: Valg av RSS-feeds Steg 4: Bekreftelse og e-post Steg 5: Bruk av RSS feeds RSS Leseren Steg 6: Redigering av feeds Administrasjonssystem Beskrivelse av administrasjonssystem Navigasjonsmodell Startoppsett Navigasjon brukere slette brukere legge til adminbruker feeds slette feeds legge til feeds standard oppsett slette standard oppsett

33 7.13 legge til standard feed logg ut Oppbygging og virkemåte Brukergrensesnitt og design for myfeed Førsteutkast brukergrensesnitt Andreutkast brukergrensesnitt Endelig brukergrensesnitt Ikoner Mappestruktur Sikkerhet Sikkerhet i applikasjonen Krav til miljøet Krav til server Krav til enheter Fremtidige utvidelser og forbedringer Alternativer for myfeed Swipe funksjonalitet Integrasjon med Google s søkemotor Flerkildevisning Drag & Drop

34 3 Innledning 3.1 Beskrivelse av applikasjonen myfeed er en RSS-leser for ulike touch-enheter. Hensikten med denne applikasjon er å gi brukeren et samlingssted for de mest populære RSS-feeds nordmenn bruker ute på weben. Brukeren skal selv kunne velge om han vil ha et standard oppsett av RSS-feeds, eller om han vil sette opp sitt eget oppsett ved å registrere en bruker. Standard oppsettet som er satt opp inneholder noen få RSS-feeds i hver kategori; nyheter, teknologi, sport, vær, underholdning og spill. Når brukeren registrerer seg blir han bedt om å velge hvilke RSS-feeds han vil ha i sitt oppsett. Brukeren har senere mulighet til å legge til flere eller slette RSS-feeds fra sitt oppsett. 4 Teknologier 4.1 Rammebetingelser Vår arbeidsgiver hadde noen krav til type teknologi. Dette skulle være en fremtidsrettet applikasjon, og vi skulle dermed kun bruke teknologier som akkurat er kommet ut, eller som kommer snart. Dette inkluderte HTML5, CSS3, PHP og jquery 1.5. Ellers sto vi fritt til å bruke annen teknologi om dette ble nødvendig. Rammeverket vi skulle benytte var IO som er netmongo sitt eget webutviklings rammeverk. Da disse teknologiversjonene er nye og flere av dem ikke ferdig utviklet enda, satte dette store krav til gruppa. Vi måtte sette oss inn i alle teknologiene å lære oss hvordan vi skulle bruke dem til å utvikle med. Særlig utfordring var det med jquery og IO som ingen av oss hadde vært borti før. 34

35 I tillegg til nevnte teknologier brukte vi også AJAX ved utvikling av selve RSS-leseren. 4.2 Utviklingsmiljø Som utviklingsprogram benyttet vi Dreamweaver CS5 til all programmering. Photoshop CS3 og CS5 ble brukt sammen med Dreamweaver for å lage alt designet på siden. Vi benyttet PHP MyAdmin for å utvikle databasestrukturen. Dette er et webbasert program for enkel opprettelse og vedlikehold av databaser. Dreamweaver er det programmet vi brukte til det meste. Vi valgte å bruke Dreamweaver CS5 fordi det er et avansert program med mulighet for utvikling i alle moderne teknologier. Vi var også i større eller mindre grad vant til å jobbe i dette programmet fra før. 4.3 Nettlesere og enheter En webapplikasjon kan brukes av mange forskjellige nettlesere og enheter, det er derfor viktig at den fungerer optimalt over et vidt spekter av programmer og enheter. Dette er alltid en stor utfordring da forskjellige enheter og programmer ofte er utviklet på forskjellige måter, og vil derfor tolke applikasjonen din ulikt. Vår fokus ligger på bruk fra enheter, da særlig touch baserte. Men vi har også testet og gjort den brukbar for følgende nettlesere; Internet Explorer 9.0, Firefox 3.6.x og Firefox 4.x. Google Chrome 11.0, Opera 11.x, og Safari 5.0. Det er bare de aller nyeste nettleserne som klarer å tolke applikasjonen vår. Dette er rett og slett fordi teknologien vi bruker er så ny at eldre nettlesere ikke er laget for å klare å tolke den. Slik må det bare være da en eventuell kompatibilitet til eldre nettlesere vil kreve at vi bruker eldre teknologi, noe som oppdragsgiver ikke tillater som vist under rammebetingelser. Applikasjonen er optimalisert for følgende enheter; HTC Android 2.x, LG Android 2.x, Samsung Android 2.x, iphone, iphone 3GS og iphone 4. ipad, ipad 2 og Galaxy TAB. Web-applikasjonen er testet og optimalisert for nyere versjoner av Android, OSX og Windows. Det vil si at også senere versjoner av nevnte plattformer vil støttes. Den eneste testenheten vi ikke har fått til å teste med er Win7 Mobile, men nettleseren på denne plattformen er en versjon av Internet Explorer 9, og skal i teorien fungere. 35

36 4.4 Beskrivelse av teknologier For at vi skal kunne komme fram til en løsning på problemet vårt ved å bruke nettappen på ulike operativsystem, var det en nødvendighet å bruke det nyeste innen programmeringsteknologier. For å gjøre dette måtte vi først sette oss inn i disse teknologiene. Ingen av gruppemedlemmene hadde vært borti disse nye versjonene av programmeringsspråk som vi nå skulle bruke. Dette medførte at mye av arbeidstiden vår gikk til å lære hvordan vi skulle operere med disse teknologiene HTML 5 HTML står for Hypertext Markup Language og benyttes for å strukturere informasjon på en nettside. HTML5 er den nyeste instansen av dette språket og blir mer og mer brukt på nettet i dag. HTML5 er fortsatt under utvikling og det vil enda være mange år til det blir den anbefalte standarden innenfor webutvikling. Et av hovedmålene til HTML5 er å minimere behovet for tredjepartsapplikasjoner som Adobe Flash player og QuickTime. Dette gjøres ved implementasjonen av video-tagen. HTML5 har også mer støtte for mobilapplikasjoner og tjenester, som geolokasjon. HTML5 legger det strukturelle grunnlaget for webapplikasjonen vår CSS3 Cascading Style Sheets (CSS) er et språk som benyttes til å definere utseende på filer skrevet i HTML. CSS3 er den nyeste utgaven av CSS, og er fortsatt under utvikling. Den nye iterasjonen byr på flere nye effekter og verktøy for å forme fremtidens websider og webapplikasjoner PHP PHP er et skriptspråk laget for webutvikling. PHP er den nyeste versjonen og ble lansert 15. mars PHP blir kodet inn sammen med HTML-dokumentet, men tolkes først på webserveren. Vi benytter PHP ved login, sessions, RSS-variabler og ellers all kontakt mellom applikasjonen og databasen vår JavaScript JavaScript benyttes til å legge til dynamisk funksjonalitet på nettsider. Dette er i form av kode som kjøres lokalt, enten ved lasting av siden eller ved en eller annen form for brukerinteraksjon. Vi har blant annet brukt standard JavaScript ved mouse over-effekten på RSS-ikonene. Noe som gir brukeren en god respons ved klikk jquery 1.5 jquery er et JavaScript bibliotek som bygger videre på det JavaScript allerede kan gjøre, og gir det 36

37 flere muligheter. Det er også brukervennlig laget, og relativt lettere enn standard JavaScript. jquery er det skriptet vi har benyttet absolutt mest i denne applikasjonen, og står for det meste av funksjonaliteten. Vi bruker jquery funksjoner til å vise navigasjon, lage verktøybar, kollapse og utvide forskjellig innhold, lage popup-vinduer og klikk-reaksjoner med mer AJAX AJAX står for Asynkron JavaScript og XML og er en webutviklingsteknikk for å lage dynamiske nettsider. Vi benytter AJAX i selve RSS leseren mysql mysql er et SQL basert databaseadministrasjonssystem. Dette er systemet vi bruker i vår database IO IO-rammeverket er et rammeverk utviklet av netmongo. Tanken bak IO var at det skulle bli lettere å utvikle nettløsninger med forskjellige programmeringsspråk. IO er ett MVC (Model-View-Controller) rammeverk, det vil si at det er konstruert etter et bestemt mønster. IO har en egen ORM (Object- Relational Mapping) logikk. ORM er en programmeringsteknikk som brukes til å konvertere data mellom inkompatible datatyper i objekt-orientert programmering. Alt dette er gjort med tanke på dagens muligheter med HTML5, CSS3 og JavaScript. IO er komponentbasert, og dette gjør at det er lett å bruke sammen med andre typer open source løsninger. netmongo har også konstruert en egen IO-template, IOml. Template-systemet gjør så det blir lett å generere HTML5 sider, med avansert JavaScript-logikk for kommunikasjon med server, for eksempel Ajax. IO har i utgangspunktet blitt satt opp for å bruke netmongos egen database, MongoDB. Derimot kan enkelt settes opp slik at det fungerer med andre relasjonsdatabaser, for eksempel MySql. IO sin største styrke er at det fungerer godt sammen med andre open source-biblioteker. Det er for eksempel veldig lett lå bytte ut IOml med Smarty. IO er ikke ferdig enda, men vil bli open source når det når versjon

38 4.5 Beskrivelser av verktøy Dreamweaver CS5 Dreamweaver er verktøyet vi har brukt til all programmering av applikasjonen. Alle programmeringsspråkene vi har brukt, er skrevet i Dreamweaver Photoshop CS3/CS5 Photoshop ble brukt til å sette sammen designet til applikasjonen. Programmet ble brukt til å lage skisser av layout, samt den endelige layouten. Ikoner som var med i brukergrensesnittet ble også laget fra grunnen av ved hjelp av Photoshop. I tillegg til dette brukte vi programmet til generell redigering av bilder. 38

39 4.5.3 FileZilla FileZilla er et FTP-program. Dette programmet brukes til å overføre filer fra datamaskinen til serveren som ligger på web Microsoft Word 2007 / 2010 Microsoft Office pakken. Microsoft Word er et tekstebehandlingsprogram. Det brukes til å komponere og / eller redigere dokumenter Open Office Open Office er et gratis alternativ til Microsoft Office pakken. Open Office inneholder tilsvarende programmer som Office. Dette inkluderer tekstbehandlingsprogram, program for å lage presentasjoner, samt program for å lage og bruke regneark. 39

40 4.5.6 Microsoft Projects 2010 Microsoft Projects er et prosjektstyringsprogram. Det er en del av Microsoft Office pakken. Det er laget for å hjelpe prosjektledere med å holde oversikt over prosjekter, delegere arbeidsoppgaver, styre budsjetter og passe på arbeidsmenger ipad- / iphone-emulator Vi har brukt en kombinert ipad- / iphone-emulator kalt ibbdemo2. Denne er utviklet av Blackbaud labs ( og kjøres på Adobe Air. Dette var en nødvendighet for oss i og med ingen av gruppemedlemmene eier eller har tilgang til en ipad eller iphone. 40

41 5 Datastrukturer og oppbygging 5.1 Arkitektur På bildet under kan du se dataflyten på webapplikasjonen vår. Dette er standard arkitektur for webapplikasjoner. Figur Arkitektur 5.2 Databasestruktur All data som hentes opp i applikasjonen er lagret i en database. Databasen består av tre tabeller og er illustrert i bildet under. Figur Databaserelasjoner 41

42 5.3 Tabellforklaringer bruker Tabellen bruker inneholder info om registrerte brukere. Feltene som er brukt i denne tabellen er brukernr, brukernavn, passord og kjonn (kjønn) feed Tabellen feed inneholder info som viser RSS-feeds på siden. Tabellen består av rssnr, rssnavn, rsskategori og rssurl. Feltet rssurl er unikt slik at det ikke er mulig å lagre flere feeds til samme adresse bruker_feed Denne tabellen kobler sammen bruker og feed slik at det blir mulig å liste ut hvilke RSS-feeds hver enkelt bruker har admin Tabellen admin inneholder adminbrukere. Feltene som er brukt i denne tabellen er brukernavn og passord. 6 Beskrivelse av applikasjonen 6.1 Generell beskrivelse MyFeed er en RSS-leser for ulike touch-enheter. Hensikten med denne webapplikasjon er å gi brukeren et samlingssted for de mest populære nyhetene ute på weben. Innholdet er fokusert for bruk av nordmenn. 42

43 6.2 Navigasjonsmodell Startoppsett Velg RSS feed å vise Verktøybar Login/Brukerreg Rediger Feeds Info Alternativ er Velg Feeds Bekreft og bruk Figur Navigasjonsmodell for myfeed E-post bekreftelse v/brukerreg Figur viser flyten i applikasjonen. Brukeren vil få et forhåndskonfigurert startoppsett med noen populære nyhetsstrømmer ved første innlogging. Det er fullt mulig å benytte seg kun av denne og dermed allerede velge hvilken RSS-feed man vil se nyheter fra. Verktøybaren nederst på siden blir så videre benyttet for mer funksjonalitet. Her får du opp popup-bokser med info og alternativer, man kan velge å logge inn eller registrer ny bruker, eller redigere feeds om man er innlogget allerede. Etter man har registrert en bruker må man sette opp de nyhetsstrømmer man ønsker å ha tilgang til. Dette hentes opp fra en database. Videre må dette bekreftes, både om du er ny bruker eller om du bare skal redigere. En e-postbekreftelse med brukerregistreingsinformasjon blir sent til brukerens spesifiserte e-post ved opprettelse av ny bruker. Det er også mulig å gå tilbake til tidligere sider i alle ledd av programmet. 43

44 6.3 Startoppsett Figur Startoppsett (ipad) I figur vises standardoppsettet til myfeed applikasjonen. Her ser du navigasjonen øverst med noen utvalgte nyhetsstrømmer man kan velge, og menylinjen åpnet opp nederst. Ved å trykke på et av bildene av de populære nyhetskildene vil du starte RSS-leseren, og den tilknyttede nyhetsstrømmen vil vises på skjermen. Størrelsen på brukergrensesnittet vil variere fra enhet til enhet. Dette bildet er tatt fra en ipad. Oppsettet kan endres av en administrator via admindelen som er beskrevet i punkt Navigasjon 44

45 Figur Navigasjonen(iPad) Navigasjonen er delt inn i faner over de forskjellige kategoriene som er tilgjengelige. Under hver fane vises bildene til de ulike nyhetsstrømmene som er spesifisert. Valgt fane vises ved at fargen skiftes til hvit. Man navigerer videre ved å trykke på fanen man vil se på. Listen med bilder over nyhetsstrømmer kan lukkes sammen med Show/Hide knappen under navigasjonen. Dette er særlig nyttig for små enheter som for eksempel iphone som ikke har mye plass til innhold Faner Linjen med faner er laget med JavaScript, jquery og CSS lagt inn i PHP-skript for å kommunisere med databasen, så vi vet hvilke kategorier og bilder som skal legges ut. Figur Fane listing i PHP(utdrag) Figur viser et utdrag fra PHP-skriptet som lister ut de valgte fanene i leseren. Den sjekker om brukeren er logget inn, og ser på hvilke kategorier han skal ha fremme, og sammenligner dette med databasen. Div informasjon blir som du ser fra skriptet skrevet inn i PHP-variabler. For å se all kode bak fanene og de opphentede bildene, se vedlegg Show/Hide Vi har lagt til muligheten for å gjemme bildene under navigasjonen, da disse kan ta opp stor plass på små enheter. Et enkelt trykk lukker sammen navigasjonen og et nytt trykk åpner den. Figur Show/Hide funksjon(lukket) 45

46 Denne funksjonaliteten er enkelt laget ved hjelp av jquery og dens.click(function()). Figur Show/Hide funksjon(kode) 6.5 Steg 1: Verktøybar Figur Verktøybar Det første brukeren må gjøre for å benytte seg av mer funksjonalitet enn standardoppsettet tilbyr, er å åpne menylinjen. Denne åpnes ved + ikonet som alltid er å finne nederst til venstre bildet. Den holder seg nederst ved hjelp av CSS egenskapen bottom: 0;. Når knappen trykkes, åpnes menyen ved hjelp av jquery og en liknende.click(function()) som vist i figur Men her må vi i tillegg ha en rekke funksjoner som lages ved hjelp av jquery sin document DOM. Fullstendig kildekode finnes i vedlegg RSS-Redigering Dette er det internasjonale symbolet for RSS(Really Simple Syndication). På menylinjen vår symboliserer dette redigering av dine RSS-nyhetsstrømmer. Ved klikk videreføres du til siden for å redigere dine nyhetsstrømmer. Skulle du ikke være registrert bruker enda vil du bli videresendt til brukerregistreringen. Så det blir i teorien det samme som å trykke på login knappen i det tilfellet. 46

47 Verktøy/Alternativer De aller fleste vil skjønne hva dette ikonet innebærer, og i applikasjonen vår fører denne knappen deg til alternativene for applikasjonen. Ved klikk åpnes et popup-vindu med informasjon. I dette vinduet skal det være mulig å forandre farger og utseende på applikasjonen, samt endring av språk. Dette er dessverre ikke implementert enda i denne versjonen av programmet, men vil komme så fort som mulig. Informasjon Dette er det internasjonale symbolet for informasjon, og er ofte brukt der man kan ha bruk for mer informasjon eller hjelp. Vi skjønner at alle ikke vet hvordan applikasjonen skal brukes ved første øyekast, og at symbolbruken vår ikke er selvforklarende for alle. Ved klikk på informasjonsboksen vil brukeren få opp et popup-vindu som beskriver kort hva denne applikasjonen er, samt å forklare hvordan man skal gå frem for å bruke den. Figur Informasjonsvindu(iPad) Figur viser informasjonsvinduet som vist på en ipad. Det er brukt JavaScript, CSS og iframes for å lage popup-vinduene. Når en trykker på ikonet utløses et JavaScript som åpner vinduet med iframe 47

48 innholdet i. CSS er videre brukt for å manipulere divene som er brukt, slik at de får det ønskede utseende. Figur html kode for infovindu Figur JavaScript kode for infovindu Figurene og viser et utdrag av hvordan infovinduet er kodet. Verktøy/alternativer vinduet er kodet på samme måte, men vi måtte lage en ny instans av alle funksjoner og id-er for å kunne redigere to forskjellige vinduer separat. Fullstendig oversikt over hvordan dette er kodet finner du under vedlegg Steg 2: Brukerregistrering og login Via menylinjen som vi nå har sett på finner vi login-ikonet. Første gangen du bruker denne vil du komme til brukerregistrering. Her bes du fylle inn e-post som blir brukt som brukernavn, passord og kjønn. Kjønn fylles ut på grunn av at vi vil ha muligheten til og senere bruke denne informasjonen til å anbefale forskjellige nyheter ut ifra hvilket kjønn du er. 48

49 Figur Brukerregistrering (ipad) Denne delen er laget med HTML5-forms, som er designet med CSS3. PHP-skript mot databasen kjøres ved fullførelse. Et JavaScript sjekker om brukernavnet er en valid e-postadresse, og om det samme passordet er skrevet inn på begge steder. En varselboks kommer opp på skjermen om passordene ikke stemmer. Figur passordsjekk kode(javascript) Fullstendig kode finnes i vedlegg

50 6.7 Steg 3: Valg av RSS-feeds Neste trinn i registreringen er å velge hvilke nyhetsstrømmer du vil ha tilgang til. Disse lastes opp fra databasen. Figur Valg av RSS-feeds Figur viser listen over nyhetskategoriene. Disse utvides når de blir trykt på, og viser alle feeds i den kategorien. Dette gjøres ved hjelp av JQuery. Figur jquery kode for utvidelse av kategorier 50

51 Denne jquery-koden viser innholdet i den tilhørende div-taggen når den blir klikket på. Innholdet hentes ved hjelp av PHP fra databasen. Figur PHP kode for henting av kategori innhold Fullstendig sammenhengende kode for hvordan dette fungerer finner du under vedlegg Steg 4: Bekreftelse og e-post Figur Bekreftelse og e-post I dette steget får brukeren opp en oversikt over valgene som er blitt tatt. Ved å trykke OK bekreftes informasjonen, og den blir lagret i databasen. En bekreftelses e-post blir sendt til e-postadressen ved hjelp av følgende kode: 51

52 Figur PHP-kode for bekreftelsesmail Brukeren vil få en e-post med teksten Din bruker hos myfeed er registrert! Velkommen til oss. All informasjon som ble skrevet inn i registreringsprosessen blir sendt i e-posten. 6.9 Steg 5: Bruk av RSS feeds Etter registrering og oppsett av nyhetsstrømmer kan du nå starte og bruke din egendefinerte myfeed-applikasjon. Husk at vi har et startoppsett som alle kan bruke uten registrering, se del 6.3. Figur RSS Leser i bruk(ipad) Figur viser nyhetsstrømmen fra nrk.no. Denne startes ved at brukeren trykker på NRK-ikonet øverst i navigasjonen. jquery document.click(function()) som vi har snakket om før kalles og AJAX kode utføres. Touch-enheter bruker fingeren til å rulle siden nedover eller oppover. På datamaskiner kan man bruke mouse scroll, eller scroll baren på siden av skjermen. 52

53 Figur jquery og PHP utfører kall på valgt nyhetsstrøm I figur ser vi samme.click(function()) som vi har brukt tidligere, men med en svært nødvendig forandring. Her bruker vi PHP for å finne riktige nyhetsstrømmer ut fra databasen, og ut ifra hvilken bruker som er innlogget osv. Vi bruker PHP for å skrive inn JavaScript-variabler i jquery-funksjonen. Til sammen gjør dette at RSS-leseren får inn riktig input ut ifra hvilket bilde som blir trykt, og kan skrive ut riktig nyhetsstrøm på skjermen RSS Leseren Selve leseren er skrevet i jquery og er basert på open source-leseren fra Zazar.net. Den benytter google sin API for å hente og lese RSS-filer. Den er designet og formatert ved hjelp av CSS3. Den er programmert til å ta imot en url i form av variabelen rss, som er definert i selve HTML-dokumentet som vist i figur Resten av skriptet er en ekstern JavaScript-fil og er inkludert i head-seksjonen av web-applikasjonen. Skriptet har en rekke funksjoner. Den bestemmer hvilke deler av RSS-informasjonen som skal vises, begrenser antall nyhetslinjer som er fremme om gangen, og hvordan de forskjellige delene skal vises på skjermen. 53

54 Figur jquery hovedfunksjon for RSS-leser Skriptet kan redigeres etter behov, men vi føler at den fungerer meget tilfredsstillende slik den gjør i dag. Sammen med den enkle formateringen i skriptet, står CSS3 for det øvrige utseende. Figur Utdrag av CSS for RSS-leseren All sammenhengende kode finnes under vedlegg 12.2 og CSS-informasjon under myfeed.css i vedlegg

55 6.10 Steg 6: Redigering av feeds Når du har registrert din bruker og begynt å bruke applikasjonen, kan det hende at du angrer på de nyhetsstrømmene du har valgt, eller vil legge til noen flere. Dette kan gjøres fra menylinjen, med RSS-ikonet. Du vil få opp en ny oversikt over alle tilgjengelig nyhetsstrømmer, og kan velge hvem du vil legge til. Figur Redigering av RSS-feeds (ipad) Videre på siden har du mulighet for å slette dine allerede valgte feeds. Disse hentes opp fra databasen, filtrert på ditt brukernavn. Figur Sletting av RSS-feeds (ipad) 55

56 Når brukeren velger de nyhetsstrømmene som skal fjernes kjøres et PHP-skript med mysql kode som endrer innholdet i databasen. En bekreftelsesmelding vises om det valgte innholdet ble slettet eller ikke. Brukeren sendes så videre tilbake til hovedsiden av applikasjonen automatisk. Figur PHP og mysql kode for sletting av feeds Figur viser et utdrag av koden som er benyttet for å slette feeds. Se vedlegg for fullstendig kodeskildring. 7 Administrasjonssystem 7.1 Beskrivelse av administrasjonssystem myfeed har et administrasjonssystem som er forbeholdt de som skal drifte applikasjonen, og er ikke optimalisert for touchenheter. Hensikten med dette systemet er å få en oversikt over alle brukere og innholdet på applikasjonen på en enkel måte. Driftansvarlig har også mulighet til å endre innholdet og slette brukere. Standardoppsettet som er på applikasjonen kan endres her. Administrasjonssystemet krever innlogging. Innloggingsinfo: Brukernavn = admin Passord = qwerty 56

57 7.2 Navigasjonsmodell Figur Navigasjonsmodell for myfeeds administrasjonssystem Figur viser flyten i administrasjonssystemet der amdinistrator kan vedlikeholdet myfeedapplikasjonen. 7.3 Startoppsett Figur7.3.1 Startoppsett På figur kan du se startoppsettet på administrasjonssystemet. Det kreves innlogging for å få tilgang til dette systemet. Ingen av lenkene på navigasjonsbaren fungerer før administratorbruker er logget inn. 57

58 7.4 Navigasjon Figur Navigasjonsbar Navigasjonsbaren er delt inn i blokker med kategorier for hva administrator kan redigere på. Den er laget helt enkelt ved hjelp av HTML og CSS. Når man holder pekeren over kategoriene, så kommer underkategoriene opp som vist i Figur brukere Lister alle brukere som har registrert seg i databasen. Figur Listing av alle registrerte brukere 7.6 slette brukere Her listes alle brukere in en checklist. Du huker av de brukerne som skal slettes og trykker slett nederst på siden som vist på figur Figur7.6.1 Sletting av brukere 58

59 7.7 legge til administratorbruker Du kan legge til flere administratorbrukere her. Figur Legge til ny administratorbruker 7.8 feeds Lister ut en oversikt over alle feeds i databasen fordelt på kategorier. Figur Listing av alle feeds 59

60 7.9 slette feeds Lister ut alle RSS-feeds lagret i databasen i en checklist. Som på slette brukere, huker du av alle feeds som skal slettes. Figur Sletting av feeds 7.10 legge til feeds Du kan legge til nye feeds i databasen som vist på Figur Bilder som lastes opp på serveren må være av typen.png. Applikasjonen vår krever at bildene til hver feed har det samme navnet som RSSnavnet bare med endingen 1.png. Dette blir ordnet som vist øverst i figur Figur Legge til ny RSS-feed 60

61 Figur Del av kode for opplasting av RSS-feeds 7.11 standard oppsett Standard oppsettet på myfeed applikasjonen kan du se her. Det er dette oppsettet som uregistrerte brukere ser. Figur Standard oppsettet til myfeed 61

62 7.12 slette standard oppsett Her har du mulighet til å slette RSS-feeds fra standard oppsettet. Disse slettes på samme måte som brukere og RSS-feeds. Figur Sletting av feeds for standard oppsettet 7.13 legge til standard feed Her kan du legge til flere RSS-feeds til standard oppsettet. Figur Legge til standard feeds 7.14 logg ut Logger naturligvis administrator ut av systemet. 62

63 8 Oppbygging og virkemåte 8.1 Brukergrensesnitt og design for myfeed Vi startet å jobbe med design av brukergrensesnitt tidlig i prosjektprosessen. Grunnen til dette var at vi ville ha et overblikk over hvilke funksjoner som måtte på plass for å oppnå det visuelle inntrykket vi var ute etter Førsteutkast brukergrensesnitt Det aller første utkastet til brukergrensesnittet ble laget veldig tidlig i prosjektprosessen. Dette var mer en utforskingsfase for å prøve å finne noe som var spennende å se på, samt enkelt å bruke. Her brukte vi bare to områder på skjermen, et område for å velge forskjellige feeds (1.) og et område for å lese feeden som er valgt (2.). Figur Førsteutkast brukergrensesnitt Problemet med dette brukergrensesnittet er at der ikke så mye mer en kan gjøre enn å velge mellom noen forskjellige feeds og lese de. Dette ville ha først til at en bruker mest sannsynlig hadde benyttet applikasjonen en gang og ikke mer. Vi måtte lage et brukergrensesnitt som beholdt den enkle stilen, samtidig som den hadde alle nødvendige funksjoner. 63

64 8.1.2 Andreutkast brukergrensesnitt Det andre utkastet til layout ble ferdig relativt tidlig i prosessen. Det var dette brukergrensesnittet vi følte var riktig og vi baserte de senere valgene våre på dette. Layoutet er enkelt fremstilt med bare tre ulike områder; feederbar, feed og verktøybar. Dette brukergrensesnittet oppfylte våre krav om simpelhet og funksjon på samme tid. Feederbaren er liten og er plassert helt i toppen av skjermbildet. Feeden er stor og plassert i midten av skjermbildet. Verktøybaren er liten og plassert helt i bunnen av skjermbildet. Dette fører til at brukeren fokuserer på det som er viktig, nemlig feeden. Figur Andreutkast brukergrensesnitt Sammen med skissen av brukergrensesnittet hadde vi i tillegg skrevet litt informasjon om de ulike feltene som er inkludert; 64

65 1. Feederbar. Her ligger alle feeds som er lagt til. En kan scrolle seg mot høyre og venstre. En kan også gjemme/vise den etter ønske. For å lese av en feed, trykker en på den respektive logoen. 2. Feed. Her kommer selve feeden frem. Den består i hovedsak av ulike saker. En sak inneholder en overskrift, en beskrivelse samt media om dette ligger i feeden. En kan scrolle nedover og oppover for å se på flere saker. Trykker en på en sak kommer en videre til saken på de respektive nettsidene. 3. Verktøybar. Denne baren er til for å administrere leseren. Den inneholder fire punkter: Legg til ny feed (+). Når en trykker på denne knappen, vil det poppe opp en boks hvor du kan skrive inn url til RSS-feed. Denne blir da lagt til i feederbaren. Innstillinger (verktøy). Redigerer diverse innstillinger. Dette vil bli bedre definert senere. Hjelp (?). En trykker her for hjelp og bruksanvisning. Logg inn/ut (person). En trykker her for å logge inn eller logge ut. De svarte pilene viser til hvilken veier man kan scrolle seg til ved hjelp av touch Endelig brukergrensesnitt Det endelige brukergrensenittet inneholder noen få forandringer fra det andre utkastet. Vi har lagt til en kategoribar over feederbaren vår. Den gjør det enklere for en bruker å navigere seg fram til de ulike RSS-feedene. Vi har i tillegg lagt på en bakgrunn med logoen vår på. Brukergrensesnittet er nå enkelt å bruke, intuitivt samt estetisk pent. Dette var akkurat det målet vi satt oss før vi startet å jobbe med produktet. Skjermbildene her viser en skjermdump fra Google Chrome vist på en PC. 65

66 Figur Brukergrensesnitt på pc Figur viser brukergrensesnittet når brukeren leser feeden fra NRK. Han/hun har gjemt feederbaren og verktøybaren. 66

67 Figur Leservisning med navigasjon og menylinje lukket Ikoner VI bestemte oss for å lage egne ikoner til bruk i grensesnittet. Det var fire forskjellige knapper vi skulle lage: Legg til RSS Innstillinger Hjelp / informasjon Logg inn / logg ut Vi ville lage enkle ikoner som var intuitive, så brukeren selv forstår hva de forskjellige knappene betyr. Vi ville oppnå dette ved å bruke tegn som er lett gjenkjennelige for alle. Dette førte med seg en del prøving og feiling på å finne de rette ikonene. 67

68 Førsteutkast ikoner Figur Førsteutkast ikoner Når vi lagde det første utkastet til ikoner i verktøylinjen ville vi prøve å finne fram til symboler som ville vise hva knappene gjorde uten at tekst var nødvendig. Pluss (+) er brukt for å illustrere at brukeren kunne legge til feeds. Dette tenkte vi var logisk ved at et plusstegn illustrerer flere Innstillinger er illustrert ved bruk av et skrujern og en skiftenøkkel. Dette er en stil som ofte blir brukt i IT-systemer. Folk vil derfor kunne synes dette er intuitivt Symbolet for hjelp / info er illustrert med et spørsmålstegn. Spørsmålstegn illustrerer et spørsmål, derfor er det logisk for brukeren å trykke på denne knappen om han/hun lurer på noe angående systemet Logg inn / logg ut viste seg å være veldig vanskelig å illustrere ved hjelp av symboler. Etter å ha forsket lenge på hvilke symbol som oftest blir bruk til dette formålet, kom vi fram til at det ikke finnes en standard. Det nærmeste vi kunne kommer var en dør, et nøkkelhull eller en person. Vi gikk tilslutt for en person som vinket Andreutkast ikoner Figur Andreutkast ikoner Det andre utkastet for ikoner ble laget fra grunnen av i Photoshop. En kan se at det har blitt gjort noen forandringer i forhold til førsteutkastet. Dette ble gjort i forhold til enkle brukertester vi utførte på medelever. 68

69 Vi byttet ut legg til feed-ikonet vårt med et RSS-symbol. Vi følte dette var mer logisk for en bruker Vi byttet ut spørsmålstegnet med et informasjonssymbol. Dette er et internasjonalt intuitivt symbol for hjelp og informasjon VI byttet ut symbolet av en vinkende person med å skrive log in/log out. Grunnen til dette var at det viste seg gjennom brukertester at en bruker ikke forsto hva knappen betydde. I stedet for å prøve andre symboler, brukte vi enkelt og greit skrift Vi la på farger og bakgrunner på ikonene så de skulle se stilige ut Endelige ikoner Figur Endelige ikoner Det endelige settet med ikoner ble ferdig etter flere brukertester. Tilbakemeldingen vår fra det andre utkastet gikk i hovedsak i estetikken til ikonene. Bakgrunnen rotet til inntrykket, samtidig som det ikke var noen form for baktanke bak fargebruken. I den endelige versjonen renset vi opp ikonene. De er nå enklere og mer stilrene. De har nå fått et Web2.0-preg over seg. I tillegg til dette har vi gjort litt forskning på hvilken farger som fungerer sammen, og kom fram til en god løsning. Vi har også valgt å legge til register på login-knappen. Grunnen til dette er brukeren da enkelt forstår at det er denne knappen han / hun skal bruke for å registrere seg i databasen. Tilbakemeldingene fra medelever var så god at vi valgte og ikke gjøre flere endringer på ikonene. 69

70 8.2 Mappestruktur Figur Mappestruktur på webserver Figur viser hvordan webapplikasjonen er bygd opp. Alle skriptfiler er separert og lagt i sin egen mappe. Samme gjelder rene PHP-skript som vi har lagt under inc-mappen. Dette står for includes og blir inkludert i mange av PHP-sidene der det er snakk om å kobles sammen med databasen. Alt som har med administratordelen av programmet å gjøre er plassert under mappen admin. 70

71 Figur Mappestruktur under administratordelen 9 Sikkerhet 9.1 Sikkerhet i applikasjonen Sikkerheten i applikasjonen er forbeholdt brukerregistrering og innlogging. Passord som skal lagres i databasen blir kryptert slik at det ikke vises i klartekst i databasen. Krypteringen som er brukt er SHA-1. SHA står for Secure Hash Algoritm, og er en samling av kryptografiske sjekksum-funksjoner som er designet av National Security Agency (NSA). Brukernavn og kjønn etc. blir lagret i klartekst. Figur Kryptering av passord Alle felt i webskjema der brukeren kan skrive inn noe direkte er sikret mot SQL injection (farlig kode som kan skade databasen). Se figur for kode. Figur Kode som hindrer SQL injection. 71

72 For å unngå dobbeltlagring av brukernavn, har vi laget et skript som sjekker databasen om brukernavnet er tilgjengelig før den nye brukeren blir lagret. Figur viser hvordan. I tillegg har vi brukt e-postadresse som brukernavn. Dette er på grunn av at alle e-postadresser er unike. Figur Kode som sjekker om brukernavnet er opptatt. 10 Krav til miljøet 10.1 Krav til server For at applikasjonen skal kunne kjøres på en server kreves det kommunikasjon med en MySQLdatabase. Serveren er nødt til å være PHP-kompatibel Krav til enheter Teknologien som er brukt på applikasjonen er såpass ny at den krever de nyeste nettlesere som er tilgjengelige. For eksempel så fungerer ikke applikasjonen på Internet Explorer 8 eller eldre. Enhetene må også støtte bruk av iframes. 11 Fremtidige utvidelser og forbedringer 11.1 Alternativer for myfeed Alternativer for myfeed under verktøy, mangler på applikasjonen. Her var det meningen å gi brukeren muligheten til å endre utseende, samt å endre språket til engelsk. Grunnet tidsmangel ble ikke dette punktet med på applikasjonen. Dette har heller ingen innvirkning på funksjonaliteten Swipe-funksjonalitet Alle touch-enheter skal i neste instans av applikasjonen ha mulighet for å bruke touch-funksjonalitet til det fulleste. Dette skal vi gjøre ved å implementere touch swipe-funksjonalitet som lar brukeren bytte nyhetsstrøm ved å dra fingeren til enten venstre eller høyre. Videre skal dette også implementeres på navigasjonsmenyen, slik at du kan dra over skjermen for å bytte kategorivisning. Vi 72

73 har foretatt flere tester på dette, men det viste seg mye mer vanskelig en først antatt. Det er veldig mange variabler å ta hensyn til når noe sånt skal programmeres for en webapplikasjon. Vi trenger derfor mer tid til testing og utprøving før denne funksjonaliteten er i drift Integrasjon med Google s søkemotor Vi ønsker å få til integrasjon med Google sin RSS-søkemotor. Dette kan la deg søke på en bestemt nyhetstype eller kategori. En liste med feeds kommer opp fra Google sin søkemotor. Bruker kan velge de han vil abonnere på, og disse blir lagt til i vår database. Dette oppfyller det femtidige målet vårt med at brukeren kan på en enkel måte legge til sine egne nyhetsstrømmer i databasen Flerkildevisning Det skal i fremtiden være mulighet for visning av flere kilder samtidig i samme nyhetsstrøm. Dette går ut på at man kan lage en egen kategori der man kan få opp en eller to nyhetssaker per kilde, og være flere kilder på samme nyhetsstrøm om et bestemt evne Drag & Drop En spennende interaktiv funksjonalitet som skal komme i en fremtidig versjon er muligheten for drag and drop funksjon. Brukeren vil få muligheten til å dra bildeikonene rundt på navigasjonen, for å bytte plassering på dem. Det vil også gå an å slippe bildene utenfor navigasjonen for å slette dem. Dette gir deg et interaktivt alternativ for å slette dine feeds. Den samme funksjonaliteten ønskes på kategorifanen, brukeren kan dra i fanene for å skifte posisjonen på dem etter eget ønske. 73

74 74

75 Brukerdokumentasjon Hovedprosjekt 2011 Høgskolen i Oslo Gruppe 24 Tore Holmboe (s155547) Vegard Kamben (s148147) Anders Fohlin Kjøde (s155551) Haakon Nygård (s155535) Stian Pettersen (s144449) en RSS-leser på tvers av touchenheter 75

76 1. Forord Dette er en brukerdokumentasjon som gir en innføring i bruk av nettapplikasjonen for brukeren og veiledning for administrator. myfeed er spesielt utviklet for håndholdte enheter med trykkfølsom skjerm, det vil derfor bli tatt som utgangspunkt i denne brukermanualen. myfeed Kan også brukes på en vanlig datamaskin, men funksjonalitet og utseende vil variere. Leseren av denne brukermanualen trenger ingen spesiell forkunnskap innen IT. Ut i fra dokumentasjonen forventes det at brukeren har forståelse med bruk av internett og er kjent med utstyret som brukes. 76

77 2. Innholdsfortegnelse 1. Forord Innholdsfortegnelse Generell bruk Meny Registrering Registreringsskjema Trinn 1/ Trinn 2/3 : Velg hvilke RSS-feeds du vil ha : Trinn 3/3 : Kontroller at informasjonen er korrekt Logg inn Logg ut Instillinger Redigere feeds Informasjon Administrator Logg inn Brukere Liste brukere Brukere slette brukere Brukere - Legge til administrator Feeds Slette feeds Feeds - Liste feeds Feeds - Legge til feeds Standard oppsett - Standard oppsett Standard oppsett - Slette standard feed Standard feeds - Legge til standard feed Logg ut

78 3 Generell bruk Dette er retningslinjer som gir brukeren veiledning for bruk av myfeed. Brukeren kan bruke applikasjonen uten å registrere seg. For å få tilpasset siden til sitt eget bruk vil registrering og pålogging være nødvendig. Velg kategori i menyen lengst oppe i bilde Velg RSS-feed i menyen Trykk Show/Hide for å skjule eller vise menyen Figur 3.1 Forside 78

79 3.1 Meny 1. Menyen på forsiden åpnes ved å trykke nede i venstre hjørne. (Trykk en gang til for å legge ned menyen) 1.Trykk (+) for å åpne menyen Figur Meny 79

80 3.2 Registrering Navigasjon til siden: Login/Register 1. Trykk på linken Ny bruker? Registrer brukerkonto her! for å gå til registrering 1.Trykk her for å komme til registreringsskjema. Figur Registrering 80

81 3.2.1 Trinn 1 av 3: Brukerinfo Navigere til siden: Login/Register Ny bruker? Registrer brukerkonto her! 1. Skriv inn informasjonen som skjemaet spør etter trykk neste 2. Når skjemaet er utfylt trykk på neste Skrives det inn ugyldig informasjon vil skjemat fortelle hva som er galt og be om ny informasjon 2.Trykk neste for å gå videre 1.Skriv inn informasjonen skjemaet spør etter Figur Registreringsskjema 81

82 3.2.2 Trinn 2 av 3: Velg hvilke RSS-feeds du vil ha Her listes en oversikt av RSS-feeds som er tilgjengelig i ulike kategorier. 1. Trykk på kategorien for å vise alle underliggende RSS-feeds 2. Trykk på boksen(ene) ved siden av RSS-feed for å markere 3. Trykk på boksen ved siden av kategorien for å velge alle underliggende RSS-er 4. Trykk på OK for å bekrefte valgt og gå videre til neste steg 1.Trykk på kategorien for å vise underliggende kat 2.Trykk på boksen(ene)for markere RSS 3.Trykk på boksen for å velge alle underliggende RSS-feeds 4.Trykk ok for å bekrefte valg og gå videre Figur Valg av RSS-feeds 82

83 3.2.3 Trinn 3 av 3: Kontroller at informasjonen er korrekt Her listes en oversikt over opplysningene som er gitt og valg av feeds. 1. Trykk OK hvis informasjonen i skjemaet er korrekt. Etter registrering er brukeren automatisk pålogget 2. Trykk Tilbake for å gå tilbake til forrige side og korrigere feil 1.Trykk ok for å fullføre registrering 2.Trykk på tilbake for å komme til forrige side Figur Kontroll av info 83

84 3.3 Logg inn Navigasjon til denne siden: (fra menyen på forsiden) For å logge på er det en forutsetning at brukeren er registrert 1. Skriv inn e-postadresse(brukernavn) og passord 2. Trykk på LOGG INN 2.Trykk LOGG INN 1.Skriv brukernavn og passord Figur Logg inn 84

85 3.4 Logg ut 1. Logg ut ved å trykke i menyen 1.Trykk på Logout ikonet for å logge av Figur Logg ut 85

86 3.5 Innstillinger 1. Trykk på i menyen for å komme til innstillinger 1.Trykk på ikonet Figur Innstillinger 86

87 3.6 Redigere feeds Navigasjon til siden: Denne funksjonen krever at brukeren er registrert og pålogget. Her kan brukeren personliggjøre sin myfeed ved å legge inn nye RSS-feeds i sitt bibliotek og slette fra bibliotek. 1. Marker en hel kategori med alle underliggende RSS-feeds eller marker enkelte RSS-feeds ved å trykke på boksen ved siden av (For å få frem underliggende RSS-feeds trykk på kategorinavn) 2. Trykk på Legg til for legge til valgt(e) RSS-feed(s) 3. Marker kategori/rss-feed ved å trykke på boksen ved siden av (For å få frem underliggende RSS-feeds trykk på kategorinavn) 4. Trykk (SLETT) for å slette markert(e) kategori(er) / RSS-feed(s) 5. Trykk (AVBRYT) for gå tilbake uten å gjøre endringer i RSS-bibliotek 1. Marker kategori/rss-feed ved å trykke på boksen ved siden av 2.Trykk Legg til for å bekrefte valg 3. Marker kategori/rss-feed ved å trykke på boksen ved siden av 4.Trykk Slett for å slette markerte RSS-feeds 5.Trykk AVBRYT for å avbryte uten å gjøre endringer Figur Redigering av RSS-feeds 87

88 3.7 Informasjon Navigere inn på siden: Trykkes vil det komme fram et popup-vindu med generell informasjon om myfeed og ordforklaringer. Trykk på ikonet for å komme inn på info siden Figur Informasjon 88

89 4. Administrator Dette er en veiledning for administrator. 4.1 Logg inn Innloggingsskjema ligger på forsiden av administrator siden 1. Skriv inn brukernavn og passord i tekstboksene 2. Deretter trykk logg inn 1.Skriv inn brukernavn og passord 2.Trykk Logg inn Figur Administrator - logg inn 89

90 4.2 Brukere Navigasjon til siden: brukere liste brukere Her listes alle brukerne som har registrert seg hos myfeed med brukernavn (e-postadresse) og kjønn. Figur Liste brukere 90

91 4.3 Brukere slette brukere Navigasjon til siden: brukere slette brukere Alle registrerte brukere listes og kan slettes. 1. Trykk på boksen ved siden av brukernavn for å markere bruker som skal slettes 2. Trykk på Slett for å slette markert(e) bruker(e) NB! Bruker(e) som slettes, blir permanent borte fra databasen. 1.Huk av boks for å markere bruker. 2.Trykk på Slett for å slette markerte brukere Figur Slette brukere 91

92 4.4 Brukere - Legge til administrator Navigasjon til siden: brukere legg til adminbruker På denne siden kan nåværende administrator legge til nye administratorer. 1. Skriv inn brukernavn og passord i skjemaet 2. Deretter trykk på legg til 1.Skriv inn brukernavn og passord 2.Trykk på legg til Figur Legge til administrator 92

93 4.5 Feeds Navigasjon til siden: feeds Her listes alle RSS-strømmene Figur Liste feeds 93

94 4.6 Feeds Slette feeds Navigasjon til siden: feeds slette feeds 1. Merk RSS-feed for sletting ved å trykke på boksen ved siden. 2. Trykk på Slett knappen for å slette markert(e) RSS-feed(s). 1.Merk RSS-feed ved å trykke på boksen 2.Trykk Slett for å slette markert(e) RSSfeed(s) Figur Slette feeds 94

95 4.7 Feeds - Legge til feeds Navigasjon til siden: feeds legge til feeds 1. Skriv inn RSS-navn, RSS-url og velg RSS-kategori ved å trykke på rullgardin menyen. 2. Trykk på Bla gjennom.. for å velge bilde (NB! Bildefilen må være av typen.png) 3. Bekreft valg ved å trykke Legg til 1.Fyll ut skjemaet. 2.Trykk Bla gjennom.. for å velge bilde 3.Trykk Legg til for å bekrefte valg Figur Legge til RSS-feed 95

96 4.8 Standard oppsett Naviger inn på siden: standard oppsett Her listes standard oppsettet av RSS-feeds som for øyeblikket vises på forsiden av myfeed. Figur Standard oppsett 96