Swift App Tutorial: SwiftStocks (Part I)

SwiftStocks Tutorial Part 1
During this tutorial we are going to develop a simple Swift app. We will create and app with swift that will show the value of some stocks. The app will have the following functionalities:

  1. Show a table with different stocks and values
  2. Search for new stocks.
  3. Show an individual stock in detail.

What you will learn:

  1. How to create a Swift project (Part I)
  2. How to hide the status bar (Part I)
  3. How to use UITableView in Swift (Part I)
  4. How to use tuples in Swift 
  5. How to use switch in Swift
  6. How to use  singleton pattern in Swift (Part II)
  7. How to use web services in Swift (Part II)
  8. How to use the NSNotificationCenter in Swift (Part II)

In order to get the stock values, we will use Yahoo Finance API. Hope you enjoy this tutorial!

STEP 1: Take your time, keep Xcode closed for a while.

The most common mistake is to start coding without planning. STOPPPPP!. Take a deep breathe, and think for a moment. So close Xcode now. Take your time, plan your design, and make a simple sketch. Ok, let’s keep working on this: The first thing we have to do is to think about:

  • How many viewControllers we will have
  • Which functionalities will go in each viewController
  • How we will connect each one to the others
  • User interface, navigation between screens and patterns to use.

So we wanted an app, that should show the user a table with some stock values, with a search functionality to add new values, and with a detailed screen for one stock in particular. In this scenario, it seems that 3 different screens with 3 viewControllers should be a good start point.

  1. Stock Table viewController for the stock values
  2. Stock Search viewController for the search functionality
  3. Stock Detail viewController for individual stocks values

And what about the stock data that we are going to show? who will get that data in order to display it? mmmm…Maybe we could use a singleton Manager to be responsible of gathering it… Lets see how this would look like: App Sketch Not too bad right? So now yes, it is your time beloved Xcode…let’s open it and start coding!!!!!!

STEP 2: The Swift project

In Xcode, go to File>New>Project, and follow the screenshots steps: Swift App Tutorial SwitfStocks Swift App Tutorial SwitfStocks Ok, Xcode provide us a project template with the necessary code to start our financial app. In Main.storyboard you will find the first (and only for now) viewController of your app. Open it. 4 Based in our model, the first viewController should show the user a table with some stocks data. Let’s create it!

STEP 3: The Stock Table viewController (I)

We want to create this screen: Stock Table VC So we have:

  1. A top view with some buttons and a text
  2. A table

The template has provided us a generic “ViewController” as our main view, but we want it to be named: “StocksTableViewController”. Select the swift class ViewController.swift and hit enter to change its name. Now do the same in the class header. You can see the origin file and the final one in the following screenshots. 5 6 Now go to your storyboard. Click on the view controller, and go to the identity inspector in the right panel. As you can see, the class that handle this view controller is still named “ViewController” 7 It no longer exists, so change it to your new StocksTableViewController. 8 OK, now we are ready to start coding our main VC. We will start adding the header view and the tableView below. In the storyboard, add a View (I have changed its background color to green for clarification) Swift App Tutorial SwitfStocks and a tableView to the viewController below: Swift App Tutorial SwitfStocks Lets see how it looks like. Select the iPhone5s and launch the app: Swift App Tutorial SwitfStocks If you see a green square with an empty table below, you are doing fine. If not, go back and review each step! What about the status bar over our green header view? In our prototype it doesn’t appear like that. And remember this golden rule: Designers would look into every pixel of your app…it better be EQUAL to the prototype our you will have a looooong argument! How we can hide the status bar in our app? It takes these simply steps: Add a new property in the info tab of your project: View controller-based status bar appearance = NO Swift App Tutorial SwitfStocks In the General tab, tick the option “Hide Status barSwift App Tutorial SwitfStocks Run it and…Voila! Swift App Tutorial SwitfStocks

STEP 3: The Stock Table viewController (II)

Now, lets add some data to the table. If you don’t know how tableViews datasource and delegate work in Objective-C, I recommend you this tutorial: http://www.codigator.com/tutorials/ios-uitableview-tutorial-for-beginners-part-1/ If you already know how them works, lets see how they look like in SWIFT: In the storyboard, Control-click from the tableView to the Stock Table View Controller. Select it as Datasource and Delegate. Swift App Tutorial SwitfStocks Same method as always right? Now, replace StocksTableViewController.swift code with this:

Let’s see the meaning of commented blocks:

  1. We create an array with some data, in order to use it as our table datasource
  2. In the mandatory method “numberOfRowsInSection” we have to return the length of our datasource
  3. In the mandatory method “cellForRowAtIndexPath” we have to create and return one cell for every row of our table
  4. Finally, we implement the UITableViewDelegate method responsible of the action when a cell is selected

Build and Launch; you should see something like this: Swift App Tutorial SwitfStocks As you see, our data array is now displayed in the table. We still need to add the value of each stock. Let’s use the new tuples*** of Swift. Search (at the top of the class) and change the commented line for the next one:

He we are declaring an array, which contains tuples. Each tuple is made of 1 String and 1 Double. So we can store each Stock symbol with its value, in a unique array. Now we have to make some changes in the  cellForRowAtIndexPath method. We obtain the symbol of the stock from a tuple in an array (not directly from the array), and we can add the stock value from the tuple too.

***Here you have tuples examples with more detail: raywenderlich tutorial Build and Launch; you should see something like this: Swift App Tutorial SwitfStocks Okey! We already have a table with some stock symbols and values. The next step will be to give it some style. Remember that designers will pay attention to details! We have to customize our cell so the final result would be equal to our mockup. Add the following methods:

Here you have the code explanation:

  1. Inside the method willDisplayCell, we can customize our cell. In the //1 block, we are changing the background color of the cell based on the % value of the stock. If it is positive, we put some green color, if it is negative, we put some red color, and if it is 0.0 we put some blue color.
  2. Here //2, we are changing the text properties of the labels: color, font and shadow.
  3. In the method heightForRowAtIndexPath //3, we can specify the row height. We put 120.

Build and Launch:

Swift App Tutorial SwitfStocks
Yes! This is much better 🙂 –EY! there are still some UI differences from the mockup…but let’s keep them for the end of the tutorial– Our first screen is ready, but we are using some example data (that hardcoded array) not real data. Now, we have to create the array with the proper financial data from Yahoo Finance web services, but this is covered in the next episode, where you will learn:

  1. How to create a Swift project (Part I)
  2. How to hide the status bar (Part I)
  3. How to use UITableView in Swift (Part I)
  4. How to use tuples in Swift
  5. How to use switch in Swift
  6. How to use  singleton pattern in Swift (Part II)
  7. How to use web services in Swift (Part II)
  8. How to use the NSNotificationCenter in Swift (Part II)

Here you have the Github project and the download link. Hope you liked this tutorial. Feel free to comment, ask or improve it in the comments section. Bye bye!!!

Follow me: @marioeguiluz

About @marioeguiluz

iOS Freelancer, Entrepreneur and Mobile App Expert

Categories: All, Apps, Development, Tutorial

5 comments

Leave a Reply

Your email address will not be published. Required fields are marked *