Archive for the ‘Showcase’ Category

Featured Developer – Vaughn Dabney

Tuesday, March 12th, 2013

In today’s “Featured Developer” post we’ll be talking with Vaughn Dabney, a Titanium developer for the last year and half who has recently developed a mobile app for the NAACP Annual Image Awards. Let’s hear more about him and his latest project.

Interview with Vaughn Dabney

Tell us a little about yourself

I have been a developer for about seven years. I was an electronics engineering student at DeVry University (Arlington, VA Campus), and it was last year that I started to delve into the world of websites and programming. After taking my first pro bono client in 2006, I never looked back.

Since then, I have been a multi-language developer working for various companies, as well as independently. I started out teaching myself Flash and Actionscript 2/3 when I started working for MySpace (FIM Labs/Spring Widgets) in 2007. While I was there I learned best practices and troubleshooting techniques from some of the best developers I know to this day.

After being laid off in 2009 with many others in the economy, I did my own thing for about a year. During that time I taught myself in depth: Javascript, PHP, and MySQL. Long story short, I love what I do.

For fun, when I’m not working (which is rare), I am a hardcore roller skater. I skate at least three times a week here in Atlanta. That’s one place where I go to forget everything for a couple hours and lose myself on the rink floor. Pretty heavy into my photography too – mostly wedding and lifestyle. Besides that, I’m an artist at heart which is probably why I love to create apps that people can use.

So tell us a little bit about your mobile app

The NAACP 44th Annual Image Awards App – The app was developed to engage users and attendees on the day of the Image Awards ceremony. Features include: nominee voting, celebrity outfit voting, and a live Instagram feed using specific hashtags. The content was updated throughout the show via calls to various APIs, as well as custom content from our server. Compatibility: iPhone and Android phones.

Can you speak to the voting integration of your app?

As for the integration with voting this was a simple but thought out process of course. Let’s look at the MySQL database and tables first. I set up two tables for both voting views (Nominee view and Outfits). So for the Nominee view, I created the ‘nominee_voters’ and ‘nominee_voting’ tables. In the voters table, I am storing the device MAC ID and the nominee ID (this comes from a table with all nominees). This table is responsible for storing a user’s vote count because we only wanted to allow one vote per nominee/outfit. In the voting table, I am storing the nominee ID as well as the vote value (value of 0 = no / value of 1 = yes). The process for nominee voting goes as follows:

  1. User clicks the ‘Yes’ or ‘No’ buttons when asked if they think the Nominee should win.
  2. The MAC ID, vote value (0/1), and nominee ID are then passed to a PHP page to handle the communication to the MySQL database and tables.
  3. The php page checks to first see if the user can vote. If the user has not voted for that nominee yet, a new row is inserted into the nominee_voting and nominee_voters tables with the aforementioned values for each table.
  4. After successful insertion or if the user has already voted, the php page outputs a JSON response for the app to display. If a new record was inserted (i.e. the user voted successfully) the response would be something like ‘{“rsp”:”OK”,”msg”:”Your vote has been counted!”,”percents”:[56,44]}’. If the user already voted for that nominee the response would be: ‘{“rsp”:”ERROR”,”msg”:”You have already voted for this nominee.”}’
  5. The app would then display the response messages (msg value) in an alert as well as update the percentages for yes and no responses for all votes in the database.

The same setup and process happens for the outfit voting except I store the image url as a reference instead of an “outfit_id” since that is the image url.

All calls to the php action handler from the app were made via the HTTPClient object using both POST and GET methods depending on what data was needed.

And of course along with error handling if anything should go awry with the php communicating to mysql, I also have the app calculate percentages of ‘yes’ and ‘no’ votes both on load as well as immediately after a vote.

And how about the Instagram integration?

When it came time for integrating Instagram into the mix, it was very simple. Instagram’s API is easy to use so I just made a REST API call to get all images that were tagged with a specific tag. In this case, the tag was #ImageAwards. The function below was exactly what I used:

Of course one would need an access token after registering their Instagram app (what they call ‘Clients’), but it is pretty straightforward. The API returns a JSON object back and then parsed through that to build a scrollView with the images and usernames.

Why did you choose Titanium for your mobile development?

I’ve been developing with Titanium for about a year and a half, and I simply could not say more about the quality of the platform. Once I started with Titanium, I knew this was something good…something that was going to open up more opportunities for my business and clients. Seeing this happen has been amazing, so it was evident that I use Titanium as the platform of choice. Finding the time and capacity to learn Objective C and/or Java was not exactly ideal since I didn’t have any employees to field existing projects. The only option was to find an alternative platform that allowed for solid results without sacrificing the experience.

