💬A3: ChatDev

Original Author: Vin Bui

Midpoint Due: Tuesday April 9, 2024 11:59pm Final Due: Tuesday April 16, 2024 11:59pm

If you are not enrolled in the course but would still like to complete the assignments, you can download the ZIP file below (note that you will not be able to enter any Git commands). Otherwise, we will create a repository for you.

79KB

intro_ios_assignments.zip

Overview

In this assignment, you will be creating a “social media” app. You will be using Alamofire to send HTTP requests to a backend endpoint to fetch information.

Learning Objectives

Developer Skills

How to use Postman to test HTTP requests
How to read code written by other developers
How to read data received from the backend to structure frontend code
How to work with Git and GitHub for version control
How to read documentation from outside resources
How to format and structure your code to follow MVC design pattern
How to follow common styling conventions used in industry
How to implement designs created on Figma

Course Material

How to represent lists of data using a UICollectionView and a UICollectionViewCell
How to send GET requests to a backend API using Alamofire
How to send POST requests to a backend API using Alamofire
How to write callbacks (completion handlers) to handle asynchronous calls
How to create a NetworkManager singleton class to contain network calls
How to decode a JSON using a JSONDecoder in Swift
How to handle errors with networking calls

Academic Integrity

As with any other course at Cornell, the Code of Academic Integrity will be enforced in this class. All University-standard Academic Integrity guidelines should be followed. This includes proper attribution of any resources found online, including anything that may be open-sourced by AppDev. The University guidelines for Academic Integrity can be found here.

This assignment can be done with ONE partner. You are also free to come to the instructors or any course staff for help. Programming forums like Stack Overflow or Hacking with Swift are allowed as long as you understand the code and are not copying it exactly. The majority of code (excluding external libraries) must be written by you or your partner. Code written through AI means such as ChatGPT is NOT ALLOWED. However, you may use these resources for assistance, although we highly encourage consulting Ed Discussion or office hours instead.

Getting Help

If you are stuck or need a bit of guidance, please make a post on Ed Discussion or visit office hours. Please do not publicly post your code on Ed Discussion. If you are using an external resource such as Stack Overflow, keep in mind that we are using UIKit with Swift 5. If you see anything with @IBOutlet or any weird syntax, then you are most likely looking at a different version.

Grading Rubric

The feedback form link is located in the Submission section of this handout.

UI: implements the user interface
F: implements the functionality
EC: extra credit

PART I: Creating the UICollectionViewCell

_ / 2

UI: Header (name, date, image)

_ / 1

UI: Post Message, Like Button, # Likes

_ / 1

PART II: Creating the UICollectionView

_ / 3

UI: Multiple sections

_ / 1

UI: Dynamic number of items/cells (adding a new Post to the array adds a new item/cell)

_ / 1

UI: Each cell is unique and represents a different Post

_ / 1

PART III: Fetching Posts

_ / 3

F: GET Request to Fetch Posts

_ / 2

F: Refresh Control

_ / 1

PART IV: Creating a Post

_ / 3

F: POST Request to Create a Post

_ / 3

PART V: Liking a Post

_ / 2

F: POST Request to Like a Post

_ / 1

F: ❤️ turns red if liked, # likes goes up

_ / 1

OTHER

_ / 2

Feedback Survey

_ / 1

Styling: viewDidLoad calls helper functions

_ / 1

SUBTOTAL

_ / 15

EC: POST Request to Unlike a Post

+ 1

EC: Sort by Top/New posts

+ 1

EC: Animation when liking a Post

+ 1

Deduction: Crash Tax

-1 point

GRAND TOTAL

_ / 15 (+3)

Getting Started

Using Postman

You are encouraged to use Postman to test out HTTP requests. Please take a look at the Postman guide.

Using Figma

Similar to A2, we will be using Figma for the design sketches. You can find the link to the Figma here. If you do not have an account, you can create one under your Cornell email. If you need a refresher, check out the Figma guide.

Using Git

If you are having trouble understanding how we will be using Git in this course, please read the A1 handout under Understanding Git and GitHub section, or visit office hours so we can assist you. As a reminder:

Stage: git add .
Commit: git commit -m "YOUR MESSAGE HERE"
Push: git push

Cloning the Repository

Navigate to a folder on your device where you will keep all of your assignments. You can navigate to the folder using cd in Terminal.

Clone the repository on GitHub:

Replace NETID with your NetID
Replace SEM with the semester (such as fa23 or sp24)

git clone git@github.coecis.cornell.edu:cs1998-601-SEM/NETID-a3.git
# Ex: git clone git@github.coecis.cornell.edu:cs1998-601-fa23/vdb23-a3.git

