• Create and Test your own iOS 9 App 848px

Free On-Device Testing with Xcode 7

posted in: Tutorial | 0

 

Hey everyone!

As some of you might be aware, the non-beta version of Apple’s Xcode 7 just came out last week. It implements the new Swift 2 syntax, along with the feature enhancements included with the iOS 9 SDK.

This year at the Apple developer conference WWDC 2015, it was announced that you could do free on-device testing with Xcode 7 without needing to sign-up for the Apple Developer’s Program. Another cool announcement during the September launch event was the new 3D Touch support with the iPhone 6S.

If you are not familiar with Xcode, in this session we walk you through the process of building a simple app from scratch. Then we show you how to load it on your iPhone/iPad for on-device testing with Xcode 7.

The tutorial below assumes you have access to a Mac. If you currently don’t have access to a Mac, you have two legit options to rectify this –

  • Go purchase one. The lowest cost entry point is a Mac mini.
  • Use a cloud rental service like Mac in Cloud.

 

Xcode 7: Test your apps on your own iPhone/iPad for Free!

 

Xcode 7 free device test screenshot 700px

 

Previous to the release of Xcode 7, to be able to do any on-device testing with Xcode you had to sign-up for the Apple Developer Program for $99/year. This meant that many new developers just learning how to use Xcode/Swift were stuck within the Simulator only.

 

This is a great opportunity for new developers looking to play around with Xcode 7 and Swift 2, allowing them to see what they have created on their own device without having to commit to paying the $99/year developers fee until they are ready to submit their app into the App Store.

 

If you previously had Xcode 6 installed on your Mac (like I did) all you need to do is update it to Xcode 7 from within the ‘Updates’ tab in your App Store application. Otherwise, if you haven’t previously downloaded XCode before, head over to the App Store and type in ‘Xcode’ in the top right search area. The Xcode Developer Tools icon will show up in the top left corner. Click on ‘Get It‘ and download it for Free. [Note: Ensure that you have enough free space on you Mac, the total size of the app is approx. 3.59GB.]

 

Screenshot of App Store Xcode 7 700px

 

Next, we’ll show you just how easy it is to create you own basic app with Xcode 7 (using the Swift 2 programming language) and then load it onto your own iPhone.

 

Your First iPhone App – On Your Own Device

 

If you are new to Xcode, launch the program by heading down to the Launch Pad icon c to find the app or you can quick launch any application using the keyboard shortcut Command+Space Bar and type ‘Xcode’, then select the top option that appears.

 

The Xcode launch menu should appear. Select the ‘Create a new Xcode project‘ as highlighted below –

 

Screenshot of Xcode entry menu 700px

 

Then when you come to the template window, ensure in the left-hand pane you have selected ‘Application’ under the iOS heading, and then select ‘Single View Application’

 

Xcode Template Screen 1 700px

 

 

When the New Project windows comes up, enter in the details required –

  • For Product Name: Call it something like “myDemoApp”
  • For Organization NameThis can be your own name or the name of your business (if you have one)
  • For Organization IdentifierThis should be “com.[Your Name]” or “com.[Your Business Name]”
  • For Language: Select the pull-down as “Swift”
  • For Devices: Select the pull-down as “iPhone”

 

Xcode Template Screen 2 700px

 

Next, select a location to Create your project. I chose the Desktop as shown below. [Note: Leave the Source Control check box un-checked]

 

Xcode Template Screen 3 700px

 

Project Overview and Interface Layout

 

Initially, in the left-hand pane you have the Project Navigator that shows all the folders and files associated with your new project. Notice that you can toggle this left-hand pane with the other navigator icons such as the Symbol Navigator, Find Navigator, etc.

 

The middle pane view adapts depending on what file you chose from the Project Navigator. As shown below, selecting the project folder gives you the project properties. If you select a “.swift” file, the middle pane changes to the Code Editor. If you select a “.storyboard” file, the middle pane changes to the Interface Builder. [Note: The middle pane also includes a Debug area that is hidden in the view below ]

 

