Archive for February, 2012

Titanium app rebuild & redesign – TweetMic

Wednesday, February 29th, 2012

Editor’s note: Sharry Stowell is the editor of Learning Titanium, where he frequently comments on the latest contributions of the Titanium community.

Ever wanted to redesign your app after it’s been submitted to your desired AppStore/Marketplace? Well, I heard that Michael Pauley, who built TweetMic in Titanium last December was rebuilding his app from the ground up using CommonJS approach instead. Last week I got in touch with Michael & asked him a few questions about the processes he encountered along the way during the rebuild & redesign stages. I also spoke to his new graphic designers, Deliciously Digital and how they were involved.

Old to new resign

Interview with Michael Pauley

Firstly, what is TweetMic & how did you get the idea for it?
TweetMic is an iOS5 application on how I think social media can become personal. I think tone and emotions are lost in just text. When you hear their voice you can get a better understanding of how the feel about the subject. So with TweetMic you can load the app, press the microphone to record your thoughts, feelings or what ever you want.

The high quality audio file is uploaded to the cloud where I convert it to HTML5 compatible formats and then you can tweet like normal and share the link. The possibilities of its use are endless…Musicians, comedians, proud parent, politicians…

Is it a free or paid for app?
Currently it is a free app. Very soon there will be a paid version and there will be an in app purchase to upgrade. The next update will contain 1 iAd on the record screen and a popup to see if the user wants to purchase the full version.

Why did you redesign the existing app?
I felt the redesign was necessary because it didn’t look polished. I’m not a graphic designer by any means.

Any integration of Titanium modules within your app, if so any tips for Ti developers?
Yes, Ti.storefront and 0×82′s Twitter module. I may also use the Composer module for an easy message window.
Ti modules are a simple way not to reinvent the wheel and support your fellow developers.

“Ti modules are a simple way not to reinvent the wheel and support your fellow developers”

You mentioned uploading to the ‘cloud’, are you using a service like S3 or CocoaFish?
The audio files are uploaded to my server converted and then transferred to Amazon S3. I am looking at CocoaFish as an option in the future.

What’s involved when updating your app in Titanium?
Since this was a total rewrite I generated new projects and started from scratch with a new version number. I used my own MVC layout that starts with app.js and then I start calling the UI and running some functions before that application is displayed in bootstrap.js. I have all of the images separated by window name or in a directory called Shared.

Since I am going from a 1 window global namespace application to a 5 view commonjs app, there were huge changes with the coding. Not having done commonjs before I had to learn everything I could in just a few days and begin implementing it.

Are there any optional extras for the paid version, eg: longer message length etc?
Yes, initially the paid version will have 3 minutes of record time. The free version is being increased from 15 to 30 seconds.

Once the application is out there are some features already planned and being worked on. The big one is the ability to manage your audio recordings. The users of TweetMic+ will be able delete and save your files using File Sharing in iTunes.

Im also working a ‘Timeline’ of TweetMic tweets that you’ll be able to browse, retweet, reply and rate. That will come to both versions with some options disabled in the free version.

Great, loads of the features! When is the new release coming out?
I will be submitting it to Apple this week.

Do you have any screenshots for us?
Yes, here you are:

TweetMic Loadscreen small TweetMic record small TweetMic timeline small

See a video of the TweetMic+ in action here: Vimeo.

Can I ask who did the design work?
The wonderful folks at Deliciously Digital. Gemma Warren and Steve Wood, have been great to work with. They were able to take my ramblings and ideas and make the app look like how I imagined.

I’ll see if I can get an interview with them too, as it may help others in designing/layout/UI of their app.
That’s a great idea. It’s been a pleasure working with them.

Interview with Steve Wood at Deliciously Digital

Hi, please tell us a bit about yourselves
We are Deliciously Digital – a design partnership made with the combined skills of Gemma Warren & Stephen Wood. We’re brand creators, web designers, print makers & bakers!
We’re based in Daventry, Northants at the heart of the UK. Over the last 10 years we’ve mastered the art of creating design so good you could eat it! The most recent part of our careers has seen us forge our creative skills in the web industry, heading up an agency design team for the past 4 years. 2012 has seen us create new beginnings for ourselves as we strike out on our own creating Deliciously Digital which encompasses many facets of our skills including web & app design, screen printing and baking!

