Mobile Apps Stage verslag
Fouad Mansveld januari 2012 2TCI, Breda
Fouad Mansveld www.fouadmansveld.com Studentnummer:
2140934
29 augustus 2011 - 27 januari 2012
Opleiding ICT en Media Design Fontys Hogescholen, Eindhoven Stagebegeleider:
Robbert Pas
Bedrijf 2TCI Keizerstraat 11 4811HL Breda Bedrijfsbegeleider:
Dennis de Jongh, algemeen directeur
Voorwoord U heeft de eerste bladzijde van mijn stageverslag omgeslagen en bent zojuist begonnen aan mijn stageverslag. U zult in dit verslag een beter beeld krijgen over hoe mijn meeloopstage de afgelopen vijf maanden eruit heeft gezien. Ik zal iets vertellen over wat ik gedaan en geleerd heb, maar u zult ook de producten tegenkomen die ik gerealiseerd heb. Dit stageverslag is bedoeld voor mijn stagebegeleiders. Maar andere geïnteresseerden nodig ik graag uit om mijn stageverslag te lezen. Het bedrijf waarbij ik stage gelopen heb is 2TCI in Breda. Ze zijn vooral gespecialiseerd in netwerkbeheer en applicatieontwikkeling. Maar tegenwoordig is 2TCI ook begonnen met het ontwikkelen van mobiele applicaties. En over dat laatste onderwerp ging mijn stage opdracht. Namelijk het ontwikkelen van een iPad applicatie voor AppTree. Een nieuw idee voor een mobiele applicatie dat ik verderop in dit verslag zal gaan uitleggen. Ik wil graag nog een aantal personen bedanken. Om te beginnen mijn stagebegeleider van school Robbert Pas. Hij heeft feedback gegeven op mijn documenten en heeft mij begeleidt tijdens mijn stage. Verder kon ik met vragen en problemen terecht bij hem. Daarnaast wil ik ook iedereen van 2TCI bedanken voor de leuke en leerzame periode die ik daar heb gehad. Ik heb het heel erg naar me zin gehad en ben goed begeleid. Ik heb bij 2TCI dingen geleerd die ik op school nooit geleerd zal krijgen en ik heb daarnaast ook goede praktijkervaring opgedaan. Daarom Dennis, Marcel, Arjen en Roel heel erg bedankt voor de leuke en leerzame tijd.
Inhoudsopgave 1.
2.
3.
4.
Vooraf
6
1.1
Samenvatting
8
1.2
Summary
9
1.3
Woordenlijst
10
1.4
Inleiding
12
Het bedrijf
14
2.1
Bij het begin
16
2.2
Wat doet 2TCI?
16
2.3
Waar staat 2TCI voor?
16
2.4
Klanten
17
Stage opdracht
18
3.1
In eerste instantie
20
3.2
Beginsituatie
21
3.3
Opdrachtomschrijving
22
Onderzoek
24
4.1
Probleemstelling
26
4.2
Uitvoeren
27
5.
6.
7.
6.3
Ontwerp
29
6.4
Testapplicaties
29
Eindopdracht
30
7.1
Concept
32
7.2
Design
34
7.3
Programmeren
40
Overige opdrachten
42
7.1
Is Piet Failliet?
44
7.2
Muziek Alstublieft
46
7.3
MomaLights
48
50
Afsluiting 7.1
Conclusie
52
7.2
Evaluatie
54
I
Bijlage:
het PID
II
Bijlage:
het onderzoek
III
Bijlage:
huisstijlmanual
1
Vooraf 1.1 Samenvatting
1.2 Summary
1.3 Woordenlijst
1.4 Inleiding
6
“Ik heb vanaf eind augustus 2011 tot en met januari 2012 stage gelopen bij 2TCI. Ik hield mij tijdens deze stage vooral bezig met mijn stage opdracht, het ontwikkelen van een iPad applicatie. In dit hoofdstuk komt u te weten van wat er in dit verslag staat.”
VOORAF 7
Samenvatting 2TCI is een bedrijf dat gespecialiseerd is in netwerkbeheer en applicatieontwikkeling. Het bedrijf bestaat sinds 2003 en is gevestigd aan de Keizerstraat in Breda. Het grootste gedeelte van mijn stage heb ik me bezighouden met mijn stage opdracht. In eerste instantie zou dit een mobiele applicatie zijn voor WCAA Giants, een basketbalteam uit Bergen op Zoom. Maar na een paar weken kwam het bericht dat dit team failliet was gegaan. Gelukkig had 2TCI al een vervangende opdracht voor mij klaar staan, namelijk een iPad applicatie voor AppTree. AppTree is een nieuw idee voor een mobiele applicatie. Omdat er steeds meer apps in de AppStore komen, wordt het voor een gebruiker steeds moeilijker om een geschikte app te vinden. Met AppTree kan de gebruiker gemakkelijk en snel geschikte apps vinden, sorteren en delen met vrienden. De gebruiker kan apps die hij geïnstalleerd heeft of op aanraden van vrienden, in zijn ‘AppTree’ hangen. Voor AppTree heb ik een iPad applicatie gemaakt die zowel visueel als technisch gerealiseerd is geworden. Voorafgaand aan mijn stage opdracht heb ik voor 2TCI nog een onderzoek gehouden naar mobiele applicaties. Dit was om meer inzicht 8
te krijgen in de huidige stand van de markt en mogelijkheden van smartphones en mobiele applicaties. Na dit onderzoek ben ik begonnen aan mijn stage opdracht. Ik ben begonnen om het concept en de technische kant helder in beeld te krijgen. Vervolgens heb ik een huisstijl ontworpen en de lay-out gemaakt voor de applicatie. De laatste en tevens langstdurende stap was het technisch realiseren van de applicatie. Naast mijn stage opdracht had ik ook nog drie extra opdrachten uitgevoerd. Dit was een layout voor de iPhone applicatie Is Piet Failliet?, een webdesign en logo voor muziekschool Muziek Alstublieft en een webdesign voor de webshop van MomaKids. Uiteindelijk heb ik aan het einde van mijn stage de applicatie voor AppTree gebouwd, waarbij de gebruiker kan inloggen met zijn Facebook account en apps kan vinden en opslaan. Ook behoorde het onderzoek en de drie extra opdrachten bij de resultaten van mijn stage. Ik heb gedurende mijn stage geleerd hoe ik een mobiele applicatie kan ontwikkelen en heb ik goed zelfstandig leren werken. Ook weet ik hoe het is om binnen een bedrijf mee te draaien.
Summary 2TCI is a company that specializes in network management and application developing. The company was founded in 2003 and is located at the Keizerstraat in Breda. My intern assignment was the largest part of my internship. Initially this would be a mobile application for WCAA Giants, a basketball team from Bergen op Zoom. But after a few weeks the team became bankrupt. Fortunately 2TCI had an another assignment for me, an iPad application for AppTree. AppTree is a new idea for a mobile application. Because the AppStore gets more and more apps, for users it will be harder to find suitable apps. With AppTree the user can easily find, sort and share apps with friends. The user could hang his own installed apps or apps recommended by friends to his own AppTree. For AppTree I created an iPad application visually and technically. Before I started my intern assignment I did a research to mobile applications. The reason for this was to gain a better insight into the market and the possibilities of smartphones and mobile applications.
SCORE: 1 - 0
After the research, I started with my intern assignment. The first thing I did was to get a better view of the project. Next I designed a corporate identity and created the application lay-out. The last and longest step was the technical realization of the application. Besides my intern assignment I did also three other assignments: creating the design of the iPhone application Is Piet Failliet?, making a web design and logo for the music school Muziek Alstublieft, and designing a web design for the webshop of MomaKids. Eventually at the end of my internship I created the application for AppTree, which the user can login to his Facebook account and can find and save apps. Also my research and the three other assignments belongs to the results. During my internship I have learned how to develop a mobile application and I have learned to work independent. I also known how it is to work for a real company.
9
Woordenlijst Android Android is het open besturingssysteem van Google. Android wordt gebruikt voor de bediening van smartphones en tablets.
Apple Apple is een Amerikaanse elektronicabedrijf. Apple heeft verschillende producten uitgebracht zoals de Macintosh computers, de iPod, de iPhone en de iPad. Apple staat erom bekend om alles onder controle te hebben. Dit heeft als voordeel dat hun producten een betere kwaliteit hebben, maar heeft als nadeel dat de vrijheid voor de gebruiker beperkter is.
9
Applicatie of app Een applicatie is een computerprogramma waarmee toepassingen uitgevoerd kunnen worden. Hierbij kan gedacht worden aan een e-mailprogramma of een muziekspeler. De afkorting van applicatie is ‘app’ en wordt gebruikt om een programma mee aan te duiden dat gemaakt is voor een mobiele telefoon.
6
5
10 7
4 3
App Store De App Store is een online winkel van Apple waarbij gebruikers applicaties kunnen downloaden. In de App Store bevinden zich meer dan honderdduizenden applicaties.
Database Een database is een digitaal archief waarin data en informatie in opgeslagen is.
Hosting Hosting is een dienst waarbij online ruimte beschikbaar wordt gesteld en waarop bestanden opgeslagen kunnen worden. Hosting wordt vooral gebruikt voor websites.
10
2
1
8
iOS Het mobiele besturingssyteem van Apple dat gebruikt wordt voor de iPhone, iPad en iPod Touch.
iPad De iPad is een draagbaar multimedia apparaat, ofwel een tablet-pc, van Apple.
(Mobiel) platform Een (mobiel) platform is een basis waarop software / applicatie ontwikkeld en geinstalleerd kan worden.
12
10
13
Server Een server is een computer of een programma dat ervoor zorgt dat gegevens uitgewisseld kunnen worden.
11
14
Smartphone Een smarthphone is een mobiele telefoon dat veel verschillende functies bevat, waaronder internet en GPS.
8 15
Usability Usability zorgt ervoor dat een product eenvoudig en makkelijk te bedienen is.
Typografie Typografie is een manier waarop letters en tekst vormgegeven wordt.
11
Inleiding Augustus 2011, de laatste dag van de zomervakantie loopt ten einde. Al jaren is dit een dag dat ik weer aan een nieuw schooljaar ga beginnen. Alleen dit jaar begint het schooljaar wel anders. In plaats van naar school toe te gaan, ga ik nu naar een echt bedrijf. Vanaf deze dag begin ik aan mijn vijf maanden durende stage bij 2TCI. Wat heb ik dan allemaal gedaan tijdens deze vijf maanden. De vijf maanden zijn voorbij gevlogen, maar als ik achteraf kijk heb ik toch veel gedaan. Het grootste gedeelte van mijn tijd heb ik besteed aan mijn stage opdracht. Maar daarnaast heb ik ook een onderzoek gehouden naar mobiele applicaties, een lay-out voor een iPhone applicatie ontworpen, een webdesign en logo gecreëerd voor een muziekschool en een webdesign voor een webshop gemaakt. Mijn stage begon ik met de gedachte om mobiele applicatie(s) te ontwikkelen voor WCAA Giants, een professioneel basketbalteam. Na een paar weken stage lopen kwam het bericht dat WCAA Giants failliet was. De mobiele applicatie ging hiervoor dus niet door. Iets wat bij het echte bedrijfsleven hoorde. Gelukkig had 2TCI al een vervangende opdracht klaar staan voor mij. Als vervangende opdracht zou ik nu een iPad appli-
12
“Alleen dit jaar begint het schooljaar wel anders”
catie realiseren voor AppTree. AppTree is een nieuw idee dat gerealiseerd gaat worden op verschillende mobiele platformen. Gebruikers van de AppTree app kunnen makkelijk en eenvoudig apps uit de App Store vinden en daarmee hun eigen “AppTree” samenstellen. Vervolgens kan de gebruiker deze AppTree ook weer delen met vrienden. Het unieke aan deze applicatie is dat het voortaan heel gemakkelijk wordt om applicaties te vinden en te sorteren en vervolgens te delen. Geen huiswerk, dagen van 9 tot 5 en veel praktijkervaring. Dit is wat mijn ervaringen zijn met stage ten opzichte van school. De dagen dat ik stage liep deed ik veel praktijkervaring op. Ik kreeg de vrijheid om zelfstandig te werken en kon hulp vragen als ik dit nodig had.
Als u deze bladzijde omslaat gaat u dan daadwerkelijk beginnen aan mijn verhaal over de vijf maanden stage. Hoofdstuk 2 begin ik met iets te vertellen over het bedrijf 2TCI. Wie zijn ze, hoe zijn ze ontstaan en wat doen ze? Hierna zal ik meer gaan vertellen over mijn stage opdracht in hoofdstuk 3. In hoofdstuk 4 ga ik iets vertellen over het onderzoek dat ik gehouden heb. Hoofdstuk 5 gaat over de realisatie van mijn stage opdracht, van het ontwikkelen van de huisstijl tot aan het programmeren van de applicatie. Hoofdstuk 6 gaat over de overige opdrachten die ik tijdens mijn stage gedaan heb. Het stageverslag sluit ik af met een conclusie en evaluatie (hoofdstuk 7)
13
2
Het bedrijf 2.1
Bij het begin
2.2
Wat doet 2TCI?
2.3
Waar staat 2TCI voor?
2.4 Klanten
14
HET BEDRIJF
“2TCI is als een studentenbedrijf opgericht in 2003 door Dennis de Jongh en zijn toenmalige zakenpartner Bas van Elburg. 2TCI is gevestigd aan de Keizerstraat in Breda. Het is gespecialiseerd in software- en applicatieontwikkeling, netwerkbeheer en hosting.”
15
Bij het begin In 2003 besloten Dennis de Jongh en Bas van Elburg naast hun studie een eigen onderneming te beginnen, 2TCI. Het ging goed met het bedrijf en de opdrachten bleven binnenkomen. Na afronding van hun studie besloten ze om zich fulltime te gaan richten op het bedrijf. Vooral voor 2TCI werd applicatieontwikkeling steeds belangrijker waardoor ze twee jaar geleden hun eerste medewerker in dienst namen, Arjen Schüller, gevolgd door Marcel Hoppenbrouwers een jaar later. Toch ging 2TCI zich ook richten op het realiseren van websites en social media. Hiervoor kwam in 2011 Roel de Beer bij 2TCI werken. Hij was gespecialiseerd in Bedrijfscommunicatie en richtte zich op de Business-kant en de social media van 2TCI. Met in totaal vijf man aanwezig, begon ik afgelopen zomer mijn meeloopstage bij 2TCI. Omdat 2TCI de afgelopen jaren gegroeid was, zijn zij ook een aantal keer verhuisd. In de zomer van 2011 zijn zij uiteindelijk overgegaan naar een kantoorruimte aan de Keizerstraat 11 in Breda.
16
Het kantoor aan de Keizerstraat
Klanten Wat doet 2TCI? 2TCI is vooral gespecialiseerd in het onderhouden en aanleggen van netwerken door middel van servers. Daarnaast biedt 2TCI ook eigen hosting aan, waar klanten gebruik van kunnen maken. Verder ontwikkelt 2TCI ook applicaties. Dit kunnen softwareapplicaties zijn die op computers werken of webapplicaties die op het internet draaien. Sinds kort houdt het bedrijf zich ook bezig met het ontwikkelen van mobiele applicaties en social media.
Waar staat 2TCI voor? 2TCI vindt het belangrijk om mee te denken met de klant. Niets voor niets heeft 2TCI de kwaliteit, service en betrokkenheid hoog staan. 2TCI is ICT-technisch gespecialiseerd en denkt mee met de klant. Dit is ook een rede waarom 2TCI door verschillende grote ondernemingen ingeschakeld wordt om mee te denken en mee samen te werken.
2TCI is de afgelopen jaren verschillende samenwerkingsverbanden aangegaan met een aantal bedrijven. Hieronder staan voorbeelden van projecten die 2TCI heeft gedaan:
Voor de medische tak van Philips heeft 2TCI een webapplicatie gebouwd voor onderzoekers. Een onderzoeker kan met de applicatie beelden van een microscoop versturen naar een andere onderzoeker via het internet. Een onderzoeker aan bijvoorbeeld de andere kant van de wereld kan deze beelden weer tot in detail bekijken. De geeft onderzoekers de mogelijkheid om snel en gemakkelijk te kunnen overleggen over hun bevindingen. Siemens heeft camera’s boven de snelweg hangen ter registratie van kentekens voor het mijden van de spits. 2TCI biedt hosting aan voor Siemens, waarbij door middel van een server, de data opgeslagen wordt. Het systeem maakt het mogelijk dat wanneer er een fout optreedt tussen de hardware en software dit geregistreerd wordt. Voor de afdeling Huisartsengeneeskunde van het AMC in Amsterdam heeft 2TCI een applicatie ontwikkeld waarmee data van huisartspatiënten wordt opgeslagen in een database en gepresenteerd wordt op een visuele manier. Dit maakt het voor onderzoekers van het AMC heel gemakkelijk om de data gemakkelijk en overzichtelijk in te zien
17
3
Stage Opdracht 3.1
In eerste instantie
3.2 Beginsituatie
3.3 Opdrachtomschrijving
18
STAGE OPDRACHT
“Dit hoofdstuk draait om de stage opdracht waaraan ik gewerkt heb. Voor wie is de opdracht, waarom de opdracht nodig was en hoe het project eruit zag. ”
19
In eerste instantie Aan het begin van mijn stage zag mijn stage opdracht er anders uit dan nu. De bedoeling was dat ik een mobiele applicatie(s) zou ontwikkelen voor het basketbalteam WCAA Giants uit Bergen op Zoom. Voordat ik daadwerkelijk aan de slag zou gaan, had 2TCI eerst graag dat ik nog een onderzoek zou doen naar mobiele applicaties. Dit was bedoeld voor hun zelf om een duidelijk beeld te krijgen hoe de markt er op dit moment uitzag. De tweede stap die ik na dit onderzoek zou gaan nemen was het daadwerkelijk realiseren van de applicatie. Alleen in de derde week van mijn stage veranderde de opdracht. 2TCI had te horen gekregen dat de Giants failliet waren gegaan, waardoor de mobiele applicatie ook niet meer door kon gaan. Het is iets wat kan gebeuren in het bedrijfsleven en gelukkig was ik nog bezig met het onderzoek waardoor ik weinig tijdsverlies heb opgelopen. Algauw had 2TCI een andere, en leukere opdracht gevonden voor mij. Deze opdracht betrof het realiseren van een iPad applicatie voor AppTree. Ik ben hiermee begonnen direct nadat ik met dit onderzoek klaar was.
20
“Algauw had 2TCI een andere, en leukere opdracht gevonden voor mij”
AppTree is een nieuw bedacht idee voor een mobiele applicatie. AppTree zal in eerste instantie uitkomen alleen voor de iPad. Uiteindelijk is het de bedoeling dat het op meerdere platformen beschikbaar zal worden.
Beginsituatie Tegenwoordig kan men er bijna niet meer omheen, mobiele applicatie of kortweg apps. Van games tot navigatie, de mogelijkheden zijn enorm. Er zijn inmiddels al duizenden tot bijna een miljoen verschillende apps beschikbaar. Er is veel keuze waardoor het voor de gebruikers steeds moeilijker wordt om een geschikte app te vinden. AppTree is een applicatie waarbij de gebruikers heel gemakkelijk apps kunnen vinden. Dit kan gedaan worden per categorie of op aanraden van vrienden. Vervolgens kan de gebruiker zijn eigen ‘AppTree’ samenstellen door middel van een visuele boom. De gebruiker kan daarna zijn ‘AppTree’ weer delen met vrienden via social media. Ook is er de mogelijkheid voor de gebruiker om ‘AppTrees’ van vrienden in te zien. Zo kan de gebruiker achter nieuwe apps komen door dit te bekijken binnen zijn vriendengroep. Met AppTree wordt het voor de gebruikers gemakkelijker en overzichtelijker om apps uit bijvoorbeeld de App Store te vinden. Als iemand bijvoorbeeld op reis gaat en hij wil net van te voren nog weten welke apps handig zijn uit de categorie ‘reizen’, dan kan hij dit bekijken in de App Store. Maar het is veel makkelijker om te kijken wat vrienden jouw aanraden door middel van ‘AppTree’. 21
Opdrachtomschrijving De opdrachtomschrijving voor AppTree in het kort was: het realiseren van de iPad applicatie. Hieronder viel het daadwerkelijk programmeren van de applicatie en het ontwerpen van de huisstijl. Om de opdracht voor mijn stage niet te groot te maken, is er besloten dat ik alleen de iPad applicatie zou gaan maken. Omdat er nog helemaal geen design was, had 2TCI bedacht om mij ook de huisstijl te laten ontwikkelen. Zo zou de opdracht niet alleen maar ICT-gericht zijn, maar kon ik ook mijn creativiteit los laten op het design. Voor het ontwikkelen van de huisstijl was ik vrij om te doen wat ik wilde. De huisstijl moest wel aansluiten bij het concept, maar er zaten geen voorwaarden aan bijvoorbeeld de stijl. Voor het programmeren van de applicatie zaten wel een aantal voorwaarden. Omdat ik een iPad applicatie zou realiseren, was ik verbonden aan de restricties en eisen van Apple. Om een iPad applicatie te bouwen is de ontwikkelsoftware Xcode nodig. Hierin kan de code voor applicatie geschreven worden en kan de lay-out van de applicatie ontworpen worden. Bij Xcode kan alleen maar gebruik gemaakt worden van Objective-C als programmeertaal. Daarnaast moet ook de lay-out van de applicatie aan bepaalde voorwaarden voldoen. Verder moest de usability, de
22
gebruikerservaring, met de applicatie goed zijn. Het moet dus voor de gebruiker gemakkelijk zijn om de applicatie te gebruiken en hier doorheen te navigeren. Het programmeren en ontwikkelen van de huisstijl viel onder de opdracht. Onder de huisstijl wordt verstaan het logo, het lettertype, het kleurgebruik en een aantal iconen. Er zijn ook een aantal zaken die niet onder de opdracht vielen. Zo hoefde ik de tekst en informatie niet aan te leveren. De database werd voor mij gebouwd, zodat ik hem alleen hoefde te implementeren in de applicatie. Ook het ontwikkelen van andere uitingen van AppTree behoorde niet tot de opdracht, zoals website, drukwerk of mobiele applicaties op andere platformen
23
4
Onderzoek 4.1 Probleemstelling
4.2 Uitvoeren
4.3 Ontwerpen
4.4 Testapplicaties
24
ONDERZOEK
“De eerste paar weken van mijn stage heb ik een onderzoek gehouden naar mobiele applicaties. Hoe ziet de markt eruit? Wat zijn populaire functies van een smartphone? En hoe zien de doelgroepen eruit? In dit hoofdstuk vertel ik hoe ik dit onderzoek aangepakt heb en hoe ik uiteindelijk tot mijn conclusie ben gekomen.”
25
Probleemstelling Voordat ik aan mijn stage opdracht begonnen was wilde 2TCI graag weten hoe de markt voor mobiele applicaties er uit zag. Dit is namelijk een vrij nieuwe markt die nog volop in ontwikkeling is. Daarom heb ik voor dit onderzoek een hoofdvraag geformuleerd. Vervolgens heb ik deze hoofdvraag weer onderverdeeld in deelvragen.
Dit gaf een duidelijke en heldere structuur aan het onderzoek. Ook hielp dit mij met het beantwoorden van de probleemstelling. Ik heb in mijn onderzoek op de vragen hieronder antwoord gegeven:
Hoofdvraag: Wat zijn belangrijke afwegingen voor een bedrijf bij het ontwikkelen van een mobiele applicatie? Deelvragen: Wat is de geschiedenis van de smartphone en mobiele applicaties?
Wat zijn de technische mogelijkheden van een hedendaagse smartphone?
Hoe ziet de markt van smartphones eruit?
Hoe kan de merkbekendheid worden vergroot door middel van advertenties en sponsoring van een mobiele applicatie?
Wat zijn de verschillen tussen de mobiele platformen? Wat maakt populaire applicaties een succes?
26
Wat zijn de voor- en nadelen van de platformen?
Uitvoeren Nadat ik voor mezelf een helder beeld had over welke vragen beantwoord zouden worden bij het onderzoek, kon ik daadwerkelijk beginnen met het onderzoek. De eerste stap die ik genomen had was de geschiedenis te onderzoeken van de mobiele platformen en de applicaties. Ik hoefde hiervoor niet lang terug de tijd in, maar dit gaf me wel inzicht over hoe markt en het product zich hadden ontwikkeld. De tweede stap die genomen had in mijn onderzoek was het bekijken naar de markt van smartphones / tablets en mobiele platformen. Ik heb hierbij gekeken naar het marktaandeel en de verschillen hier tussen. Ik heb alle platformen meegenomen in het onderzoek, maar heb me voornamelijk geconcentreerd op iOS van Apple en Android van Google. Hiervoor heb ik gekozen omdat dit de twee grootste mobiele platformen waren op dat moment en samen meer dan 50% marktaandeel hadden. Ik heb voor mijn onderzoek verschillende bronnen geraadpleegd. Vrijwel ieder platform had zijn eigen ontwikkelaarswebsite. Hierop kon ik veel betrouwbare informatie vinden, zoals met welke programmeertaal er gewerkt wordt of wat de
“Ik hoefde niet lang terug de tijd in, maar dit gaf me wel inzicht” Prijs van een iOS app in dollars
Gratis
$1,99
13%
36%
> $2,99
22%
29% $0,99
mogelijkheden zijn met het platform. Deze websites heb ik vooral gebruikt als ik bijvoorbeeld meer wilde weten over moeilijke termen of de technische kant van een platform wilde onderzoeken. Naast deze websites zijn er ook veel onderzoeksbureaus die al onderzoek gedaan hebben naar mobiele platformen. Een voorbeeld van een goed en betrouwbaar onderzoeksbureau is Nielsen. Nielsen zit verspreid over de hele wereld en voert marktonderzoeken uit. De laatste tijd doet dit bedrijf veel onderzoek naar mobiele platformen. De resultaten hiervan heb ik gebruikt voor mijn onderzoek.
27
Na het onderzoeken van de mobiele platformen was de derde stap, het onderzoeken naar de functies van smartphones en applicaties. Ik heb de unieke functies van smartphones bestudeerd en gekeken wat de mogelijkheden hiermee zijn. Daarnaast ben ik ook gaan kijken in de App Store en Android Market, twee online winkels waar apps gekocht kunnen worden. Ik heb naar de populairste apps gekeken of naar apps die bekend staan om het unieke gebruik van de functies van een smartphone. Door hiernaar te kijken ontdekte ik welke functies van smartphones ervoor zorgen dat applicaties populair en succesvol zijn. De vierde stap die ik in het onderzoek genomen had, was het bekijken van advertentie- en sponsormogelijkheden binnen applicaties. Ik onderzocht hier hoe een ontwikkelaar geld kan verdienen met zijn applicatie. De vijfde en tevens laatste stap van het onderzoek was dat ik alle voor- en nadelen van zowel mobiele- als webapplicaties tegenover elkaar zette. Uiteindelijk heb ik in het laatste hoofdstuk mijn conclusie en aanbevelingen gedaan. Ik heb dit gedaan op basis van alle bevindingen die in het onderzoek voorkomen.
28
Marktaandeel smartphone
36% 24% 15%
25%
Grafiek marktaandelen
De conclusie die ik had getrokken was kort samengevat: “Elk platform heeft zijn voor- en nadelen. Een platform heeft zijn eigen doelgroep, en daarom is het voor een bedrijf verstandig om een applicatie op meedere platformen te hebben. Een bedrijf heeft dan namelijk een groter bereik bij haar eigen doelgroep.”
Ontwerp Nadat ik de inhoud van het onderzoek geschreven had, heb ik het document ook vormgegeven. Ik heb voor het onderzoek verschillende illustraties ontworpen. Dit heb ik gedaan om data op een visuele manier te presenteren. Daarnaast heb ik ook nog een illustratie gemaakt voor het voorblad.
Testapplicaties Het eerste deel van het onderzoek bestond uit het verslag zelf. Daarnaast heb ik ook uitgezocht hoe de mobiele platformen technisch werken. Ik heb voor zowel Android als iOS kleine testapplicaties gemaakt. Dit was tevens op aanraden van 2TCI en het gaf mij alvast de gelegenheid om de verschillen van deze mobiele platformen te onderzoeken. Ook kreeg ik hiermee basiskennis voor het programmeren van mobiele applicaties. Uiteindelijk heb ik één applicatie ontworpen die gerealiseerd is op Android en iOS. De applicatie heeft op beide platformen dezelfde functies en lay-out. Mijn ervaring hiermee was dat de programmeertaal van Android veel vriendelijker en begrijpelijker was dan die van iOS. Daarentegen was het ontwerpen en creëren van de lay-out een stuk eenvoudig voor iOS dan voor Android
Testapplicatie iOS
Testapplicatie Android
29
5
Eindopdracht 5.1 Concept
5.2 Design
5.3 Programmeren
EINDOPDRACHT
“De opdracht waar ik de afgelopen maanden hard aan gewerkt heb, de app voor AppTree. Van het concept naar het design en ten slotte tot de daadwerkelijke realisatie. Ik zal in dit hoofdstuk hierover uitgebreid vertellen.”
Concept Het idee achter AppTree is dat de gebruiker snel en eenvoudig interessante applicaties kan vinden. De gebruiker moet applicaties kunnen sorteren op zijn voorkeuren. Binnen AppTree kan er gesorteerd worden per categorie, op aanraden van vrienden of op de prijs. De gebruiker kan vervolgens deze apps in zijn AppTree hangen. Er ontstaat zo een AppTree met de gebruiker zijn lievelingsapps. Uiteindelijk kan de gebruiker zijn AppTree delen met vrienden op Facebook. Om dit allemaal te realiseren zal de applicatie de volgende functies bevatten: - een connectie met Facebook. - een connectie met een database. - apps kunnen aan een AppTree gehangen worden. - apps kunnen gesorteerd worden. Om een beter beeld te vormen voor alle functies en technieken die gebruikt gaan worden, had ik een functioneel ontwerp opgesteld. Dit is een document waarin alle functies uitgebreid toegelicht worden, de technieken beschreven worden die gebruikt gaan worden en een schematische weergave van de applicatie. Ik vond het bij het maken van het functioneel ontwerp nog moeilijk om alle technieken te beschrijven. Ik had namelijk nog nooit eerder een mobiele applicatie ontwikkeld, en daarom was het lastig om alle technieken te beschrijven.
32
Moodboard
Voor het design had ik in de conceptfase een moodboard ontworpen. Dit was een verzameling van afbeeldingen die een richting gaf aan de stijl. Het moodboard hielp mij om bepaalde stijl voor ogen te hebben, voordat ik echt aan het design begonnen was.
Login screen 1.
Sign in button Facebook
2.
Connect button Twitter
“Bij het functioneel ontwerp, vond ik het nog moeilijk om alle technieken te beschrijven”
LOGIN
To use AppTree you must sign in with Facebook or Twitter
Sign in with Facebook
1.
Connect to Twitter
2.
© 2011 AppTree
Welcome: Jan Janssen
1.
2.
Home screen 1.
AppTrees
Schematische weergave Login scherm
3.
Travel
News
Friends
1.
Terug
Settings
Games
Music
Weather
Business
Logo
2.
User info
3.
AppTrees
4.
Other pages
4. About
AppTree - Reizen 3.
Jan Janssen
AppTree screen 1.
2.
9
8
11
6 7
5
10
4
13
12
3 2
14
App2
15
4.
Navigation bar
2.
AppTree
3.
Username
4.
Other pages
5.
Facebook button
6.
Twitter butoon
7.
Friends app slider
8.
Other pages
Schematische weergave Home scherm
5. 6.
Apps van vrienden:
App1
App2
7.
App3
App4
App5
Friends
App6
App7
App8
App9
App11
App10
App12
App13
8. Settings
About
Schematische weergave AppTree scherm 33
Design Nadat ik het concept van de applicatie in kaart gebracht had, ben ik de vormgeving van de applicatie gaan ontwerpen. Ik ben stap voor stap het logo, de huisstijl en de lay-out gaan ontwerpen.
Het logo Ik ben van start gegaan met het ontwerpen van het logo. Dit gaf al direct een stijl waarin de huisstijl en de vormgeving in ontworpen zal worden. Voor het logo had ik van te voren voor mezelf vastgesteld dat in het logo iets van een boom en een icoontje van een app in verwerkt zal worden. Verder zou het logo simpel en duidelijk blijven. Dit om goed herkenbaar te zijn. De eerste stap die ik genomen heb bij het ontwikkelen van het logo was het maken van schetsen. Ik heb 30 verschillende schetsen gemaakt als logo. Ik heb een aantal schetsen hiervan uitgekozen en vervolgens nog een aantal variaties hierop gemaakt.
Schets 1
Schets 2
Logo uitwerking 1
Logo uitwerking 2
De tweede stap was het digitaal uitwerken van het logo. Net als bij de schetsen heb ik hier wederom verschillende variaties op gemaakt. Uiteindelijk heb ik een logo uitgekozen en heb dit op een aantal punten nog verbeterd. Het logo heb ik ook getest in zwartwit, als omlijning en op verschillende kleuren achtergrond. Definitieve logo 34
De betekenis Het logo weerspiegelt een boom waarbij de bladeren een icoontje van een app vormen. De boomstam van het logo bestaat uit de letters “Tr” van AppTree en uit het bovenste gedeelte is de silhouet van de letter “A” (AppTree) .
A
Tr
35
Design De huisstijl Lichtgrijs (Opacity 25%)
CMYK: 8,59 - 6,25 - 6,64 - 0 RGB: 230 - 230 - 229 HEX #: 8D643A
Lichtgroen
CMYK: 83,57 - 9,37 - 100 - 0,79 RGB: 7 - 161 - 74 HEX #: 07A14A
Donkergroen
Lichtgroen
CMYK: 83,5 - 9,47 - 100 - 0,76 RGB: 9 - 161 - 74 HEX #: 09A14A
CMYK: 90 - 33 - 98 - 26 RGB: 4 - 105 - 55 HEX #: 046937
Donkerbruin
CMYK: 36 - 57 - 84 - 22 RGB: 141 - 100 - 58 HEX #: 8D643A
Nadat ik het logo ontworpen had, ontstond er langzaam een stijl waarin de huisstijl ontworpen zal worden. Ik ben als eerste het kleurgebruik voor de huisstijl gaan bepalen. Ik heb besloten om dezelfde kleuren groen en bruin van het logo te gebruiken. Ook voegde ik hierbij de kleuren grijs, wit en zwart aan toe. Na het kleurgebruik heb ik verschillende gebruiksregels opgesteld. Deze regels gingen over zowel het
36
Lichtbruin
CMYK: 32 - 49 - 74 - 10 RGB: 155 - 125 - 82 HEX #: A57D52
beeldmerk als het woordmerk. De regels beschreven hoe het logo gebruikt mocht worden. Een voorbeeld was dat het beeldmerk niet in een andere kleur gebruikt mocht worden. Ook mocht het beeldmerk niet geroteerd worden. Hierna was de typografie, oftewel het lettertype, dat gebruikt gaat worden in de huisstijl aan de beurt. Bij de typografie heb ik onderscheid gemaakt tussen lettertypen die gebruikt worden in drukwerken en lettertypen die gebruikt worden voor het web. Er zit hierbij
9
6
5
12
10
13
7 4
11
3 NEWS
2
8 15
1
Icoontjes
namelijk een degelijk verschil tussen de leesbaarheid van de tekst. Voor drukwerken heb ik twee verschillende lettertypen uitgekozen. Een voor de gewone leestekst en een voor de titels en koppen. Voor de web lettertypen heb ik ook gekozen voor twee lettertypen. Een voor het gebruik op een Windows computer en een voor een Mac computer, dit omdat er bij beide een ander lettertype geinstalleerd staat.
14
AppTree
De laatste stap voor de huisstijl was het ontwerpen van verschillende icoontjes. Ik heb bij deze stap een app icoon gemaakt met daarnaast nog icoontjes die gebruikt worden voor de buttons binnen de applicaties. Ook de AppTree die centraal staat in de applicatie had ik ontworpen. Uiteindelijk heb ik een huisstijl document opgesteld waarin alle regels voor het gebruik in opgesteld staan, de kleurcodes en het lettertypen beschreven worden. Dit document dient voor iedereen die in de toekomst met de huisstijl te maken krijgt. 37
Design De lay-out Met het logo en de huisstijl was de basis voor het design van de applicatie gelegd. Alleen de lay-out van de applicatie was nog niet ontworpen. Voor elke pagina heb ik een ontwerp gemaakt. De lay-out gaf uiteindelijk de definitieve uitstraling aan de applicatie. Daarom was het van belang dat er net als bij het logo en de huisstijl ook hier goed over nagedacht moest worden. Alle pagina’s moesten in samenhang zijn met elkaar zodat de applicatie één geheel vormde. Ik ben hiervoor gaan zoeken wat voor stijl ik bij een “AppTree”, oftewel een boom vond passen. Ik kwam hierbij gauw uit om een hout-achtige stijl te gaan gebruiken voor de lay-out. Na een aantal schetsen ben ik de lay-out uiteindelijk gaan uitwerken. Hierbij zaten nog wel een aantal restricties waarop ik moest letten. Apple stelt namelijk strenge voorwaarden aan het design van een applicatie. Zelfs toen de lay-out klaar was en ik bezig was met het programmeren van de applicatie heb ik nog een aantal wijzigingen aangebracht aan de lay-out.
38
Login scherm
Home scherm
AppTree - Weer AppTree - Reizen
AppTree - Social Media
AppTree - Sport 39
Programmeren De laatste en tevens langste fase van mijn stage opdracht betrof het programmeren van de applicatie. Dit kwam deels doordat er lastige functies in geprogrammeerd gingen worden maar deels ook omdat ik nog geen ervaring had met het programmeren voor iOS apps. Voordat ik begon met het programmeren, wist ik dat het een hele uitdaging ging worden en ik veel zou gaan leren. Het begin ging moeizaam maar na een aantal weken begon ik bepaalde functies steeds sneller te kunnen inbouwen. Tijdens het programmeren ben ik in fases aan het werk gegaan. De eerste fase was het maken van de Facebook connectie met de applicatie. Facebook heeft zelf een website voor ontwikkelaars waarop veel informatie en hulp te vinden was, hiervan heb ik ook veelvuldig gebruik van gemaakt. De tweede fase was het aanmaken van alle schermen in de applicatie. Voorbeelden hiervan zijn het menu, de vriendenlijst en de schermen voor de AppTrees. De derde fase was het inladen van apps. De apps die bij een gebruiker geïnstalleerd stonden, konden worden getoond. Ook gegevens die opgeslagen stonden in de database konden ingeladen worden. De laatste fase in het programmeren van de applicatie was het opslaan van gegevens in de database. De gebruikersgegevens werden opgeslagen maar ook als de gebruiker zijn AppTree met apps vult wordt dit opgeslagen.
40
“Ik wist dat het een uitdaging ging worden en ik veel zou gaan leren”
Bij het ontwerp van de applicatie had ik alleen maar een beeld, bij het programmeren begon de applicatie echt interactief te worden. De functies die langzaam ingebouwd werden maakte dat de applicatie daadwerkelijk bestuurd kon worden. Achteraf gezien merk ik dat ik veel beter ben geworden in programmeren. Natuurlijk heb ik een nieuwe programmeertaal geleerd, maar daarnaast ben ik ook echt beter geworden in het programmeren zelf. Iets wat ik bij mijn opleiding niet geleerd zal krijgen, heb ik bij mijn stage opdracht wel geleerd. Voor het programmeren heb ik veel geleerd van de informatie die online op het internet beschikbaar was. Ik heb veel opgezocht en veel hulp ingewonnen op fora. Maar daarnaast ben ik ook goed begeleid door 2TCI. Ik heb hulp kunnen vragen aan iedereen. Vooral Marcel heeft mij hierbij goed kunnen helpen. Hij had zelf al ervaring met het ontwikkelen met apps voor iOS en kon mij hierbij dus goed helpen
41
6
Overige opdrachten 6.1 IsPietFailliet?
6.2
Muziek Alstublieft
6.3 MomaKids
stage opdracht heb ik ook nog een aantal klegedaan tijdens mijn stage. Ik heb een lay-out een iPhone applicatie, een logo en webdesign een muziekschool en een webdesign voor een webshop gemaakt.”
OVERIGE OPDRACHTEN
“Naast de grote ine opdrachten ontworpen voor ontworpen voor
IsPietFailliet? Voor Omnicas was 2TCI bezig om een iPhone applicatie te ontwikkelen. Omnicas is een incassobureau en wilde graag een applicatie waarmee gekeken kan worden of iemand zijn rekeningen kan betalen, oftewel of iemand failliet is. De applicatie heette daarom ook Is Piet Failliet. De realisatie van de applicatie werd al gedaan, alleen de lay-out van de applicatie was er nog niet. 2TCI had mij gevraagd of ik de lay-out wilde realiseren voor de app. Dit leek mij erg leuk en daarom ging ik daarvoor aan de slag. De applicatie zal uit een aantal pagina’s bestaan die vormgegeven zouden worden in de kleuren van Omnicas. Ze hadden al een bestaande website, die ik gebruikt heb in de vormgeving voor de applicatie. Bij het ontwerpen van de lay-out kreeg ik ook al te maken met de restricties van Apple over het design van applicaties. Dit was ook een lastig punt bij mijn stage opdracht. Gelukkig kon ik het design door een aantal kleine wijzigingen, goed maken voor de restricties van Apple.
Lay-out
Het belangrijkste wat ik bij het ontwerpen van de lay-out geleerd had, was dat het ontwerpen heel anders is voor mobiele schermen dan voor bijvoorbeeld websites. Sinds december is de applicatie ook daadwerkelijk te downloaden vanuit de AppStore.
44
App Icon
Laadscherm
Hoofdscherm
Zoekscherm
45
Muziek Alstublieft Muziek Alstublieft is een nieuw opgerichte muziekschool. Muziek Alstublieft verzorgt muzieklessen en workshops aan kinderen op scholen. Muziek Alstublieft had al een bestaande website, alleen was dit nog niet helemaal wat ze wilden. Aan mij werd gevraagd of ik voor de website van Muziek Alstublieft een webdesign en logo kon ontwerpen. De structuur van de website bleef hetzelfde, maar ik had zelf verder de vrijheid om er iets moois van te maken. Het definitieve logo is anders dan de eerste opzet. De eerste opzet was in de vorm van een gitaar met daarin de letters MA (Muziek Alstublieft). Maar omdat in het logo alleen een gitaar in voorkwam, werd dit te specifiek gevonden. Bij het definitieve logo heb gebruik gemaakt van een muziek notenbalk. Een notenbalk wordt bij allerlei verschillende muziekinstrumenten gebruikt en daarom werd het algemener.
Eerste opzet van logo
Muz iek Alst u -blie ft Definitieve logo
46
47
MomaLights MomaKids is een webshop gespecialiseerd in de inrichting van babykamers. Ze wilden hun webshop gaan onderverdelen in verschillende productcategorieën waaronder babyverlichting, oftewel MomaLights. Voor elke onderverdeling kwam er een apart webshop. Ik heb voor MomaLights een webdesign ontworpen. De voorwaarden hiervoor was dat het ontwerp moest passen binnen een Magento template (software om webshops mee te realiseren). Verder zou de lay-out ook moeten voldoen aan de huidige kleuren lime en oranje. Bij het werken aan de opdracht voor MomaKids heb ik geleerd om feedback te krijgen van de opdrachtgever en dit vervolgens op een goede manier zien toe te passen. Ik heb namelijk van MomaKids een aantal keer feedback gekregen. Dit gaf mij de mogelijkheid om deze feedback te analyseren en toe te passen.
48
49
7
Afsluiting 7.1 Conclusie
7.2 Evaluatie
“U bent nu bijna aan het eind gekomen van mijn stageverslag. Ik heb u in de vorige hoofdstukken verteld hoe de vijf maanden van mijn stage eruit zagen. Maar wat is nu dan het belangrijkste wat me bijgebleven is? En wat heb ik geleerd?”
AFSLUITING
Conclusie Ik heb bij mijn stage bedrijf 2TCI veel kunnen leren omdat ik hierbij veel kennis direct in de praktijk kon toepassen. Ik heb daarnaast ook veel meer geleerd gekregen over iets wat ik op school waarschijnlijk niet gekregen zal hebben. Mijn hele stage stond vrijwel in het teken van een nieuwe vorm van media, namelijk mobiele applicaties. Ik was hiervoor al geïnteresseerd in de mogelijkheden van mobiele applicaties, maar ik kon dit tijdens mijn stage ook daadwerkelijk realiseren. Mijn stage opdracht heb ik grotendeels zelfstandig uitgevoerd. Ik heb zelf informatie ingewonnen en heb zelf oplossingen bedacht. Naast zelfstandig werken heb ik natuurlijk ook wel samengewerkt. Ik heb regelmatig mijn voortgang laten zien en heb ook overlegd met mijn begeleider. Ik ben nu in staat om mobiele applicaties te ontwikkelen op zowel visueel als op technisch gebied. Daarnaast kan ik ook zelfstandig aan een grote opdracht werken en weet ik hoe het is om binnen een bedrijf te werken. In het volgend hoofdstuk ‘Evaluatie’ zal ik u meer vertellen over wat ik geleerd heb en wat mijn bevindingen waren met mijn stage.
52
“Ik ben nu in staat om mobiele applicaties te ontwikkelen.”
53
Evaluatie Vanaf de eerste dag ben bij 2TCI elke keer weer goed ontvangen. 2TCI is een klein bedrijf waardoor iedereen eigenlijk maar een paar meter vanaf elkaar vandaan zat. Dit maakte het mogelijk dat ik gemakkelijk om hulp kon vragen als dit nodig was. De werksfeer binnen 2TCI was informeel. Er was eigenlijk geen onderwerp waarover niet gepraat kon worden. Er heerste altijd een gezellige en ontspannen sfeer. 2TCI zorgde ervoor dat ik niet onder allerlei deadlines stond en gewoon aan mijn stage opdracht kon werken. Ook werd er helemaal niet moeilijk gedaan als ik bijvoorbeeld door afspraak iets later kwam. Het onderzoek dat ik aan het begin van mijn stage gehouden heb gaf mij inzicht in de markt en mogelijkheden van de smartphones en mobiele applicaties. Verder kreeg ik door middel van het maken van testapplicaties kennis van hoe mobiele applicaties geprogrammeerd worden. Aan mijn stage opdracht heb ik de meeste tijd besteedt gedurende mijn stage. Ik heb ervaren dat een opdracht soms helemaal kan veranderen en dat daarvoor een andere opdracht in de plaats kan komen. Ook heb ik bij mijn stage opdracht geleerd om zelfstandig te werken, door het opzoeken van informatie en het oplossen van problemen. Voor de applicatie kreeg ik de taak om hem zowel
54
visueel als technisch te realiseren. Ik kon mij dus op verschillende gebieden ontwikkelen. En daarom sluit mijn stage opdracht goed aan bij mijn opleiding. Ook heb ik bij de overige opdrachten veel geleerd. Het belangrijkste wat ik hierbij geleerd had, was het werken aan opdrachten in een korte tijd. Ook kan ik nu beter omgaan met feedback van de opdrachtgever. De extra opdracht waaraan ik gewerkt had, waren niet zo groot als mijn stage opdracht, maar hierbij was de looptijd wel veel korter. Ik denk dat ik mijn leerdoelstellingen voor mijn stage behaald heb. Ik had vooraf aan mijn stage drie doelstellingen geformuleerd: ‘minimaal 3 opdrachten zelfstandig uitvoeren’, ‘de stage opdracht minimaal drie dagen van te voren af hebben’ en ‘beter te samenwerken door regelmatig en duidelijk te communiceren’. De opdrachten die ik gedaan heb, waren voornamelijk zelfstandig. Ook met mijn stage opdracht heb ik voortdurend op planning gelopen en had dit zelfs al een week voor de deadline af. Ik heb al de opdrachten dan wel zelfstandig uitgevoerd, maar ik heb tijdens mijn stage ook goed kunnen samenwerken. Ik heb nu namelijk kunnen samenwerken in een echt bedrijf. Dit is natuurlijk heel anders dan dat ik dit gedaan zou hebben op school. Ik denk dat ik hiermee mijn leerdoelstellingen behaald heb. Ik had eigenlijk graag gezien dat ik de doelstelling ‘samenwerken’ meer verbeterd
had. Alleen omdat ik voornamelijk zelfstandig aan het werk was, heb ik dit niet veel kunnen verbeteren. Er wordt op school best veel samengewerkt waardoor ik dit komende periodes op school ga verbeteren. Al met al kan ik dus zeggen dat ik in korte tijd veel geleerd heb. Ik ben nu in staat om mobiele applicaties te ontwikkelen zowel visueel als technisch. Ik heb geleerd om in een echt bedrijf samen te werken en ik heb ook heel goed geleerd om zelfstandig aan een grote opdracht te werken. Ik heb daarnaast mijn doelstellingen behaald, waardoor ik kan zeggen dat de vijf maanden stage voor mij goed geslaagd is
EXIT 74 A
55
