What Developers Will Learn After iOS Development

Crash course: App development for iPhone & iPad

As impressive as the technology in our iPhone and iPad may be, it would be of little use to us without the appropriate apps. Calendars, note-taking programs, image editing and games are what really bring Apple's portable devices to life. But what we naturally download from the App Store does not come about by itself: software developers and designers put a lot of heart and soul into the necessary development process. Quite a few of them even earn their living with it.

To develop an app for iOS, you need a Mac and the free Xcode development environment, which you can download from the App Store. Since iOS 7, a paid developer account is only required if you want to publish your app in the App Store. All you need for private use and for trying out is an Apple ID.

An iOS device, i.e. an iPhone or iPad, is not absolutely necessary, as the self-developed app can also be tried out in a simulator contained in Xcode. However, it is of course an advantage if a real device is available for testing. The app developed in this article works on all iPhones, iPads, and iPod Touch models that support iOS 10.

If you want to publish an app, you must participate in the Apple Developer Program. This participation costs US $ 99 per year and includes access to TestFlight and other analysis tools as well as access to beta versions of iOS, macOS, watchOS and tvOS.

Create a new project

The app developed in this course has a very simple task: converting a dollar amount into euros. To do this, the user can enter the current exchange rate and the desired dollar amount using an input field and receives the corresponding amount in euros by tapping a button. It will show that a lot of knowledge is required even for such a supposedly simple app. But don't worry: we'll show you step by step how it works.

Open Xcode and click on "Create a new Xcode project" in the start window. In the upper area of ​​the selection window that now appears, select the category “iOS” and then the application type “Single View Application”. With a click on "Next" you get to the project settings. You can choose any product name, it will later correspond to the name of the app. Ideally, you choose the name "dollar rate", which we also use in this course. Developers enter the name of their software company in the fields "Organization Name" and "Organization Identifier", for example "mycompany" and "com.mycompany". The product name and the Organization Identifier together form the "Bundle Identifier". This must be unique for each app. Since the app developed in this workshop will not end up in the app store, the information you have just entered is no longer relevant. So you can let your imagination run wild.

In the “Language” selection box, select “Swift”. This is the programming language that was released in 2014 and developed by Apple, which will initially exist alongside the aging predecessor Objective-C. Presumably, however, it will replace it over time.

You can use the “Devices” selection box to determine whether the app should only run on the iPhone, only on the iPad, or on both device classes. This decision is up to you, but in this workshop we are assuming the setting “Universal”. In the case of a universal app, you can later programmatically (i.e. via source code) query on which device it is running and the user interface and the range of functions can be adapted accordingly. However, this would go beyond the scope of this workshop. The checkmarks for “Use Core Data”, “Include Unit Tests” and “Include UI Tests” remain deactivated.

After clicking on "Next" you can select the storage location for the Xcode project. The check mark for "Create Git repository" also remains deactivated. Finally, click on “Create”, which will generate the project and the basic source code files.

Start the app in the simulator

The large selection of different iOS devices over the past few years would make it a very expensive proposition if you had to purchase all available device classes for testing purposes. The simulator belonging to Xcode can help here. With this you can test your own app at any time in different resolutions and for all relevant device classes. Even device rotations, gestures, Siri, Apple Pay, Touch ID and much more can be simulated in this way. However, professional developers will never rely solely on the simulator.

The Xcode project created in the previous step already contains everything that is needed for an executable app. This currently still consists of a white area, but can still be started with the help of the simulator and also on the end device. To do this, you must first select which device is to be used. To do this, click on the selection area next to the name of the app in the left half of the title bar of the Xcode window and select, for example, "iPhone SE". The project is now compiled by clicking on the "Execute" button (small arrow at the top left in the title bar). Compiling means that an executable program is created from the source code files that can be run on the end device. It then takes a moment for the simulator to start for the first time. A little patience may be required here. If everything went well, you should now see a simple white window showing the title bar known from the iPhone, consisting of provider ID, time and charge status.

By default, the simulator displays the app with a scaling of 100 percent. Depending on the resolution of your Mac and the selected target hardware, you may have to scroll the simulator to see all parts of the app. Alternatively, you can select a scaling factor in the menu of the simulator under "Window> Scale".

Start the app on an iOS device

Connect your iOS device to your Mac using the cable provided. To start the app, you must first save your Apple ID in the Xcode settings. To do this, select “Xcode> Preferences> Accounts” in the menu and click on the small plus symbol at the bottom left. Now select “Add Apple ID” and enter your Apple ID and the associated password in the window that appears. A certificate is then automatically generated, which is also required for the execution. Now make sure that the project navigator is activated in the left area of ​​Xcode by clicking on the folder icon in the top left. Now select the top entry in the tree view (dollar rate) and “Targets> Dollar rate” as well as the “General” tab in the project settings that then appear. Under the “Signing” category, you can now select your Apple ID using the “Team” selection box.

