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 📱
- 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.
- Create a new Xcode Project
- Single View App (Xcode’s built-in template)
- 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
- Click Next. Save your project. I saved mine under document folder.
- Now we are inside of setting’s view. Check out left panel.
- Left side lists files that make up PhotoFilters app
- 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.
- Next, Designing the app: Go to Main.storyboard
Storyboard is where we can visually edit web’s interface.
- 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’
Drag ‘image view’ obj into view controller and center it. Notice the dotted blue guide lines.
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.
Attribute Inspectors: Sets various properties for objects in interface.
Go to Image drop down select the image we want to display.
Select: View > Content Mode > Aspect Fill (‘Aspect Fill’ makes the photo fill in the screen.)
- 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
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).
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.
Add Bottom tool bar: Navigation Controller > Attribute Inspector > Shows Tool bar
Add Button: Search ‘bar button’ in the object library
Drag ‘Bar Button Item’ into the bottom bar of the View Controller.
Double click the item to change its title to ‘Apply Filter’ > press return to save.
To center my bottom bar title: Drag and drop Flexible Space Bar Button item either sides of title.
Let’s preview how the app looks on iPhone. Open the assistant editor.
Switch Assistant Editor > Preview
Then to give ourselves some room, we click on tool bar collapse icons.
To make photo is responsive > Select image view > Resolve Auto Layout Issues menu > Add Missing Constraints
Now interface scales responsively for iphone, ipad, etc.
Click ‘+’ on Preview > Select iPad to check for photo responsiveness.
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).
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.
Let’s created space to render (process to build an output image) the filtered image before displaying in UI.
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.
Apply random hue filter to image when applyFilter method is called. This behavior is in system built-in core image.
Build and Run the app using iOS simulator > press play.