Présentation d'Appcelerator Titanium et du framework MVC Alloy à la 1ère soirée du Meetup Mobile Montpellier.

1. Bienvenue !
1ère soirée Meetup Mobile Montpellier
30 mai 2013

2. Programme de la soirée
● Introduction
● Présentation d'Appcelerator Titanium
● Présentation du travail de Pedro Vitorino
● Présentation de Consomap
● Buffet

3. Et pendant ce temps là sur Twitter...
Comme devant TheVoice,
vous pouvez commenter
la soirée en utilisant le hashtag
#MobileMtp

4. Présentation
Titanium Mobile
Damien Laureaux
Meetup Mobile Montpellier
30 Mai 2013

5. Présentation
Damien Laureaux
Expert mobile chez Isiapps,
filiale mobile d'Isimedia
Isiapps est le premier partenaire
Appcelerator en France

6. Présentation
Je développe des applications iPhone, iPad et
Android depuis plus de 3 ans en utilisant le
framework Appcelerator Titanium.
Certifié TCAD et TCMD, je fais partie de la
centaine d'experts sélectionnés par
Appcelerator pour aider la communauté
Titanium via le programme "Titan".

7. Présentation
Formateur depuis peu pour
Clever Institut sur la formation
Appcelerator Titanium / Alloy
à Paris et Montpellier

8. Appcelerator
Titanium
Présentation d'Appcelerator Titanium

9. La plateforme Appcelerator
Appcelerator Titanium est une plateforme
ouverte de développement permettant de créer
des applications natives entre les différents
terminaux mobiles et systèmes d'exploitation,
dont iOS, Android, Windows, BlackBerry,
Tizen, HTML5 et bientôt Windows Phone.

10. La plateforme Appcelerator
La plateforme Appcelerator

11. Le framework Titanium
Il comprend un SDK open source avec plus de
5 000 APIs, Titanium Studio, un puissant IDE
basé sur Eclipse, et Alloy, un framework MVC.

12. Cycle de vie d'une application

13. Des services complémentaires
Pour répondre à ce cycle de vie, Appcelerator
a construit un ensemble de services
complémentaires dont :
● Appcelerator Analytics
● Appcelerator Cloud Services
● Appcelerator Functional Test *
● Appcelerator Performance Management *
* Services faisant partie de la nouvelle offre Appcelerator Platform

14. Le choix de milliers d'entreprises
Appcelerator Titanium est la plateforme de
développement mobile la plus plébiscitée pour
des milliers d'entreprises, y compris eBay,
Merck, Mitsubishi Electric, NBC et PayPal.

15. +50 000 applications mobiles
Avec plus de 50 000 applications mobiles
déployées sur 110 000 000 de terminaux, le
framework Titanium aide les entreprises à
déployer 60% plus vite et obtenir un avantage
concurrentiel significatif.

16. Simplifie le dévelopement
Titanium simplifie le processus de
développement des applications mobiles
permettant aux développeurs de développer
rapidement, tester, compiler et publier des
applications mobiles en utilisant JavaScript.

17. Les développeurs Web peuvent
devenir productifs immédiatement
pour créer des applications natives
mobiles riches à partir d'une seule
base de code sans avoir à gérer de
multiples outils de développement, de
langages et méthodologies.
Simplifie le développement

18. Plateformes compatibles
Le SDK Titanium permet de créer des
applications pour les plateformes suivantes :
● iPhone
● iPad
● Android mobile & tablette
● Mobile Web (HTML5)
● BlackBerry 10
● Liseuse Nook Color
● Assistant de navigation Denso
● Tizen (Intel / Samsung OS basé sur Linux)

19. Exemple d'application Titanium

20. Le futur de Titanium
Développements en cours :
● Windows Phone 8 (fin 2013)
● Windows 8 (fin 2013)

21. Licence Appcelerator
Appcelerator a choisi la licence Apache 2 pour
le SDK Titanium ainsi que pour Titanium
Studio, ce qui les rend gratuits pour une
utilisation personnelle et commerciale.

22. Titanium VS
PhoneGap
Comparaison entre Titanium
et PhoneGap

23. Titanium VS PhoneGap
De loin, Titanium et PhoneGap paraissent
similaire...
Le but commun est de créer une application
mobile cross-platform en utilisant des langages
comme le JavaScript.
Ils sont tous les 2 open-sources et sponsorisés
par de grosses sociétés.

24. L'approche de PhoneGap
L'approche de PhoneGap est de proposer une
application native socle dans laquelle on va
embarquer des pages HTML5 et du JavaScript
pour communiquer avec celle-ci.
Les pages HTML5 sont affichées dans une
fenêtre navigateur (WebView) proposée sur la
plupart des plateformes mobile.

