Techday7 - Appcelerator Titanium Development workshop in Chennai

Techday7 is organizing a Appcelerator Titanium Development workshop in Chennai on June 16 2012 with the name of Cross Platform Mobile Development using Appcelerator Titanium. Techday7 is providing a 3 hour workshop. This workshop is targeted at the developer to equip them to use Appcelerator’s Titanium platform to create cross platform native mobile applications using HTML, CSS and Javascript skills and open source technologies. Come and learn the recommended practices, techniques and methodology used in Titanium framework. These workshops is designed for individuals who want to become an expert Titanium developer or improve mobile app development skills, we can help you achieve your goals. In this workshop we are going to deliver the speech on following topics

• Why cross-platform mobile framework? What is Appcelerator Titanium?
• Getting started with Appcelerator Titnanium
• Best Practices for Appcelerator Titanium

Cross Platform Mobile Development using Appcelerator Titanium

Techday7 invites you all to attend this event. Kindly RSVP this event to confirm your seats.
Date: 16 June 2012
Time: 9:00 A.M to 1:00 P.M
Venue: IIT Madras Research Park,
Kanagam Road, Taramani,
Chennai – 600 113.
Contact: 044-65180342, 9994526041, 9092049890

Venue Map

https://twitter.com/techday7 https://www.facebook.com/TECHDAY7

Launch third-party apps from Titanium App

We can open Third-party applications from our Titanium Application.

Example 1:

We can open iOS Maps app by using the below code.

Ti.Platform.openURL('Maps://');

Example 2:

We can open iOS settings app by using the below code.

Ti.Platform.openURL('Prefs://');

We can open iOS LOCATION SERVICES in settings by using the below code.

Ti.Platform.openURL('prefs:root=LOCATION_SERVICES'); 

List of currently known URL Scheme in the Settings app

    prefs:root=General&path=About
    prefs:root=General&path=ACCESSIBILITY
    prefs:root=AIRPLANE_MODE
    prefs:root=General&path=AUTOLOCK
    prefs:root=General&path=USAGE/CELLULAR_USAGE
    prefs:root=Brightness
    prefs:root=General&path=Bluetooth
    prefs:root=General&path=DATE_AND_TIME
    prefs:root=FACETIME
    prefs:root=General
    prefs:root=General&path=Keyboard
    prefs:root=CASTLE
    prefs:root=CASTLE&path=STORAGE_AND_BACKUP
    prefs:root=General&path=INTERNATIONAL
    prefs:root=LOCATION_SERVICES
    prefs:root=ACCOUNT_SETTINGS
    prefs:root=MUSIC
    prefs:root=MUSIC&path=EQ
    prefs:root=MUSIC&path=VolumeLimit
    prefs:root=General&path=Network
    prefs:root=NIKE_PLUS_IPOD
    prefs:root=NOTES
    prefs:root=NOTIFICATIONS_ID
    prefs:root=Phone
    prefs:root=Photos
    prefs:root=General&path=ManagedConfigurationList
    prefs:root=General&path=Reset
    prefs:root=Sounds&path=Ringtone
    prefs:root=Safari
    prefs:root=General&path=Assistant
    prefs:root=Sounds
    prefs:root=General&path=SOFTWARE_UPDATE_LINK
    prefs:root=STORE
    prefs:root=TWITTER
    prefs:root=General&path=USAGE
    prefs:root=VIDEO
    prefs:root=General&path=Network/VPN
    prefs:root=Wallpaper
    prefs:root=WIFI
    prefs:root=INTERNET_TETHERING

Reference URL : iOS-url-scheme
NOTE : All url schemes to iOS settings will be removed in iOS 5.1

Google Geocode in Titanium Application

In my Titanium Application I have tried to use reverseGeocoder to find the current address (Street, City, State, Zip and Country) from the latitude and longitude.

But Ti reverseGeocoder does not return the exact address from the current latitude and longitude at all the time. It works only in few locations only.

So that I have move to Google Geocode API

Here is my sample code for how to use Google Geocode API in Titanium Application to get Street, City, State, Zip and Country value using latitude and longitude.

