Development with Modern Mobile Technologies

Transcription

1 Development with Modern Mobile Technologies Björn Dahlgren Niklas Ström KTH Kista, Stockholm, September 2,

2 Abstract In this report we evaluate modern mobile development technologies by producing criteria for the evaluation. We gathered the criteria by conducting a study of popular applications already developed. From these criteria we decided to evaluate development for Android, ios as well as for web applications. The evaluation was made by making a simple application fetching data from an API of the courses available at KTH, as well as course information and schedule for the courses. Our conclusions were that if the application is simple, it may not be worth actually making it a native application. 2

3 Contents 1 Introduction Background ios Android Web Cross-platform native development Objective Acknowledgements Application Fundamentals MVC - Model, View, Controller Data formats JSON - JavaScript Object Notation XML - extensible Markup Language Comparison Mobile Technologies Android System Architecture Development tools Versions Fragmentation Handling Resources Views and Controllers Threading Permissions ios System Architecture Views and Controllers Memory Management Tools Limitations of the ios platform Web Frameworks jquery Mobile and jqtouch Methodology Criteria Applications Evaluation of criteria Toolset Procedure Backend Courses Android Interface Internet Connectivity Local Storage Deployment ios Interface Internet Connectivity Local Storage Deployment Web Application Interface Internet Connectivity

4 5.4.3 Local Storage Deployment Results Backend Android ios Web Application Analysis Interface Third Party Libraries Internet Connectivity Local Storage Deployment Web Applications Conclusions 35 9 Bibliography Attachments ios Top 50 Free Applications List of Figures 1 Model of the MVC pattern JSON object definition JSON array definition JSON value definition JSON string definition JSON number definition Android Architecture ios Architecture Basic components of most popular applications Android - Search Android - Filtered Search Android - Course Info Android - Schedule ios - Search ios - Filtered Search ios - Course Info ios - Schedule jqtouch - My Courses jqtouch - Course Info List of Tables 1 Time consumption comparison between JSON and XML Filtered top 50 free applications with common features analyzed

5 1 Introduction 1.1 Background Since the release of the iphone in 2007 the market for applications in smartphones has exploded. According to Gartner s latest statistics, the market shares of smartphones are still increasing drastically [22]. There are many different techniques and environments used to develop applications for the different types of mobile platforms out in the public today ios ios revolutionized the smartphone concept making it a mainstream type of device. Apple had great impact on the usage of mobiles with it s iphone. Statistics from such sites as Flickr shows the popularity of the ios devices, it s the most popular camera device, more than professional cameras [21]. Four major versions of ios have been release so far with a fifth planned for this fall. The first version of ios didn t feature any dedicated app store and instead allowed developers to create web-based applications. Before ios4 only one application was allowed to run at the same time which made some applications less user friendly. Third party music players such as Spotify and Pandora were shut down when replying to a SMS or using any other application whereas the itunes music player could be backgrounded. One of the main features of the ios platform is the App Store. As of January 2011 there are over applications for iphone in the App Store and more than for the Apple ipad [3]. There are both free and paid apps that can be downloaded onto the users ios device Android Android is a Linux-based mobile platform primarily developed by Google. Android Inc was founded in 2003 and acquired by Google in Rumors started floating that Google where working on a Google Phone, focusing on searching and user preferences. In November 2007 the Open Handset Alliance was announced, consisting of major companies related to phone manufacturing. Their first product released was Android, an open source mobile platform available for all manufacturers. October 2008 saw the first release of an Android phone, the HTC Dream, also referred to as Android Developer Phone 1 or T-Mobile G1. It shipped with Android 1.0 which was released about a month earlier to developers. During 2009 three major releases occurred, 1.5, 1.6 and 2.1. Development since then has not slowed down, 2010 gave birth to more major releases. In 2011, Android 3.0 Honeycomb started shipping with a few selected tablets, featuring a brand new UI. There has been some discussion regarding if Google will allow manufacturers to ship Android 3.0 devices with custom UI like HTC Sense or Samsung Touchwiz. Google has yet to release the source code for 3.0 which has lead to some debate regarding the openness of the Android project. Andy Rubin, VP of Engineering at Google, recently explained that they had no intentions of locking out customizations of the UI or withholding the source code [37]. Instead, they felt a need to clean up the code and adapt the new UI for devices smaller than tablets Web Web applications have existed for a quite a while. In the nineties operators tried to convince users to use WAP, websites optimized for small mobile devices. Back then cellphones only network capability were GSM which didn t allow for fast transfer rates but this has changed with the wide coverage of wifi networks and faster mobile networks such as 3G and LTE. Smartphones now also have larger screens, which enhances the ability to browse the web. Web-based applications has emerged as a quick and simple way to support multiple platforms. With recent support for HTML5, a lot of previous native only features are now accessible in a web browser. 5

