Moods, Videos

Narcissus, segment your followers

13 Comments 31 October 2011

Narcissus, segment your followers

UPDATE: Twitter modified its API in the night. The desktop version has been updated (1.0.2). I’m still waiting for Apple to review my update 1.0.2. 

I’ve been working on a Flex mobile application called Narcissus, and I finally found the time to finalize and publish it on the App Store. Narcissus is a free application, available on the App Store for iPad users, and on your desktop thanks to the Adobe AIR runtime. Narcissus can analyze and segments the followers of a Twitter account. Inspired by Google + circles, Narcissus categorizes your followers in circles based on their activity on twitter (the number of tweets they sent) and their influence (the number of followers they get). It helps to understand who’s following you, how active your followers are on Twitter  and how influential they are. If you want your content to be re-tweeted and seen by a maximum of Twitter users, you’ll discover that you just need to focus on few people of your network. I’ve recorded a video that showcases the basic features of Narcissus.

This application has been developed with the Flex 4.5.1 framework and Flash Builder. It performs very well on all platforms (iPad, Android and the PlayBook), that’s why I want to share some tricks I’ve learnt building this app.

Design Driven Development

I’m clearly not a designer, but as I was the only person involved in this project, I forced myself to use the Design Driven Development methodology. It implies designing the full user-experience before writing one single line of code. As this project is a “data-visualization” application, the design process was obvious. The goal of a dashboard is to transform data into information. I know the data I can get from Twitter and I know what’s the user problem which is in this case: “how can I know better who’s following me on Twitter to be more efficient on my social network ?”. The UI of the application must bring solutions to that question. As it’s a dashboard application, I decided to use the “drill-down” strategy: start with a global view (using circles) and give the ability to drill-down (analyze the list of followers per category and get the details about a follower). I think I spent at least 4 hours in Photoshop to design the main screen, place the elements, design the circles, the callout popups, the icons… Then the second step is “what’s the best UI architecture to serve this design?”. I rapidly decided to use the new ViewNavigator class of Flex 4.5 and the IconItemRenderer to get the best performance on tablet devices. So I’m using a classic <s:Application> root tag that contains eight <s:ViewNavigator> components, one per circle. I spent two days on coding the application. Then I tested it on an iPAD, optimized the code (mainly my database code) and fixed some bugs.

Optimizing SQLite calls

When you test your application on your PC, SQLite always acts very well. When Narcissus retrieves the list of followers for one account, it needs to save all the ids in one table. So, if you analyze an account that has 2000 followers, it means that you need to fire 2000 INSERT SQL queries. On the desktop, it’s okay, it takes less than one second to Adobe AIR to save these 2000 lines. On the iPAD 1, it’s another story. It takes more or less 10 seconds, and it can freeze the UI. Very bad user-experience. That’s why I decided to use SQLite transactions. If you need to execute a batch of INSERT, DELETE or UPDATE queries, always use transactions. In other words, if you need to execute SQL queries that don’t return a result, you can use transactions. It reduced the SQLite processing time by 90% in my case. Here is a link to the doc that explains how it works, and the code I’m using in the application.

var sqlS:SQLStatement = new SQLStatement();
			sqlS.sqlConnection = sqlc;
			sqlS.text = "INSERT INTO "+ tableName+"(idUser,screenName,name,url,description,circle,nbFollowers,statusCount,picture) VALUES (@IDUSER,@SCREENNAME,@NAME,@URL,@DESCRIPTION,@CIRCLE,@NBFOLLOWERS,@STATUSCOUNT,@PICTURE)";
 
			sqlc.begin();
 
			for (var i:int = 0; i < arrayFollowers.length; i++)
			{
				objUser = arrayFollowers.getItemAt(i);
 
				sqlS.parameters['@IDUSER'] = objUser.idUser;
				sqlS.parameters['@SCREENNAME'] = objUser.screenName;
				sqlS.parameters['@NAME'] = objUser.name;
				sqlS.parameters['@URL'] = objUser.url;
				sqlS.parameters['@DESCRIPTION'] = myDescription;
				sqlS.parameters['@CIRCLE'] = objUser.circle;
				sqlS.parameters['@NBFOLLOWERS'] = objUser.nbFollowers;
				sqlS.parameters['@STATUSCOUNT'] = objUser.statusCount;
				sqlS.parameters['@PICTURE'] = objUser.picture;
				sqlS.execute();
			}
			sqlc.commit();

