Presentasjon Sammendrag Dagens situasjon Mål og rammebetingelser Moduler Løsning og alternativer...

Transkript

1

2 Innholdsfortegnelse Presentasjon Sammendrag Dagens situasjon Mål og rammebetingelser Moduler Løsning og alternativer Analyse av virkninger

3 Presentasjon Tittel Business Simulation Web App Framework Oppgave Utvikle et rammeverk for interaktive webapplikasjoner for ipad Medlemmer Adeela Afzal Mikael Jakhelln Kajal Soltanpanah Johan Steinberg Veileder Eva Hadler Vihovde Oppdragsgiver Specifique Norway Drammensveien 127, 0277 Oslo, Norway Kontaktperson Magnus Hørven

4 Sammendrag Specifique er et selskap som tilbyr opplæringsløsninger til store bedrifter og organisasjoner. De har utnyttet sin erfaring innen pedagogisk design og opplæring til en rekke interaktive digitale løsninger for læring. Bedriften har idag utviklet en applikasjon som er en simulering av oljeindustrien. I denne applikasjonen skal grupper ta rollen som ulike oljeselskaper og konkurrere mot eller samarbeide med andre grupper. Applikasjonen brukes til opplæring innen oljeindustrien. Specifique ønsker nå å utvikle en slik simulering også for andre industrier. De ønsker derfor at vi skal utvikle et dynamisk, generisk rammeverk for interaktive web applikasjoner som skal simulere ulike industrier og brukes til opplæring av ansatte. Ved bruk av rammeverket skal Specifique kunne konfigurere nye applikasjoner tilrettelagt den spesifikke bedrift og deres mål for læring. Disse applikasjonene skal hovedsakelig kjøres på ipad. Funksjonene rammeverket skal utføre deles opp i moduler. Disse modulene inkluderes i applikasjonene etter ønske og behov, det vil si at applikasjonen skal fungere uten å inkludere alle modulene. Oppdragsgiver ønsker at rammeverket skal utvikles ved hjelp av JavaScript/jQuery, PHP, MySQL, HTML og CSS. Til kommunikasjon, med hensyn på messaging modulen, skal vi bruke CANDY og Jabber/XMPP. 4

5 Dagens situasjon Specifique er et selskap som tilbyr omfattende opplæringsløsninger til store bedrifter og organisasjoner. De har kombinert deres erfaring innen pedagogisk design og opplæring til en rekke interaktive og engasjerende digitale løsninger for læring. Gjennom deres 20 års lange erfaring har de jobbet med flere anerkjente selskaper og deres verktøy er blitt brukt for opplæring av mer enn 2 millioner mennensker globalt. Specifiques mål er å bli den mest attraktive leverandøren av opplæringsløsninger til store selskaper i Europa. For å oppnå dette vil de skape unike læringsopplevelser ved bruk av digitale verktøy. Metodene de bruker for læring er «Dynamic Conferencing», «Dialogue Mat», «Digital Dialogue Mat» og «Ipad Training». Under Ipad-training har de idag en applikasjon som er en simulering av oljeindustrien. I denne applikasjonen skal grupper ta rollen som ulike oljeselskaper de skal drive, og konkurrere mot andre grupper. Ved bruk av denne applikasjonen skal deltagerne lære på en engasjerende og morsom måte. Denne applikasjonen er laget for en konkret industri. For at Specifique skal lage flere slike applikasjoner tilegnet hver enkel kunde, trenger de et rammeverk. Gjennom dette prosjektet skal det utvikles et rammeverk for interaktive webapplikasjoner som skal simulere ulike industrier. Rammeverket skal gjøre det lettere for Specifique å lage nye applikasjoner som er tilrettelagt for den spesifikke bedrift og deres mål for læring. Mål og rammebetingelser Specifique har allerede laget en opplæringsløsning på ipad som simulerer oljeindustrien. Målet for rammeverket er at det er dynamisk nok til å brukes som rammeverk i flere lignende simuleringsløsninger. Rammeverket må kunne brukes i en applikasjon som simulerer en hvilken som helst industri. De forskjellige funksjonene rammeverket skal utføre deles opp i moduler som må kunne inkluderes etter behov. Ikke-inkluderte moduler må ikke føre til crash. Applikasjonene Specifique skal bruke rammeverket i, skal først og fremst brukes på ipad. 5

6 Modulene Dette er modulene som i utgangspunktet er foreslått av oppdragsgiver. Modulene kan endres hvis bedre forslag kommer opp. Messaging Sende meldinger til grupper / tilretteleggere (facilitators) Motta meldinger Se logg Pushe melding til Notification Notification Motta melding Vise melding Ulike typer meldinger Vise/skjule melding Trykk for å fjerne Ja eller Nei Pushe til meldingslogg Sende callback Inventory Vise elementer i Inventory Vis informasjon om hvert element Forskjellige grupperinger av elementer Trykk for å vise Dra for handling Intervention Pushe tekst til Notification Pushe endringer til Change 6

7 Trade Etterspørre en handel Motta en handel Fullføre en handel Pushe til Notification Pushe til Inventory Tid Vise tid Endre tid Pushe til Intervention Pushe til varsel Value Holder oversikt over grunnverdier i simuleringen Valutakurser Poeng Kontrakter... Change Pushe endringer til Value Gameboard Spillebrettet kontrollerer layout og alle områdene hvor data vises og interaksjon foregår. Viser det som er hovedskjermen Mulighet for å legge til markerte klikkbare områder Kontrollerer all asset display 7