25. Points forts de PhoneGap
La création d'une application mobile simple est
facilitée par l'utilisation du HTML5 et JS.
C'est pour cela que l'équipe de PhoneGap n'a
implémentée qu'une partie des API natives, ce
qui permet ainsi de porter PhoneGap sur
d'autres plateformes plus rapidement.
L'accès au développement mobile est ainsi
facilité pour les développeurs Web.

26. Points faibles de PhoneGap
La qualité du rendu est dépendant de la
plateforme... iOS utilise Webkit comme moteur
de rendu et offre les meilleurs performances
mais celui d'Android est juste fonctionnel sur
les versions 2.x
Le support d'HTML5 peut être incomplet entre
navigateurs et donc entre les OS mobile.

27. Points faibles de PhoneGap
Les performances sont donc variables d'un OS
à un autre et les animations de transition sont
gérées en JavaScript et n'utilise pas
l'accélération matérielle (GPU).
Comparé à du natif, la surcouche navigateur +
moteur JavaScript rend une application
PhoneGap plus lente et réactive dès lors que
l'on utilise beaucoup de données ou traitement
(liste, animation, etc).

28. Points faible de PhoneGap
Le workflow peut être aussi un point noir si l'on
utilise pas PhoneGap Build car il faut configurer
et utiliser un IDE par plateforme :
● XCode pour iOS
● Eclipse pour Android
● Visual Studio pour Windows Phone
● etc...

29. Titanium Studio
Présentation de l'IDE Titanium Studio

30. Présentation
A l'origine, Aptana Studio était un IDE open
source basé sur Eclipse et adapté au
développement Web (PHP, HTML, CSS,
Javascript, Python ou encore Ruby).
Aptana a été racheté par Appcelerator et c'est
comme ça qu'est né Titanium Studio.

31. Fonctionnalités spécifiques
En plus des fonctionnalités d'Eclipse, celles
héritées d'Aptana, Titanium Studio apporte
d'autres fonctions indispensables :
● Gestion de projet (création pas à pas,
éditeur pour tiapp.xml, nettoyage des
projets)
● Configuration de projet (choix de l'API,
réglages émulateurs, etc...)
● Console de sortie et filtres
● Menu "Démarrer" et "Déploiement"
● Déploiement mobile et distribution (stores)

32. Autres fonctions de Ti Studio
● Intégration de Git, SVN, etc...
● Navigateur intégré pour les tests HTML/Web
● Déploiement HTML/Web, PHP (ftp, sftp,ftps)

33. Espace de travail de Ti Studio

34. Dashboard de Titanium Studio

35. Chaîne d'outils
Pour créer une application mobile de bout en
bout, il faut un certain nombre d'outils pour :
● La gestion du projet
● Ecrire le code source
● Compiler le code source
● Debugger l'applicaton
● Simuler l'application
● Signer et distribuer l'application

36. La chaîne d'outils pour Android
Exemple de la chaîne
d'outils nécessaire à
la création d'une
application Android
native.

37. La chaîne d'outils pour iOS
Exemple de la chaîne
d'outils nécessaire à
la création d'une
application iOS native.

38. La chaîne d'outils Titanium Studio
Avec Titanium Studio,
l'ensemble de la
chaîne nécessaire à
un projet mobile est
traité en utilisant un
seul logiciel.

39. Interface
utilisateur
Android et iOS
Différences entre les UI d'iOS et d'Android

40. Présentation
Comme nous l'avons vu plus tôt, les interfaces
d'iOS et d'Android ont des éléments communs
mais aussi beaucoup de composants
graphiques spécifiques à celles-ci.

41. Composants de l'interface iOS

42. Composants de l'interface Android

43. Pour un développeur Web...
Une window est l'équivalent d'une page
Une view est l'équivalent d'une div
L'espace de nom Ti.UI fournit plusieurs
contrôleurs spécifiques (button, textfield,
picker, scrollview)
Les objets UI sont composés de la même
manière que les fragments du DOM JavaScript

44. SDK Titanium 3.0
Présentation du SDK Titanium Mobile 3.0

45. Introduction
La caractéristique unique de Titanium vis à vis
des différentes solutions mobiles cross-
plateform disponibles, est qu'il crée
véritablement des applications natives.
C'est ce qui contraste avec les solutions Web
qui offrent des fonctionnalités via une vue Web
améliorée comme la solution PhoneGap.

46. Introduction
Appcelerator, ne souhaitant pas être limitée par
l'affichage Web natif, ils se sont engagés dans
une intégration beaucoup plus profonde avec
les plateformes iOS et Android par exemple.
Cela donne aux développeurs la possibilité
d'utiliser des services et composants UI natifs,
avec des performances quasi-natives,
caractéristiques que vous ne trouverez pas
dans d'autres solutions cross-plateform
mobiles.