What were some of the highlights of Titanium development for you?

The primary benefit that I love about Titanium is the rapid prototyping and development for multiple platforms. The use of one code base is perfect when the client has a wide base of users with both iOS and Android devices. With this project, not only was multi-platform compatibility a factor, but also time. In this case, the timeline was effectively three weeks — starting development the week of January 7th. Knowing that Apple typically takes six to seven days for approval, the pressure was on. Not to mention, I work as a developer for a company during the day.

How long did it take to design, implement, and test?

I proposed a design the last week of December and they loved it. The design, again because of timeline, was done in a week. Development took about 18 days to finish with about three to four hours of work each night, including weekends. I usually test throughout development, but we did final testing the last week.

What resources did you use to learn and develop with Titanium?

Since I was already involved with development before I discovered Titanium, it wasn’t too difficult to understand the syntax of the Titanium platform. Developed around Javascript with an emphasis on object notation (JSON), it didn’t take long to see the power of the platform. I think the challenge was to learn what to use and when to use it and with that, I looked towards the community when I was just getting started. Typically, forums and community boards associated with a specific software products aren’t that helpful. Usually it requires time-consuming searches and/or digging around the web for abstract hints to solutions.

I must applaud the way the Q&A forum is setup on Appcelerator.com. You can really find a solution to a problem or help with issues you are having as a developer — and people are active! That’s the great thing about it. You don’t feel like you’re sending your questions off in a bottle out at sea, hoping for someone to read it.

Do you have plans for updates to The NAACP 44th Annual Image Awards App or future Titanium apps? Care to share some details?

There are plans to either update the existing app or develop a more general one, but we’re still in talks right now. Considering how busy they were with getting ready for the awards, they were awesome clients to work with and I’m looking forward to future projects. As for other apps, I have projects coming up that are pretty exciting and I’ll be sure to keep you posted about those!

What advice do you have for companies that want to delight their users with mobile?

If easy maintenance, reliability, and rapid development are priorities with mobile campaigns, Titanium is the platform to do that. I’ve developed 11 apps with six more on deck and it’s just me…think of what a company can build out with a team!

What inspires you about the future of mobile?

The aspect of mobile development that inspires me the most is the integration of mobile into our daily lives and objects around us. There are so many ways to do this and the opportunities are endless!

Big thanks to Vaughn Dabney for taking the time to give us some insight into his experience and success with Titanium app development. We know the rest of the community, as well as the Appcelerator team ourselves, get excited when we see beyond what is possible with Titanium to what is now reality.

Do you think that you and your Titanium app should be highlighted on the Appcelerator Developer Blog? Send us an email at community@appcelerator.com and we’ll see if you have what it takes to join the ranks of our other featured developers. We hope to hear from you soon!

Vaughn’s Links

Interview with Julian Buss of YouAtNotes

Wednesday, August 8th, 2012

YouAtNotes IBM Lotus Notes has been enabling large companies to provide a collaborative environment for their employees since 1989. Since then, it goes without saying that it has received many updates, one of which enables its use from a mobile device. YouAtNotes, one of the few members of the IBM Design Partner program, has released a platform for Appcelerator Titanium that allows developers to integrate their apps with IBM Lotus Notes. Their solution, Domino to Go, allows developers to synchronize and work with Lotus Notes data. They have also recently put out their own application, NotesBook, which utilizes Lotus Notes via the Domino to Go platform. Recently, Tony Lukasavage of Appcelerator had the chance to sit down with Julian Buss of YouAtNotes, and speak about both Domino To Go and NotesBook.

Interview with Julian Buss of YouAtNotes

So tell us a little bit about NotesBook and Domino To Go

YouAtNotes Domino To Go is a framework for Titanium that enables IBM Lotus Domino and XPages developers to synchronize and work with Lotus Notes data to the mobile App. Without Domino To Go, a Domino developer would have to implement much more code in order to get data out of Lotus Notes via HTTP, or to push data back to Lotus Notes. Furthermore, it’s hard to find a good way to store and work with Lotus Notes data on the mobile device, since Lotus Notes is a NoSQL database and the mobile device uses an SQL database, which is a combination that generally does not fit well.

YouAndNotes

All of these complicated issues are completely solved in YouAtNotes Domino To Go. And furthermore, the Domino To Go API follows exactly IBM’s standard LotusScript and JavaScript API for Lotus Notes, making it very easy to use for Domino developers.

