Advanced Mobile App Project 1 Milestone 2

For my first project in Advanced Mobile App Development, I am changing my idea slightly. Originally, I was planning on creating an app to calculate the total weight of items in your backpack based on what gear the user enters into the app (for trekkers, backpackers, climbers, etc.). However, I had so much fun making a Colorado 14ers app during the second lab for this class that I wanted to take the idea further and make a Colorado 14ers Checklist app for this project.

In my app, users will be able to keep track of how many of Colorado’s 14ers they have successfully hiked and climbed. The app allows for keeping track of how many times the user has hiked each peak, as well as entering in some notes about each peak (could include information about a hike attempt, the difficulty of the peak, or whatever the user wants!).

The inspiration for this app comes from the website 14ers.com, which also has the ability to create a “14ers checklist”. I would love an app version that keeps track of some basic information about each peak, as well as information related specifically to my experience with each peak (how many times I have climbed it, notes and details about the climb itself).

My target audience is anyone who likes to hike Colorado’s highest mountains and wants to keep a little journal of which peaks they have successfully (or unsuccessfully) climbed!

Interactive Digital Prototype

Most of the work for this milestone went into creating a digital prototype for my app so that I can test out the flow and user experience before diving into the actual coding. First, I sketched out some basic designs on paper. These might be a little confusing or unclear to others, but they were just what I needed to be clear about my vision for the different screens of the app!

I decided to use InVision Studio for this prototype, since I’ve used it in the past and I really like the Studio iOS UI Kit because it helps to speed up the prototyping process. This process went relatively smoothly, although there were a few hiccups with using the iOS UI Kit components that I had to work around. I was able to fix most of these problems by detaching the components from the library so that I could customize them as needed. Once I figured those out and laid out the general flow of the app, I added a launch screen and published my prototype.

Check out the prototype here! If you get stuck, you can click anywhere on the screen and the “clickable” areas will flash blue.

Overview of prototype in Invision Studio

Some iterations of the visual design

Logic and Algorithms

Much of the logic for this app will be handled by the internal logic of the navigation controllers and table views that will be controlling my view controllers. Hopefully the overall user flow can be sufficiently experienced from using my digital prototype above. Since the navigation is going to be handled by navigation controllers, my biggest jobs will be to load and write to a data file, set up the table views and pass data back and forth between screens.

Walking through my prototype, the first screen will be controlled by a table view controller that pulls in a list of the mountain ranges from my .plist file. The next screen will be another table view, with content generated based off of the mountain range that the user has selected. For instance, if the user selected “Elk Range” on the first screen, the second screen will have a list of all the Elk Range 14ers. Also included on this screen will be an icon for each mountain that has been completed (the little checkbox icon), so that users can quickly see which mountains they have already done. The presence of this icon will be determined by whether or not the “ticks” property of the mountain in question is greater than 0 (ie, the user has hiked that mountain at least once).

Rough outline of my data model

The third screen of the app will feature mountain-specific information based on which mountain the user has picked on the second screen. This data will also be drawn from the .plist file, but the user can write information to this file by increasing the number of ticks or adding notes for each mountain.

For my data model, I will start with an array of dictionaries for the mountain ranges. Each mountain range object will have information about it and an array of more dictionaries (or mountain objects). Then, each mountain object will have information such as elevation, name, number of ticks, hiking class, etc. Check out my planned data model (both in plist form and struct form) below.

	//Data model: Property List
	<plist version="1.0">
	<array> //array of mountain ranges
	<dict> //mountain range object
	<key>totalNumber</key> //total # mountains in that range
	<integer>6</integer>
	<key>range</key> //name of mountain range
	<string>Front Range</string>
	<key>mountains</key> //array of mountain objects
	<array>
	<dict> //mountain object example
	<key>elevation</key> //elevation of mountain in feet
	<integer>14423</integer>
	<key>name</key> //name of mountain
	<string>Pikes Peak</string>
	<key>ticks</key> //number of times user has climbed the mountain (default is 0)
	<integer>0</integer>
	<key>hikingClass</key> //hiking/climbing difficulty
	<integer>2</integer>
	<key>rank</key> //ranking of peak
	<integer>30</integer>
	<key>notes</key> //notes from user (default is "")
	<string></string>
	<key>imageName</key> //string for name of image for easy loading
	<string>pikespeak</string>
	</dict>
	<dict> //all the other mountains in that range
	//…
	</dict>
	</array>
	</dict> //end of mountain range object
	<dict> //all the other mountain ranges
	//…
	</dict>
	</array>
	</plist>
	//Data model: Structs
	struct MountainRange: Codable { //mountain range object
	var totalNumber: Int
	var range: String
	var mountains: [Mountain]
	}
	struct Mountain: Codable { //mountain object
	var name: String
	var elevation: Int
	var ticks: Int
	var rank: Int
	var notes: String
	var hikingClass: Int
	var imageName: String
	}

view raw

14erChecklist_iOS.swift

hosted with ❤ by GitHub

Content Needed

The content I’ll need for this app is mostly information about the peaks themselves, including elevation, class, rank, and range. I already have most of this information in a .csv file on my computer (see below). I plan on using 58 peaks total (all 53 of the ranked 14ers, and 5 more that are technically not ranked but generally accepted as 14ers). Since the rest of the content (# of ticks and personal notes) is going to be generated by the user, I only need to find suitable photos of each peak for that peak’s page in the app (see “Asset” section below).

As referenced in the “Logic and Algorithms” section above, I plan on storing all of the info for these peaks and their mountain ranges in a property list file that can be decoded and encoded (as the user adds their personal information about each peak). I’m holding off of generating the actual .plist file until I do some more testing to make sure my data model will work, but hopefully it shouldn’t take too long once I start the development phase!

Asset Design

I whipped up a few quick icon possibilities and and launch screen, just to get started thinking about my app’s aesthetic. Below you can see the designs I created. I might try to simplify the launch screen a bit because it feels a little bit busy. Otherwise, I’m happy with where they are at for now.

Launch Screen

The last part of asset design I’ll have to (eventually) complete is gathering images of each of the 14ers for their page on the app. I’m holding off on collecting these images for now because I want to make sure the layout will work in XCode with a table view and other elements first. However, below you can see a few different options for image format, depending on what layout I end up working with for the individual mountain page.

Banner format

Rectangular format

Square format

That’s all for now! I’m excited to get some feedback in class on Thursday and start actually developing this project.