Thrailkill, Kevin

English

DigitalCommons@CalPoly

   Central Pacific Ski Club iOS Application By Kevin Thrailkill (2014)                 2 Table of Contents    1. Introduction 1.1 Description of the Problem 1.2 Overview of the Solution 1.3 Outline of the Report 2. Pilot Project - Big Trip Jackson Hole iOS Application 3. Design Implementation 3.1 Design Survey 3.2 Final Design 4. App Flowchart 5. Technical Sections 5.1 Login Page 5.2 Home Page 5.3 Recent Page 5.4 Perks Page 5.5 Trips Page 5.6 Contacts Page 5.7 Contact Developer/Designer Page 6. Testing and Validation 7. Server Side Administration 8. Related Work 9. Conclusions and Future Work 10. References          3 1. Introduction Since 1941, The Central Pacific Ski Club has been building a community on California’s Central Coast, organizing hundreds of events that spread the love of snow and introducing students to winter sports. Consistently boasting over 1,000 members each year, CPSC is the second largest collegiate ski club in the nation and prides itself in providing premier ski, snowboard, and social experiences. Their membership consists primarily of students attending California Polytechnic State University (Cal Poly) and Cuesta College. It also draws snow culture enthusiasts from other US cities and states as well. The club’s website, cpsconline.com, receives over 27,000 unique hits per year and their weekly emails reach over 1,000 skiers and snowboarders.   From September 2013 to February 2014, I worked as the Webmaster for the club. My primary jobs included maintaining all the databases, the website, and fixing any issues that members or the other board members found. I also helped run our social events as well as our many trip to top ski destinations. After building an iOS mobile application for the CPSC’s annual Big Trip which was to Jackson Hole, I chose for my senior project to continue on with the development of an app to meet the needs for the club as a whole.  1.1 Description of the Problem During my time working as the Webmaster for CPSC, I noticed a lack of effective communication between the executive board and the members. The only way that the executive board could keep in contact with the members of the club was through email and posts to the website. This caused many issues because there was not a simple way for the board to send out important updates to the members. Also the mobile version of the website was difficult to navigate.   The application that I have created for my senior project will help replace the mobile version of the site, and allow members to get the information they want at the tip of their fingertips. Another problem that the new application helps to solve is with the outdated physical membership card. Currently each member has a card that has deals on it, but members often lose the card, or not keep it with them in their wallet or the like. These issues, as well as the earlier creation of the Big Trip App, motivated me to try and create an app to fix these problems. This was when I decided that this would be a good senior project.    4 1.2 Overview of the Solution The solution to the problem above includes the creation of a mobile application. I decided to start with creating an iOS application as I had a better background using that technology. After talking with the executive board as well as some members, a list of features was born. A key issue was the ability to send out important information to members quickly and easily. This was to be done by using push notifications, and since I did not want to have to manage this myself, I decided to the run the application on the Parse [1] framework. The Parse framework allowed for easy handling of push notifications as well as the ability to send them out.   Another important feature was to require users to have to login because the executive board only wanted members to have access to the information being provided in the app. The homepage was something that was high on the list of important features because, through the homepage, members could view important weekly updates, sponsor of week information, the upcoming events for the club, and other noteworthy things that happened during that week. Some other features that were important, but not as high on the priority list, were the abilities for members to sign up for the trips, contact the executive board through email, and for the members to access their membership card via their phone so they would not have to carry around a physical card. After deciding on the features that the app would include, I consulted my friend Tyler Ackelbein, a graphic designer and former executive board member, and started planning and designing the application.   1.3 Outline of the Report The remaining sections in this report include the important aspects of my project. It starts off with an overview of the Big Trip App, the project that helped lead me to do this application, and then leads into a overview of how the important features work. I then go over the design process that I took with my graphic designer and then talk about how the app works. I also go over what mini-apps that needed to be made on the server side to make it simple for the executive board to update the homepage and send out push notifications. I end the report up with what testing I did and what the future of the app will be.      5 2. Pilot Project - Big Trip Jackson Hole iOS Application Prior to building my senior project application, I built an application for Big Trip Jackson Hole 2013. In addition to providing useful information to club members, building this application helped me to familiarize myself with the Parse.com as well as brush up on my iOS skills. In the application, the board was able to send push notifications to the users. The users were able to get directions to restaurants we were visiting, view a trail map on the mountain, contact the board via email, view an itinerary from the trip, get walking directions back to the condos with one push of a button, and view a custom Instagram page that showed photos that had a special hashtag specific to the trip. Below are some screenshots of the app used from the trip.  Figure 1: Home and Trail Map Pages from the Big Trip iOS App    6   Figure 2: Key Spots and Executive Board Pages from the Big Trip iOS App            After using the application during the trip, I gathered feedback that helped me to shape the features for the CPSC app. The main issue that was brought up was that after a push notification was received, there was no way for a user to view it again. This helped me because it forced me to figure out a way to save the push notifications to a central database so that they could be streamed to the device. This is now a feature in the CPSC app. Overall, I gained positive feedback from the members on the trip as well as the company running our trip.    7 3. User Interface Design After getting a rough feature list, I started working with my graphic designer Tyler Ackelbein to create mockups of what the app would look like. Since Tyler had been thinking about this app for a while before I had approached him, he already had a couple of layouts created. As the UI mockups evolved I started transferring them into Xcode so that I could start creating the basic button flow and page transitions.   We decided that a tab bar would be the best choice for the top-level interface because it allows users to switch easily between pages. After I had transferred all of the UI to Xcode, I took screen shots and sent out a survey to all of the members of the club. Below, you will see the first UI screenshots for the app.     Figure 3: Login and Home Pages from Initial Design  8   Figure 4: Recent and Trips Pages from Initial Design   9   Figure 5: Deals and Contact Pages from Initial Design         10 3.1 Design Survey After finishing up the designs with Tyler, we sent out a survey to the members to gain feedback on the design. One of the biggest issues that people had was on the login page. They were not a fan of the new logo and were wondering where the old “ski club mountain” logo was. Another issue was the color scheme that we used. People who took the survey were generally not fans of the “Barney Colors” that we used.   The survey that I distributed to the over 2000 Facebook friends of the club via Google forms can be found here. The data from the survey can be seen below in the chart.   Figure 6: Data collected from the Design Survey.       11  3.2 Final Design After receiving feedback from the survey, Tyler and I went back to the drawing board and did a complete overhaul of the design including colors, layouts, and logos. The below images are the final designs that we came up with.   Figure 7: Login and Home Pages from the Final Design      12   Figure 8: Recent and Deals Pages from the Final Design    13   Figure 9: Trips and FAQ Pages from the Final Design    14   Figure 10: Contacts and Contact Designer/Developer Pages from the Final Design         15 4. App Flowchart The following image shows the overall flow between the pages of the application. Further details of each page are described in the technical sections.    16 5. Technical Details The following sub-sections explain how the backend for each of the pages works what design decisions were made to make them look the way that they do. As a whole, the app is built upon a tab bar view. As noted earlier, this makes it easy for the user to switch between pages.   5.1 Login Page                                                                                                                     The Login Page has a pretty straightforward layout. It includes a text field and three different buttons that do their specified job. The “Not a Member?” button takes the user to the mobile sign up page on the cpsconline.com website. From there, they can sign up for the club. Once they are member, they can return to the app where they can login and access the rest of the features. The user will login by typing in their membership email and pressing the “continue” button. If there is nothing in the textfield when the user presses continue, the user will see an alert letting them know that they need to enter in an email address. On the other hand, if there is text in the textfield, the app will grab the text from the text field and call a PHP script the server. This script will validate whether or not the email is in the database. If the email is not in the database, they will see an error alert. If it is in the database, the user will be directed to the home page. Also if the email is valid, it will be saved in the app so that they don’t need to type it in again. The other button on the page is the “Click Here” button. This button is there if the user forgets their membership email address. Once clicked, a email page will open where they can send an email to webmaster@cpsconline.com so that they can be helped. This simple layout and feature list was built in this way to make it very intuitive for the user.  17 5.2 Home Page  The Home Page is built upon a table view with expanding cells. When a user presses the down arrow (look to left at Weekly Update), it will expand the cell to include a textview under it (look to left at That Guy). From there the user will be able to read what is in the textview. The whole expansion process can be reversed if the user presses the up arrow (look at That Guy). The Home Page includes four cells which are “Weekly Update, That Guy, Sponsor of the Week, and Upcoming Events.” Each cell has its own data that it receives from calling a PHP script on the server. This script returns JSON [2] and that JSON is parsed by the app and put in the according cell. The administrator can update the data that the script returns by going to a private URL and typing in the text that they want in the interface that is shown in the Server Side Administration section. The data is pulled to the app when the page is first opened or the user can do it manually by pulling down the table view. In order to not get cached results, I had to implement a random string method that is added onto the URL for the PHP script. This makes sure that the updated data is shown and not old. In the top right, you see an info button. This button is on every page and it take you to the About Us Page which gives information about myself and my graphic designer. You can read more about the About Us Page later on in the “About Us” section.    18 5.3 Recent Page  The Recent (Push Notification) Page is also built upon a table view. The cells change size according to how much text it needs so that all of the text will be displayed at once. The cells receive their data by calling a PHP script that returns JSON and is then parsed to grab the correct data. This PHP script gets the fifty most recent push notifications from the database online. These are the same push notifications that the app receives. When the app receives a push notification a global variable is set. If the user attempts to access the Recent Page, the app will check to see if that variable is set. If it is, it will call the PHP script to grab the newest push notifications and table will be updated. The admin sends a push notification via private URL. This process is similar to updating the home page. You can find more about this process in the Server Side Administration section.              19 5.4 Perks Page  The Perks Page is very simple. It is just a uiimageview that contains an image of the membership card. The membership card for the club contains deals for local bars, restaurants, and shops. I put the card on the app so that users don’t have to carry around the physical card. The imageview is the only aspect of the Perks Page.                     20  5.5 Trips Page  The Trips Page is built upon a imageview with buttons at the top and a table view below. Each table view cell contains the information pertaining to each trip such as an image of the mountain that you will be visiting, dates for the trip, the location, and the price. The first cell contains the information about “Big Trip.” “Big Trip” is a weeklong trip that is during the first week of winter break. The location and price are released on October. Once the location is released, the app will be updated with the correct information. Each cell is also clickable, and when the user taps on a cell, they’re taken to the specific web page to sign up for the trip. The web page is only active when the Webmaster makes the signups available. The trips page also contains a button to the FAQ Page. This page, as shown in the Flowchart above, gives the user everything they need to know about going on a trip such as what to bring, how a ski club trip works, etc.                21 5.6 Contacts Page  The Contacts Page is also built upon a imageview with buttons at the top and a table view below. Each cell contains the information about each board member. This information includes their name, where they are from, and their position. On the right of the cell, there is a mail button. If the user clicks on that button, an email view will appear and the user can email the corresponding board member any question they may have. Above the table view, there is a uiimageview that contains four buttons. The left three buttons will take the user to the corresponding social media page such as Facebook, Twitter, and Instagram. The fourth                22  5.7 Contact Developer/Designer Page  The Contact Developer/Designer (About Us) Page is accessible by any page on the app except the Login Page via the info button in the top right corner. Once the user presses the info button, it takes them to this page via a modal connection and a table view is displayed. Each cell has a picture of the person, developer or designer, as well as certain buttons that take the user to the corresponding app. My (developer) cell contains links to send me an email, check out my Instagram page, and my Facebook page. Tyler’s (designer) cell contains links to his dribble page, Instagram, and his Facebook page. If the user wishes to return back to the previous page, they can press the back arrow in the top left.               23 6. Testing and Validation At first when testing the app I just ran the app on my phone, and made sure all the links worked, and all the data was being displayed correctly. Even though this helped me fix some bugs, I knew that I needed others to test it out. After talking with a few friends that also do iOS development, they pointed me to TestFlight [3]. This app/service allows you to push out executables to testers, which allows them to beta test. One of the best testers that I had was Yan Downing, the Webmaster of CPSC from a few years back. He currently has a career in iOS development, and helped me fix some issues with the layout as well as some minor bugs. Below is the feedback that he sent me.  24 There was not sufficient time in the project to develop a code-level test suite, to support regression testing.  This work has been level for future developers. They can find more information about testing the app http://iosunittesting.com/category/general/. 7. Server Side Administration Even though most of my work was focused on pure iOS development, I had to think of ways to authenticate users as well as push data to the app. For both problems that I had to fix, I decided that creating PHP jobs on the server would be the best option. This gave me direct access to the databases as well as give the executive board a simple way to send push notifications and update the home page. For authentication, pulling data for the home page, and pulling data for the push notification page, the app calls the correct URL and in turn runs the PHP script and sends back JSON where the app then uses the data received in the correct manner. If the board members were to update the home page or send a push, they go to the secret web URL and then fill out the correct form  and press submit. That in turn will update database with the new homepage information or send out a push notification. Below are the simple interfaces that I have created to allow the board members to interface with the app.      25 8. Related Work After doing many Google searches to find similar projects to mine, I wasn’t able to find any. Most ski clubs are small and don’t have a need for such an app. My app is probably the first of its kind, which is very interesting. I don’t even know of any sororities or fraternities that have in house apps.  While I was not able to find mobile apps for university clubs such as ours, there are some apps offered by universities that provide general information on events and items of interest to students.  Examples of these are mobile apps from the University of Georgia [4], UC Berkeley [5], and Ohio State [6].  9. Conclusions and Future Work From the beginning of last year, I knew this was what I wanted to do for my senior project. This club gave me so much over the past four years and I thought that this would be the best way for me to give back so that the club could live on. Without the help from Tyler Ackelbein as well as all the others who helped me test and refine the app, the app would not be as good as it is today.   The plan for the app is to be released this summer for the next upcoming school year. I will still stay on and consult and possibly help work on the Android version of the app. I also plan to be the sole person in charge of the app until I can find someone suitable to pass it on to. Overall, I had a lot of fun working on this project and I am very happy with what the end result was.  10. References  1. https://www.parse.com/ 2. http://www.json.org/ 3. https://www.testflightapp.com/ 4. http://eits.uga.edu/web_and_applications/mobileapps 5. http://www.campusquad.co/campus-quad-introduced-to-clubs-at-university-of-california-berkeley/ 6. http://www.osu.edu/downloads/apps/     

Central Pacific Ski Club iOS Application

https://digitalcommons.calpoly.edu/cgi/viewcontent.cgi?article=1040&amp;context=cscsp

Central Pacific Ski Club iOS Application

Abstract

Similar works

Full text

Available Versions

DigitalCommons@CalPoly