Afwerken Codecrackers media pagina

Deze week werd de Codecrackers media pagina afgewerkt.
Er werd gekeken dat er een unieke parameter aan de URL werd meegegeven, zodat het mogelijk is dat een mediapagina uniek is voor elk spel.
In de code werd gebruikt gemaakt van het RIJNDAEL_256 algoritme, daardoor kan een teamId geëncrypteerd worden, zodat het niet mogelijk is
om zomaar de URL aan te passen en op een andere mediapagina te komen van een ander team.

Als men nu een foto vergroot of wilt delen op Facebook komt er een reclamebanner van Codecrackers op elke afbeelding, dit wordt gedaan in de PHP code.
Ook werd er een aanvraag naar Facebook verstuurt, zodat het mogelijk is voor andere mensen op een afbeelding op Facebook te plaatsen.

Daarna werd deze website live gepubliceerd op de servers van La Mosca.

Alsook heb ik deze week het spel The Target getest.

Bij deze wil ik ook iedereen bedanken van La Mosca: Inge, Kristof, Charlotte, Yvon, Jelle, Sam, Daan, Werner en Nils voor de toffe stageperiode de vorige 13 weken!
Het was een prachtige stage en ervaring!

Advertenties

Vervolg Codecrackers + Facebook share plugin

codecrackersDeze week heb ik verder gewerkt aan de Codecrackers Media Pagina.
Eerst en vooral werd in het begin van deze week getest of de replay pagina wel werkt 200% werkt op andere browsers,
hierbij werd gezien dat Chrome ‘gemakkelijker’ om gaat met timestamps die niet via de regel zijn geschreven bij Javascript.
Bij Firefox is het dan zo, als men een klein beetje afwijkt van de ‘norm’ om een timestamp in Javascript te definiëren, dat dit de Javascript website volledig kan laten crashen. Daarmee moest ik elke regel code waar ik een nieuwe datum aanmaakte in Javascript (var date = new Date(timestamp);) controleren als dit in het juiste formaat werd geprogrameerd.
Na het herzien van de code werkte de replay pagina op Chrome en Firefox.

De meeste gevreesde browser was Internet Explorer, wat ook het geval was, want de replay pagina werkte niet op Internet Explorer.
Bij Chrome en Firefox was het zo, als men de methode aanroept op de Slider te verplaatsen dat automatisch ook 3 seconden werd opgeteld, bij Internet Explorer was dit niet het geval. Daarmee moest ik in mijn update(); methode (waar ik telkens nieuwe informatie ophaal om bijvoorbeeld de spelers op de kaart te laten verplaatsen), enkel voor Internet Explorer 3 seconden optellen bij de tijd. Dus eigenlijk zit er in mijn code, een kleine IE hack, die enkel geschreven is voor de browser van Internet Explorer.

Het is ook bedoeling, voor men op de replay pagina klikt, dat men een overzicht krijgt van de teams die gespeeld hebben, met daarbij vermeld wanneer de teams de eindlocatie hebben gevonden met daarbij hun foto. Er werd ook gevraagd om een ‘Facebook share’ knop bij de foto te plaatsen. Als de speler op een foto klikt moet deze doormiddel van de Facebook PHP API gedeeld worden op Facebook. Er moet een kleine reclame voor La Mosca bij de omschrijving komen van de foto, alsook moet er een reclamebanner van “Codecrackers” bovenaan de foto geplaatst worden. Dit is gelukt, maar deze Facebook API kan ik enkel gebruiken met mijn User ID aangezien ik nog een aanvraag moet indienen bij Facebook om deze pagina werkzaam te maken voor alle Facebook gebruikers. Een voorbeeld van de mediapagina kan men terugvinden in de afbeelding die te vinden is bij deze post. Volgende week zal ik kijken hoe ik door middel van een encryptie mee te geven met een link, zodat het niet mogelijk is dat men bijvoorbeeld spellen kan bekijken van andere spelers.

Vervolg Codecrackers media pagina

Deze week heb ik het vervolg gemaakt van de Codecrackers media pagina.
Het is vanaf nu mogelijk dat een speler van een bepaald spel doormiddel van het GameID het spel kan herbekijken.
De speler ziet op een kaart de verschillende punten staan, dit zijn de tipslocaties, marktlocaties, eindlocatie,… (de punten die specifiek voor dit spel zijn).

