How to Make an iOS App A Brief Guide to Getting on the App Store - - PowerPoint PPT Presentation

how to make an ios app
SMART_READER_LITE
LIVE PREVIEW

How to Make an iOS App A Brief Guide to Getting on the App Store - - PowerPoint PPT Presentation

How to Make an iOS App A Brief Guide to Getting on the App Store Emily Van Haren @ CodeChix Madison, March 2015 Hello, IT - Mobile App Development Madison College, Fall 2012 - Spring 2015 Hello, Hello, Connexio The first 90 percent of


slide-1
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
SLIDE 2

Hello,

IT - Mobile App Development

Madison College, Fall 2012 - Spring 2015

slide-3
SLIDE 3

Hello,

slide-4
SLIDE 4

Hello,

Connexio

slide-5
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.”

  • Tom Cargill, Bell Labs
slide-6
SLIDE 6

My Development Process

Idea Plan Design Code Test Submit

slide-7
SLIDE 7

The Internet’s Front Page

slide-8
SLIDE 8

Tonight’s App

A Reddit Feed

slide-9
SLIDE 9

Idea

slide-10
SLIDE 10

Idea

What are you passionate about?

slide-11
SLIDE 11

Idea

What would you use? What are you passionate about?

slide-12
SLIDE 12

Idea

What would you use? What are you passionate about? Do some market research!

slide-13
SLIDE 13

Idea

Market Research

http://keywordtool.io/app-store

slide-14
SLIDE 14

Idea

Market Research

slide-15
SLIDE 15

Idea

A Reddit Feed ✓ I would use it ✓ I did some market research ✓ I’m passionate about it

slide-16
SLIDE 16

Idea

Existing Apps

slide-17
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
SLIDE 18

My Development Process

Idea Plan

slide-19
SLIDE 19

Plan

Features

What should the user be able to do?

slide-20
SLIDE 20

Plan

Features ✓ Browse posts from the Reddit front page ✓ See the posted picture, video, website, etc.

slide-21
SLIDE 21

Plan

Someday… ☐ Create a post ☐ Add comments ☐ Log in ☐ Vote on posts ☐ Vote on comments ☐ See comments

slide-22
SLIDE 22

Plan

Technologies Back-End Web Server

File storage Authentication Push notifications Databases

slide-23
SLIDE 23

Plan

Technologies Back-End Web Server

Databases

slide-24
SLIDE 24

Plan

Technologies Back-End Web Server

File storage Databases

slide-25
SLIDE 25

Plan

Technologies Back-End Web Server

File storage Authentication Databases

slide-26
SLIDE 26

Plan

Technologies Back-End Web Server

File storage Authentication Push notifications Databases

slide-27
SLIDE 27

Plan

Technologies Back-End Solutions

slide-28
SLIDE 28

Plan

Technologies Back-End Solutions

Roll your own

slide-29
SLIDE 29

Plan

Technologies Back-End Solutions

Roll your own Back-end as a service (BaaS)

slide-30
SLIDE 30

Plan

Technologies Back-End Web Server Tonight’s App:

slide-31
SLIDE 31

Plan

Technologies iOS Frameworks

Core Audio Core Bluetooth Core Data Core Graphics Core Location SpriteKit

slide-32
SLIDE 32

Plan

Technologies Tonight’s App:

Core Audio Core Bluetooth Core Data ✓ Core Graphics Core Location SpriteKit

slide-33
SLIDE 33

Idea

Plan Design

My Development Process

slide-34
SLIDE 34

Design What should the user see?

slide-35
SLIDE 35

Design

Features (Again) ✓ Browse posts from the Reddit front page ✓ See the posted picture, video, website, etc.

slide-36
SLIDE 36

Design

Browse posts See a post

Table View Navigation Controller

slide-37
SLIDE 37

Design

Browse posts See a post

slide-38
SLIDE 38

Design

Subreddit Score Thumbnail Title

(optional)

slide-39
SLIDE 39

Design

Sketch It On Paper

+

Graph Paper Colored Pens

slide-40
SLIDE 40

Design

Subreddit Score Thumbnail Title

Sketch It On Paper

slide-41
SLIDE 41

Design

Subreddit Score Thumbnail Title

Sketch It On Paper

slide-42
SLIDE 42

Design

Subreddit Score Thumbnail Title

Sketch It On Paper

slide-43
SLIDE 43

Design

Subreddit Score Thumbnail Title

Sketch It On Paper

slide-44
SLIDE 44

