Although the term architecture can be intimidating to new programmers, it's not as scary as you think. Architecture can be simply explained as how to better organize your code so that it's easier to build, change and debug.
In this step, we'll take some time to think about how we'll build our app and organize our code.
The goal of this tutorial is to build a photo sharing app. Users shall be able to share photos, follow users and interact with other users through likes.
This is a detailed list of features our app will have:
Sign up and login with email/password
Follow other users
View photos posted by other users
Delete photos you posted
Flag photos other users have posted
You are probably familiar with most of these features from popular social network apps. You might wonder why we included flagging content in this simple photo sharing app. It turns out that it's an important feature to get your app into Apple's App Store. Apple requires apps with user created content to have a flag feature - this way users can report inappropriate content. Since you will likely need this feature in your own apps, we have included it as part of the tutorial.
Once you have decided on your app's features, your next step should be to outline your app's structure. The outline should contain all the screens in your app, and should include how they will be connected. For Makestagram, the outline would look like this:
You should come up with a similar diagram before writing code for your original app - it will give you a better idea of how much effort it will take to build your app.
Project Navigator Organization
Now let's create some groups in our Project Navigator to help organize our code.
Right-click in your Project Navigator to create a new group named Controllers:
Right-click in your Project Navigator to bring up a contextual menu.
In the contextual popup menu, click New Group.
Name your new group Controllers.
We've created our first Project Navigator group. For the rest of our tutorial, we'll place our controller-related code in our new group.
We're off to a good start, but we'll need more that one group to organize our code.
Follow the same process to add the remaining groups below:
When you're done, your Project Navigator should look like the following:
With our new groups, we can move each of the files in our Project Navigator into the correct group.
Drag each of your files in your Project Navigator into the correct group
This will cause in some side-effects resulting in your Xcode project being unable to locate your Info.plist. This is ok, we'll fix this next.
Reconnecting The Info.plist
If you try to run your project now, it'll return the following error:
Oops! Moving our Info.plist seems to have disconnected it from our Xcode project.
Our Info.plist file is a XML representation of many of our app's settings. After moving it into the Supporting Files group, we'll need to reconnect it to our project.
First, select your Makestagram project in your project navigator.
By default, you should land on the General tab. The first section in General will be Identity.
Next, in the empty Identity section, click on the button to Choose Info.plist File....
In the popup prompt, set your project's Info.plist by choosing the file named Info.plist. This will reconnect your project's identity with your Info.plist file.
When you're done, refresh your project's General Settings by navigating to another file and back. You should see your Info.plist connected as before:
If you run your project, you may find a a warning with the following message: Warning: The Copy Bundle Resources build phase contains this target's Info.plist file ...
To remove this warning, we'll need to navigate to our Project Build Phases.
Click on your Project and navigate to the Build Phases tab. Click on the collapsed Copy Bundle Resources and select the Info.plist. With your .plist selected, click the remove (-) button just below:
Build your app again and the warning should be gone.
At this point, our app should be running again without errors. In addition, we've organized our files and resources into each of their respective groups. Keeping our project organized will make it easier to find files we're looking for as we start building our app. As we build our project and add more files, we'll continue to create and reorganize our files into groups.
Intro to App Architecture
When we build apps, we want to try our best to think about architecture, or how we organize our code. Benefits of good software architecture include:
Code is easy for other developers and yourself to understand
Code can easily be changed, added and removed
Code can be reused and shared with other projects
Reduces and manages complexity (you don't have to remember why you did the things you did)
As we think about architecture, one of the most important points to remember is to break the functionality of our code into layers that are independent and can be re-used.
In our project, we'll be using a very common architectural design called Model View Controller, or MVC for short. We will separate our code into the following:
Models store and represent data
Views display the data as UI to the user
Controllers will manage the logic between our models and views
In addition to MVC, we'll create a service layer between our app and Firebase. Our service layer will manage how our app interacts with Firebase, mainly concerning reading and writing data to our database.
We'll also create a few helper objects to make certain tasks separate and reusable in our apps.
In summary, we'll be organizing code we write using the Model View Controller architectural pattern. Having good architecture will make it easy to build new features and debug bugs.