Finally, Domino To Go is designed for offline usage from the ground up. So a developer can use Domino To Go to synchronize Lotus Notes data to the mobile device and work with it on the device when it’s offline. New and changed data will be uploaded back to Lotus Notes automatically when the device is online again.

We feel that offline usage is very important for business Apps, since there are so many situations where you don’t have a network (underway, in buildings, in foreign countries and so on).

So in short: when you want to mobilize an IBM Lotus Notes or XPages application so that it works offline and has the look & feel of a native App, the best solution is Appcelerator’s Titanium and YouAtNotes Domino To Go.

NotesBook is one App that I built with our Domino To Go framework. It solves a huge problem for many IBM Lotus Notes users: the journal (notebook), which is built in Lotus Notes, is not synchronized to the iPhone and iPad by IBM’s standard synchronization software, Lotus Traveler. So there are many users out there who have important information stored in their Lotus Notes Journal that they cannot access from their iPhone or iPad. NotesBook not only synchronizes the content of the Lotus Notes Journal to the iPhone and iPad, it even allows mobile users to create new entries, edit existing ones and download images and attachments.

YouAndNotes

Technically that was kind of a challenge because Lotus Notes Journal entries are not plain text but RichText, which means text formatting, tables, embedded images, attachments and so on. The Lotus Notes RichText format is old and does not follow any known standards; as an additional difficulty, there was no way to change any code in the Lotus Notes journal applications on the user’s side. This means I had to use the standard HTTP JSON and XML services that are build in the IBM Lotus Domino server.

But Titanium and our Domino To Go framework provided me with all the tools I needed to solve these issues and now NotesBook is live in the Appstore with many happy users.

Why did you pick Titanium for your app development?

I was not satisfied with the possibilities of a web app on a mobile device. It’s hard to make web apps look like a native app and the device would always need to be online and web apps do not have access to the device sensors and so on. I tried hybrid solutions like Phonegap that solve the sensor issues, but the look & feel is still far from that of a real native app. Further, I didn’t like the method of coding in Phonegap with all the callbacks.

So I quickly came to the conclusion that native Apps are the way to go. For me, Objective C for the iOS platform has a huge learning curve, since I lost contact to the C language long ago. And coding Objective C for iOS and Java for Android would prevent any code sharing between the platforms. All of this lead to the only logical solution: Appcelerator Titanium.

What were some of the highlights of Titanium development for you?

The fact that I can write native Apps using simple JavaScript is clearly a highlight. It helps me focus on my App rather than on coding issues.

The Titanium API is logical and easy to follow, and since Titanium 2.0 it’s well documented, too. Working in Titanium Studio is very easy, since it’s Eclipse based and follows all the familiar conventions.

Furthermore, I like the Q&A section of Appcelerator’s website, I found a lot of good answers there.

YouAndNotes

How many people worked on it? How long did it take to design, implement, and test?

I created the core of Domino To Go and NotesBook. Now we’re in the process of leading other developers to Titanium and Domino To Go.

What resources did you use to learn and develop with Titanium?

I learned a lot from the Q&A section of the Appcelerator website and the kitchen sink example.

In the early days of Titanium the API documentation was not very helpful most of the time. But, as of today, it’s a very good reference that I’m using often. Furthermore, I read a lot of articles in the Titanium Wiki.

Was your app built with the Community edition of Titanium?

Yes

Do you have plans for updates to NotesBook or future Titanium apps? Care to share some details?

Sure! The more customers are using Domino To Go, the more feedback we get and the more improvements and new features are built into the framework.

Regarding NotesBook, I plan to add a feature to synchronize multiple Lotus Notes Journals to the mobile device, which enables companies to distribute any kind of Lotus Notes documents to mobile devices simply by using the free Lotus Notes Journal application and NotesBook.

Any additional thoughts or notes on Titanium development?

I love it. And I can highly recommend Titanium for every developer that wants to write great native Apps.

What’s your background as a developer, particularly mobile development?

I studied computer science and made my degree back in 2000. Currently, I’m in the IBM Lotus Notes and Domino business for which I founded my company, YouAtNotes, with two partners.

Working for YouAtNotes, I developed various sophisticated software products, such as a workflow and CRM solution for the Lotus Notes client. More recently, I engaged in the web application business with IBM Domino XPages.

I played with multiple platforms to create mobile web apps (IBM XPages has a lot of cool built-in support for that), but I missed offline functionality and the native look and feel. After some research, I stumbled upon Titanium. I tried it and fell in love.

