Creating an iOS Catalog App: Part 1

In this series of tutorials, I'm going to go through how to make a fully functional Catalog app. If you don't know what a catalog app is, its an app that displays a list of a items that you are able to interact with. I will be using Objective-C for this tutorial.

In this tutorial you will learn:

• Using Parse databases
• Creating a UITableViewController
• Implementing search bars
• Implementing a filter feature with a custom xib
• Sharing to Facebook and Twitter
• Creating a "Wish List" mechanism
• Using UIWebView to display content
• Using UIPageControl to create a gallery of images
• Using iAd banners and interstitial ads

All of these components will be spread out over a course of at least a few different articles. This may seem like a huge task, but this app is actually fairly easy to create. If you want to view an example of the outcome of this tutorial, check my last post.

Today, I will go over creating an app, creating a UITableViewController and creating a Parse account.

To start off this tutorial, we will first need to create an app. I'm assuming anyone viewing this tutorial is using a Mac so if you don't have Xcode, download it from the app store. Otherwise, open Xcode at this time. When you first open Xcode, select "Create a new Xcode Project". After this, you will encounter a few various options. For our purposes, find the section labeled "iOS"and then select "Application". Next, click on "Single View Application". There are a lot of options when creating a new project so feel free to test everything out some time. Maybe I'll even do a tutorial on other options at some point! Now, you have successfully created your first project. Just create a name for your project and save it to where you want.

Now we get into the fun part. Minimize your Xcode tab and open up your internet browser. Go to www.parse.com. From here, make an account for free. Next, press "Create an App" from the menu. Once your here, enter in whatever app name you like. Now, from the parse site, click on "Docs" and click the download button under the iOS symbol. This will download the SDK you need for Parse. After this search "Cocoa Pods" in google. Go to the website and follow the instructions to set up Cocoa Pods on your mac with terminal. Once this is finished, create a pod file for your app using Google's instructions. Then add "pod 'parse'" to your pod file. After that, go into terminal and type "pod install" in the same directory as your project (you can change directories using the cd command). Congratulations! Parse is now a part of your project!

Lets start some real code now. Open up your Xcode project again and click on storyboard. This area is where we'll create most of the interface for the app. To start, you should have one traditional UIViewController in your storyboard. Let's start off by deleting this since we won't need it for this project. We will be using tab controllers and navigation controllers with this tutorial. Start off by dragging a TabBarController into your storyboard. You can search for this on the bottom right hand side of your screen. Once you have the TabBarController in place, delete any views that are connect to it by an arrow. Next, drag a NavigationController to your storyboard and delete any views connected to this also. Now, click on your TabBarController. There should be a small yellow circle at the top that says "Tab Bar Controller" when you hover your mouse over it. Right click this circle and drag the line that appears over to your NavigationController and release. A menu will appear. Under "Relationship Views", select "View Controllers". This will make your tab bar appear on anything that is controller by your navigation controller. Finally, add a UITableViewController to your storyboard. This can also be found in the bottom right hand corner of the Xcode screen. Click on the Navigation Controller and you should see a little yellow circle at the top of it that says "Home". Right click on this circle and drag it over to your UITableViewController. A menu will pop up. Under "Relationship Segue" select "Root View Controller". This will make a navigation bar appear on your table view. Now select your TabBarController again. On the right hand pane find a section that says "View Controller". Make sure that the check box label "Is Initial View Controller" is checked. This will make sure that a view appears when the app is started. If you run the app now you will see a table view with a navigation bar at the top and a tab bar at the bottom.

This is a lot of information to take if you're just a beginner, so take some time to relax and maybe even review what we've gone over today. All in just one tutorial you created an app, started a Parse profile, and create three different views in your application. If anything in this tutorial isn't working for you, feel free to leave a comment. I'll gladly answer any questions. Hopefully, you enjoyed part one of this tutorial series and I hope to have you back for part two. Have a great night!