Student-facing instructions: iOS
==
:::danger
**NOTE:** You don't need to read through this student-facing guide nor execute this yourself. This is only shared with you just in case you need a reference point for how some features look like implemented.
:::
# Flix - Part 1
<img src="https://i.imgur.com/NI82yBi.gif" width="300" ><br>
## Overview
For this unit's app assignment, you'll build the first part of a movie browsing app--similar to Fandango and Rotten Tomatoes--that lets a user view and scroll through a list of movies. To do this, you'll learn how to get data from the internet (via an API) and display it in a scrollable list in your app; two core concepts you'll use in virtually every app you'll ever build! When finished, your app will look similar to the app pictured above.
## User Stories - What will our app do?
A **user story** simply describes the stuff we want a user of our app to be able to do. We'll break up each project into **required** and **bonus** user stories. Once we've listed out what our app should do, we can create a plan of attack.
### Required User Stories
1. User sees an app icon on the home screen and a styled launch screen.
1. User can view and scroll through a list of movies now playing in theaters.
1. User can view the movie posters in each row.
### Bonus User Stories
1. User can view the app on various device sizes and orientations.
1. Run your app on a real device.
## Plan of Attack
Before we dive into building our app, it's helpful to think about a high level approach to how you will implement your user stories. Here's what we'll need to do in a nutshell.
1. **Get a list of movies**--including info about each movie, i.e. title, description and movie poster image.
- To get our movie info, we'll work with a web based **API** whose purpose is to send back whatever data we request. APIs are how all mobile apps get data from the web, Facebook, Instagram, Twitter...if it accesses the internet, it's accessing an API. Every project in this course will pull in data from a web based API, however you **do NOT** need to know the ins-and-outs of APIs to use them, just like you don't need to know the ins-and-outs of how a car's engine works to drive one. All you'll need to know is a few basic concepts and terms which we'll cover in the walkthough videos as we build the app--so buckle up, grab the wheel and let's burn some API rubber! 🏎
1. **Display each movie** in a way that allows a user to scroll up and down to see all movies.
- Once we get our movie list and info, we'll want to display are movies for the user to view. Since we'll have more movies then we can fit on the screen, we'll need to make the list scrollable. Every app has a scrollable view somewhere--think of your facebook news feed, instagram feed, twitter feed...even your settings screen. Thankfully, iOS features a pre-made view for exactly this application, all we have to do is set it up. Enter, the **Table View:** a view that allows us to take any list of things--movies, tweets, posts, snaps--and display each thing in it's own space on the screen. It also allows users to scroll up and down to their hearts content in order to view everything on the list.
## Let's Get Building!
Now that we know what user stories we need to build and have a general plan of attack, it's time to start actually building something! Complete each required user story below by **clicking on its walkthough video and following along**.
### 1. Create the Xcode project
Watch the videos below to get an overview of the project and a tour of Xcode. The video will also walk you through creating the Xcode project for the Flix app, as well as the view controller. Each screen in an iOS app is a view controller. Each view controller has two parts: the visual design (layout of text, images, buttons, etc) is created in Storyboard, and the logic is in the Swift file.
* **Walkthrough Videos**
- <a href="https://www.youtube.com/watch?v=G2POqIl0_2E&list=PLrT2tZ9JRrf6REivIdDnaovVFktqTt36V&index=1" target=blank>Flix - Introduction</a> *5:30*
- <a href="https://www.youtube.com/watch?v=oWRVx0pCKUs&list=PLrT2tZ9JRrf6REivIdDnaovVFktqTt36V&index=2" target=blank>Xcode Overview</a> *10:53*
### 2. User sees app icon in home screen and styled launch screen
When users download your app, it will earn a coveted place on their home screen. When a user taps your app's home screen icon, they'll briefly see a launch screen while your app loads. In this user story you'll configure your app icon and style the launch screen.<br>
<img src="http://i.imgur.com/yot2TFe.gif" width=300><br>
* **Walkthrough Video** - <a href="https://www.youtube.com/watch?v=TNpMarQcYOk&index=3&list=PLrT2tZ9JRrf6REivIdDnaovVFktqTt36V" target=blank>App Icon and Launch Screen</a>
### 3. User can view and scroll through a list of movies now playing in theaters
A seemingly complex user story like this can be made manageable by breaking it up into a set of smaller features and tasks. We'll use the **Plan of Attack** we laid out above to guide us: **Get a list of movies -> Display each movie using a table view**.
* **Walkthrough Videos**
* <a href="https://www.youtube.com/watch?v=9inFtP8j0Bo&index=3&list=PLrT2tZ9JRrf6REivIdDnaovVFktqTt36V" target=blank>Create a Network Request</a> *9:17*
- Install the [JSONView Chrome Extension](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en) to view the data returned from this API: `https://api.themoviedb.org/3/movie/now_playing?api_key=a07e22bc18f5cb106bfe4cc1f83ad8ed`.
- Look at the ["Now Playing" API](https://developers.themoviedb.org/3/movies/get-now-playing) of [The Movie Database documentation](https://developers.themoviedb.org/3/getting-started).
- The video uses the network request snippet below.
* <a href="https://www.youtube.com/watch?v=zjOe5J7gC6A&list=PLrT2tZ9JRrf6REivIdDnaovVFktqTt36V&index=4" target=blank>Table View Setup</a> *12:27*
* <a href="https://www.youtube.com/watch?v=zrXHxOTxIjM&list=PLrT2tZ9JRrf6REivIdDnaovVFktqTt36V&index=5" target=blank>Custom Cells</a> *9:50*
* Network Request Snippet
```swift
let url = URL(string: "https://api.themoviedb.org/3/movie/now_playing?api_key=a07e22bc18f5cb106bfe4cc1f83ad8ed")!
let request = URLRequest(url: url, cachePolicy: .reloadIgnoringLocalCacheData, timeoutInterval: 10)
let session = URLSession(configuration: .default, delegate: nil, delegateQueue: OperationQueue.main)
let task = session.dataTask(with: request) { (data, response, error) in
// This will run when the network request returns
if let error = error {
print(error.localizedDescription)
} else if let data = data {
let dataDictionary = try! JSONSerialization.jsonObject(with: data, options: []) as! [String: Any]
// TODO: Get the array of movies
// TODO: Store the movies in a property to use elsewhere
// TODO: Reload your table view data
}
}
task.resume()
```
### 4. User can view the movie posters in each row
The open source community has developed thousands of useful libraries that makes developing your iOS app easier. We use CocoaPods to specify the libraries that we want in our project, and CocoaPods will take care of downloading and integrating the libraries into your project. We'll use one of these libraries to download the movie posters.
* **Walkthrough Video:** <a href="https://www.youtube.com/watch?v=I-vrY4uEays&list=PLrT2tZ9JRrf6REivIdDnaovVFktqTt36V&index=6" target=blank>Movie Poster Image with CocoaPods</a> *9:59*
* **Prerequisite: [install CocoaPods](http://guides.codepath.org/ios/CocoaPods#installing-cocoapods)** before watching the video.
### 5. Push your project to GitHub
Congratulations 🙌, you've completed all the required user stories for this project! Check out the following walkthrough videos in order to push your project to GitHub and prepare it for submission.
- **Walkthrough Videos:**
1. <a href="https://www.youtube.com/watch?v=TS6qIbmBh-c&list=PLrT2tZ9JRrf6oUda8qqSMwrJWn-SM-BQT&index=1" target=blank>Xcode - Create a GitHub Repository</a> *2:47*
1. <a href="https://www.youtube.com/watch?v=gnm0PqVUB4Q&index=2&list=PLrT2tZ9JRrf6oUda8qqSMwrJWn-SM-BQT" target=blank>Adding a README</a> *3:56*
:::warning
☝️ Use this **[Unit 1 Assignment - README Template](/snippets/ios_university/readme_templates/assignment_1_readme.md?raw=true)** in the above *Adding a README* step.
:::
1. <a href="https://www.youtube.com/watch?v=ZhWIfC8S370&list=PLrT2tZ9JRrf6oUda8qqSMwrJWn-SM-BQT&index=3" target=blank>Xcode - Pushing and Pulling to GitHub</a> *3:56*
1. <a href="https://www.youtube.com/watch?v=8ELbIR67-cQ&list=PLrT2tZ9JRrf6oUda8qqSMwrJWn-SM-BQT&index=4" target=blank>Creating a Gif</a> *2:15*
## Bonus User Stories
The following bonus user stories are optional and meant to serve as an extra challenge if you'd like to take your app further.
### 1. User can view the app on various device sizes and orientations
There are many different iPhones with different sized screens and on top of that, users may want to rotate the device orientation. In order to ensure that your app looks great on all devices and orientations, you'll need to leverage Auto Layout.
- Get started by watching this 15 minute [AutoLayout overview video](https://www.youtube.com/watch?v=YPOuLJT_Rhs&list=PLrT2tZ9JRrf6nGUiTCrs2gxPIhZ0M0Qzm)
### 2. Run your app on a real device
Running your app on a real device is not only incredibly rewarding and a great way to wow your friends, it's a great way to actually test your app really performs and feels. A UI that works great on a simulator when you're clicking around with a mouse, won't always work as smooth on a real device. So plug in your device and install your first app!
Sign in with Wallet
Connect another wallet