var addrUrl = "http://maps.googleapis.com/maps/api/geocode/json?sensor=true&latlng="+latitude+","+longitude;
/* web-service call */
var addrReq = Titanium.Network.createHTTPClient();
addrReq.open("GET",addrUrl);
addrReq.send(null);
 
addrReq.onload = function()
{
    var response = JSON.parse(this.responseText);
 
    if(response.status == "OK"){
        var resLen = response.results[0].address_components.length;
        for(var i=0; i < resLen; i++) {
            switch (response.results[0].address_components[i].types[0])
            {
                case "street_number":
                    Ti.API.info("street number : "+response.results[0].address_components[i].long_name);
                    break;
                case "route":
                    Ti.API.info("street name : "+response.results[0].address_components[i].long_name);
                    break;
                case "locality":
                    Ti.API.info("city name : "+response.results[0].address_components[i].long_name);
                    break;
                case "administrative_area_level_1":
                    Ti.API.info("state name : "+response.results[0].address_components[i].long_name);
                    break;
                case "postal_code":
                    Ti.API.info("zip code : "+response.results[0].address_components[i].long_name);
                    break;
                case "country":
                    Ti.API.info("country name : "+response.results[0].address_components[i].long_name);
                    break;
                }
        }
    }else{
        showAlert('','Unable to find Address');
    }
 
};

Google Analytics in Titanium Application

I have recently used Google Analytics to track pages and track events in My Titanium iOS Application. For that I have used Roger Chapman's Titanium Google Analytics Library. I have followed the below steps

STEP 1 : Create Google Analytics Account

You need to Create a Google Analytics Account click this link(http://www.google.com/analytics/) to get started.

After successful creating the account you will get a Google Analytic ID like similar to this one UA-18135349-1

STEP 2 : Add Google Analytics to Titanium App

add the below code in you app.js file

var analytics = new Analytics('UA-18135349-1'); //replace it with your Google Analytics ID
 
analytics.reset();
 
Titanium.App.addEventListener('analytics_trackEvent', function(e){
    analytics.trackEvent(e.category, e.action, e.label, e.value);
});
 
Titanium.App.addEventListener('analytics_trackPageview', function(e){
    var pagename = (e.pageUrl);
    analytics.trackPageview(pagename);
});
 
Titanium.App.Analytics = {
    trackPageview:function(pageUrl){
        Titanium.App.fireEvent('analytics_trackPageview', {pageUrl:pageUrl});
    },
    trackEvent:function(category, action, label, value){
        Titanium.App.fireEvent('analytics_trackEvent', {category:category, action:action, label:label, value:value});
    }
}
 
 
// Function takes an integer which is the dispatch interval in seconds
analytics.start(10);
 
// You don't need to call stop on application close, but this is just to show you can call stop at any time (Basically sets enabled = false)
Titanium.App.addEventListener('close', function(e){
    analytics.stop();
});

STEP 3 : Track Pages

in your win1.js(the page which you want to Track Page View) add the below code

// track page view on focus
win.addEventListener('focus', function(e){
    Titanium.App.Analytics.trackPageview('all-listings/list-view'); // here 'all-listings/list-view' page url, you can use your custom url
});

STEP 4 : Track Events

Add below code in EventListener of the Control which you want to track. For example in my app I have to track the closeBtn event, so that I used below code

// pass the following parameters trackEvent(category, action, label, value)
closeBtn.addEventListener('click', function (e) {
    Titanium.App.Analytics.trackEvent('Dialog','Cancel','CloseButton','');
    win.close();
});

Okay. Cool now everything fine.But how to Check Google Analytics works or not?

Normally Google Analytics Account Activation takes 12 hrs to 1 day(if you created the account newly)

After the activation you can use the below link for real time testing(It will shows the last 30minutes activities)

https://www.google.com/analytics/web/#realtime

For TrackEvent you can check this one

We can't test TrackEvent immediately like(realtime analytics). It takes some time to reflect the changes.

How to test Google Analytics track event for Mobile Applications?

Titanium Android bottom tabgroup

Native android tab group is ALWAYS forced to the bottom by the OS (not by appcelerator). The following post explain how to achieve Bottom tabbar in Titanium(Android OS)

The first thing you want to remember is 90% of whatever you want to be changed using any native config, can be done in Ti by placing that file in the projects root, under whatever structer it was to have in native land. So if the file in a native app would be in '/foo/text.xml', in Ti you would place it in '%your apps project root%/foo/text.xml' Knowing that will help you with a lot of more advanced topics in Titanium dev.

Create a new project, and add the following xml into a file named 'titanium_tabgroup.xml' (without the quotes), inside a new project directory you will create called '%your apps project root%/platform/android/res/layout/' (again, without the quotes).

The XML you want to add is found in this gist

Then do a clean build of your app and run in android :)

