Bienvenue !1ère soirée Meetup Mobile Montpellier

30 mai 2013

Programme de la soirée

● Introduction● Présentation d'Appcelerator Titanium● Présentation du travail de Pedro Vitorino● Présentation de Consomap● Buffet

Et pendant ce temps là sur Twitter...

Comme devant TheVoice,vous pouvez commenter

la soirée en utilisant le hashtag

#MobileMtp

PrésentationTitanium MobileDamien LaureauxMeetup Mobile Montpellier30 Mai 2013

Présentation

Damien LaureauxExpert mobile chez Isiapps,

filiale mobile d'Isimedia

Isiapps est le premier partenaireAppcelerator en France

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

Présentation

Formateur depuis peu pourClever Institut sur la formationAppcelerator Titanium / Alloy

à Paris et Montpellier

AppceleratorTitaniumPrésentation d'Appcelerator Titanium

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.

La plateforme Appcelerator

La plateforme Appcelerator

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.

Cycle de vie d'une application

Des services complémentaires

Pour répondre à ce cycle de vie, Appceleratora 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

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.

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

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.

Les développeurs Web peuvent devenir productifs immédiatementpour 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

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)

Exemple d'application Titanium

Le futur de Titanium

Développements en cours :

● Windows Phone 8 (fin 2013)● Windows 8 (fin 2013)

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.

Titanium VSPhoneGapComparaison entre Titaniumet PhoneGap

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.

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.

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.

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.

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

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

Titanium StudioPrésentation de l'IDE Titanium Studio

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.

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)

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)

Espace de travail de Ti Studio

Dashboard de Titanium Studio

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

La chaîne d'outils pour Android

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

La chaîne d'outils pour iOS

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

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.

Interface utilisateur Android et iOSDifférences entre les UI d'iOS et d'Android

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.

Composants de l'interface iOS

Composants de l'interface Android

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

SDK Titanium 3.0Présentation du SDK Titanium Mobile 3.0

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.

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.

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 !

Vue d'ensemble du SDK Titanium

Performance nativePerformance native + Interface native(tableaux, animations, gestes, etc.)

GéolocalisationRéalité augmentée, géolocalisation,boussole, cartes natives

Réseaux sociauxAuthentification à Facebook, Twitter,Yahoo YQL. E-mail et carnet d'adresse natif

DonnéesBase SQLite locale, webservices, enregistrement simplifié de clef / valeur

MultimédiaAppareil photo, caméra, lecture en streaming / local, format audio / vidéo

AnalyticsStatistiques d'utilisation personnalisé, utilisation / adoption de l'app. par l'utilisateur

Titanium+PlusBase de données cryptée, ecommerce, publicité, lecteur de code barre, etc

Outils développementCréer, tester et publier votre application avec le même outil peu importe la plateforme

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

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.

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.

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.

Framework AlloyPrésentation du framework MVC Alloy

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

Modèle-Vue-Contrôleur

Alloy utilise une structure model-view-controller (MVC) pour séparer l'application en3 composants différents :

● Les modèles● Les vues● Les contrôleurs

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.

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

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.

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.

Backbone.js

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

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.

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.

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.

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.

Exemple de structure

app

controllers

android

index.js

index.js

views

ios

index.xml

index.xml

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.

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.

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>

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.

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

}

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.

Le fichier ControllerFichier app/controllers/index.js

function clickImage(e) {Titanium.UI.createAlertDialog({

title:'Image View',

message:'Vous avez cliqué !'

}).show();

}

$.index.open();

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.

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

Constantes AlloyENV_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)

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

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

Annexes

Ressources Titanium

Blog Developer

Ressources Titanium

my.appcelerator.com

Documentation Titanium

Documentation

Github Appcelerator

Github Appcelerator

Inspiration mobile sur Pinterest

+7 600 captures d'écran d'interface mobile

Autres liens

http://timoa.com(nouvelle version à venir)

@timoa

Github : https://github.com/timoa

Questions / Réponses

Avez-vous des questions ?

Merci !