My company’s head office is the beautiful city of Hamburg, North Germany.

In my spare time and during vacations, I’m a captain cruising the Baltic Sea with my family (wife and two kids). In that role, I’m diving into marine electronic and computer technology, which is fascinating, too.

1.) Domino To Go, the Titanium framework to mobilize IBM Lotus Notes and XPages Apps: http://youatnotes.com/dominotogo

2.) NotesBook App for iPhone and iPad, to bring the Lotus Notes Journal to the iPhone and iPad: http://youatnotes.com/notesbook

3.) Like us on Facebook: http://facebook.com/YouAtNotes

4.) Google Plus: https://plus.google.com/107818550355220576809/posts

5.) My blog: http://julianbuss.net

Big thanks to YouAtNotes for taking the time to give us some insight into their experience and success with Titanium app development. We know the rest of the community, as well as the Appcelerator team ourselves, get excited when we see beyond what is possible with Titanium to what is now reality.

Do you think that you and your Titanium app should be highlighted on the Appcelerator Developer Blog? Send us an email at community@appcelerator.com and we’ll see if you have what it takes to join the ranks of our other featured developers. We hope to hear from you soon!

NBC Launches New iPad App … Powered by Titanium

Thursday, June 23rd, 2011

Yesterday NBC launched a new, free, ad-supported iPad portal application that places fans’ favorite NBC shows in their hands — including features such as customization, thousands of video clips and highlights including some of the hottest SNL digital shorts from the past, as well as preview clips, photos, recaps of the latest series episodes, creative games, previews of upcoming shows and more.


Download the app for free on iTunes at http://itunes.apple.com/us/app/nbc/id442839435?mt=8

NBC chose Titanium as their development platform in order to create engaging, highly personalized user experiences. They had built “Jay Leno’s Garage” and “Late Night with Jimmy Fallon” iPhone apps on Titanium earlier this year. These first two apps set the stage for the rapid pace of innovation that would be required for their iPad project, the NBC Portal.

With Appcelerator as their mobile partner, NBC has built a mobile media framework that can scale to support hundreds of new apps. They have a true roadmap for mobile.

For more info visit http://www.appcelerator.com/nbcuniversal/.

Livetanium

Friday, December 3rd, 2010

We were very impressed to find this community-driven open source project, Livetanium, which allows for real-time editing of Titanium source, complete with deployment to the iPhone emulator. The project was pioneered by team krawaller, developers of the Titanium-based word game Golingo (buy it!). Says Jacob Waller:

Made out of titanium, nodejs and unicorns, our Livetanium library lets you code Titanium Mobile apps and see changes in realtime. It uses a nodejs server to pipe filechanges to the app, and these changes are applied in realtime. It’s iPhone only at the moment, but works in both the simulator and on the actual device. You can see a quick walkthrough here or check out the source.

Please try it out and let us know what you think!

Great work guys! You can check out the video they posted by following the link below:

Using Spazcore for Twitter Authentication

Friday, July 23rd, 2010

Today I wanted to call out one of the more interesting projects happening on Titanium Desktop, and show how you can leverage its core library in your own Titanium Desktop projects. The Spaz microblogging client is one of the most popular open source Twitter (and StatusNet and Identi.ca) clients available today, and developer Ed Finkler (follow him on Twitter here) is leading the Spaz project in a port of the desktop version from Adobe AIR to Titanium Desktop, and to eventually bring Spaz to iPhone and Android handsets via Titanium Mobile.

With the Spaz project already running on the desktop and webOS platforms, Ed wisely decided to separate out core logic into a centralized library which he calls Spazcore. Spazcore has many useful features which you can use today in your Titanium Desktop applications, not least among them a facility for making xAuth authenticated requests to Twitter through a nice JavaScript API.

If you haven’t tried implementing xAuth (or oAuth) in your applications, SPOILER ALERT: it’s not trivial. xAuth is a much better fit for desktop and mobile applications, since you are able to skip the browser re-direct song and dance and exchange a username and password for a token that you will use to authenticate subsequent requests. xAuth uses the same header information and request signatures used by oAuth, however, so you still have a fair amount of work to do as the developer to sign your API requests properly. Luckily for us, Ed has figured this out already and abstracted it out into Spazcore, so we can very quickly and easily create a desktop application which uses xAuth for authenticated access to Twitter.

Your first step is to create a Twitter application at dev.twitter.com and request xAuth permission from Twitter, a process described on their developer site here. Essentially, you will send an e-mail to the Twitter team providing information about your application (I had to provide some screenshots for one app as well). After a day or two, you will be notified that your app has been blessed to access Twitter via xAuth.