6 Video, music, location and offline storage all are part of the HTML5 standard [41]. For applications that requires even more native features there are frameworks such as PhoneGap which allows a web application to interface with device specific features [34] Cross-platform native development Most of the current mobile platforms each have their own SDKs and languages which puts a burden on the development team if multiple platforms are targeted in a project. To increase code reusability, there are a number of development environments with an intermediate language which is adapted and compiled to the target platform. Some examples of frameworks are, Appcelerator Titanium [2] - HTML, JavaScript MonoDroid [31], MonoTouch [32], Xamarin [42] -.NET MoSync [30] - C/C++ PhoneGap [34] - HTML, Javascript One major drawback of most cross-platform frameworks is the lack of native UI. 1.2 Objective The objective of our report is to evaluate mobile development technologies for smartphones. The evaluation will be based on criteria gathered by doing a study of popular applications. 1.3 Acknowledgements Christian Schulte for being an excellent inspiration during our hardship. 6

7 2 Application Fundamentals 2.1 MVC - Model, View, Controller MVC is an abstraction pattern to increase security and modularity. It consists of three components, Model, View and Controller. The model defines and contains the data, which is requested by the controller. The View displays the contents of a model and handles the user interface.the controller handles the requests gathered from the view and maps the interaction between the view and the model [39]. Figure - 2 shows a model of the MVC pattern [39]. Figure 1: Model of the MVC pattern 2.2 Data formats There are a number of standardized data formats for mobile usages. We ve decided to analyze the two most common, JSON and XML JSON - JavaScript Object Notation JavaScript Object Notation was introduced in 2006 by Douglas Crockford as a lightweight, text-based, language-independent data interchange format [15]. The syntax is the same JavaScript uses for object creation - JSON is therefor often seen as a subset of JavaScript. Figures 2-6 describes the valid syntax for the different data types allowed in JSON [27]. Figure 2: JSON object definition 7

8 Figure 3: JSON array definition Figure 4: JSON value definition Figure 5: JSON string definition 8

9 Figure 6: JSON number definition 9

10 JSON XML Number of objects Total Time (ms) Average Time (ms) Table 1: Time consumption comparison between JSON and XML XML - extensible Markup Language XML consists of tags with attributes. Data is derived from the root tag. The XML is more verbose compared to the JSON data format. This leads to an overhead in the information transfer but it s possible to avoid with compression methods such as gzip. A simple XML file might look like: <?xml version="1.0" encoding="utf-8"?> <items> <item attribute="something">name of item 1</item> <item attribute="something else ">name of item 2</item> </items> Comparison In the case study by Nurseitov, benchmarks were performed comparing both resource utilization as well as time efficiency [33]. These benchmarks showed that JSON is both faster as well as using fewer resources. Table - 1 depicts the results they gathered. 10

11 3 Mobile Technologies 3.1 Android System Architecture Android is a Linux-based Operating System. It uses a customized Linux 2.6 kernel with optimization regarding power-usage and security for mobile platforms. Applications for the Android platform are written in Java but compiled into Dalvik executables, which are run on the Dalvik Virtual Machine on top of the Linux kernel [14, p. 33]. Included with Android is quite a lot of libraries and frameworks for accessing both software and hardware like notification services and cameras on the devices. Figure 7 shows the different levels of the architecture [17] Development tools Development for the Android Platform is possible on Windows, Mac OSX and Linux. Included with the SDK for all platforms are debugging tools, the Android libraries, an emulator based on QEMU, Android documentation and some specific tools for Dalvik compiling and packaging into Android Packages, APKs. These packages are signed with either a debug-key for testing or a production-key. The signed APK can either be distributed by the creator himself by or similar means of communication or published to one of the many marketplaces for Android applications, Google s own or a third party market. The official development tools recommended by Google are Eclipse with some specialized plugins for Android called ADT, Android Development Tools [16]. These eases the usage of the Android SDK tools such as deployment and debugging applications on the emulator or a developers phone. It also helps with packaging applications into APKs. JetBrains IntelliJ IDEA latest community edition also ships with their own integration with the Android SDK but lacks the GUI editors that ADT provides with Eclipse. Figure 7: Android Architecture 11

