Appcelerator Blog

The Leading Resource for All Things Mobile

Building an iOS and Android conference App with Appcelerator

1 Flares 1 Flares ×

The following blog post was originally published on ricardoalcocer.com.


When I set out to write my book Build native cross-platform apps with Appcelerator, I spent a somewhat large chunk of the time thinking about which apps I could build that not only showcase the capabilities of Titanium and Alloy as a native cross-platform framework, but that could also be useful in a real-life scenario.

Some years ago, I was involved in organizing, or participated at Wordcamps, Barcamps and meet-ups of all kinds. This type of events happen all the time, but not everyone has access to build a full-blown app for a them. This got me thinking: there’s no good, cross-platform template or example for a conference app. I should build one!

This app could become very complex in no time, so I needed to manage my expectations; I needed to pick the features that were absolutely necessary for ANY conference or meet-up, and provide a solid foundation for anyone to build on top of. I settled for:

  1. Event schedule with support for multiple days, concurrent talks and speaker bio
  2. Information about the venue with integration with the device’s map
  3. An area for reading the conversation happening on Twitter based on a given hashtag
  4. A link for YouTube videos that could be used to provide both pre-event videos, as well as post-event videos, making the app useful even after the date of the event

Having settled on the features for this app, I then had to think about UI/UX. I wanted to build this app with three things in mind:

  1. Use only native components, the same way you’d build this if you were using Objective-C and Java
  2. Keep a singe organized, maintainable and extensible codebase
  3. Add support for localization: if you install the app on a device using Spanish as its default language, the app will be displayed in Spanish

I did some research, specially looking at the apps for the WWDC and Google I/O, and my real challenge was to be able to build an app that uses the native UI/UX conventions of each platform, even if these were different. I’m happy to share with you the results screen by screen.

The Main container

I decided to use a Tab-based interface. At one point I was tempted to use a Slide-in menu, but there weren’t that many menu options, and quite honestly, you shouldn’t use a visual paradigm just because it’s hot and everyone’s using it: there needs to be a real reason for it, and in this case Tabs worked perfectly. Also notice on the screenshots below that I’m representing the Tabs differently on Android, using only images and no text. While on iOS tabs have an image with text underneath, Android allows you to use text-only, text and image, or image only. I chose the latter.

The Schedule Tab

This screen was particularly interesting. In order to provide an easy in-tab navigation, I decided to use iOS’ segmented control, exposed in Titanium by the TabbedBar object. On Android however, the equivalent control is the ViewPager. The ViewPager is not part of the Titanium core, but fear not, there’s a module for that, which you can find at https://github.com/dreamlearn/viewpager.

schedule

The syntax for using the module is really easy:

var tabs = require('com.navid.tabs');
var tabs = tabs.createPagerTabs({
    current: 0,
    tab: {
        indicatorColor      : Alloy.Globals.viewPager.indicatorColor,
        backgroundColor     : Alloy.Globals.viewPager.backgroundColor,
        alignment           : tabs.ALIGNMENT_LEFT,
        shouldExpand        : true,
        color               : Alloy.Globals.viewPager.color,
        upperCase           : Alloy.Globals.viewPager.upperCase
    },
    views: [
        {
            title: L("day1_caption"),
            view: Alloy.createController('day1').getView()
        },
        {
            title: L("day2_caption"),
            view: Alloy.createController('day2').getView()
        },
        {
            title: L("day3_caption"),
            view: Alloy.createController('day3').getView()
        }
    ]
});

The Venue Tab

This tab was really straight-forward. For opening the maps app and the dialer, Titanium has the openURL function. If you send a phone number to this function, the phone will automatically open the dialer with this number. If you on the other hand specify a URL to a Google Maps page, the phone will automatically open the Maps app (if it’s installed), otherwise will open a browser in the specified url.

venue

The Conversation Tab

The conversation Tab is pulling data from Twitter. To achieve this, I’m using the codebird.js library for Twitter. This library was designed for the browser, but there’s a version modified to work with Titanium and using Titanium’s HTTP network calls.

conversation

I didn’t want to get into pull-to-refresh just to keep the code simple, but there’s an Alloy Widget that could be very easily integrated.

The Videos Tab

The videos Tab is very similar to the previous one, but this time pulling data from Youtube. For YouTube you don’t need a special library. Youtube exposes data via an HTTP interface, so in this case I’m simply calling https://gdata.youtube.com/feeds/api/users/appcelerator/uploads?alt=json, parsing the response and displaying it as a vertical list.

Honorable mention goes to jsoneditoronline.org, an awesome online tool for analyzing JSON data.

videos

There’s a lot to building this app, practically impossible to explain in a single blog post. In fact, my original plan was to explain the app in Chapter 4, and I had to split it into three chapters:

  • Chapter 4 about building the foundation for the app, adding localization support and working with Android ActionBar Styles
  • Chapter 5 about using local databases for the Schedule Tab, explained using three different techniques: Persistent Properties, SQLite and Alloy Models
  • Chapter 6 for Web Services and YouTube integration.

I’m extremely happy with the outcome. If you thought that Titanium-based apps could not deliver native UI and UX from a single code-base, here’s your proof. I’m sure that not only this app is an excellent example of how the cross-platform problem should be approached with Titanium, but also contains many interesting pieces that will be useful for other apps.

1 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 1 Email -- 1 Flares ×

7 Comments

  1. Hi Ricardo,

    I’m glad to see that someone is writing a book specifically about Alloy. I just started learning Appcelerator a few months ago and I’ve been frustrated with the lack of Alloy training materials. It seems most of the books out there are solely about the “old way” of building apps with Titanium.

    The Appcelerator Wiki is actually pretty light on Alloy samples. The best thing I found was the TCD Training repository on GitHub. https://github.com/appcelerator-training/tcd_training It has the instructor’s notes (as HTML docs) and some sample applications. Before your book, the most complete Alloy sample I found was the AlloyHunter sample in that repository.

    I think your app looks good visually, and the links for the modules are very helpful. I’ll definitely check out the modules you recommended and I’ll look at your book again when it’s done.

    One suggestion – You may want to add a unique logo and startup screen to your app as one of your tutorials. BTW, I recently ran across a website called Ticons (http://ticons.fokkezb.nl/) which saved me a ton of time with that. I was dreading the task of creating all of the image variations with PhotoShop, then I ran across that tool. It was a huge time-saver. There is also an NPM installer for Ticons to generate icons on your local machine.

    I was wondering: Are you going to open-source your final code on GitHub? That would be a terrific contribution to the community.

    Thanks,
    Kevin

    • Ricardo Alcocer

      Hi Kevin. Thanks for your kind words.

      The code will be made available shortly as soon as I get the go ahead from the publisher.

      R

    • I have a book on Alloy coming out in November, it will also cover Appcelerator Cloud Services. All source code from the book will be open sourced also http://amzn.to/1qGOCJf

  2. Chris

    Hi Ricardo,

    i would appreciate, too to see the whole source.
    This looks very great and could be helpful for many scenarios.

    Greetings from Cologne and many thanks for this post!
    Chris

  3. Thanks Ricardo,
    I look forward to your book and looking through the example code. One thing you might want to change is the way you’re getting youtube information for the video tab. The example currently uses the deprecated v2.0 api which I believe will stop working April of 2015 (https://developers.google.com/youtube/2.0/developers_guide_protocol). The youtube v3.0 is a pain to use but It’s what google is supporting.

    Thanks Again,
    Kwab

  4. Glenn Bennett

    Are you planning on releasing the source for this app now that the book does not appear to be coming out?

Comments are closed.

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
1 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 1 Email -- 1 Flares ×