Always Learning

Posted by admin_pnp | about 4 years ago

The TigerSpike development process


App overview


The Pearson Plug & Play application was envisioned as a showcase to show off the newly available FT Press APIs by means of new and upcoming technologies.


Instead of choosing to write a native app (iOS, Android), our plan from the start of the project was to create an App that would be compatible with as many mobile devices as possible. This led us to choose a HTML5 implementation using a cross platform development framework.


One of the major highlights for this project was the idea of making the dataset available for reading whilst also adding a social element to it making the reading experience more interactive.


Initially the device was intended for the Blackberry Playbook due to it being so new in the market and having very good HTML5 support. Subsequently we instead chose to target Android Honeycomb devices because of the recent push of Android into the tablet market with Honeycomb OS and the superior quality of devices that will be emerging in the market in the near future. Larger tablets also give the designers of the App more screen space which allows a more natural reading experience.


Brainstorming the App


It was decided during our initial brainstorm for the Plug & Play App that our focus should lie in deciding how to present the Data Set so that the reading experience is as intuitive and natural as possible.


Instead of creating another standard, static PDF-style e-Reader our vision was to employ the absolute latest tools within web development in order to create a ground-breaking, innovative e-Reading experience that allows users to interact with the data, easily navigating and browsing through topics and authors relevant to their interests and subsequently displaying the chosen article in a neat, uncluttered way.




Facebook was chosen as our social element for the project, partly due to its popularity and power as a promotional tool, but mainly due to the recently established OpenGraph API which allows us to integrate a social web of content that users can navigate through, using ‘Likes’ as a popularity score for each book.  




After contemplating around the concept of employing Facebook ‘Like’s and the need for a clear, navigational user interface we decided on using “weight” to determine which articles should be presented to the user first. It was equally decided that topics and authors should include “weight” in order for content to be displayed according to topic/author preferences.





Developer Investigations


The next step in our process was for the development team to conduct some research on new available technologies, and subsequently determining if/how we could integrate relevant features of those technologies in the app-build.


The first thing we did was look into using HTML5 and CSS3 (an excellent set of guides and tutorials for beginners can be found at Dive Into HTML5). We also found a few examples of fun things you can do with HTML5 such as an interactive twitter cloudand an interactive map to our solar system.


We quickly realised that we would need a solid wrapper app to hold all of our HTML5 and CSS3 development, and subsequently progressed to look at ways of migrating onto Android devices.


We came across several alternatives as to how to deploy our app. There was the alternative of making a wrapper app ourselves with custom methods to reach the native elements we wanted to take advantage of. However we decided that this would defeat our goal towards making a flexible app that could potentially be deployed to other devices with ease. Also this would be re-inventing the wheel in many ways, as there are already several very effective open source alternatives to creating a wrapper app.


Two of the main options for creating a cross platform mobile application from one code base are PhoneGap and Appcelerator Titanium. We chose PhoneGap due to its open source nature and its lightweight implementation.


Wire framing


Wire frames for the project were then drawn up to plan out the app and all its features. During this process the technical implementation was planned out and the weighting system finalised.




Each article will be connected by the keyword metadata associated with it and the umbrella topic that contains it. When a user reads an article a weight is given to each if its keywords. The weighting of these keywords then add weight to all other articles associated with them.

The app will also regularly ‘scrape’ Facebook for information on each article to find out if any new users have “Liked” them, which consequently improves the “weight” of each book.

This significantly means that books that are more relevant to their associated Topic/Author will bubble to the top, so that over time the App automatically learns what the user enjoys to read. It also means that more popular articles will end up closer to the top of the list and are hence more likely to be read.

It is through this ground-breaking new concept of semantic filtering that we hope to provide the App users with a more customised, personalised and enjoyable reading experience.








The next stage of the process involved creation of design based on signed off wireframes. We also created App’s visual identity and branding with contemporary look and feel and visually simple yet strong App’s logo


See the app designs here 