12 3.1.3 Versions 1.5 Cupcake had a reworked and much better API. A proper Bluetooth stack was implemented [14, p. 13]. 1.6 Donut added support for multiple screen sizes and scaling of UI elements [14, p. 13]. 2.1 Eclair featured a reworked UI experience such as improved contact and mail handling. WebKit got better support for HTML5-tags which allowed more advanced web applications. The Bluetooth stack is now compatible with Bluetooth 2.1 [14, p. 13]. 2.2 Froyo brought Flash support on Android allowing both Flash content on the Web and third party Flash applications. JIT, just-in-time compilation, was added on the Dalvik VM which gave a great performance increase in many applications. 2.3 Gingerbread did not bring much for the user except for a more black and green UI. Some behind the scene work was done such as a concurrent garbage collector. Support for NFC, Near Field Communication, such as RFID Fragmentation Due to the many versions of Android, applications must support different levels of APIs [18]. There are also a number of different hardware configurations, mainly screen sizes and resolutions [19]. To ease development for multiple devices, which is the most common situation, there are a couple of mechanisms in place. It s possible to query device format, screen size and screen density programmatically but a preferred way is by organizing resources for each device type Handling Resources Images and other static content are organized as either resources, drawables or assets. Assets are included with the APK for runtime handling while drawable and resources are compiled into a binary format for faster usage. A drawable can be either a standard image file or graphics defined with XML. Resources are often predefined layouts used to describe views for an Activity. Localization is also easily handled by making an XML containing the strings for each language. Android is built to easily support both localization and different kind of devices by using predefined folders for languages and screen types. Instead of having to programmatically load different images and strings for each of these, Android does this for you [14, p. 267] Views and Controllers Android applications are based on different Activities. These act as controllers for Views, consisting of either default Android widgets or user created ones. Message passing between Activities uses a concept called Intent which allows different data packages to be sent, either when starting a new Activity or when finishing and returning data to the callee. Intents can also be broadcasted to all registered receivers on the device, allowing each to decide if it should handle the data or just let it go. They are also used for some user generated actions when sharing content between different applications such as sending a picture from the image gallery Threading One important factor which is enforced by the OS is threading. Applications are not allowed to execute code in the UI-thread which takes longer than 5 seconds before yielding and responding to UI events again [1, p. 81]. This is to ensure that the look and feel is never deemed as slow or that the device has crashed or similar. If this requirement is not fulfilled, the user will be notified that the application has not responded as intended and a choice to quit it the application is presented. To simplify usage of threading without learning how Java s thread pool and/or threads works, a class called AsyncTask is included in the library. By extending the class and overriding the class methods, the developer can easily 12

13 spawn multiple threads that both interacts properly with the UI-thread and runs the main workload in a separate thread Permissions Android has a built in permissions system to which applications must comply. The developer specifies required permissions for the application to work properly and when the application is installed the end user will be notified. Examples of permissions are read messages, access network and camera usage [14, p. 41]. 3.2 ios ios is based on Apple s Cocoa Touch library which uses Objective-C as it s main language. This might scare away programmers since it has a quite different syntax compared to other mainstream languages. Like C++, the programmer must also manage all memory although there are some functionalities to help ease the burden System Architecture The ios platform is derived from Apple s desktop OS, OSX. The main difference between the two systems is the top layer of the architecture, OSX uses Cocoa while ios has it s own Cocoa Touch [29, p. 44]. ios includes a couple of system libraries such as UI, Audio and Location. These frameworks works as abstraction for the underlaying kernel and hardware, accessible through the API. A simple model of the architecture is shown in figure Views and Controllers Apple implements the view and controller parts of the MVC pattern with UIViews and UIViewControllers [7]. Apple describes a UIView as a class that... defines a rectangular area on the screen and the interfaces for managing the content in that area... More sophisticated content can be presented by subclassing UIView... For example, a UILabel object draws a text string and a UIImageView object draws an image., both UILabel and UIImageView are subclasses of UIView [11]. UIViews have the ability to add subviews creating a hierarchy. For example the UITableView - ios default list view - is basically implemented as a UIScrollView, which in turn is just a UIView with added functionality for scrolling. To this scrollview subviews are later added for each UITableViewCell. Inside the UITableViewCells UILabels or other views are added [10]. UIViewControllers add features to UIViews. There are a bunch of ready made UIViewControllers which you can subclass - for instance the UITableViewController which comes with certain useful methods of controlling a UITableView. For instance it provides the data, perhaps by fetching from a database or a model object, and how it should present the informations in the UITableViewCells. The Figure 8: ios Architecture 13

