SLIDE 1 How to Make an iOS App
A Brief Guide to Getting on the App Store
Emily Van Haren @ CodeChix Madison, March 2015
SLIDE 2 Hello,
IT - Mobile App Development
Madison College, Fall 2012 - Spring 2015
SLIDE 3
Hello,
SLIDE 5 “The first 90 percent of the code accounts for the first 90 percent of the development time. The remaining 10 percent of the code accounts for the other 90 percent of the development time.”
SLIDE 6
My Development Process
Idea Plan Design Code Test Submit
SLIDE 7
The Internet’s Front Page
SLIDE 8
Tonight’s App
A Reddit Feed
SLIDE 9
Idea
SLIDE 10
Idea
What are you passionate about?
SLIDE 11
Idea
What would you use? What are you passionate about?
SLIDE 12
Idea
What would you use? What are you passionate about? Do some market research!
SLIDE 13 Idea
Market Research
http://keywordtool.io/app-store
SLIDE 14
Idea
Market Research
SLIDE 15
Idea
A Reddit Feed ✓ I would use it ✓ I did some market research ✓ I’m passionate about it
SLIDE 16
Idea
Existing Apps
SLIDE 17 Idea
Existing App Reviews
“it’s awesome to look at, but sadly, absolutely worthless [at] actually navigating” “the app has been randomly crashing … it’s getting more and more frequent” “I don’t have time to exit the story/picture then find another one. I would rather just swipe from one to the other.”
SLIDE 18
My Development Process
Idea Plan
✓
SLIDE 19
Plan
Features
What should the user be able to do?
SLIDE 20
Plan
Features ✓ Browse posts from the Reddit front page ✓ See the posted picture, video, website, etc.
SLIDE 21
Plan
Someday… ☐ Create a post ☐ Add comments ☐ Log in ☐ Vote on posts ☐ Vote on comments ☐ See comments
SLIDE 22 Plan
Technologies Back-End Web Server
File storage Authentication Push notifications Databases
SLIDE 23 Plan
Technologies Back-End Web Server
Databases
SLIDE 24 Plan
Technologies Back-End Web Server
File storage Databases
SLIDE 25 Plan
Technologies Back-End Web Server
File storage Authentication Databases
SLIDE 26 Plan
Technologies Back-End Web Server
File storage Authentication Push notifications Databases
SLIDE 27
Plan
Technologies Back-End Solutions
SLIDE 28 Plan
Technologies Back-End Solutions
Roll your own
SLIDE 29 Plan
Technologies Back-End Solutions
Roll your own Back-end as a service (BaaS)
SLIDE 30
Plan
Technologies Back-End Web Server Tonight’s App:
SLIDE 31 Plan
Technologies iOS Frameworks
Core Audio Core Bluetooth Core Data Core Graphics Core Location SpriteKit
SLIDE 32 Plan
Technologies Tonight’s App:
Core Audio Core Bluetooth Core Data ✓ Core Graphics Core Location SpriteKit
SLIDE 33
Idea
✓
Plan Design
✓
My Development Process
SLIDE 34
Design What should the user see?
SLIDE 35
Design
Features (Again) ✓ Browse posts from the Reddit front page ✓ See the posted picture, video, website, etc.
SLIDE 36 Design
Browse posts See a post
Table View Navigation Controller
SLIDE 37
Design
Browse posts See a post
SLIDE 38 Design
Subreddit Score Thumbnail Title
(optional)
SLIDE 39 Design
Sketch It On Paper
+
Graph Paper Colored Pens
SLIDE 40 Design
Subreddit Score Thumbnail Title
Sketch It On Paper
SLIDE 41 Design
Subreddit Score Thumbnail Title
Sketch It On Paper
SLIDE 42 Design
Subreddit Score Thumbnail Title
Sketch It On Paper
SLIDE 43 Design
Subreddit Score Thumbnail Title
Sketch It On Paper
SLIDE 44 Design
Subreddit Score Thumbnail Title
Sketch It On Paper
SLIDE 45 Design
Subreddit Score Thumbnail Title
Sketch It On Paper
SLIDE 46 Design
Subreddit Score Thumbnail Title
Sketch It On Paper
SLIDE 47 Design
Subreddit Score Thumbnail Title
Sketch It On Paper
SLIDE 48 Design
Subreddit Score Thumbnail Title
Sketch It On Paper
SLIDE 49
Design
Browse posts See a post
SLIDE 50
Design
Browse posts See a post
SLIDE 51
Idea
✓
Plan Design
✓
Code
✓
My Development Process
SLIDE 52 Code
Objective-C
Languages
Swift
Released 1983 Released 2014
SLIDE 53
Code
Environment
Xcode
SLIDE 54
Code
New Project
SLIDE 55
Code
Storyboards
SLIDE 56 Code
First Screen First Browse posts
Table View Navigation Controller
SLIDE 57
Code
First Screen First
SLIDE 58 http://reddit.com/.json
SLIDE 59
Code
NSURLSession
SLIDE 60
Code
JSON Response
SLIDE 61
Code
Reddit Post
SLIDE 62
Code
Post Cell
SLIDE 63 Code
Post Cell Subviews
Subviews
SLIDE 64
Code
Initialize the Subviews
SLIDE 65
Code
Initialize the Subviews
SLIDE 66
Code
Initialize the Subviews
SLIDE 67 Code
Subview Frames
width Frame (x, y) height
SLIDE 68
Code
Layout the Subviews
SLIDE 69
Code
Layout the Subviews
SLIDE 70
Code
Layout the Subviews
SLIDE 71
Code
Layout the Subviews
SLIDE 72
Code
Layout the Subviews
SLIDE 73
Code
Layout the Subviews
SLIDE 74
Code
Layout the Subviews
SLIDE 75 Code
Core Graphics Drawn onto a context
Bezier Paths Images Text
Resolution Independent
SLIDE 76 Code
Connexio
1.1 MB 1.4 MB File Size Comparison
4500 x 3000 pixels
SLIDE 77
Code
Triangle by Core Graphics
SLIDE 78
Code
Star View
SLIDE 79
Code
Post Details
SLIDE 80
Idea
✓
Plan Design
✓
Code
✓
Test
✓
My Development Process
SLIDE 81
Test Always test on a device!
SLIDE 82 Test
Xcode Simulator
Accelerometer
Unsupported
Camera GPS Location Data Microphone Gyroscope
SLIDE 83 Test
Developer License
https://developer.apple.com/programs/ios/
SLIDE 84
Test
On Your Device
SLIDE 85
Test Make It Crash!
SLIDE 86
Test
Many Devices
SLIDE 87
Test
Instruments
SLIDE 88
Test Test It Again!
SLIDE 89
Idea
✓
Plan Design
✓
Code
✓
Test
✓
Submit
✓
My Development Process
SLIDE 90 Submit
Waiting for Review
Status
Prepare for Submission
In Review
Processing for App Store
Ready for Sale
SLIDE 91 Submit
Did we follow the rules?
https://developer.apple.com/app-store/review/
SLIDE 92
Submit
Did we follow the rules? Provisioning profiles
SLIDE 93
Submit
Did we follow the rules? Provisioning profiles App Store graphics
SLIDE 94
Submit
Did we follow the rules? Provisioning profiles App Store graphics App metadata
SLIDE 95
Submit
Did we follow the rules? Provisioning profiles App Store graphics App metadata Price point
SLIDE 96
Submit
SLIDE 97 Submit
http://appreviewtimes.com
SLIDE 98
Submit
SLIDE 99
Idea
✓
Plan Design
✓
Code
✓
Test
✓
Submit
✓
My Development Process
✓
SLIDE 100
Thank You
http://viridianink.com/ios-talk