Titanium studio et les modules

Titanium Studio et les modules

Y a-t-il des modules pour titanium ? Quels sont les modules intéressants ? Et moi si veux programmer de manière modulaire ?

Modules, librairies and co#4 Meetup Paris Titanium

Gautier Pialat

Qui suis-je ?

2

Que fais-je ? ou vais-je ?- Consultant sur des projets Business Intelligence- Aide à la mise en place de projets agiles (Scrum)

- Co-Fondateur de captainspot (SM et développeur sur Titanium)

- Passionné par l’agile, le Lean startup et l’entreprenariat- Interventions chez Leeaarn

Le menu

3

Les différents plats

Le marketPlace titanium

4

les généralités

- MarketPlace ->Search Results > Newest first- Veille techno !!

- Gestion des modules obsolètes absente.- Attention aux vieux modules

- Préférer le téléchargement des modules gratuits et open source sur github!

- 24 modules passés en open source

- Modules : License violation detected - Créer un nouveau projet - Récupérer guid et copier dans ancien projet- La Solution

Des modules du marketplace

5

les mesures

- Module gérant le SDK 2 de google analytics (tableaux de bords orientés Mobile)

- Disponible depuis mars 2013

- Compatible Android et Iphone.


6

le push android


7

les open sources !!

Bar code scanner

BumpCharts (iOS)

columnimage factory Maps v2

(android)

Identifie ton besoin puis prends des modules

Une librairie utilitaire

8

Titan Up

- Une librairie utilitaire- https://github.com/jpriebe/TitanUp

- Respecte CommonJS

- Des informations sur le téléphone.

- Aide à une gestion propre de la géolocalisation et des vues MapsV1

- Aide pour le design de composants graphiques génériques (crossPlatform)

La librairie : Titan Up

9

Les informations devices

- Device.os - Retourne ios ou android

- Device.physical(Height|Width)- Récupérer les dip ou px longueur et largeur

- Device.isTablet- Savoir si on est sur une tablette

- Device.working(Width|Height)- Récupérer les dip ou px longueur et largeur (sans les menus, nav bars…)

Titan Up

10

Le location manager et

mapviews - TU.LocationManager

- Utilise les meilleures options de géolocs.

- Une fois la localisation trouvée un refresh par minute.

- TU.UI.Views.ManagedMapView

- Constat : crash android 2 instances de mapview par appli (map V1).

- Gestion d’instance unique

- Inclure une mapview dans une vue via une fonction ?- Lors de appel fonction si vue différente alors on supprime la mapview de l’ancienne vue et on

la met dans la nouvelle vue.

Titan Up

11

Aide pour UI- TU.UI.EventThrottle

- Prévenir les doubles clics

- TU.UI.Sizer(numeric) - Permet de calculer les dip pour iphone et les px pour android.

- TU.UI.Theme- Mettre dans un endroit centralisé ces fonts et couleurs

- TU.UI.Views.SimplePicker (ios et android)

- TU.UI.Views.SelectBar (ios et android)

Modules et Common JS

12

Moi aussi je veux être

modulaire !!!- Constat : pauvreté de la doc CommonJS coté

éditeur (comme souvent !!)

- Ne plus utiliser les includes :- Risque de collision de variables

- Ne pas utiliser les multi contextes

- Quelques règles de l’approche modulaire :- Ne charger les modules que quand cela est nécessaire- N’exporter que ce dont vous avez besoin- Utiliser prototype dès que vous le pouvez


13

Les modules génériques

HelloModule.js

var _textHello = '‘hello'‘;var _textCoucou = '‘coucou '‘;var _counter = 0;

function sayHello () {_counter ++; return _textHello;}

function sayCoucou () {_counter ++; return _textCoucou ; }

function countNBHelloOrCoucou(){return _counter ++; }

exports.sayHello = sayHello;exports.sayCoucou = sayCoucou;exports.countNBHelloOrCoucou = countNBHelloOrCoucou;

app.js

