iPhone toepassing

Groep 3

Blog http://monkdip.wordpress.com/

Jeroen De Ryck, 1MTIErik De Weerdt, 1MCws

Joris Nijs, 1MCwsPieter-Jan Speelmans, 1MCws

Ingediend op: 27 november 2009

Samenvatting

Dit is het verslag van groep 3 voor de derde opgave van multimedia:het ontwikkelen van een web-app voor de iPhone. Oorspronkelijk washet de bedoeling om ons vorig project, een toepassing die op basis vaneen foto naar een cd zoekt, te porten naar de iPhone. Dit verliep echterniet zonder problemen en we hebben de applicatie dan ook flink moetenafslanken. De belangrijkste les die wij uit dit project trekken is dat eenbeetje meer openheid langs de kant van Apple misschien geen kwaad zoukunnen.

1 Idee

Omdat we voor Android reeds een zeer goed concept hadden uitgewerkt, leek hetons logisch om dat idee ook op de iPhone uit te werken. Om even terug te komenop Android: onze applicatie kon op basis van een (slechte) foto van de covervan een CD de tracklist en eventueel andere informatie ophalen. De opgehaaldetracklist kon dan in zijn geheel worden afgespeeld. Gezien de relatieve eenvoudvan dit idee, leek dit ons best haalbaar om te porten naar de iPhone. Nietsbleek echter minder waar.

Het eerste probleem, en meteen ook het ergste, was dat de camera van deiPhone niet gebruikt kon worden. Omdat onze applicatie hier volledig afhanke-lijk van is, hebben we lang achter een oplossing gezocht. Toen er met het ideegespeeld werd om de gebruiker een foto te laten uploaden via een formulier, leeker weer een sprankeltje hoop te ontstaan.

Vrij snel werden we echter met het volgende probleem geconfronteerd; hetbleek niet mogelijk om bestanden te uploaden met Safari. Dit was de finaledoodsteek voor ons idee. Back to the drawing board.

1

Tijdens het herzien van het ontwerp zijn nog enkele andere ideeen zoalshet manueel intypen van barcodes naar boven gekomen. Omdat er echter aleen team met barcodes werkte, belandde dat concept al snel in de prullemand.Een interessant detail is dat dit team ook naar het manueel intypen is moetenoverschakelen, omdat ook zij de camera niet werkend hebben gekregen.

Na veel overleg hebben we het concept dan grondig herzien. De gebruikerkan nu een artiest ingeven, waarna hij een lijst met albums van deze arties krijgt.Elk van deze albums kan dan volledig worden afgespeeld. Ook is het mogelijkom wat extra informatie over de artiest op te vragen.

Het is duidelijk dat dit een minderwaardig concept is, maar dat hebben wevolledig te danken aan de ontoegangelijkheid van de iPhone.

2 Storyboard

Aangezien we onze Android versie niet konden porten naar de iPhone moestenwe dus weer vanaf nul beginnen. We maakten dan ook een nieuw storyboardvoor onze web applicatie. We hebben ons storyboard in ‘portrait’ gemaaktomdat er in landscape mode niet veel anders aan is. We zorgen er enkel voorin onze applicatie dat de iPhone in beide modes bruikbaar is en er gelijkaardiguitziet.

Figuur 1: Scherm 1

Scherm 1 (figuur 1) We komen eerst op een zoekscherm. We willen een reeksvan albums zien van een artiest naar onze keuze. We krijgen hier dus eenzoekveld te zien waar de naam van een artiest naar keuze kunnen inge-ven. In dit voorbeeld hebben we de naam Michael Jackson als voorbeeldingegeven. Indien we op search drukken gaat de applicatie op zoek naar

2

Figuur 2: Scherm 2

de albums van Michael Jackson en zal deze albumcovers inladen via cool-musiczone.com. We komen zo automatisch terecht op scherm 2.

Scherm 2 (figuur 2) We krijgen hier een ‘grid’ te zien van een reeks albumsvan de gezochte artiest. We kunnen op een album klikken om zo terechtte komen op Scherm 3.

Scherm 3 (figuur 3) We komen op de tracklist terecht die we in laden viacoolmusiczone.com. We kunnen de tracks van het album beluisteren doorop een willekeurig liedje te klikken. Indien we op een ander liedje klikkenzal het vorige stoppen. We kunnen op deze manier heel het album al eensbeluisteren voor we het willen kopen of gewoon op zoek gaan naar goeieliedjes op een bepaald album.

