1. Développement Cross-Platform
avec Titanium Mobile
Xavier Lacot – 06 Décembre 2011

2. Qui suis-je ?
Xavier Lacot
■ Clever Age
■ Dirige le centre d'expertise
■ Leader technique du pôle PHP
■ Contributeur à plusieurs projets Open Source
■ Développeur Titanium depuis 2009
■ Expert frameworks Web
■ Vice Président De l'Association Française des Utilisateurs de
PHP (afup.org)
■ http://twitter.com/xavierlacot
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 2
Xavier Lacot | 6 Décembre 2011

3. Sommaire
1. Pourquoi Titanium mobile ?
2. Qu'est-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 simple
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 3
Xavier Lacot | 6 Décembre 2011

4. Un large panel de solutions disponibles
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 4
Xavier Lacot | 6 Décembre 2011

5. 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 5
Xavier Lacot | 6 Décembre 2011

6. Parts de marché
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 6
Xavier Lacot | 6 Décembre 2011

7. Le choix des développeurs...
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 7
Xavier Lacot | 6 Décembre 2011

8. Constat
■ Constat :
■ Développements natifs compliqués
■ Piles applicatives différentes => plusieurs développements nécessaires
■ Difficile d'anticiper les évolutions de chaque système
■ Risqué de miser sur des compétences potentiellement inutiles dans les
années à venir
■ Besoin d'un framework d'abstraction
■ Mutualiser les développements
■ Développer plus rapidement
■ Industrialiser (tests unitaires, intégration continue, etc.)
■ Établir un choix pérenne
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 8
Xavier Lacot | 6 Décembre 2011

9. Sommaire
1. Pourquoi Titanium mobile ?
2. Qu'est-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 simple
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 9
Xavier Lacot | 6 Décembre 2011

10. « 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 10
Xavier Lacot | 6 Décembre 2011

11. 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 11
Xavier Lacot | 6 Décembre 2011

12. 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 fond
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 12
Xavier Lacot | 6 Décembre 2011

13. 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 CSS
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 13
Xavier Lacot | 6 Décembre 2011

14. Architecture du framework
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 14
Xavier Lacot | 6 Décembre 2011

15. Architecture du framework
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 15
Xavier Lacot | 6 Décembre 2011

16. APIs offertes Titanium
■ Titanium.Analytics : statistiques et rapports d'utilisation
■ Titanium.API : logging
■ Titanium.App : informations liées à l'application
■ Titanium.Contacts: carnet d'adresse
■ 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 d'interface
■ etc.
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 16
Xavier Lacot | 6 Décembre 2011

17. 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 javascript
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 17
Xavier Lacot | 6 Décembre 2011

18. 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 18
Xavier Lacot | 6 Décembre 2011

19. 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 à l'exécution par l'interpréteur javascript de l'iPhone
■ Android
■ Précompilation en bytecode,
■ Interprétation par Rhino (Mozilla) embarqué dans l'appli,
■ Bientôt par V8 (Titanium 1.8), bien plus performant
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 19
Xavier Lacot | 6 Décembre 2011

20. Sommaire
1. Pourquoi Titanium mobile ?
2. Qu'est-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 simple
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 20
Xavier Lacot | 6 Décembre 2011

21. Principes de développement
Titanium est peu contraignant
■ Possibilité d'appliquer des bonnes pratiques
■ … ou pas → de nombreux problèmes en perspective !
Bonnes pratiques :
■ Pas de variables globales
■ Toujours utiliser l'opérateur de comparaison et non l'opérateur d'égalité
■ Utilisez l'opérateur ternaire
■ Conception modulaire
■ Validation JSLint / JSHint
■ Toujours utiliser le point virgule (« ; ») en fin de blocs d'instructions !
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 21
Xavier Lacot | 6 Décembre 2011

22. 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 22
Xavier Lacot | 6 Décembre 2011