14 UIViewControllers also provides methods for functionality. In the case of the UIScrollView, API for scrolling and events for when scrolling occurs Memory Management As we mentioned earlier Objective c have several similarities to c and c++. One of the main factors that cause problems for programmers starting with ios programming is the fact that you have to control memory management all by your self. Memory management is all about owning variables. As Apple describes it You take ownership of an object if you create it using a method whose name begins with alloc, new, copy, or mutablecopy (for example, alloc, newobject, or mutablecopy), or if you send it a retain message [9]. This means the retain count of that object is incremented. Apple describes relinquishing ownership as You use release or autorelease to relinquish ownership of an object. autorelease just means send a release message in the future [9]. When releasing you decrement the retain count of the object in question. When the retain count reaches zero the object is deallocated and removed - if you try to use the variable now you will get an error and the application will die. What many people struggle with is both not releasing enough - which causes memory leak and eventually low memory warnings, but also releasing too much. At first glance it may seem simple to know that if you retained a variable you should release it and not otherwise - but there are many convenience methods in the ios API and it s easy to make the mistake and think that they are retaining when they don t and vice versa. For example creating a string you may use two different methods - doing the same thing, but one retains and the other does not. NSString *string = [[NSString alloc] initwithformat:@".."]; NSString *string = [NSString stringwithformat:@".."]; In case of the first example we actually retain the variable - which we can see because we are using alloc. The second case actually adds the variable to the autorelease pools which will be release later - for example at the end of the function. If you try to access that variable in a different function later - you will get an error saying you tried to access an already release variable. The second case is actually a convenient way of saying the following: NSString *string = [[[NSString alloc] initwithformat:@".."] autorelease]; But the point of the matter is that unless you are consistent with which way you chose to initialize memory you might reach trouble later or in the development process. Either by having a lot of memory leaks which may be difficult to debug or by getting errors that can be quite hard to figure out Tools Apple provides the Xcode toolset used for the development of applications for ios as well as for the Macintosh platform. The most prominent of these tools are: Xcode IDE Interface builder Instruments ios simulator The Xcode IDE is the Apple IDE for cocoa programming. It contains many features including version handling direct in the IDE. Interface Builder or IB is the Apple way of creating user interface using drag-and-drop components. Instruments is a set of tools used to debug and analyze the performance of an application. Among other things you can view data about the application s use of network or disc, and also track memory allocations, which makes it a great tool to get rid of all memory leaks. 14

15 The included ios simulator makes it possible to test applications without actually having a device. It is often beneficial to first test applications on simulator during the development phase due to the fact that it s easily available. The simulator also makes it possible to test on all types of ios mobile devices including the old iphone models and the new, retina displayed, iphone 4 as well as the ipad. The drawback of testing on the ios simulator is that does not simulate hardware perfectly. The GPS in the iphone can be simulated using the computers wifi to lookup position - if it cannot resolve a position is defaults to Apple headquarters at 1 infinity loop. For the same reasons using camera does not work either. Instead it just display a photo library. The size of the simulator on the computer screen might also deceive developers that the components in the interface are big enough but is too small on an actual device Limitations of the ios platform Apple requires quite a bit from developers before they can actually start developing. An Intel based Mac running Snow Leopard [5] An Apple developer account Having a free apple developer account gives you the possibility to download the xcode toolset and everything that includes. So you can develop applications with a free account, but you can not test them on an actual device nor can you distribute them on the Appstore. This is restricted to paying developers. 3.3 Web Frameworks There are a number of different frameworks available to ease development of web applications. Some are more focused on rendering pages server side, like a normal webpage, while others are built using front end languages such as JavaScript to provide a more native feeling using touch events. Due to increasing performance of the JavaScript engines in both Android and ios there s an growing amount of the latter jquery Mobile and jqtouch jquery Mobile and jqtouch are both mobile frameworks based on jquery, a well used and tested crossbrowser framework for javascript programming [36],[28],[35]. They re quite similar but jquery Mobile is more of a generic mobile framework than jqtouch which is more focused on the ios, it s even shipped with an ios lookalike theme. Some examples of web applications are, Stanford University, released a jqtouch based site for users of Android and iphone besides their native app. The Swedish Skatteverket, used jquery Mobile in their mobile application for tax registration This can easily be spotted from their advertisement since they re using the default jquery Mobile theme. The Artspot created a web based multimedia app for tours at art museums using jqtouch called Hoppr[12]. It features audio recordings during the tour and support offline storage using HTML5. A jqtouch page has the following structure, div with id for identifying the page div with class toolbar for the header of the page <h1> tag for title <a> tag with class button for a button in the header divs with class info for text area or lists ul 15

