Linking to an External Webpage

Topics covered in this iOS Development tutorial:

Coding a link to the webpage, Adding a button, Updating NSAppTransportSecurity

Exercise Preview

Exercise Overview

In this exercise, we will learn how to link to an external webpage.

Getting Started

1. If you completed the previous exercise you can skip the following sidebar. We recommend you finish the previous exercises (1B–2D) before starting this one.

   If you completed the previous exercise, Jive Factory.xcodeproj should still be open. If you closed it, re-open it (from yourname-iOS Dev Level 2 Class > Jive Factory).

   If You Did Not Complete the Previous Exercises (1B–2D)

   1. Close any files you may have open and switch to the Desktop.
   2. Navigate to Class Files > yourname-iOS Dev Level 2 Class.
   3. Duplicate the Jive Factory Ready for External Webpage folder.
   4. Rename the folder to Jive Factory.
   5. Open Jive Factory > Jive Factory.xcodeproj.

Creating the Web View Controller

We’re going to link to a webpage, so let’s make a view to display it.

1. In the Project navigator, click on Main.storyboard.
2. Delete any text in the search bar of the Object library , and scroll to the top.
3. Zoom out of the view until you are at 50%. Then scroll till you have Bands Detail View Controller in the center (it’s the rightmost view controller).
4. From the Object library , drag View Controller onto the Editor below the Bands Detail View Controller.
5. Position the new view controller nicely below the Bands Detail View Controller.
6. We’re about to add a Web View. Make sure you are zoomed in 100% to the new View Controller so you can place it successfully.
7. In the search bar of the Object library , type: web
8. Drag WebKit View onto the empty view controller in the Editor.

9. Resize it so that it fills the View.

   We should use Auto Layout to make sure the Web View fills all screen sizes.

10. Make sure the Web View is still selected, then at the bottom right of the Editor, click the Add New Constraints button .
11. In the options that pop-up, uncheck Constrain to margins.
12. At the top of the options pop up, under Add New Constraints, click all four red lines, making sure they are all set to 0.

13. At the bottom, click Add 4 Constraints.

Creating a Class

As we have done in a previous exercise, we need to create a class for the Web View Controller so we can add the code necessary to go to a webpage.

1. In the Project navigator, select MapViewController.swift. (We want the file to be added after this file, that’s why we had you select it.)
2. Hit Cmd–N to open a new file.
3. Double–click Cocoa Touch Class to choose it.
4. From the Subclass of menu, choose UIViewController (or start typing it and let Xcode autocomplete it for you).

5. For the name of the Class, add Web at the start, so the Class ends up being WebViewController.

   NOTE: ViewController is the object we are currently using on the storyboard. By making this class a subclass of the UIViewController, it will have all the functionality it currently has, plus any additional functionality we add in the code to this new WebViewController class.

6. Click Next.
7. You should already be in the Jive Factory folder, so click Create.
8. Notice a WebViewController.swift file has been added in the Project navigator. Now we need to link it to the view controller in the storyboard.
9. In the Project navigator, click on Main.
10. Select the View Controller with the Web View by clicking on its top bar. It will become outlined in blue to indicate it’s selected.
11. In the Utilities area on the right, click on the Identity inspector tab .

12. Next to Class, type W and it should autocomplete to WebViewController. (If it doesn’t autocomplete, just type it out.) Hit Return to apply it. Now it’s connected to our new class.

Coding the Link to the Webpage

1. If the Document Outline is open, click Hide Document Outline .
2. Click the Adjust Editor Options icon on the top right of the window and choose the Assistant option.
3. You should now have the storyboard showing on the left and WebViewController.swift on the right. If WebViewController.swift isn’t showing on the right side, click the menu bar at the top of the file and choose it.

4. Below the import UIKit statement add the following bold code:

   import UIKit
   import WebKit
   

5. We are going to create an outlet for the WebKit View. Hold Control and drag from the WebKit View in the Editor to the WebViewController.swift file below the class WebViewController: UIViewController line.

6. Set the following:

   Connection:	Outlet
   Name:	siteWebView
   Type:	WKWebView
   Storage:	Weak

7. Click Connect.

