présentation pfe feki 2015.pptm
TRANSCRIPT
![Page 1: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/1.jpg)
L’école Supérieure privée d’ingénierie et de technologie
PROJET DE FIN D’ETUDESPrésenté en vue de l’obtention du titre
D’INGENIEUR EN INFORMATIQUEPar
Ahmed El-fekiEffectué à l’entreprise
Encadrant de l’université : Mr Karray GARGOURIEncadrant de l’entreprise : Mr Houssem Ksontini
Janvier 2015
![Page 2: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/2.jpg)
L’application mobile Book My Night
destinée aux platformes
iOS et android
![Page 3: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/3.jpg)
Version mobile du site web www.bookmynight.fr
![Page 4: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/4.jpg)
L’écran d’accueil(.psd)
![Page 5: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/5.jpg)
Le menu principal‘Quick menu’
(.psd)
![Page 6: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/6.jpg)
Le menu détail soirée (.psd)
![Page 7: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/7.jpg)
Le menu de réservation(.psd)
![Page 8: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/8.jpg)
Le menu des soiréesAvec les filtres de date
Et de la ville(.psd)
![Page 9: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/9.jpg)
Le menu de l’authentification
(.psd)
![Page 10: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/10.jpg)
L’espace privé de l’utilisateur
(.psd)
![Page 11: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/11.jpg)
Les quatres étapes de l’inscription(.psd)
![Page 12: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/12.jpg)
L’icône de l’application(.png)
Le SplashScreen (retina / non-retina)
(.png)
![Page 13: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/13.jpg)
Le framework de développement Cross-plateformes Titanium Appcelerator
Pourquoi Titanium ??
![Page 14: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/14.jpg)
Différents types d'applications mobiles (Natives, Hybrides et Web)
![Page 15: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/15.jpg)
Comparaison entre les différents types d'applications mobiles
Et donc, que choisir??
![Page 16: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/16.jpg)
La Solution Le développement Cross-PLateformes
:
![Page 17: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/17.jpg)
Frameworks de développement cross-plateformes
![Page 18: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/18.jpg)
• 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
![Page 19: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/19.jpg)
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
![Page 20: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/20.jpg)
Choix de la méthodologie..
![Page 21: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/21.jpg)
Design Pattern MVC Alloy
![Page 22: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/22.jpg)
• 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
![Page 23: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/23.jpg)
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 ?
![Page 24: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/24.jpg)
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
![Page 25: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/25.jpg)
Analyse Des Besoins
![Page 26: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/26.jpg)
Diagramme de contexte statique
![Page 27: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/27.jpg)
Diagramme de cas d’utilisation globalDate picker pour ios 6 & 7
Date picker pour android Spécifications Fonctionnelles
![Page 28: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/28.jpg)
Diagramme de Cas d'utilisation <<Afficher les clubs>>
![Page 29: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/29.jpg)
Diagramme de Cas d'utilisation << s'authentifier >>
![Page 30: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/30.jpg)
Diagramme de Cas d'utilisation << réserver une soirée >>
Catégorie utilisateur > catégorie soiréeCatégorie utilisateur < catégorie soirée
![Page 31: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/31.jpg)
Diagramme de séquence
système global
simplifié
![Page 32: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/32.jpg)
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.
![Page 33: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/33.jpg)
La conception
![Page 34: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/34.jpg)
L’ architecture 2-tiers
Communication avec les web
services
Base de données de
bookmynight.frL’application Bookmynight
![Page 35: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/35.jpg)
Vue Statique : Diagramme de classes
![Page 36: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/36.jpg)
Vue comportementale : Structure de navigation
![Page 37: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/37.jpg)
Diagramme de séquence
de l'authentifica
- tion avec facebook
![Page 38: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/38.jpg)
Conception de l'architecture graphique de l'IU
![Page 39: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/39.jpg)
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
![Page 40: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/40.jpg)
La réalisation
![Page 41: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/41.jpg)
L’apprentissage du framework
![Page 42: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/42.jpg)
L’environnement de développement
![Page 43: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/43.jpg)
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-retinales é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.
![Page 44: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/44.jpg)
Le développement
MVC
Apple Push Nitifications (APN)
![Page 45: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/45.jpg)
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.
![Page 46: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/46.jpg)
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. ->Développement d’une fonction récursive pour la suppression de tous les composants de leurs parents et d’ensuite les éliminer prenant en paramètre un ‘View’ peuplé de composants. -> Délier tous les ‘listeners’ d’un ‘View‘ avant de l’éliminer.
Implémentation spécifique des besoins non-fonctionnels
2) - Optimisation de la mémoire
Passage reserv Scr. - confirmResrv Scr. ALL NOT optimisedPassage reserv Scr. - confirmResrv Scr. ALL optimised
TEST D’OPTIMISATION DE LA MEMOIRE
Passage reserv Scr. - confirmResrv Scr. ALL NOT optimised
![Page 47: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/47.jpg)
Implémentation spécifique des besoins non-fonctionnels
3) - Gestion de la connexion
L’outil de limitation de débit de la connexion 'Speedlimit'.
![Page 48: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/48.jpg)
Recours au support techniqueLe forum d ’appcelerator Titanium
![Page 49: Présentation pfe feki 2015.pptm](https://reader035.vdocuments.net/reader035/viewer/2022062218/58ebbb7d1a28ab90248b46d3/html5/thumbnails/49.jpg)