23. 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 d'exemples...
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 23
Xavier Lacot | 6 Décembre 2011

24. 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 qu'on le fait) :
■ Les closures
■ L'héritage par prototypes
■ Le “require()” de CommonJS (cf. http://www.commonjs.org)
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 24
Xavier Lacot | 6 Décembre 2011

25. Sommaire
1. Pourquoi Titanium mobile ?
2. Qu'est-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 simple
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 25
Xavier Lacot | 6 Décembre 2011

26. Titanium Developer
■ Abandonné
début 2011
■ Pas d'IDE
intégré
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 26
Xavier Lacot | 6 Décembre 2011

27. Titanium Studio
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 27
Xavier Lacot | 6 Décembre 2011

28. 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 framework
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 28
Xavier Lacot | 6 Décembre 2011

29. Premier projet
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 29
Xavier Lacot | 6 Décembre 2011

30. Premier projet
Project name :
nom du projet
App Id :
identifiant de l'application,
très important
Deployment targets :
choix des plateformes
cibles
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 30
Xavier Lacot | 6 Décembre 2011

31. Premier projet
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 31
Xavier Lacot | 6 Décembre 2011

32. Contenu d'un projet
■ build : dossier de compilation
■ Resources :
■ le code de l'application
■ 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ètres
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 32
Xavier Lacot | 6 Décembre 2011

33. Cross-platform...
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 33
Xavier Lacot | 6 Décembre 2011

34. 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/Codestrong
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 34
Xavier Lacot | 6 Décembre 2011

35. Tests unitaires et qualité
■ Objectifs :
■ Tester certaines parties de l'application 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/qunit
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 35
Xavier Lacot | 6 Décembre 2011

36. 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 qu'un PHPUnit...
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 36
Xavier Lacot | 6 Décembre 2011

37. Sommaire
1. Pourquoi Titanium mobile ?
2. Qu'est-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 simple
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 37
Xavier Lacot | 6 Décembre 2011

38. Gestion des fenêtres
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 38
Xavier Lacot | 6 Décembre 2011

39. 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 39
Xavier Lacot | 6 Décembre 2011

40. Image view
Insertion d'images
■ 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 40
Xavier Lacot | 6 Décembre 2011

41. 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 41
Xavier Lacot | 6 Décembre 2011

42. Widgets
Les éléments d'interface avec lesquels l'utilisateur
peut interagir :
Activity Indicator Label
(Date) picker Slider
Progress bar Switch
Search bar Button
Button bar Toolbar
Textarea Textfield
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 42
Xavier Lacot | 6 Décembre 2011

43. Widgets
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 43
Xavier Lacot | 6 Décembre 2011

44. 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 44
Xavier Lacot | 6 Décembre 2011

45. APIs matérielles
Titanium donne accès à un grand nombre d'APIs natives de l'appareil :
■ 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 local
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 45
Xavier Lacot | 6 Décembre 2011

46. Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 46
Xavier Lacot | 6 Décembre 2011

47. 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 47
Xavier Lacot | 6 Décembre 2011

48. 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 48
Xavier Lacot | 6 Décembre 2011

49. 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 mur
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 49
Xavier Lacot | 6 Décembre 2011

50. Sommaire
1. Pourquoi Titanium mobile ?
2. Qu'est-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 simple
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 50
Xavier Lacot | 6 Décembre 2011

51. Du temps pour une démo ?
■ Un carnet d'adresses
synchronisé par des Web
Services
■ Le code source est
disponible sur
https://github.com/xavierlacot/joli.api.js-app-demo
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 51
Xavier Lacot | 6 Décembre 2011

52. STOP WHINING
STOP WHINING
MORRON
MORRON
GO USE
GO USE
TITANIUM
TITANIUM
Paris Android User Group - Développement Cross-Platform avec Titanium Mobile 52
Xavier Lacot | 6 Décembre 2011

53. ?
Des
questions ?