Cross-Platform Mobile Development Framework (Android, iOS) using the MDA approach (Model Driven Architecture)

1. Mise en place d’un Framework de
Développement Mobile Multiplateformes
basé sur une approche MDA
Projet de Fin d’Études
Présenté en vue de l’obtention du titre
INGÉNIEUR D'ÉTAT
Soutenu par : Salma ES-SALMANI
Jury : Pr. Younes LAKHRISSI (Encadrant ENSA)
Pr. Nour El Houda CHAOUI (Encadrant ENSA)
Pr. Ghizlane KHAISSIDI (ENSA)
Pr. Safae HAJ BEN ALI (ENSA)
Pr. El Habib NFAOUI (Faculté des Sciences Fès)

2. 2
1 - Introduction
3 - Étude Technique
4 - Mise en œuvre
2 – Contexte Général du Projet
5 – Conclusion et Perspectives

3. 3
Étude Technique
Conclusion et
PerspectivesIntroduction
Contexte Général
du Projet
Mise en œuvre
Les développeurs de services sont confrontés à un challenge pour
développer des applications pour plusieurs plateformes …

4. 4
Centre de R&D logiciel, créé en 2010
Mission : Développer au Maroc (en sa qualité d’interface entre
l’Université et l’entreprise) une activité de recherche et développement
orientée marché, dans le domaine des logiciels.
Étude Technique
Conclusion et
Perspectives
Introduction Mise en œuvreContexte Général
du Projet

5. 5
Étude Technique
Conclusion et
Perspectives
Introduction Mise en œuvreContexte Général
du Projet

6. 6
Présentation de MEDIA MOBILITY
• Éditeur d’applications mobiles, créé en 2007
• Présence internationale : Casablanca, Paris, Dubaï, San Francisco
Produits :
 Marketing Mobile
 Commerce Mobile
 Déploiement multiscreen
Étude Technique
Conclusion et
Perspectives
Introduction Mise en œuvreContexte Général
du Projet

7. 7
Étude Technique
Conclusion et
Perspectives
Introduction Mise en œuvreContexte Général
du Projet

8. 8
Problématiques
Étude Technique
Conclusion et
Perspectives
Introduction Mise en œuvreContexte Général
du Projet
Comment couvrir un spectre maximal de devices (Objets
connectés, Smart TV, Smart Car …) avec un time-to-market
minimal et des coûts raisonnables?
Comment capitaliser sur le fonctionnel d’une application
indépendamment des préoccupations techniques afin d’en faciliter la
migration ?

9. Backend
Applications
Android/iOS natives
9
Environnement de Développement
Description des besoins
fonctionnelsExpert Métier
Ressources graphiques
(images, animations)Designer
Composants métiers
spécifiques (API, Web Services)Développeur
Étude Technique
Conclusion et
Perspectives
Introduction Mise en œuvreContexte Général
du Projet

10. 10
Étude du besoin
Étude technique
Rédaction du cahier de
charges
Conception et
Implémentation du DSL
Générateur de code
AvrilMarsFévrier Mai
Étude Technique
Conclusion et
Perspectives
Introduction Mise en œuvreContexte Général
du Projet

11. Approches typiques du développement mobile multiplateformes
11
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction Mise en œuvreÉtude
Technique

12. Approches typiques du développement mobile multiplateformes : Bilan
12
Attribut Application
Native
Application
Hybride
Mobile
Web
Facilité d’Apprentissage Difficile Moyen Facile
Performance Rapide Moyen Lent
Time To Market Long Court Court
Support des
fonctionnalités natives
(GPS, caméra, …)
Tout La plupart Aucune
Téléchargement à
partir du Store
Oui Oui Non
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction Mise en œuvreÉtude
Technique

13. Architecture Orientée Modèles : Principes
13
Décrire les besoins fonctionnels d’une
application indépendamment de la
plateforme d’exécution.
Passage d’une approche interprétative
à une approche transformationnelle.
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction Mise en œuvreÉtude
Technique

14. Architecture Orientée Modèles : Transformation de Modèles
14
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction Mise en œuvreÉtude
Technique
CIM
Modèle Métier Indépendant
PIM
Modèle Indépendant de la
Plateforme
PSM
Android
PSM
iOS
PSM
BlackBerry
Code
Android
Code
iOS
Code
BlackBerry
PDM
Android
PDM
iOS
PDM
BlackBerry

