TITANIUM
Appcelerator

imagefond1

Clemont'ech APIHour #11 Olivier GOYON 15/10/2014

What is this "thing"?

logo titanium

Titanium is a (free) framework to create powerful cross-plateforme mobile apps

Mobile APP ?

  • Native Code (always win)
pb Natif

Mobile APP ?

  • Cross-Plateform Mobile Framework
  • Write once, run anywhere (WORA)

  • ( HTML5 webresponsive )

APP VS HTML5

Cross-Plateform Mobile Framework

  • Appcelerator Titanium
  • PhoneGap / Apache Cordova
  • Xamarin (c#)
  • MoSync (C++) -> NEVER use HTML/JAVASCRIPT
  • RhoMobile/Rhodes (ruby)

TITANIUM Vs PHONEGAP

OS PHONEGAP TITANIUM
ANDROID yes yes
IOS yes yes
BLACKBERRY yes yes
WINDOWS PHONE yes yes/no
BADA-SYMBIAN-AUTRE yes no

TITANIUM Vs PHONEGAP Round TWO

Phonegap

  • Uses the browser graphics engine !

  • Camera
  • Contact
  • Accelerometer
  • Contact list
  • GeoLoc

Titanium

  • Creates native IHM components !

  • Same as Phonegap
  • Database
  • Contact management
  • Playback/recording
  • etc ...

!! NATIVE !!

  • Performance
  • UI components
  • Look & Feel
  • Behavior

Titanium History

  1. Titanium 1.x
  2. Titanium 2.x
  3. Titanium 3.x
  4. Ti.next

Titanium provides

  • SDK
  • IDE
  • Emulator(s)
  • Powershell

How Titanium works

  • Javascript code !
  • Titanium connects JS to native API
  • JS + JS engine + native API => native mobile APP

How Titanium code looks like ? for JS suckers

                            
var Win = Ti.UI.createWindow({
    backgroundColor: '#f00'
});
                             
                        

How Titanium code looks like ? for JS beginners

                            
var Window = Ti.UI.createWindow({
    backgroundColor: '#f00'
});

var MyView = Ti.UI.createView({
    backgroundColor: '#00f',
    height: 200,
    width: 200
});

MyView.addEventListener('click', function(e) {
    alerte('coucou1');//pour debug like a pro
});

Window.add(MyView);
Window.open();
                            
                        

Titanium debugger !

The goal :

gestion user

How Titanium code looks like ? for nice JS

                            
var Window = Titanium.UI.createWindow({
    fullscreen : true,
    navBarHidden : true,
    backgroundColor : "white",
    exitOnClose : true
});

Window.orientationModes = [Ti.UI.LANDSCAPE_LEFT];

var UserView = new (require('UI/viewconfigUser'))();

Window.add(UserView);
Window.open();
                            
                        

Js => Node | Require | Common

                            
//dans viewconfigUser
function viewConfig() {
    var UserView = Ti.UI.createView({backgroundColor:'white' });

    var Login = Ti.UI.createTextField({
        hintText:"saisissez votre login"
        //du code
    });

    var Password = ...;

    //code, codeur ,coder

return UserView;
}
module.exports = viewConfig;
                            
                        

OK, I can code, is that all ?

NO !

Monitoring allocations

On IOS : iOS simulator

On Android : DDMS

Mobile Application Performance Management (Version Pro)

Deployement on Appstore

with titanium >3.2 ->right click, deploy on Appstore , follow instruction.

You want some cloud also. Easy

Appcelerator Cloud Services (Version Pro)

Appcelerator Cloud Services provide a wide array of automatically scaled network features and data objects.

Javascript => no pattern !

Javascript => Spaghetti code !


FALSE

Alloy

Alloy is a development framework to facilitate the rapid development of high quality mobile applications.

It follows a model-view-controller (MVC) architecture

XML Views, Data Migration in JSON , Backbone, etc etc

Alloy presentation at CODESTRONG conf

Alloy Code ! for another nice JS

                            
// a view

    
        
        
    

                            
                        
                            
// a controller
function clickImage(e) {
Titanium.UI.createAlertDialog({title:'Image View', message:'You clicked me!'}).show();
}
$.index.open();
                            
                        

Alloy : TO MUCH THINGS

  • MVC
  • Widgets
  • Tasks
  • Tests
  • ...

Titanium documentation

Documentation
Kitchen sink

CODESTRONG

Titanium Windows -> soon (Q4 2014 OR Q1 2015?)

doc: "Currently, Windows 8 App development and ..."

tl;dr : Windows 8 et windows phone is done through the command-line tools(Powershell)

Concretely :

Windows 8 SDK required Visual Studio 2012

Windows 8.1 SDK required Visual Studio 2013

Windows Phone 8 development is only supports on systems running 64-bit Windows 8. Visual Studio 2012 Pro edition or higher is required to run the Windows Phone simulator.

Getting Start Windows8 SDK

Thanks! Merci !

Any questions? Des questions?