My First 🥇iOS app: Photo 📸 Filters App (iOS app)

I am a JavaScript developer who wants to dip my toes in Xcode iOS app development. I built this app overnight 🦉and so can you! For extra fun, I created a Youtube video.

Take away: To build iOS app, we need Mac Book and Xcode. Use Single View App when picking which project. Ctrl + drag is magical ✨

Goal: Build Photo Filters App 📱

Demo of finished photoFilter app

• Step1) Install xcode

I googled and found this video: How to install Xcode on a Mac OS X. In process of installing Xcode, I realized I already have Xcode. Kudos to me! :)

• Start coding with swift on Xcode IDE using apple’s First Swift App Video.

Most of my first go to’s are learn by watching a video of someone showing me step-by-step video.

1. Create a new Xcode Project
2. Single View App (Xcode’s built-in template)
3. Name of Product: PhotoFilters

• Organization identifier (bundle ID*): com.google (Make your own ID)

Note: Guide on how to make your own ID. If you have (or wish to have) a website name google.com make your bundle ID: com.google (this format is called reverse-DNS format) Just as putting the cart before the horse so, com before google)

For further reading about bundle ID: https://help.apple.com/xcode/mac/current/#/deve21d0239c

• Language: Swift

Organization identifier (bundleID)

• Click Next. Save your project. I saved mine under document folder.

save my first app

• Now we are inside of setting’s view. Check out left panel.

setting’s view

• Left side lists files that make up PhotoFilters app

all my files are here

• Add a photo into PhotoFilters folder by drag and drop. Note: Use colorful photo since we will be changing hue of photo by adding random filters. Thank you, Heather for this tip. I originally had a black and white photo and it didn’t work that well.

drag your photo

Bright Parrot photo

• Next, Designing the app: Go to Main.storyboard

Storyboard is where we can visually edit web’s interface.

storyboard ui

• User story 1: PhotoFilter app should have a view function to display the photo.

iOS, ‘image view’ is object (obj) that draw image on the screen. Go to Object (obj) Library and Search for ‘image view’

bottom right hand side obj lib > search ‘image view’

Drag ‘image view’ obj into view controller and center it. Notice the dotted blue guide lines.

centered image view on view controller

With image view selected (you will see blue outline with little square in each corner and mid line of the rectangle), click on Attribute inspector.

Selected View with blue outline and squares in each corners

top right hand side attribute inspector

Attribute Inspectors: Sets various properties for objects in interface.

Go to Image drop down select the image we want to display.

Select our image from earlier. Mine is parrot.jpeg

Parrot is showing up on main.storyboard now!

Select: View > Content Mode > Aspect Fill (‘Aspect Fill’ makes the photo fill in the screen.)

Select Aspect Fill

User Story 1 — Done!

• User Story 2: App UI should display App title and user may click a button to change filters on photo.

Use navigation controller to display top navigation bar|bottom tool bar.

To add a navigation controller, click view controller icon on top bar of view controller. Then select Editor > Embed In > Navigation Controller

view controller icon is selected

To display Navigation Controller

Now Navigation Controller is displayed

Click on your photo to show on top of the Navigation Controller. Notice that View controller now has top bar (shown in gray on top of my photo).

My app with navigational controller

Extra: You can move your app by selecting the view controller bar (bar with three little icons). I moved it to the right so I see Navigation controller on the left and View controller on the right.

Add title: Double click middle of top bar to see blue section appear. Add Title: Filter. Press return to save.

Navigation Title

Add Bottom tool bar: Navigation Controller > Attribute Inspector > Shows Tool bar

Add bottom tool bar

Now bottom tool bar is displayed (in grey)

Add Button: Search ‘bar button’ in the object library

search ‘bar button’ in obj lib

Drag ‘Bar Button Item’ into the bottom bar of the View Controller.

Drag and drop into bottom bar

Double click the item to change its title to ‘Apply Filter’ > press return to save.

Rename Item > Apply Filter

To center my bottom bar title: Drag and drop Flexible Space Bar Button item either sides of title.

Adding Flexible Space Bar both sides of title

Bottom bar title is now centered!

Let’s preview how the app looks on iPhone. Open the assistant editor.

Show Assistant Editor to preview how it looks on iPhone

Switch Assistant Editor > Preview

Then to give ourselves some room, we click on tool bar collapse icons.

Collapse side tool bars by clicking on blue icons left, right

Preview on the Right

To make photo is responsive > Select image view > Resolve Auto Layout Issues menu > Add Missing Constraints

Now interface scales responsively for iphone, ipad, etc.

Responsive default setting

Click ‘+’ on Preview > Select iPad to check for photo responsiveness.

iPad ok!

Connect user interface to code (swift). Code associated with this is in ViewController.swift file. Therefore, switch Assistant Editor from Preview to Automatic (ViewController.swift).

To see Code

Add some function directly from UI to code. While holding down ctrl key drag from our image view into code. This creates Outlet. (‘Insert Outlet or Outlet Collection’) Outlet is variable in our code that is linked to an object in the story board.

In pop up, Name: photoImageView > return (or click Connect) to create the variable.

Build Outlet

UI <> var photoImageView

Let’s created space to render (process to build an output image) the filtered image before displaying in UI.

Place to render

Give Apply Filter button functionality (when user taps on Filter button > apply filter). While holding down ctrl key, drag Apply filter button to the code.

Pop up window, Connection: Action, Name: applyFilter

Press enter to save.

Drag right below context

Give it Action and name: applyFilter

Apply random hue filter to image when applyFilter method is called. This behavior is in system built-in core image.

Final Code

Build and Run the app using iOS simulator > press play.

Build success!

Credit:

• Thank you, Heather for debugging with me. Who knew how hard it is to bring this app live to iPhone? You are a champ!
• Thank you, Frankie for tuning in. You are a rock star!
• Thank you, Apple Dev for providing tutorial video. You gave me a platform to jump off from!