On the right-hand pane you have a split view. The top section is called the Inspector pane, the bottom section is called the Library pane. Similar to the middle pane, the right-hand pane (Inspector and Library) will adapt depending on what files and elements you choose.

To explore the various pane views, you can also just head up to the top menu and select View and Show/Hide as required.

myDemoApp Screen1-800

Next, from the Project Navigator select ‘Main.storyboard‘ to bring the Interface Builder into the middle pane. At the bottom center of the Interface Builder ensure the Any option for the content area layout is selected. In conjunction with something called Auto-layout, this will ensure your app scales and fits correct to various Apple device form factors.

Resize the layout view in the middle pane as required. You can use Zoom by clicking in the white space outside the iPhone view, then click the Right-mouse button (or Ctrl + Left-mouse button).

 

myDemoApp Screen2-800

 

 

Next, head over to the Library in the bottom right pane. Ensure the Object Library icon is selected (the icon with a square inside a circle), then at the bottom search area type in label. Drag a Label Object into your interface. Next, do the same for a Button Object as shown below (in approximately the same locations) –

 

myDemoApp Screen3-700

 

Next, we will use Auto-Layout to constrain the objects to the iPhone view. Select the label object as shown below and click the small Align icon (looks like a tiny horizontal bar chart), check the boxes to horizontally and vertically center the label object in the “Container”. Ensure you then click on Add 2 Constraints to activate them.

 

myDemoApp Screen4-700

 

Next, click on the button object and click the small Pin icon (just to the right of the Align icon), un-check Constrain to margins, enter 50 into the bottom facing box, click in any of the other boxes, then select Add 1 Constraint.

 

myDemoApp Screen5-700

 

With the button object still selected, click on the Align icon again and check the Horizontally in Container option and Add 1 Constraint.

myDemoApp Screen6-300

 

You will notice some orange coloured dimensions which indicates there is a mis-match between what is shown in the iPhone view compared to what your constraints indicate. To resolve this click on the Resolve Auto-Layout icon (to the right of the Pin icon used above), then select Update Frames.

 

myDemoApp Screen7-700

 

Just to the left of your Interface Builder container view, you see the constraints we just added as shown below. Next, we will launch this basic app in the iOS Simulator. Select a simulated iOS device as shown below.

 

myDemoApp Screen8-800

 

I have selected the iPhone 4S for this demo.

 

myDemoApp Screen9-160

 

 

Click on the Play icon to launch the iOS Simulator and you should get something that looks like this – [Note: If the iOS Simulator appears massive on your computer, go to the top menu and select Window -> Scale -> Select 33% or 50%]

myDemoApp Screen10-320

Ensure you click on the Stop icon for the iOS Simulator before you continue on (and each time you run the iOS Simulator when finished with it).

 

Connect our Label and Button to ‘ViewController.swift’

 

Next, we will add a little bit of functionally by connecting our objects between our interface View and the ‘ViewController.swift’ file.

First, switch to the Assistant Editor view by selecting the small icon that looks like two overlapping circles (like the Olympic circles). Also, select off the left pane and right pane by selecting / de-selecting the Hide/Show icons to the right of the Assistant Editor icon.

You will likely have to pan / zoom your Interface Builder view. Your Xcode project view should look similar to this –

myDemoApp Screen11-800

Your view on the right-hand side should show a file path of “Automatic>ViewController.swift>No Selection”.

Next, select the Label object. Right-click and while holding down the right button, drag the blue line over to the Code Editor view and release the button just under “class ViewController: UIViewController { “.

 

myDemoApp Screen12-800

 

This creates a IBOutlet property. An IBOutlet property box appears upon release of the right button above, give it the following settings –

  • For Connection: Select the pull-down as “Outlet”
  • For Name: Call it something like ‘myLabel’
  • For Type: Select the pull-down as “UILabel”
  • For Storage: Select the pull-down as “Weak”

 

 

myDemoApp Screen13-260

 

Next, do the same for the Button object and drag / create the IBOutlet property just under the previous one created.

With the same settings as the Label object, name the Button object something like ‘myButton’.

myDemoApp Screen14-800

 

Next, we will create a function to handle each touch of the button. First we need to connect the button to the View Controller with an IBAction class function. To do this, select the Button object, right-click and while holding down the right button, drag the blue line over to the Code Editor view and release the button just before the last curly brace ” } “.

