IPhone Application of Carleton University. Carleton University Computer Science Honors Project Report

Transcription

1 IPhone Application of Carleton University Carleton University Computer Science Honors Project Report Student Name: Yang Cai Student Number: Project Supervisor: Dr. Dwight Deugo Date: Dec. 13, 2010

2 Abstract The CarletonU App is an application ( app ) for the smart phone (iphone) that allows users to search programs and course, checking maps and service contact, and viewing Carleton University Newsroom. The app is developed on Xcode environment and it contains different controllers and views to achieve the results. The purpose of this project is to provide an alternative tool for users to discover special information about Carleton University. 1 Introduction 1.1 Problems Carleton University, with its high reputation in high technology, journalism, public affairs, international affairs, and architecture fields, provides excellent education and research experience to its fine students from over 100 countries around the world. It is very important for the university to deliver up to date information of programs, achievements, enrollment and campus life to its current and future students, professors and employees. Currently, there are many ways to access to the information through many different ways, such as the official website of Carleton University, information Carleton and other resource offices. However, it is possible that all the above mentioned channels of accessing information are not available temporarily or can not to be reached. For example, it is difficult to get information directly when there is no computer or internet service near users, service office are closed for weekend and holidays, or users are unable to make a trip to campus. In addition, in some circumstances, users may just want to look for information in the most easy and straight forward way to quickly answer their wonders. The traditional ways like website or pamphlets may take users long time to eventually find their answers while too many information offered. The last but not the least, some very useful, helpful and functional information provided on official website have never gotten attention of users since they are all mixed with many other contents. For instance, business hours of each food service locations in campus are not known by most students but very useful info for

3 student to check while they stay late at school for studying and want to buy drinks or snacks. Therefore, a question is came up with that if it is possible to have an alternative solution for students, professors and staffs to reach certain very handy information of Carleton University at anytime from anywhere. 1.2 Motivation With the rapid increasing number of multimedia-enabled mobile devices like iphone and Blackberry Smartphone users, many people are changing their way of reaching information. Smartphone carries not only features of regular mobile phone but also advanced computing ability and connectivity. It allows users to install and run more advanced applications on its specific operation system platform (Wikipedia, Smartphone). Meanwhile, the applications offer a variety of functions to meet users multi needs of managing and organizing business, study, and everyday life. Due to its extended add-on features, Smartphone is also adopt by more and more students and becomes a core communication and entertainment device for students to not only connect with family and friends but also assist with academic needs in order to increase the efficiency and enjoyment of life. (Cellular-news, Survey Finds Smartphones Transforming Mobile Lifestyles of College Students, 2009). According to the announcement from Steve Jobs on the Apple Special Event, September 1st 2010, there are over 6.5 billion apps available to download and punchers through the Apple store. Approximately 200 apps have been downloaded every second. These numbers will keep growing fast in the near future. Furthermore, open source concept has been attempted for both hardware and software of smartphone, so it attracts developers to expand applications that cover more area of functionality or improve the behavior of the interface. There are many source code shared by developers. The fast growing number of smartphone users, the large amount availability of practical applications, and public shared experiences of program development motivates and encourages me to study and develop applications for smartphone to ease everyone s life. Also, As a student of computer science program in Carleton University knowing what we need, I have the skills, the knowledge and the keen to develop an efficient application to provide current students with well-

4 organized information as well as to promote Carleton University to prospective students and the public. This project also gives me an opportunity of learning the ad-hoc programming language, using new developing tools and practicing test methodology as well, so my problem solving skills and learning ability would be improved during the process of project development. 1.3 Goals The aim of the project is to design a view based iphone application to represent Carleton University in an alternative innovative way, which will also be a solution to the above mentioned concerns and issues. The iphone application is named CarletonU. It can inform users the latest news, campus map, programs and courses, residence information, dinning services and contacts of student services. The application should also include search function for students quickly checking program courses and their description, pre-requisition as well as lectures info. The user interface style is supposed to correspond to the style of Carleton University, so it will have unified looking and feeling to present the university. Furthermore, it will involve the best integrated developer tools for programming, simulating, and debugging to build the application. Also, multiple methods will be applied to implement the different features; hence more practice and knowledge can be achieved through the procedure of the project. 1.4 Objectives The CarletonU application is designed to provide information by the following methods: Start with a main window to obtain the links to 6 different modules for the main app. Use interface builder to make the connections between file owner and views, and editing GUI layout for each component or view. Apply WebViewController to the News section so that Carleton news can be loaded and browsed Campus map can be displayed by using ScrollViewController to provide the functionality of zooming in and out Implement NavigationController, SearchBar and TableViewController to accomplish the searching ability for the programs and courses. Information between programs, courses

