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 (Faculte des Sciences Fes)

2

1 - Introduction

3 - Étude Technique

4 - Mise en œuvre

2 – Contexte Général du Projet

5 – Conclusion et Perspectives

3

Étude TechniqueConclusion et PerspectivesIntroduction

Contexte Général du Projet

Mise en œuvre

Les developpeurs de services sont confrontes à un challenge pour developper des applications pour plusieurs plateformes …

4

Centre de R&D logiciel, cree en 2010

Mission : Developper au Maroc (en sa qualite d’interface entre

l’Universite et l’entreprise) une activite de recherche et developpement

orientee marche, dans le domaine des logiciels.

Étude TechniqueConclusion et Perspectives

Introduction Mise en œuvreContexte Général du Projet

5

Étude TechniqueConclusion et Perspectives

Introduction Mise en œuvreContexte Général du Projet

6

Présentation de MEDIA MOBILITY

• Éditeur d’applications mobiles, cree en 2007

• Présence internationale : Casablanca, Paris, Dubaï, San Francisco

Produits :

Marketing Mobile

Commerce Mobile

Déploiement multiscreen

Étude TechniqueConclusion et Perspectives

Introduction Mise en œuvreContexte Général du Projet

7

Étude TechniqueConclusion et Perspectives

Introduction Mise en œuvreContexte Général du Projet

8

Problématiques

Étude TechniqueConclusion et Perspectives

Introduction Mise en œuvreContexte Général du Projet

Comment couvrir un spectre maximal de devices (Objets

connectes, Smart TV, Smart Car …) avec un time-to-market

minimal et des coûts raisonnables? 

Comment capitaliser sur le fonctionnel d’une application

independamment des preoccupations techniques afin d’en faciliter la

migration ? 

Backend

Applications Android/iOS natives

9

Environnement de Developpement

Description des besoins fonctionnelsExpert Metier

Ressources graphiques (images, animations)Designer

Composants métiers spécifiques (API, Web Services)Developpeur

Étude TechniqueConclusion et Perspectives

Introduction Mise en œuvreContexte Général du Projet

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 TechniqueConclusion et Perspectives

Introduction Mise en œuvreContexte Général du Projet

Approches typiques du développement mobile multiplateformes

11

Contexte Général du Projet

Conclusion et Perspectives

Introduction Mise en œuvreÉtude Technique

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

Architecture Orientée Modèles : Principes

13

Decrire les besoins fonctionnels

d’une application independamment

de la plateforme d’execution.

Passage d’une approche interpretative

à une approche transformationnelle.

Contexte Général du Projet

Conclusion et Perspectives

Introduction Mise en œuvreÉtude Technique

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

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 orientee à un domaine en particulier.

S'oppose conceptuellement aux langages de programmation generalistes.

Terrain d’entente entre l’expert métier et l’informaticien

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 …

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

Reduire les problematiques de

fragmentation

La modelisation de la logique metier

mise en avant

Industrialisation du processus de

developpement

L’economie d’echelle

Approche Recommandée

18

Mot

eur d

e tr

ansf

orm

ation

Template Android

Template iOS

Generateur de Code

ApplicationNative

Android

ApplicationNative

iOS

Fichiers/ Ressources

Application Web

Serveur d’applications

Base de Données

http://

http

://

Grammaire du DSL

Modèle de l’application

mobile

Contexte Général du Projet

Conclusion et Perspectives

Introduction Mise en œuvreÉtude Technique

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

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,

Acces libre aux sources,

Licence gratuite.

Eclipse Modeling Framework

21

Contexte Général du Projet

Conclusion et Perspectives

IntroductionÉtude

Technique Mise en œuvre

Creation et manipulation de modeles

Transformation de modeles vers d'autres modeles

Transformation de modeles vers du code

Le framework Xtext

22

Contexte Général du Projet

Conclusion et Perspectives

IntroductionÉtude

Technique Mise en œuvre

Le langage Xtend

23

• Generation de code à partir de Xtext

• Langage base sur Java, mais en y integrant des features venant de la

programmation fonctionnelle

Contexte Général du Projet

Conclusion et Perspectives

IntroductionÉtude

Technique Mise en œuvre

Architecture Fonctionnelle du Framework

24

Contexte Général du Projet

Conclusion et Perspectives

IntroductionÉtude

Technique Mise en œuvre

Architecture Technique du Framework

25

Contexte Général du Projet

Conclusion et Perspectives

IntroductionÉtude

Technique Mise en œuvre

Conception du Langage de Modélisation

26

Contexte Général du Projet

Conclusion et Perspectives

IntroductionÉtude

Technique Mise en œuvre

Architecture MVC du Langage de Modélisation

27

Le modèle : decrit les donnees manipulees par l'application

(interaction avec la base de donnees, traitements, integrite).

Contexte Général du Projet

Conclusion et Perspectives

IntroductionÉtude

Technique Mise en œuvre

Architecture MVC du Langage de Modélisation

28

Presenter les resultats renvoyes par le modele,

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

Architecture MVC du Langage de Modélisation

29

Gestion des evenements 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

Génération du code : Backend

30

• Application Java EE 6,

communique avec l’application

installee sur le device via une API

REST

• Les donnees sont echangees en

format JSON pour des raisons de

performance et d’interoperabilite.

Contexte Général du Projet

Conclusion et Perspectives

IntroductionÉtude

Technique Mise en œuvre

Exemple d’une application générée

31

Contexte Général du Projet

Conclusion et Perspectives

IntroductionÉtude

Technique Mise en œuvre

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

Bilan de la solution proposée

33

Contexte Général du Projet

Mise en œuvreIntroductionÉtude

TechniqueConclusion et Perspectives

Framework qui

couvre une grande

partie du cycle de

developpement

Perennisation du

savoir fonctionnel

Qualimetrie

logicielle

Perspectives d’Évolution

34

Mettre les modeles au coeur d’une usine de developpement complete,

couvrant toutes les etapes du cycle de vie d’une application

Contexte Général du Projet

Mise en œuvreIntroductionÉtude

TechniqueConclusion et Perspectives

Questions - Reponses?

35