How did you guys get involved in App design?
App design for us is a natural progression from working in the web industry, as we are relying on our good core design principles built up over 10 years.

How did you find the transition from web designer to app designer?
We like our designs to be stripped back and efficient, and where possible every element of the design needs justifying with a balance of form and function.

App design in the mobile form really challenge you to breakdown the user journey through your interface. I would say on the whole it’s more of a considered journey compared to web design.
I think we’re at the beginning of another renaissance in web design, where information architecture is being simplified to it’s purest form which in turn will give us a smoother ride when surfing our devices.

Where do you get your inspiration from?
We get our inspiration from everywhere! Not just our peers and colleagues and other great digital designers, but in everyday life. We like to look at good content layout in print, and can even find subliminal influence in Esquire magazine!

5 years ago it was hard to see what everyone else is doing – the web design industry is no longer a walled garden I guess, and I think it’s great that sites like ‘Dribbble‘ have huge contributors openly sharing there work, raising the benchmark of design.

What were the fundamental questions to ask Michael about the redesign?
The most important answers we needed were who would be using it and how would they use it? From there we figured out the app map architecture and how the user would move around within it.

Luckily the core of Micheal’s idea is quite simple – ‘Users recording a vocal tweet and posting it!‘. So the design architecture didn’t hurt our brains too much. Alongside how it works we also talked about the look of it, which is also very important. You could say we’ve based the design skin and brand around the use of the retro mic as our figure head.

By just having a general conversation with Michael about his ideas has given us a good grasp of the project and where he wants to take it.

Looks like you’ve done a great job! The screenshots look brilliant.
Do you have any other projects you’re working on?

We have several promising projects in the pipeline. We’re currently setting up an online bakery called ‘Sweet Robot’ (www.sweetrobot.co.uk). We’re working on a ‘Cupcake builder’ App which will allow the user to create a bespoke product using a combination of set parameters. We’ve had some interesting ideas for the physical nature of the interface, for example shaking the iPhone to add sprinkles to the cake.

Aside from that we’re working with an events and marketing agency to create an App for one of England’s finest Universities for their graduation event. We’re looking at using push notifications and Geo-location technology to reach people who attend the event throughout the day. Any help with this would be greatly appreciated.

As you can see it’s never too late to revamp your existing app, whether is polishing up the look & feel of the app or even starting again from scratch to help with future updates. Kevin @ Appcelerator recently posted an article earlier this week about using bootstrap & commonJS in the Community App.

Code Strong!

Titanium Mobile SDK 1.8.2 is available now

Wednesday, February 29th, 2012

We’re excited to announce that Titanium Mobile SDK 1.8.2 and Titanium Studio 1.0.9 are available now. We released Titanium Mobile SDK 1.8.1 last month as our first service pack for the 1.8 release and the response to monthly service packs has been very positive. These service packs address high priority issues while we work on the next feature release. Titanium Mobile SDK 1.8.2 builds on the strengths of Service Pack 1.8.1 and addresses over 150 issues.

We are working in parallel on our next feature release, 2.0. Highlights of the SDK 2.0 feature set include:

  • Integration with CocoaFish to cloud-enable Titanium applications.
  • Composite layouts to address UI parity issues.
  • More flexible geolocation functionality.
  • Improved TableView performance.
  • Well-defined module API for module developers.

We’ve gotten a little behind processing community pull requests but we are working on them now, so keep them coming.

Enhancements in 1.8.2 include:

  • Android V8 – Application Java Script source code protection
  • Android V8 – Better memory management
  • iOS – API to load WebView content from string with baseURL
  • MobileWeb – Google Closure compiler integration to minify code
  • Documentation – Improved API documentation with new code examples

Read the Release Notes for additional details on all improvements available in this release.

Download and Installation

Updating Titanium Studio

You should be automatically prompted to update your Titanium Studio software. If you do not see the prompt, you can select “Check for Updates” from the “Help” menu from within Titanium Studio.

