Forprosjekt gruppe 13 Presentasjon Tittel: Oppgave: Periode: Gruppemedlemmer: Veileder: Oppdragsgiver: Kontaktperson: Mobilbillett i HTML5 Utvikle en mobil billettautomat innenfor kategorien dedikert web applikasjon. 11. januar til 30. mai Gisle Bøhn Hagen, Ludvig Hummelvoll Hillestad, Atle Fjellang Sæther, Alexander Bakke Geir Skjevling Intelecom Brynsveien 13, postboks 124 Bryn, 0611 Oslo. Tlf: 03050 Fax: 815 00 615. E-post: post@intele.com Sven Ståle Osa Epost: sven.stale.osa@intele.com Mobil: 419 15 558 Sammendrag Prosjektet skal gjennomføres som hovedprosjekt ved HiO, avdeling for ingeniøravdeling i samarbeid med Intelecom. Oppgaven består i å bevise eller avkrefte om HTML5 med underliggende programmeringsspråk er et alternativ til native programmering. Vi skal utvikle applikasjonen ved hjelp av HTML5, CSS3, PHP og JavaScript. Dagens situasjon Om bedriften Intelecom Group AS er en av landets ledende integratorer innenfor utvikling, integrasjon, levering og sammensetning av kommunikasjonsløsninger til bedriftsmarkedet. De leverer nettsentriske og kundesentriske løsninger og kombinasjoner av disse. Intelecom implementerer også store native løsninger på mobil innenfor transportsegmentet. Firmaet jobber for tiden med NSBs nye billettapplikasjon. Per i dag utvikles de aller fleste mobilapplikasjonene native, det vil si at det kodes en versjon for hver plattform applikasjonen skal brukes på. Denne metoden er både tid- og ressurskrevende og dermed lite kostnadseffektiv. Vi skal derfor, på oppdrag fra Intelecom, finne ut om HTML5, PHP, CSS3 og JavaScript kan fungere som et alternativ til native utvikling som er mest utbredt i dag.
HTML5 er en standard som fremdeles er under utvikling. Den inneholder mange nye funksjoner som tilbyr blant annet lokal lagring, «offline» aksessering av data og element tager for nytt og bedre utseende. Ved hjelp av disse funksjonene skal vi i løpet av prosjektperioden finne ut om HTML5 er et godt alternativ til native koding. Vi skal se om dette er en mer kostnadseffektiv metode samtidig som sikkerheten ivaretas. Mål og rammebetingelser Målet med oppgaven er å utvikle en prototype av en mobil billettapplikasjon ved hjelp av HTML5, CSS3, PHP og JavaScript. Dette vil svare på mange spørsmål Intelecom har om utfordringer knyttet til denne typen utvikling på mobile enheter. Det kan enten vise seg å være en mye bedre metode enn native programmering både med tanke på tid og kostnader, eller vise at forskjellen mellom de to utviklingsmetodene er mindre enn antatt. Applikasjonen bør inneholde: - En side for registrering av fornavn, etternavn, epost og passord - Innstillinger (lar brukeren administrere valg knyttet til applikasjonen) - Mulighet for brukeren å finne en bestemt reise og alternativt kjøpe en billett til denne - Ha mulighet til å vise en oversikt over kjøpte billetter Som rammebetingelser ønsker arbeidsgiver at HTML5, PHP, CSS3 og JavaScript benyttes. I tillegg bør jquery brukes for å gjøre applikasjonen bedre tilpasset hver enkelt plattform. Applikasjonen skal ha spesielt fokus på fire områder som anses som utfordringer i en dedikert web applikasjon: 1. Brukergrensesnitt Applikasjonen skal ha et brukergrensesnitt som fungerer godt for de tre primære plattformene som er utbredt i Norge: ios (iphone og ipad), Android og Windows Phone 7. Ved hjelp av Java biblioteket jquery skal vi vise hvilke muligheter en dedikert web applikasjon har for å gjøre tilpasninger til operativsystemet som brukeren kommer fra. Spesielt med tanke på generell look and feel eller spesifikke kontrollere, som for eksempel dato velgere for de ulike operativsystemene. 2. Device API Samtidig skal applikasjonen vise hvilke muligheter HTML5 har for integrasjon mot telefonens funksjoner per i dag. Geolokasjon er en funksjon som tar for seg mobiltelefonens geografiske posisjon. Intelecom ønsker dette implementert i applikasjonen. Dersom tiden strekker til ønsker de også en skriftlig utredning som en del av besvarelsen rundt de viktigste initiativene i W3C knyttet til integrasjon mot telefonens funksjoner som skal besvare hva som jobbes med i dag, hva som er tidslinjene før disse rammeverkene kan tilby funksjonalitet opp mot native utvikling, og hvilke utfordringer som er knyttet til at mobile nettsider får tilgang til slike funksjoner(personvern, sikkerhet, brukervennlighet). 3. Lokal lagring Det er viktig at kritisk data i applikasjonen er tilgjengelig selv om mobilen ikke har tilgang til mobilt data nettverk. For en applikasjon som skal fungere som en billettbærer er det kritisk at bruker har tilgang til visse deler av innholdet, spesielt
billetten, dersom man befinner seg på steder uten mobil dekning. Det er også ønskelig at det utføres tester rundt hvordan applikasjonen fungerer «offline» med bruk av HTML app cache og web storage (evt. tilsvarende) hjelpemidlene i HTML5. 4. Sikkerhet Applikasjonen skal bruke lokal lagring og innholdet i den lokale databasen må være sikret på en måte slik at det ikke er rett frem å hente ut innholdet i databasen. javascript koden skal obfuskeres slik at kodene ikke kan leses av andre. Applikasjonen skal støtte følgende plattformer: ios (iphone / ipad) OS versjon 4 og nyere Android OS versjon 2.2 og nyere Windows Phone 7 Versjon 7.5 (Mango) og nyere Løsninger Applikasjonsutvikling kan deles opp i fire hovedkategorier bestående av native, hybride, dedikerte og generiske applikasjoner. Vår applikasjon skal inngå i kategorien dedikert mobil web applikasjon. «Native» applikasjoner Dette er applikasjoner som er utviklet med et spesifikt programmeringsspråk (f.eks Objective C for iphone, Java for Android og.net for Windows Phone). Disse applikasjonene er raske, stabile og føles naturlig som en del av operativsystem med tanke på brukeropplevelsen. Ulempen er at man må utvikle hver applikasjon i sin helhet for hvert operativsystem og bedriften må ivareta kompetanse på mange ulike programmeringsspråk og rammeverk. For å få tak i applikasjonen må kunden som regel finne og laste ned denne via en «app store». Dette byr på utfordringer knyttet til distribusjon for bedrifter som trenger å installere applikasjonen til en lukket brukergruppe (som for eksempel en intern applikasjon for et helseforetak). Slike applikasjoner må også for enkelte av operativsystemene, som ios og Windows Phone, godkjennes av produsentene av operativsystemene før de blir tilgjengelige for nedlastning. Hybrid applikasjoner Disse applikasjonene er utviklet via et tredjeparts rammeverk som PhoneGap, Sencha eller Titanium. Her benytter man rammeverk og utviklingsmiljø fra leverandører hvor man som regel koder utseendet til applikasjonen som en webside. Forskjellen er at man har muligheten til å legge en «native ramme» rundt applikasjonen og via denne har mulighet til å kalle på «native» funksjoner som kontaktliste, kamera, kalender osv. Den kan også distribueres via de ulike appstores. Ulempen er at en slik applikasjon gjerne vil ha en annerledes brukeropplevelse enn det de forventer når man laster ned en native applikasjon og den krever også likevel at man har en inngående kunnskap om de enkelte plattformene for å utnytte «native» funksjoner. Man må også installere og forholde seg til mange forskjellige utviklingsverktøy og operativsystem (f.eks
Xcode / Mac) for de ulike plattformene. Det finnes dog cloud baserte tjenester for f.eks Phone Gap som gjør dette noe enklere (men koster penger). Som for native applikasjoner må de hybride applikasjonene lages som hybrider igjennom godkjenningsprosessene før de blir tilgjengelige på app stores. Dedikert mobil web applikasjon Applikasjonene i denne kategorien kjører som en vanlig webside på en ekstern server og er tilgjengeliggjort via mobilen sin nettleser. En dedikert mobil web applikasjon er skreddersydd for spesifikke operativsystem eller telefontyper og vil ikke fungere for eldre mobile nettlesere. Slike sider setter altså spesifikke krav til hvilken mobiltelefon man aksesserer sidene via. Ofte vil slike sider sperre ute de telefonene som har nettlesere som ikke er støttet eller sende disse til en egen side for slike terminaler. Fordelen med en mobil web applikasjon er at man ikke trenger å lære seg alle de ulike programmeringsspråkene og rammeverkene som er nødvendig for native utvikling. Det er ikke mulig å distribuere slike applikasjoner via app store, men det gir også en mulighet for enklere distribusjon for bedrifter med lukkede brukergrupper (ref første punkt). Rammeverk slik som jquery mobile gjør det raskere og enklere å lage gode brukergrensesnitt mot touch skjermer. En ulempe er at tilgangen til telefonens hardware er meget begrenset per i dag. Det finnes muligheter for geolokasjon, men utover det er det begrensede muligheter for å utnytte ting som hardware knapper, kamera og kontaktliste. Selv om det er ventet at dette skal bli langt bedre støttet i fremtiden er det en utfordring per i dag at det finnes for mange ulike arbeidsgrupper på dette området som jobber separat i stedet for å jobbe mot en felles standard. Generisk mobil applikasjoner Dette er Mobile websider som skal fungere på enhver mobil enhet med en nettleser. Per i dag er dette svært tradisjonelle mobile websider for å vise informasjon som knapt nok kan kalles en mobil applikasjon. Sammenlikning av ulike metoder for utvikling av mobil applikasjoner (kilde: worklight)
Analyse av virkninger Vi skal bruke HTML5 fordi dette språket regnes som fremtiden innen applikasjonsutvikling. HTML5 i kombinasjon med JavaScript og PHP inneholder mange nye funksjoner som gir de fleste av mulighetene som er tilgjengelig ved native programmering. Ved å vise at en slik applikasjon kan kodes med tilfredsstillende grad av sikkerhet og brukergrensesnitt med rimelig tidsbruk, kan dette spare IT-bedrifter, som Intelecom, for store kostnader tilknyttet programmering som i dag gjøres mot hver enkelt plattform. En ulempe er derimot at vi i utgangspunktet har lite kunnskap om JavaScript fordi det er dette som skal brukes for de fleste funksjonene i applikasjonen. Vi ser på dette som en lærerik utfordring og i kombinasjon med HTML5, som fremdeles er et ganske nytt språk, vil vi ha en fordel når vi skal ut i arbeidslivet. Konklusjon Applikasjonen vil vise om HTML5, PHP og JavaScript inneholder nok funksjonalitet og er sikre nok til å fungere i en billettapplikasjon hvor kravet til sikker lagring av kritiske data er svært høyt. Den vil også vise om en dedikert web applikasjon vil kunne være et reelt alternativ til en nativ applikasjon. / - Dato Atle Fjellang Sæther Gisle Bøhn hagen Alexander Bakke Ludvig Hummelvoll Hillestad