Next, click the selection area next to the name of the app in the left half of the title bar of the Xcode window and select your iOS device as the execution target. If you now start the app, an error message will appear first. However, this is not too tragic, because there is only one last setting missing on your iOS device. Open the “Settings” app and go to the “General> Profiles & Device Management” category. Click on the entry under "Developer App" and finally on "Trust ID". Everything is now prepared and a click on the Run button (small arrow at the top left in the title bar) starts the app on your iOS device. Since no user interface has yet been designed, it will initially remain with an empty, white image.

Design the user interface

Xcode offers many thoughtful ways to design the user interface of an app. You can add buttons and other control elements by simply dragging and dropping them. Even the logical flow of a more complex app can be configured to a certain extent by using so-called storyboards, without writing a single line of source code.

First, make sure that the Xcode window view is configured correctly. This is essentially divided into four areas: Navigator, Debug area, Utilities and the actual editor, in which the source text and the user interface are edited. In the right area of ​​the title bar, these areas can be shown and hidden using the corresponding buttons. Now make sure that both the Navigator and the Utility area are visible. The debug area can remain hidden for the time being, which provides a better overview. The “Show the Standard editor” button, on the other hand, should be activated.

Now select the “Main.storyboard” file in the navigator on the left with a single click. If you have accidentally opened the file with a double click, its contents will appear in a separate window. Close this and reopen the file with a single click.

The editor window now shows the Interface Builder, in which you can see the so-called View Controller, which - to put it simply - represents the view of our app. So that this can be provided with buttons and other elements, the "Object library" must first be activated by clicking on the small circle next to the curly brackets in the lower part of the utility area. This contains all the objects required for this workshop.

The development of an app is an extremely extensive topic with many individual aspects. Of course, we cannot go into every detail in a crash course like this one. We limit ourselves to the absolute basics and show, using individual steps, how an app is created from an idea and which tools are necessary for it.

Now insert an object of the “Label” type into the view using drag and drop and make sure that the label “snaps into place” in the upper left corner. Xcode helps you with this by showing blue anchor lines as soon as you have dragged the label close enough to the left or top edge of the view. Now drag the label across the right handle until it clicks into place on the right edge of the view. A label is static text with no further possible interactions.

Now insert a Text Field object in the same way. This should snap into place at the lower edge of the previously inserted label and also be widened to the right edge using the right handle. Text fields can both represent text and receive user input. Repeat these steps with another label, a text field, a button and a label. Now click on the first label and then on the small, slider-like icon called "Show the Attributes inspector" in the upper right corner of the utility area. In the input field under "Text" you can now enter the text that should appear in this label. In this case, select "Exchange rate (dollar price)". Do the same with the other two labels and enter the text "Amount in dollars" and "Amount in euros". So that the user can only enter numbers in the input fields for the dollar amounts, the entry “Decimal Pad” must be selected under the “Keyboard Type” setting. Now the only thing missing is the label on the button. Click on this and enter the text “Convert” in the input window under “Title”.

If you now start the app and turn your iOS device (this works in the simulator using the "Hardware" menu), you will notice that the width of the controls does not adjust correctly. The same applies if, for example, you select an iPad as the target in the simulator. This is because the so-called constraints are still missing. This is information about where which control elements are docked and how they should behave in relation to other elements or the display edge. You can think of it like small rubber bands that are between individual controls and the edge of the app. Using these settings, it is possible  for an app to have the same proportions on different devices.

Constraints are quite a complex topic, but will not be discussed further in this workshop, because Xcode allows you to add simple constraints automatically. To do this, first click on the "View Controller" entry so that no control elements are selected. Then click in the lower right corner of the editor on the small symbol that shows a triangle between two lines. The context menu that then appears is divided into two areas: "Selected Views" and "All Views in View Controller". In the second area, click on “Reset to Suggested Constraints”. Xcode now automatically adds all necessary constraints. Start the app again to see the result. The proportions should now be correct on every device and in every orientation.