Sample Output from Android Simulator

Here you can download the complete working project from my Github Android Bottom Tab Group

Reference Post : Matt Apperson Blog Post

Updated:

Bottom Tabgroup will be supported up to Titanium 3.0,  it will not be supported for Titanium 3.X  

Reason:

Before SDK 3.0, we used TabActivity to implement the TabGroup. Since TabActivity is deprecated, we now use TabHost to implement the TabGroup for API level < 11 in SDK 3.0. We define the TabHost layout in the code. That's why the custom TabHost layout xml file does not work anymore.
Based on the guideline of Pure Android, the bottom tab bars are not recommended. In addition, for API level >= 11 we use ActionBar to implement the TabGroup, in which case tab bars can only be on the top. In order to provide a consistent experience, we don't recommend using bottom tab bars.

AppC Jira Link : https://jira.appcelerator.org/browse/TIMOB-12220

Important Titanium Tutorial Link

These all are Important Titanium tutorials for beginners,

http://wiki.appcelerator.org/ (official guide)
http://vimeo.com/appcelerator (official video tutorials)
http://blog.clearlyinnovative.com/
http://cssgallery.info/category/titanium-appcelerator/ (Seven days with Titanium)
http://www.learningtitanium.com/
http://titaniumtips.com/
http://www.codeboxed.com/
http://mobile.tutsplus.com/category/tutorials/appcelerator/
http://boydlee.com/appcelerator-titanium.html
http://appcodingeasy.com/Titanium-Mobile
http://www.titaniumdevelopment.com.au/

Showcase for Mobile & desktop applications built with Appcelerator Titanium
http://www.builtwithtitanium.com/

Create Album and Post Photos in Facebook Using Appcelerator Titanium

STEP 1
User Need to be Loggedin with Facebook

STEP 2
Have to create a album using Graph API

Titanium.Facebook.requestWithGraphPath('me/albums', {name: albumTitle, message: albumDescription}, 'POST', function(e) {

// handle the response(response will have the album id)
   if(e.success) {
     if(e.result) {
        var response = JSON.parse(e.result);
        var album_id = response.id;
        var path = album_id+'/photos'; // Here response.id represents Album id
     }
   } else if(e.cancelled) {
       Ti.API.debug("user cancelled");
   } else {
       Ti.API.debug(e.result);
   }
});

STEP 3
Post photos to facebook using Graph API along with album id(which we got in previous step)

Before posting photos we have to convert photos into blob, Let assume I am having 3 images(1.jpg,2.jpg,3.jpg) inside the App_root/Resources folder. First we need to convert it into blob, then have to post it in facebook using Graph API

var aTitle = "Test Album";
var aDescription = "my description";
var media = [];      
for(var i=1; i<=3; i++){
   var file = Titanium.Filesystem.getFile(i+".jpg");
   var blob = file.read();
   media.push({'message': 'myPic', 'picture': blob});
}


var path = album_id+'/photos';

for (var m = 0; m < media.length; m++){
  Titanium.Facebook.requestWithGraphPath(path, media[m], 'POST', function(e){
     if (e.success) {
        //message = "Successfully posted in Facebook";
     } else {
        if (e.error) {
          //message = e.error;
        } else {
          //message = "Unkown result";
        }
    }
  });
}
alert("Successfully posted in Facebook");

Here is my working sample code at gist (Tested in iPhone)