16 paragraphs, p, for text areas or li for list elements Elements are enhanced by using key classes specified by the framework. Besides these basic structure, elements can be enhanced with icons, animations and transitions. Using JavaScript, features can be added using event listeners that react while the users navigates the page. A simple jqtouch page can be constructed like this: <html> <head>... <style type="text/css" media="screen">@import "jqtouch/jqtouch.css";</style> <style type="text/css" media="screen">@import "jqtouch/themes/apple/theme.css";</style> <script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>... </head> <body> <div id="home" class="current"> <div class="toolbar"> <h1>jqtouch</h1> <a class="button slideup" id="overlay" href="#overlay">overlay</a> </div> <ul class="rounded"> <li class="arrow"><a href="#page-1">page 1</a></li> <li class="arrow"><a href="#page-2">page 2</a></li> <li class="arrow"><a href="#page-3">page 3</a></li> </ul> </div> </body> </html> 16

17 4 Methodology Our methodology consists of two parts. The first is to produce criteria to base our evaluation on the second is to actually evaluate the three different mobile technologies based on our previously produced criteria. 4.1 Criteria To produce criteria for evaluation we do an analysis of popular applications. We chose to look into what features were available in the top 50 free applications on the ios app store. These applications were selected not only because they were available for free but also for the fact that they are a good representation of applications users will download Applications After composing the list of top 50 free applications (see attachment 10.1) along with their category we remove applications from the games category since they are often a completely different type which often focuses more on graphics and we want to focus on the simple, easy to make, application. From the filtered list we went through all applications and analyzed them for the following criteria: 1. Internet Connectivity We examined if the application performed any information exchange with a server. Examples of information exchange are fetching articles, products, or song lists. It can also be pushing information to the server, for example the Facebook application is used to both fetch status updates as well as pushing your own statuses and messages. 2. Local Storage For this criteria we checked if the application saved any data during runs. It seemed applications often used this for two distinct types of features. Either for saving passwords and other user information, or for saving larger types of data - like search history, bookmarks or in cases like Spotify - songs. 3. Camera This criteria was pretty straight forward - we mainly checked if the application used the camera built into the device. 4. GPS Just a check if positioning from the GPS was used at all. The results of the analysis are shown in Table Evaluation of criteria From Figure 9 we acknowledge that the main features of most applications are internet connectivity and local storage. And during our research we found that these two criteria account for the most functionality to an app. Although using GPS location makes an application a lot more user friendly - for instance in weather apps which find your position automatically - we feel it is a secondary to actually being able to save recent searches, login information, or bookmarks. Therefore we decided to focus on internet connectivity and local storage as the two main features in an application. While these two criteria explains the usage of an application to a great length we still need criteria to evaluate the actual development process - and not just how the different technologies deal with the features of an application. Therefor we decided to add two more criteria concerning the actual developing phase - Interface creation and deployment of the application. 17

18 With our now four criteria we have a solid base to evaluate our selected technologies, but the criteria are still a bit rough, so we decide to split them into a few questions to have in mind while doing the actual evaluation. 1. Interface Creating a simple, native UI Creating a custom designed UI Creating custom UI components Using third party components 2. Internet Connectivity Creating a connection to a server Parsing information from a server - XML, JSON or similar 3. Local storage Database Storage Store simple information - e.g. Login information Storing Blobs - Binary Large Objects. 4. Deployment App Name Category Connectivity Local Storage Camera Gps Expressen News Yes Yes No No SMHI Weather Yes Yes No Yes Grillfest Lifestyle No Yes No No Mitt Telia Utilities Yes Yes No Yes Myggavstötaren Healthcare & fitness No No No No Old Photo PRO Photography No No Yes No Talking Tom Cat 2 Entertainment Yes No No No Veckoappen Utilities No No No No klart.se Weather Yes Yes No Yes HeyTell Social Networking Yes Yes No Yes Facebook Social Networking Yes Yes Yes Yes Spotify Music Yes Yes No No TV4 Play Entertainment Yes No No No Yr.no Weather Yes Yes No Yes Instagram Photography Yes Yes Yes Yes Achmeds Soundboard Entertainment No No No No RunKeeper Healthcare & fitness Yes Yes No Yes Blocket Lifestyle Yes Yes Yes Yes Aftonbladet News Yes No No No Vardagsmaten.se Lifestyle Yes Yes No No Swedbank Finance Yes No No Yes Hemnet Lifestyle Yes Yes Yes Yes Viber Social Networking Yes Yes Yes No Skype Social Networking Yes Yes Yes No Sveriges Radio Play News Yes Yes No No Tv.nu Utilities Yes Yes No No hitta.se Navigation Yes No No Yes Hitta min iphone Utilities Yes No No Yes eniro.se Navigation Yes No No Yes Birthday.se Utilities Yes Yes No No Table 2: Filtered top 50 free applications with common features analyzed 18