var HelloM= require ('/HelloModule'); HelloM.sayHello();HelloM.sayCoucou();alert(HelloM. countNBHelloOrCoucou())

- Module générique non objet- Export des fonctions nécessaires

- Besoin de fonctions jouant un rôle utilitaire ?


14

Les classes statiques

PointCounter.js

//variables statiques privéesvar _points = 0;var _defaultPoints = 3;

function MyClass (){}

// méthode statique privéevar _ pointsCounter = function (){_points = _points + _defaultPoints;return _points ;};

// méthode statique publiqueMyClass.winPoints = function (){return _pointsCounter() ;};

module.exports = PointCounter;

app.js

var Counter= require ('/PointCounter');

Counter. winPoints();alert(‘’J’ai déjà ‘’+Counter.winPoints()+’’ points’’ );

- Module objet- Export du module- Classe objet utilitaire ?


15

Les classes

Point.js

function Point(x,y){ var _x = x; var _y= y; var _point = null;

var _pointCreator = function () {

point = {x : _x , y : _y} };

this.xgetPoint = function () { return _point; }

this.printPoint = function () { return ‘’Point x = ’’+_point .x+’’ et y = ‘’+_point .y; }

_pointCreator();

}

module.exports = Point;

pointFactory.js

var Point = require(/Point);var p1 = new Point(5,2);var p2 = new Point(12,-2);

alert(p1.printPoint);

- Module objet- Export de l’objet nécessaire- Besoin d’objets ?


16

Les classes et prototype

Person.js

function Person(firstName,lastName) { this.firstName = firstName; this.lastName = lastName;} Person.prototype.fullName = function() { return this.firstName+' '+this.lastName;}; module.exports = Person;

contacts.js

var Person = require('Person');var arrayP = new array();

arrayP.push(new Person(‘erwan',‘sarcelette');)arrayP.push(new Person(‘lucie',‘durant');)arrayP.push(new Person(‘damien',‘louis');)

var i;for(i=arrayP.length;c--;){Ti.API.info(arrayP[i].fullName());}

- Utiliser prototype- Besoin de bcp d’objets et de performance?

La fonction prototype est définie une fois au chargement de l‘objet => gain de performance !!

On ne peut pas accéder aux membres et méthodes privés


17

et on peu l’utiliser pour les UI ?

MyWindow .js

function MyWindow (params){ var _self = null; var _iv = null; var _imageurl = 'http://www.google.com/images/srpr/logo3w.png';

if (typeof params.imageurl != "undefined") { _imageurl = params.imageurl; delete params.imageurl; }

_self = Ti.UI.createWindow (params);

_iv = Ti.UI.createImageView ({ top: 0, image: _imageurl });

_self.add (_iv);

_self.changeImage = function (imageurl) { _iv.setImage (imageurl); };

return _self;}

module.exports = MyWindow;

app.js

var MyWindow = require ('/MyWindow');

var w = new MyWindow ({ imageurl: 'http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png'});

w.open ();

setTimeout (function () { w.changeImage ('https://s-static.ak.fbcdn.net/rsrc.php/v2/yv/r/aWMatkshsiW.png');}, 3000);

- Classe qui encapsule (wrapper)- Fonction qui étend l’objet graphique(parasitic inherance)

- Besoin d’objets graphiques modulaires

QUESTIONSET REPONSES

18

Sources utiliées pour la

présentation

19

- http://smorgasbork.com/component/content/article/38-titanium-mobile/135-titanium-mobile-beyond-the-prototype (CommonJS)

- https://marketplace.appcelerator.com/home (maketplace)

- Appcelerator Titanium : Patterns and Best Practices(livre et commonJS)

- https://github.com/appcelerator/titanium_modules (module open sources titanium)

- http://iamyellow.net/post/40100981563/gcm-appcelerator-titanium-module (push notification android)

- https://github.com/MattTuttle/titanium-google-analytics (gg analytics)

Documents

Titanium studio et les modules