Innholdsfortegnelse: 1. Presentasjon 1.1 Gruppemedlemmer 1.2 Oppdragsgiver 1.3 Veiledere 1.4 Oppgave 2. Sammendrag 3. Dagens situasjon 4. Mål og rammebetingelser 4.1 Rammebetingelser: 4.1.1 Utviklingsmiljø 4.1.2 Metodikk 4.1.3 Testmiljø 4.1.4 Utfordringer Samarbeid: Motivasjon: Tidsfrister: Backup: Kompetanse: 4.2 Mål 4.2.1 Primærmål: 4.2.1 Sekundærmål: 5. Løsninger/Alternativer 5.1 Utvikling back end: 5.1.1 Konklusjon: 5.2 Utvikling front end: 5.2.1 Konklusjon: 5.3 Markedsanalyse 5.4 Produktet 6. Analyse av virkninger Forprosjektrapport 1. Presentasjon
1.1 Gruppemedlemmer Are Almaas Erich Fosse Kenneth Lynne Thore Christian Skrøvseth 1.2 Oppdragsgiver Creuna Joakim Howlid Creuna er Nordens ledene fullservice digitalt firma som bygger merker og hjelper organisasjoner å kommunisere i en digital verden. De har 300 ansatte i Norge, Sverige, Danmark og Finland 1.3 Veiledere Prosjektveileder: Siri Kessel Teknisk veileder: Simen Hasselknippe 1.4 Oppgave Oppgaven vi har valgt å utføre er Studentportalen, en responsiv web-applikasjon som skal revolusjonere hvordan studenter holder seg oppdatert på studier og kommuniserer med hverandre og forelesere. Fokusområder: Det skal være mulighet for forelesere og studenter å laste opp/dele instruksjonsvideoer som de har laget selv eller funnet andre steder (eks. YouTube). I tillegg til multimediaundervisning skal det være enkelt for forelesere og studenter å kommunisere via kommentarfelt, chat og forum. Viktige og tidssensitive beskjeder, som avlyste forelesninger, kan sendes via SMS til berørte studenter fra web-appen av forelesere. Det skal implemesteres OAuth for at man skal kunne logge på med Google/ Facebook/Twitter konto. Web-appen skal jobbe mot et offentlig REST API, så det er enkelt for andre å lage f.eks. native apps til mobiler. Timeplanen skal være enkelt tilgjengelig og fylt inn med de fagene man har. Man skal lett kunne inkludere nye og fjerne uønskede fag. Alle som har konto hos Studentportalen skal kunne følge alle åpne fag.
2. Sammendrag Vi skal lage Studentportalen, som vil være en læringsplatform for studenter. Creuna vil være arbeidsgiver/veileder. Det vil være fokus på videoundervisning, integrasjon mot sosiale medier og brukervennlighet. Vi skal utvikle et offentlig RESTful.NET Web API med en HTML5, CSS3, JS og AngularJS m.m. frontend. Det er mulighet for å lage flere frontends, som f.eks. native mobil applikasjoner og Windows 8 apps ved hjelp av det offentlige API-et. 3. Dagens situasjon Det finnes mange forskjellige systemer av typen LMS (Learning Management System), og alle har sine styrker og svakheter. I Norge er det i hovedsak to systemer som regjerer i den offentlige skolen, nemlig Fronter og It s Learning. Etter å ha snakket med både studenter, lærere/forelesere, og utviklere av disse systemene, samt gjort våre egne vurderinger, har vi kommet frem til at disse to systemene har betydelige mangler, og at det ikke finnes alternativer som vi i 2013 kan anse som gode nok. Mange brukere klager på ineffektiv håndtering av undervisningsmateriale, og liten eller ingen oversikt. De få som ikke klager er ofte ikke klar over at løsningen kunne vært bedre, eller hva de burde kunne forvente. Resultatet av dette er at mange forelesere velger å opprette egne nettsider hvor de strukturerer innholdet bedre enn nåværende LMS klarer, og dermed gjør at studentene får mer enn ett system å forholde seg til. Vi mener dette kan gjøres mye bedre enn det dagens løsninger tillater, og vi ønsker å bidra til økt læringsutbytte, samt synliggjøre hva dagens teknologi kan gjøre, ikke bare for offentlige institusjoner, men også for nysgjerrige Ola Normann. Ved å utvikle et system som ikke bare følger dagens teknologistandarder, men som også enkelt lar seg videreutvikle, og som enkelt lar seg integrere med 3.-partssystemer, vil alle kunne bidra til å gjøre Studentportalen til noe som vil være med på å heve kunnskapsnivået for alle som ønsker å ta systemet i bruk. Vi ønsker blant annet å gjøre videoundervisning lett tilgjengelig, både for de som ønsker å undervise, og for de som ønsker å lære. Både fag/kurs, kommunikasjon og andre læringsressurser skal være lett tilgjengelige for studenter og andre interesserte. Åpenhet står i fokus, så vi ønsker å utvikle et system som muliggjør åpne kurs, og deling av kursmateriale. På den måten gjøres lærestoffet tilgjengelig for så mange som mulig, noe vi tror vil være med på å øke læringsutbyttet betydelig. Vi ønsker at platformen skal være tilgjengelig i hele Norge, og med integrasjon mot sosiale medier og annen digital teknologi, med for eksempel smarttelefoner og nettbrett. Da vil læring bli noe som kan foregå døgnet rundt i stedet for bare på skolebenken eller hjemme ved pulten.
4. Mål og rammebetingelser 4.1 Rammebetingelser: Tidsramme: 20 uker 4.1.1 Utviklingsmiljø Programmeringsspråk: HTML5 CSS3 Sass Twitter Bootstrap Compass JavaScript m. rammeverk AngularJS AngularUI AngularStrap C# En vurdering av de forskjellige programmeringsspråkene er gjort under kap. 5 Løsninger/ Alternativer. Verktøy: Verktøy Forklaring Vurdering Visual Studio 2012 Sublime Text 2 Emmet (ZenCoding) Windows 8 OS Confluence IDE for utvikling av applikasjoner med ASP.NET og andre språk IDE for HTML5, JS, CSS3 Operativsystem for PC og Slate Brukes for dokumentasjon av gruppens administrative ting Integrasjon mot TFS, god støtte for C#, gratis (DreamSpark / Creuna) God og brukervennlig IDE, mange plugins (AngularJS, SASS, HTMLTidy m.m.) Touch støtte, raskt, kjører det vi trenger God oversikt, lett å bruke, billig.
Trello Scrum for Trello Task manager for samarbeidsprosjekter. Scrum støtte med plugin. Oversiktlig, brukervennlig, gratis. MS Project Adobe indesign Design til hovedprosjektrapporten GIT Versjonskontroll av frontendkode Gratis, brukervennlig, praktisk for samarbeidsprosjekter, støtte for open-source prosjekter SquareSpace Bloggtjeneste Plug-and-play type blog, minimalt med konfigurasjon, brukervennlig, grafisk pen Google Analytics Analyse av trafikk til nettsteder Krafig, gratis, integrert med google kontoen Azure Server - Hosting av API Billig, skalerbart, TFS integrasjon. Lauchrock Launchside / landingsside Gratis, minimalt med jobb, mulighet for å registrer email Google Apps Balsamiq Team Foundation Service Monitor.us Amazon Web Services Håndterer all email til de forskjellige domenene, samarbeid på styringsdokumenter Verktøy for å opprette designskisser Versjonskontroll og samarbeidstjeneste for API Online tjeneste for monitorering av oppetid på forskjellige tjenester Navneservere (Route53), Statisk filhosting (S3 + CloudFront) Billig, enkelt, praktisk Integrert med Azure og VS2012 Gratis, kraftig Billig, enkelt, skalerbart Yeoman Utviklerverktøy for frontend Gratis, tidsbesparende
Gruppen har arbeidsplasser i Creuna sine lokaler, og vil jobbe her til prosjektet er ferdigstilt. Hvert gruppemedlem har fått tildelt en datamaskin med to skjermer, et nettbrett av typen Samsung Slate og en kontorpult. 4.1.2 Metodikk Utviklingsmetodikken vi har bestemt oss for å bruke er Scrum. Vi valgte dette på grunn av at vi ville ha en smidig arbeidsmetodikk med iterativ og inkrementell utvikling. Sprintene vil i begynnelsen vare 1 uke, men vil bli utvidet etterhvert som vi ser behovet. 4.1.3 Testmiljø Når det kommer til testing av produktet på forskjellige platformer og enheter får vi disponere et rom med alle enheter det er interessant for oss å teste på. Kontinuerlig integrasjonstesting og enhetstesting er essensielt i utviklingsprosessen og vil foregå parallelt med utviklingen. 4.1.4 Utfordringer Utfordringer som kan oppstå underveis i prosjektet og hvordan vi skal forberede oss for å løse de så snart de oppstår. Samarbeid: Kan være en utfordring med ulikheter/uenigheter. Vi har gjort følgende for å takle utfordringen: Skrevet arbeidsavtale Sørget for god kommunikasjon i gruppen Satt opp samarbeidsverktøy for de forskjellige arbeidsområdene Valgt en handlekraftig gruppeleder Motivasjon: Både dokumentasjon og koding kan etter lange perioder bli demotiverende. Vi ser for oss at følgende kan være gode motivasjonsfaktorer: Motivere hverandre om det oppstår vanskelige oppgaver Programmeringssammenkomster på kveldene Tidsfrister: Med manglende erfaring, og et stort prosjekt kan det å holde tidsfrister bli utfordrende. Eksempler på tiltak som kan hjelpe: Godt samarbeid God oversikt over hvert gruppemedlems bidrag og investert tid God og smidig prosessmodell
Gode backupløsninger Programmeringssammenkomster på kveldene Versjonshåndteringsverktøy Backup: Ved uforutsette situasjoner, som tap av utstyr, sykdom og annet er det viktig å ha gode rutiner for sikkerhetskopiering og arbeidsfordeling, slik at ikke tap av data eller stagnering på grunn av manglende gruppemedlemmer blir et problem. Vi gjør følgende for å sikre dette: Ukentlig backup av alle data Lagring på skytjenester som Google Drive og Dropbox Sørger for å alltid ha en viss oversikt over det andre på gruppa jobber med, sånn at arbeid kan overtas ved sykdom eller annet. Kompetanse: Det er viktig å holde seg oppdatert på de teknologier vi skal bruke. Følgende punkter er satt som viktig for å opprettholde kompetanse: Rullere mellom hvem som jobber med hva, slik at alle får kompetanse på de ulike områdene God informasjonsdeling ved hjelp av Confluence og leselister Hackathons 4.2 Mål 4.2.1 Primærmål: Brukergrensesnitt for student/bruker Kunne laste opp og ned forelesningsnotater Administrasjonspanel for lærere Gjøre klart for videoundervisning Innlogging med sosiale medier 4.2.1 Sekundærmål: Integrasjon mot: Timeplan Karakterer Notifikasjoner på mobil/sosiale medier ved endringer av ovennevnte mål Kunne se forelesningsnotater i nettleseren
5. Løsninger/Alternativer For valg av utviklingsspråk har vi laget en tabell som viser en vurdering med fordeler og ulemper 5.1 Utvikling back end: Valg Fordeler Ulemper.NET-rammeverk Strongly typed språk, og tvungen objektorientert programmering. Bruk av domenemodeller og lagdeling for bedre struktur. Enkel konvertering av domenemodeller til jsonmodeller Mange ferdiglagde biblioteker(google spreadsheets, OAuth, youtube etc..) Vil bli støttet og vedlikeholdt i uoverskuelig fremtid. Man må forholde seg til Visual Studio som IDE. PHP-rammeverk Lett å vedlikeholde/ oppdatere/videreutvikle Gratis og Open Source Kjører på Linux og Windows Støtte for OAuth Krafige rammeverk Kan kompileres med HipHop (av Facebook) om ønsket. Ikke strengt typet Ikke alle gruppemedlemmene har jobbet med dette før. Sakte utvikling av språket Javascript-rammeverk Samme språk front-end og back-end Gjenbruk av kode, models, etc. Kunne bruke et rammeverk for Ikke strengt typet språk, vil kreve gode enhetstester, og sannsynligvis typescript for at vi skal kunne stole ordentlig på løsningen. Vi må lære oss en del triks
enhetstester på både back-end og front-end Det er et språk alle gruppemedlemmer kan fra før Javascript blir et viktigere og viktigere språk med større og større innflytelse for å få til objektorientert programmering, men dette kan også typescript løse for oss. Arv Private klasser Beskyttede variabler Vanskelig å mestre juggling mellom back-end og frontend (skille logisk) BAAS Veldig raskt å komme igang med Mindre kompleksitet Mindre smidighet og kontroll Vendor lock-in Mindre egnet for større prosjekter Mindre kontroll på hvor data lagres 5.1.1 Konklusjon: Vi har valgt å bruke.net, blant annet fordi alle gruppemedlemmene har erfaring med C# som programmeringsspråk. Vi skal lage et Web Api og vi har sett at det blir enklere for oss å komme igang og videreutvikle vår back end om vi velger.net. 5.2 Utvikling front end: Valg Beskrivelse vurdering AngularJS Backbone Bootstrap Et MVW-rammeverk fra Google. Hjelper å strukturere javascript og HTML-koden ved å dele opp i Models, Views og Controllers Et MVC-rammeverk. Hjelper å strukturere javascript og HTML-koden ved å dele opp i Models, Views og Controllers Rammeverk med css-filer, ikoner og javascript-filer for å lage et bra og responsivt brukergrensesnitt. Man blir tvingt til å kode på en spesiell måte, som til slutt gir en veldig fin arkitektur. Tett integrert med testing. Lettvektig i forhold til AngularJS. Gode muligheter for å lage en egen arkitektur. Mye funksjoner til brukergrensesnitt er ferdiglaget, som vil gjøre det effektivt å lage brukergrensesnitt
HTML5 boilerplate Sass Less Rammeverk med css-filer, ikoner og javascript-filer for å lage et bra og responsivt brukergrensesnitt. Utvider CSS med dynamiske egenskaper som variabler, mixins, operasjoner og funksjoner. Utvider CSS med dynamiske egenskaper som variabler, mixins, operasjoner og funksjoner. Mye funksjoner til brukergrensesnitt er ferdiglaget, som vil gjøre det effektivt å lage brukergrensesnitt. Gruppen er mindre kjent med denne teknologien enn Bootstrap Gjør det lettere å strukturere css-filer, og gjøre det enklere å utvide eller endre stilark. Gjør det lettere å strukturere css-filer, og gjøre det enklere å utvide eller endre stilark. 5.2.1 Konklusjon: Vi har valgt å bruke AngularJS som javascript-rammeverk pågrunn av den tette integrasjonen med testmiljø som Testacular, og den fine arkitekturen man får ved å skille model, view og controls. Med Backbone er man fri til å lage sin egen arkitektur, noe som kan være positivt i noen sammenhenger, men følger man AngularJS sin måte å kode på, har man allerede en mer enn god nok arkitektur. Det er lite dokumentasjon for AngularJS, siden det er veldig nytt. Dette vil gi oss en ekstra utfordring fordi vi i mange tilfeller må gå rett til kilden istedenfor å ser på opplæringsvideoer. Vi tenker å kombinere AngularUI og Angularstrap som har AngularJSdirektiver for å enkelt lage et pent brukergrensesnitt. Bootstrap vil også bli brukt til brukergrensesnitt, med sass som preprosessor. Sass vil gjøre det enklere for oss å utvide, strukturere og gjøre endringer i brukergrensesnittet. Til app-utvikling ligger også disse verktøyene under vurdering: PhoneGap, Trigger.IO, Appcelerator, Tidy.SDK, AppJS 5.3 Markedsanalyse Spørreundersøkelser både for lærere og studenter vil bli gjort, for å sørge for at vi lager en komplett løsning. En annen virking av dette er å kartlegge studentenes og lærernes behov for et nytt system. 5.4 Produktet
Produktet vil bli delt opp i to forskjellige utviklingsprosjekter. Det ene vil ha et komplett.netrammeverk, og det andre vil konsentreres om AngularJS med forskjellige rammeverk som nevnt i kap. 4 for brukergrensesnitt. 6. Analyse av virkninger Vi har bestemt oss for å bruke html5 med AngularJS-rammeverket og.net Web api. Vi mener at det å lage et API som back-end er mer fremtidsrettet. C#, javascript, css3 og html5 er språk vi alle kan, så hovedoppgavene våre bli å sette oss inn i rammeverk til de forskjellige språkene. Vår kode tar utgangspunkt i at det vil dukker opp flere små klienter i fremtiden isteden for den tradisjonelle datamaskinen, og ved å skille kodebasene slik, vil det bli enklere å utvikle for hvilken som helst enhet.