Crossplatform Programming Lecture 3 Introduction to Titanium http://dsg.ce.unipr.it/ http://dsg.ce.unipr.it/?q=node/37 alessandro.grazioli81@gmail.com 2015 Parma
Outline Introduction Installation and Configuration Platform Overview Titanium SDK Titanium Studio Cloud Services Alloy Modules Creating a project File inclusions 2015 Parma
Introduction Titanium Studio is an open, extensible development environment for creating native applications across different mobile devices and operating systems including: Android ios Windows Phone BlackBerry Tizen HTML 5 http://www.appcelerator.com/platform/titaniumstudio/ 2015 Parma
Examples of apps built with Titanium 2015 Parma
Platform Overview The platform includes: Titanium SDK an open source SDK with over 5000 APIs for devices and mobile operating systems (formerly known as Titanium Mobile SDK before Titanium Desktop SDK was discontinued) Titanium Studio (Eclipsebased IDE) Alloy (an MVC framework) Cloud Services (MBaaS Mobile Backend as a Service) 2015 Parma
Titanium Installation and Configuration 2015 Parma
Required and suggested software Install Android SDK Download it from http://developer.android.com/sdk/index.html and unzip it in its final destination Install the latest available version of xcode Open the Mac App Store, search for it and install (if you do not have an Apple account, you will have to create one) Install Genymotion Android Emulator Register for free on http://www.genymotion.com/ then download the package including VirtualBox and install it Create a new device, start it, download Google Apps for your Android version and drop the zip on the emulator to install them (http://wiki.rootzwiki.com/google_apps#universal_packages_2) 2015 Parma
Required and suggested software Genymotion Genymotion is an Android emulator using x86 architecture virtualization, making it much more efficient Its interface allows the control of simulated sensors like battery, GPS, camera and accelerometer Unfortunately, Titanium does not support the interaction with simulated devices and therefore, the use of adb (Android Debug Bridge) is necessary While a virtual device is running, open a terminal and go to the project s directory in the workspace If you do not have any physical device connected, use adb e option to direct the command to the only available device and install the app ~/ /adtbundlemacx86_64/sdk/platformtools/adb e install Test.apk 2015 Parma
Required and suggested software Genymotion If you also have physical devices connected: Use adb device command to list all of them Use adb connect command followed by the device IP and port Use adb install command followed by the apk name PATH_TO_ADT/sdk/platformtools/adb device List of devices attached 192.168.56.101:5555 device 192.168.56.102:5556 device PATH_TO_ADT/sdk/platformtools/adb connect 192.168.56.101:5555 PATH_TO_ADT/sdk/platformtools/adb install Test.apk If you get more than one device and emulator error, use s option 2015 Parma
Titanium Installation Go to http://www.appcelerator.com/titanium/titaniumstudio/ click on Download Titanium and sign up for free Log in, download Titanium Studio and install it When the program starts, it asks for the username and password used to create the account After logging in, wait for the dashboard to appear Go to Configure Native SDKs section to set xcode and Android up 2015 Parma
Titanium Configuration Initial configuration happens from the dashboard If you have already installed xcode, Titanium should automatically find it, otherwise it will ask you to install it To configure Android, click the Android SDK link in the Configure Native SDKs section to display a button on the right, and click it If you have already installed Android SDK, browse to the sdk dir (e.g., /PATH/adtbundlemac/sdk) Click Configure button and let Titanium check for the installed components If, instead, the SDK is not installed, Titanium will download it 2015 Parma
Platform Overview 2015 Parma
Titanium SDK Open source SDK allows community developers to create native, mobile web or hybrid applications for all platforms from a single code base written in JavaScript Over 5000 APIs available using Javascript, a simple language chosen to accommodate more developers and reduce code complexity More than 500000 community developers Clientside cloudbased services and marketplace modules About 70% of code can usually get reused across projects 2015 Parma
Titanium Studio Titanium provides highlevel crossplatform JavaScript APIs for mobile development It is based on the assertion that mobile code can be divided in 2 components: A core part, common to every platform that should be reusable A platformspecific one (APIs, user interface conventions, ) that should be targeted for each platform So Titanium is not writeonceruneverywhere as PhoneGap, but you write JavaScript code which uses and takes advantage from useful native features, specific for each platform 2015 Parma
Titanium Studio Basically, with Titanium you write a native app in JavaScript since it provides you the JavaScript mapping to native APIs (you have JS classes and methods which matches native classes and methods) When you run your application, the JS code you wrote is interpreted in a native JS environment which includes proxy objects A proxy is an object which has a pair in the native code it exists in both JS and native environments and is the bridge between the two So when you use a Titanium API function, this gets translated in native code 2015 Parma
Mobile Cloud Services Mobile Backend as a Service (MBaaS) offers a way to build connected mobile apps Offering a library of 20 services from which developers can choose the ones they need, such as: Push notifications Status updates Photo storage Social integration Events Developers can create custom cloud services Cloud services scale elastically based on user adoption 2015 Parma
Mobile Cloud Services To use cloud services in your app, check the relative box when you create a new project At the end of the project creation wizard, a new cloud app is registered with two API keys (development and production) To add cloud services to an existing project, use the Enable Cloud Services button in the tiapp.xml editor view To remove them, delete the properties referencing to them in the source view of tiapp.xml file 2015 Parma
Mobile Cloud Services Your app must prove that it is allowed to talk to the cloud services to keep your data secure by preventing anyone from making requests to impersonating your app Appcelerator Clod Services (ACS) provide 3 means of authentication: 3Legged OAuth: the user and application are authenticated at the same time. The login is done using a separate authentication server, which returns a timelimited access token to the application. The application uses the access token to authenticate all subsequent requests 2Legged OAuth: a key and a secret info are used to sign each request made by the app. When the cloud server receives a request, the secret is used along with the data sent in the request to calculate a signature. If the sent and the computed signatures match, the request is processed API Key: the application passes a preprovisioned API key with each request 2015 Parma
Mobile Cloud Services As previously stated, when you create a new project, Titanium generates production and development keys which are stored in tiapp.xml file <property name="acsapikeydevelopment" type="string">your DEVELOPMENT API KEY HERE</property> <property name="acsoauthkeydevelopment" type="string">your DEVELOPMENT OAUTH KEY HERE</property> <property name="acsoauthsecretdevelopment" type="string">your DEVELOPMENT OAUTH SECRET HERE</property> <property name="acsapikeyproduction" type="string">your PRODUCTION API KEY HERE</property> <property name="acsoauthkeyproduction" type="string">your PRODUCTION OAUTH KEY HERE</property> <property name="acsoauthsecretproduction" type="string">your PRODUCTION OAUTH SECRET HERE</property> <property name="acsapikey" type="string">your API KEY HERE</property> <property name="acsoauthkey" type="string">your OAUTH KEY HERE</property> <property name="acsoauthsecret" type="string">your OAUTH SECRET HERE</property> By default, the API key is preferred over OAuth so if, both are present, the former is used Once the services have been added, use them with the Ti.Cloud platform calls after you have requested the relative API var Cloud = require('ti.cloud.cloud_service_name'); 2015 Parma
2015 Parma
Alloy Alloy is a development framework built on Node.js to facilitate the development of mobile applications It follows a modelviewcontroller (MVC) architecture and uses XML and CSS to provide a simple model for separating the application user interface, business logic and data models It provides a set of predefined themes you can use to manage the lookandfeel of your app Alloy is installed together with Titanium Studio 2015 Parma
Alloy ModelViewController (MVC) pattern is used to address the problem of separating the internal representation of information from the way the information is presented to or accepted from the user Applications are divided into 3 components A model is an object with properties and methods. It notifies its associated views and controllers when there has been a change in its state so that the former can update the output and the latter can change the available set of commands A view displays to the user data contained in the model The controller acts on both view and model by controlling model s data (i.e. by sending commands to the model to edit its data, for example when editing a document) and updating the view whenever model s data changes Modifies M Updates C User Input V 2015 Parma
Alloy How to use Alloy Start Titanium Studio From the menu, select File > New > Mobile App Project to display up the wizard Select Alloy in the Available Templates box, choose a template, then click the Next button Complete all of the fields, then click the Finish button A new skeleton Alloy project will be generated, but the Resources folder is hidden from the App and Project Explorer all work for an Alloy project is done in the app directory alloy.js is an initializer file used to preconfigure components or override Alloy methods before the main controller is executed File alloy.js can be used to include code that must be executed before all of the controllers for the views of the app E.g., use it to set global variables by attaching them to Alloy.Globals object Alloy.Globals.someGlobalFunction = function(){}; 2015 Parma
Alloy MVC View The app/view/index.xml defines the structure of the app (it s the MVC View component) <Alloy> <Window class="container"> <ImageView id="imageview" onclick="clickimage"/> <Label id="label" onclick="doclick">hello, World</Label> </Window> </Alloy> The structure includes a window with an image and a label The app/styles/index.tss defines the style of the components in the view file "Window": { backgroundcolor:"white" }, "#label":{ bottom:20, width: Ti.UI.SIZE, height: Ti.UI.SIZE, color:'#999' }, "#imageview":{ image:"/images/image.jpg", width:24, height:24, top:100 } Ti.UI.SIZE is the size of the container clickimage method is defined in the MVC controller component (see next slide) 2015 Parma
Alloy MVC Controller Controllers contain the application logic used to control the UI and communicate with the model The app/controller/index.js contains the presentation logic associated to app/view/index.html The example below includes the function executed when the image is tapped it displays an alert dialogue function clickimage(e) { Titanium.UI.createAlertDialog({title:'Image View', message:'you clicked me!'}).show(); } $.index.open(); Open the top level UI element (the Window object) in the MVC View All UI elements which have an id attribute are automatically available as a property prefixed by the special var $ in the controller, which is a reference to the controller E.g., $.label can be used to access properties or methods of a Ti.UI.Label object instance having id="label" If the toplevel UI object does not have an id defined, reference it using the name of the controller prefixed by the $ Since the Window object in the view does not contain an id, the controller uses $.index to grab the toplevel UI object If an id attribute was defined, for example, <Window id='window'>, the controller needs to use $.window since $.index will be undefined and the app will throw an error when calling $.index.open() 2015 Parma
Modules 2015 Parma
Titanium Modules More than 300 modules, or extensions, spanning icon libraries, UI components, advertising and encryption Modules are created by Independent developers, Independent Software Vendors (ISV) and partners IDVs examples are AT&T, Amazon, Scandit, InMobi, New Relc, Users can develop their own modules and release them to the community 2015 Parma
Titanium Modules Modules are downloadable as zip files from the network or from the marketplace To use them you need to perform the following operations download the module (zip) from its repository unzip it open titanium.xcconfig file and edit: TITANIUM_SDK attribute value to match Titanium SDK path (usually it s in Library/Application Support/Titanium/mobilesdk/osx/VERSION_NUMBER, or in /Users/USERNAME/Library/Application\ Support/Titanium/mobilesdk/osx/VERSION_NUMBER) TITANIUM_SDK_VERSION attribute to match the version number found as the name of the SDK directory found at previous step Open the terminal, go to the directory where you unzipped the module and run./build.py to create a new zip which includes the updated attributes 2015 Parma
There are two ways for installing a module Installing just for a single application Titanium Modules Drag and drop the updated zip on the directory of the project in the Titanium tree filesystem Compile (when first compiling, Titanium will install the module) Installing for all the applications in your workspace Copy the updated zip in Titanium s path (Library/Application Support/Titanium or /Users/USERNAME/Library/Application Support/Titanium) Unipz it to create a module2 directory (module directory already exists to keep installed previously installed modules) Open module2 and move to module the platform directory (e.g. iphone) Delete module2 Edit tiapp.xml file to register the module by adding the following line in the module tag (the name of the module is specified in the module s page instructions when you download it) <module version="0.1.21" platform="platform_name">module_name</module> 2015 Parma
Project Creation 2015 Parma
Titanium Studio Project Creation To create a new project click on File New Mobile App Project Select Classic on the left side and choose one of the available layouts 2015 Parma
Titanium Studio Project Details The filesystem of a project includes the Resources directory, which is the container of your application Inside, you can find directories for each targeted platform e.g. mobileweb (for a HTMLbased app), android and iphone (this is for every ios device, not just the iphone) An images dir is automatically created for the images used by the user interface Also, platformspecific directories may include additional images directories for the needs of the platform (e.g. Android needs subdirectories such as hdpi, ldpi, hdpi which are inside android dir) ui dir includes the common subdir, for files used by every type of device, and handheld and tablet directories in which you will store files respectively for smartphones and/or tablet interfaces 2015 Parma
Titanium Studio Project Details 2 files are very important for Titanium projects app.js creates the app and allows selecting what is the first file to be interpreted (i.e., the file containing the first view that will be displayed) tiapp.xml includes information about your project, such as the app id, the publisher name, the version, the copyright, the icon displayed in the device s menu, the installed modules, the target platforms (it allows installing components for more platforms if needed) 2015 Parma
Titanium app.js In the example tabbased project, app.js file contains a function which checks if the app is running on a tablet or on a phone checktablet() and sets a istablet variable accordingly A Window variable is then created by referring to a script which depends on the device An ApplicationTabGroup variable is created by referring to a script which is common for every kind of device Finally, the first view of the app is created by passing the Window variable to the ApplicationTabGroup and calling open() method 2015 Parma
Titanium tiapp.xml 2015 Parma
File inclusion You can distribute your code on several JavaScript files including a file in another one requires detecting the current platform since the filesystem is managed in different ways for each platform (e.g., ios requires full path to files, Android relative paths) var osname = Ti.Platform.osname, version = Ti.Platform.version; var isandroid = (osname == 'android')? true : false; if (!isandroid) Ti.include('ui/common/file.js'); else Ti.include(Titanium.Filesystem.resourcesDirectory + 'ui/common/file.js'); 2015 Parma