19 Requirements for deploying an application Deploying for usage on developer phones Deploying for closed group usage - e.g. company Deploying for large scale distribution 4.2 Toolset All evaluation is done using Mac OSX. For Android development Eclipse with ADT 10.0 is used and SDK Tools revision 9 with Android as target for deployment. A Google Nexus One is used to test the application. For ios, we ve used Xcode 4 with ios 4.3 as target and an iphone 3GS as device. Both devices were also used to test the web application. The backend uses Django 1.3 and runs on a Ubuntu virtual machine with an Apache web server and SQLite database. Figure 9: Basic components of most popular applications 19

20 20

21 5 Procedure 5.1 Backend KTH has some public APIs for interfacing some of it s databases. Due to limitations and incompatibilities we ve decided to create a custom backend to ease development Courses To get a list of all courses at KTH we first fetched all departments from kurser/kurser-per-avdelning. Using these, we could fetch all courses for that department by visiting We wrote a simple python parser which fills the database with relevant course info using regular expressions. The Django backend then exposes all courses with a JSON-feed, an array of dictionaries, representing all courses. 5.2 Android Interface Android user interface can be constructed either by using the tools included with the Eclipse plugin, writing the XML code by hand or by declaring the components within the application code. It s often simpler to write the XML code by yourself since the UI tools produces lots of unnecessary code making it unreadable and does not always get it right. <LinearLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <TextView android:id="@+id/firstline" android:text="first Line" android:layout_height="wrap_content" android:layout_width="wrap_content" /> <TextView android:id="@+id/secondline" android:text="second Line" android:layout_height="wrap_content" android:layout_width="wrap_content" /> </LinearLayout> The xmlns:android declares the use of the android extensions for XML such as layout and data attributes. Using android:id we make it possible to get a reference to the component within the application using the method findviewbyid. It s also possible to create own attributes for custom components. Theming an application is possible by either declaring properties on a component basis or by creating a theme per activity or the whole application. A theme can override the looks of widgets and components by overloading their default properties. In our KTH app we ve mostly utilized ListView to display data. A ListView is a view component displaying rows from an adapter that contains the data. There are a few simple adapters such as displaying an array of strings or using a database cursor but the developer is free to implement his own. The adapter contains a getview which returns the row for a given index. To increase performance, one parameter is a possible previous shown view which can be reused to avoid garbage collection and creating a new object Internet Connectivity Since Android is based on Java, the simplest and most common way to access network data is by using Apache s HttpClient library. The library is included within Android so there is no need to add any extra dependencies. To comply with the maximum execution time in the UI thread, data is usually fetched inside an AsyncTask. 21

22 Android is bundled with a JSON library which means that no extra code has to be added for parsing. To parse XML, developers can choose from a variety of parser methods including SAX, DOM and XMLPull. Parsing is a huge difference, to parse JSON data only a few lines of code is needed: String jsonstr = new String("[...]"); JSONArray jsonarr = new JSONArray(jsonStr); JSONObject jsonobject = jsonarr.getjsonobject(0); String str = jsonobject.getstring("str"); Local Storage Many applications utilizes storage devices such as memory cards for caching and saving of data. Android also includes two specific types of data storage, Shared Preferences for settings and Content Provider for wrapping a database or similar data source. Shared Preferences acts as a simple key-value storage encrypted inside a directory for each application which utilize it. It s also possible to define a list of preferences in XML and create a settings screen with them using PreferenceActivity. Content Provider is an abstraction for supplying data and uses a RESTful interface for accessing and modifying data. It also provides possibilities for cross application exchange of data. Often, the provider is backed by a SQLite database containing all data. To provide all data in our KTH app, we opted for a locally stored database to increase speed. When the app is first started, the SQLite database is initialized and tables are created. After a successful database creation, a service is created which spawns a thread that fetches all KTH courses from our backend. During this the app displays a loading overlay to avoid unintentional user interactions Deployment By using the SDK tools, the developer can generate an APK which can then be distributed. Besides using the generated debug certificate the developer can generate a certificate to signing the package with before sending it out to testers. This is also needed for Android Market distribution. When uploading your application to Google s Market, it s available instantaneously for endusers. To use Google services such as Maps, the developer s key needs to be paired with an extra API key for the service [24]. Since we haven t deployed our application any wider than our testing device, we ve only utilized the debug key. 5.3 ios Interface The interface in ios can be done either by writing code or by using the tools mentioned earlier - Interface builder (IB). When using Interface Builder you drag and drop UI components. To be able to access the components from the code - for instance change text of a label during execution - you have to declare an outlet in the header file for that UIViewController by declaring a variable as a IBOutlet. When this is done the outlet is accessible in the IB and by dragging you connect the outlet to the specified view. Developers are not forced to use the Interface Builder. Instead of dragging and dropping views one can just declare a view in the view controller, set a frame, and add as a subview to the UIViewController s view. So, to create a simple - native - user interface is an easy task as the ios provides many standard views that doesn t require any modification. Basically you just provide the data. If you want to customize the UI you can do it on many levels. The standard views provided often have different options such as text-alignment, background color or borders. But if you want more functionality 22