If you have a partner, replace NETID1 and NETID2. Try changing the order if the former does not work.

git clone git@github.coecis.cornell.edu:cs1998-601-SEM/NETID1-NETID2-a3.git

If you are lost or getting any kind of error, create a post on Ed Discussion or come to office hours.

Opening the Project

Navigate to the repository located on your local computer drive. Inside of the folder NETID-a3 should contain an Xcode project called A3.xcodeproj. Open up the project.

Locating the Source Code

Once you have the project opened, on the left side of the screen you should see the Navigator which contains all of the folders and files in the directory. If not, press CMD + 0 (that’s a zero) on your keyboard. You should see something like this:

Assignment Files

There is already code written in this file. As developers, we often build on top of what others have written which is why it is important that you practice this skill. You will often see code that you have never seen before, and it is your job to understand it.

`FeedVC.swift`

This file contains the main view controller that you will be working with throughout the entire assignment. The “Create Post” cell has already been implemented but you will notice that you cannot see it. You will need to finish setting up the collection view. The lecture does not go over how to create different sections; however, the process is very similar to what we went over in lecture and we will guide you in this handout. There are TODO comments to help guide you.

`CreatePostCollectionViewCell.swift`

This file represents the cell to create a post. You are free and encouraged to look over this file to help you implement your own custom collection view cell. You can also reference the lecture or textbook chapter here. In addition, you will be asked to write code to send a network request to create a post. There is a TODO comment indicating where you should implement this logic.

`NetworkManager.swift`

This file will contain the Alamofire code to send HTTP requests to the backend. Refer to the lectures or textbook chapters here.

`Date+Extension.swift`

DO NOT EDIT THIS FILE! This file contains a function convertToAgo that returns a string representation of the Date object indicating how long ago this post was created. You will call this function on the property holding the post’s date when you create your custom collection view cell.

`UIColor+Extension.swift`

DO NOT EDIT THIS FILE! Similar to A2, this file contains colors that are featured in the Figma design. To use the colors, simply type UIColor.a3.<color_name>. It is good practice to implement the design system before starting any project, making it very easy to use throughout the entire project. Look over this file to understand how it works and keep note of the colors available for you to use.

Styling

Throughout the provided files, you may have noticed the // MARK comments. These are used to keep the code organized.

Properties (View) are used for UIView objects such as UILabel, UIImageView, etc. You should mark these properties as private and make them constants (use let).
Properties (Data) are used for data types such as String, Int, delegates, etc. Again, mark these properties as private but it is up to you to decide if they are constants or variables.
The Set Up Views section should be used for initializing your view properties.

You are not limited to these sections and are free to add more (and you should). Because many of your data properties are marked as private, you may need to create an init function.

Follow these steps when implementing the UI:

Create the view
Initialize the view
Constrain the view
Run, confirm, and repeat

Your viewDidLoad method should contain mostly function calls to helper functions. We will be grading you on this.

Endpoints

Endpoint: https://chatdev-wuzwgwv35a-ue.a.run.app

Type Route Request Body

	Type	Route	Request Body
Fetch all posts	GET	/api/posts/	None
Create a post	POST	/api/posts/create/	`message` (String)
Like a post	POST	/api/posts/like/	`post_id` (String) `net_id` (String)
Unlike a post	POST	/api/posts/unlike/	`post_id` (String) `net_id` (String)

Fetch all posts

GET

/api/posts/

None

Create a post

POST

/api/posts/create/

message (String)

Like a post

POST

/api/posts/like/

post_id (String) net_id (String)

Unlike a post

POST

/api/posts/unlike/

post_id (String) net_id (String)

Part I: Creating the `UICollectionViewCell`

Your task is to create a custom UICollectionViewCell for the post. Create this file inside of the Views folder. You will need to create a struct or class (struct recommended) to represent a post. Create this file inside of the Models folder. As a reference, this is an example post object in JSON fetched from the backend.

{
    "id": "7m03J198pyXFBvCOLNbw",
    "likes": ["vdb23", "rs929"],
    "messsage": "Howdy!",
    "time": "2023-06-12T22:03:23Z"
}

You will need to figure out the name and type of your properties for this object. However, the time property will be a Date object (even though it’s a string in the JSON). I will show you how to decode this in Part III.

Because you have not implemented networking yet, you will need to create dummy data to test the UI. When creating these dummy data, you can use the code Date() for the time property. For the other fields, you can customize it however you like.

Your custom cell class will have the following:

Name (”Anonymous”)
Date
Image (AppDev Logo)
Post message body
Like button (use non-filled heart for now)
Number of likes

