Comment on page
🧑
A2: Profile
Original Author: Vin Bui
Assignment Due: Tuesday October 24, 2023 11:59pm
In this assignment, you will be creating your first ever iOS application using UIKit programmatically. You will be creating a Profile and Edit Profile page, commonly seen in many apps today.
Developer Skills
- 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
- How to work with Git and GitHub for version control
- How to read documentation from outside resources
Course Material
- How to create classes such as a
UIViewController
- How to create and customize a
UIView
and position them withNSLayout
UILabel
,UIButton
,UIImageView
,UIImage
,UITextField
- How to navigate between view controllers using a
UINavigationController
and popping/pushing - How to use delegation to communicate between view controllers
- How to implement design system using
UIFont
andUIColor
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 Profile Page | _ / 3 |
UI: Profile Image | _ / 1 |
UI: Name, Bio | _ / 1 |
UI: Hometown and Major | _ / 1 |
PART II: Push the Edit Profile Page | _ / 2 |
UI: Edit Profile Button | _ / 1 |
F: Pushes EditProfileVC | _ / 1 |
PART III: Create the Edit Profile Page | _ / 3 |
UI: Profile Image | _ / 1 |
UI: Name, Bio | _ / 1 |
UI: Hometown and Major TextFields | _ / 1 |
PART IV: Pop the Edit Profile Page | _ / 2 |
UI: Save Button | _ / 1 |
F: Pops EditProfileVC | _ / 1 |
PART V: Delegation | _ / 3 |
F: Clicking on Save updates the main Profile page | _ / 3 |
OTHER | _ / 2 |
Feedback Survey | _ / 1 |
Styling: viewDidLoad calls helper functions | _ / 1 |
SUBTOTAL | _ / 15 |
EC: Custom back button | + 1 |
EC: Edit profile picture | + 1 |
Deduction: Crash Tax | -1 point |
GRAND TOTAL | _ / 15 (+2) |
You can find the link to the Figma here. If you do not have an account, you can create one under your Cornell email. I will provide details on how to navigate through Figma later.
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-a2.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-a2.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-a2
should contain an Xcode project called A2.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.If you expand everything underneath
A2
you should see the following:
You will be working on
ProfileVC.swift
, EditProfileVC.swift
, and Assets.xcassets
.
You will be creating the main profile page in this file, primarily in Parts I and II. You are responsible for creating the UI design based on the Figma. This view controller is the root view controller inside of a
UINavigationController
located in SceneDelegate.swift
. You will be asked to push EditProfileVC
onto this navigation stack.You will be creating the edit profile page in this file, primarily in Parts III and IV. You will be implementing the UI design based on the Figma. This view controller will be pushed by
ProfileVC
onto the navigation stack. You will be asked to implement popping functionality as well as delegation to save changes from the text field.DO NOT EDIT THIS FILE! This file contains colors that are featured in the Figma design. To use the colors, simply type
UIColor.a2.<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
For the scope of this course, we will be teaching you the skills necessary to read a design implemented on Figma. This is widely used both on AppDev and in industry, so it’s important to have this skill in your toolkit. Please read over the Figma guide now.
Throughout the provided files, you may have noticed the
// MARK
comments. These are used to keep the code organized.Properties (View)
are used forUIView
objects such asUILabel
,UIImageView
, etc. You should mark these properties asprivate
and make them constants (uselet
).Properties (Data)
are used for data types such asString
,Int
, delegates, etc. Again, mark these properties asprivate
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:
- 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.
Your task is to create the UI for the main profile page in
ProfileVC
. This profile can be for you, your partner, or if you want you can use me (Vin). Do not worry about any functionality here. We will do that in Part II. Your profile will have the following:- Profile Image:
UIImageView
- You will need to add the image to
Assets.xcassets
. Refer to the Figma guide. - To get a perfect circle, set the
layer.cornerRadius
of theUIImageView
to the radius (set it to the width of the image divided by 2) and setlayer.masksToBounds
totrue
.
- Name:
UILabel
- You can get the colors from Figma under the “Inspect” section. To use the color, type:
UIColor.a2.<color_name>
- You can get the font weight and size from Figma under the “Inspect” section. Set the “Code” to
iOS
. To set the font, type:.systemFont(ofSize: <size>, <weight>)
. Do not use the code. You should only look at the font name and size.- Make sure you use the weight from the font name instead of the number. For example, even though Figma says a weight of
600
, the weight should be.semibold
.
- If any of these fields are too long, you can set the
numberOfLines
property to0
for unlimited lines.
- Bio:
UILabel
(orUITextView
)- To make the text italic, use:
.italicSystemFont(ofSize: <size>)
- Hometown:
UIImageView
for the icon,UILabel
for the text - Major:
UIImageView
for the icon,UILabel
for the text
Don’t forget to set the title of the view controller to
“My Profile”
and background color.Once you are done, stage, commit, and push to GitHub.
You task is to create the “Edit Profile” button as well as pushing
EditProfileVC
onto the navigation stack.Edit Profile Button:
UIButton
- To change the text, use
setTitle(<text>, for: .normal)
- To change the text color, use
setTitleColor(<color>, for: .normal)
- To change the background color, use
backgroundColor = <color>
- To change the corner radius, use
layer.cornerRadius = <radius>
. You can get this under “Inspect > Properties” in Figma on the right hand side. - As a hint, you will need to add the following constraints: leading, trailing, bottom, and height (not width)
- To add functionality to this button when tapped, use
addTarget(self, #selector(<function_to_call>), for: .touchUpInside)
Once you are done, stage, commit, and push to GitHub.
Your task is to create the UI for the edit profile page in
EditProfileVC
. Do not worry about any functionality here. We will do that in Part IV. Consult Part I for hints on how to implement these views. This page will have the following:- Profile Image:
UIImageView
- Name:
UILabel
- Bio:
UILabel
(orUITextView
) - Hometown:
UILabel
for the text,UITextField
for the text field- To set the border width, use
layer.borderWidth = <width>
- To set the border color, use
layer.borderColor = <color>
- The color must be a CGColor. Use the following line:
UIColor.a2.silver.cgColor
- To set the corner radius, use
layer.cornerRadius = <radius>
- For the text field, you will need to set following constraints: top, leading, trailing, and height (not width)
- Creating the padding before the text inside of the textfield is not as straight forward, so it’s okay to not have it. However, if you are interested, check this out.
- Major:
UILabel
for the text,UITextField
for the text field
You will need to create a data property to store some information. Mark these properties as
private
and create an init
function. Make sure to include the following line after initializing your properties: super.init(nibName: nil, bundle: nil)
. The values for these properties will be passed in from ProfileVC
.If you haven’t realized it yet, for most of the setup functions you can copy and paste from the previous and make slight modifications!
Don’t forget to set the title of the view controller to
“Edit Profile”
and background color.Once you are done, stage, commit, and push to GitHub.
You task is to create the “Save” button as well as popping
EditProfileVC
from the navigation stack.Save Button:
UIButton
- See Part II for implementation hints
If you implemented Part II correctly, this should be as simple as copy and pasting!
Once you are done, stage, commit, and push to GitHub.
You task is to use delegation to update information from
ProfileVC
based on the text fields in EditProfileVC
. Remember these steps:- 1.Create a protocol with a function
- 2.Conform
ProfileVC
to the protocol (delegate)- Implement the function
- 3.Create a property in
EditProfileVC
to referenceEditProfileVC
(delegator)- Make sure it has
weak
before it. If this property isprivate
, make sure to initialize it in theinit
function.
- 4.Call the function in
EditProfileVC
If you have forgotten how to implement delegation, view the lecture notes or textbook.
To access the text from a
UITextField
, use the text
property of the text field. Note that this gives you an optional.Double check that your main profile updates when you click save. Then click on “Edit Profile” again and make sure that the text fields in the edit profile page are also updated.
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.
When using a
UINavigationController
, there is a default back button. However, it does not look nice with our design so your task is to customize the back button. The Figma contains the design for this feature. As a hint, the icon used is known as an SF Symbol called chevron.left
. You do not need to export this icon; it is built-in.This one is a lot more challenging than the previous feature. Your task here is to allow the user to edit their profile picture. You can access their camera roll, photo library, or both.
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-a2.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-a2.git
Extra Credit:
+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 25d ago