Développement Cross-Platform avec Titanium Mobile

Développement Cross-Platform avec Titanium Mobile

Xavier Lacot – 06 Décembre 2011

Paris Android User Group - Développement Cross-Platform avec Titanium MobileXavier Lacot | 6 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

http://afup.org/

http://twitter.com/xavierlacot


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


4

Un large panel de solutions disponibles


5

WebApp vs. App natives

WebApp App native

Portabilité Navigateur Web : toutes plateformes Développement spécifique

Référencement Moteurs de recherche classiques

Référencement dans les App Stores

Accessibilité Peu de contraintesMode offline impossible

Dépendant de la validationMode offline possible

Performance Dépend de la techno du serveur, de la connexion, ...

Performance maximale (exécuté sur le mobile)

Mises à jour Mise à jour instantanée sur le serveur

Dépend du processus de validation sur le store

Effet « Waouw » Limité aux capacités des navigateurs mobiles

Plus de possibilités, plus riche : nécessité marketing

Coût de développement Compétences classiquesCoût limité

Compétences plus rares et éparses. Coût généralement plus élevé.


6

Parts de marché


7

Le choix des développeurs...


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


9

Sommaire










10

« Titanium is an open source framework for building native desktop and mobile

applications using open web technologies (HTML, CSS, and JavaScript) »


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 !


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


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


14

Architecture du framework


15

Architecture du framework


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.


17

Mécanismes de compilation (1/3)

■ Analyse des dépendances (API requises, etc.)

■ Pré-validation du code javascript

Compilation“cible”Pré-compilation Compilation

“front-end”.js


18


■ Compilation des librairies de Titanium

■ Préparation à la compilation sur la plateforme cible (dépendances, etc.)


“front-end”.js


19


■ 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


“front-end”.js


20

Sommaire










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 !


22

Pas de variables globales

// The badvar key = 'value', foo = 'bar', human = 'john';

function hello(name) { alert('Hello ' + world);}

function transform(value) { return 'Logging ' + value;}

function log(text) { Titanium.API.log( transform(text) );}

// call the functionlog('Coucou poney!');

// The goodvar application = { key: 'value', foo: 'bar', human: 'john'};

application.hello = function(name) { alert('Hello ' + world);};

(function() { // locally defined function function transform(value) { return 'Logging ' + value; }

application.log = function(text) { Titanium.API.log( transform(text) ); }})();

// call the functionapplication.log('Coucou poney!');


23

Opérateur de comparaison

Voir http://wtfjs.com/ pour plus d'exemples...

// utilisez === et non ==Ti.API.info(false == 0); // trueTi.API.info(false == ''); // trueTi.API.info('' == 0); // trueTi.API.info(null == 0); // trueTi.API.info(undefined == false); // trueTi.API.info(NaN == 0); // true

// attention aux comparaisons de flottantsTi.API.info(0.3 + 0.4 === 0.7); // false

// attention à typeofTi.API.info(typeof null); // 'object'Ti.API.info(typeof NaN); // 'number'

http://wtfjs.com/


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)

http://xav.cc/d7f90

http://www.jshint.com/

https://github.com/jshint/jshint

http://www.commonjs.org/


25

Sommaire










26

Titanium Developer

■ Abandonné

début 2011

■ Pas d'IDE

intégré


27

Titanium Studio


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


29

Premier projet


30

Premier projet

Project name :

nom du projet

App Id :

identifiant de l'application, très important

Deployment targets :

choix des plateformes cibles


31

Premier projet


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


33

Cross-platform...


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

http://developer.appcelerator.com/apidoc/mobile/latest

http://wiki.appcelerator.org/display/guides/Home

http://developer.appcelerator.com/questions

http://vimeopro.com/appcelerator/forging-titanium

http://vimeopro.com/appcelerator/building-native-mobile-applications

http://github.com/appcelerator/KitchenSink

https://github.com/appcelerator/Codestrong


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

https://github.com/guilhermechapiewski/titanium-jasmine

http://jsunity.com/

http://github.com/lukaso/qunit


36

Tests unitaires et qualité

■ Utilisation de Titanium jasmine

■ Exemple : utilisé pour tester joli.js

■ Principe : assertions (expect()) et vérifications (toBe())

■ Bien mais pas aussi puissant qu'un PHPUnit...

(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'); }); });})();


37

Sommaire










38

Gestion des fenêtres


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...


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);


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 viewvar tableview = Titanium.UI.createTableView({ data: data, search: search, filterAttribute: 'title'});win.add(tableview);


42

Widgets

Les éléments d'interface avec lesquels l'utilisateur peut interagir :

Activity Indicator

(Date) picker

Progress bar

Search bar

Button bar

Textarea

Label

Slider

Switch

Button

Toolbar

Textfield


43

Widgets


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.


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


46


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

■ mediaTypes

■ SaveToPhotoGallery

■ takePicture()

■ hideCamera()

■ allowEditing

■ showControls

■ Overlay

■ saveToPhotoGallery()


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]});


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

https://github.com/xavierlacot/joli.js


50

Sommaire










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

https://github.com/xavierlacot/joli.api.js-app-demo


52

STOP WHININGMORRON

GO USE TITANIUM

STOP WHININGMORRON

GO USE TITANIUM

STOP WHININGMORRON

GO USE TITANIUM

STOP WHININGMORRON

GO USE TITANIUM

STOP WHININGMORRON

GO USE TITANIUM

STOP WHININGMORRON

GO USE TITANIUM

STOP WHININGMORRON

GO USE TITANIUM

STOP WHININGMORRON

GO USE TITANIUM

STOP WHININGMORRON

GO USE TITANIUM

STOP WHININGMORRON

GO USE TITANIUM

?Desquestions ?

Technology

Développement Cross-Platform avec Titanium Mobile