###### tags: fbu
:::warning
📬 **[[Submit your app assignment | Submitting Coursework]]** by **{{PROJECT(4) | longdatetime}}** using the [*Submit* button](4#!assignment) 👉
:::
<style>
p.highlight {
margin : 20px 50px;
width : 150px;
}
</style>
<p class="highlight"> test test</p>0
# Flix
<img src="http://i.imgur.com/E2UGTP2.gif" width="250" /><br>
## Overview
For this week's app assignment, you'll build a movie browsing app, similar to apps like 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. The simplest version of an app that supports the core user stories is known as a **Minimum Viable Product (MVP)**. User stories necessary to achieve an MVP will be categorized as **required** while user stories that would be *nice-to-have*, but aren't absolutely essential will be categorized as **stretch**. Points are assigned to each stretch user story to gauge their relative complexity and time to implement, keep this in mind as you budget your development time.
### Required User Stories
1. User sees an app icon on the home screen and a styled launch screen.
1. User can view a list of movies currently playing in theaters from The Movie Database.
1. Poster images are loaded using the UIImageView category in the AFNetworking library.
1. User sees a loading state while waiting for the movies API.
1. User can pull to refresh the movie list.
1. User sees an error message when there's a networking error.
1. User can tap a tab bar button to view a grid layout of Movie Posters using a CollectionView.
### Stretch User Stories
1. User can tap a poster in the collection view to see a detail screen of that movie
1. User can search for a movie.
1. All images fade in as they are loading.
1. User can view the large movie poster by tapping on a cell.
1. For the large poster, load the low resolution image first and then switch to the high resolution image when complete.
1. Customize the selection effect of the cell.
1. Customize the navigation bar.
1. Customize the UI.
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**.
<details>
<summary style="font-size:1.25em; font-weight: 600"> 1. Project Setup 🏗 </summary>
<br>
Welcome to the team! You will be leading this project as the lead iOS developer and integrate lots of features for Flix Inc. You will be working along with Flix UX team and integrate functionalities into our app. Below is an introduction of Flix app.
<iframe width="560" height="315" src="https://www.youtube.com/embed/xKN1u_iIOsA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
:::warning
:exclamation:<a href="http://guides.codepath.org/ios/CocoaPods#installing-cocoapods" target=blank> Install CocoaPods </a> – CocoaPods is a package manager for pulling in 3rd party libraries.
:::
</details>
<br>
<details>
<summary style="font-size:1.25em; font-weight: 600"> 2. App Icon + Launch Screen 📲 </summary>
<br>
The UX team has designated you on the first task! You will be adding the image assets and configuring the launch screen to make our app stand out!
<br>
Check out an example of how our app will look after adding the image assets 👀:
<br>
:::info
**Download image assets:** @[[assets/flix_assets.zip]]
:::
<iframe width="560" height="315" src="https://www.youtube.com/embed/xgZ7VUYUQC0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
**Video References/Resources**
- <a href="https://guides.codepath.org/ios/Adding-Image-Assets" target=blank> Adding Image Assets </a>
- <a href="https://guides.codepath.org/ios/Adding-Image-Assets#app-icon" target=blank> Configure the App Icon </a>
- <a href="https://guides.codepath.org/ios/Adding-Image-Assets#launch-screen" target=blank> Launch Screen </a>
</details>
<br>
<details>
<summary style="font-size:1.25em; font-weight: 600"> 3. Movies DB API Overview 🔎</summary>
<br>
Great work! The UX Team is satisfied with the app icon and launch screen for the Flix app. Next, retreive the data for the movies that we want to display. In this section, you will get a brief introduction to APIs and learn how to make a request to the Movies API in Objective-C.
<br>
Movie Database API Overview
<iframe width="560" height="315" src="https://www.youtube.com/embed/3vjKtY7s9dk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- Create a Network Request
<iframe width="560" height="315" src="https://www.youtube.com/embed/irtIR4P4aGU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- Reference: <a href="/courses/ios_university_fast_track/pages/network_request_snippet" target=blank> Network Request Snippet </a>
- **Additional Resources**
- <a href="https://developers.themoviedb.org/3/getting-started" target=blank> The Movie Database documentation </a>
- <a href="https://developers.themoviedb.org/3/movies/get-now-playing" target=blank> "Now Playing" endpoint </a>
- Sample Request: <a href="https://api.themoviedb.org/3/movie/now_playing?api_key=a07e22bc18f5cb106bfe4cc1f83ad8ed" target=blank>https://api.themoviedb.org/3/movie/now_playing?api_key=a07e22bc18f5cb106bfe4cc1f83ad8ed</a>
- **Note:** It's helpful to install the <a href="https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en" target=blank> JSONView Chrome Extension </a> to view the returned JSON more easily.
</details>
<br>
<details>
<summary style="font-size:1.25em; font-weight: 600"> 4. Displaying Movies 🎬</summary>
- Now that we are able to retrieve data from the API, we want to make it stand out and look nice ✨ , rather than simply displaying a chunk of JSON text on a screen. In this section, you will be integrating the data we get from the movies API and place it in our app using Table Views and Table View Cells.
<br>
- **Part 1 –** Table View Setup
<iframe width="560" height="315" src="https://www.youtube.com/embed/8CMd1wCPKUo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
- **Part 2 –** Custom Cells
<iframe width="560" height="315" src="https://www.youtube.com/embed/8VXuqhWQymo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
- **Part 3 –** Loading Poster Images
<iframe width="560" height="315" src="https://www.youtube.com/embed/ehHf1Lndjzo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- **Additional Resources**
- <a href="http://guides.codepath.org/ios/Table-View-Guide" target=blank> Table Views </a>
- <a href="https://github.com/AFNetworking/AFNetworking" target=blank> AFNetworking </a> For Objective-C
</details>
<br>
<details>
<summary style="font-size:1.25em; font-weight: 600"> 5. Pull to Refresh 🥤 </summary>
- As you are building your app, you realized that there is always new movies coming out, so what do you do? 🤯 You want the app to be able to refresh. In this section, you will integrate the pull-to-refresh functionality:
<img src="http://i.imgur.com/JHhQgaB.gif" width="200"/><br>
- Pull to Refresh
<iframe width="560" height="315" src="https://www.youtube.com/embed/JiI4NrpElj8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- References: <a href="https://guides.codepath.org/ios/Table-View-Guide#adding-pull-to-refresh" target=blank> Pull To Refresh </a>
</details>
<br>
<details>
<summary style="font-size:1.25em; font-weight: 600"> 6. Movie Details View 📝</summary>
- Now that we are able to refresh new movies, we want our users to be able to view the details of each movie (i.e. full synopsis, release date, etc). They want to be able to tap on a movie and view it in detail. In this section, we will be doing just that:
<br>
- Segue to Details
<iframe width="560" height="315" src="https://www.youtube.com/embed/WbzugFP89pA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</details>
<br>
<details>
<summary style="font-size:1.25em; font-weight: 600"> 7. Loading State ♻️ </summary>
- Great work so far! A new issue came from our user research department, they found that users who had slow internet were complaining that the app wasn't displaying anything on their screens (when in reality the movies were being loaded from the API). As an iOS developer, you realize that user-centered design is key 🔑 when making beautiful apps.
- In this section, you'll have the opportunity to develop/improve your researching skills and determine which type of loading indicator animation is best for users.
- By the end of this section make sure that our app has some form of loading state when fetching the movies:
<img src="http://i.imgur.com/XHlIU1g.gif" width=200><img src="http://i.imgur.com/mXUUpUo.gif" width=200><br>
- **Resources to help you get started**
- <a href="http://guides.codepath.org/ios/Using-UIActivityIndicatorView" target=blank> iOS's Native UIActivity Indicator </a>
- Some 3rd Party Progress HUDs
- <a href="https://github.com/SVProgressHUD/SVProgressHUD" target=blank> SVProgressHUD </a>
- <a href="https://github.com/matej/MBProgressHUD" target=blank> MBProgressHUD </a>
</details>
<br>
<details>
<summary style="font-size:1.25em; font-weight: 600"> 8. Network Error ❌ </summary>
- Another issue came up, this time it was from users who didn't have an internet connection. This time, you'll be integrating an alert message for users who are not connected to the internet. The alert can be something like this:
- Similar to the previous section, you'll have the opoprtunity to research and integrate your own custom alert!
<br>
- **Hint:** You can simulate a network error, by turning off the wifi on your computer before running the simulator. You will also want to `Reset Content and Settings` in your simulator (Found under the `Simulator` drop down menu) before you run the app too, otherwise the images will be fetched from the cache instead of the network.
- Topic Guides: <a href="http://guides.codepath.org/ios/Using-UIAlertController" target=blank> Alert Controller </a>
</details>
<br>
<details>
<summary style="font-size:1.25em; font-weight: 600"> 9. Collection View Layout 🏙</summary>
- The UX team came up with a different layout for movies 😲 . This time, they want you to display the movies in the form of movie posters. They still want to keep the original section, so you'll be adding a separate tab for the new view using a CollectionView:
- Tab Bar Setup
<iframe width="560" height="315" src="https://www.youtube.com/embed/nbGBioD65mw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- Collection View Setup
<iframe width="560" height="315" src="https://www.youtube.com/embed/iyamGl4V3fQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- Collection View Layout
<iframe width="560" height="315" src="https://www.youtube.com/embed/JymBQS-Qtto" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- **:warning: Note:** In the latest version of Xcode, you need to click on the collection view in Storyboard, and set the "Estimate Size" property to "None".
- <a href="http://guides.codepath.org/ios/Collection-View-Guide" target=blank> CollectionView </a>
- Hint: The "superhero endpoint" was created using the <a href="https://developers.themoviedb.org/3/movies/get-similar-movies" target=blank> Get Similar </a> endpoint and using the "Wonder Woman" `id` in the {movie_id} part of the endpoint path.
</details>
<br>
<details>
<summary style="font-size:1.25em; font-weight: 600"> 10. Submit your Project ✅</summary>
- <a href="/courses/ios_university_fast_track/pages/using_github" target=blank> <b> Push your project to GitHub </b> </a>
:::warning
☝️ Use this <a href="/snippets/ios_university_fast_track/readme_templates/assignment_2_readme.md?raw=true" target=blank> <b>Project 2 Assignment - README Template</b> </a> in the above *Adding a README* step.
:::
- 💡 **Stuck using Xcode Git Tools?** Check out our new tutorials for using tools like <a href="https://courses.codepath.org/snippets/ios_university/github_desktop#1-heading-github-desktop" target=blank> <b> GitHub Desktop </b> </a> or through Good'ol <a href="https://guides.codepath.com/ios/Using-Git-with-Terminal" target=blank> <b>terminal + Git commands! </b> </a>
### 🎉 <a href="4#!overview"> <b> Submit your project! </b> </a> 🥳
</details>
<br>
## Stretch Stories
Challenge yourself to complete some of the following **stretch** user stories which add additional functionality and features to your app. Stretch user stories are generally more complex and have less explicit direction then those in the required MVP tier, however this is the realm where you'll really test your understanding and application of skills.
<details>
<summary style="font-size:1.25em; font-weight: 600"> 1. Collection View Movie Details </summary>
- Feature: User can tap a poster in the collection view to see a detail screen of that movie
- Topic Guides: <a href="http://guides.codepath.org/ios/Collection-View-Guide" target=blank> CollectionView </a>
</details>
<br>
<details>
<summary style="font-size:1.25em; font-weight: 600"> 2. Search for a Movie </summary>
- **💡Hint:** Consider using a UISearchBar for this feature. **Do NOT** use the UISearchDisplayController.
- <a href="http://guides.codepath.org/ios/Search-Bar-Guide" target=blank> Search Bar Guide </a>
</details>
<br>
<details>
<summary style="font-size:1.25em; font-weight: 600"> 3. View Movie Trailer </summary>
- Feature: In the detail view, when the user taps the poster, a new screen is presented modally where they can view the trailer.
- <a href="https://developers.themoviedb.org/3/movies/get-movie-videos" target=blank> Get Videos Endpoint </a>
- **Guides:**
- <a href="http://guides.codepath.org/ios/Using-Modal-Transitions" target=blank> Modal Segues </a>
- <a href="https://guides.codepath.org/ios/Using-WebKit-View" target=blank> WebKit View </a>
- <a href="http://guides.codepath.org/ios/Using-Gesture-Recognizers" target=blank> Tap Gesture in storyboard </a>
- **💡Hint:** Create a view controller with a web view. Pass the tailer url to the web view (in prepare(forSegue)) when presenting it using a modal segue. Pass in the id from the movie you want to get the video for as a query parameter to the Get Videos endpoint. In the response back from the Get Videos endpoint, the value returned from the key, "key" is the youtube video key. For instance, in `https://www.youtube.com/watch?v=SUXWAEX2jlg` the key is, `https://www.youtube.com/watch?v=\(key)`
</details>
<br>
<details>
<summary style="font-size:1.25em; font-weight: 600"> 4. Customizing Images </summary>
- <a href="https://guides.codepath.org/ios/Working-with-UIImageView#fading-in-an-image-loaded-from-the-network" target=blank> Fading in an image loaded from the network </a>
- **Hint:** The image should only fade in if it's coming from network, not when it is loaded from cache.
Feature: For the large poster, load the low resolution image first and then switch to the high resolution image when complete
- <a href="https://guides.codepath.org/ios/Working-with-UIImageView#loading-a-low-resolution-image-followed-by-a-high-resolution-image" target=blank> Loading a low-resolution image followed by a high-resolution image </a>
* The **low resolution** movie poster is available by appending the returned `poster_path` to `https://image.tmdb.org/t/p/w45`
* The **high resolution** movie poster is available by appending the returned `poster_path` to `https://image.tmdb.org/t/p/original`
- Placeholder Image: while poster is being fetched, user see's a placeholder image
- Refer to the beginning of this assignment for adding image assets to your project.
</details>
<br>
<details>
<summary style="font-size:1.25em; font-weight: 600"> 5. Custom UI </summary>
- <a href="http://guides.codepath.org/ios/Table-View-Guide#customizing-the-cell-selection-effect" target=blank> Customizing cell selection </a>
- <a href="http://guides.codepath.org/ios/Navigation-Controller#customizing-the-appearance-of-navigation-bar" target=blank> Customizing the navigation bar </a>
- You can use <a href="http://iconmonstr.com" target=blank> Iconmonstr </a> and <a href="http://thenounproject.com" target=blank> The Noun Project </a> as good sources of images.
</details>
<br>
Sign in with Wallet
Connect another wallet