Le document présente le projet de fin d'études d'Ahmed El-Feki, qui consiste en une application mobile 'Book My Night' développée pour iOS et Android à l'aide du framework Titanium Appcelerator. Il aborde les choix de méthodologie agile et l'architecture du projet, en soulignant l'importance de la collaboration client et des spécifications fonctionnelles et non fonctionnelles. Enfin, le document détaille les stratégies d'optimisation et de gestion de la connexion pour améliorer l'expérience utilisateur.

1. L’école Supérieure privée d’ingénierie et de technologie
PROJET DE FIN D’ETUDES
Présenté en vue de l’obtention du titre
D’INGENIEUR EN INFORMATIQUE
Par
Ahmed El-feki
Effectué à l’entreprise
Encadrant de l’université : Mr Karray GARGOURI
Encadrant de l’entreprise : Mr Houssem Ksontini
Janvier 2015

2. L’application mobile
Book My Night
destinée aux
platformes
iOS et android

3. Version mobile du site web
www.bookmynight.fr

4. L’écran d’accueil
(.psd)

5. Le menu principal
‘Quick menu’
(.psd)

6. Le menu détail soirée
(.psd)

7. Le menu de réservation
(.psd)

8. Le menu des soirées
Avec les filtres de date
Et de la ville
(.psd)

9. Le menu de
l’authentification
(.psd)

10. L’espace privé de
l’utilisateur
(.psd)

11. Les quatres étapes de l’inscription
(.psd)

12. L’icône de l’application
(.png)
Le SplashScreen
(retina / non-retina)
(.png)

13. Le framework de développement Cross-plateformes
Titanium Appcelerator
Pourquoi Titanium ??

14. Différents types d'applications mobiles
(Natives, Hybrides et Web)

15. Comparaison entre les différents types
d'applications mobiles
Et donc, que choisir??

16. La Solution  Le développement
Cross-PLateformes
:

17. Frameworks
de développement cross-plateformes

18. • Les plateformes prises en charge
• L'accès aux options avancées du téléphone
• La faisabilité au long terme
• Le look & feel : natif ou web..
<<Par opposition aux applications développées avec titanium PhoneGap
n'utilise pas des composantes UI natives. L'usage du CSS pour imiter
l'apparence native d'une plateforme exige une grande quantité de travail
manuel. La feuille de style standard jQuery Mobile essaie d'imiter
l'apparence et les sensations iOS (le look & feel) mais ce n'est pas réussi>>
• La rapidité des applications
• Sa distribution : s'il profite d'un app store..
~~ ~~ ~~
Critères spécifiques de comparaison
entre frameworks cross-plateformes

19.  La plus grande large communauté de développeurs.
 Utilise les technologies web standards (Javascript / CSS).
 Prends en charge les plateformes mobiles les plus populaires.
Raisons de choix
de Titanium appcelerator

20. Choix de la méthodologie..

21. Design Pattern MVC Alloy

22. • Priorité aux personnes et aux interactions sur les
procédures et les outils.
• Priorité aux applications fonctionnelles sur une
documentation pléthorique.
• Priorité de la collaboration avec le client sur la
négociation de contrat.
• Priorité de l'acceptation du changement sur la
planification.
Fondements de la méthode Agile

23.  Le client n’a pas d’exigence à la formalité
(pas de cahier de charge, juste des .psd..
et pas de diagrammes)
 Il a proposé des changements à fur
et à mesure de l’avancement de la réalisation.
 Il a effectué le contrôle de l’avancement toutes
les semaines..
 Notre équipe dépourvue d’expérience du développement
mobile préfère la collaboration rapprochée avec le client.
 Le projet lui-même ne demande pas de conception :
puisque la partie serveur était déjà faite.
Pourquoi la méthodologie
était l’agile ?

24. Choix de la méthodologie agile..
Méthode Contribution
Extreme Programming Pratiques simples, tests récursifs
Internet-Speed Developement
Equipe de développement large divisée en
petites équipes
Scrum
Diviser l'effort de développement et gérer
des cycles de développement courts

