View
168
Download
9
Category
Preview:
Citation preview
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
L’application mobile Book My Night
destinée aux platformes
iOS et android
Version mobile du site web www.bookmynight.fr
L’écran d’accueil(.psd)
Le menu principal‘Quick menu’
(.psd)
Le menu détail soirée (.psd)
Le menu de réservation(.psd)
Le menu des soiréesAvec les filtres de date
Et de la ville(.psd)
Le menu de l’authentification
(.psd)
L’espace privé de l’utilisateur
(.psd)
Les quatres étapes de l’inscription(.psd)
L’icône de l’application(.png)
Le SplashScreen (retina / non-retina)
(.png)
Le framework de développement Cross-plateformes Titanium Appcelerator
Pourquoi Titanium ??
Différents types d'applications mobiles (Natives, Hybrides et Web)
Comparaison entre les différents types d'applications mobiles
Et donc, que choisir??
La Solution Le développement Cross-PLateformes
:
Frameworks de développement cross-plateformes
• 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
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
Choix de la méthodologie..
Design Pattern MVC Alloy
• 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
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 ?
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
Analyse Des Besoins
Diagramme de contexte statique
Diagramme de cas d’utilisation globalDate picker pour ios 6 & 7
Date picker pour android Spécifications Fonctionnelles
Diagramme de Cas d'utilisation <<Afficher les clubs>>
Diagramme de Cas d'utilisation << s'authentifier >>
Diagramme de Cas d'utilisation << réserver une soirée >>
Catégorie utilisateur > catégorie soiréeCatégorie utilisateur < catégorie soirée
Diagramme de séquence
système global
simplifié
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.
La conception
L’ architecture 2-tiers
Communication avec les web
services
Base de données de
bookmynight.frL’application Bookmynight
Vue Statique : Diagramme de classes
Vue comportementale : Structure de navigation
Diagramme de séquence
de l'authentifica
- tion avec facebook
Conception de l'architecture graphique de l'IU
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
La réalisation
L’apprentissage du framework
L’environnement de développement
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.
Le développement
MVC
Apple Push Nitifications (APN)
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.
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
Implémentation spécifique des besoins non-fonctionnels
3) - Gestion de la connexion
L’outil de limitation de débit de la connexion 'Speedlimit'.
Recours au support techniqueLe forum d ’appcelerator Titanium
Recommended