I’m also using incremental savings (auto-save) for performance and user-experience reasons.

 

How to persist simple parameters

I wanted to persist the settings (activity and influence thresholds) in a cleaner way than using a SQLite database. I started using the classic File API. The only directory that works on tablet devices is the Documents one. Here is some code that works both on desktop and tablet apps:

var file:File = File.documentsDirectory.resolvePath('settingsNarcissus.inf');
	if (file.exists) file.deleteFile();
 
	var fileStream:FileStream = new FileStream(); //create a file stream
	fileStream.open(file, FileMode.WRITE); // and open the file for write
	fileStream.writeObject(object); //write the object to the file
	fileStream.close();

But I’m not a big fan of the Files approach. That’s why I decided to use the Persitence Manager API. This class is so easy to use and so efficient!!! Here is how you can easily save and load settings from anywhere in your mobile project:

//SAVE
 
var object:SettingsObj = new SettingsObj(thresholdTweets,thresholdFollowers);
 
var persistenceMan:PersistenceManager = new PersistenceManager();
	persistenceMan.setProperty("settings",object);
	persistenceMan.save();
 
//LOAD
 
var persistenceMan:PersistenceManager = new PersistenceManager();
 
	try{
		var object:Object = persistenceMan.getProperty("settings");
 
		thresholdFollowers = object.savedThresholdFollowers;
		thresholdTweets = object.savedThresholdTweets;
	}catch(e:Error){
		//error management if empty
	}

Animations

Some developers asked me how I managed the animations and the transitions with the circles. For the animations, I’m simply declaring basic MXML sequences. When I get the profile image picture of a Twitter account, I’m assigning it to a circle, and then I change the xTo and yTo coordinates of the ‘moveProfile’ object. Here is how I declared the sequence.

<s:Sequence id="seqAnimationProfile" target="{profileImageComp}" effectEnd="seqAnimationProfile_effectEndHandler(event)">
			<s:Fade  alphaFrom="0" alphaTo="100" duration="500"/>
			<s:Move id='moveProfile'  xFrom="480" yFrom="380" duration="800">
				<s:easer>
 
					<s:Sine/>
 
				</s:easer>
			</s:Move>
			<s:Fade alphaFrom="100" alphaTo="0" duration="500"/>
			<s:Move  xTo="480" yTo="380" duration="50"/>
		</s:Sequence>

Regarding the circles, I’m using the default transitions of the ViewNavigator object. To enjoy the background image, I’m placing eight ViewNavigator with a transparent background which load views with transparent background. Just set the backgroundAlpha property to 0 in the ViewNavigator tags AND in the View tags. The circles are also animated. To do so, I’m playing with MXML graphic properties. The static parts are PNG files (the background and the reflection effet at the top of the circle), the animated part is a Spark Graphic component. Here is the MXML code for a circle:

<s:Image horizontalCenter="0" source="assets/images/circleBack.png"   verticalCenter="-20"/>
	<s:Graphic id="theCircle"  version="2" horizontalCenter="0" verticalCenter="-20">
		<s:Ellipse height="{radiusCircle}" width="{radiusCircle}">
			<s:fill>
				<s:SolidColor color="{data.colorCircle}"/>
			</s:fill>
		</s:Ellipse>
	</s:Graphic>
	<s:Image horizontalCenter="0" source="assets/images/circleReflect.png" verticalCenter="-87"/>

To animate the circles with some easing, I declared a Resize effect.

<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<s:Resize id="fxResize"  duration="500"  target="{theCircle}">
			<s:easer>
 
				<s:Sine/>
 
			</s:easer>
		</s:Resize>
 
	</fx:Declarations>

Leveraging the MXML tags of the Flex framework, you can very quickly build a professional iPAD application. Narcissus has been immediately approved by Apple on the App Store.