The development process for this App threw up a few unexpected hurdles due to the relatively new concept of using HTML5 and CSS3 on mobile devices. Hopefully we can give you a few hints and tips to get around the issues we faced during our development process. We’ll also go over how to use and access the FT Press API to access their content. 


Our most obvious first problems were the performance-related issues associated with employing HTML5 on Androids implementation of a webkit browser. Initially we aimed to use the Canvas element in HTML5 for the majority of our animations and the visuals for our app. However the support of the Canvas element on Android is not optimised for this and lead to the animations being extremely jerky.  This was solved by using CSS3 animations wherever applicable but even this turned out to be jerky on mobile browsers.


Our solution to this residual performance issue turned out to be a very simple one, we forced the CSS animations onto the device’s graphics processor by using:


            -webkit-transform: translate3d(0, 0, 0);


Secondly we found that using Facebook as you would in a native app is quite difficult from an App based in a web-view. A Native mobile app has an application ID to fire off requests with, however in a web based application the calls to Facebook to “Like” and Share articles require a static URL to call back to.

In our case we didn’t have a static URL and we didn’t have access directly to the native Facebook framework so we ended up making a lot of out-calls to the Facebook OpenGraph in raw HTTP.


Through our development time we found that these were the only two really big hurdles that we faced. The major problem with current HTML5 mobile development is that there isn’t as much documentation available as there is for native applications.


One of the most useful tools we discovered for a mobile web environment was iScroll. Although originally optimized for iOS devices we used this in all instances where we needed to scroll through information smoothly. The process of applying it was as easy as adding a new iScroll variable, giving it the name of the element to scroll and adding <lu> tags to the <div>


var articleScroller = new iScroll('wrapper', { snap: 'li', momentum:true, hScrollbar:false, vScrollbar:false });


In this case the iScroll snaps to the <li> elements that it can find. We used this to snap to the articles at the top of our list and to the top of our topics stack.


$('#articles').append('<div id="wrapper"><ul>');


<li><div class


Although the Pearson documentation for the API covers all bases, we particularly found the search functionality useful.  Although this isn’t frequently used as a simple way to find topics and articles, we preferred cutting our overheads down by using the processing power of the servers instead of implementing it on the Device’s search functionality.


One of our major concerns towards the end of the project was load times, due to the fact that we were trying to scrape as much information from Facebook as possible. Unfortunately you can only make 600 calls every 10 minutes to Facebook, which we nearly over-exceeded whilst trying to collate all the “Likes” associated with FT Press articles.


Blog Categories: 

No votes yet


davidgibbson's picture
 Gibbson |

I don’t have much knowledge in building app. But I am very much interested in this field. Actually from this post I am able to know how to create an app using the FT press API. Thank you so much for sharing this post here! directv family package

deadrocker1's picture
 Smith |

I am sure the latest updates available shall be much more helpful to you than ever before. More options would be available for you these days with it and I am sure you will be able to make good use to it. tent rentals los angeles

JABRAFAN's picture
 FAN |

That can job short-term, however , it’s no possible long-term choice meant for individuals who want to get the real key an individual exceptional girlfriend these can’t avoid wondering about.

deadrocker1's picture
 Smith |

Now one has said this is going to be an easy job. I am sure you would have understood that by now. It will be so much fun to do something like this for sure. The thrill of it alone shall attract a lot of people. [ upper back spine pain ]

kingkhan's picture
 khan |

Superb posting i have to express plus with thanks for any information and facts. Instruction could be a sticky matter. Having said that, continues to among the list of main themes one's time frame. I actually love a person's posting plus look ahead to extra. lean belly breakthrough reviews

kingkhan's picture
 khan |

I actually don’t find out know a amount with enable that your chosen blogs and forums give. I believe, I recognize not wearing running shoes them weren’t for your personal blogs and forums I will can’t you create determined to support by using this works. The following company presents a it has the term plus Everyone loves toughness they give you. Thanks a ton!