Scherm 4 (figuur 4) We kunnen buiten de liedjes ook extra informatie op-vragen over onze artiest. Deze informatie zal opgehaald worden van cool-musiczone.

3

Figuur 3: Scherm 3

Figuur 4: Scherm 4

4

3 Ontwerp

Doordat door de technologische beperkingen van de webapplicaties voor iPhonehet origineel idee is afgeslankt, is het ontwerp voor de iPhone applicatie eigenlijkeen gestripte versie van het android ontwerp. Dit keer werd er weliswaar vooreen combinatie van HTML, CSS, JavaScript en PHP gekozen als technologie.

3.1 Technologie

De keuze van HTML, CSS en JavaScript als technologie was voor de groep eenlogische keuze aangezien het om een webapplicatie gaat. Het gebruik van PHPom de applicatie-logica te programmeren is als volgt te verantwoorden.

• Ten eerste was er de noodzaak om in de applicatie een POST-requestte doen naar de server van coolmusiczone en dit leek het eenvoudigst teimplementeren in PHP.

• Daarnaast is de groep ook meer vertrouwd in het gebruik van PHP (duseen server-side oplossing) dan JavaScript (een client-side oplossing).

Achteraf gezien had het gebruik van Java aan de server-side misschien ook eengoede oplossing geweest. Dit had kunnen resulteren in een bijna letterlijke kopievan de broncode van de Android-applicatie, maar wegens beperkingen van deiPhone bood Java weinig voordeel boven PHP.

Naast deze basistechnologie is er ook gebruikt gemaakt van het iUI- frame-work om de applicatie een iPhone-uiterlijk te geven.

3.2 Ontwerp

De applicatie bestaat feitelijk uit een PHP-bestand waarin door middel vanparameters, die met GET-variabelen moeten meegegeven worden, beslist wordtwelke informatie er opgehaald moet worden. Vanuit deze informatie wordt danHTML-code gegenereerd.

3.3 Werking

Er wordt in de iPhone-applicatie in tegenstelling tot in Android-applicatie enkelnog gecommuniceerd met coolmusiczone.

1. In een eerste fase wordt de naam van de artiest, die ingegeven is in hetformulier op de eerste pagina van de applicatie, opgezocht naar alle al-bums. Dit gebeurt d.m.v. een GET-request naar http://www.coolmusiczone.

com/search/?s=1&search=artist&tp=3&sbmt=Search . De webpagina die zo verkregenwordt, wordt vervolgens in PHP geparsed om zo een grid van albumcoverste kunnen tonen.

2. Aan de hand van de albumnaam en artiest kan een tracklist met bijhorendemuziekstreams opgevraagd worden. Dit gebeurd als volgt: via een requestnaar http://www.coolmusiczone.com/music/albumtrack.php?album=album&artist=artist ver-krijgt men een pagina waaruit de track namen kunnen gehaald worden.Om dan ook nog streams te verkijgen moet men nog een GET-request doennaar http://media.coolmusiczone.com/player/cmz/playlist.asx?tracks&token=getToken ,

5

waarbij tracks een map is van pick[] naar een tracknaam. Dit is loutereen conventie van de website. Het token wordt verkregen door een POST-request te doen naar http://media.coolmusiczone.com . Dit token wordt gebruiktom het toestel waar de pagina geladen wordt tijdelijk het recht te gevenom de streams van de server te mogen afspelen.

3. Als laatste onderdeel van de applicatie wordt er via de pagina http://

www.coolmusiczone.com/music/artbio.php?artist=artist informatie over de artiest inkwestie afgehaald en weergeven.

4 Implementatie

Bij de aanvang van het project hebben we veel tijd verloren door de beperkingenvan web-apps en Safari. Voor het duidelijk werd dat het aanspreken van decamera niet gaat vanuit een web-app, hadden we reeds een ruime tijd gezochtnaar manieren om deze te gebruiken. Toen we later besloten een afbeeldingte uploaden die met een andere applicatie gemaakt was, implementeerden wehier werkende code voor. Deze code bleek echter niet te werken op de iPhoneaangezien deze niet om kan met file-uploads.

Nadat we de applicatie volledig herontworpen hadden, was het implemen-teren niet zo moeilijk meer. Voor het scrapen van de nodige pagina’s makenwe gebruik van de reguliere expressies die we ook bij de Android applicatie ge-bruiken. Ook biedt php zeer eenvoudige interfaces aan om webpagina’s op tehalen.