Om de 3 seconden werd er tijdens het spel de locaties in de applicatie de locaties van de spelers doorgestuurd naar de databank (in theorie),
daardoor is het mogelijk dat de speler zijn locatie (en die van de andere) op de kaart om de 3 seconden ziet veranderen.
Uiteraard heb ik een module geprogrammeerd zodat het mogelijk is om op verschillende snelheden de kaart te bekijken, zo kan men heel snel ofwel heel traag het spelverloop bekijken.
Doormiddel van een slider het de speler die het spel opnieuw bekijkt, kiezen in welk deel van het spel hij wilt herbekijken.
Ook wordt tijdens deze replay van het spel weergegeven wat de batterijstatus was, alsook wat de connectiestatus was van de GPS signaal en het signaal van de mobiele operator.
Het is de bedoeling een vervolg te maken zodat het mogelijk is op de foto’s van de spelers te bekijken die gemaakt zijn in het begin van het spel en deze doormiddel van de Facebook API te kunnen delen op Facebook.

code

Codecrackers media pagina

Deze week was het mijn opdracht om een Codecrackers media pagina te maken.
Codecrackers is één van de citygames van La Mosca die binnenkort op de markt komt met een nieuwe versie van het spel.
Het spel wordt gespeeld met verschillende teams en de opdracht is doormiddel van tips (op verschillende locaties op de kaart) een eindlocatie te vinden.
Het was al mogelijk om tijdens het spel (live) doormiddel van een sitepagina de teams te kunnen volgen op een kaart en tijdens het spel ook de parameters van het toestel op te vragen (bijvoorbeeld: batterij status),
ook is het mogelijk om real-time berichten te versturen naar de verschillende teams.

Het was mijn opdracht om hierop ook een media-pagina te genereren waar de teams na het spelen van het spel, doormiddel van een website, de punten/groepsfoto’s kunnen herbekijken van hun spel.
Alsook moet het mogelijk zijn om een “replay” van het spel te kunnen weergeven op een wegenkaart.
Zo moet het mogelijk zijn om doormiddel van een “slider” door het spel te wandelen, om zo te kunnen zien wat de locaties waren van de teams op dat gekozen moment.
Alsook moet het mogelijk zijn om de snelheid in te stellen, om zo heel snel of heel traag het spelverloop te kunnen herbekijken, waar de teams hebben gelopen op de kaart.
De pagina wordt geschreven in PHP doormiddel van het Doctrine framework.
Doormiddel van het Doctrine framework wordt alle data opgehaald van de MySQL databank (alle huidige locaties van de teams, de ‘hint’punten op de kaart, …).
Deze informatie wordt doormiddel van JSON doorgestuurd naar de Javascript van de pagina, deze zorgt ervoor dat de data zal gebruikt kunnen worden op de wegenkaart.

Deze week was het ook mijn taak om het spel Cityjam te testen op eventuele bugs, omdat het spel de maandag daarop werd voorgesteld op een persconferentie in Brugge van Jim TV voor MEDIALAAN.

 

YouTube Uploader

Deze week was het de opdracht om de YouTube uploader te maken.
Het is de bedoeling dat er een een .jar (Java programma) wordt gemaakt die ’s nachts op de server van La Mosca automatisch draait en eerst bekijkt of er teams de dag voordien het spel “Cityjam” van MEDIALAAN hebben gespeeld.
De gegevens van alle teams die gespeeld hebben worden opgehaald, dit is de teamnaam, de e-mailadressen van de spelers, de fotonamen, de muziekgenre die tijdens het spel werd gekozen, etc…

Deze gegevens worden opgeslagen in een Team object die allemaal op een ArrayList geplaatst worden.
Daarna wordt deze ArrayList doorlopen en wordt team per team het volgende stappenplan doorlopen:
Eerst en vooral worden de foto’s van alle spelers gedownload en in een map geplaatst, met deze foto’s wordt doormiddel van een jar (die nog moet gemaakt worden door een andere collega van La Mosca)
een 100+tal afbeeldingen gemaakt die het filmpje zullen voorstellen.
Hierna worden deze afbeeldingen na elkaar geplaatst (FPS kan worden ingesteld) en wordt dit filmpje weggeschreven naar een .mov formaat. Dit wordt gedaan doormiddel van de JPEGS2MOVIE bibliotheek.
Hierna wordt het geluid achter het filmpje geplaatst, de speler had tijdens het spel een keuze tussen 4 muziekgenres. De muziek wordt achter het filmpje geplaatst doormiddel van FFmpeg, dit een een .exe die gedraaid kan worden
op de cmd line. In Java is het ook mogelijk om een cmd commando uit te voeren, hiervan zijn verschillende bronnen terug te vinden op het internet, zoals op Stackoverflow.

