RapportProjetLibre-CrossplateformeMobiledev (1)

237 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
237
Sur SlideShare
0
Issues des intégrations
0
Intégrations
8
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

RapportProjetLibre-CrossplateformeMobiledev (1)

  1. 1. Cyril Sabbagh                                Développement mobile  cross­platform               
  2. 2. I- Introduction:   Le développement natif sur les plateformes mobiles nécessite la maîtrise de plusieurs  langages de programmation. Pour chaque OS mobile, le développeur est obligé de créer une  application spécifique, ce qui engendre des coûts supplémentaires et ne facilite pas la  maintenance de ces applications.        HTML5 est donc considérée comme une solution au problème de développement cross  platform. Étant compatible avec toutes les plateformes car elle se charge sur un navigateur  web, cette solution permet aux développeurs WEB d’adapter leurs sites  pour leurs donner  une apparence d’application mobile. C’est ce que l’on appel une “Web App”. Les Web apps  ne supportent pas la majeure des fonctionnalités natives que peuvent offrir nos appareils c’est  ce qui pousse les développeurs a créer des “Hybrid apps” en utilisant des frameworks  permettant d’accéder aux fonctionnalités natives des plateformes.   
  3. 3.     Une application hybride est une application web capsulée a l'intérieure d’une application  native. Il existe plusieurs framework qui permettent de créer des applications hybrides et ce  projet traite les deux framework les plus utilisés: Phonegap et Titanium.     
  4. 4. II- Cross Platform Frameworks:   Il existe beaucoup de framework permettant de créer des applications cross plateformes. Il  est important de bien choisir la framework dependemment des besoins de l’application. Ces  frameworks permettent de développer des applications pour différentes plateformes en  utilisant le même langage de programmation.    II.1- Phonegap:     PhoneGap Cordova est un Framework de développement mobile qui permet de développer  des applications mobiles cross­plateformes. Il est issue d’un projet Open Source qui a  récemment été racheté par Adobe. Le principe de phonegap est d’utiliser une webview native  pour visualiser l’application et fournir une API qui permet d'accéder aux fonctionnalités  natives des terminaux.  Les applications Phonegap sont donc codés en HTML, CSS et javascript tout comme les sites  web.    Avantages    ● HTML,Javascript et CSS  ● Intégration avec toute autre web framework (ex: commonJS, JQM, AngularJS...)  ● Outils de développement web (Chrome inspector ...)    Inconvénients    ● Pas d'accès aux UI natives et donc dépend d’une UI framework (Jquery Mobile)  ● Les performances dépendent de ceux du navigateur  ● Problèmes standards de compatibilité cross­navigateur    La stratégie “Code once, deploy everywhere” adoptée par Phonegap fait ravir le monde du  web. En effet, avec phonegap, la portabilité de l’application pour différentes plateformes est 
  5. 5. quasi transparente: le même code est utilisé pour créer toutes les applications. Bien écrite,  l’application peut même être utilisée comme site mobile ou “web app”.  II.2- Titanium:     Titanium est une framework Open Source développée par la compagnie Appcelerator qui  permet de developper des application mobiles cross plateformes. Titanium n’adopte pas la  même stratégie que phonegap,elle ne dépend pas de HTML et CSS  et offre la possibilité  d’utiliser les UI natives des plateformes. En effet, Titanium ​ ​est basés sur une logique de «  traduction » d’un langage dédié javascript dans les langages natifs des différents OS.    Avantages    ● Accès aux UI Natives  ● Existe un IDE Titanium Studio  ● 100% javascript  ● Marketplace riche  ● Ne dépend pas d’autre Framework    Inconvénients    ● Code peut varier pour différentes plates­formes  ● Pas de HTML et CSS  ● Temps d’apprentissage      III- Travail Effectué: III.1- Web Services:   Ce projet libre a pour objectif de tester deux technologies de développement cross  plateformes dans le but de créer une application mobile d’une startup dont le site est déjà  crée. C’est pourquoi, afin de travailler dans les conditions les plus proches de la réalité, il a  fallut créer les webservices qui serviront a alimenter le contenu de l’application mobile. 
  6. 6. Le site est développé en langage PHP et utilise la framework ELGG. Le travail effectué a  donc été fait sous forme d’un plugin à ajouter au framework ELGG et qui fourni les  webservices.  Les réponses du serveurs sont en langage Json qui est très simple a parser et plus léger que  du XML. Voici un exemple de requête GET suivi de la réponse du serveur:    requête:  http://mawsool.cyrilsabbagh.com/services/api/rest/json/?method=jobs.get_posts&context=all    réponse:  {"status":0,"result":[{"guid":597,"title":"Second role in a TV add","owner":"Wonderful  Production","excerpt":"We are looking for a young and talented drummer to play the second  role in a TV add. He will be paid 500$ and should pass a casting.","job_category":"Full  Time","paid":"Yes","job_location":"Dbaiye, Mount Lebanon,  Lebanon","job_start_date":"2014­07­26","job_deadline":"2014­07­21","owner_icon":"http://m awsool.cyrilsabbagh.com/avatar/view/wonderfulproduction/medium/1375101324.jpg","time _created":1402618264},{"guid":173,"title":"Promoter at Virgin Megastore","owner":"Cyril  Sabbagh","excerpt":"We are looking for fresh and motivated student to promote Nikon  cameras and its holiday offers!rnSo if you are a passionate photographer apply  now!","job_category":"Part Time","paid":"Yes","job_location":"Achrafieh, Beirut,  Lebanon","job_start_date":"2014­05­21","job_deadline":"2014­06­28","owner_icon":"http://m awsool.cyrilsabbagh.com/_graphics/icons/user/defaultmedium.gif","time_created":1400165 415}]}    III.2- Prototype Phonegap:   Le prototype Phonegap consiste a créer une application qui intègre la geolocalisation de  données provenant du site web.  IOS: 
  7. 7.     Android:      Cet application a été développée a l’aide de Jquery Mobile qui est une librairie permettant de  créer des interfaces utilisateurs pour mobile. Tout le projet est composé de 3 fichiers:  ● index.html : contenant les pages ainsi que le chargement des librairies nécessaire  ● index.css : contenant le style des pages  ● index.js : contenant la logique de l’application 
  8. 8. La geolocalisation se fait à l’aide de la fonction getCurrentLocation de HTML5 et la carte est  représentée a l’aide de Google maps API comme elle le serait sur un site web normal.  On peut constater que l’application est exactement identique sur les deux plateformes.    III.3- Prototype Titanium:   Le prototype Phonegap consiste a créer une application qui intègre la geolocalisation de  données provenant du site web.                  IOS:      Android: 
  9. 9.   Cet application a été développée a l’aide de CommonJs qui est une librairie permettant de  structurer le code en petits bouts de code appelés modules. Le projet est composé d’un  fichier javascript spécifique a chaque plateforme et d’autres fichier communs a toutes les  plateformes.  La geolocalisation se fait à l’aide des fonctions natives de chaque plateformes et la carte  représentée est native et dépend de la plateforme utilisée.  On peut constater que l’application est différente selon les plateforme car Titanium utilise les  UI native spécifique à chaque plateforme. On peut par exemple noter l’absence du bouton  “Back” dans l’interface Android car ces terminaux disposent d’un bouton “Back” physique.    III.4- Comparaison:   a) Fonctionnalités:      Phonegap  Titanium  UI  Pas native mais très simple  a coder et a personnaliser  UI Native mais très  complexe a coder et  personnaliser 
  10. 10. HTTP request  Ajax, mais impossible de  tester sur les navigateurs:  CROSS­ORIGIN   Fonction fournie par l’API  MAPS  Google Maps API v3 .js  Map Native à la plateforme  Geolocalisation  HTML5 getCurrentLocation  Fonction fournie par l’API    b) IOS app memory allocation:    ­ Pour Titanium:      ­ Pour Phonegap:      Ces tests effectués à l’aide de l’outil Instruments permettent de représenter la mémoire  allouée pendant la durée de vie de l’application. Les sauts dans les 2 courbes correspondent  aux moments ou la carte est chargée. On remarque que d'après ces graphes, il n’y a pas de 
  11. 11. différences en terme de mémoire allouée entre le chargement d’une carte native et le  chargement d’une carte Google maps. La réelle différence se trouve lors des temps de repos  de l’application où l’on peut constater que phonegap continu a allouer de la mémoire alors  que Titanium n’en alloue presque pas. Cela est évidemment du au fait que Phonegap génère  l’interface dans une webview et doit donc récupérer les éléments graphiques de celle­ci alors  que Titanium utilise les éléments graphiques natifs contenu dans l’OS même.      IV- Conclusion:   Phonegap:    ● Solution la plus adaptée aux développeurs web  ● Code once, deploy everywhere  ● Performance très correcte grâce aux nouveaux terminaux  ● Bien écrit, le même code peut être utilisé pour le site mobile    Titanium:    ● Solution la plus adaptée pour créer des apps natives  ● Performances  ● Nécessite des connaissances en développement mobile 

×