Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun

Welcome to iOS and Swift!

Jeff Linwood

jlinwood@gmail.com

@jefflinwood

www.jefflinwood.com

 

Major thanks to our Sponsor, GE!

Agenda

Day 1

12:00pm - 12:30pm - Introduction to the class, students intro, agenda, set up

12:30pm - 1:00pm - Swift and iOS Programming - What goes into building an iPhone app? (Presentation)

1:00pm - 2:00pm - Intro to Swift the Programming Language using Xcode Playgrounds (Hands on Exercise)

2:00pm - 2:15pm - Break

2:15pm - 2:45pm - iPhone App Development Concepts (Presentation)

2:45pm - 3:45pm - Building your first iOS App (Hands on Exercise)

3:45pm - 4:00pm - Wrap Up/Feedback

Day 2

12:00pm - 12:30pm - Review of Day 1

12:30pm - 1:00pm - iPhone App User Interface Design (Paper Prototyping) (Team Exercise)

1:00pm - 2:00pm - Designing a User Interface with Storyboard (Hands on Exercise)

2:00pm - 2:15pm - Break

2:15pm - 2:45pm - Developing a Camera App for iOS (Presentation)

2:45pm - 3:45pm - Building a Camera App (Hands on Exercise)

3:45pm - 4:00pm - Wrap Up/Next Steps

Short Intro from Jeff

Enjoy teaching Intro to iOS Development at UT-Austin

Teach corporate training sessions

Mobile app developer for 6 years, enterprise Java developer before that for 10 years

Student Intros

  • Your name
  • If you've done any iOS programming before
  • Why you took this class
  • What you hope to learn

Set up

Does everyone have Xcode downloaded on their Mac?

If not, get it from the App Store

Learning Resources

Highly recommend the free App Development with Swift ebook from Apple's iBooks Store

Swift Playgrounds app on newer iPads

www.RayWenderlich.com

https://www.apple.com/swift/

Elements of a Mobile App

What goes into building a mobile app? Lots of different choices when you create an app for iOS or Android. Most of the time, there will be wireframes or mockups, a detailed visual design, a mobile app component for each platform, and a server component. An iOS app is usually written in Swift or Objective-C, and an Android app uses Java or Kotlin. There are also cross-platform options like PhoneGap and React Native.

Servers for Mobile Apps

You can use existing services such as Google's Firebase. Another option is Parse, which Buddy hosts, or you can run your own Parse Server. You could also build your mobile app to work with a server you write in a language like Python, Ruby, or Javascript with Node.js.

Development for iOS

When you write code for iOS, you can use one of two languages - Swift or Objective-C. Swift is the newer progamming language we will use in this class. Objective-C is older, so you may find examples of it when you search on Google for solutions, or if you are working with an older project.

Visual Layout tools with Storyboard

Xcode lets you design your application screens in Storyboard, which is a visual editor. To make your screens work on all sizes of iPhones and iPads, you can use Auto Layout tools. These are more complicated than using CSS rules with HTML.

Intro to Swift!

Xcode Playground

File->New Playground...

Make sure iOS is selected

Your first Swift Code!

let name = "Jeff"
	
let greeting = "Hello, \(name)"
	
print(greeting)

What's going on?

  • When we write code, we have a level of abstraction
  • We have variables and constants that can hold values
  • Those have names which the computer understands, but won't be shown to the user
  • Variables vs Constants

More underneath the hood

  • "Jeff" is a String - that's 0 or more characters
  • Strings are data types
  • Some other data types are boolean - true/false, integer - whole numbers, and doubles - decimal numbers
  • Can "fill in the blanks" with strings using String interpolation - like Madlibs!

Playground

Learning Swift

  • Lesson 1.2, 1.3, 1.4 in "App Development with Swift"
  • Variables and Constants
  • Type Inference
  • Math
  • If Else

Variables

  • Single = sign to assign a variable
  • var city = "Austin"
  • var age = 21

Constants

  • let state = "Texas"
  • Can't change the value of a constant

Types and Type Safety

  • String
  • Int
  • Double
  • Boolean

Type Inference

  • If a type isn't declared, then Swift can figure it out (infer) the data type from the value assigned to it
  • "Jeff"
  • 13.1

Math

  • Standard arithmetic - +, -, *, /
  • Modulo operator - %