Nadat de filmpjes aangemaakt zijn wordt de ArrayList opnieuw doorlopen en wordt elke filmpje geüpload naar de YouTube servers doormiddel van de Google YouTube API.
Na het uploaden van dit filmpje wordt de link van het filmpje door gemaild naar alle spelers van het team doormiddel van het e-mail sjabloon van La Mosca.

Afwerking website + YouTube uploader

Deze week heb ik de website afgewerkt waar het nu mogelijk is om verschillende toestellen met elkaar te vergelijken.
De website telt nu 3 hoofdpagina’s, 1 pagina waar men een overzicht krijgt van de Android native testen, 1 voor de iOS native testen en 1 voor de Unity benchmark testen.
1
Op deze overzicht pagina’s is het mogelijk om op een toestel te klikken en de detailpagina van het toestel te openen.
Bij een Benchmark Unity detailpagina zal er ook een grafiek weergegeven worden met het aantal FPS van dit toestel.

2Bij elke test (Unity, Android Native of iOS native test) is er nu ook een vergelijkingspagina waar men gemakkelijk 3 toestellen met elkaar kan vergelijken.
Terug is het mogelijk om bij een Benchmark Unity test een grafiek weer te geven met de testen van de 3 verschillende toestellen.
3
Deze website is op de testserver van La Mosca geplaatst waar men eerst moet inloggen met een gebruikersnaam en wachtwoord voor men toegang krijgt tot de website. De website wordt op een ander moment besproken met het La Mosca team zodat er opmerkingen of suggesties gemaakt kunnen worden.

La Mosca is vandaag de dag bezig met het spel Cityjam voor het bedrijf MEDIALAAN. Dit is een citygame die men kan spelen met verschillende spelers en met verschillende teams. Men moet verschillende opdrachten uitvoeren op bepaalde punten op een kaart om zoveel mogelijk punten te scoren.
In het begin van het spel worden foto’s getrokken van de spelers en tijdens het spel worden deze foto’s gebruikt om een filmpje weer te gegeven, met personages die worden ingevuld met de foto’s van de spelers. Deze foto’s worden ook doorgestuurd naar de La Mosca server.

Het is mijn opdracht om aan de hand van deze foto’s aan Java programma te schrijven die het mogelijk maakt om een filmpje te maken van deze foto’s, om deze daarna automatisch door te sturen naar de servers van YouTube en daarna aan de hand van de e-mailadressen van de spelers te melden, dat deze spelers het filmpje kunnen bekijken op een bepaalde YouTube link. Het is de bedoeling dat elke nacht automatisch op de servers van La Mosca wordt gecontroleerd of er mensen de dag ervoor het spel gespeeld hebben en dat hierna automatisch de filmpjes worden gemaakt. Het stappenplan van het programma ziet er als volgt uit:

1) Controle in databank of er mensen het Cityjam gespeeld hebben waarna de data van de spelers wordt opgehaald (foto’s, e-mailadres, teamnaam,…)
2) Er wordt een unieke map aangemaakt voor het team aan de hand van de verschillende parameters van de teams/spelers waarna de foto’s van de spelers hierin worden geplaatst
3) Daarna wordt aan de hand van deze foto’s van de spelers, nieuwe afbeeldingen gemaakt doormiddel van een jar die wordt gemaakt door een college van La Mosca. Deze afbeeldingen zullen het filmpje voorstellen.
4) De afbeeldingen die in stap 3 gemaakt werden moeten achter elkaar geplaatst worden en geconverteerd worden naar een videoformaat. Hier moet het ook mogelijk zijn om muziek achter het filmpje te plaatsen. Dit filmpje wordt opgeslagen in de map die aangemaakt is in stap 2.
5) Als het filmpje gemaakt is zal het filmpje doormiddel van de YouTube API geüpload worden naar de YouTube serves.
6) Men krijgt in stap 5 van YouTube een link terug waarna er een e-mailbericht kan worden opgesteld naar de speler die de speler verwittigd dat hij/zij het filmpje kan bekijken doormiddel van de YouTube link.