// ViewController.swift
// dollar rate
// Created by Heiko Kalista on 07/30/17.
// Copyright © 2017 Heiko Kalista. All rights reserved.
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var edit Exchange rate: UITextField!
@IBOutlet weak var editDollarAmount: UITextField!
@IBOutlet weak var labelEuroBetrag: UILabel!
override func viewDidLoad () {
super.viewDidLoad ()
// Do any additional setup after loading the view, typically from a nib.
override func didReceiveMemoryWarning () {
super.didReceiveMemoryWarning ()
// Dispose of any resources that can be recreated.
@IBAction func buttonUmrechenClicked (_ sender: Any) {
let exchange rate = Float (editExchange rate.text!) ?? 0
let dollarBetrag = Float (editDollarBetrag.text!) ?? 0
let euro amount = dollar amount / exchange rate
labelEuroBetrag.text = "Amount in euros:" + String (format: "% .2f", euroBetrag) + "€"

Breathe life into the app

The basic structure is in place and it is time to implement the actual functionality of the app. To do this, you first have to create a connection between the source code and the controls of the app. It is advisable to initially hide the utility area on the right-hand side, as the space could be a bit tight, especially on smaller screens. All you need to do is click on the small symbol at the very top right in the Xcode window or alternatively the keyboard shortcut [alt] + [cmd] + [0]. Now switch the editor to "Assistant mode" by clicking on the two intertwined circles (top right). The editor now shows two windows side by side. By clicking on “Main.storyboard” in the navigator, the well-known view controller should be visible in the left window and the source code file “ViewController.swift” in the right.

Now click on the upper text field and drag it with a right click (or [ctrl] + [click]) into the source code file, in which a blue cursor will appear. Place this marker directly under the line "class ViewController: UIViewController {". In the context menu that now appears, select “Connection> Outlet” and enter the name “editExchange rate”. A click on "Connect" now inserts a so-called outlet, which represents the connection between the source code and the edit field. Do the same with the second text field and give it the name "editDollarBetrag". Finally, add an outlet for the label of the "Euro amount" and name it "labelEuro amount". Finally, a connection to the "Convert" button is required. Drag this into the source code window as well, but this time directly over the last closing curly bracket at the end of the source code. Select “Connection> Action” in the context menu and enter “buttonUmrechenClicked” as the name.

Now all that's missing is the source code that calculates and displays the final amount. Complete the existing source code as follows:

Warning: Swift is case-sensitive. So type the source text exactly as shown, otherwise there will be errors later when compiling. If you want to save yourself some work, you can ignore all lines starting with //. These represent comments and have no meaning for the actual function of the app.

"ButtonUmenkenClicked" is a function that is called automatically as soon as the user taps the "Convert" button.In this function, the texts of the input fields are first queried, converted into floating point values ​​and then saved in the constants "exchange rate" and "dollarBetrag". The amount is then converted into euros by dividing the amount in dollars by the exchange rate. The result ends up in the constant "euroBetrag" and is ultimately converted into a character string that is assigned to the label "labelEuroBetrag". You should now be able to start and use the app in the simulator as well as on your iPhone or iPad.

Congratulations, you have just developed your first own app! If you want, you can of course experiment with the Interface Builder and the source code and see the results in the simulator or on your iOS device.

Publish the app

As soon as the development process has been completed, it will be published in the App Store. Even if the app developed in this article is not really suitable for publication, we do not want to withhold from you how something like this works.

From a technical point of view, the process is quite simple and straightforward. Nevertheless, it should not be underestimated in terms of time, because the app not only has to meet the requirements of the developer, but also those of Apple. To this end, Apple has published a number of documents that contain guidelines regarding functionality, design concepts, and content restrictions. An app that basically just copies an existing one and just has a different name will be rejected, as will an app that keeps crashing or has a completely chaotic user interface. As a developer, you should therefore keep a close eye on Apple's guidelines, because a rejected app has to go through the entire process a second time.

With TestFlight, Apple provides a way to invite people to a beta test before the app is published in the store. Invited persons only have to install TestFlight and can then start trying it out and send the developer feedback and crash reports. In the case of more complex apps in particular, it makes sense to carry out a beta test of this kind before actually publishing them. However, you must also adhere to the guidelines mentioned above in this case.

For an introduction to Swift Playgrounds, see Mac Life 05/2017. You will also find the corresponding article on the virtual CD for this issue. You can download it from www.maclife.de/webcd by selecting this edition of Mac Life (11/2017) there and logging in with the download code "ML444".

If there are no violations of the guidelines, the app is activated and then appears in the store. This process must also be repeated for updates and bug fixes.

What's next?

If you are interested in app development, we recommend that you first familiarize yourself with the Swift programming language, because developing an app consists largely of programming work. If you have an iPad, you can download the free Swift Playgrounds app and try it out. Although this is primarily aimed at younger audiences, it still gives a good insight into the language.

In addition, of course, the Internet offers you an almost inexhaustible source of information that you should use. With a search engine of your choice you will find many free tutorials and courses that you can use as an introduction. Other contact points that are highly recommended are platforms for online courses such as Udemy, Udacity or Iversity. There you will find both free and paid material. Developers exchange ideas and help each other on the Stackoverflow platform. So if you are faced with a problem, you will definitely find a post there that has already discussed and fixed this problem.

Developing apps is an extensive, multi-layered and complex area. The actual programming in Swift or Objective-C requires a lot of training time, especially if you have no experience in other programming languages. Also not to be despised is the design of a complex and at the same time intuitive user interface.

In addition to the actual development process, it should not be forgotten: You can tell from an app whether it was developed for profit reasons or with passion. Passion for development is therefore one of the most important requirements.

Product notice

Swift 4: The Complete Guide. Develop apps for iOS, macOS and tvOS. Ideal for those switching from Objective-C.