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