2011 paug-presentation-de-titanium-mobile
Upcoming SlideShare
Loading in...5
×
 

2011 paug-presentation-de-titanium-mobile

on

  • 1,284 views

http://www.paug.fr

http://www.paug.fr

Statistics

Views

Total Views
1,284
Slideshare-icon Views on SlideShare
1,232
Embed Views
52

Actions

Likes
1
Downloads
33
Comments
0

4 Embeds 52

http://www.paug.fr 48
http://webcache.googleusercontent.com 2
http://feeds.feedburner.com 1
http://www.docseek.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    2011 paug-presentation-de-titanium-mobile 2011 paug-presentation-de-titanium-mobile Presentation Transcript

    • Développement Cross-Platform avec Titanium Mobile Xavier Lacot – 06 Décembre 2011
    • Qui suis-je ? Xavier Lacot ■ Clever Age ■ Dirige le centre dexpertise ■ Leader technique du pôle PHP ■ Contributeur à plusieurs projets Open Source ■ Développeur Titanium depuis 2009 ■ Expert frameworks Web ■ Vice Président De lAssociation Française des Utilisateurs de PHP (afup.org) ■ http://twitter.com/xavierlacotParis Android User Group - Développement Cross-Platform avec Titanium Mobile 2Xavier Lacot | 6 Décembre 2011
    • Sommaire 1. Pourquoi Titanium mobile ? 2. Quest-ce que Titanium mobile ? ■ Mode de fonctionnement ■ Principes de développement 3. Démarrer avec Titanium ■ Outillage et Documentation 4. Tour des APIs disponibles 5. Démonstration simpleParis Android User Group - Développement Cross-Platform avec Titanium Mobile 3Xavier Lacot | 6 Décembre 2011
    • Un large panel de solutions disponiblesParis Android User Group - Développement Cross-Platform avec Titanium Mobile 4Xavier Lacot | 6 Décembre 2011
    • WebApp vs. App natives WebApp App native Portabilité Navigateur Web : toutes Développement spécifique plateformes Référencement Moteurs de recherche Référencement dans les App classiques Stores Accessibilité Peu de contraintes Dépendant de la validation Mode offline impossible Mode offline possible Dépend de la techno du Performance maximale Performance serveur, de la connexion, ... (exécuté sur le mobile) Mise à jour instantanée sur le Dépend du processus de Mises à jour serveur validation sur le store Limité aux capacités des Plus de possibilités, plus riche : Effet « Waouw » navigateurs mobiles nécessité marketing Compétences classiques Compétences plus rares et Coût de développement Coût limité éparses. Coût généralement plus élevé.Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 5Xavier Lacot | 6 Décembre 2011
    • Parts de marchéParis Android User Group - Développement Cross-Platform avec Titanium Mobile 6Xavier Lacot | 6 Décembre 2011
    • Le choix des développeurs...Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 7Xavier Lacot | 6 Décembre 2011
    • Constat ■ Constat : ■ Développements natifs compliqués ■ Piles applicatives différentes => plusieurs développements nécessaires ■ Difficile danticiper les évolutions de chaque système ■ Risqué de miser sur des compétences potentiellement inutiles dans les années à venir ■ Besoin dun framework dabstraction ■ Mutualiser les développements ■ Développer plus rapidement ■ Industrialiser (tests unitaires, intégration continue, etc.) ■ Établir un choix pérenneParis Android User Group - Développement Cross-Platform avec Titanium Mobile 8Xavier Lacot | 6 Décembre 2011
    • Sommaire 1. Pourquoi Titanium mobile ? 2. Quest-ce que Titanium mobile ? ■ Mode de fonctionnement ■ Principes de développement 3. Démarrer avec Titanium ■ Outillage et Documentation 4. Tour des APIs disponibles 5. Démonstration simpleParis Android User Group - Développement Cross-Platform avec Titanium Mobile 9Xavier Lacot | 6 Décembre 2011
    • « Titanium is an open source framework for building native desktop and mobile applications using open web technologies (HTML, CSS, and JavaScript) »Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 10Xavier Lacot | 6 Décembre 2011
    • Titanium mobile ■ Framework ■ Open Source ■ Sponsor : Appcelerator ■ Apparu en août 2009 ■ Développement en javascript ■ Cross-Plateformes ■ iOS, Android, (BlackBerry) ■ Bilan : ■ Applications natives avec un look natif ■ APIs identiques suivant les cibles ■ Look natif → adapté à la plupart de vos applications !Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 11Xavier Lacot | 6 Décembre 2011
    • Trois bonnes raisons pour Titanium... ■ Langages Web très populaires ■ Faciles à apprendre ■ Très répandus ■ Standards ouverts ■ Cross platform ■ Codez une fois, déployez plusieurs ! ■ Applications natives ■ Rapides ■ Mode offline ■ Accès aux fonctionnalités matérielles ■ Actives en tâche de fondParis Android User Group - Développement Cross-Platform avec Titanium Mobile 12Xavier Lacot | 6 Décembre 2011
    • Et encore plus... Deux frameworks distincts : ■ Un framework « desktop », Titanium Desktop ■ Javascript, ■ PHP, ■ Python, ■ Ruby ■ Un framework « mobile »... Titanium Mobile ! ■ HTML / CSS / javascript ■ En pratique js principalement, rarement HTML ou CSSParis Android User Group - Développement Cross-Platform avec Titanium Mobile 13Xavier Lacot | 6 Décembre 2011
    • Architecture du frameworkParis Android User Group - Développement Cross-Platform avec Titanium Mobile 14Xavier Lacot | 6 Décembre 2011
    • Architecture du frameworkParis Android User Group - Développement Cross-Platform avec Titanium Mobile 15Xavier Lacot | 6 Décembre 2011
    • APIs offertes Titanium ■ Titanium.Analytics : statistiques et rapports dutilisation ■ Titanium.API : logging ■ Titanium.App : informations liées à lapplication ■ Titanium.Contacts: carnet dadresse ■ Titanium.Database: bases de données ■ Titanium.Filesystem: système de fichiers ■ Titanium.Geolocation: géolocalisation ■ Titanium.Map: cartographie ■ Titanium.Network: réseau ■ Titanium.Platform: informations au sujet de la plateforme ■ Titanium.UI : tous les éléments dinterface ■ etc.Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 16Xavier Lacot | 6 Décembre 2011
    • Mécanismes de compilation (1/3) Compilation Compilation .js Pré-compilation “front-end” “cible” ■ Analyse des dépendances (API requises, etc.) ■ Pré-validation du code javascriptParis Android User Group - Développement Cross-Platform avec Titanium Mobile 17Xavier Lacot | 6 Décembre 2011
    • Mécanismes de compilation (2/3) Compilation Compilation .js Pré-compilation “cible” “front-end” ■ Compilation des librairies de Titanium ■ Préparation à la compilation sur la plateforme cible (dépendances, etc.)Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 18Xavier Lacot | 6 Décembre 2011
    • Mécanismes de compilation (3/3) Compilation Compilation .js Pré-compilation “cible” “front-end” ■ Appel des outils de compilation fournis par les SDKs ■ IOS ■ transformation du js sous la forme de variables Objective-C ■ Interprétation à lexécution par linterpréteur javascript de liPhone ■ Android ■ Précompilation en bytecode, ■ Interprétation par Rhino (Mozilla) embarqué dans lappli, ■ Bientôt par V8 (Titanium 1.8), bien plus performantParis Android User Group - Développement Cross-Platform avec Titanium Mobile 19Xavier Lacot | 6 Décembre 2011
    • Sommaire 1. Pourquoi Titanium mobile ? 2. Quest-ce que Titanium mobile ? ■ Mode de fonctionnement ■ Principes de développement 3. Démarrer avec Titanium ■ Outillage et Documentation 4. Tour des APIs disponibles 5. Démonstration simpleParis Android User Group - Développement Cross-Platform avec Titanium Mobile 20Xavier Lacot | 6 Décembre 2011
    • Principes de développement Titanium est peu contraignant ■ Possibilité dappliquer des bonnes pratiques ■ … ou pas → de nombreux problèmes en perspective ! Bonnes pratiques : ■ Pas de variables globales ■ Toujours utiliser lopérateur de comparaison et non lopérateur dégalité ■ Utilisez lopérateur ternaire ■ Conception modulaire ■ Validation JSLint / JSHint ■ Toujours utiliser le point virgule (« ; ») en fin de blocs dinstructions !Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 21Xavier Lacot | 6 Décembre 2011
    • Pas de variables globales // The bad // The good var key = value, var application = { foo = bar, key: value, human = john; foo: bar, human: john function hello(name) { }; alert(Hello + world); } application.hello = function(name) { alert(Hello + world); function transform(value) { }; return Logging + value; } (function() { // locally defined function function log(text) { function transform(value) { Titanium.API.log( return Logging + value; transform(text) } ); } application.log = function(text) { Titanium.API.log( // call the function transform(text) log(Coucou poney!); ); } })(); // call the function application.log(Coucou poney!);Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 22Xavier Lacot | 6 Décembre 2011
    • Opérateur de comparaison // utilisez === et non == Ti.API.info(false == 0); // true Ti.API.info(false == ); // true Ti.API.info( == 0); // true Ti.API.info(null == 0); // true Ti.API.info(undefined == false); // true Ti.API.info(NaN == 0); // true // attention aux comparaisons de flottants Ti.API.info(0.3 + 0.4 === 0.7); // false // attention à  typeof Ti.API.info(typeof null); // object Ti.API.info(typeof NaN); // number Voir http://wtfjs.com/ pour plus dexemples...Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 23Xavier Lacot | 6 Décembre 2011
    • Règles à ne pas négliger ■ À faire ■ Utiliser des noms de variable expressifs ■ Utiliser les coding standards fournies par Google : http://xav.cc/d7f90 ■ Commenter votre code ■ Valider la syntaxe avec JSLint ou JSHint ■ http://www.jshint.com/ ■ https://github.com/jshint/jshint ■ Utiliser de manière extensive (et savoir quon le fait) : ■ Les closures ■ Lhéritage par prototypes ■ Le “require()” de CommonJS (cf. http://www.commonjs.org)Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 24Xavier Lacot | 6 Décembre 2011
    • Sommaire 1. Pourquoi Titanium mobile ? 2. Quest-ce que Titanium mobile ? ■ Mode de fonctionnement ■ Principes de développement 3. Démarrer avec Titanium ■ Outillage et Documentation 4. Tour des APIs disponibles 5. Démonstration simpleParis Android User Group - Développement Cross-Platform avec Titanium Mobile 25Xavier Lacot | 6 Décembre 2011
    • Titanium Developer ■ Abandonné début 2011 ■ Pas dIDE intégréParis Android User Group - Développement Cross-Platform avec Titanium Mobile 26Xavier Lacot | 6 Décembre 2011
    • Titanium StudioParis Android User Group - Développement Cross-Platform avec Titanium Mobile 27Xavier Lacot | 6 Décembre 2011
    • Titanium Studio ■ Titanium Studio ■ Aptana, éditeur basé sur Eclipse ■ Racheté début 2011 ■ Forte intégration avec les SDK ■ Permet : ■ De créer un projet ■ Debugger intégré ■ Auto-complétion / aide au code ■ De lancer les simulateurs / émulateurs iOS et Android ■ Inclus au moment de télécharger le frameworkParis Android User Group - Développement Cross-Platform avec Titanium Mobile 28Xavier Lacot | 6 Décembre 2011
    • Premier projetParis Android User Group - Développement Cross-Platform avec Titanium Mobile 29Xavier Lacot | 6 Décembre 2011
    • Premier projet Project name : nom du projet App Id : identifiant de lapplication, très important Deployment targets : choix des plateformes ciblesParis Android User Group - Développement Cross-Platform avec Titanium Mobile 30Xavier Lacot | 6 Décembre 2011
    • Premier projetParis Android User Group - Développement Cross-Platform avec Titanium Mobile 31Xavier Lacot | 6 Décembre 2011
    • Contenu dun projet ■ build : dossier de compilation ■ Resources : ■ le code de lapplication ■ tous les assets (images, etc.) ■ éventuellement une base SQLite ■ éventuellement des modules natifs ■ tiapp.xml : les directives de configuration et de compilation ■ Noms, icône et copyright ■ Full screen ? ■ Analytics ? ■ Différents paramètresParis Android User Group - Développement Cross-Platform avec Titanium Mobile 32Xavier Lacot | 6 Décembre 2011
    • Cross-platform...Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 33Xavier Lacot | 6 Décembre 2011
    • Documentation, aide et exemples ■ Documentation : ■ API : votre meilleure amie ! http://developer.appcelerator.com/apidoc/mobile/latest ■ Référence, littérature (assez) exhaustive : http://wiki.appcelerator.org/display/guides/Home ■ Aide : ■ Questions : http://developer.appcelerator.com/questions ■ Vidéos : http://vimeopro.com/appcelerator/forging-titanium ■ Cours vidéo : http://vimeopro.com/appcelerator/building-native-mobile-applications ■ Exemples : ■ KitchenSink http://github.com/appcelerator/KitchenSink ■ Application multiplateformes : https://github.com/appcelerator/CodestrongParis Android User Group - Développement Cross-Platform avec Titanium Mobile 34Xavier Lacot | 6 Décembre 2011
    • Tests unitaires et qualité ■ Objectifs : ■ Tester certaines parties de lapplication automatiquement ■ Mettre en place des tests automatiques réguliers ■ Améliorer la qualité ■ Détecter et corriger les problèmes en avance ■ Plusieurs solutions possibles ■ Titanium Jasmise - https://github.com/guilhermechapiewski/titanium-jasmine ■ JsUnity – http://jsunity.com ■ Qunit pour Titanium - http://github.com/lukaso/qunitParis Android User Group - Développement Cross-Platform avec Titanium Mobile 35Xavier Lacot | 6 Décembre 2011
    • Tests unitaires et qualité ■ Utilisation de Titanium jasmine ■ Exemple : utilisé pour tester joli.js (function() { describe(joli.query, function() { var q; it(joli.query.destroy(), function() { q = new joli.query().destroy().from(human); expect(q.getQuery()).toBe(delete from human); }); }); })(); ■ Principe : assertions (expect()) et vérifications (toBe()) ■ Bien mais pas aussi puissant quun PHPUnit...Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 36Xavier Lacot | 6 Décembre 2011
    • Sommaire 1. Pourquoi Titanium mobile ? 2. Quest-ce que Titanium mobile ? ■ Mode de fonctionnement ■ Principes de développement 3. Démarrer avec Titanium ■ Outillage et Documentation 4. Tour des APIs disponibles 5. Démonstration simpleParis Android User Group - Développement Cross-Platform avec Titanium Mobile 37Xavier Lacot | 6 Décembre 2011
    • Gestion des fenêtresParis Android User Group - Développement Cross-Platform avec Titanium Mobile 38Xavier Lacot | 6 Décembre 2011
    • Vues ■ La composition graphique se fait avec des vues : ■ Image view ■ Scroll view ■ Scrollable view ■ Table view ■ Web view ■ Map view ■ Coverflow view ■ Dashboard view ■ Une vue peut en contenir une autre ■ Analogie à Swing...Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 39Xavier Lacot | 6 Décembre 2011
    • Image view Insertion dimages ■ Le paramètre « image » peut être une url var win = Titanium.UI.currentWindow; var imageView = Titanium.UI.createImageView({ image: titanium.png, width: 261, height: 178, top: 20 }); imageView.addEventListener(load, function() { Ti.API.info(LOAD CALLED); }); win.add(imageView);Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 40Xavier Lacot | 6 Décembre 2011
    • Table view■ Données tabulaires ■ Possibilité de headers ■ Chaque cellule peut contenir des contrôles var data = [ {title: Alan, hasChild: true, header: A}, {title: Alice, hasDetail: true}, {title: Brad, header: B}, {title: Brenda}, {title: Callie, header: C}, {title: Chris}, ]; var search = Titanium.UI.createSearchBar({ showCancel: false }); // create table view var tableview = Titanium.UI.createTableView({ data: data, search: search, filterAttribute: title }); win.add(tableview);Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 41Xavier Lacot | 6 Décembre 2011
    • Widgets Les éléments dinterface avec lesquels lutilisateur peut interagir : Activity Indicator Label (Date) picker Slider Progress bar Switch Search bar Button Button bar Toolbar Textarea TextfieldParis Android User Group - Développement Cross-Platform avec Titanium Mobile 42Xavier Lacot | 6 Décembre 2011
    • WidgetsParis Android User Group - Développement Cross-Platform avec Titanium Mobile 43Xavier Lacot | 6 Décembre 2011
    • Widgets ■ Construction par appel du constructeur dans Ti.UI ■ Paramètres nombreux et variés ■ API permettant de manipuler les widgets ■ Interactions associées à des évènements ■ click ■ swipe ■ touchend ■ etc.Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 44Xavier Lacot | 6 Décembre 2011
    • APIs matérielles Titanium donne accès à un grand nombre dAPIs natives de lappareil : ■ Accéléromètre ■ Caméra ■ Médias ■ Géolocalisation ■ Réseau ■ Base de données ■ Presse papier ■ etc. Toutes ces APIs sont exposées sous Titanium.* ■ Exploitables en javascript ■ Exploitables depuis les Webview depuis du HTML localParis Android User Group - Développement Cross-Platform avec Titanium Mobile 45Xavier Lacot | 6 Décembre 2011
    • Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 46Xavier Lacot | 6 Décembre 2011
    • Exemple : Titanium.Media■ accès aux interactions de type « Média » ■ Enregistrement / lecture de photos et vidéos ■ Enregistrement / lecture de sons ou de morceaux de musique■ Caméra : ■ que sur un vrai device, pas en simulateur ■ showCamera() ■ callbacks ■ allowEditing ■ mediaTypes ■ showControls ■ SaveToPhotoGallery ■ Overlay ■ takePicture() ■ saveToPhotoGallery() ■ hideCamera()Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 47Xavier Lacot | 6 Décembre 2011
    • Exemple : Titanium.Media var win = Titanium.UI.currentWindow; Titanium.Media.showCamera({ success: function(event) { var image = event.media; if (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) { var imageView = Ti.UI.createImageView({ width: win.width, height: win.height, image: event.media }); win.add(imageView); } else { alert(Take a picture. Illegal type + event.mediaType); } }, cancel: function() {}, error: function(error) { // show an error message // test error code Titanium.Media.NO_CAMERA }, saveToPhotoGallery: true, mediaTypes: [Ti.Media.MEDIA_TYPE_VIDEO, Ti.Media.MEDIA_TYPE_PHOTO] });Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 48Xavier Lacot | 6 Décembre 2011
    • Organiser son application ■ Ne faites pas des fichiers de 1500 lignes ! ■ Utilisez Titanium.include() (ou require()) ■ Concevez des modules js ■ Pseudo-MVC possible ■ Logique métier dans “contrôleur” ■ Affichage dans un fichier de vue ■ ORMs existants (joli.js FTW – voir https://github.com/xavierlacot/joli.js) Si vous nêtes pas méticuleux, vous irez dans le murParis Android User Group - Développement Cross-Platform avec Titanium Mobile 49Xavier Lacot | 6 Décembre 2011
    • Sommaire 1. Pourquoi Titanium mobile ? 2. Quest-ce que Titanium mobile ? ■ Mode de fonctionnement ■ Principes de développement 3. Démarrer avec Titanium ■ Outillage et Documentation 4. Tour des APIs disponibles 5. Démonstration simpleParis Android User Group - Développement Cross-Platform avec Titanium Mobile 50Xavier Lacot | 6 Décembre 2011
    • Du temps pour une démo ? ■ Un carnet dadresses synchronisé par des Web Services ■ Le code source est disponible sur https://github.com/xavierlacot/joli.api.js-app-demoParis Android User Group - Développement Cross-Platform avec Titanium Mobile 51Xavier Lacot | 6 Décembre 2011
    • STOP WHINING STOP WHINING MORRON MORRON GO USE GO USE TITANIUM TITANIUMParis Android User Group - Développement Cross-Platform avec Titanium Mobile 52Xavier Lacot | 6 Décembre 2011
    • ? Desquestions ?