5 and detailed information can be navigated through table view form Build TableCell for the TableView to customize individual table cell to be able to display multiple component in each cell. 1.5 Outline The report is divided into 6 sections. Next section will provide background concepts and related software and hardware requirement. Section 3 introduces the approach of how the application is designed including structures and components of the application and how they are related with each other. Result section describes functionalities which are achieved in the design, including screenshots for 6 main features. Validation section shows the process of evaluation to prove whether the application meets the project objectives and fulfills the intended use. 2. Background 2.1 Related Software The following software are required for developing the application, and they are running on Mac OS 10.6 operating system Xcode and IOS SDK 4.1 Xcode IDE Interface builder Instruments iphone simulator Adobe Photoshop cs4 Xcode and ios SDK 4.1 is the complete Xcode developer toolkits for iphone, ipod, ipad and Mac. The kit includes Xcode IDE, interface builder, ios simulator and other frameworks, compilers, analysis tools and debug tools (Xcode Developer Tools, technologies/tools/xcode.html). IPhone SDK allows third parties to create applications that

6 directly run on the iphone/ipod devices. It is free to download, however developers required having an Apple ID before they can get the copy of it. Interface builder is used to build user application interface. It provides several windows, mainly including document window, library window, view and inspector window. Document window allows developers modify deferent objects and display objects. Most of the objects correspond to the elements which display on the screen, such as windows, views, controls and navigations are contained in the document window. All the objects not only can be added from the library window but also can be dragged into the view window and can be adjusted and set by using inspector. Instruments is the application that dynamically tracing ios code, and different aspects of the process behavior. By using instruments, the problems can be reproduced by tracking down the code. It plays an important role of testing and analyzing processing and memory performance. In CarletonU app, it is used specifically for checking memory leak. Instead of running the application directly from the iphone device, with ios SDK, Xcode can build, install and run the code through iphone simulator on Mac OSX. IPhone simulator provides a real time running environment exactly like iphone device, and delivers most of the features. Most of the images used in the CarletonU app are edited by Adobe Photoshop CS Hardware Requirement Hardware required for developing MacBook or imac iphone 3G/3GS or iphone 4 (optional) Because CarletonU does not require large memory and cpu to load complex data or 3D graphical animation, iphone simulator testing makes no difference comparing to real device testing.

7 2.3 Definition of Context CarletonU app mainly focuses on the views and controllers. UIViewController, UINavigationController and UITableViewController are the 3 main controllers have been used in the app. The purpose of applying controllers is receiving the input/response from the user, instructing the model to perform, and receiving the instruction from the model as well as dictating view to perform actions. Controllers can talk directly to their views. There are several data views can be applied for different purpose in use. The view controller class is responsible for providing and presenting views to the user. It manages the response from uses application to some standard system behaviors. As well, it rearranges and resizes the managed views in response to the system events. UIViewController is the root class for all the controllers that manage views. It starts with initialization to get its view from the specified file defined as nib file(.xib file),which stores the resulting of user interface from interface builder. The view can be customized dynamically while it is being loaded. Additional initialization for the user application can be setup before loading view and after loading. Examples will be shown in the next section to explain in detail related with the CarletonU app. UINavigationController and UITableViewController are two special view controller classes that manage a collection of other MVCs (Model-View-Controller). UINavigationController manages a hierarchical flow of MVCs and presents then in a stack way. Views can be pushed into the navigation controller and popped out after completing the view. By using navigation controller, user can navigate views back and forth. UITableViewController, on the other hand, is another widely used class with some properties that help to define the behavior of table views. Delegate and datasource are two properties of the table view controller. The delegate for TableViewController is a reference to any class that implements optional methods indicating table view to react user input. It handles the entire events from the user action such as tapping or editing. Datasource is also a reference to any class that implements methods to determine the content for the table view such as number of rows and sections, initializing section header and

