This is part 2 of the swift development tutorials. Read part 1 here.

 What is MVC?

MVC stands for Model View Controller. Basically as i already said in the last tutorial it is a way to organize code into different logical units based on their functionality and also to make sure there is controlled communication and responsibilities for different parts of the code. Some details for each component is given below. You can view the videos on Udacity course on swift for more details on MVC. In the examples i will discuss what parts of the game fits into which camp.

• M stands for Model and is the data that is needed for the application. It is the part of the architecture which contains what needs to be displayed. An example of model in a game is the data for the game. Meaning how many players are playing, what level the player is in, what kind of obstacles the player will be facing in the level, what is the score for the player, what are high scores etc.
• V stands for View and is what the user of your application will actually see. View contains the design how the different visual elements are arranged in the screen for the user. View in iOS contains a main screen and multiple visual elements like buttons, text, scrollbars and how they are arranged. Normally the view contains generic elements which can be reused e.g. a button can be reused multiple times in a view in different ways. A view basically displays the elements on screen based on the attributes set on each visual element. For a game View would contain the actual player visual representation, or the map which is visible on the screen to the player, the obstacles, the health bar etc. Normally someone sets the visual attributes on each element and the OS displays the elements based on it’s attributes.
• C stands for Controller and actually is the main component which communicates with model and view and decides what needs to be done. It is like a director telling what should happen. A view should not directly communicate with the model as a view is a generic element and it should not have to know what the data is. That’s where the controller come in it decides what kind of data to retrieve from the model and how to translate it in a form to the view and how to display the data. A controller can get data from a model or get notifications when something changes in a model and update the view accordingly. Also, a view can update view elements through outlets(will discuss later) and get notifications from views when something happens e.g. if user swipes or types something and do something appropriate e.g. update the model or use a external web service to do some functionality.

It is important that the view and model do not communicate directly and instead controllers are used. Why you ask? This is because if the view communicates directly with the model it will be difficult to design model and views and they would need to know a lot of detail about each other. Views would then become not reusable and model would be bound to each view. It is important to follow MVC architecture as it makes managing the code easier and even apple recommends it.

Starting A Project

Now we should working on our project.

• Let’s start by starting XCode. When you start xcode you will see a Welcome To XCode screen. (Screenshot)
• Now from this screen click on Create a New XCode Project and you will see another screen with some options.
• The screen that comes up actually allow you to choose a pre-defined template to start of. As this is only a basic app under iOS section in the left click on application and then select single view application. This is normally a common way to start a new xcode project but as you will get more better with iOS you can use one of the other templates based on what you need. Click Next. (Screenshot)
• In the next screen you give the application name and set some other needed attributes for the project. (Screenshot)
  • For the Product Name enter Pitch Perfect. Apple has some recommendations on how to choose the app name have a look here(Resource udacity has recommended)
  • For organization name you can enter Udacity or your own organization name.
  • For organization identifier try to use maybe your domain to make a unique identifier like if my website is jawadrashid.com i will use the identifier com.jawadrashid . Udacity has recommended to read this article on why domain name should be used.
  • You will see that XCode will show you the app unique bundle identifer in the form of of Organization Identifier + Product Name. It is important that identifier is unique so you should make sure that your organization identifier is unique for that.
  • In language choose Swift as we will be working in swift for this tutorial.
  • For devices choose iPhone. You can also choose iPad or Universal but for this introductory course it is better to choose iPhone as that would fit most people’s macbook screen easily to see the app. Universal app are apps which can run both in iPhone and iPad. Normally for universal app you can use the same view but many times as iPad has much more real estate that you want to make different screens for iPad and iPhone. In this course Udacity choose to only concentrate on iPhone app.
  • Click Next and choose where you want to save the app. Normally people recommend to save apps in your main developer directory but you can choose where you want to save the code.
  • Finally click create and wait and you have got a blank app with some boilerplate code.

Exploring XCode

• You will see three sections in your window. The left section contains the files of your project. This is called Navigator. The middle sections contains the code of the file you have opened in your project. This section is called Editor. Finally, there will be a right section which you will explore in detail later which is called Utility and contains properties, attributes and elements you can drag onto your view.
• In order to understand each section go to Help Menu in Menu bar and click on click on Documentation and API reference. This section contains many help but for now in the top search bar enter Xcode Overview and scroll down and you will see many things included a screenshot of what each section of xcode does. (Screenshot)

Exploring the files

• On the left navigator window click on your main project it should open general section and for now scroll down to section Device Orientation and select Portrait only and deselect all other options for this application only. You can learn from apple documentation how to cater for different orientations. (Screenshot)
• Click on ViewController.swift file and it is the main controller file. You will write code here often.
• For now click on Main.storyboard in the navigator window.
• Now take a look in your xcode window and in the top right corner there will be three icons one will have the window with left sidebar highlighted in black, the middle one with bottom bar in black and the last one will be with right sidebar. These icons can be used to show/hide left side, bottom and right bars respectively. If the right most button is highlighted in blue than click it again to make it gray out/unselect it and the right utility window should hide now. Hiding bars makes it easier to make room for other windows and to concentrate on windows you want to change at current time.(Screenshot)
• On the bottom of the storyboard you will see a button saying w Any h Any. This means that right now storyboard is set for any device. As we are working with only iPhone. Click on the text w Any h Any and make the width to one unit and height to two units as shown in the screenshot. This will make the storyboard look like an iPhone.
• Even though we have not done anything substantial let’s run the app in simulator. For that take a look at your xcode window and on the top left corner you will see a play button. Click on it to start the simulator. It may take some time to start as it is the first time this app is run. Once your app loads you should see an app with white background. This means your app is working. Now go back to xcode and click on the stop button on the right of the play button to stop the app from running.

If you have made it until here you have completed Lesson 1 from Udacity swift course. In the next series of this course we will start building an app by adding buttons and images on the app. I will soon update this series soon with the next tutorial in this series.

The next tutorial in the series is here