Homework 9 CSCI 571 Spring 2021 iOS App Development Table of Contents iOS App Development
1. Objectives 3
2. Background 3 2.1 Xcode 3 2.2 iOS 3 2.3 Swift 4 2.4 Swift UI 4 2.5 SF Symbols 4 2.6 Amazon Web Services (AWS) 5
3. Prerequisites 5
4. High level Design 5
5. Implementation 6 5.1. App Icon and Splash Screen 6 5.2. App Navigation 7 5.3. Home Screen 7 5.4. Detail Screen 10 5.5. Search Screen 17 5.6. Watchlist Screen 19 5.7 Summary of detailing and error handling 20 5.8. API Description 21
6. Implementation Hints 22
7. Submission details 25 1. Objectives ● Become familiar with Swift language, Xcode and IOS App development. ● Learn the latest SwiftUI framework. ● Practice the Model-View-ViewModel (MVVM) design pattern. ● Build a beautiful native iOS app, and dive deep into native functionalities provided by Apple. ● Learn to use the TMDB APIs. ● Manage and use third-party libraries through Swift Package Manager.
2. Background 2.1 Xcode
Xcode is an integrated development environment (IDE) containing a suite of software development tools developed by Apple for developing software for OS X, iOS, iPadOS, watchOS and tvOS. First released in 2003, the latest stable release is XCode 12. It is available via the Mac App Store free of charge for OS X 10.15 Catalina and 11 Big Sur users. Features including: ● Swift 5 support ● Playgrounds ● SwiftUI2 Support ● Live Preview ● Device simulator and testing ● User Interface Testing ● Code Coverage
The Official homepage of the Xcode is located at: https://developer.apple.com/xcode/
2.2 iOS
iOS (originally iPhone OS) is a mobile operating system created and developed by Apple Inc. and distributed exclusively for Apple hardware. It is the operating system that presently powers many of the company's mobile devices, including the iPhone, iPad, and iPod touch. It is the second most popular mobile operating system in the world by sales, after Android. The Official iOS home page is located at: http://www.apple.com/ios/ The Official iOS Developer homepage is located at: https://developer.apple.com/ios/ 2.3 Swift
Swift is a general-purpose, multi-paradigm, compiled programming language created for iOS, OS X, watchOS, tvOS and Linux development by Apple Inc. Swift is designed to work with Apple's Cocoa and Cocoa Touch frameworks and the large body of existing Objective-C code written for Apple products. Swift is intended to be more resilient to erroneous code ("safer") than Objective-C and also more concise. It is built with the LLVM compiler framework included in Xcode 6 and later and uses the Objective-C runtime, which allows C, Objective-C, C++ and Swift code to run within a single program.
The Official Swift homepage is located at: https://developer.apple.com/swift/
2.4 Swift UI SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift. Build user interfaces for any Apple device using just one set of tools and APIs. With a declarative Swift syntax that’s easy to read and natural to write, SwiftUI works seamlessly with new Xcode design tools to keep your code and design perfectly in sync. Automatic support for Dynamic Type, Dark Mode, localization, and accessibility means your first line of SwiftUI code is already the most powerful UI code you’ve ever written. SwiftUI was initially released on WWDC in 2019, the latest version is SwiftUI 2 released earlier this June at WWDC 2020. With SwiftUI 2, developers are now able to build complete apps with swift language only for both the UI and the logic. It requires macOS 10.15.4 or later, preferably macOS 11 Big Sur.
The Official SwiftUI homepage is located at: https://developer.apple.com/xcode/swiftui/
2.5 SF Symbols With over 2,400 configurable symbols, SF Symbols is designed to integrate seamlessly with San Francisco, the system font for Apple platforms. Each symbol comes in a wide range of weights and scales that automatically align with text labels, and supports Dynamic Type and the Bold Text accessibility feature. You can also export symbols and edit them in vector graphics editing tools to create custom symbols with shared design characteristics and accessibility features. The latest version, SF Symbols 2, was released earlier in June 2020. SF Symbols 2 features over 750 new symbols, including devices, health, transportation symbols, and more. These new symbols are available in apps running the beta versions of iOS 14, iPadOS 14, or macOS Big Sur. It requires macOS 10.15.3 or later, preferably macOS 11 Big Sur.
The Official SF Symbols homepage is located at: https://developer.apple.com/sf-symbols 2.6 Amazon Web Services (AWS) AWS is Amazon’s implementation of cloud computing. Included in AWS is Amazon Elastic Compute Cloud (EC2), which delivers scalable, pay-as-you-go compute capacity in the cloud, and AWS Elastic Beanstalk, an even easier way to quickly deploy and manage applications in the AWS cloud. You simply upload your application, and Elastic Beanstalk automatically handles the deployment details of capacity provisioning, load balancing, auto-scaling, and application health monitoring. Elastic Beanstalk is built using familiar software stacks such as the Apache HTTP Server, PHP, and Python, Passenger for Ruby, IIS for .NET, and Apache Tomcat for Java. The Amazon Web Services homepage is available at: http://aws.amazon.com/
3. Prerequisites
IMPORTANT This homework is developed on the latest MacOS Big Sur (11).
You can develop the iOS app with MacOS Catalina later than 10.15.4. MacOS versions earlier than 10.15.4 will not be able to finish this homework. The latest and preferred MacOS version is Catalina 10.15.7. If you meet problems such as missing symbols (system images) using SFSymbols2, fail to compile or run SwiftUI2 code, your best option is to install MacOS Big Sur.
IMPORTANT This homework is developed with SwiftUI2, not storyboard. We strongly suggest you to develop the app with SwiftUI2. If you use storyboards, you might find some of the functionalities harder to implement, and we do not provide support in such cases. This homework requires the use of the following components: ● Download and install Xcode 12. Xcode 12 provides the crucial functionalities you will need to develop SwiftUI2 apps. You can download Xcode 12 by searching "Xcode" in your mac's app store. ● Download and install SF Symbols 2, this app provides all of the necessary icons for this homework. SF Symbols 1 might not contain all required icons. If you see a symbol fail to load during development, it might be because your MacOS version is too old. ● If you are new to iOS/SwiftUI2 Development, Hints are going to be your best friends!
We strongly suggest you develop with SwiftUI2, not storyboard. PS: This app has been designed and implemented in a iPhone12 Pro simulator. It is highly recommended that you use the same simulator to ensure consistency.
4. High Level Design This homework is an extended mobile app version of Homework 6 and Homework 8. In this exercise, you will develop a native SwiftUI application, which allows users to view some of the trending Movies and TV shows, search for movies and TV shows of their choice and view their details. There’s also a watchlist where you can save, remove and track the TV shows and movies you’d like to watch later.
The App contains 3 screens: Home, Details and Search and Watchlist. The API calls are the same as Homework #8. So, you can use the same Node.js backend code as HW8.
We strongly suggest you develop with SwiftUI2, not storyboard. PS: This app has been designed and implemented in iPhone11/Pro simulator. It is highly recommended that you use the same simulator to ensure consistency.
5. Implementation
5.1. App Icon and Splash Screen
The app begins with a welcome screen which displays the app icon. This screen is called a Splash Screen (Fig. 5.1.2) and can be implemented using two methods: plist or storyboards. The image can be found in the resources section. Refer hints sections for implementation details.
Fig. 5.1.1: App Icon Fig. 5.1.2: Splash Screen 5.2. App Navigation
Fig 5.2.1 Loading Screen Fig. 5.2.2 Home screen (Movies) Fig. 5.2.3 Home Screen (TV shows)
The App has a ‘TabView’ at the bottom at all times with three Tabs: Search, Home and Watchlist. Single tap on each tab navigates to the respective screen. Each of the Screen is implemented by declaring types that conform to the ‘View’ protocol. You can find the icons in the SFSymbols2 app. SFSymbols2 app is available for free on the App Store.
5.3. Home Screen
When you open the app, there will be an initial spinner while the data for the home screen is being fetched (Fig. 5.2.1). The Home Screen should only be visible once all data has been fetched and should be complete when it first appears.
The home screen has a Navigation Bar toolbar at the top that displays the title “USC Films”. The toolbar also has a button to toggle between ‘Movies’ and ‘TV Shows’ listings. Refer hints sections for implementing Navigation Bar. Home Screen is mainly implemented using HStack, VStack, ZStack, Spacer, Button, NavigationLink, ScrollView. (Fig. 5.2.2)
The content is divided into two categories Movies and TVShows.
1. Now Playing (For movies) /Trending(For TV Shows): The titles are shown inside an auto-changing Image Carousel that changes every 3 seconds. The carousel is built using ‘ViewBuilder’ for creating a custom view container and ‘GeometryReader’ for rendering the slide functionality. Refer to hints for implementation.
The carousel occupies approximately half of the screen area. The blurred effect in the background is created using ‘ZStack’ that allows layering views on top of each other. More links on ZStack in the Hints.
Gestures: Single Tap on any image should navigate to its detail page.
Points to Note: ● You can write your own code that downloads images from the web or you can load web images with KingFisher library. (see the hints)
2. Top Rated and Popular: The ‘Top Rated’ and ‘Popular’ shows up to 20 cards that can slide horizontally. Below each image is the Title and year of release, both centre aligned. The Movie title must wrap to the next line in case of long titles. Image must maintain its aspect ratio. (Fig. 5.3.1)
Gestures: a) Single tap: Single tap on the “top rated” and “popular” movies/TV shows navigates to the detail screen. b) Long press: Long press shows ‘ContextMenu’ with three options as below. Each item in ContextMenu should be a Label which is new in SwiftUI2. You can find the icons in the SFSymbols2 app or check the resources section. (Fig. 5.3.2)
Options that should be visible on long press:
I. Add to Watchlist: Adds the movie to watchlist. For bookmarked movies, the text should change accordingly, ie. if the movie/TV show is already bookmarked, the text should be “Remove from Watchlist”. The watchlist icon will either be filled or bordered based on whether the title is added to Watchlist or not. Relevant Toast messages should be displayed at the bottom of the screen as shown in the video. Check the hints section on how to implement Toasts. (Fig. 5.3.3) Fig. 5.3.1 Home Screen Fig. 5.3.2 Options on long press Fig. 5.3.3 Toast displayed
II.Share on Facebook: Share to Facebook shares the TMDB link of the movie on Facebook by opening it in Browser. Refer the documentation on Facebook share button here. (Fig. 5.3.5)
III. Share on Twitter: The twitter share is implemented using Twitter Intent. The Twitter message should be “Check out this link:
Points to Note: ● Images should keep the aspect ratio, be cropped, and have a rounded corner. ● The images in the movie cards should be equal sized and top aligned. ● When the context menu is shown, the movie card that separates from the rest should have a rounded corner. ● When the context menu is shown, the movie card should have a consistent white background. ● There might be a hard to debug layout problem when ContextMenu is opened because the list items have cropped images, refer to this hint for help. ● At the bottom of the Screen, we have a ‘Powered by TMDB. Developed by
5.4. Detail Screen The detail screen for each movie/TV show should provide additional information about the particular movie/TV show. It is accessible from the Home, Search and Watchlist screens on a single tap gesture. The detail screen for the selected movie/TV show should display the following information, which is fetched from the backend: 1. The trailer of the selected movie/TV show. The trailer is added right below the navigation bar of the detailed screen. It should be scrollable along with the rest of the content of the Detail Screen. The player is a YouTube player and provides options to ● Play video ● Pause video ● Expand video (Refer to demo video for detailed requirement specification and to hint for implementation details) 2. Movie/TV Show name: This data is fetched from the backend, using movie ID. 3. Year of release | Genres : Display the year of release and all genres that the movie/TV show belongs to. The year and genres should be separated by a pipe symbol. 4. Average star rating: A single red colored star, followed by the average movie/ TV show rating, fetched from the backend.
5. Description: A description of the movie/TV show should be displayed below the average star rating. The description text fetched from the backend is long, including multiple lines. So, display the first 3 lines of the description with a “Show more” option. On clicking Show more, the description view should expand and display the entire description. In the expanded state, the text “Show more” should toggle to “Show less” and the detailed description should collapse on tapping on “Show less”. Fig. 5.4.1 Movie description with ellipsi Fig. 5.4.2 Movie description on clicking “Show more”
6. Cast & Crew: First 10 cast member images and names returned from the backend are displayed in a horizontal scrollview. Image of each cast member must be circular and the name of the cast member should appear below the image. Use ScrollView along with HStack to implement a horizontal scrollview. Fig. 5.4.3 Cast & Crew on Detail Screen
7. Reviews: Top 3 reviews for the movie/TV show should be displayed in the form of cards. Each review card will contain the following details: 7.1 Title: “A review by
Each review card is clickable and navigates to a new screen to display movie/TV show name, Author and date of review, star rating and entire textual review in a scrollview. The back button present on the detailed review screen navigates back to the detailed screen (containing review cards). Fig. 5.4.4 Reviews Fig. 5.4.5 Detailed review on clicking review card
8. Recommended Movies/TV shows: Movies similar to the selected movies should be displayed in the recommended movies section, in a horizontal scrollview. Each of the recommended movie cards should display the movie/TV show cards in a rectangle with rounded corners. The card styling will be the same as those in “Top Rated” and “Popular” in Home Screen. The name of this section should be “Recommended Movies” for a Movie’s Detailed screen and it should be “Recommended TV shows” for a TV show detailed screen. Each card in the recommended movie/ TV shows screen is clickable. On a single tap of the card, the user should be navigated to the details screen of the selected card. Fig. 5.4.6 Recommended Movies
9. Navigation bar for Detail Screen: The top navigation bar should contain a back button to navigate to the previous screen. The right side of the navigation bar contains three buttons:
9.1 Add to Watchlist/ Remove from watchlist: If the movie/TV show is already bookmarked: The bookmark icon should be already filled if the movie/TV show is bookmarked. On tapping the filled bookmark icon, it should change to an unfilled icon. The following toast message should appear at the bottom of the screen: “
9.2 Facebook icon: Tapping on the Facebook icon shares the TMDB link of the movie/TV show on Facebook by opening it in Browser. This is the same functionality as in the HomeScreen.
9.3 Twitter icon: The twitter share is implemented using Twitter Intent. The Twitter message should be “Check out this link:
Points to note: ● The entire detailed screen is vertically scrollable. Only the navigation bar at the top (containing back button, bookmark and share options) is a non- scrollable element. ● If there is no data for Cast & Crew, Reviews, Recommended Movie/TV shows from the backend, do NOT display the section and the heading. Ie, if a movie has no reviews, simply skip displaying the “Reviews” heading and display Recommended Movies right after Cast & Crew. ● If a movie/TV show does not have a trailer video, do NOT display the YouTube player. In this case, your detail screen will look like this Fig. 5.4.7 Detail Screen without YouTube player
5.5. Search Screen The search screen allows the user to input words in the search bar and the results will be displayed below the search bar dynamically. Dynamic means that when the input changes, the results will also change accordingly. The following is the detailed requirements of this screen.
1. There should be a search bar below the navigation title. SwiftUI does not have an easy way to implement a native search bar. Please check Implementation hints to see how to get it done. When the user taps on the search bar, a cancel button will appear on the right, also the phone keyboard should appear at the bottom. (You could set up the phone keyboard in Simulator by checking I/O -> Keyboard -> Toggle Software Keyboard). When the user clicks on the cancel button, the input and the results should be cleared, and the keyboard should disappear. 2. The search results is a list of movie/TV cards, which is scrollable. Each card should contain the following information: Movie/TV name, Year of release, Average star rating and whether it’s a movie or TV show. You should display all the results fetched from the backend. Tap on each card should navigate to the detailed screen. 3. Only make a search API call after the user enters 3 characters in the search bar. Example: “am” should not display any results but “ave” should have results. 4. Use debouncing to avoid calling the backend everytime a character is entered. See implementation hints for guidance. 5. If an input has no result, display a message below the search bar.
Fig. 5.5.1 Initial search screen Fig. 5.5.2 User start to input in search bar Fig. 5.5.3 Search results Fig. 5.5.4 No search results
5.6. Watchlist Screen The watchlist screen displays all the movies / TVs that have been bookmarked. The body is a 3xN grid of movie/TV cards. Each card is the poster image of the corresponding movie/TV and should support the following gestures: 1. The user should be able to tap on any image to navigate to the detail page. 2. The user should be able to long press on any image and drag it to a new position. 3. The user should be able to long press on any image to display a context menu with one option, which allows the user to remove it from the watchlist. All bookmarked movies / TV shows should be saved in local storage so that they can be persistent, that means If the user restarts the app, the watchlist should still be there. When the watchlist screen appears, you should load them from local storage. However, you don’t need to save image files, instead you could just save the image url. One way of dealing with local data storage is using UserDefaults.
Points to note: ● The order of the watchlist should also be persistent. The user could change the order by dragging and dropping, next time when the watchlist screen appears, it should display the changed order. ● If there are no bookmarked movies/ TVs, display a message at the center of the screen.
Fig. 5.5.5 Watchlist screen Fig. 5.5.6 Empty watchlist
5.7 Summary of detailing and error handling 1. Make sure there are no conditions under which the app crashes. 2.Make sure all icons and texts are correctly positioned as in the video/screenshots 3. Make sure the screens, Views, and toasts are correctly displayed. 4. Make sure there is a progress bar on initial loading of the home screen, and loading movie/TV show detail screen. 5. Make sure the styling matches the video/screenshots. 6. All API calls are to be made using Node.js backend, similar to what you have developed for homework 8. 5.8. API Description On the Home screen, you need to use the following API calls. ● Movies tab: ○ Now-playing movies needs an API call like so: https://api.themoviedb.org/3/movie/now_playing?api_key=6c0ffdf3 b26f49c894810818be208c86&language=en-US&page=1 ○ Top-rated movies needs an API call like so: https://api.themoviedb.org/3/movie/top_rated?api_key=6c0ffdf3b2 6f49c894810818be208c86&language=en-US&page=1 ○ Now-playing movies needs an API call like so: https://api.themoviedb.org/3/movie/popular?api_key=6c0ffdf3b26f 49c894810818be208c86&language=en-US&page=1 ● TV Shows tab: ○ Airing today TV shows needs an API call like so: https://api.themoviedb.org/3/tv/airing_today?api_key=6c0ffdf3b26f 49c894810818be208c86&language=en-US&page=1 ○ Top-rated TV shows needs an API call like so: https://api.themoviedb.org/3/tv/top_rated?api_key=6c0ffdf3b26f49 c894810818be208c86&language=en-US&page=1 ○ Now-playing TV shows needs an API call like so: https://api.themoviedb.org/3/tv/popular?api_key=6c0ffdf3b26f49c8 94810818be208c86&language=en-US&page=1
On the Detail Screen, you would need the following: ● Movies: ○ Basic details of the movie such as the movie name, genres, rating, overview, etc. would need an API call like so: https://api.themoviedb.org/3/movie/429617?api_key=6c0ffdf3b26f 49c894810818be208c86&language=en where 429617 is the movie ID. ○ Trailer of the movie can be fetched from: https://api.themoviedb.org/3/movie/429617?api_key=6c0ffdf3b26f 49c894810818be208c86&language=en.You can find the video_id. The video_link = "https://www.youtube.com/watch?v=" + video_id. To find the trailer, in results, look for the result type = “Teaser”. If not available, look for type = “Trailer”. ○ Cast members can be retrieved from: https://api.themoviedb.org/3/movie/429617/credits?api_key=6c0ffd f3b26f49c894810818be208c86&language=en ○ Reviews: https://api.themoviedb.org/3/movie/429617/reviews?api_key=6c0ff df3b26f49c894810818be208c86&language=en ○ Recommended movies can be retrieved from: https://api.themoviedb.org/3/movie/429617/recommendations?api _key=6c0ffdf3b26f49c894810818be208c86&language=en ● TV Shows: ○ Basic details: https://api.themoviedb.org/3/tv/1720?api_key=6c0ffdf3b26f49c894 810818be208c86&language=en where 1720 is the TV show ID. ○ Trailer: https://api.themoviedb.org/3/tv/1720?api_key=6c0ffdf3b26f49c894 810818be208c86&language=en ○ Cast members: https://api.themoviedb.org/3/tv/1720/credits?api_key=6c0ffdf3b26f 49c894810818be208c86&language=en ○ Reviews: https://api.themoviedb.org/3/tv/1720/reviews?api_key=6c0ffdf3b26 f49c894810818be208c86&language=en ○ Recommended TV shows: https://api.themoviedb.org/3/tv/1720/recommendations?api_key=6 c0ffdf3b26f49c894810818be208c86&language=en
On the Search Screen, you would need the following: ● The API to be used here is https://api.themoviedb.org/3/search/multi?api_key=97588ddc4a26e30911 52aa0c9a40de22&language=en-US&query=game where “game” is the search query. In the results, find the ones that have media_type as “movie” or “tv”.
6. Implementation Hints
1. What are the fonts, font sizes, and colors used in this app?
The font is iOS's default font San Francisco. The font styles are all provided by the system.
Fig. 6.1 Default iOS fonts All of the colors used are all provided by SwiftUI. When you are using a modifier to change color, type ".", and XCode will provide autosuggestions for available colors.
2. Are Animations required?
Animations are required if the animation is provided by the system by default. For example, NavigationBar changes, search bar on click, delete and move functionalities on list items. The only exception are Toast messages, you will need to animate them.
3. Third party libraries
Sometimes using 3rd party libraries can make your implementation much easier and quicker. Some libraries you may have to use are:
3.1 Alamofire
Alamofire is an HTTP networking library written in Swift. https://github.com/Alamofire/Alamofire
3.2 SwiftyJSON
SwiftyJSON makes it easy to deal with JSON data in Swift. https://github.com/SwiftyJSON/SwiftyJSON
One easy way to use SwiftyJSON: How to create objects from SwiftyJSON, second answer.
3.3 Kingfisher
Kingfisher is a powerful, pure-Swift library for downloading and caching images from the web. It provides you a chance to use a pure-Swift way to work with remote images in your next app.
https://github.com/onevcat/Kingfisher
4. Setting up your project to include youtube-player
Note: You will be using Cocoapods to add the Youtube player dependency to your project. You can use the XCode Package Manager to add the other dependencies for your app. This will give you a chance to work with both the ways of managing project dependencies in SwiftUI.
Refer to this link to set up your Podfile for a dependency. https://www.hackingwithswift.com/articles/95/how-to-add-cocoapods-to-your- project The link adds a dependency “SwiftyBeaver” to a project. You will be required to add “youtube-ios-player-helper” to your podfile.
5. Displaying ProgressView
https://developer.apple.com/documentation/swiftui/progressview
6. Implementing Splash Screen
https://www.avanderlee.com/xcode/launch-screen/
7. Working with NavigationBar, TabView and App Navigation
Adding a Navigation Bar
A Complete Guide to NavigationView in SwiftUI
Adding TabView
8. Working with Observables and State Management
https://www.hackingwithswift.com/quick-start/swiftui/whats-the-difference- between-observedobject-state-and-environmentobject
https://www.hackingwithswift.com/quick-start/swiftui/observable-objects- environment-objects-and-published
9. Adding ToolbarItem to ToolBar
How to create toolbar and add buttons to it.
10. Open Link in browser
How to Open Web links in Safari
11. Using ZStacks
How to layer views on top of each other
12. Implementing Context Menu
How to Show a Context Menu
13. Adding Toasts
SwiftUI: Global Overlay That Can Be Triggered From Any View - Second answer
14. Building an Image Carousel How to make a image Carousel in SwiftUI
15. Implementing YouTube Player ● Installation of YouTube player library in SwiftUI:
https://developers.google.com/youtube/v3/guides/ios_youtube_helper
● Implementing YTPlayerView: (Sometimes, non-upvoted answers are helpful too :) )
https://stackoverflow.com/questions/44499332/to-play-youtube-video-in- ios-app
● Wrapping a custom UIView for SwiftUI:
https://www.hackingwithswift.com/quick-start/swiftui/how-to-wrap-a- custom-uiview-for-swiftui
16. Implementing Drag and Drop
SwiftUI 2.0 Drag & Drop
17. Implementing Search bar
Creating a search bar for SwiftUI
Deal with cancel button
18. Debouncing
How to do throttle and debounce using DispatchWorkItem in Swift
7. Submission details
You should also ZIP all your source code (the .swift/ and directories. Exclude other files) and submit the resulting ZIP file if requested by the course staff.
You will have to demo your submission using Zoom Remote Control during a special grading session. Details and logistics for the demo will be provided in class, on the Announcement page and on Piazza. Demo is done on a MacBook using the simulator, and not a physical mobile device.
IMPORTANT All videos are part of the homework description. All discussions and explanations on Piazza related to this homework are part of the homework description and will be accounted into grading. So please review all Piazza threads before finishing the assignment.