8 footers, etc. UINavigationController and UITableViewController are implemented in CarletonU app to present programs and courses, residence and dining information. In CarletonU app, following views are implemented: Table View, Table View Cell, Image View, Web View, Scroll View. These data views are used to provide interface for users and send user s instructions to the View Controllers. Web View used to load the content data from the web server and display the information to the user. It is being used to browse the Carleton news in the News module of CarletonU app. Scroll View supports to display the content whose size is larger than the application window. Users are able to scroll the content by swiping gestures. It also handles zooming and panning of the content by using pinch-in or pinch-out gesture. Scroll View is applied for displaying campus map of Carleton. UITableView is a subclass of UIScrollView, which also provide scrolling functionality through the table. However, not like Scroll View, TableView only supports vertical scrolling instead of scrolling around. Sections also can be presented in the Table View. Table cell is the element lying in the rows contained in Table View to display each of the row content. There are many ways to customize the table cells. UITableViewCell is the class that can be easily used to customize table cells. One example of using UITableView and UITableViewCell to customize table cells will be shown in next section to explain how Table View Cell can be used in CarletonU app in detail. A view-based container for displaying either single image or series of images is defined as Image View. UIImageView class provides controls to set the duration and frequency for the animating image. Images can be stretched and resized based on the values of their properties. Image View is applied to display all the images that being used in CarletonU app.

9 3. Approach 3.1 General Application Design How the views and controllers talk to each other in order to present the view for user? The communication between view and controller is structured by sending actions. In CarletonU app, View Controllers and Views are structured in Figure The application is designed to divide basic information of Carleton into 6 sections. CarletonU main window is the central home window generally displays the section names with the UIButtons. Each button links the section with the corresponding View Controller. Each View Controller manipulates different actions and events by using their own delegate. There are total of 10 View Controllers used to communicate with their Views. Every Controller handles backtomainwindow event or back to previous controller event.

10 News ViewController - backtomainwindow - newswebview - back,next,refreshwebview Campus Map ViewController - backtomainwindow - mapscrollview - buildingimage - diningimage - tunnelsimage - parkingimage CarletonU Main Window Contact ViewController - backtomainwindow - contactinfo - callingbutton Programs ViewController - backtomainwindow - searchcoursebar - programstableview Residence ViewController - backtomainwindow - residenceinfo - residencebuildingimage Dining ViewController - backtomainwindow - diningservicetableview - dininghoursbutton Courses ViewController - backtoprogramsview - programdetailcell - coursetableview ResidenceDetail ViewController - backtoresidence - DoomRoomImage - roominfo DiningHours ViewController - backtodiningview - DiningHoursTableView - locationmapview CoursesDetail ViewController - backtocoursesview - coursedetailview Figure 3.11

11 3.2 Explanation of Detail Design From the general design, the approach can be mainly described by the following sections in detail: switching views, customizing view without using Interface Builder, navigating views and customizing UITableView. Switching Views As shown in the structure diagram (figure 3.11) for the application. Views can be switched back and forth without using navigation controller. To do this, CarletonUViewController is set to be the starting View Controller and contains 6 View Controllers corresponding to 6 Views. There are 6 buttons in the View components. Each button handles Touch Up Inside event, which can be triggered after user touches the button. A following action method is used to switch the home window view into the News View. - (IBAction)switchNewsView{ } [self presentmodalviewcontroller:newsviewcontroller animated:no]; IBAction denotes variables and methods that can be referred to the Interface Builder. It resolves to void, however, it signify to the Interface Builder and the method can be used to link UI elements with the code. The IBAction will be called after the event has been triggered. presentmodalviewcontroller:animated: presents a modal view managed by the given view controller to the user. In this case, newsview is managed by newsviewcontroller. animated:no means there will be no animation while switching the view. To switch back to the main window, I use dismissmodalviewcontrolleranimated to dismiss the modal view controller. By using this approach, complicated structure can be easily managed. Customizing view without using Interface Builder The viewdidload method allows the additional setup after the view has been loaded. The benefit of setup views in here is that the view components are not restricted by the Interface Builder. The location of the components can be changed dynamically depending on the nearby