Next, create a Titanium Desktop application to test out your new Twitter xAuth creds. After your project is created, you’ll need to grab the JavaScript dependencies you’ll need for Spazcore, including the library its self and a version of jQuery, upon which Spazcore currently depends. If you’re running a system that has curl available on the command line (like OS X or many Linux distros), fire up a terminal window, navigate to the Resources directory of your new Titanium Desktop project, and execute the following commands to quickly download the necessary dependencies (or just download these files and manually copy them):

curl http://code.jquery.com/jquery-1.4.2.min.js > jquery-1.4.2.min.js
curl -L http://bit.ly/spazcore-tutorial > spazcore.js

As always, we have a Gist available here which implements a simple index.html you can drop in to your new project to see Spazcore authentication in action (the complete example, adapted from Ed’s Spazcore examples is embedded below the tutorial). I’ll quickly illustrate some of the high points of the Spazcore API:

Spazcore configuration and dependencies

After including the jQuery and Spazcore libraries via standard script tags in the head of your HTML document, we will declare some global variables that we will use when creating an authenticated Twitter session:

// Include Twitter configuration - your keys must be approved for xAuth.
// More info: http://dev.twitter.com/pages/xauth
var SPAZCORE_CONSUMERKEY_TWITTER = 'consumerkey';
var SPAZCORE_CONSUMERSECRET_TWITTER = 'consumersecret';

Adding the Twitter service to Spazcore

The next step is configuring Spazcore to use our oAuth credentials for a connection to Twitter:

SpazAuth.addService(SPAZCORE_ACCOUNT_TWITTER, {
  authType: SPAZCORE_AUTHTYPE_OAUTH,
  consumerKey: SPAZCORE_CONSUMERKEY_TWITTER,
  consumerSecret: SPAZCORE_CONSUMERSECRET_TWITTER,
  accessURL: 'https://twitter.com/oauth/access_token'
});

Creating an authorization “pickle”

As we mentioned before in our brief discussion of oAuth/xAuth, we are essentially exchanging a username and password combination for a token (or set of tokens, more accurately) that we can use to sign requests to to the oAuth provider (in this case Twitter) for subsequent requests for protected data (or to create/modify data on behalf of the user). Spazcore simplifies this process for us by accepting a username and password from our application, and allowing us to save our set of tokens as a simple string (called a ‘pickle’) that we can use for future authenticated requests:

var auth = new SpazAuth('twitter');
 
// result is a boolean indicating success of the auth request
var result = auth.authorize('someusername', 'somepassword');
 
// You can save this authenticated session in an authPickle string
// which contains access token information, not the actual username
// and password combo, for later requests.
var authPickle = auth.save();

Do the Twitter!

With an authorized token all set up, we are now ready to talk to Twitter. To do this, we will create an instance of an object called SpazTwit, which implements an API we can use to execute various functions against Twitter. There aren’t any docs for SpazTwit that I could find (read on after the tutorial to see how you can help with that), but you can inspect the API in the source code (which is commented well enough to get the gist of what’s going on). The SpazTwit implementation starts at about line 11122 of the uncompressed Spazcore library I had you download – the interesting bits for the external API start getting added to the SpazTwit prototype at about line 116356. In the example below, we will grab the home timeline (which would normally appear on the web at http://twitter.com/yourusername):

// Load OAuth from the serialized string we got earlier 
// (or maybe we saved it in a database or property):
var auth = new SpazAuth('twitter');
auth.load(authPickle);
 
//Create a SpazTwit instance with the auth data we have
var twit = new SpazTwit({'auth':auth});
 
//Make a Twitter API call!
twit.getHomeTimeline(null, 200, null, null, function(timeline) {
  //do something with the results of this call
}, function() {
  //do something if there is an error!
});

Here is the full example in action:

Give Back!

Ed, like every good, long-suffering open source maintainer, does a lot of the heavy lifting for Spaz himself and could use your help. If you end up using Spazcore, please consider contributing either source code, documentation, or moral support to Ed as he continues his development efforts. Like us at our own #titianium_app channel, Spaz contributors and users often hang out on IRC at irc.freenode.net in the #spaz channel. Here are some of the other places where you can find further information on the Spaz/Spazcore project, and hopefully help out yourself:



Also, you can reach out to Ed directly and follow his exploits on Twitter. As promised, the fully functional example app is included below. Big thanks to Ed for this library, and hopefully it will be of use on your next Titanium Desktop project!