Links

If you want to use Narcissus on your desktop (MAC & Windows), install this AIR application:

http://www.riagora.com/narcissus/Narcissus.air

If you have an iPAD, then you can find it on the App Store:

http://itunes.apple.com/us/app/narcissus/id472974421?mt=8

Feel free to add a nice review on the App Store. If you don’t like the app, don’t say anything :)

Narcissus is just a small app that showcases how creative you can be with basic Flex components on tablet devices. I’m working on the Android version (I just need to fix some relative coordinates stuff to accept all screen resolutions).

I hope you’ll like it. Enjoy  !

 

Post to Twitter

Your Comments

13 Comments so far

  1. Ecevit says:

    great job!

  2. Je viens d’essayer la version Desktop, il y a un problème de sizing, ou alors, l’interface n’est pas prévue pour du 100% (tronquée par le bas).
    Sinon, j’ai pas trop compris le principe de l’application, faut que je l’utilise un peu plus ^^

    Fab
    PS: ton background énorme se répète pas du tout sur la page de présentation (http://www.riagora.com/narcissus/)

  3. Tom Chiverton says:

    I pointed out that nasty SQL performance bottle neck in AIR many years ago, nice to see it’s improved slightly since then though : http://rachaelandtom.info/content/performance-gotcha-airs-local-database

  4. Hugo says:

    The use of SQLite is in fact to be very carefull and could make a good app slower (I have learned this at my cost).

    * Use transactions for multiple inserts/updates/deletes
    * Specify the database name (normally main) in the selects
    * Use async selects and retrive data sets rather than all at once

    In the end this make a difference between a very slower mobile app or performante app.

  5. Salut Michaël,

    I just want to say that you did an awesome job. The design is also great.

    I have a small problem… the app stops at follower 57/91 on my twitter… :( so I really cannot have complete stats.

    Is there any log file to check if something is wrong with my twitter account or one of my followers, or it;s just a small bug in the software :)

    Anyways I am a huge fan.

    —–
    Adrian

  6. admin says:

    Hi Adrian,
    thanks for the nice feedback. I think that it also shows how limited the Twitter API is. Sometimes, it takes forever to get the picture image of an account… I should manage my own timeout parameter. Also, I cannot send more than 350 requests to twitter per hour, that’s why retrieving the accounts is so slow. Otherwise, you would quickly reach the Twitter API limitation.

  7. derRaab says:

    Hi Michael,

    it was nice to meet you in person at LUX bar friday evening. I guess we’ll meet at flexlabs in february?

    Keep up the good information stream… Thanks for blogging!

    By the way – I’m posting here because I wasn’t able to find your email address. ;)

    Cheers from Berlin!

  8. Thanks Michaël, that makes sense now… :)
    Even if twitter api is limited I still discovered some nice aspects on my followers using your tool. Great Job! :)

  9. Eduardo says:

    Thanks for the tips! Was your SQLite connection an asynchronous one, or are you also able to gain performance through transactions if you run your inserts with a synchronous connection?

  10. JC Lang says:

    Salut “Dr Mike”.
    Alors vous faites pas le pont chez Adobe? :)
    Merci pour le super-post.

  11. Hugo says:

    Eduardo,

    I have done several tests with thousands of records in sync mode.

    With transactions take less than 50% because all the data is prepared in memory and in the commit command is persisted in the file (one access to the SD only).

  12. joe says:

    nice looking app. Anyway, how do you skin the scrollbar in mobile app?


Trackbacks/Pingbacks

  1. Narcissus, segment your followers | RIAgora « marcusjpotter - November 30, 2011

    [...] Narcissus, segment your followers | RIAgora. [...]

Share your view

Post a comment

Who am I ?

I'm Michaël CHAIZE, Adobe Flash Platform Evangelist based in Paris. I'm a big fan of Rich Internet Applications and I promote the Flash Platform in the Enterprise world.
You can follow me on twitter: http://twitter.com/mchaize

Magazine

Follow us on Facebook

© 2014 RIAgora. Powered by WordPress.

Daily Edition Theme by WooThemes - Premium WordPress Themes