8. Add a blank line above the new code so it appears as shown:

   class WebViewController: UIViewController {
   
      @IBOutlet weak var siteWebView: WKWebView!
   
      override func viewDidLoad() {
   

9. In the Project navigator, select WebViewController.swift.
10. Find the viewDidLoad method. Here is where we’ll write the code to go to the webpage. When this view controller loads up for the first time, we’re going to create an external webpage.

11. First we need to define the URL for the webpage. Inside the viewDidLoad method, add the following bold code:

    override func viewDidLoad() {
       super.viewDidLoad()
    
       let jiveURL = URL(string: "http://www.thejivefactory.com")
    
       // Do any additional setup after loading the view.
    }
    

    NOTE: This code creates an instance of an URL object and initializes it with the web address. We now have a usable URL object for our webpage.

12. Next, we need to create an instance of a URLRequest object. Add the following bold code:

    override func viewDidLoad() {
       super.viewDidLoad()
    
       let jiveURL = URL(string: "http://www.thejivefactory.com")
       let myRequest = URLRequest(url: jiveURL! as URL)
    
       // Do any additional setup after loading the view.
    }
    

13. Now that we have the request, we can tell the Web View outlet to use this request object using the loadRequest method. Add the following bold code:

    let myRequest = URLRequest(url: jiveURL! as URL)
    siteWebView.load(myRequest as URLRequest)
    
    // Do any additional setup after loading the view.
    

14. Hit Cmd–S to save.

Adding a Button

Now that we have programmed the web view to load the webpage, we need to add a button to the Bands Detail View Controller that will transition users to this view.

1. In the Project navigator click on Main.
2. Make sure you can see the Bands Detail View Controller, and that you’re zoomed into 100%. It has the placeholder info including Name of Band, Type of music, etc.
3. In the search bar of the Object library , delete any existing text and type: button
4. Drag a Button and drop it anywhere under the Description. We’ll position it in a moment.
5. Click on the Attributes inspector tab .
6. Scroll down to the View options and set Background to Light Gray Color (click the arrows on the right side to open the options menu).
7. Under the Button options further up, set the Text Color to White Color (click the menu that says Default).
8. Click on the Size inspector tab .

9. Next to the Content Insets options, set the following:

   Left:	15
   Top:	8
   Bottom:	8
   Right:	15

10. Double–click the Button in the Editor, change the text to Jive Factory Website and hit Return to apply it.
11. Drag the button below Description, using the guides to align their left edges.
12. We need to create a segue from the Bands Detail View Controller to the Web View Controller. Hold Control and drag from the Jive Factory Website button to the Web View on the Web View Controller (which should be below it).
13. In the menu that appears, click on Push (deprecated).
14. Time for a preview. Set the active scheme to iPhone 13 Pro.
15. Run it!
16. When the Simulator finishes loading, click any of the band listings to go into the detail view.

17. Click the Jive Factory Website button to open the Jive Factory website.

    You won’t see anything except for a blank screen for now. We’ll get the website showing shortly.

Updating NSAppTransportSecurity

The Jive Factory website appears blank because we need to update NSAppTransportSecurity, a feature which was added in iOS 9. It’s essentially a way to secure which URLs can access the app. To do this, you “whitelist” URLs that the app is allowed to access.

1. Switch back to Xcode.
2. We need to add some key-value pairs to our Information property list. In the Project navigator, select Info.plist so we can add those commands.
3. Hover over the last property (which should be Supported interface orientations).
4. You should see a plus icon . Click it to add a new property.
5. In the new text box that appears, start typing App Transport Security Settings. Once it autocompletes, hit Return.
6. Toggle it open by clicking the arrow to the left of App Transport Security Settings.
7. Hover over the new property and click the plus icon .
8. Choose Allow Arbitrary Loads and hit Return.

9. To the far right of Allow Arbitrary Loads, click the double triangles and from the menu select the Boolean value YES.

   This allows any URL to pass through. You can either allow all URLs to be accessed by an application or pick out specific ones to grant access.

10. Hit Cmd–S to save.
11. Let’s try running again to see if this fixed the issue. Click the Run button.
12. When the Simulator finishes loading, click any of the band listings to go into the detail view.

13. Click the Jive Factory Website button. Now the The Jive Factory website should be showing!