47. Introduction
De plus, vous aurez accès aux fonctionnalités
suivantes :
● APIs spécifiques à chaque plateforme
● Géolocalisation
● Partage sur les réseaux sociaux
● Multimédia
● Données en ligne ou stockées en local
● Extensibilité via des modules
● et bien d'autres !

48. Vue d'ensemble du SDK Titanium
Performance native
Performance native + Interface native
(tableaux, animations, gestes, etc.)
Géolocalisation
Réalité augmentée, géolocalisation,
boussole, cartes natives
Réseaux sociaux
Authentification à Facebook, Twitter,
Yahoo YQL. E-mail et carnet d'adresse natif
Données
Base SQLite locale, webservices,
enregistrement simplifié de clef / valeur
Multimédia
Appareil photo, caméra, lecture en
streaming / local, format audio / vidéo
Analytics
Statistiques d'utilisation personnalisé, utilisation
/ adoption de l'app. par l'utilisateur
Titanium+Plus
Base de données cryptée, ecommerce,
publicité, lecteur de code barre, etc
Outils développement
Créer, tester et publier votre application avec le
même outil peu importe la plateforme

49. Développer pour plusieurs OS
L'API Titanium fournit une variable "plateforme"
qui peut être utilisée avec des instructions if.
Les ressources qui peuvent être spécifiques à
une plateforme :
● Fichier de code
● Images, texte et autres types de fichier
La configuration de chaque plateforme se
trouve dans le fichier tiapp.xml

50. Les windows
Une window est un conteneur de niveau
supérieur qui peut contenir d'autres views.
Elle peut être ouverte et fermée.
A l'ouverture, la window et les views enfants
sont ajoutées à la pile de rendu de l'application,
au-dessus de toutes les windows
précédemment ouvertes.

51. Les views
Les views sont la base de tous les composants
de l'interface utilisateur.
Après avoir créer une view, il est important de
ne pas oublier de l'ajouter à son view parent ou
à une window, sinon elle ne s'affichera pas.

52. Les événements
La liste des événements déclenché par les
objets Titanium est différente en fonction de
ceux-ci, il est donc conseillé de consulter la
documentation.
Les événements peuvent aussi être utilisés
pour communiquer entre différente partie de
l'application ou module CommonJS.

53. Framework Alloy
Présentation du framework MVC Alloy

54. Introduction
Le framework Alloy est un nouveau framework
d'Appcelerator, conçu pour développer
rapidement des applications Titanium de
qualité.
Il est basé sur l'architecture MVC et contient un
support intégré pour Backbone.js et
Underscore.js

55. Modèle-Vue-Contrôleur
Alloy utilise une structure model-view-controller
(MVC) pour séparer l'application en
3 composants différents :
● Les modèles
● Les vues
● Les contrôleurs

56. Les Modèles
Les modèles fournissent la logique métier,
contiennent les règles, les données et l'état de
l'application.
Les modèles sont spécifiés avec des fichiers
JavaScript qui fournissent un schéma de la
table, la configuration de l'adaptateur et de la
logique.

57. Les Vues
Les vues fournissent les composants de
l'interface graphique pour l'utilisateur ou permet
à l'utilisateur d'interagir avec les données du
modèle.
Les vues sont construites à partir des
composants graphiques du SDK Titanium et
définies à l'aide de balises XML et de feuilles
de style Titanium Style Sheets (.tss).

58. Les Contrôleurs
Les contrôleurs fournissent le ciment entre les
composants du modèle et la vue sous la forme
d'une logique d'application.
Les contrôleurs Alloy ont généralement une
relation directe avec les vues.
Les contrôleurs ont accès à tous les éléments
de la vue et peuvent profiter des événements
de l'API Backbone.js.

59. Avantage du MVC
Un avantage du MVC est la possibilité de
réutiliser le code en séparant la fonctionnalité.
Par exemple, vous pouvez avoir des vues
spécifiques pour les différents terminaux, tout
en gardant le code du contrôleur relativement
le même, et les données du modèle
inchangées.

60. Backbone.js
Backbone.js est un framework MVC léger, à
l'origine créé pour les applications Web.

61. Alloy : MVC avec Backbone
Les modèles d'Alloy sont construits autour de
Backbone.js, profitant des API Model et
Collection de celui-ci.
On définit les modèles en JavaScript pour
étendre les fonctionnalités des modèles et des
collections Backbone.

62. Underscore.js
Alloy intégre aussi le support de la librairie
Underscore.js, qui fournit un ensemble de
fonctions supplémentaires à JavaScript comme
par exemple, la manipulation des tableaux.

63. Structure et conventions
Pour simplifier le développement, Alloy utilise
une structure de répertoire et des conventions
de nommage pour organiser l'application plutôt
que d'utiliser des fichiers de configuration.
Tout dossier ou fichier qui ne respecte pas les
conventions suivantes, sont ignorés par Alloy.