8 Løsning og alternativer Oppdragsgiver ønsker at rammeverket skal utvikles hovedsakelig ved hjelp av JavaScript og biblioteket jquery. Messaging modulen skal bruke den JavaScript baserte chat klienten CANDY (Chats Are Not Dead Yet) som er lagd for direktemeldingstjenesten Jabber (XMPP). Oppdragsgiver var åpen for at vi kunne bruke websockets. Teknologier: Utviklingsprogram: Versjonskontroll: Lagring av data: Programmeringsspråk: JavaScript-biblioteker: Jabber (XMPP), Ajax/Websockets Valgfri teksteditor/ide (ikke spesifisert) Git MySQL JavaScript, HTML5, CSS3, PHP jquery, CANDY Oppdragsgiver ønsket at henting av data fra databasen skulle forenkles i PHP, enten ved å ha metoder med mer dynamiske parametere for SQL-setninger, eller et PHP-rammeverk som håndterer dette. En fordel ved å bruke JavaScript/jQuery i utviklingen av rammeverket er at modulene webapplikasjonen vil bestå av skal være dynamiske. Ettersom JavaScript er et språk for å lage interaktive web-løsninger egner det seg godt i forbindelse med oppgaven. Oppdragsgiveren ønsker at vi bruker PHP som serverside språk blant annet siden den har stor utbredelse innen web-baserte løsninger. Ettersom oppdragsgiver i stor grad har bestemt rammebetingelsene, er det lite rom for å diskutere alternative løsninger. Vi kan alikevel tilføre små tillegg dersom det er hensiktsmessig. For å oppnå bedre struktur kan vi benytte en MV* arkitektur, som deler applikasjonen i ulike komponenter; f.eks. Model-View-Controller. Eksempler er JavaScriptMVC og Backbone.js. Fordeler Ulemper Mer struktur Enklere dynamisk datahåndtering Mer å lære Egnet for store prosjekter. Kan være overkill. 8

9 Når det gjelder bruk av stilark kan vi benytte vanlig CSS eller en CSS preprosessor. Kjente eksempler er SASS/SCSS og LESS, som begge er aktuelle alternativer. Fordeler Ulemper Deklarering av variabler Mindre gjentakelser Implementerer ulike nyttige funksjoner Komplekst utviklingsmiljø Vanskeligere å debugge etter at koden er kompilert til vanlig css Egnet for store prosjekter Vi kan benytte et JavaScript fil og modul laste- og optimaliseringsverktøy som RequireJS som gir mulighet for å få bort alle script-tagger fra HTML-koden. Kontroll av JavaScript-filer som må inkluderes og rekkefølgen de må inkluderes i kontrolleres fra JavaScript-filene selv. Det er også enkelt og fusjonere og minifisere JavaScript-filene for optimalisering. Under testing vil RequireJS kontrollere hvilke filer som må lastes basert på avhengigheter. Laste tid under testing kan reduseres og debugging av JavaScript kan være enklere. Analyse av virkninger AJAX (long poll AJAX) er en vel testet standard i motsetning til websockets. Websockets er raskere og blir kalt true realtime. Som ny teknologi har ikke websockets oppført seg helt likt mellom de forskjellige nettleserene. For utvikling til ipad er det hovedsakelig nettleseren Safarimobile vi må ta hensyn til, og den har (tidligere) hatt manglende støtte for websockets. Bruk av et JavaScript-rammeverk som Backbone.js vil gi mer struktur i JavaScript-koden. Det fører også til mer abstrakt kode og brattere læringskurve. For oss som er fersk med JavaScript så er det noe vi ma ta hensyn til. Vi må også ta hensyn til oppdragsgiver som skal bruke rammeverket. Bruk av css-preprosessor kan gjøre det enklere å endre design og layout av en web-applikasjon og som et rammeverk til flere web-applikasjoner som kanskje skal ha forskjellige uttrykk er det en fordel. Det må klareres med oppdragsgiver hvordan de vil foretrekke å tilpasse design og layout. I forhold til størrelsen på dette rammeverket og det nye vi må sette oss inn i, er ikke bruk av en css-preprosessor prioritert fra vår side, men det er heller ikke et stort problem å implementere på et senere tidspunkt da det støtter vanilla -CSS og er adskilt fra annen type kode. 9

10 Utbredt bruk av og strukturering med RequireJS kan føles som et garnnøste av filavhengigheter. For mange prosjekter er det et unødvendig vanskelig utviklingsmiljø. I utvikling av selve rammeverket skal man ikke bruke et verktøy som dette da filavhengigheter må kontrolleres fra applikasjonen selv. For testing av rammeverket vi lager må vi lage en web-applikasjon vi tester på. Hvis man reserverer bruken av RequireJS til det som er nødvendig i utvikling av en webapplikasjonen er det store fordeler, men for en testapplikasjon som ikke trenger å nå produksjonsnivå er det unødvendig. For oppdragsgiver kan det være et bra verktøy for å inkludere de modulene de trenger. 10