YouTube heeft een Java API waar het mogelijk is om een filmpje door te sturen in een Java programma: https://developers.google.com/youtube/v3/ Alsook bestaat er een open source project die het mogelijk maakt om verschillende afbeeldingen na elkaar te plaatsen en hier een filmpje te maken met als .mov extensie: https://code.google.com/p/jpegs2movie/

Vervolg website, IIS en SendMail Linux

Deze week heb ik de website verder gemaakt om de gegevens weer te geven van de verschillende testen die in de database zitten van de apps.
Door mijn stagementor is gevraagd of er een pagina op de website kan komen waar men verschillende toestellen kan vergelijken met elkaar.
Zo zou het moeten mogelijk zijn dat men 3 toestellen kan kiezen op de pagina en zo in een grafiek de testen van de 3 verschillende toestellen kan vergelijken met elkaar.
De website heeft nu al 3 verschillende pagina’s, 1 voor de Android native testen, 1 voor de iPhone testen en 1 voor de Unity testen.

De IIS Server van La Mosca was nog niet voorzien van een PHP dus moest deze geïnstalleerd worden op de IIS server.
Omdat de applicaties voorlopig gebruik maken van de testserver van La Mosca moest deze installatie dus gebeuren op de IIS van de testserver.
Microsoft heeft hiervoor een gemakkelijke tool om verschillende installaties uit te voeren op een Windows Server 2012.
Deze tool heet “Web Platform Installer” en kan gratis gedownload worden. Als men deze installeert uitvoert kan men voor verschillende installaties kiezen,
zo kan men ook kiezen om PHP versie 5.4 te installeren. Na het installeren hoeft men alleen een application pool aan te maken op de IIS server
waarna men ken surfen naar de PHP website op de IIS server.

Deze week was er ook een probleem aan de Franstalige website van La Mosca.
Het e-mailformulier van La Mosca maakt gebruik van PHP die gemaakt is door WordPress.
Als men in de broncode kijkt kan men zien dat er een e-mail wordt verstuurd doormiddel van onderstaande methode:
mail(‘test@test.be’, ‘Onderwerp’, ‘Bericht’);
Maar, als men dit script uitvoerde kwamen deze mails niet aan op zijn bestemming alsook werd volgende foutcode weg geschreven in de error log op de webserver:
sh: /usr/sbin/sendmail: not found
Deze foutcode wordt weergegeven als op de Debian webserver de SendMail software niet geïnstalleerd is.
Doormiddel een connectie te maken via SSH kon ik de SendMail installatie doen en zo was het terug mogelijk mails te versturen vanaf de Franse website.

Website La Mosca Device Tester

Deze week was het de bedoeling de beginstappen te zetten voor de website die alle gegevens bundelt van de 3 applicaties.
Na overleg met mijn stagementor zal de website gemaakt worden in PHP en ik zal gebruik maken van het Symfony framework die ik heb aangeleerd in mijn tweede jaar in mijn opleiding.

Eerst en vooral waren het de bekende programma’s die ik moest downloaden en installeren voor het maken van een website door middel van het Symfony Framework.
Enkel en alleen had ik dit nog niet voor een Mac OS X besturingssysteem gedaan. Vroeger gebruikte ik op Windows het programma WAMP om een MySQL server te virtualiseren en om
de PHP website lokaal te kunnen testen en draaien. Voor Mac OS X bestaat er MAMP en is te downloaden in gratis en niet gratis versie.
Na het installeren hiervan kon ik ook de bekende MySQL Workbench downloaden en deze installeren op mijn laptop waarna ik een dump van enkele testdata kon importeren die ik
had verkregen van de testserver van La Mosca. Daarna installeerde ik Netbeans om het PHP project te maken waarna ik met composer install het Symfony pakket kon downloaden.

