🧑A2: Profile
Original Author: Vin Bui
Assignment Due: Tuesday October 24, 2023 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.
Overview
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.
Learning Objectives
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/pushingHow to use delegation to communicate between view controllers
How to implement design system using
UIFont
andUIColor
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 interfaceF
: implements the functionalityEC
: extra credit
Getting Started
Setting up Figma
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.
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
orsp24
)
If you have a partner, replace NETID1 and NETID2. Try changing the order if the former does not work.
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-a2
should contain an Xcode project called A2.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.
If you expand everything underneath A2
you should see the following:
You will be working on ProfileVC.swift
, EditProfileVC.swift
, and Assets.xcassets
.
Assignment Files
ProfileVC.swift
ProfileVC.swift
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.
EditProfileVC.swift
EditProfileVC.swift
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.
UIColor+Extension.swift
UIColor+Extension.swift
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.
Using Figma and Importing Assets
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.
Styling
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:
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.
Part I: Creating the Profile Page
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 textMajor:
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.
Part II: Push the Edit Profile Page
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.
Part III: Create the Edit Profile Page
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 fieldTo 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.
Part IV: Pop the Edit Profile Page
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.
Part V: Delegation
You task is to use delegation to update information from ProfileVC
based on the text fields in EditProfileVC
. Remember these steps:
Create a protocol with a function
Conform
ProfileVC
to the protocol (delegate)Implement the function
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.
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
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: Custom Back Button (+1 pt)
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.
2: Edit Profile Picture (+1 pt)
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.
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.
Confirm that your
submission.txt
is formatted like the following and submit it on CMS.
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.
Last updated