Keep in mind the background color, text color, font style, corner radius, etc. You should already have practice in A2 implementing views so I will not guide you as much as A2. Feel free to Google or look at the CreatePostCollectionViewCell class as a reference. However, your custom cell class differs in that it will need a configure method. You can use the convertToAgo function for the date object and assign it to the label’s text to format the “time ago” string.

Once you are done, stage, commit, and push to GitHub.

Part II: Creating the `UICollectionView`

Your task is to create a UICollectionView representing the feed. There is already some code written that you will need to look over. There is also a custom cell class called CreatePostCollectionViewCell that represents the “Create Post” cell already implemented for you. You will need to register and use this cell along with the other custom cell you created in Part I.

This collection view contains 2 sections, each section containing different cell classes.

Similar to items, sections are zero-indexed meaning that the first section has index 0. Use this information to implement the functions required to conform to UICollectionViewDataSource, UICollectionViewDelegate, and UICollectionViewFlowLayoutDelegate.
When creating your FlowLayout, keep in mind the spacing between each item is 16px and between each section is 24px. To add the spacing between sections, implement the insetForSectionAt function in the UICollectionViewDataSource extension.

The first section contains only 1 cell and there is no data model associated with it. Again, the custom cell class for this section is CreatePostCollectionViewCell. I highly recommend that you read and understand the code written in this class. Once you are able to see this cell in your collection view, begin implementing the second section.

The second section contains a variable number of cells indicating that you will need a data model representing the posts. Because you have not implemented networking yet, you will need to create dummy data to test this. If you can see both sections and their cells, you should be good to go.

Note: For the scope of this course, we will not be handling self-sizing cells. The height for each cell is fixed and there are a maximum of three lines for the post message.

Once you are done, stage, commit, and push to GitHub.

✋🏻 This is the stopping point for the midpoint submission. We will grade you for completion based on your GitHub commit history.

No further action is required, but if you would like for us to read over it, create an Ed Discussion post. Otherwise, you can keep working.

Part III: Fetching Posts

Your task is to send a GET request using Alamofire to fetch all posts from the backend. Currently, your posts are all hard coded dummy data. Of course, we want to be able to receive posts created by other people so we must integrate networking. In Part I, you were given an example JSON representing a post, and you created your model object based on this JSON. The reason for this is that it makes decoding the JSON received from the backend to your model very simple.

If you have not installed Postman yet, you can install it here. Read this short chapter on how to use Postman for this assignment. Then, add a new GET request with the URL: https://chatdev-wuzwgwv35a-ue.a.run.app/api/posts/. This should return a list of all posts from the backend with a 200 status code.

Your job is to integrate these posts into the frontend. You can decode the time field to a Date object if you set the decoder’s dateDecodingStrategy to .iso8601. For example:

let decoder = JSONDecoder()
decoder.dateDecodingStrategy = .iso8601

Your callback (completion handler) will take in an array of Post objects ([Post]). It will also be very helpful to have proper error handling in your code. Refer to the lecture or textbook chapter here.

Once you are able to fetch all posts from the backend, your next task is to add pull to refresh to your collection view. Follow these steps:

// 1. Create a UIRefreshControl view property
private let refreshControl = UIRefreshControl()