23 you can either subclass the component in question or subclass UIView and then make your own version of that component. If you want to create a custom component implementing a new feature - you have to subclass a UIView or another subclass of it depending on what feature you want to implement. An example of a popular custom component is the ipod-like scroll wheel implemented by Tapbots in their app ConvertBot [26]. To create a component like this you need to catch the touch and drag events of the wheel and animate the rotation Internet Connectivity ios provides several methods of fetching content from the web. The basic method is to make a request, save the data and convert or parse it into whatever datatype you want. This can look something like this: NSString *url = [NSString stringwithformat:@"..."]; NSError *error; NSURLRequest *request = [NSURLRequest requestwithurl: [NSURL URLWithString:url]]; NSURLResponse *response; NSData *result = [NSURLConnection sendsynchronousrequest:request returningresponse:&response error:&error]; NSString *string = [[NSString alloc] initwithdata:result encoding:nsutf8stringencoding]; This kind of request can be shortened into a convenience method. NSString *url = [NSString stringwithformat@"..."]; NSError *error; NSString *string = [NSString stringwithcontentsofurl: [NSURL URLWithString:url] encoding:nsutf8stringencoding error:&error]; The problem with this method of fetching data is that it is synchronous. This means that the fetching is executed sequentially - hence UI and everything else has to wait which makes the application freeze. Therefor we need to fetch data asynchronously. The most basic method fetching asynchronously is again to create an request. NSString *url = [NSString stringwithformat@"..."]; NSError *error; NSURLRequest *request = [NSURLRequest requestwithurl: [NSURL URLWithString:url]]; NSURLConnection *connection = [[NSURLConnection alloc] initwithrequest:request delegate:self startimmediately:yes]; This time though you also need to implement the following functions to define what will happen when for instance more data is received or when the download finishes. - (void) connection:(nsurlconnection *)connection didreceiveresponse:(nsurlresponse *)response - (void) connection:(nsurlconnection *)connection didreceivedata:(nsdata *)data - (void) connection:(nsurlconnection *)connection didfailwitherror:(nserror *)error - (void) connectiondidfinishloading:(nsurlconnection *)connection This on the other hand is a completely viable solution - as the fetching is executed on a separate thread. Another way to fetch data asynchronously - and a way we prefer to use is to create a thread manually which fetches the data synchronously using the convenience method mentioned above. NSDictionary *args = [[NSDictionary alloc] initwithobjectsandkeys:... ]; 23

24 NSThread* mythread = [[NSThread alloc] initwithtarget:self selector:@selector(asychmethod:) object:args]; [mythread start]; Which starts a thread to execute the method asychmethod with the optional arguments described in the args dictionary. The started method can contain something simple like this: - (void)loadcourse:(nsdictionary *)args{ NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init]; } NSString *url = [NSString stringwithformat@"..."]; NSError *error; NSString *string = [NSString stringwithcontentsofurl: [NSURL URLWithString:url] encoding:nsutf8stringencoding error:&error];... [pool release]; When the data is fetched we have a string consisting of JSON data. To be able to use it we need to parse it into a dictionary. Unfortunately the iphone has no built in JSON parser, but there are several open source projects solving the problem. We used a popular framework, SBJson, which adds an method to the NSString class which makes a dictionary or list depending on the containing JSON [13]. NSDictionary *data = [string JSONValue]; Local Storage The Apple way of storing data inside the app is using their framework called Core Data. This is an abstraction upon a database - often SQLite [4]. To store data you have to build a a structure of NSEntities. NSEntities can have attributes, corresponding to values, and relationships, which describes a relation between two entities. To fetch data you create a request for a given NSEntities. You can filter or search by adding an NSPredicate to the request, or sort by adding an NSSortDescriptor. For simple key-value storage, for example a preference you can use the simpler NSUserDefaults. For password storing Apple supplies a keychain feature allowing for safe storage [8] Deployment To deploy an application on App Store you need to have a developer account. You can get a developer account for free, which allows you to develop applications, but not to actually release them or even test them on your own device. An account cost from $99/year [6]. To actually deploy it after you ve gotten you account is not actually an easy task. Apple puts a lot of care into what application goes on to the App Store so a screening process is used, and many applications are denied. To test an application you need to create certificates to verify that you are indeed the developer. This certificate is also connected to a provisioning profile containing the application identifier. The provisioning profile also includes which devices are allowed for testing. So to test an application within a group of people you have to add every device id to the provisioning profile. There are some ways to make testing easier. For instance a third party service called TestFlight allows for easy deployment where you can invite testers by sending an invitation to their device. TestFlight uses Apple s Enterprise distribution system [40]. 24

