# A2: Profile

{% hint style="danger" %}
**Assignment Due: Tuesday October 24, 2023 11:59pm**
{% endhint %}

{% hint style="info" %}
**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.**
{% endhint %}

{% file src="/files/MePy2yyRAMGeIok4I6Z9" %}

## 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 <mark style="color:red;">`UIViewController`</mark>
* How to create and customize a <mark style="color:red;">`UIView`</mark> and position them with <mark style="color:red;">`NSLayout`</mark>
  * <mark style="color:red;">`UILabel`</mark>, <mark style="color:red;">`UIButton`</mark>, <mark style="color:red;">`UIImageView`</mark>, <mark style="color:red;">`UIImage`</mark>, <mark style="color:red;">`UITextField`</mark>
* How to navigate between view controllers using a <mark style="color:red;">`UINavigationController`</mark> and popping/pushing
* How to use delegation to communicate between view controllers
* How to implement design system using <mark style="color:red;">`UIFont`</mark> and <mark style="color:red;">`UIColor`</mark>

## 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](https://theuniversityfaculty.cornell.edu/academic-integrity/).

**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](/resources/archived-past-semesters/sp25/logistics/office-hours.md). **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](#submission) section of this handout.

* <mark style="color:red;">`UI`</mark>: implements the user interface
* <mark style="color:red;">`F`</mark>: implements the functionality
* <mark style="color:red;">`EC`</mark>: extra credit

| <mark style="color:blue;">**PART I: Creating the Profile Page**</mark>              | <mark style="color:blue;">**\_ / 3**</mark>        |
| ----------------------------------------------------------------------------------- | -------------------------------------------------- |
| UI: Profile Image                                                                   | \_ / 1                                             |
| UI: Name, Bio                                                                       | \_ / 1                                             |
| UI: Hometown and Major                                                              | \_ / 1                                             |
| <mark style="color:blue;">**PART II: Push the Edit Profile Page**</mark>            | <mark style="color:blue;">**\_ / 2**</mark>        |
| UI: Edit Profile Button                                                             | \_ / 1                                             |
| F: Pushes <mark style="color:red;">`EditProfileVC`</mark>                           | \_ / 1                                             |
| <mark style="color:blue;">**PART III: Create the Edit Profile Page**</mark>         | <mark style="color:blue;">**\_ / 3**</mark>        |
| UI: Profile Image                                                                   | \_ / 1                                             |
| UI: Name, Bio                                                                       | \_ / 1                                             |
| UI: Hometown and Major TextFields                                                   | \_ / 1                                             |
| <mark style="color:blue;">**PART IV: Pop the Edit Profile Page**</mark>             | <mark style="color:blue;">**\_ / 2**</mark>        |
| UI: Save Button                                                                     | \_ / 1                                             |
| F: Pops <mark style="color:red;">`EditProfileVC`</mark>                             | \_ / 1                                             |
| <mark style="color:blue;">**PART V: Delegation**</mark>                             | <mark style="color:blue;">**\_ / 3**</mark>        |
| F: Clicking on <mark style="color:red;">`Save`</mark> updates the main Profile page | \_ / 3                                             |
| <mark style="color:blue;">**OTHER**</mark>                                          | <mark style="color:blue;">**\_ / 2**</mark>        |
| Feedback Survey                                                                     | \_ / 1                                             |
| Styling: <mark style="color:red;">`viewDidLoad`</mark> calls helper functions       | \_ / 1                                             |
| <mark style="color:green;">**SUBTOTAL**</mark>                                      | <mark style="color:green;">**\_ / 15**</mark>      |
| EC: Custom back button                                                              | + 1                                                |
| EC: Edit profile picture                                                            | + 1                                                |
| Deduction: Crash Tax                                                                | -1 point                                           |
| <mark style="color:green;">**GRAND TOTAL**</mark>                                   | <mark style="color:green;">**\_ / 15 (+2)**</mark> |

## Getting Started

***

### Setting up Figma

You can find the link to the Figma [here](https://www.figma.com/file/DKuxKTVPuD9wrBi1z1an51/A2%3A-Profile?type=design\&node-id=0%3A1\&mode=design\&t=j6wcHREZ97Q0tawI-1). 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](broken://pages/hIeuzlyHR8Hw5Q4NtZF3#understanding-git-and-github) section, or visit office hours so we can assist you. As a reminder:

1. **Stage:** <mark style="color:red;">`git add .`</mark>
2. **Commit:** <mark style="color:red;">`git commit -m "YOUR MESSAGE HERE"`</mark>
3. **Push:** <mark style="color:red;">`git push`</mark>

### 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 <mark style="color:red;">`cd`</mark> in Terminal.

Clone the repository on GitHub:

* Replace **NETID** with your NetID
* Replace **SEM** with the semester (such as <mark style="color:red;">`fa23`</mark> or <mark style="color:red;">`sp24`</mark>)

```powershell
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.

```powershell
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 <mark style="color:red;">`NETID-a2`</mark> should contain an Xcode project called <mark style="color:red;">`A2.xcodeproj`</mark>. 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 <mark style="color:red;">`CMD + 0`</mark> (that’s a zero) on your keyboard.

If you expand everything underneath <mark style="color:red;">`A2`</mark> you should see the following:

<figure><img src="/files/IJJYTBjDApZnNejFtWRg" alt="" width="237"><figcaption></figcaption></figure>

**You will be working on&#x20;**<mark style="color:red;">**`ProfileVC.swift`**</mark>**,&#x20;**<mark style="color:red;">**`EditProfileVC.swift`**</mark>**, and&#x20;**<mark style="color:red;">**`Assets.xcassets`**</mark>**.**

## 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](https://www.figma.com/file/DKuxKTVPuD9wrBi1z1an51/A2%3A-Profile?type=design\&node-id=0%3A1\&mode=design\&t=j6wcHREZ97Q0tawI-1). This view controller is the root view controller inside of a <mark style="color:red;">`UINavigationController`</mark> located in <mark style="color:red;">`SceneDelegate.swift`</mark>. You will be asked to push <mark style="color:red;">`EditProfileVC`</mark> 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](https://www.figma.com/file/DKuxKTVPuD9wrBi1z1an51/A2%3A-Profile?type=design\&node-id=0%3A1\&mode=design\&t=j6wcHREZ97Q0tawI-1). This view controller will be pushed by <mark style="color:red;">`ProfileVC`</mark> 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 <mark style="color:red;">`UIColor.a2.<color_name>`</mark>. 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.**

<figure><img src="/files/lRwMe0IUBnPB93Q3V2R2" alt=""><figcaption><p>From the Figma Design</p></figcaption></figure>

## 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](/resources/tool-guides/figma.md) now.

## Styling

***

Throughout the provided files, you may have noticed the <mark style="color:red;">`// MARK`</mark> comments. These are used to keep the code organized.

* <mark style="color:red;">`Properties (View)`</mark> are used for <mark style="color:red;">`UIView`</mark> objects such as <mark style="color:red;">`UILabel`</mark>, <mark style="color:red;">`UIImageView`</mark>, etc. **You should mark these properties as** <mark style="color:red;">`private`</mark> **and make them&#x20;*****constants*****&#x20;(use** <mark style="color:red;">`let`</mark>**).**
* <mark style="color:red;">`Properties (Data)`</mark> are used for data types such as <mark style="color:red;">`String`</mark>, <mark style="color:red;">`Int`</mark>, delegates, etc. **Again, mark these properties as** <mark style="color:red;">`private`</mark> **but it is up to you to decide if they are constants or variables.**
* The <mark style="color:red;">`Set Up Views`</mark> 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 <mark style="color:red;">`private`</mark>, you ***may*** need to create an <mark style="color:red;">`init`</mark> 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

{% hint style="danger" %}
**Your&#x20;**<mark style="color:red;">**`viewDidLoad`**</mark>**&#x20;method should contain&#x20;*****mostly*****&#x20;function calls to helper functions. We will be grading you on this.**
{% endhint %}

## Part I: Creating the Profile Page

***

**Your task is to create the UI for the&#x20;*****main profile page*****&#x20;in&#x20;**<mark style="color:red;">**`ProfileVC`**</mark>**.** 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: <mark style="color:red;">`UIImageView`</mark>
  * You will need to add the image to <mark style="color:red;">`Assets.xcassets`</mark>. Refer to the Figma guide.
  * To get a perfect circle, set the <mark style="color:red;">`layer.cornerRadius`</mark> of the <mark style="color:red;">`UIImageView`</mark> to the radius (set it to the width of the image divided by 2) and set <mark style="color:red;">`layer.masksToBounds`</mark> to <mark style="color:red;">`true`</mark>.
* Name: <mark style="color:red;">`UILabel`</mark>
  * You can get the colors from Figma under the “Inspect” section. To use the color, type: <mark style="color:red;">`UIColor.a2.<color_name>`</mark>
  * You can get the font **weight** and **size** from Figma under the “Inspect” section. Set the “Code” to `iOS`. To set the font, type: <mark style="color:red;">`.systemFont(ofSize: <size>, <weight>)`</mark>. **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&#x20;**<mark style="color:red;">**`600`**</mark>**, the weight should be&#x20;**<mark style="color:red;">**`.semibold`**</mark>**.**
  * If any of these fields are too long, you can set the <mark style="color:red;">`numberOfLines`</mark> property to <mark style="color:red;">`0`</mark> for unlimited lines.
* Bio: <mark style="color:red;">`UILabel`</mark> (or <mark style="color:red;">`UITextView`</mark>)
  * To make the text italic, use: <mark style="color:red;">`.italicSystemFont(ofSize: <size>)`</mark>
* Hometown: <mark style="color:red;">`UIImageView`</mark> for the icon, <mark style="color:red;">`UILabel`</mark> for the text
* Major: <mark style="color:red;">`UIImageView`</mark> for the icon, <mark style="color:red;">`UILabel`</mark> for the text

Don’t forget to set the title of the view controller to <mark style="color:red;">`“My Profile”`</mark> 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&#x20;**<mark style="color:red;">**`EditProfileVC`**</mark>**&#x20;onto the navigation stack.**

Edit Profile Button: <mark style="color:red;">`UIButton`</mark>

* To change the text, use <mark style="color:red;">`setTitle(<text>, for: .normal)`</mark>
* To change the text color, use <mark style="color:red;">`setTitleColor(<color>, for: .normal)`</mark>
* To change the background color, use <mark style="color:red;">`backgroundColor = <color>`</mark>
* To change the corner radius, use <mark style="color:red;">`layer.cornerRadius = <radius>`</mark>. 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 <mark style="color:red;">`addTarget(self, #selector(<function_to_call>), for: .touchUpInside)`</mark>

**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&#x20;*****edit profile page*****&#x20;in&#x20;**<mark style="color:red;">**`EditProfileVC`**</mark>**.** 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: <mark style="color:red;">`UIImageView`</mark>
* Name: <mark style="color:red;">`UILabel`</mark>
* Bio: <mark style="color:red;">`UILabel`</mark> (or <mark style="color:red;">`UITextView`</mark>)
* Hometown: <mark style="color:red;">`UILabel`</mark> for the text, <mark style="color:red;">`UITextField`</mark> for the text field
  * To set the border width, use <mark style="color:red;">`layer.borderWidth = <width>`</mark>
  * To set the border color, use <mark style="color:red;">`layer.borderColor = <color>`</mark>
    * The color must be a CGColor. Use the following line: <mark style="color:red;">`UIColor.a2.silver.cgColor`</mark>
  * To set the corner radius, use <mark style="color:red;">`layer.cornerRadius = <radius>`</mark>
  * 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](https://stackoverflow.com/questions/25367502/create-space-at-the-beginning-of-a-uitextfield) out.
* Major: <mark style="color:red;">`UILabel`</mark> for the text, <mark style="color:red;">`UITextField`</mark> for the text field

You will need to create a data property to store some information. Mark these properties as <mark style="color:red;">`private`</mark> and create an <mark style="color:red;">`init`</mark> function. Make sure to include the following line after initializing your properties: <mark style="color:red;">`super.init(nibName: nil, bundle: nil)`</mark>. The values for these properties will be passed in from <mark style="color:red;">`ProfileVC`</mark>.

{% hint style="info" %}
**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!**
{% endhint %}

Don’t forget to set the title of the view controller to <mark style="color:red;">`“Edit Profile”`</mark> 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&#x20;**<mark style="color:red;">**`EditProfileVC`**</mark>**&#x20;from the navigation stack.**

Save Button: <mark style="color:red;">`UIButton`</mark>

* See Part II for implementation hints

{% hint style="info" %}
**If you implemented Part II correctly, this should be as simple as copy and pasting!**
{% endhint %}

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

## Part V: Delegation

***

**You task is to use delegation to update information from&#x20;**<mark style="color:red;">**`ProfileVC`**</mark>**&#x20;based on the text fields in&#x20;**<mark style="color:red;">**`EditProfileVC`**</mark>**.** Remember these steps:

1. Create a protocol with a function
2. Conform <mark style="color:red;">`ProfileVC`</mark> to the protocol (delegate)
   * Implement the function
3. Create a property in <mark style="color:red;">`EditProfileVC`</mark> to reference <mark style="color:red;">`EditProfileVC`</mark> (delegator)
   * Make sure it has <mark style="color:red;">`weak`</mark> before it. If this property is <mark style="color:red;">`private`</mark>, make sure to initialize it in the <mark style="color:red;">`init`</mark> function.
4. Call the function in <mark style="color:red;">`EditProfileVC`</mark>

If you have forgotten how to implement delegation, view the lecture notes or textbook.

To access the text from a <mark style="color:red;">`UITextField`</mark>, use the <mark style="color:red;">`text`</mark> 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.**

{% hint style="danger" %}
**If you reach this point, you are done with the assignment. However, feel free to challenge yourself with the extra credit features.**
{% endhint %}

## Extra Credit

***

{% hint style="danger" %}
**Extra credit will only be given if the features are&#x20;*****fully*****&#x20;implemented. These are unordered and you can choose as many as you like.**
{% endhint %}

### 1: Custom Back Button (+1 pt)

When using a <mark style="color:red;">`UINavigationController`</mark>, 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 <mark style="color:red;">`chevron.left`</mark>. 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**.

{% file src="/files/ZXdNMAmmGlCLk6zh3jDD" %}

5. Confirm that your <mark style="color:red;">`submission.txt`</mark> is formatted like the following and submit it on [CMS](https://cmsx.cs.cornell.edu/web/guest/).

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

6. Fill out this [feedback survey](https://forms.gle/YbmGnyZvG2Tre86b6) (worth 1 point).

{% hint style="info" %}
**If you are partnered, make sure to create a group on CMS and put both names in the&#x20;**<mark style="color:red;">**`submission.txt`**</mark>**&#x20;file. Both students must fill out the feedback survey to receive credit.**
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ios-course.cornellappdev.com/resources/archived-past-semesters/fa23/assignments/a2-profile.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.