De grootste problemen waren problemen met de gebruikersinterface. HetiUi framework waar we gebruik van maken is later alles behalve handig geble-ken. Het werkt met speciale tags en attributen waardoor de applicatie in eenstandaardbrowser niet (of slecht) werkt. Dit is uiteraard jammer. Ook haddenwe problemen met de weergave door iUi. Dit framework voert de requests vannieuwe paginas uit door middel van ajax. Dit zorgt er voor dat de pagina’s en-kele malen moesten aangepast worden opdat de weergave goed was. Zo haddenwe problemen met het meervoudig weergeven van de titelbalk, terug-knop enzoek-knop.

5 Resultaat

Als we resultaat interpreteren als realisatie van het idee, dan is het resultaatzeer geslaagd. Het werken met iUI ging niet altijd even vlot, maar uiteindelijkwerkt alles wel.

Vergeten we het idee even, dan kunnen we niet meer zo positief zijn. Hetgevoel dat wij bij deze applicatie krijgen is dat het een uit de duizend is en snelnaar de achtergrond zal verdwijnen. De grote moeilijkheid was eigenlijk dat hetons zeer moeilijk bleek om een mobiele multimedia-applicatie te ontwikkelen,terwijl zo goed als alle features aan de iPhone die hier een meerwaarde aankunnen geven, onbruikbaar zijn.

We hebben de toepassing niet kunnen testen op een echte iPhone, maaromdat het om een heel eenvoudige web-app gaat is er volgens ons geen redenom aan te nemen dat er iets niet zou werken.

6

Kortom, de applicatie doet wat ze moet doen, maar echt nuttig vinden weze niet. Veel meer dan een soort front-end voor een bestaande website is hetdan ook niet.

6 Over iPhone

Het grootste minpunt aan iPhone is ongetwijfeld de geslotenheid. Het bouwenvan een deftige applicatie die gebruik maakt van de speciale features en desensoren van de iPhone is onmogelijk wanneer gebruik gemaakt wordt van eenstandaard (lees niet gejailbreakte) versie van de iPhone. Dit vooral door deonmogelijkheid om een programma te ontwikkelen op een niet Apple-pc. Verderzou indien een applicatie ontwikkeld is, deze moeten aanvaard worden door deApp Store, wat voor onze applicatie onmogelijk lijkt. Voor het bouwen vanwebapps lijkt het ons dat er eveneens voor Mac ondersteuning is, maar voorandere platformen amper toepassingen zijn voor het ontwikkelen van applicatiesvoor iPhone. Dit is uiteraard zeer jammer.

Het toestel zelf heeft echter wel voldoende snufjes aan boord, zoals ook bijandroid het geval was. We konden deze bij iPhone echter niet aanspreken,terwijl dit bij android op een relatief eenvoudige wijze kon. Wanneer gebruikgemaakt wordt van native apps kan deze hinderpaal wel ontweken worden.

De iPhone is dus waarschijnlijk een goed toestel, maar niet voor ontwikke-laars. Ook het maken van de webapp was omslachtig en lijkt wanneer gebruikgemaakt wordt van iUi eerder op een hack dan op een volwaardige applicatie.

7 Besluit

Uiteindelijk kunnen we stellen dat ons iPhone project met succes afgewerkt ismaar toch hadden we enkele bedenkingen bij dit project. Door dat we meteen web applicatie werkte konden we bijna geen van de functionaliteiten van deiPhone gebruiken wat erg spijtig was. Dit kwam de originaliteit en bruikbaar-heid van onze applicatie uiteraard niet ten goede. Zo konden we onze Androidapplicatie niet omvormen naar een iPhone webapplicatie en kwamen we tot eenminder origineel programma.

Wel hebben we bij deze applicatie meer gebruik moeten maken van verschil-lende talen (PHP, Javascript, HTML) om tot een werkend resultaat te komen.Toch kunnen we in het algemeen besluiten dat we het ontwerpen van een webap-plicatie een stuk minder interessant vonden dan het ontwerpen van een Androidapplicatie omdat de mogelijkheden erg beperkt waren. Wij vonden dit projectdan ook het minst interessant in vergelijking met onze twee vorige. Toch zijn weer ondanks de beperkingen toch in geslaagd een applicatie te maken die bruik-baar is en ook werkt zoals het hoort en we kijken alvast uit naar ons volgendeproject.

A Referenties• Cool Music Zone,

http://www.coolmusiczone.com/

7

B Tijdsbesteding

Jeroen Erik Joris Pieter-Jan TotaalStoryboard 2 2 2 2 8Ontwerp 1 1 1 1 4Implementatie 15 15 15 15 60Verslag schrijven 3 3 3 3 12Totaal 21 21 21 21 84

8