25 5.4 Web Application To evaluate the usefulness of web based applications we created a simple jqtouch website [28]. For simplicity, we opted to use pages constructed in the backend instead of building them using JavaScript Interface Web applications are built in using standard web components such as HTML, CSS and JavaScript. Most frameworks includes some default theme to look more like a native application. To change the looks of the application, it s usually enough to customize the CSS with colors, fonts and images. For more extensive customization, JavaScript is often required to change or enhance the behavior of the application. We thought about changing the colors for a more KTH-like theme but opted to use the Apple theme for a more native look Internet Connectivity Since web applications are often already executed from a web server, Internet connectivity is already required. To request data while the application is running, AJAX is the most common way to interact with the backend. Another way is by creating iframes that invokes the pages in the backend. jqtouch utilizes AJAX for loading data or pages rendered in the backend Local Storage Using HTML5 it is possible to create simple database storage inside the browser. It s of course also possible to utilize the backend database. Another means of storage are by using cookies or session data. For My Course, we ve saved the users selected courses using HTML5 local storage Deployment A major advantage with web applications are that the developer has 100% control of the application since your hosting it on your web server. It s also possible to deploy the web application using some kind of native wrapper such as a WebView for Android or UIWebView for ios. PhoneGap is a project created specifically for this purpose, it supports native plugins for the web application [34]. 25

26 26

27 6 Results 6.1 Backend The backend consists of a simple Django based application with a SQLite database containing all courses. Through a simple RESTful interface, a client can request a variety of different information. All info except for the courses list is fetched and parsed from the KTH homepage when a request occurs. To cutdown execution time, results should be cached using simple HTTP Caching. 6.2 Android The Android application consists of a content provider and three activities. Content Provider The content provider acts as local storage for the courses list fetched from the backend. We interfaced it by declaring it as a search provider which allows us to search for courses both inside our KTH application and from the global search application. To enable this functionality, some additional meta columns are added when querying the database. Main Activity The main activity allows the user to trigger a search action for courses. The search uses the database to list all courses and allows the user to filter and pick a course to view, figure Course Activity The course activity displays the chosen course and fetches all info from KTH s Course and programme directory, figure 12. Schedule Activity The schedule activity uses a ListView to display the current course schedule. The schedule data is fetched from KTH s API, figure ios The ios application fetches data from the server and KTH APIs much like in the Android version. When courses are loaded they are saved in a local database from there they are fetched when they are needed. The application contain four views shown in Figures All four views are based on the native UITableView with a UITableViewController supplying the data fetched from the database. The search is implemented by adding a UISearchDisplayController to the UITableViewController. This provides an additional UITableView for displaying the results as well as a search bar and a keyboard for input searches. The UISearchDisplayController provides a method for which action to take when search query changes. In our case we searched through our database and filter our courses on the query in question - the result was displayed in the UISearchDisplayController s UITableView The navigation between views were automatically handled by the built in UINavigationController which handles pushing and popping of views with a smart and intuitive UI. 27

28 6.4 Web Application We built a simple jqtouch application where the user can add his courses and get info and schedule for each course. Pages are rendered in a simple backend from the JSON results to HTML. jqtouch provides a lookalike Apple theme which we ve used to get a native feeling. It also contains CSS transitions between pages. Figure 18 and 19 displays the application. Figure 10: Android - Search Figure 11: Android - Filtered Search 28

29 Figure 12: Android - Course Info Figure 13: Android - Schedule 29

30 Figure 14: ios - Search Figure 15: ios - Filtered Search 30

31 Figure 16: ios - Course Info Figure 17: ios - Schedule 31

32 Figure 18: jqtouch - My Courses Figure 19: jqtouch - Course Info 32