Issuu on Google+

Afstudeerproject Erik van Heck - 57545 - 2014


(Welkom)

2


(

w Inleiding Als eerste wil ik, Erik van Heck genummerd 57545 jou, de lezer, van harte welkom heten in dit boekje. In dit afstudeerverslag zal ik gedetailleerd vertellen hoe mijn periode is verlopen, en welke werkzaamheden ik verricht heb binnen PersC. PersC is een allround communicatiebureau. Rotterdams bloed. Sterk van advies tot uitvoering. Offline en online. Plezierige partner. Flexibel en efficiënt georganiseerd. In dit document bewijs ik, met behulp van mijn afstudeerbedrijf, dat ik bekwaam genoeg ben om mijn eindexamen te kunnen starten en de werkprocessen die dat bewijzen met een voldoende heb afgerond. Samenvattend is de opdracht deze periode om een mobiele applicatie te ontwikkelen voor het communicatiebureau PersC. De ontwikkelaars van PersC kunnen de app als stramien gebruiken en daarna aanpassen voor opdrachtgevers. Veel plezier met het lezen van dit verslag! Met vriendelijke groeten, Erik van Heck

(

w Te bewijzen werkprocessen • • • • • • • • • • • • • • • • • •

1.1: Stelt de vraag en/of informatiebehoefte vast 1.2: Maakt een plan van aanpak 1.3: Levert een bijdrage aan een functioneel ontwerp 1.4: Maakt een technisch ontwerp 1.5: Richt de ontwikkelomgeving in 2.1: Legt een gegevensverzameling aan 2.3: Realiseert een (cross)media uiting en/of systeem 2.5: Test het ontwikkelde product 2.6: Optimaliseert de game of (cross)media-uiting 2.7: Bewaakt de voortgang en evalueert het project 3.1: Maakt of levert een bijdrage aan het implementatieplan 3.3: Implementeert een applicatie of (cross)media-uiting en/of systeem 3.4: Evalueert een implementatie 4.1: Onderhoudt applicaties of (cross)media-uiting 4.2: Verzamelt, controleert, bewerkt en archiveert (cross)mediabestanden 4.3: Bewaakt de samenhang van media-uitingen 4.4: Stelt script samen ten behoeve van het samenvoegen van content 4.5: Beheert de content

3


(

Kerntaak 1: ontwerpen van de applicatie 1.1

Stelt de vraag en/of informatiebehoefte vast

1.1.1

Analyse en beeldvorming

Binnen de organisatie PersC-communicatie hebben zij een eigen CMS-systeem laten ontwikkeld genaamd PIM. De mobiele applicatie word hieraan gekoppeld zodat er interactief gehandeld kan worden vanuit de beheerders binnen de organisatie. Zo is het mogelijk om pagina’s aan te maken in het, al bestaande, PIM-systeem, en deze aan te vinken zodat ze zichtbaar worden in het menu van de applicatie. Daarnaast zal er een scherm in de applicatie ontwikkeld worden waarbij een Google Maps-map weergegeven worden. Op deze map komen ‘markers’ met logo’s van klanten van PersC-communicatie. Nadat op een van deze ‘markers’ is gedrukt, verschijnt er een nieuw scherm waarop informatie van het betreffende project bekeken kan worden inclusief links, foto’s en locaties. Onderdeel al goedgekeurd door begeleidend docent

1.1.2

Doel(en) en doelgroep(en)

Het doel van de mobiele applicatie is het informeren van de gebruikers ervan. Onder informeren valt het geven van informatie, maar ook het laten interesseren in de projecten van PersC-communicatie. De doelgroep is daarbij dan ook de geïnteresseerde gebruikers die PersC als potentiële opdrachtnemer zien. Een voorbeeld is een potentiële klant van PersC, welke benieuwd is naar de projecten en de locaties waar de organisatie mee gewerkt heeft. Dit kan door deze mobiele applicatie dus kenbaar gemaakt worden. Onderdeel al goedgekeurd door begeleidend docent

1.2

Maakt een plan van aanpak

In bijlage A treft u het Internet Project Plan aan.

5


(

1.3 Levert een bijdrage aan een functioneel ontwerp

Applicatie

Map met projecten Detailscherm CMS-pagina’s

PersC Internet Management

Module projecten

Projecten toevoegen

Projecten wijzigen

Module notificaties

Notificatie versturen

6

Verstuurde bekijken

Projecten verwijderen


1.4 Maakt een technisch ontwerp Zie punt 1.2 voor het technisch ontwerp in het Internet Project Plan

1.5 Richt de ontwikkelomgeving in Door middel van VirtualBox hebben we een virtuele server geĂŻnstalleerd met CentOS. De installatie gaan we uitvoeren. We beginnen met het kiezen van het juiste toetsenbord.

 

Daarna configureren we het netwerk door een computernaam toe te wijzen. We noemen de server afstuderen.office.persc.nl. Het adres office.persc.nl is een interne verwijzing.

7


We kiezen het dichtbijzijndste land voor de juiste tijdzone

 

We formatteren de gehele server en installeren een geheel nieuwe server

Het installeren duurt tijdje (gemiddeld een half uur)

 

8

 

 


 

Nadat CentOS is geinstalleerd, configureren we het statische IP-adres.

Zeker omdat binnen PersC er in principe niet zomaar IP-adressen worden uitgedeeld moeten we dit handmatig instellen per device.

Evenals de gekoppelde DNS-server

 

9


Daarna gaan we een aantal onderdelen installeren. Typ de volgende commando’s: • PHP, MySQL en de MySQL-extensie:

yum install php php-mysql mysql-server

• Apache:

yum install httpd

• FTP-server (vsFTP) :

yum install vsftpd

Typ, als er gevraagd word Is this OK?, op Y en druk op Enter.

  De installatie is nu gereed, maar we moeten nog rechten instellen voor de FTP-server. Typ “nano /etc/vsftpd/vsftpd.conf”. Dit is het configuratiebestand van vsFTP. Zoek naar de regel anonymous_users en zet deze op OFF Zoek naar de regel write_local en zet deze op ON Tik CTRL + X en Y om het bestand op te slaan. Om iedereen in het netwerk (en daarbuiten) toegang te geven tot de webserver en MySQL dienen we de CentOS-firewall uit te schakelen. Typ “service iptables stop”. Doe dit nooit in een productieomgeving! We hebben nu een werkende, CentOS-server met Apache (icm PHP) en MySQL.

10

 


(

Kerntaak 2: realiseren van een applicatie 2.1

Legt een gegevensverzameling aan

Binnen PersC hebben alle ontwikkelaars een eigen ontwikkelomgeving. Dit heet “dev” binnen het netwerk van PersC. Door middel van een intern IP-adres aan elke omgeving kan er getest worden en een echte omgeving gesimuleerd worden. Hierin hebben alle omgevingen hun eigen MySQL-server met phpMyAdmin. Daarnaast is er in het verleden door 5 ontwikkelaars een eigen PersC- CMS-systeem ontwikkeld welke nu gebruikt worden. Daar is de gegevensverzameling ook op afgestemd. Hierop zijn wijzigingen toegepast om de app samen te werken met het PIM-systeem. Daarbij waren uiteraard ook database aanpassingen voor nodig. Deze laten we hieronder zien.

2.3

 

Realiseert een (cross)media uiting en/of systeem

Zoals beschreven in de inleiding heb ik een mobiele applicatie ontwikkeld. Maar het PIM-systeem is in origine geschreven en ontwikkeld door Victor Cuijpers, de begeleider binnen mijn afstudeerbedrijf. Om hem een goed product achter te laten, heb ik bij alle functies en variabelen binnen de applicatie commentaar geschreven.

11


Zo ook de mappenstructuur voor een overzichtelijke indeling:

 

12

 


2.5

Test het ontwikkelde product

De PersC-applicatie is bestemd voor intern gebruik door de marketing- en verkoop experts. In principe wordt dit gebruikt op een Apple iPad. Daarintegen heb ik de app ook geschikt gemaakt voor het gebruik op een iPhone. Dit benodigde wel de nodige aanpassingen, zoals het responsive maken zodat het scherm op alle formaten goed eruit komt te zien. Het PIM-systeem gaan we testen op verschillende browsers. Apple Safari:

Windows 7 Internet Explorer 9:

13


2.6

Optimaliseert de game of (cross)media-uiting

De belangrijkste optimalisatie binnen een mobiele applicatie is: snelheid! Een gebruiker moet niets merken van het inladen van de data, laden van afbeeldingen of scripts. Daarom is in de PersC-app zo veel mogelijk gebruikt gemaakt van dezelfde afbeeldingen, met het juiste formaat en structuur. Daarnaast door middel van metatags worden scherm resoluties goed herkend en word de layout aangepast.

 

2.7

Bewaakt de voortgang en evalueert het project

Tijdens het project waarmee ik gewerkt heb, hebben we van ten voren een planning gemaakt in Excel waarmee we de voortgang konden bewaken. Tijdens het schrijven van mijn Internet Project Plan, heb ik van ten voren een planning in Excel gemaakt waarmee ik de voortgang kon bewaken van mijn project.

 

14


Vaak is dit goed gegaan, maar er is wel een en ander verschoven in de tussentijd. Deze, bijgewerkte, planning treft u eronder aan. Dit heeft als gevolg gehad dat ik een stukje later ben geëindigd dan in de originele planning is neergezet. Uiteindelijk heeft dit geen verdere gevolgen gehad voor de klanten of de opdrachtgevers. Dit heeft te maken met het feit dat er ook algemene stage werkzaamheden waren.

In de tussentijd hebben we een logboek bijgehouden waarin elke keer beschreven werd / wordt wat we gedaan hebben en wat die dag aan de website veranderd is.

 

Binnen PersC hebben wij een urenregistratie systeem, genaamd Symsys. Daarin moet elke medewerker elke dag bijhouden welke werkzaamheden voor welk project heeft verricht. Onderstaande lijst komt dan ook uit het urenregistratie systeem zelf. Datum 6 januari 7 januari 21 januari 22 januari 24 januari 7 februari 14 februari 17 februari 3 maart 5 maart 6 maart 10 maart 12 maart

Werkzaamheden Begonnen met het IPP-plan in overleg met begeleiders IPP-plan afgerond en opgestuurd naar Henk Bijlsma Begonnen met eindproject, inventarisatie Begonnen met PIM-koppeling in PHP Verder gegaan met PIM-koppeling De Notificatie-module gebouwd binnen PIM PIM-koppeling bijna gereed, begonnen aan app zelf Notificaties mogelijk gemaakt in de app Ontwerp ingebouwd in de app, vandaag gereed Begonnen aan bewijzendocument afstudeerproject Werkprocessen behandeld en ontwikkeld in de app Verder gegaan met de werkprocessen en document Net zoals 10 maart verder gegaan, document bijna gereed

Aan het einde van mijn afstudeerproject heb ik, samen met mijn praktijkbegeleiders, het geheel geëvalueerd en zijn tot de conclusie gekomen dat er een goed product ontwikkeld is en het project goed verlopen is. Wel zijn er aandachtspunten zoals toch netter werken en meer SVN-kopieën maken.

15


(PersC inspireert)


(

Kerntaak 3: implementeren van de applicatie 3.1

Maakt of levert een bijdrage aan het implementatieplan

Samen met de praktijkbegeleider ga ik de applicatie implementeren vanaf de eigen ontwikkelde ontwikkelserver naar de productieserver van PersC. Deze dedicated server staat in een datacentrum bij Spothost.nl. Handelingen die ik ga volgen om de implementatie tot een succes te laten komen: 1.

Download en installeer het programma FileZilla

2.

Inloggen op de ontwikkelserver door middel van de FTP-gegevens

3.

Download de ontwikkel bestanden naar de lokale computer

4.

Maak verbinding met de PersC-server door middel van de FTP-gegevens

5.

Upload de ontwikkel bestanden naar de externe server vanaf de lokale PC

6.

Open http://172.20.20.48/phpmyadmin (lokale ontwikkel server phpMyAdmin)

7.

De database “lokaal” selecteren en Exporteren naar een .sql-bestand

8.

Open http://persc.nl/phpmyadmin (externe productie server phpMyAdmin)

9.

Importeer het .sql-bestand door middel van Importeren bovenin de balk

10.

Test de website door naar http://persc.nl/admin te gaan.

Als de implementatie succesvol is afgerond, krijgen we hier de PersC PIM-modulen te zien en kunnen we Projecten wijzigen en Notificaties versturen. Uiteraard kunnen er zaken verkeerd gaan. Zo kan het zijn dat er een verschil zit tussen de softwareversies tussen de twee omgevingen. Omdat we de ontwikkelserver zelf hebben ingericht, hebben we hier rekening mee gehouden. Daarnaast kan het zijn dat de productieserver foutmeldingen geeft omtrent de MySQL-database. Dit proberen we eerst uit voordat we de implementatie uitvoeren. We creëren hiervoor een tijdelijke MySQL-database op de productieserver. Dit lukte, na controle, in één keer.

18


3.2

Implementeert een applicatie

Uiteraard moeten we eerst de MySQL-database overzetten. Dit doen we door naar http://afstuderen. office.persc.nl/phpmyadmin te gaan. Daar kiezen we de database en drukken we op Exporteren.

 

Dit exporteert alle data in een .sql-bestand. Deze slaan we op het bureaublad op.

Op de productieserver importeren het .sql-bestand in phpMyAdmin. In het lokale bestand config.php in de map includes wijzigen we de gegevens naar de productie database gegevens. Zo kan er niets verkeerd gegaan met de MySQL-koppeling.

 

Daarna kopiëren we de huidige bestanden vanaf de huidige locatie. We loggen in via FileZilla naar de ftp-server van afstuderen.office.persc.nl.

19


Deze bestanden kopieer ik naar de lokale computer als tijdelijke tussen ruimte. Als dit klaar is, log ik in op de productie server via ftp://persc.nl met de gegevens. Daar kopieer ik de lokale bestanden naar de productieomgeving.

 

 

20


3.4

Evalueert een implementatie

Tijdens het evalueren hebben we goed proberen op te letten op ‘oude, bekende’ fouten die in vorige implementaties voor zijn gekomen. Dit is bijvoorbeeld het vergeten van het wijzigen van de MySQLverbindings gegevens. Dit is dit keer wel in één keer goed gegaan, en de implementatie is dus geheel succesvol verlopen.

 

Uiteraard moeten we wel extra controles uitvoeren om 100% zeker van te zijn dat alles goed verlopen is. Daarom controleren we de MySQL-database, welke correct geïmporteerd is:

 

21


(

Kerntaak 4: onderhoud en beheert de applicatie 4.1

Onderhoudt applicaties of (cross)media-uiting

Door middel van het onderhoudsprogramma SmartSVN kunnen we versies bijhouden als we samen in een team werken. Na elke wijziging die we dan ‘officieel’ goedgekeurd hebben (samen met de praktijkbegeleider), committen we deze naar de SVN-server. Deze server houdt een logboek bij met de wijzigingen. Bij elke commit moeten we ook tekstueel aangeven wat er gewijzigd is.

 

22


4.2

Verzamelt, controleert, bewerkt en archiveert mediabestanden

Per extensie heb ik gekeken wat voor programma ik het beste kon gebruiken. Daaruit is de volgende opsomming gekomen: 1.

Afbeeldingen (.png, .jpg. gif): Adobe Photoshop CS4

2.

PHP-bestanden: Dreamweaver CC (Creative Cloud)

3.

Documenten (.docx, .dox): Microsoft Office Word 2011 (Mac)

4.

PDF-bestanden (.pdf): Adobe Acrobat Professional

5.

iOS-bestanden (.h- en .m): Apple Xcode

Tevens heb ik elke afbeelding geoptimaliseerd voor de betreffende doeleinden. Zo heb ik bij afbeeldingen (als voorbeeld) de afbeelding verkleint tot de hoogte en breedte welke hij ook echt daadwerkelijk wordt weergegeven in de PersC-app. Dit betekend dat er geen afbeeldingen zijn die weergegeven worden als 100x100 en deze niet op het achtergrond als 1000x1000 opgeslagen zijn. Er is één uitzondering, en dat is de marker op de map. Dit moet namelijk groter zijn, anders worden het blokkerige (pixelige) afbeeldingen en dat is uiteraard niet de bedoeling.

4.3: bewaakt de samenhang van media-uitingen Per mediastroom / uiting geprobeerd heb ik het uiterlijk op zo veel mogelijk manieren op elkaar te laten lijken. Zo is de iPad-versie beschikbaar in een portrait maar ook landscape versie. De iPhoneversie ziet er hetzelfde uit, alleen in een kleiner formaat. Daarmee volstaat het uiterlijk (en dus de huisstijl) geheel voor de bezoekers. Dit geeft een rustig en vertrouwd gevoel voor de bezoekers van de website. Toen er begonnen werd aan de PersC-app werd er veel vrijheid gegeven. “Als de app er maar goed uitziet”, werd gezegd. Daarom heb ik, samen met een ontwerper van de studio, er voor gezorgd dat een goed uitziende en werkzame app werd.

23


Het PIM-systeem waarin de projecten en de notificaties beheerd kunnen worden, is al ontworpen toen het ontwikkeld werd. Dit lijkt wel erg op het ontwerp, met dezelfde kleuren. De samenhang tussen de formaten van de apparaten en het PIM-systeem. verschillende platformen

 

 

24


25


4.4: stelt script samen ten behoeve van het samenvoegen van content Door middel van het, al bestaande, PIM CMS-systeem kunnen de beheerder(s) van de app en persc.nl de persc.nl-website bijwerken, maar nog belangrijker: de app bijwerken. Binnen PIM heb ik een module Notificaties ontwikkeld waarmee push-notificaties verstuurd kunnen worden naar de gebruikers van de app. Daarnaast kunnen de beheerder(s) binnen de module Projecten een specifiek project koppelen door een locatie te selecteren. Zie screenshot hieronder.

  Daarnaast is het al bestaande content beheersysteem voor projecten nog steeds aanwezig. Daarvoor is een TinyMCE-editor gebruikt om de gebruikers een vertrouwd “Word-gevoel” te laten krijgen.

 

26


4.5: beheert de content Op verzoek van de praktijkbegeleider heb ik in de tussentijd wijzigingen bijgewerkt in de PersCapp. Ook naderhand, toen het project eigenlijk gereed was, heb ik wijzigingen doorgevoerd. Dit ging bijvoorbeeld over tekstuele wijzigingen of afbeeldingen. Afgesproken is dat ĂŠĂŠn persoon, Debby, de app bijwerkt. Dit gebeurd nu ook al voor de website (welke ook de data uit het PIM-systeem haalt). Vanaf heden stelt zij ook de bijbehorende locatiegegevens in. Hier kan weinig verkeerd gaan, omdat het alleen een locatie betreft in een overzichtelijk scherm met slechts twee handelingen. Deze locatie betreft een plaatsnaam of een adres in combinatie met een plaatsnaam. In het, al bestaande, PIM-systeem kunnen alleen JPG-afbeeldingen worden geupload.

Gebruikte bronnen Bronnen:

google.nl

wikipedia.nl

persc.nl

glr.nl

interne documentaties

27


Erik van Heck, 57545 Klas i4c4 leerjaar 2013-2014


Afstudeerproject 57545