RAPPORT DE STAGE

Concepteur Dveloppeur Informatique

Steven TRINCHE
Stage de fin de formation CDI
25 Octobre 2016 13 Janvier 2017
Tuteurs : Mr Vulliet Jonathan/Mr Maccini Pierre
1

OMMAIRE
1 Remerciements..................................................................................................................Page 3
2 Prsentation de l'entreprise.........................................................................................Page 4
3 Description des travaux effectus.............................................................................Page 5
3.1 1er projet / Travaux de recherche................................................................Page 5
Prsentation du projet..................................................................................Page 5
Base de donnes..............................................................................................Page 7
Ecrans................................................................................................................Page 9
Bilan..................................................................................................................Page 10
3.2 2me projet / Dive Center..............................................................................Page 11
Prsentation du projet.................................................................................Page 11
Base de donnes Symfony..........................................................................Page 12
Base de donnes Phalcon.............................................................................Page 13
Ecrans..............................................................................................................Page 14
Bilan..................................................................................................................Page 15
4 Conclusions.......................................................................................................................Page 16

1 - Remerciements
Je tiens tout d'abord commencer ce rapport de stage en remerciant
l'entreprise, dans laquelle j'ai termin ma formation de CDI, qui se
nomme Solar Games.
Le chemin effectu vos cts fut une excellente exprience autant
professionelle que personnelle, cela m'a permis de connatre mes
capacits et de savoir o se situe mes limites.
J'ai appris normment et cela m'a persuad que j'avais choisi le bon
mtier pour le futur.
Je souhaite voluer, connatre encore plus de choses et mettre mes
connaissances, prsentes et futures, l'preuve.
L'aventure ne s'arrte donc pas pour moi car j'ai russi trouver ma
voie, surtout, dans un domaine spcifique de la programmation, en
l'occurence, le langage Web.
Je remercie toute l'quipe de m'avoir intgrer si rapidement, tout
spcialement Jonathan et Pierre, mes tuteurs, qui ont pris le temps de
rpondre mes questions, d'tre l pour moi quand j'en avais besoin,
d'tre aussi sympa et comprhensif.
Merci de m'avoir donner votre confiance pour les diffrents projets,
malgr mon statut de "stagiaire", j'ai pu mettre en pratique toutes mes
comptences acquises lors de la formation.
Je remercie aussi Laura et Lon pour leur gentilesse, Sbastien avec qui
j'ai collabor pour DiveCenter en plus de tous ses prcieux conseils et
nos discussions sur le 3D, qui a beaucoup d'importance pour moi ainsi que
Flo et Benot.
Merci encore, au plaisir de travailler nouveau avec vous.
Amicalement,
Trinch Steven.
3

2 Prsentation de l'entreprise
Solar Games est un studio Franais de cration et de dveloppement
doutils de formation et de serious games. Avec une approche innovante et un moteur
de jeu propritaire, ils proposent des expriences de formation distance totalement
indites. Fonde en 2011 par des ingnieurs issus de la filire du jeu vido, Solar
Games est base dans le sud de la France et compte aujourdhui une dizaine de
collaborateurs expriments.
L'quipe est compose de :
Lon : Prsident & CEO
Alexandre : Fondateur & COO
Laura : Assistance administrative & commerciale
Jonathan : Directeur technique
Pierre : Chef de projet
Sbastien : Directeur artistique
Benot : Responsable Q&A
Florian : Dveloppeur
Pierre-David : Chercheur

3 Description des travaux effectus

