Comment on page
💬
A3: ChatDev
Original Author: Vin Bui
Midpoint Due: Tuesday October 31, 2023 11:59pm
Final Due: Tuesday November 7, 2023 11:59pm
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.
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
UICollectionViewand aUICollectionViewCell - 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
NetworkManagersingleton class to contain network calls - How to decode a JSON using a
JSONDecoderin Swift - How to handle errors with networking calls
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.
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.
UI: implements the user interfaceF: implements the functionalityEC: 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) |
You are encouraged to use Postman to test out HTTP requests. Please take a look at the Postman guide.
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.
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:
- 1.Stage:
git add . - 2.Commit:
git commit -m "YOUR MESSAGE HERE" - 3.Push:
git push
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)
git clone git@github.coecis.cornell.edu:cs1998-601-fa23/NETID-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-fa23/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.
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.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:
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.
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.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.This file will contain the Alamofire code to send HTTP requests to the backend. Refer to the lectures or textbook chapters here.
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.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.
From the Figma Design
Throughout the provided files, you may have noticed the
// MARK comments. These are used to keep the code organized.Properties (View)are used forUIViewobjects such asUILabel,UIImageView, etc. You should mark these properties asprivateand make them constants (uselet).Properties (Data)are used for data types such asString,Int, delegates, etc. Again, mark these properties asprivatebut it is up to you to decide if they are constants or variables.- The
Set Up Viewssection 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:
- 1.Create the view
- 2.Initialize the view
- 3.Constrain the view
- 4.Run, confirm, and repeat
Your
viewDidLoad method should contain mostly function calls to helper functions. We will be grading you on this.
Text | 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) |
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.
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, andUICollectionViewFlowLayoutDelegate. - 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
insetForSectionAtfunction in theUICollectionViewDataSourceextension.
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.
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.
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.
- 1.Add a new request to your collection with a POST method
- 2.Enter the URL
https://chatdev-wuzwgwv35a-ue.a.run.app/api/posts/create/. - 3.Click on the
Bodytab, selectraw, and change the blue dropdown from “Text” toJSON - 4.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:
- 1.Create a function in
NetworkManagerthat uses Alamofire to make the call. Remember that this is a POST request with a request body parameter calledmessage. Proper error handling is highly recommended! - 2.Call this function inside of
CreatePostCollectionViewCell.createPost. There should be aTODOcomment. As a hint, there is a text field in this class that you will need to use. - 3.(Optional) If the call is successful, clear the the textfield. You can pass
trueto the callback if successful orfalseotherwise. - 4.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.
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.
- 1.Add a new request to your collection with a POST method
- 2.Enter the URL:
https://chatdev-wuzwgwv35a-ue.a.run.app/api/posts/like/ - 3.Click on the
Bodytab, selectraw, and change the blue dropdown from “Text” toJSON - 4.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 will only be given if the features are fully implemented. These are unordered and you can choose as many as you like.
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/.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.
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.
- 1.Double check that all of your files are properly pushed to GitHub.
- 2.Clone your repository into a separate folder on your local computer drive.
git clone [email protected]:cs1998-601-fa23/NETID-a3.git
- 3.Run your project and make sure that your code does not crash and everything works as needed.
- 4.If you are satisfied, download this TXT file and fill it out. Make sure to use the Clone SSH path.
submission.txt
129B
Text
- 5.
Name: Vin Bui
NetID: vdb23
GitHub Repository: [email protected]:cs1998-601-fa23/vdb23-a3.git
Extra Credit:
+1 : ____
+1 : ____
+1 : ____
- 7.
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 survery to receive credit.Last modified 17d ago