🧑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 with NSLayout

    • 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 and UIColor

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

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:

  1. Stage: git add .

  2. Commit: git commit -m "YOUR MESSAGE HERE"

  3. 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-a2.git
# Ex: git clone git@github.coecis.cornell.edu:cs1998-601-fa23/vdb23-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-SEM/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.

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

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

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

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 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:

  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.

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 the UIImageView to the radius (set it to the width of the image divided by 2) and set layer.masksToBounds to true.

  • 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 to 0 for unlimited lines.

  • Bio: UILabel (or UITextView)

    • 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.

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 (or UITextView)

  • 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.

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:

  1. Create a protocol with a function

  2. Conform ProfileVC to the protocol (delegate)

    • Implement the function

  3. Create a property in EditProfileVC to reference EditProfileVC (delegator)

    • Make sure it has weak before it. If this property is private, make sure to initialize it in the init 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

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

  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.

  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.

  1. 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-SEM/NETID-a2.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.

PreviousA1: Swift BasicsNextA3: ChatDev

Last updated