3.1 1er projet / Travaux de recherche
Prsentation du projet :
La premire partie du stage tait ddie la recherche des frameworks
susceptibles d'tre utilis pour le projet MyAltis3. Aprs avoir fait des tests pour
plusieurs frameworks, je suis arriv au rsultat final :
CSS : Bootstrap
Canvas 3D : Babylon.js(Javascript)
PHP : Symfony (MVC, php, twig(html))
SQL : Doctrine
Pour la premire partie, 60% de mon temps tait requis pour les recherches des
diffrents avantages et inconvnients de chaque framework, 40% pour le
dveloppement d'environnement de test et de benchmark.
Mon premier environnement de test a t cre avec Babylon.js (http://apo-chat.com).
Un environnement tout simple o une boule de lumire se dplace en cercle autour de
plusieurs blocs. La partie la plus dlicate a t de travailler avec les ombres. La
camra autorise un dplacement libre. Grce aux tutoriaux sur le web, je n'ai pas
rencontr de problmes majeurs pour dvelopper cette partie. Cependant un
apprentissage au niveau Babylon.js a t ncessaire pour me permettre de le
manipuler.
Mon deuxime environnement de test est un Benchmark o on peut tester les
performances de son ordinateur (http://dev-1.my-altis.fr/StevenStage/Test3D/).
J'ai construit ce Benchmark en partant de mon premier projet Babylon et en y
ajoutant bootstrap (pour le menu interactif). J'y ai intgr diffrentes options de test.
Concrtement, cette application dispose de diffrentes fonctionnalits :
L'affichage des FPS (Frames Per Second Images par Seconde)
L'affichage des FPS moyen (depuis la premire frame)
Le nombre de frames totales
Le temps qu'il a fallu pour la page et la scne pour s'afficher
Diffrents boutons :
1. Dmarrage/Arrt des animations des meshs clons(objets de la scne)
2. Cration de 10 meshs indpendants l'un de l'autre (le plus long charger)
3. Cration d'une quantit, dfinie par l'utilisateur, de meshs clons (les clones
sont plus rapides charger car il ne faut pas recre le mesh)
5

4. Destruction des meshs clons chargs

5. Cration de 150 tubes 3D anims
6. Ouverture et fermeture d'un powerpoint sans interruption ou rechargement
de page
Le sixime bouton a t fait suite une demande de mon tuteur pour tester une
potentiel librairie capable d'afficher dynamiquement n'importe quel type de fichier.
Ce que je n'ai pas d'ailleurs russi trouver. Cependant un site (Scribd.com) le fait
trs bien, c'est ce que j'ai utilis pour faire ce bouton de test.
De plus cette application permet de grer le mouvement tactile de la camra et est
donc compatible avec les mobiles. C'est un test fait pour un possible portage de
MyAltis3 en version tablette/mobile (et un des prrequis pour l'utilisation d'une
bibliothque 3D).
Mon troisime environnement de test est tout autre. Une fois les tests de Babylon
passs, je me suis pench sur les frameworks PHP et aprs de multiples tests,
Symfony ayant retenu mon attention, je me suis bas sur une demande de mon tuteur
afin de construire cette application de manipulation et d'affichage de donnes sous
forme de graphique (http://dashboard.my-altis.fr/).
L'application consiste afficher une liste de serveurs, choisir un des graphiques que
l'on veut afficher (ex : Nombre de connexions total par utilisateurs), une fois les
donnes rcupres, elles sont affiches dans un tableau graphique interactif.
Le framework utilis est Symfony, Twig(HTML) pour le ct client, DQL(Doctrine
Query Builder)/PDO pour les requtes et Graph.js(JavaScript) pour l'affichage des
donnes.
Cependant un peu plus tard (aprs Dive Center), un autre framework nous a mis la
puce l'oreille, surtout au niveau de ses performances (compar Symfony ou
d'autres frameworks). Du coup, le projet ayant t fini sur Symfony, je l'ai migr sur
Phalcon, en prenant en compte les changements dans l'infrascructure (entre autre
Twig qui passe Volt).
Le rsultat restera le mme, mais des amliorations verront le jour au niveau du code
pour faire en sorte que a colle mieux au nouveau framework.

Base de donnes :

Ce schma reprsente le MLD (Modle Logique de Donnes) de la base de donnes principale utilise (prod-solargames.myaltis.fr).
7

L'application lance 5 requtes principales :

Affichage de la liste des serveurs existants
Temps de connexion total par Utilisateur
Temps de connexion total dans l'anne, une sous requte pour tous les mois
dans l'anne et tous les jours dans le mois choisi
Nombre de connexion total par Utilisateur
Nombre de connexion total dans l'anne, idem que la deuxime
La premire requte va interroger la base de donnes prod en utilisant 3 tables
diffrentes.
SELECT c.domainename AS domaineName, co.bdd AS bdd, s.ippublic AS ipPublic
FROM center AS c
JOIN config AS co ON c.id = co.idcenter
JOIN Serverubuntu AS s ON co.idcenter = s.idcenter
WHERE c.state != 0 ORDER BY domaineName
On peut donc voir que la table center va joindre la table config et
Serverubuntu .
Nous avons donc ici plusieurs informations :
domaineName, correspond au nom de domaine (ex : dev-1)
bdd, correspond au nom de la base de donnes (ex : ALTIS101)
ipPublic, correspond l'adresse IP publique pour y accder
la condition de tri est effectu sur l'tat du serveur, en loccurrence, ne prend
pas en compte tous les serveurs dont l'tat est 0 (inactif)
Un exemple de requtes sur une priode de temps va se prsenter comme ci-dessous :
SELECT SUM(timeGame) timegame, MONTH(dateEnd) dateend FROM
playTime WHERE YEAR(dateEnd) = :year and timegame > 3 GROUP BY
MONTH(dateend)
SELECT SUM(timeGame) timegame, DAY(dateEnd) dateend FROM playTime
WHERE MONTH(dateEnd) = :month and YEAR(dateEnd) = :year and
timegame > 3 GROUP BY DAY(dateend)
Pareil, plusieurs informations ici :
timeGame, le temps de jeu en seconde
dateEnd, le moment o la connexion a prise fin
la condition de tri est base sur l'anne ou sur un mois donn et sur un temps de
jeu > 3 secondes

crans :

Comme on peut le constater, la page principale est la page par dfaut du site.
De cette page, on peut accder la page Informations et aux diffrents serveurs et
leurs graphiques. Depuis la page Infos, on peut retourner la page principale.
La page principale permet d'accder aux donnes d 'un des serveurs de la liste
Une fois sur le serveur spcifi, on a accs aux diffrents graphiques qui vont
permettre de choisir les donnes visualiser
La page Infos regroupe les mises jours de la plus rcente la plus ancienne.
Ce qui donne l'avantage de garder une trace sur l'volution du site depuis le
dbut

Bilan :
Cet environnement a t le plus complexe a ralis, mon avis, au niveau du nombre
de langages utiliss (PHP pour Symfony, Bootstrap pour CSS, Twig pour la liaison
entre PHP et HTML, Doctrine pour les requtes SQL (mySQL en l'occurence) ainsi
que pour rcuprer les tables de la BDD distante et les afficher sous forme d'entits
objet (ORM Object Relational Mapping / Mapping Objet Relationnel) et Chart.js
pour mettre ses donnes en graphique.
Ce framework trs puissant m'a donc permis de combiner tous ces langages en
utilisant l'architecture MVC (Modle-Vue-Contrleur) pour avoir un code propre et
clair.
La plus grande difficult a t d'apprendre l'utiliser, me l'approprier et m'en servir
pour mes besoins.
Dans ce cas, mes besoins taient de construire des requtes qui affichent des rsultats
sous forme de graphiques.
Les requtes en elles-mme n'avaient rien de compliqu.
Ce projet tait prvu pour un mois (dbut stage -> fin novembre). J'ai fini un peu en
avance cependant le travail non prvu (les requtes + affichage) a rduit mon temps
allou pour la recherche et les tests de framework, ce qui m'a fait pass 80% de
dveloppement et 20% de recherche.

10

3.2 2me projet / Dive Center

Solar Games a produit, conjointement avec des CHU parisiens, des plateformes
ludiques et collaboratives pour accompagner les jeunes adolescents diabtiques la
comprhension de leur maladie : le projet DIVE. Avec cette approche acadmique,
qui leur est chre, ils ont dploy leurs outils de formation collaboratifs auprs de
nombreuses populations (enfants, adolescents, patients, seniors) avec toujours la
mme volont de proposer de nouvelles mdiations du savoir en utilisant des canaux
peu ou pas utiliss jusqu prsent.
Prsentation du projet :
Ce projet consiste en la cration d'un site web qui permettra, l'utilisateur
enregistr, d'accder au DIVE, directement et efficacement, par le biais du DIVE
Center.
Au moment de la consultation avec un mdecin, le patient se voit remettre une carte
d'accs DIVE Center. Grce ce code, il pourra s'inscrire sur le site, crer un compte
avec ses propres identifiants et se connecter au DIVE directement. Lors de la
connexion, le serveur redirigera l'utilisateur selon sa commune sur un des serveurs
ddis.
Afin de mettre en place ce projet, j'ai dcid d'utiliser le framework Symfony
accompagn de Bootstrap.
Plus tard, suite la dcouverte de Phalcon, je procderais la migration en
amliorant certaines choses. La base de donnes va voluer, en partie cause des
diffrences entre les deux frameworks.
La majeure diffrence se fera au niveau de l'arborescence des fichiers. Avec Phalcon,
a sera plus clair et facile concevoir et grer. Par contre, il y a moins de
fonctionnalits dveloppes avec, de base, que Symfony qui jouit d'une communaut
trs ouverte.
L'un a ses avantages et ses dsavantages mais ce qui permettra de dterminer le
framework final est la performance. Les tests faits montrent trs clairement la
vritable puissance de Phalcon et dans notre cas, c'est ce qu'il va le dpartager pour
les futurs projets o une vitesse d"excution rapide est primordiale.

11

Base de donnes Symfony :

Seulement deux tables, une table user qui contient les comptes des utilisateurs et une
table code_acces qui contient les codes d'accs qui seront transmis aux personnes
concernes.
La table user est la plus complexe car elle comprend diffrentes fonctionnalits lies
l'application.
En effet, certaines colonnes sont rserves aux envois de mails et aux remises zro
de mot de passe. Symfony la construit et la gre elle-mme.
La table code_acces ne contient que deux colonnes, une cl primaire autoincrmente et la colonne du code d'accs.
Ce code d'accs est une cl gnre au pralable qui contient 16 caractres, comme
l'exemple suivant : 123A-45BC-DE7F-GH89. Les quatres premiers sont les plus
important car c'est eux qui vont dterminerla fonction exacte du compte de
l'utilisateur.
Les trois premires correspondent la commune et la lettre savoir si le compte est
un compte de dmonstration (par exemple) ou autre.

12

Base de donnes Phalcon :

Sur Phalcon, la base de donnes est plus consquente. Deux fois plus de tables pour
avoir les mmes fonctionnalits que sur Symfony. Cependant l'avantage est que c'est
plus lisible et maintenable si on veut rajouter d'autres donnes.
Par exemple les tables email_reset et email_confirmations, la premire gre la
rinitialisation des mots de passes du compte utilisateur et la deuxime l'activation du
compte, une fois cre par l'utilisateur.

13

Ecrans :

A partir du 1er cran, on peut choisir de se connecter, si le compte est dj cre et

activ ou de s'inscrire, si on dispose de la carte d'accs sinon impossible d'aller plus
loin.
Si on choisit l'inscription, on inscrit son code d'accs, si il fonctionne on est redirig
vers la cration de son compte avec le choix de ses identifiants. La seule obligation
est l'adresse mail. Une fois l'cran suivant, on rentre son email, son pseudo, son mot
de passe, son sexe et on valide les mentions lgales. Un mail est envoy l'adresse
mail de l'utilisateur, il confirme son compte en cliquant sur le lien l'intrieur et il est
renvoy vers DiveCenter pour tre informer de l'activation de son compte.
Si on choisit la connexion, le compte doit dj tre activ sinon il ne sera pas
reconnu. On se connecte et on est redirig vers l'application DIVE. Si on a oubli son
mot de passe, il est possible de le rinitialiser. On doit donc rentrer son adresse mail,
on reoit un mail de rinitialisation, on confirme son nouveau mot de passe et on est
redirig vers la connexion.

14

Bilan :
Plusieurs difficults dans ce projet, tout d'abord, l'utilisation du CSS un niveau
lev, notamment dans l'utilisation du positionnement des images supplmentaires.
C'est surtout compliqu, du l'utilisation du responsive (technique qui permet de
grer la page selon la taille de l'cran).
Il y a donc beaucoup de cas grer, des tailles minimums sont imposes afin de ne
pas dformer le plan de la page initial. Il faut grer les messages d'erreurs et tous les
nombreux diffrents blocs de l'cran.
Ensuite, la deuxime difficult est lie Symfony. En particulier l'utilisation des
bundles(extension de Symfony pr-programme par des dveloppeurs afin de faire
gagner du temps). Le bundle en question, qui s'appelle FOSUserBundle, est le bundle
le plus utilis de Symfony car il gre lui tout seul tout l'aspect utilisateur, session,
base de donnes et protection contre les hackers (injection SQL et autre).
L'avantage du ct de Phalcon est qu'on peut choisir nous mme l'architecture alors
qu'on est oblig de respecter certaines normes avec Symfony (pour l'architecture de
base).
Au final, la conception et le dveloppement de DIVE Center a t fastidieux, mais j'ai
beaucoup appris et j'ai pu utilis ces deux frameworks dans de bonnes conditions. Ma
comprhension de l'architecture MVC s'est accrue ainsi que mes facults
d'apprentissage de nouveaux langages et frameworks.

15

4 Conclusions
Au cours de ce stage d'entreprise, j'ai pu mettre en pratique les comptnces
suivantes :

Maquetter l'application
Dvelopper une interface utilisateur
Dvelopper des composants d'accs aux donnes
Dvelopper des pages Web en lien avec une base de donnes
Concevoir une base de donnes
Mettre en place une base de donnes
Dvelopper des composants dans le langage d'une base de donnes
Concevoir une application
Collaborer la gestion d'un projet informatique
Dvelopper des composants mtier
Construire une application n-tiers
Prparer et excuter les plans de tests d'une application
Prparer et excuter le dploiement d'une application

Ce stage de 3 mois m'a apport beaucoup de choses. La plupart des concepts vu en

formation m'ont aid comprendre les bases du mtier et prendre un bon dpart en
entreprise. L'auto-apprentissage tait omni-prsent, tous les projets ont t conus et
dvelopps par moi-mme et cela m'a d'autant plus permis de comprendre l'utilit de
la conception UML.
J'ai aussi travaill en quipe et, pour mes projets, tait en troite collaboration avec le
responsable designer. tre plusieurs pour raliser un projet, permet d'avoir un oeil
diffrent mais surtout pouvoir tre sr de la manire dont on aborde les choses.
Pour finir, je suis vraiment satisfait de toutes ces comptences acquises et je suis
confiant en mes propres capacits pour le futur proche et pour cela je remercie
nouveau l'quipe de Solar Games pour tout leur profesionnalisme et leur confiance.

16