25. Analyse Des Besoins

26. Diagramme de contexte statique

27. Diagramme de cas d’utilisation global
Date picker pour ios 6 & 7
Date picker pour androidSpécifications Fonctionnelles

28. Diagramme de Cas d'utilisation
<<Afficher les clubs>>

29. Diagramme de Cas d'utilisation
<< s'authentifier >>

30. Diagramme de Cas d'utilisation
<< réserver une soirée >>
Catégorie utilisateur > catégorie soirée
Catégorie utilisateur < catégorie soirée

31. Diagramme
de séquence
système
global
simplifié

32. Spécifications NON-Fonctionnelles
 Le ‘Responsive – Design’
 Le contrôle des états des faibles connexions
et des déconnexions
 Le contrôle de la validité des données retournées
par le serveur.
 Le contrôle de saisie.
 L’internationalisation (support des langues Fr & En)
 Le respect de la charte graphique
 La persistance de l’état de l’authentification après
le redémarrage de l’application
 Consommation optimisé en mémoire.
Ergonomie de l’application, Souplesse de la navigation
et l’esthétique dynamique.

33. La conception

34. L’ architecture 2-tiers
Communication
avec les web
services
Base de
données de
bookmynight.fr
L’application
Bookmynight

35. Vue Statique :
Diagramme
de classes

36. Vue comportementale :
Structure de navigation

37. Diagramme
de séquence
de
l'authentifica
- tion avec
facebook

38. Conception de l'architecture
graphique de l'IU

39. Conception avancée relative
aux besoins non-fonctionnels
Gestion de la communication application-serveur
Redémarrage
Authentification automatique après redémarrage
Le widget animé indiquant
l'indisponibilité de la connexion
Gestion de la connexion

40. La réalisation

41. L’apprentissage du framework

42. L’environnement de développement

43. Choix des configurations d'écrans cibles
 3,5" (DVGA avec une résolution de 960x640 pixels
et un aspect ratio 3:2) avec un écran non-retina
les écrans 3,5" retina (iphone (Retina 3,5-inch) :
la génération iphone 4 : 4 et 4s
 les écrans 4" retina (1136×640) (iphone (Retina 4-inch) :
la génération iphone 5: 5, 5c et 5s) Le contrôle de saisie.
Différentes configurations d'écrans
Disponibles pour les simulateurs Android
Répartition des configurations d'écrans
sur les appareils actifs.

44. Le développement
MVC
Apple Push Nitifications (APN)

45. Implémentation spécifique des
besoins non-fonctionnels
1) - Le ‘Responsive Design’
o Objectif : Résoudre les problèmes des
différences des densités et des résolutions d’écrans.
o Les moyens de sa réalisation : L’utilisation
des valeurs relatives (%) au lieu des valeurs
absolues pour le dimensionnement des composants
graphiques.
o Ses limites : L’impossibilité d’appliquer les
valeurs relatives / dynamiques pour les textes.

46. o Objectif : Avoir une application moins
encombrante/gourmande en mémoire et plus
légère.
o Les moyens de sa réalisation :
-> L’élimination des objets et des
variables inutiles en leur affectant la valeur
‘null’.
-> Travailler avec commonJS permet la
non-pollution du ‘global scope’ et de
l’utilisation des variables dans des sous-
contextes locaux.
Implémentation spécifique des
besoins non-fonctionnels
2) - Optimisation de la mémoire
Passage reserv Scr. - confirmResrv Scr. ALL NOT optimised
Passage reserv Scr. - confirmResrv Scr. ALL optimised
TEST D’OPTIMISATION DE LA MEMOIRE
Passage reserv Scr. - confirmResrv Scr. ALL NOT optimised

47. Implémentation spécifique des
besoins non-fonctionnels
3) - Gestion de la connexion
L’outil de limitation de débit de la connexion 'Speedlimit'.

48. Recours au support technique
Le forum d ’appcelerator Titanium