Hi Indian Titanium developers!  I’d like to invite you to meet up with me and your fellow mobile developers at two upcoming events in India.  Appcelerator will be co-hosting two evenings of learning and networking for local Titanium developers. Join us for drinks and refreshments!

Chennai Titanium Meet-up

Date:  Wednesday, July 18th

Time:  6:30pm – 8:30pm

Appcelerator Speakers:  Kevin Whinnery, Chief Technical Evangelist

Anubavam Speakers: Sivakumar Veerappan

Location:  Fortune Select Palms, Chennai @

142, Rajiv Gandhi Salai, old Mahabalipuram Road,Thoraipakkam, Chennai, Tamil Nadu 600096

http://www.meetup.com/Chennai-Titanium-User-Group/events/73255942/

 

Noida / New Delhi Titanium Meet-up

Date: Thursday, July 19th

Time:  3pm – 6pm

Appcelerator Speakers:  Sandeep Johri, COO; Kevin Whinnery, Chief Technical Evangelist

GlobalLogic Speakers: Deepak Gupta, AVP Technology; Dr. Sunil Singh, Chief of Asia Pacific & Managing Director

Location:  Hilton Mayur Vihar, New Delhi @

13 B Mayur Vihar, District Centre, New Delhi, 110091, Delhi

http://www.meetup.com/New-Delhi-Titanium/events/71260322/

Hope you can make it – we’d love to see you there!

Editor’s Note: Reposted with permission from the OpenShift developer blog, and author Grant Shipley.

During Part 3 of the developing iPhone and Android apps in the cloud series, we went over signing up for a brewerydb.com account as well as downloading and deploying the BeerShift backend source code on OpenShift.

In this blog post, we will discuss the mobile application code and get it working inside of Titanium Studio.  If you haven’t already installed and configured XCode, Titanium Studio, and the Android SDK, please follow the steps outlined in Part 2 of this series.

Step 1: Clone the BeerShift project

In order to start working with the mobile application for BeerShift, we need a local copy of the open sourced source code that is available on GitHub.  If you are not familiar with git, we are going to clone the BeerShift repository.  This will copy the BeerShift source to our local machine as well as setup a local source code revision control repository that is private.  This will enable us to make changes to the source code and commit them to our local private repository.  Any change that you commit to BeerShift on your local machine will remain private.   If you add some fancy new features, or fix some bugs, you will need to issue a pull request on GitHub in order for the public repository to be updated with your changes.

In order to clone the BeerShift source code, open up a terminal window and create a directory for your project.

$ mkdir ~/code
$ cd ~/code

Now that we have a location for our source code, lets clone the BeerShift repository.

$ git clone https://github.com/BeerShift/BeerShift.git

This will create a directory named BeerShift underneath the code directory.  To verify that you have the proper source code, lets view some of the commit log.

$ cd BeerShift
$ git log

At this point, you should see the last several contributions to the project.

Step 2: Import the project into Titanium Studio

Start Titanium Studio and select ‘Import Project’ on the left hand side of the screen.

 

 

Select ‘Existing Titanium Project’ and click ‘Next’.

 

 

Select the location of your source from Step 1, and click on the ‘Finish’ button.

 

 

Step 3: Set your deployment targets

Now that we have the source code imported into Titanium Studio, we need to set the deployment targets for our application.  Double click on the tiapp.xml file that is located under your project directory.

If you are on the MacOS operating system, and followed all of the steps in Part 2 of this blog series to install XCode and the Android SDK, select iPhone and Android.  In you are on Windows or Linux, you will not be able to target iOS devices.

 

 

Step 4: Understand the directory structure

In your ‘App Explorer’ pane, you should see two top-level directories.  The i18n directory is where you can place all of your localization files for your application.

Localization in Titanium Studio is pretty straightforward and I will detail how to add the users default locale to your application.

Under the i18n directory, you should create a subdirectory for each language / locale that you plan to support (based on the ISO 639-1 standard).  For instance, to support both English and German, create two directories: en and de

 

 

In each locale specific subdirectory, you will need a strings.xml file that is an xml based key->value pair.

For example:

<?xml version="1.0" encoding="UTF-8"?>
<resources>
     <string name="lblBeerName">Beer Name: </string>
     <string name="tfBeerName">What am I drinking?</string>
     <string name="tabDrink">Drink</string>
     <string name="winDrank">Drank</string>
     <string name="winFirehose">Keg Stand</string>
     <string name="tabDrank">Drank</string>
     <string name="winSettings">Settings</string>
     <string name="tabFireHouse">Keg Stand</string>
     <string name="tabSettings">Settings</string>
     <string name="winDrink">BeerShift</string>
     <string name="winBeerDetails">Beer Details</string>
     <string name="lblDrinkTheBeer">Drink It!</string>
     <string name="lblLoading">Loading......</string>
     <string name="titleLabelText"> drank </string>
     <string name="lblApi">URL: </string>
     <string name="lblApiHintText">Service URL</string>
     <string name="lblUsername">Username: </string>
     <string name="tfUsernameHintText">BeerShift Username</string>
     <string name="lblPassword">Password: </string>
     <string name="tfPasswordHintText">password</string>
     <string name="lblAuthenticating">Authenticating</string>
     <string name="alrtDialogTitle">Bad Password</string>
     <string name="alrtDialogMsg">Password is not correct for this user</string>
     <string name="createUserTitle">That user doesn't exist.  Would you like to create it?</string>
     <string name="labelYes">Yes</string>
     <string name="labelNo">No</string>
</resources>

 

 

These resource files are processed and included in your project at build time.

Step 5:  Getting started with the source code

Expand the ‘Resources’ directory and double click the app.js file.

 

 

The app.js file acts like a bootstrap for your application.  This is the first file that gets loaded and is where you define and create your layout and application.

Instead of walking through the source code in this blog post, check out the video where I walk through the code and explain what is happening.

Step 6: Test your application in the simulator

Now that we have and understand the source code, lets see it running inside of the iPhone or Android emulator.  In order to run the application, select ‘Run’ and then select ‘Run’ again.  This will open a dialog that will allow you to select which run configuration to use.

Once you select your device, Titanium Studio will build your application code and launch the emulator.  At this point, you can play around with the application and even set breakpoints and debug inside of the emulator.

 

Step 7: What’s next?

You should have the application up and running and hopefully pointed to your own backend hosted on OpenShift.  The next step is to add a cool feature or fix a bug that is present in the source code.  Once you have modified the code, submit a pull request on github and I will work to get it accepted into the master source code branch.

If you haven’t already signed up for OpenShift, take a moment to do that now.  Use the promo code ‘BeerShift’ to claim your 3 free applications running on the Red Hat Cloud.

Want to see me give a presentation on mobile development?  I will be at the following upcoming events:

OSCON 2012 – July 17-20

Phoenix PHP Users Group – July 24th

Fredricksburg (DC) Linux User Group – July 28

WIP Hackathon, Detroit – July 30-31

MongoDB Toronto – August 2

FOSCON – August 11

MongoDB Charlotte – August 15

NOSQL Now – August 21-23

 

Want me to come and speak at your users group or conference?  Send an email to openshift@redhat.com and we can co-ordinate scheduled.