If Else

var isAdult:Bool
if age >= 18 {
  isAdult = true
} else {
  isAdult = false
}
print(isAdult)
  • Operators (==,!=, >,<,&&,||)

Functions

func isAdult(age:Int) -> Bool {
  if age >= 18 {
	return true
  } else {
	return false
  }
}
  • name, arguments, data type, return value

iOS App Development Concepts

Starting a new project

Guided Tour of Xcode

View Controllers

  • Swift Classes
  • Represent Screens in your app
  • viewDidLoad()
  • View Controller Lifecycle

User Interface Components

  • UIView
  • Labels
  • Buttons
  • Text Fields
  • Switches

Outlets and Actions

  • Outlets - Nouns
  • Actions - Verbs
  • Demonstration

Properties

  • Properties
  • Xcode Autocomplete
  • Demonstration

Colors

  • UIColor.red

Auto Layout

  • Constraints
  • Margins
  • Common problems

Walk through together

Wrap Up of Day 1/Questions

Review of Day 1

Swift

  • Variables - var
  • Constants - let
  • Functions
  • Classes
  • Playgrounds

iOS Development

  • View Controllers
  • Storyboard
  • Outlets
  • Actions

User Interface Controls

  • Labels
  • Buttons
  • Switches
  • Image Views

User Interface Design

App Ideas and Brainstorming

  • Try and come up with ideas that solve problems Austin has
  • Get Creative!
  • Come up with a list of 3 or 4 app ideas
  • Share them with your neighbors
  • Augmented Reality, Virtual Reality, Fitness, Video

Prototyping Methods

  • Paper Prototyping
  • Low Fidelity Mockups
  • High Fidelity Mockups
  • iOS Storyboards

Paper Prototyping

  • Many different ways to make a mobile application design
  • Pencil and Paper works really well
  • You can just draw out the screens
  • Don't have to be limited by your tools

Sketch out your own idea!

  • Take one of the app ideas you brainstormed earlier, and try and sketch out the key screens in the app.

Small Team Exercise

  • Teams of about 3
  • Take one of your ideas and expand it some more
  • Try and get every screen you can think of
  • Draw arrows between buttons or list items that go from one screen to the next
  • Take 10-15 minutes to do this

Designing a User Interface with Storyboard

  • Let's pick one of the app design concepts
  • We will walk through building it out in Storyboard together
  • If we have time, we'll do another one

Image View Exercise

Developing a Camera App for iOS

Starting a New Project

  • Start a new project with Xcode
  • Choose Single View Application
  • Make sure it has Swift as the language
  • Name it PhotoApp

Using the Camera

  • You can use the camera to take a photo
  • Your app can do anything it wants with the photo
  • You can save it to the camera roll
  • You can also load images from the camera roll

UIImagePickerController

  • Apple provides the UIImagePickerController to work with images
  • You need to call it from another view controller
  • Need to implement two delegates on that view controller

Show Image Picker

@IBAction func pickAPhoto(_ sender: Any) {
	if !UIImagePickerController.isSourceTypeAvailable(.photoLibrary) {
		return;
	}
	let picker = UIImagePickerController()
	picker.delegate = self
	picker.sourceType = .photoLibrary
	present(picker, animated: true, completion: nil)
}

Privacy Issues

  • Apple restricts application access to certain functionality without the user's permission
  • Location, Microphone, Push Notifications
  • Camera and Photo Library also fall in this list
  • Add privacy usage descriptions to the Info.plist file

After taking the Picture

  • Need to implement UIImagePickerControllerDelegate methods

Successfully took Photo

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
	if let image = info[UIImagePickerControllerOriginalImage] as? UIImage {
		photoImageView.image = image
	}
	picker.dismiss(animated: true, completion: nil)
}

User Canceled Photo

func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
	picker.dismiss(animated: true, completion: nil)
}

Sharing the Photo

@IBAction func shareAPhoto(_ sender: Any) {
	guard let image = photoImageView.image else {
		return
	}
	let activityViewController = UIActivityViewController(activityItems: [image], 
		applicationActivities: nil)
	present(activityViewController, animated: true, completion: nil)
}

Building a Camera App

THE END

Thank you to Girl Develop It Austin

Follow Up: Jeff Linwood / www.jefflinwood.com