muneer ahmed's picture
 ahmed |

McQueen Rentals provides a fleet of cars for Uber car rental and Grab car rental services in Singapore. Separately we are also involved in the car leasing and limousine transfer business. We are committed to both the Uber and Grab ridesharing platforms and are responsive to our hirer's needs. Contact us for a competitive quote today. Uber car rental Grab car rentals

muneer ahmed's picture
 ahmed |

This particular is usually apparently essential and moreover outstanding truth along with for sure fair-minded and moreover admittedly useful My business is looking to find in advance designed for this specific useful stuffs… office 2016 pro mac

benjohnson's picture
 Johnson |

This post shares an important matter about building an app using the FT Press API. I think this is the right spot to share such information. I am really impressed on this article. I am expecting more on this blog! medical billing medisoft

Davidkil's picture
 kil |

Which may functionality short-term, even so it’s just not a realistic long-term remedy with regards to adult males who would like to be on this 1 one of a kind person they can’t halt thinking of. Jual Laptop Murah

micheal hatrick's picture
 joe |

This is an excellent post I have seen thanks share it. It is really what I wanted to see hope in future you will continue for sharing such an excellent post.

muneer ahmed's picture
 ahmed |

I'm keen on that you'll be at ease your web site plenty of to help possibly look at different web-sites with your blog site. When i tried out http: //wwwdissertationworldbiz/ intended for the dissertation and it also definitely served. Come on, man, normally I can do the guidance consistantly although on this web page, was formerly adequate. bus simulator

muneer ahmed's picture
 ahmed |

I enjoy you're comfortable with your web blog more than enough so that you can sometimes take a look at alternative web pages against your site. I actually used http: //wwwdissertationworldbiz/ to get this dissertation but it seriously made it simpler for. Get real, usually Need to recurring this information regularly nonetheless because of this web-site, once was plenty. scary maze game

muneer ahmed's picture
 ahmed |

You may be a powerful inspirational doodlekit; that’s everything that We phone call one. As i tested writingessaysUK therefore been found less beneficial to all of us. May possibly drafted documents well before hardly towards the exact sector. Can be there recommendations it is easy to deliver all of us of doing this on an effective?

markrobinson's picture
 robinson |

Agreeably done. The information here is incredible. I couldn't have asked for an unfathomably enhanced post than this today. You for the most part give your best work and your best is constantly interesting to examine. Keep it going. CPA in Houston

markrobinson's picture
 robinson |

Much gratitude to you for posting so significant piece of information. It is amazingly valuable in the midst of focusing on method. In the occasion that that somebody needs high gauge and one of a kind academic papers this strong source is for Patio covers

robertkuok's picture
 kuok |

hello good information your posted. FT press API is new technology. it is used for cross platform devices. it is used for all formats like Android, iOS formats. by using this we can avoid to build apps in different platforms. i think it is not in marketing, it is the upcoming technique. like this if any body want develop any mobile applications get in touch with best mobile app developers.

robertkuok's picture
 kuok |

hello good information your posted. FT press API is new technology. it is used for cross platform devices. it is used for all formats like Android, iOS formats. by using this we can avoid to build apps in different platforms. i think it is not in marketing, it is the upcoming technique. like this if any body want develop any mobile applications get in touch with best mobile app developers.

rozirose124's picture
 rose |

Your blogs further more each else volume is so entertaining further serviceable It appoints me befall retreat encore. I will instantly grab your rss feed to stay informed of any updates. equipo de sonido

muneer ahmed's picture
 ahmed |

This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here keep up the good work loans no credit check

muneer ahmed's picture
 ahmed |

Wow! Such an amazing and helpful post this is. I really really love it. It's so good and so awesome. I am just amazed. I hope that you continue to do your work like this in the future also Bird Feeders


I highly recommend you continue on the following superb deliver the results plus I actually look ahead to extra within your magnificent content. geometry dash

2775 reads
Always Learning