Timeline

Level 3

Timeline is a simple photo sharing service. Students will bring in many concepts that they have learned, and add more complex data modeling, Image Picker, CloudKit, and protocol-oriented programming to make a Capstone Level project spanning multiple days and concepts.

Most concepts will be covered during class, others are introduced during the project. Not every instruction will outline each line of code to write, but lead the student to the solution.

Students who complete this project independently are able to:

Part One - Project Planning, Model Objects, and Controllers

• follow a project planning framework to build a development plan
• follow a project planning framework to prioritize and manage project progress
• implement basic data model
• use staged data to prototype features

Part Two - Apple View Controllers, Search Controller, Container Views

• implement search using the system search controller
• use the image picker controller and activity controller
• use container views to abstract shared functionality into a single view controller

Part Three - Basic CloudKit: CloudKitManager,

• Check CloudKit availability
• Save data to CloudKit
• Fetch data from CloudKit
• Query data from CloudKit

Part Four - Intermediate CloudKit: Subscriptions, Push Notifications, Automatic Sync

• use subscriptions to generate push notifications
• use push notifications to run a push based sync engine

Part One - Project Planning, Model Objects, and Controllers

• follow a project planning framework to build a development plan
• follow a project planning framework to prioritize and manage project progress
• implement basic data model
• use staged data to prototype features

Follow the development plan included with the project to build out the basic view hierarchy, basic implementation of local model objects, model object controllers, and helper classes. Build staged data to lay a strong foundation for the rest of the app.

View Hierarchy

Implement the view hierarchy in Storyboards. The app will have a tab bar controller as the initial controller. The tab bar controller will have two tabs.

The first is a navigation controller that has a PostListTableViewController that will display the list of posts, and will also use a UISearchController to display search results. Both the PostListTableViewController and the SearchResultsTableViewController (from the UISearchController) will display a list of Post objects and segue to a Post detail view.

The second tab is a separate navigation controller that will hold a view controller to add new posts.

1. Add a UITableViewController Timeline scene, embed it in a UINavigationController, Make the navigation controller your first tab in the tab bar controller. (hint: control + drag from the tab bar controller to the navigation controller and select "view controllers" under the "Relationship Segue" section in the contextual menu)
2. Make the UITableViewController from step 1 a PostListTableViewController Cocoa Touch file subclass of UITableViewController and assign it to the Timeline scene
3. Add a UITableViewController Post Detail scene, add a segue to it from the PostListTableViewController scene
4. Add a PostDetailTableViewController subclass of UITableViewController and assign it to the Post Detail scene from step 3.
5. Add a UITableViewController Add Post scene, embed it into a UINavigationController. Make this navigation controller your second tab in the tab bar controller.
6. Add a AddPostTableViewController subclass of UITableViewController and assign it to the Add Post scene from step 5.
7. Add a UITableViewcontroller Search Results scene. It does not need a segue to any other view controller.
   • note: You will implement this scene in Part 2 when setting up the UISearchController on the Search scene
8. Add a SearchResultsTableViewController subclass of UITableViewController and assign it to the Search Results scene.

Implement Model

Timeline will use a simple, non-persistent data model to locally represent data stored on CloudKit.

Start by creating model objects. You will want to save Post objects that hold the image data, and Comment objects that hold text. A Post should own an array of Comment objects.

Post

Create a Post model object that will hold image data and comments.

1. Add a new Post class to your project.
2. Add a photoData property of type Data?, a timestamp Date property, and a comments property of type [Comment].
3. Add a computed property, photo that returns a UIImage initialized using the data in photoData.
4. Add an initializer that accepts photoData, timestamp, and comments array. Provide default values for the timestamp and comments arguments, so they can be ommitted if desired.

Comment

Create a Comment model object that will hold user-submitted text comments for a specific Post.

1. Add a new Comment class to your project.
2. Add a text property of type String, a timestamp Date property, and a post property of type Post.
3. Add an initializer that accepts text, timestamp, and a post. Provide a default values for the timestamp argument, so it can be ommitted if desired.

Model Object Controller

Add and implement the PostController class that will be used for CRUD operations.

1. Add a new PostController class file.
2. Add a sharedController singleton property.
3. Add a posts property.
4. Add an addComment(toPost: ...) function that takes a text parameter as a String, and a Post parameter. This should return a Comment object in a completion closure.
5. Add a createPostWith(image: ...) function that takes an image parameter as a UIImage and a caption as a String. This should return a Post object in a completion closure.
6. Implement the createPostWith(image: ...) function to initialize a Post with the image and a Comment with the caption text. Note: use the addComment(toPost: ...) function you just created to call the appropriate Comment initializer and adds the comment to the appropriate post.

Wire Up Views

Timeline Scene - Post List Table View Controller

Implement the Post List Table View Controller. You will use a similar cell to display posts in multiple scenes in your application. Create a custom PostTableViewCell that can be reused in different scenes.

1. Implement the scene in Interface Builder by creating a custom cell with an image view that fills the cell.
2. Create a PostTableViewCell class, add a post variable, and implement an updateViews function to the PostTableViewCell to update the image view with the Post's photo. Call the function in the didSet of the post variable'
3. Choose a height that will be used for your image cells. To avoid worrying about resizing images or dynamic cell heights, you may want to use a consistent height for all of the image views in the app.
4. Implement the UITableViewDataSource functions
   • note: The final app does not need to support any editing styles, but you may want to include support for editing while developing early stages of the app.
5. Implement the prepare(for segue: ...) function to check the segue identifier, capture the detail view controller, index path, selected post, and assign the selected post to the detail view controller.
   • note: You may need to quickly add a post property to the PostDetailTableViewController.

Post Detail Scene

Implement the Post Detail View Controller. This scene will be used for viewing post images and comments. Users will also have the option to add a comment, share the image, or follow the user that created the post.

Use the table view's header view to display the photo and a toolbar that allows the user to comment, share, or follow. Use the table view cells to display comments.

1. Add a vertical UIStackView to the Header of the table view. Add a UIImageView and a horizontal UIStackView to the stack view. Add 'Comment', 'Share', and 'Follow Post' UIButtonss to the horizontal stack view. Set the horizontal hugging priority of the center button (Share) to 249 to distribute the buttons correctly.
2. Set up your constraints so that the image view is the height you chose previously for displaying images within your app.
3. Update the cell to support comments that span multiple lines without truncating them. Set the UITableViewCell to the subtitle style. Set the number of lines to zero. Implement dynamic heights by setting the tableView.rowHeight and tableView.estimatedRowHeight in the viewDidLoad.
4. Add an updateViews function that will update the scene with the details of the post. Implement the function by setting the imageView.image and reloading the table view if needed.
5. Implement the UITableViewDataSource functions.
   • note: The final app does not need to support any editing styles, but you may want to include support for editing while developing early stages of the app.
6. Add an IBAction for the 'Comment' button. Implement the IBAction by presenting a UIAlertController with a text field, a Cancel action, and an 'OK' action. Implement the 'OK' action to initialize a new Comment via the PostController and reload the table view to display it.
   • note: Do not create a new Comment if the user has not added text.
7. Add an IBAction for the 'Share' and 'Follow' buttons. You will implement these two actions in future steps.

Add Post Scenes

Implement the Add Post Table View Controller. You will use a static table view to create a simple form for adding a new post. Use three sections for the form:

Section 1: Large button to select an image, and a UIImageView to display the selected image Section 2: Caption text field Section 3: Add Post button

Until you implement the UIImagePickerController, you will use a staged static image to add new posts.

1. Assign the table view to use