12 components. To do this we can define UIView and UILabel which are initiated with frame size and starting location, shown below: UIView *headview = [[UIView alloc] initwithframe:cgrectmake(0, 0, 100, 0)]; // allocate UIView in the frame with location (starting x-coordinate,starting y-coordinate,height,width) UILabel *headlabel = [[UILabel alloc] initwithframe:cgrectmake(10, 10, 300, 0)]; Setup for the UILabel and add them into the current view to display. headlabel.font = [UIFont systemfontofsize:14]; // set up the font size... [headview addsubview:headlabel]; // add the UILabel to the UIView [scroll addsubview:headview]; [self.view addsubview:scroll]; everything // add the UIView to a scrollview // finally add the scrollview to its main view to display Finally, releasing the memory due to the dynamic generation of the UIView and UILabel. [headview release]; [headlabel release]; Navigating views Navigation Controller can be used to direct different views. It requires applying before the view has been presented. In the example of Courses view, UINavigationController is defined and used programsviewcontroller as the Root View Controller, which is the starting controller that can be treated as the base view controller. UINavigationController *newnavc = [[UINavigationController alloc] initwithrootviewcontroller: programsviewcontroller]; rootviewcontroller for the Navigation // set programsviewcontroller as the Controller call newnavc.

13 [newnavc.navigationbar settintcolor: [[UIColor alloc]initwithred:196/255.0f green:11/255.0f blue:33/255.0f alpha:1.0]]; // customize the navigationbar, on the top of the view and used to display the title of current view and providing a back button to the previous view After the initialization of the Navigation Controller, the programview can be presented without animation. [self presentmodalviewcontroller: newnavc animated: NO]; [newnavc release]; // release the memory The reason of using NavigationController is that the content of the programs, courses and course detail can be easily organized by one single controller within 3 layers of views. NavigationController easily manages views with related contents back and forth. Customizing UITableView 1. In CarletonU application, applying UITableViewCell is one of the most efficient ways to customize table cells. This technique is used to provide the dinning service information. UITableViewCell class defines the attributes and behavior of the cells that appear in UITableView objects (IOS Reference Library, URL: #documentation/uikit/reference/uitableviewcell_class/reference/reference.html). UIImageView and two UILabels are included in the UITableViewCell class. The Image View is used to display the image of the dining service. Labels are used to display the name and detail information for dining service. (UITableViewCell *)tableview:(uitableview *)tableview cellforrowatindexpath: (NSIndexPath *)indexpath {}

14 The above method is used to generate the cells and setup UIImageView and UILabels that are defined in the Interface Builder. if(indexpath.row == 0) // for the cell, if the row number is 0 { [[cell titlelabel] settext:@"baker's"]; // setup the titlelabel text to be Baker s [[cell infolabel] settext:@"located on the fourth floor of the University Centre, Baker s is a full service restaurant serving breakfast and lunch weekdays.\n\nphone: ext 5635\n bakers@carleton.ca"]; //setup the informationlabel [[cell diningimage] setimage:[uiimage imagenamed:@"bakertitle.png"]]; //set the image using the image named bakertitle } The height of the table cell also need to be set in order to display the full view of content. (CGFloat)tableView:(UITableView *)tableview heightforrowatindexpath:(nsindexpath *) indexpath { } return 130.0; The above code demonstrated how to set the height of the table cell to 130. Customizing UITableViewCell by using Interface Builder improves the appearance of each table cell and provides delicate interface.

15 4. Results Main Window Below are the screenshot of the application for each part of the workflow. User starts the application by tapping the CarletonU application icon shown in figure 4.1. It begins to load the CarletonUViewController. Figure 4.2 displays the main window of the application after the View has been loaded. It has 6 buttons of News, Map, Courses, Residence, Dining, and Contact. By clicking each button, user can go each functional module respectively. Figure 4.1 Figure 4.2

16 News User may tap any of those 6 red buttons to open the new view for the corresponding section. This motion triggers Web View loading the content from the URL link: and display the web information shown in figure 4.3. The back button on the top left of the screen is used to switch back to the home main window. This button is included in all views and it can lead back to either the previous window or main window. User can also tap the button and to review pages. The page can be refreshed by the refresh button. Figure 4.3 Campus Map Figure 4.4 is campus map window loaded by Map button click. The map shows all buildings on campus with the abbreviation indicating the building name. The bottom four buttons,,, and are used to switch four difference maps which display building location, food service place, connecting tunnels and parking spots. The map can be scrolled around as well as be enlarged for checking closely. User can switch the 4 maps for the same block which means the area on map in the current window will still be exactly displayed in the next map window. Figure 4.5 is the dining map shows which building offers what food services.