Updating the Mobile SDK

Similarly, you should be prompted to automatically upgrade your Titanium Mobile SDK from within Titanium Studio. If you do not see the prompt below, you can manually check for updates by selecting “Check for Titanium SDK Updates” from the “Help” menu within Titanium Studio.

For More Information

For more information, you may view the related API Documentation: Titanium Mobile SDK 1.8.2 API docs.

Featured Developer – Matt Berg

Monday, February 27th, 2012

In today’s “Featured Developer” blog post, we’re going to highlight a relatively new member of the community who has found quick success using Titanium. Matt Berg is a web and mobile developer with MarketNet, an interactive agency in Dallas, Texas. He’s worked with a number of solutions for cross-platform mobile development, but has decided on Titanium for some recent projects.

In addition to his professional work, Matt has also been spending his free time developing apps with Titanium. One app in particular, J23, made its way to the #5 app in the Apple App Store’s sports category. He’s also collaborating with a friend to convert their sports betting app from native iOS to Titanium in order to bring it to the Android platform. Not bad for just a couple months experience!

Interview with Matt Berg

Congratulations on the quick success with your J23 app! Tell us a little about it.


…got all the way up to #5 in the Sports category


One of my “hobbies”, if you can call it that, is collecting Nike Air Jordan sneakers. Even though Michael Jordan is retired, they still release a lot of new models, along with “Retro” models of the same shoes I had or wanted when I was in middle school and high school. Some of these “Retros” are so popular that they will sell out almost instantly when they release.

Most of the time I can’t stay up-to-date with the latest releases, and if you miss one you are likely relegated to paying exorbitant prices on eBay for the shoe. I wanted a way to keep track of these releases on my phone and set reminders (coming soon), that way I don’t have to scour the forums for this information on a daily basis.

I’m really passionate about Jordan sneakers, I needed reminders for the latest releases, so it just made sense to make the app. It was exciting to see the app rise up the charts and eventually get all the way up to #5 in the Sports category.

So how many people worked on it, and how long did it take?

This was a solo project for fun that I worked on in my spare time. I completed the bulk of the app in just two weekends, with about two additional evenings used for final polish on the app. I have spent an additional weekend recently working on adding iPad and Android specific versions, which are coming soon.

Just a couple weekends? Great! You built this with the Community edition of Titanium, right?

Correct, currently I am just using the free Community edition of Titanium. I am also planning on adding Push Notifications to the J23 app, so I will most likely be upgrading to the Indie package soon to use the Urban Airship module.

What made you pick Titanium for your mobile application development?


It makes the impossible seem possible


I have been using JavaScript in front-end web development for quite a while, so with Titanium’s focus on JavaScript it was the natural choice. I have used some different frameworks in the past and I wanted a way to test out the Titanium platform, so this seemed like the perfect opportunity.

Picking up the framework was quicker than I expected, and once you start seeing the instant results you sort of become addicted. Like I have said many times when talking about Titanium, it makes the impossible seem possible.

The community is also a big factor. The forums are great, there are plenty of Github projects to peruse, and when you see the stats of how many developers are using Titanium you know they are doing something right.

What resources did you use to learn and develop Titanium?

Starting off I really just used the KitchenSink example to learn how all of the components worked. I would just create test projects and pick off specific pieces I was interested in and build them out a little further. When I started diving a little deeper into Titanium most of my learning came from watching the Forging Titanium series of videos. Basically I would code alongside the videos, and then review the related Github projects and compare my code. This proved invaluable in ramping up my learning.

Lately I have been trying to work more on nailing down the single context tab group model in combination with master/detail window views, which if you look at J23 is basically the exact structure I use. Reviewing the new Sample.RSS and Template.Tabbed projects from Github have helped immensely in that area.

Do you have any plans to make more Titanium apps? Care to share some details of what’s on the horizon?

I will definitely be using Titanium in the future, both at MarketNet and developing apps in my spare time. The next Titanium app I am working on with my friend Robert is a Classic Video Poker app, complete with In-App Purchasing and GameCenter support. I also have a fun idea related to Chipotle Mexican Grill (my favorite restaurant) that I might work on in the coming months.