De website zal zo worden opgebouwd dat men een overzichtspagina heeft voor de Android native testen, een pagina voor de iOS native testen en een pagina voor de Unity testen.
Waarna men op deze pagina kan doorklikken naar de detailpagina van het desbetreffende toestel, op deze pagina moet het mogelijk zijn om de meetgegevens van de applicatie weer te geven.
Het zou mooi zijn om de gegevens van de Unity applicatie (het aantal Frames Per Seconds) weer te geven in een grafiek.
Hiervoor zijn er enkele handige Javascript open source projecten voor, de beste vond ik Char JS waar men gemakkelijk in Javascipt de gegevens voor de x en y as kan implementeren.
Het moet ook mogelijk zijn op de detailpagina om eventueel andere testen van éénzelfe toestel of éénzelfe type toestel te bekijken.
Alsook moet er een soort ranking zijn waar men kan zien hoe goed het desbetreffende toestel scoort ten opzichte van andere toestellen (voor de testen in Unity).

Deze week heb ik ook La Mosca geassisteerd bij het oplossen van serverproblemen. Vorig weekend had er een klant problemen bij het spelen van een citygame en het was de webserver die het begaf en crashte. Samen met college Jelle gingen we op zoek tussen de verschillende logs in de Event Viewer van de Windows Server 2012 wat er de oorzaak was van het probleem. We hebben niet direct een oorzaak hierin gevonden en we hebben dan in de broncode gekeken of alle MySQL connecties werden gesloten. Waarna we nog steeds geen fout vonden alsook heel de week hebben we geen pieken gezien van dat de server teveel geheugen verbruikte. We zullen dit opvolgen volgende week en zien of het nogmaals voorvalt. Alsook was er een probleem met het gamecenter van La Mosca dat deze het op een bepaald moment begaf, als oplossing hebben we hiervoor een nieuwe application pool gemaakt en deze website hieraan toegekend.

Website La Mosca + Data native apps

Vorige zondag moest het nieuwe gamecenter online geplaatst worden op 21 uur. Het gamcenter heet bij La Mosca Apptivity en is een website die het mogelijk maakt voor de klanten van La Mosca om hun games te beheren. Bijvoorbeeld iChallenge is een klant van La Mosca die de spellen van La Mosca gebruikt om Team Buildings mee te organiseren . Zij hebben een login om bijvoorbeeld bij het spel The Target een nieuw spelscenario te kunnen aanmaken (hints, locaties, teams, …). De laatste maanden is het team van La Mosca bezig geweest om een nieuw gamecenter te ontwerpen in ASP.NET. La Mosca had mij gevraagd om zondagavond naar het bedrijf te komen om de update mee te ondersteunen.

Het was de bedoeling dat ik deze zondag de website aanpaste (die gemaakt is in WordPress met daar nog eens achter PHP). Zodat het mogelijk was dat particulieren/geintersseerden op de website een spel konden boeken doormiddel van een registratieformulier die gelinkt was met het nieuwe gamecenter. Dit moest gebeuren voor de 4 verschillende websites van La Mosca (BE-NL, BE-FR, FR en NL). Het was ook de bedoeling dat dit “reserverings” formulier gelinkt stond met de Google Analytics van La Mosca zodat het mogelijk werd om de bezoeker te volgen tijdens dit formulier. Dit is succesvol gebeurd en om 21 uur zondagavond was het mogelijk dat de bezoeker van de website van La Mosca dit formulier kon invullen. La Mosca vroeg mij ook om andere aanpassingen te doen aan de website die ik deze week heb uitgevoerd. Enkele voorbeelden dat ik moest veranderen aan de website: een onderverdeling maken tussen de 5 verschillende spellen van La Mosca om een spel te reserveren, elk spel had dus een eigen reservatiepagina wat vroeger niet het geval was, een “offerte”pagina voor elk spel, het contactformulier aanpassen, e-mailinstellingen aanpassen, aanpassingen doen een de detailpagina van de spellen,…

De rest van de week heb ik mijn native applicaties(iOS en Android) geconnecteerd met de MySQL database van La Mosca doormiddel van een webservice. Elke native app heeft 1 tabel in de databank, 1 voor de iOS app en 1 voor de Android database. Daarin worden de technische specificaties van het toestel bewaard. Dit wordt bewaard met het bijhorende IMEI of UUID van het toestel zodat ik deze test in verband kan brengen met de tests van de Unity Test App. Het is mij ook gelukt om in Unity het IMEI nummer op te vragen van een Android toestel, na het stellen van een vraag op het Unity forum. Ook zijn deze week de beginstappen genomen om de website te ontwerpen die moet dienen om de gegevens te bekijken die de verschillende apps verzameld hebben.