64. Structure et conventions
Par exemple, au moment de la génération,
Alloy va chercher les fichiers requis
app/views/index.xml et
app/controllers/index.js, puis le fichier
optionnel de style app/styles/index.tss.
Alloy a besoin de ses fichiers pour créer la
vue-contrôleur suivante :
Resources/alloy/controllers/index.js.

65. Exemple de structure
app
controllers
android
index.js
index.js
views
ios
index.xml
index.xml

66. Widgets
Les widgets sont des composants autonomes
qui peuvent être facilement intégrés dans les
projets Alloy.
Ils ont été conçus comme un moyen de
réutiliser le code dans de multiples applications
ou pour être utilisés plusieurs fois dans une
même application.

67. Widgets
Les widgets ont leurs propres modèles, vues,
contrôleurs, styles et médias et doivent se
trouver dans le répertoire app/widgets.
Des widgets sont déjà fournis avec Alloy et il
est recommandé de créer ce type de
composant pour rendre le plus modulable
possible son application et pouvoir réutiliser
ceux-ci dans d'autres applications.

68. Le fichier View
Le fichier view déclare la structure de l'interface
graphique.
Cet exemple défini une window avec une
image et un label.
Fichier app/views/index.xml
<Alloy>
<Window>
<ImageView id="logoImage" onclick="clickImage"/>
<Label id="logoLabel">Cliquer sur le logo Apple</Label>
</Window>
</Alloy>

69. Le fichier Style
Le fichier style formate et style les composants
du fichier view dans un format proche des
feuilles de style CSS.
Par exemple, le style suivant définit la couleur
de fond de la window, la position, dimensions
et couleur du label et position, dimensions et
chemin de l'image.

70. Le fichier Style
Fichier app/styles/index.tss
"Window": {
backgroundColor: "white"
},
"#logoLabel": {
bottom: 20,
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: '#999'
},
"#logoImage": {
image: "/images/apple_logo.jpg",
width: 24,
height: 24,
top: 100
}

71. Le fichier Controller
Le fichier contrôleur contient la logique de
présentation, qui répond à l'entrée de
l'utilisateur.
Par exemple, le code suivant crée une boîte de
dialogue lorsque l'utilisateur clique sur l'image.

72. Le fichier Controller
Fichier app/controllers/index.js
function clickImage(e) {
Titanium.UI.createAlertDialog({
title:'Image View',
message:'Vous avez cliqué !'
}).show();
}
$.index.open();

73. Compilation et exécution
Avec Titanium Studio, il suffit de cliquer sur le
bouton Run et de sélectionner le type de
terminal (Android, iPhone, iPad, etc...) pour
lancer la compilation.
Alloy va générer les fichiers Titanium à partir du
projet Alloy (contenu du répertoire app) qui
seront ensuite compilés par Titanium Studio.

74. Constantes Alloy
Constantes définies par Alloy, à utiliser dans le
contrôleur :
OS_IOS
true si la cible de compilation en cours est iOS
OS_ANDROID
true si la cible de compilation en cours est Android
OS_MOBILEWEB
true si la cible de compilation en cours est Mobile Web

75. Constantes Alloy
ENV_DEV
true si la cible du compilateur actuel est de compiler pour
le développement (en cours d'exécution dans le simulateur
ou émulateur)
ENV_TEST
true si la cible du compilateur actuel est de compiler pour
les essais sur un appareil
ENV_PRODUCTION
true si la cible du compilateur actuel est de compiler pour
la production (exécuté après une installation du paquet)

76. Resources Alloy
AlloyLove, liste de widgets pour Alloy :
http://alloylove.com/
Widget Tweets View :
https://github.com/FokkeZB/nl.fokkezb.tweetsView
Widget Calendrier :
https://github.com/hamasyou/titanium_alloy_calendar

77. Projet JUG Mobile Titanium
Les sources de l'application JUG Mobile codé
avec Titanium + Alloy lors de la soirée Titanium
du 20 mars 2013, se trouve sur mon compte
Github.
Vous pouvez y contribuer ou le récupérer pour
démarrer un projet par exemple.
https://github.com/timoa/JUGMobile_Titanium

78. Annexes

79. Ressources Titanium
Blog Developer

80. Ressources Titanium
my.appcelerator.com

81. Documentation Titanium
Documentation

82. Github Appcelerator
Github Appcelerator

83. Inspiration mobile sur Pinterest
+7 600 captures d'écran d'interface mobile

84. Autres liens
http://timoa.com
(nouvelle version à venir)
@timoa
Github : https://github.com/timoa

85. Questions / Réponses
Avez-vous des questions ?

86. Merci !