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

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

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

Un large panel de solutions disponibles

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

Parts de marché

Le choix des développeurs...

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

Sommaire

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

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

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 !

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

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

Architecture du framework

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.

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

■ Compilation des librairies de Titanium

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

“front-end”.js

■ 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

Sommaire

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 !

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

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'

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)

Sommaire

Titanium Developer

■ Abandonné

début 2011

■ Pas d'IDE

intégré

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

Premier projet

Project name :

nom du projet

App Id :

identifiant de l'application, très important

Deployment targets :

choix des plateformes cibles

Premier projet

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

Cross-platform...

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

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

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

Sommaire

Gestion des fenêtres

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

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

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

Widgets

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

Activity Indicator

(Date) picker

Progress bar

Search bar

Button bar

Textarea

Slider

Switch

Button

Toolbar

Textfield

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.

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

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

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

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

Sommaire

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

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 ?

Développement Cross-Platform avec Titanium Mobile

Technology

TTC Station Platform Exits

eXo Platform · eXo Platform 5 Plateforme Collaborative exo Platform est la première plateforme de collaboration digitale open-source conçue pour les entreprises. Elle vous aide

J platform

Sviluppo di applicazioni mobile con Titanium Appcelerator

Meetup Titanium Paris

QA Platform 4

REHAU TITANIUM-DESIGN...REHAU TITANIUM-DESIGN UN DESIGN DROIT POUR UN LOOK INDÉMODABLE Les fenêtres en profilés REHAU Titanium-Design, pour ceux qui aiment une menuiserie classique,

COMBO TITANIUM PLANCHA LASER ION + RIZADOR ION PLANCHA LASER ION TITANIUM Patines ultra lisos Titanium Ion Alta emisión de iones Rápido calentamiento

d’entrepreneur Parcourslapalme/ift1025/MathieuRouleau-A14.pdfFlash vs Unity 3d Bon choix en 2007, moins bon en 2013 Développement “cross-platform”, technologie peu onéreuse,

Titanium avec USB-C

Foglight for Cross-Platform Databases · 2018-10-15 · (SQL Server, Oracle et DB2), des systèmes open source (MySQL et PostgreSQL) et des systèmes non relationnels (MongoDB et

Workshop titanium - Atelier développement applications mobiles

Formation Titanium

Présentation du framework Titanium

Conférence Titanium + Alloy au JUG Montpellier

Removal of Aqueous Thiocyanate Anions by Titanium Dioxide

Platform salesforce click_book

CROSS RETAIL ou TRANSFORMATION CROSS CANALE

Présentation de l'Appcelerator Platform au Meetup Titanium Paris

Realizzare applicazioni cross-platform con Xamarin e il pattern MVVM