17 Figure 4.4 Figure 4.5 Courses The window of courses is shown in figure 4.6. It is listed all programs offered by Carleton University. With search bar, users can search the program they want to check. Tapping the program name listed will push to the next view of course listing required by this program (figure 4.7). The next view of course list is the detail course description including prerequisition and lectures if it has (figure 4.8). Figure 4.6

18 Figure 4.7 Figure 4.8 Furthermore, the search bar provides the convenience of finding not only the specific program but also the particular course code (figure 4.7). Meanwhile, the search function offers fussy query and also precise query. Therefore, user can type any letters, numbers or words from keyboard popped up from bottom of screen to execute searching. Residence Figure 4.9 is the screen of Residence view. Besides the general introduction of student residence, the pictures of all residences are listed and the picture itself is a button which can load each house s detailed information such as floor plan, styles, rooms, and facilities etc. (figure 4.10).

19 Figure 4.9 Figure 4.10 Dining Dining service has two views demonstrated in figure 4.11 and figure Figure 4.11 lists all food service with location and phone in a table view. On the foot of screen, there is a toolbar of dining hours with animation property. It can pop up the second view (figure 4.12) from the bottom which contains a table view having business hours for every food corners. As the same as the first view, the second view also has a button bar of Dining on top of screen, which can take user back to the main list for location or contact information. Moreover, the second view has an information icon steering in-between dinning map image view and the table view. The map image is showing in the method of animating fade-in and fade-out.

20 Figure 4.11 Figure 4.12

21 Contact As figure 4.13 shown, the contact view lists all important contact information of student service offices together with address, telephone numbers, office hours, and website. Meanwhile, each contact has a phone button which user can dial the number directly in the view instead of using keypad. Figure Validation In the previous section of problems and motivation, it has stated the reason why the CarletonU app with above functions was decided to develop. From the results of running each functional module, the application fulfilled the following tasks. Students can check news, speeches, and hot topics of Carleton University through News module. It is a direct http link to Newsroom page on Carleton University website. Therefore, it keeps informing student up-to-date events. The Course module provides student all course lists for each program and also the course detail description. Besides, users can fulfill search function to quickly find the exact

22 courses or programs. There is no redundancy and redirection and it presents in a very clear arrangement which will be easy for users to explore information. Map and Residence modules indicate the buildings and facilities in Campus, which benefits students to find out where they can go and how they can access to it. Especially, when checking the 4 alternative maps, they all display the same area of the full map. It helps users to plan the route to the destination. Dining and Contact modules are simple presentation. The dining list allows users check what food service is available in the building or where they are. When users are not sure whether food court is open or not, the time table can confirm their answer. Contact offers direct phone call to every service office for users. They are simple but useful for everyday life at school. These tasks demonstrated that the app meets the intention to provide a practical and easy accessing platform. In addition, the UI style and theme like navigation bar color and main window background with raven logo are specially designed by photo shop to accomplish the similar look and feel as Carleton University website. Last, there are few different controllers and views are implemented in the development. For examples, UITableview is used for program list, label object was added to customize table cell for courses list, UITableViewCell and UIImageView class are applied in Dining list. Consequently, the goals and requirements are all satisfied. The app achieved the purpose of finding specific information in a fast and easy way as an optional tool.

23 6. Conclusion It is concluded that the resulting application is an easy tool to reach the task of finding information. It includes multiple convenient features to assist in discovering study programs, campus geography and student service. Altogether, I consider the project a great success and it could be also be adding more features to refine in the future.

24 Reference 1. URL:[ 2. URL:[ 3. Wikipedia, Smartphone 4. Cellular-News, Survey Finds Smartphones Transforming Mobile Lifestyles of College Students April, Learning Iphone Programming 6. Xcode Developer Tools, 7. IOS Reference Library, URL: reference/uitableviewcell_class/reference/reference.html