Design

Subreddit Score Thumbnail Title

Sketch It On Paper

slide-45
SLIDE 45

Design

Subreddit Score Thumbnail Title

Sketch It On Paper

slide-46
SLIDE 46

Design

Subreddit Score Thumbnail Title

Sketch It On Paper

slide-47
SLIDE 47

Design

Subreddit Score Thumbnail Title

Sketch It On Paper

slide-48
SLIDE 48

Design

Subreddit Score Thumbnail Title

Sketch It On Paper

slide-49
SLIDE 49

Design

Browse posts See a post

slide-50
SLIDE 50

Design

Browse posts See a post

slide-51
SLIDE 51

Idea

Plan Design

Code

My Development Process

slide-52
SLIDE 52

Code

Objective-C

Languages

Swift

Released 1983 Released 2014

slide-53
SLIDE 53

Code

Environment

Xcode

slide-54
SLIDE 54

Code

New Project

slide-55
SLIDE 55

Code

Storyboards

slide-56
SLIDE 56

Code

First Screen First Browse posts

Table View Navigation Controller

slide-57
SLIDE 57

Code

First Screen First

slide-58
SLIDE 58

http://reddit.com/.json

slide-59
SLIDE 59

Code

NSURLSession

slide-60
SLIDE 60

Code

JSON Response

slide-61
SLIDE 61

Code

Reddit Post

slide-62
SLIDE 62

Code

Post Cell

slide-63
SLIDE 63

Code

Post Cell Subviews

Subviews

slide-64
SLIDE 64

Code

Initialize the Subviews

slide-65
SLIDE 65

Code

Initialize the Subviews

slide-66
SLIDE 66

Code

Initialize the Subviews

slide-67
SLIDE 67

Code

Subview Frames

width Frame (x, y) height

slide-68
SLIDE 68

Code

Layout the Subviews

slide-69
SLIDE 69

Code

Layout the Subviews

slide-70
SLIDE 70

Code

Layout the Subviews

slide-71
SLIDE 71

Code

Layout the Subviews

slide-72
SLIDE 72

Code

Layout the Subviews

slide-73
SLIDE 73

Code

Layout the Subviews

slide-74
SLIDE 74

Code

Layout the Subviews

slide-75
SLIDE 75

Code

Core Graphics Drawn onto a context

Bezier Paths Images Text

Resolution Independent

slide-76
SLIDE 76

Code

Connexio

1.1 MB 1.4 MB File Size Comparison

4500 x 3000 pixels

slide-77
SLIDE 77

Code

Triangle by Core Graphics

slide-78
SLIDE 78

Code

Star View

slide-79
SLIDE 79

Code

Post Details

slide-80
SLIDE 80

Idea

Plan Design

Code

Test

My Development Process

slide-81
SLIDE 81

Test Always test on a device!

slide-82
SLIDE 82

Test

Xcode Simulator

Accelerometer

Unsupported

Camera GPS Location Data Microphone Gyroscope

slide-83
SLIDE 83

Test

Developer License

https://developer.apple.com/programs/ios/

slide-84
SLIDE 84

Test

On Your Device

slide-85
SLIDE 85

Test Make It Crash!

slide-86
SLIDE 86

Test

Many Devices

slide-87
SLIDE 87

Test

Instruments

slide-88
SLIDE 88

Test Test It Again!

slide-89
SLIDE 89

Idea

Plan Design

Code

Test

Submit

My Development Process

slide-90
SLIDE 90

Submit

Waiting for Review

Status

Prepare for Submission

In Review

Processing for App Store

Ready for Sale

slide-91
SLIDE 91

Submit

Did we follow the rules?

https://developer.apple.com/app-store/review/

slide-92
SLIDE 92

Submit

Did we follow the rules? Provisioning profiles

slide-93
SLIDE 93

Submit

Did we follow the rules? Provisioning profiles App Store graphics

slide-94
SLIDE 94

Submit

Did we follow the rules? Provisioning profiles App Store graphics App metadata

slide-95
SLIDE 95

Submit

Did we follow the rules? Provisioning profiles App Store graphics App metadata Price point

slide-96
SLIDE 96

Submit

slide-97
SLIDE 97

Submit

http://appreviewtimes.com

slide-98
SLIDE 98

Submit

slide-99
SLIDE 99

Idea

Plan Design

Code

Test

Submit

My Development Process

slide-100
SLIDE 100

Thank You

http://viridianink.com/ios-talk