15. Définition d’un Langage de Modélisation (DSL)
15
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction Mise en œuvreÉtude
Technique
Notation orientée à un domaine en particulier.
S'oppose conceptuellement aux langages de programmation généralistes.
Terrain d’entente entre l’expert métier et l’informaticien

16. Génération du code : Approche Template
16
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction Mise en œuvreÉtude
Technique
Méta Modèle DSL
Modèle de
l’application mobile
Interpréteur de
Template
Templates
Android, iOS, …
Code Android, iOS …

17. L’intérêt de la MDA pour le développement mobile
17
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction Mise en œuvreÉtude
Technique
Réduire les
problématiques de
fragmentation
La modélisation de
la logique métier
mise en avant
Industrialisation du
processus de
développement
L’économie
d’échelle

18. Approche Recommandée
18
Moteurdetransformation Template
Android
Template
iOS
Générateur de Code
Application
Native
Android
Application
Native
iOS
Fichiers/
Ressources
Application Web
Serveur d’applications
Base de
DonnéesGrammaire
du DSL
Modèle de
l’application
mobile
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction Mise en œuvreÉtude
Technique

19. Choix de l’outil de modélisation/Génération de code
19
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction
Étude
Technique Mise en œuvre

20. Choix de l’outil de modélisation/Génération de code
20
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction
Étude
Technique Mise en œuvre
Support de l’Eclipse Foundation,
Accès libre aux sources,
Licence gratuite.

21. Eclipse Modeling Framework
21
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction
Étude
Technique Mise en œuvre
Création et manipulation de modèles
Transformation de modèles vers d'autres modèles
Transformation de modèles vers du code

22. Le framework Xtext
22
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction
Étude
Technique Mise en œuvre

23. Le langage Xtend
23
• Génération de code à partir de Xtext
• Langage basé sur Java, mais en y intégrant des features venant de la
programmation fonctionnelle
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction
Étude
Technique Mise en œuvre

24. Architecture Fonctionnelle du Framework
24
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction
Étude
Technique Mise en œuvre

25. Architecture Technique du Framework
25
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction
Étude
Technique Mise en œuvre

26. Conception du Langage de Modélisation
26
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction
Étude
Technique Mise en œuvre

27. Architecture MVC du Langage de Modélisation
27
Le modèle : décrit les données manipulées par l'application
(interaction avec la base de données, traitements, intégrité).
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction
Étude
Technique Mise en œuvre

28. Architecture MVC du Langage de Modélisation
28
Présenter les résultats renvoyés par le modèle,
Renvoyer toute action de l'utilisateur au contrôleur.
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction
Étude
Technique Mise en œuvre
La vue
Tabbed Pane
Grid Layout Pane

29. Architecture MVC du Langage de Modélisation
29
Gestion des évènements de
synchronisation
Analyse de la requête client
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction
Étude
Technique Mise en œuvre
Le contrôleur

30. Génération du code : Backend
30
• Application Java EE 6,
communique avec l’application
installée sur le device via une API
REST
• Les données sont échangées en
format JSON pour des raisons de
performance et d’intéropérabilité.
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction
Étude
Technique Mise en œuvre

31. Exemple d’une application générée
31
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction
Étude
Technique Mise en œuvre

32. Extension du Framework
32
Contexte Général
du Projet
Conclusion et
Perspectives
Introduction
Étude
Technique Mise en œuvre
Bundle de
Génération
Stratégie
de Build
Template
du projet

33. Bilan de la solution proposée
33
Contexte Général
du Projet
Mise en œuvreIntroduction
Étude
Technique
Conclusion et
Perspectives
Framework qui
couvre une grande
partie du cycle de
développement
Pérennisation du
savoir fonctionnel
Qualimétrie
logicielle

34. Perspectives d’Évolution
34
Mettre les modèles au coeur d’une usine de développement complète,
couvrant toutes les étapes du cycle de vie d’une application
Contexte Général
du Projet
Mise en œuvreIntroduction
Étude
Technique
Conclusion et
Perspectives

35. Questions - Réponses?
35