We’re truly excited to developer’s like Matt having such success with Titanium. So who’s going to be be next in the spotlight?

Matt’s Links

Building the Community App

Friday, February 24th, 2012

Titanium’s JavaScript API is very easy to pick up and learn, but since our APIs are relatively low level and we don’t impose an app structure upon you, approaches have varied quite a bit in how to build apps in Titanium. A common request that we get from developers is to share more “real world” examples of Titanium applications and code structures. We are setting out to provide a bit of guidance on this front with an application that we intend to use every day along with you, the members of the developer community.

All the updates, tweaks, techniques, and even the occasional dirty hack will be on display for all to see as we build out an app to facilitate communication and collaboration between the members of our development community. Please feel free to follow (and contribute to!) the project here, on GitHub.

About The App

The purpose of the Appcelerator Developer Community application is to:

  • Allow developers to connect and group up with one another for local meetups or around specific interests/topics
  • Facilitate sharing of updates, code, tutorials, and other bits of interesting content among the Appcelerator developer community
  • Coordinate live events with other Titanium developers
  • Identify the best Q&A experts, the most prolific module developers, top app publishers, and other outstanding community contributors
  • Provide an open source, production-quality Titanium application for instructional purposes.

 

The requirements for the app wil evolve over time, but we hope it will turn into a fun project that our entire community can participate in.

Solution Architecture

Our initial target for this application will be handheld Android and iOS devices, moving from there to the upcoming web SDK and then to tablet form factors.  For persistence, we intend to use the newly minted “Appcelerator Cloud Services” back end, formerly known as Cocoafish.  However, it will likely also become necessary to have some kind of custom server-side application, particularly when it comes time to deploy our browser-based app.  When that time comes, we will be deploying a web application on Red Hat’s OpenShift PaaS, which will be tightly integrated into future versions of Titanium Studio.

App Structure and Design

Like all new Titanium applications folks work on with Titanium, this project will make use of CommonJS modules from within a single JavaScript context.  Further, it will make heavy use of the platform-specific “android” and “iphone” subdirectories of the Resources folder, to separate out platform-specific UI code from shared UI code and shared business logic.  If you checked out my talk from the last Codestrong, you might have heard me talk about the two major schools of thought that exist for multi-platform app design: Platform Identity and Brand Identity.  I won’t go into details on each here, but for this application I have chosen to go with a platform identity approach, in an attempt to create an immediately recognizable interface to a platform user.

For iOS this means I will be using a slightly modified version of the standard built-in tab bar.  For Android, I will be attempting to implement an action bar and custom tab control on the app’s initial activity.

Bootstrapping the application

If you open up app.js of the Community app, you’ll notice it contains very little code:

//do any global bootstrapping - none needed now
//..
 
//platform-specific UI bootstrap
var app = require('/ui/bootstrap');
app.launch();

It requires a “bootstrap” module, which will launch the rest of the user interface. But if you look in the app’s top level Resources directory…

You won’t see any file under “ui/bootstrap.js” – why is this? It’s because that this application is intended to use highly platform-specific UI components and navigation structures. To help facilitate this, we implement a “bootstrap.js” file which will supersede any JavaScript files at the top level resources directory:

The philosophy for this app is that we will be creating platform-optimized experiences for every device. We’ll find lots of opportunities to reuse code, but for each platform, we will arrange the windows, views, and components in a way that makes sense to users of that platform.

That’s all for this week, but I encourage you to check back next week when we take a look at some of the JavaScript programming techniques and custom user interface components used in this application.

Titanium Developer Meetup in Malmo, Sweden

Thursday, February 23rd, 2012

Next Thursday, following our big developer meetup at Mobile World Congress in Barcelona, Purple Scout will be hosting a day-long Titanium developer meetup in Malmo, Sweden. Featuring business and technical presentations from Titanium developers and trainers from Purple Scout, it should be a great day to ramp up on Titanium Mobile development.

I will also be on hand to share updates from MWC and conduct technical sessions on app development best practices, resource management, UI design, and more. For more details, please see Purple Scout’s informational page here. Hope to see you there!