myDemoApp Screen15-800

 

An IBAction function box appears upon release of the right button above, give it the following settings –

  • For Connection: Select the pull-down as “Action”
  • For Name: Call it something like ‘myButtonTap’
  • For Type: Select the pull-down as “UIButton”
  • For Event: Select the pull-down as “Touch Up Inside”
  • For Arguments: Select the pull-down as “Sender”

 

myDemoApp Screen16-260

 

Your ‘ViewController.swift’ file should now look like that shown below. Note also the small filled grey dots next to each IBOutlet property and IBAction function. This indicates the label and button objects are referenced to the ‘ViewController.swift’ file.

 

myDemoApp Screen17-800

 

Next, before we start adding code manually to the ‘ViewController.swift’ file, you will want to ensure you have line numbers showing for the code editor view. If you don’t, go up to the menu and select Xcode -> Preferences. Select the Text Editing tab and ensure the Line numbers option has a check in it.

myDemoApp Screen18-700

Add some Swift code to ‘ViewController.swift’

 

Next, we will add the following code to our ‘ViewController.swift’ file –

  • On Line 15 we add a counter variable called “myCounter” and assign it an initially value of 0.
  • Within the viewDidLoad() function, on Lines 20-21 we will re-define the text/titles of both our label object and button object. Enter the code as shown below.
  • Within the myButtonTap() function we define what happens each time the button is tapped. With each button tap, we increase the myCounter variable by 1 and update the text of the myLabel property. Each “+” used between the strings indicate that words should be concatenated together.
[Note: If you have a blue flag overlapping one of the line numbers below you have mistakenly set a breakpoint. Right click that blue flag and delete the breakpoint before running the project]

 

myDemoApp Screen19-700

 

Running the project in the iOS Simulator again. You should get something that looks like this – (Click the button several times to see your label text update)

myDemoApp Screen20-320

Test the App on Your Own Device

 

Next, for the cool part with Xcode 7.

Grab your iOS device and lightning cable. Plug your device into a spare USB port on your computer. On your iOS device check the Settings and determine what iOS version you are running. I used an older iPhone 4 below that had iOS 7.1 installed. Click on the iOS Simulator options and you will want to select your iOS device. If you get a non-selectable item called “Ineligible Devices” like that shown below, you will have to change the Deployment Target in your project properties.

myDemoApp Screen21-450

 

From the Project Navigator in the left-hand pane select the top level project folder “myDemoApp”, then in the project properties in the middle pane select the Deployment Target to be the same as your iOS device version that you have plugged into the your computer.

 

myDemoApp Screen22-800

 

If you don’t already have an Apple ID, you will need one. The comparison below shows the differences between having just an Apple ID and actually joining the Apple Developer Program. View the full comparison chart here.

 

myDemoApp Screen23-700

 

Next, you will need to add an Apple ID to the Identity section in your project. If you are still in the project properties view in the middle pane you can select the pull down box next to the Team property. [Note: You can also go to Xcode->Preferences, then select the Accounts tab]. Enter your Apple ID and Password similar to that shown below –

myDemoApp Screen24-700

If you get the “No provisioning profiles found” warning as shown below, click on Fix Issue. 

myDemoApp Screen25-800

 

Next, ensure your device is selected in the top menu similar to this –

 

myDemoApp Screen26-800

 

 

Click on the Play icon, and your first app will launch on your own iOS device.

 

myDemoApp Screen27-800

 

You Did it !!

Party Blower Image 350 px

 

And that is it, you have created your first native iOS app using Xcode with Swift 2. Rotate your iOS device from portrait to landscape and you should notice that your app label / button object re-orientate themselves correctly on the screen.

 

Looking to take your iOS 9, Xcode and Swift skills to the next level…

Check out The Complete iOS 9 Developer Course – Build 18 Apps

 



The Complete iOS 9 Developer Course – Build 18 Apps


 

 

Leave a Reply