In this workshop you will learn many things that are key to iOS Development and by the end of today, you will know about:
- Swift
- UIViews and UIViewControllers
- Core Data
- Network calls to a third-party API
In terminal, navigate to a folder where you want to save your project. Then
git clone https://github.com/lgrimes/CLG-iosIntro
Today we will be installing Cocoapods, which is a dependency management system for iOS. Cocoapods allows for very fast development because you wont have to re-invent the wheel. Need an imageView that is round instead of square? There is probably a library for that.
If you would like to see what libraries are available, you can check the Cocoapods Spec Repo.
Getting Started with Cocoapods
- Open up terminal and install cocoapods:
sudo gem install cocoapods --verbose. You can omit the--verboseflag if you don't care about seeing any output. - Navigate the root of the cloned repository and run
pod repo updatethenpod install. - Open the file ending in
.xcworkspace, you may be prompted to install additional components for Xcode and this may take a few minutes
The first and main screen we will be creating in the app will use a UICollectionViewController. The main difference between a UICollectionView and a UITableView is the layout. Collections are displayed in a 'flow' layout, meaning they will be populated from left to right, and then flow onto the next row and so on. This makes them perfect for showing images in a grid-like display. TableViews are only for vertical display. Each controller will automatically have a child of the specified class. These controller classes are mainly there for convenience and will already conform to the necessary protocols.
A UICollectionView will be responsible for the display of all of its cells which will be of the type UICollectionViewCell. Most likely, you will need to create a custom class that inherits from UICollectionViewCell if you can't display what you need to with the default layout.
There are a few methods you need to implement in order to get the collection view working as expected. You will need to specify what data you want to load into the collectionView that will then get loaded in the cells, this is done by conforming to the UICollectionViewDataSource protocol.
collectionView(_:numberOfItemsInSection:) will specify how many cells you will
be displaying in that section. Usually this will either be the total count of
some data collection (Array, List etc) or a sub-set of that.
collectionView(_:cellForItemAt:) is where you can start populating your custom/
default cell with all the data and customizing it as needed. Usually you will go
and fetch the object in the data source that corresponds to the index passed in
by the parameters.
The easiest and most precise way to create a view in iOS is using storyboard or .xib, storyboards are preferred. You will be editing the storyboard and xib files using Interface Builder. It is fairly complex and can take quite some time to figure out what is where and how everything fits together. We will discuss this in more detail together.
Most developers will use a third-party library to do their network calls, the most popular one is Alamofire.For this workshop, we will be using NSURLSession as its good to start with the basics. Ray Wenderlichs Tutorial describes this in a lot more detail but will also give you the basics needed. NSURLSession is a very powerful API where you can also create a downloader, not just calls to REST apis.
Today we will be using the Zomato API we will be populating our collection view with one of their curated lists of restaurants in melbourne. These restaurants will be displayed on the main page with a small image, the restaurant name and its rating.
When the user taps this image, they will be taken to a more detailed page with all the other information they may need such as address. This is the page you will be making.
It should include:
- The featured image of the restaurant
- The address of the restaurant
- The rating of the restaurant
- A button that when tapped, takes the user to the menu at the specified URL. API documentation
We didnt quite get to finish our app and make it look how we wanted it to. The restaurant image wasn't the right size and the restaurnt name didn't fit into the label we made. To correct this and make it look much nicer and how you want it, you will need to use something called Auto Layout. Where you can specify where you want the image to be 'pinned' (to the top, to the left, and to the right) to make it grow and shrink accordingly to the device that it is being run on. The screen we made will be displayed differently on every device, so our aim is to make it work for each of these.
- Advanced Add a way for a user to add a review to that restaurant. For this one, you will need to look into Core Data if you want the review to be there when you next open the app too!
- Challenge 1: Its a bit hard to see where the restaurant is without a map isn't it? Add in a MapView so the user can see it on a map!
- Challenge 2: For mobile apps, we should be limiting the amount of network calls we make. Requesting data and then loading it into our app can slow it down, and consume users data allowance. Perhaps an in-app database would be good so we could persist that data. Setup the app to use Core Data and create a 'Restaurant' core data model based on the data we pull from Zomato
We would love it if you could give us some feedback on how you found the workshop today: Survey
- Ray Wenderlich tutorials: Offer some of the best iOS/Mac development and games tutorials out there. Very in-depth with easy to follow instructions.
- StackOverflow: For the non-developers, this every developers best friend and secret. If you don't know the answer or how to do something, look on here.
- Getting Started: Develop an iOS App in Swift: This tutorial created by apple is what this workshop is based around. If you didn't get a chance to finish something, or need to revise, this tutorial will cover most of it.