// 2. Add a function to be called as a target
refreshControl.addTarget(self, action: #selector(fetchAllPosts), for: .valueChanged)

// 3. Assign the collection view’s refresh control
collectionView.refreshControl = refreshControl

// 4. Stop refreshing after the network call is complete
refreshControl.endRefreshing()

Once you are done, stage, commit, and push to GitHub.

Part IV: Creating a Post

Your task is to send a POST request using Alamofire to add a post to the backend.

A good rule of thumb is to always use Postman before writing the code.

Add a new request to your collection with a POST method
Enter the URL https://chatdev-wuzwgwv35a-ue.a.run.app/api/posts/create/.
Click on the Body tab, select raw, and change the blue dropdown from “Text” to JSON
This request expects the following body:

{
    "message": "<Enter some message here>"
}

If successful, the server returns a 201 status code with the above JSON data representing the post that was just created. You do not need to do anything with this information for this assignment, but it is a common practice for the backend to return this data. If you fetch all posts again, either through Postman or your app, you should see the new post that you created.

Similar to Part III, you will integrate this network call within your app. Follow these steps:

Create a function in NetworkManager that uses Alamofire to make the call. Remember that this is a POST request with a request body parameter called message. Proper error handling is highly recommended!
Call this function inside of CreatePostCollectionViewCell.createPost. There should be a TODO comment. As a hint, there is a text field in this class that you will need to use.
(Optional) If the call is successful, clear the the textfield. You can pass true to the callback if successful or false otherwise.
Run the app and try to create a post. For the scope of this assignment, you do not need to have the collection view updated as soon as you create the post. However, refreshing the collection view should contain the new post.

Once you are done, stage, commit, and push to GitHub.

Part V: Liking a Post

Your task is to send a POST request using Alamofire to like a post.

Before you integrate networking, configure the like button to be filled with the color ruby if the post’s liked users contains your NetID.

Just like before, use Postman to test the backend call.

Add a new request to your collection with a POST method
Enter the URL: https://chatdev-wuzwgwv35a-ue.a.run.app/api/posts/like/
Click on the Body tab, select raw, and change the blue dropdown from “Text” to JSON
This request expects the following body:

{
    "post_id": "<Enter post ID>",
    "net_id": "<Enter your NetID>"
}

You will use your NetID (all lowercase). If the call is successful, you should receive the updated post.

There are many ways you can go about this. My recommendation for you is to pass a boolean to the callback to indicate whether or not the call was successful, similar to Part IV. If the call is successful, make the like button filled and increment the count by 1. Additionally, you should only be able to tap on the button if the button is not already filled red, so you will need to wrap your network request in an if statement.

You may notice that there is a delay before the button turns red when tapping on it. In apps like Instagram, usually the UI changes even if the API call fails. However, for the sake of simplicity and grading, we want the button to only turn red if the network call succeeds.

Once you are done, stage, commit, and push to GitHub.

✋🏻 If you reach this point, you are done with the assignment. However, feel free to challenge yourself with the extra credit features.

Extra Credit

Extra credit will only be given if the features are fully implemented. These are unordered and you can choose as many as you like.

1: Unlike a Post (+1 pt)

Your task is to send a POST request using Alamofire to unlike a post. This may seem similar to Part V, but it requires some additional frontend logic. When grading for this, we will unlike a post and refresh to make sure the backend is actually updated. If you try to unlike a post in which the given NetID does not already like it, you will get an error. You can test this out on Postman. The URL is https://chatdev-wuzwgwv35a-ue.a.run.app/api/posts/unlike/.

2: Sort by Top/New Posts (+1)

If you take a look at the Figma file, you should see a design containing the text “Top” and “New”. Your task here is to sort the posts by the # of likes (top) and the most recent (new). For example, if the selected tab is “Top”, the post with the most likes will be at the top. If the selected tab is “New”, the most recent post will be at the top. Make sure that the color of the tab changes depending on what is selected.

3: Like Animation (+1)

Your task here is to add some animation when liking a post. You could add a scaling animation similar to most social media apps or do some other cool animation. As long as there is some animation when liking a post, you will get full credit.

Once you are done, stage, commit, and push to GitHub.

Submission

Double check that all of your files are properly pushed to GitHub.
Clone your repository into a separate folder on your local computer drive.
Run your project and make sure that your code does not crash and everything works as needed.
If you are satisfied, download this TXT file and fill it out. Make sure to use the Clone SSH path.

129B

submission.txt

Confirm that your submission.txt is formatted like the following and submit it on CMS.

Name: Vin Bui
NetID: vdb23
GitHub Repository: git@github.coecis.cornell.edu:cs1998-601-fa23/vdb23-a3.git
Extra Credit:
+1 : ____
+1 : ____
+1 : ____

Fill out this feedback survey (worth 1 point).

If you are partnered, make sure to create a group on CMS and put both names in the submission.txt file. Both students must fill out the feedback survey to receive credit.

PreviousA2: Profile NextA4: ChefOS

Last updated 1 month ago

Overview

Learning Objectives

Academic Integrity

Getting Help

Grading Rubric

Getting Started

Using Postman

Using Figma

Using Git

Cloning the Repository

Opening the Project

Locating the Source Code

Assignment Files

FeedVC.swift

CreatePostCollectionViewCell.swift

NetworkManager.swift

Date+Extension.swift

UIColor+Extension.swift

Styling

Endpoints

Part I: Creating the UICollectionViewCell

Part II: Creating the UICollectionView

Part III: Fetching Posts

Part IV: Creating a Post

Part V: Liking a Post

Extra Credit

1: Unlike a Post (+1 pt)

2: Sort by Top/New Posts (+1)

3: Like Animation (+1)

Submission

`FeedVC.swift`

`CreatePostCollectionViewCell.swift`

`NetworkManager.swift`

`Date+Extension.swift`

`UIColor+Extension.swift`

Part I: Creating the `UICollectionViewCell`

Part II: Creating the `UICollectionView`