What is iOS Development?

iOS Development is a specialized version of mobile application development, pertaining specifically to iOS devices. iOS refers to the mobile operating system created by Apple and is what powers many of the company's devices, including the iPhone, iPad, MacOS, and iPod Touch.

iOS development includes the construction of the user interface of an app, the handling of user interactions across the app, and the management of user data throughout the app. There are a number of ways to build iOS applications but the primary one is using Swift and in the Xcode IDE. The two native primary frameworks for building iOS applications are UIKit and SwiftUI.

Why should you take this course?

With iOS capturing almost 60% of the mobile operating system market share in the United States, iOS devices have become a ubiquitous part of daily life. Every day, you use your phone to communicate with friends, navigate to places, and keep up with social media. iOS development sits at the heart of all of the apps that you use for these activities. By taking this course, you will learn how to build an application from the ground up and gain the skills to transform any application idea into a working product.

Moreover, the skills that you learn in this course are broadly applicable to understanding other front end frameworks as well. As a result, many students who have completed this course end up more prepared to recruit for internships and build out their own products.

What will you learn in this course?

In this course, you will learn all the necessary components that comprise an iOS application. We begin with an introduction to Swift, the primary programming language for iOS. Then we will move on to teaching user interface development in UIKit, showing you how to build beautiful interfaces across all iOS mobile devices and how to visually organize data in applications.

Afterwards, we will proceed with lectures on networking, teaching you how to integrate your application with backend services by pulling data from and saving data to backend services.

From then on, we will delve in SwiftUI, a completely different (but equally useful) framework for building UI. Finally, we will learn advanced functionality such as creating push notifications, setting up authentication system. To put everything together, students will work on the Hack Challenge, a hackathon in which students from all AppDev courses build a full stack application from scratch. The winners will have their app features on the AppDev website!

Instructors

TAs

Breakdown

Late Policy

You are given a total of 4 free slip days. After all free slip days have been used, there will be a 10% deduction from that assignment’s grade per day submitted for a maximum of 2 days. In other words, no late submissions will be accepted the third day after the normal submission deadline. Midpoint submissions do not count towards your slip days. If there are any emergencies or other conflicts out of your control that prevent you from turning in your assignments on time, please reach out to the instructions so we can help you.

Assignments

There will be a total of 4 assignments throughout the duration of the course. The weighted percentage for each submission is displayed in the table above.

All final submissions (A1, A2, A3 Final, A4 Final) will be graded for correctness. However, A3 Midpoint and A4 Midpoint will be graded for completion. As long as you have shown some progress on GitHub, you will receive full credit. Although these midpoint submissions are for completion, we highly recommend that you take these midpoints seriously so that you do not fall behind. We will provide feedback on midpoint submissions if requested to make sure you are on the right track

You are allowed to work with one other person in the course for A2, A3, and A4. However, A1 must be submitted individually. We will be using CMS for grading and submission. The submission requirements and details for each assignment will be provided later.

Assignments will be graded and returned, at the latest, one week after the normal submission deadline. If you feel that the grader make a mistake, create a private Ed post with an explanation about the mistake.

You will need to put in effort in order to pass this class. We will send out emails to students in jeopardy before the drop deadline. If you have any questions or concerns, please reach out to the course instructors. We care about your learning and want everyone to succeed!

Extra Credit

There will be extra credit opportunities for every assignment where you can go above and beyond the minimum requirements. These will be challenging but are very rewarding and will definitely help you become a better developer. You can earn up to a 2% boost for A2, 3% boost for A3 Final, and 5% boost for A4 Final, adding up to a total of 10%. Details will be provided in the assignment handout.

Hack Challenge

Hack Challenge details can be found here:

This final group project is weighted more heavily than the rest of the individual assignments, so if you don’t do so great on the assignments, a solid final project can boost your grade significantly.

Note that Olin Hall is not Olin Library.

Overview

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.

Learning Objectives

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 UICollectionView and a UICollectionViewCell

• 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 NetworkManager singleton class to contain network calls

• How to decode a JSON using a JSONDecoder in Swift

• How to handle errors with networking calls

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

Using Postman

You are encouraged to use Postman to test out HTTP requests. Please take a look at the Postman guide.

Using Figma

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.

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

Opening the Project

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.

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. You should see something like this:

Assignment Files

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.

FeedVC.swift

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.

CreatePostCollectionViewCell.swift

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.

NetworkManager.swift

This file will contain the Alamofire code to send HTTP requests to the backend. Refer to the lectures or textbook chapters here.

Date+Extension.swift

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.

UIColor+Extension.swift

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.

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

Endpoints

• Endpoint: https://chatdev-wuzwgwv35a-ue.a.run.app

Part I: Creating the UICollectionViewCell

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.

Part II: Creating the UICollectionView

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, and UICollectionViewFlowLayoutDelegate.

• 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 insetForSectionAt function in the UICollectionViewDataSource extension.

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.

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

Part III: Fetching Posts

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.

Part IV: Creating a Post

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 Body tab, select raw, and change the blue dropdown from “Text” to JSON

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 NetworkManager that uses Alamofire to make the call. Remember that this is a POST request with a request body parameter called message. Proper error handling is highly recommended!

2. Call this function inside of CreatePostCollectionViewCell.createPost. There should be a TODO comment. 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 true to the callback if successful or false otherwise.

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.

Part V: Liking a Post

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 Body tab, select raw, and change the blue dropdown from “Text” to JSON

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.

Extra Credit

1: Unlike a Post (+1 pt)

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

2: Sort by Top/New Posts (+1)

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.

3: Like Animation (+1)

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.

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-fa23/vdb23-a3.git
Extra Credit:
+1 : ____
+1 : ____
+1 : ____

1. Fill out this feedback survey (worth 1 point).

Join the Google Calendar

Schedule

For more information, check out the Git Documentation

Sharing and Updating Repositories

Git Pull

git pull <options> <repository>

Pulls changes from a remote repository into the current branch. If the current branch is behind the remote, then by default it will fast-forward the current branch to match the remote.

Git Status

git status

Displays paths that have changes between your local repository and the HEAD of the remote repository

Git Add

git add <changes to be staged>

This command updates the index using the current content found in the working tree, to prepare the content staged for the next commit. To stage all changes, use git add .

Git Commit

git commit -m <"Commit Title">

Create a new commit containing the current contents of the index and the given log message describing the changes.

Git Push

git push origin main

Updates the main branch of the remote repository based on the last local commit

Branching and Merging

Git Branch:

git branch

Lists all existing branches; the current branch will be highlighted in green and marked with an asterisk

Git Checkout:

git checkout -b <"new branch name">

or

git checkout <existing branch name>

About This Textbook

This textbook was originally created in Fall 2023 by Vin Bui. Over the course of time, more chapters have been added by other instructors (see contributors below). Since the content may become outdated, all chapters will contain date information of when it was written. The lecture videos are from Fall 2023, but feel free to check out other semesters on the Cornell AppDev YouTube Channel.

Contributors

• Vin Bui - Instructor FA23, iOS Lead SP24

• Richie Sun - Instructor FA23/SP24

• Tiffany Pan - Instructor SP24, iOS Lead FA23

• Reade Plunkett - iOS Lead FA22/SP23

Ithaca Traveller - Best Backend

Frank Dai, Qiandao Liu, James Tu, Huajie Zhong

• Account login and registration (with profile image)

• MapKit integration with WeatherAPI

• Create a post and upload images

• Like and delete a post

Latte Link - Best UI

Lucy Yang, Kyle Chu, Nicole Qiu, Nathan Chu, Mihili Herath

A scheduling app that allows Cornell students to connect with coffee chatters and arrange coffee chats from a range of campus organizations.

• Simple yet effective user interface

• Easy on the eyes, not too much information at once

• Consistent design system - typography, colors, etc.

• Lots of explorations on Figma -> seems like everything was thought through pretty well

ShelterSwipe - Most Creative

Ilyssa Yan, Claire Wang, Cassidy Xu, Ronald Leung, Andrew Qian, Emily Silkina

ShelterSwipe is an application where you can swipe through pets available for adoption at local shelters. We hope to match every potential pet-owner with their perfect animal to foster loving relationships and decrease the number of shelter animals.

• Very creative, cute, and wholesome idea

• Have never seen a swipe gesture used in a Hack Challenge before

• Animations when swiping was pretty sick

truscoop - Best Overall

Aidan Talreja, Peter Bidoshi, Daniel Chuang, Daniel Lee, Satya Datla

AI news platform that determines the political meaning of the news article based on AI and user ratings.

• Summary generated with AI using NLP (natural language processing)

• Clean and slick/simple UI

• Can read articles within the app using WKWebView

• User ratings + ML generated ratings

• Share articles

First Day Jitters

Here are some pointers for gearing up for our first class on March 12th, 2025!

1. Ensure you've read through the rest of this page and filled out all necessary forms.

3. Join us on Ed, send us questions via email ＠cornellappdevcourses@gmail.com, and get hyped!

4. Lecture 0 is on Wednesday, March 12th at 8:35 PM in Olin 165 (the hall, not the library). We'll cover course logistics, installations, and the basics of Git/GitHub.

Prerequisites

CS 1110 is a highly recommended co/prerequisite, but not required. You will also need access to a MacBook (Intel - macOS Catalina 10.15.4+, Apple Silicon - macOS Big Sur 11+) to participate in the course (the Xcode IDE is only available for macOS).

Enroll in the Course

1. Enroll in CS 1998-601 in Student Center. This is a 2 credit S/U course, but you may enroll for 1 credit to avoid going over the credit limit.

Ed Discussion

We will be using Ed Discussion for class communication and answering questions. Ed will be the main method of communication between students and course staff. You can join the Ed here.

Install Xcode and Git

1. You can install Xcode through the AppStore.

   • If you do not have the latest Mac version and cannot update, you can find older Xcode versions here.

2. We will be using Cornell Enterprise GitHub. Double check that you can log in.

3. Follow the Git Installation Guide:

Figma

We will be using Figma for app designs. You can create an account using your Cornell email.

Pre-Class TODOs

• Fill out the course application here.

• Add the course calendar to your GCal.

• Read the Getting Started, Syllabus, and Grading sections on the left.

• Install Xcode here. If you do not have a Mac, please reach out to the instructors.

• Set up Git and GitHub. Follow this guide.

• Join our Ed Discussion. This is how we know you are taking the course! We will only add people to the Github and CMSX who join the Ed Discussion.

• Enroll on Student Center (CS1998-601) if you want credit for this course.

Lecture Slides

Swift Basics Makeup Video

Overview

This is a 2 credit S/U course, but you may enroll for 1 credit to avoid going over the credit limit. If you haven’t already enrolled in the course:

1. Enroll in CS 1998-601 in Student Center.

Lectures are Monday & Wednesday 8:35 - 9:25 PM in Olin Hall 165. Our (tentative) course schedule can be found here:

Prerequisites

CS 1110 is a highly recommended co/prerequisite, but not required. You will also need access to a MacBook running at least Catalina and Xcode 10.14 to participate in the course (the Xcode IDE is only available for macOS).

You can check your Xcode version via the Terminal or in Xcode itself. To check within Xcode, navigate to the Menu Bar -> About Xcode. To check using Terminal, see the screenshot attached!

Course Material

This entire course is project-based meaning there will not be any exams. There will be a Hack Challenge at the end of the course where you will work with members from our backend and design courses to put what you’ve learned to the test and build your very own mobile app. More information will be provided later.

There are no required textbooks. Most of the information you need will be in this course textbook. However, you are welcome to consult other iOS development resources such as Hacking with Swift or iOS Academy on YouTube.

All lecture slides will be posted in this textbook under “Chapters” on the sidebar. Lectures will also be recorded and posted on the AppDev YouTube channel. The demo code is located in this GitHub.

Announcements

All course-wide announcements will be made on Ed Discussion.

Grading and Assignments

Our grading policy can be found here:

Attendance

Attendance will be taken at lectures and will be worth 5% of your final grade. However, in the event that you cannot make them, lectures will also be recorded and uploaded to our YouTube channel.

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.

When you work on an assignment, you have the option of working with a partner who can help you work on the assignment without any limitations. 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.

Lecture Slides

Lecture Video

Lecture Demo

Clone the Repository

git clone https://github.com/intro-to-ios/lec2-uikit
OR git clone git@github.com:intro-to-ios/lec2-uikit.git

Checkout Branches

git checkout origin/1-uilabel
OR git checkout 1-uilabel

git checkout origin/2-uiimageview
OR git checkout 2-uiimageview

Classes Demo Code

class Student {
    // Properties
    var name: String
    var major: String
    var age: Int

    // Initializer
    init(name: String, major: String, age: Int) {
        self.name = name
        self.major = major
        self.age = age
    }
}

let vin = Student(name: "Vin", major: "Info Sci", age: 20)
vin.major // Prints "Info Sci"

class EngineeringStudent: Student {
    // Inherits properties from the superclass, but you can
    // define other properties specific to this class
    var doesShower: Bool

    // Initializer
    init(name: String, major: String, age: Int, doesShower: Bool) {
        self.doesShower = doesShower // Initialize properties specific to this class
        super.init(name: name, major: major, age: age) // Call superclass' initializer
    }
}

let archit = EngineeringStudent(name: "Archit", major: "CS", age: 20, doesShower: false)
archit.name // Good
archit.doesShower // Good
vin.doesShower // Does not work

Lecture Slides

Lecture Video

Forgot to record, please refer to this last lecture instead and ask any questions on EdStem if needed.

Lecture Demo

Clone the Repository

git clone https://github.com/intro-to-ios/lec4-uitableview.git
OR git clone git@github.com:intro-to-ios/lec4-uitableview.git

Checkout Branches

git checkout origin/1-cell
OR git checkout 1-cell

git checkout origin/2-tableview
OR git checkout 2-tableview

What is the Hack Challenge?

The Hack Challenge is an AppDev courses tradition where students across our 4 courses (iOS, Android, Backend, and DPD) come together to create their own mobile app in 2 weeks.

Why a Hack Challenge as a final project?

The purpose of our courses is to help our students gain skills that they can take into industry. The best way to develop these skills is by pursuing projects, especially with a team. Additionally, you will be able to put this on your portfolio, which will be an important factor when applying for internships.

How will the groups be assigned? Where will we find teams?

This depends on the number of students we have across all courses. However, most teams typically consist of 2-3 frontend members, 1-2 backend members and 1 designer. We will do a team matching mixer when the Hack Challenge begins. During this mixer, you will meet students in other courses and form a team.

Each team will also have a frontend mentor as well as a backend mentor to provide any help if needed.

How will grading work?

As a reminder, the Hack Challenge is worth 30% of your final grade. For iOS, you are required to have the following:

Midpoint Submission

• Multiple screens that you can navigate between OR at least one scrollable view.

Final Submission

• Multiple screens that you can navigate between.

• At least one scrollable view.

• Networking integration with a backend API.

Note that you can use either UIKit or SwiftUI for the Hack Challenge.

Do we win prizes?

Yes! We have prizes and awards for the following:

• 🏆 Best Overall

• 💻 Best Backend

• 📱 Best UI

• 🎨 Most Creative

Past Projects

Lecture Slides

Lecture Video

Lecture Demo

Clone the Repository

git clone https://github.com/intro-to-ios/lec3-navigation.git
OR git clone git@github.com:intro-to-ios/lec3-navigation.git

Checkout Branches

git checkout origin/1-navigation
OR git checkout 1-navigation

git checkout origin/2-delegation
OR git checkout 2-delegation

Lecture Slides

Lecture Video

Lecture Slides

Lecture Video

Lecture Demo

Clone the Repository

Checkout Branches

Overview

The goal of this assignment is to help you become familiar with basic Swift syntax and version control with Git and GitHub.

Learning Objectives

Developer Skills

• How to implement functions according to a specification

• How to read documentation from outside resources

• How to read, create, and use functions to organize code

• How to work with Git and GitHub for version control

Course Material

• How to use string interpolation to combine variables with strings

• How to convert data types using type casting

• How to create and work with arrays and dictionaries

• How to use conditionals to control program flow

• How to use methods provided by Swift

• How to use loops to repeat code

• How to work with optionals

• How to use higher order functions to simplify code

Academic Integrity

This assignment must be done individually. However, we do encourage limited collaboration. 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. 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

Grading Rubric

Getting Started

Opening the Project

Download and unzip the files at the top of this page. Navigate to the files located on your local computer drive. Inside of the folder should contain an Xcode project called A1.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 A1 you should see the following:

You will be working on MainApp.swift and A1Tests.swift.

Part I: Assignment Files

MainApp.swift

You will be implementing the functions provided in this file. There are a total of 9 TODOs. If you click on this red box at the top of your Xcode, there should be a dropdown menu.

If you click on the clipboards, you will directed to the TODOs. The stars (⭐️) represent the difficulty level of each function. At the top of each function header is the specification. Your goal is to implement the function according to the specification. DO NOT CHANGE THE FUNCTION HEADER. We have given you hints to help you complete the tasks.

A1Tests.swift

This file contains the test cases for each function. DO NOT EDIT THIS FILE.

There are two ways to run the test cases:

1. You can run the entire test suite by clicking on the button in the blue box next to final class A1Tests: XCTestCase in the Editor or A1Tests in the Navigator on the left.

2. You can run test cases for a specific function by clicking on the button in the blue box next to the function (such as func testIntroduce()) in the Editor or in the Navigator on the left.

When you run the test suite for the first time, it may take about 30 seconds to 1 minute to load. After the first launch, it should not take that long. If the Simulator opens up, keep it open as it is required to run the test suite (for some reason). You will get a popup saying “Build Succeeded”, but this does not mean that you have passed the test cases. A passed test case will have green checkmarks and no error messages.

The yellow box above indicates an error message. The value pointed by the pink arrow is the “Received” output which is what your implementation returned. The value pointed by the green arrow is the “Expected” output which is what your function should return. The console will also output the error message.

Part II: Implementing the Functions

There are a total of 9 functions that you need to implement with varying levels of difficulty (indicated by a ⭐️). Follow these steps when working on the assignment:

1. Begin TODO 1 and implement the function.

2. Run the test function for TODO 1. If failed, fix your function and try again. If passed, move on to the next step.

3. Repeat for TODOs 2-9

Submission

1. Double-check that all of your files are properly filled out.

2. Zip all of your files, you can right-click the folder they are in and click "compress"

3. Submit the assignment to CMSX

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

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

Grading Rubric

• UI: implements the user interface

• F: implements the functionality

• EC: extra credit

Getting Started

Setting up Figma

Using Git

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 (in this case sp25)

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

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

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

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

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

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.

Extra Credit

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.

Cornell GitHub

You can access the Cornell GitHub enterprise here.

Install Git (skip this step if you already have Git installed)

To check to see if you have git installed, open Terminal and run git --version. A message will display if you already have it installed.

Follow the instructions here to install Git. I personally recommend using the Homebrew approach (requires you to install Homebrew), but the Binary Installer should work as well.

Generate SSH Key

1. Log in to your GitHub. Go to Settings > SSH and GPG Keys. Create a New SSH key.

2. Keep the page open. Open up Terminal and execute the two commands (replace YOUR NAME and YOUR GITHUB EMAIL):

   git config --global user.name "YOUR NAME"

   git config --global user.email "YOUR GITHUB EMAIL"

3. To generate an SSH Key, type ssh-keygen -t ed25519 -C "YOUR GITHUB EMAIL"

   1. Press enter when asked: “Enter file in which to save the key”.

   2. If asked “[…]/.ssh/id_ed25519 already exists. Overwrite (y/n)?”, type y and press enter.

      1. Note: If you have previously configured SSH authentication for other services, overwriting your current key will likely cause you to lose access. You will need to reconfigure that service to authenticate using the new key in order to regain access.

   3. When asked: “Enter passphrase (empty for no passphrase):” just press enter.

   4. When asked: “Enter same passphrase again:” just press enter.

   5. Copy the generated key to your clipboard by typing pbcopy < ~/.ssh/id_ed25519.pub

4. Go back to the GitHub page from earlier. For the Title field, I recommend putting the name of your device (such as “Vin’s Macbook”). The key type is Authentication Key. Paste the generated key, then click Add SSH key.

Configure SSH Agent

For newer Macs (12, Monterey/Ventura), run

ssh-add --apple-use-keychain ~/.ssh/id_ed25519

• If that command fails, try ssh-add --apple-use-keychain ~/.ssh/id_rsa

For older Macs (11, Big Sur), run ssh-add -K ~/.ssh/id_ed2551

• If that command fails, try ssh-add -K ~/.ssh/id_rsa

Cloning a repository (not needed for installation)

Open up Terminal and change the directory to wherever you want the repository files to be located. You can change the directory using the cd command.

• For example, if I want the repository files to be located in my Desktop, I would type cd Desktop

(base) vinnie@dhcp-vl2041-37760 ~ % cd Desktop 
(base) vinnie@dhcp-vl2041-37760 Desktop %

To clone a repository, simply type git clone <ENTER URL HERE>

In almost any program that we create, we will need to store data at some point. In Swift, we can store data in two ways: variables and constants. We can think of both variables and constants as a box holding some value inside. However, there is one key difference between these two. A variable can change its value whenever we want. On the contrary, a constant can hold a value once and can never be changed again.

It may seem pointless to have both variables and constants; however, there are many advantages. If Xcode knows that a value will never change, it will optimize our program to make it run faster. Another advantage is that if we were to make a mistake and change a value of a constant when we don’t need to, Xcode will tell us and our code will not compile.

Variables

To create a variable, we use the var keyword.

var instructor = "Vin"

To change the value of the variable, we can simply do the following.

var instructor = "Vin"
instructor = "Richie"

Let’s try this in the Xcode playground.

Notice how we do not need to use the var keyword the second time. We should only use the var keyword if we are declaring a new variable. We can test this out in the Xcode playground.

Constants

Now, what if we wanted to use a constant instead of a variable? All we would need to do is to use the let keyword instead.

As we can see, changing the instructor variable to a constant caused Xcode to get angry. The error message clearly informs us that we are attempting to change the value of a constant.

Lecture Slides

Lecture Video

In the course, we only utilized some basic functionalities of Git such as staging, committing, and pushing. However, Git is a lot more powerful than that which we will discuss in this chapter.

Branches

In the course, we mainly focused on one working branch known as main or master. When we made commits, we typically pushed them all into this one branch. When using this approach, collaborating with others was very difficult to do. If we did not fetch and pull from the main branch before working, we often had to deal with merge conflicts. Now, imagine if both developers are working on the same branch concurrently — a merge conflict is very likely to occur.

To avoid having to deal with merge conflicts every time we push to a branch, it’s often better to create separate branches when collaborating. To create a new branch and switch to it, use the following command:

git checkout -b "BRANCH_NAME"

Pull Requests

Pull requests (also known as PRs) allows us to discuss changes that were pushed onto a branch before merging it to the base branch. Let’s look at the following scenario.

Suppose we have a branch called A whose base branch was from main. We push commits and make changes to the branch A like how we would if it was the main branch. When we are ready to push these changes to the main branch, we can submit a pull request through GitHub to merge A to main. This allows other developers to review our code before merging it to the main branch. If changes need to be made, then we can push new commits to our A branch and request a review again.

When should we create a PR? There is no right or wrong answer to this question. A PR can be a single line of code or even a thousand lines. A good rule of thumb is to create a PR if it’s important to the state

PR Chaining

A huge benefit of creating branches and making PRs is that we can chain them together. Say we have two features, A and B, that need to be implemented. We create a branch off of main and call it A. When we are done with making changes to A, we can create a PR to merge it to main.

While the PR is being reviewed, we may need to work on a new feature (in this case feature B). What we can do is create a branch B from A (not main). Now, if we create a PR, we want to create a PR to merge B to A instead of main. This way, we do not have to wait for the previous PR to be reviewed. Additionally, only the changes made between A and B will be shown in the PR, making it a lot easier to review.

When both PRs are approved, we want to merge in the following order:

1. Merge the PR from A to main.

2. Delete the A branch. The target branch in the second PR will automatically change once A gets deleted.

3. Merge the PR from B to main.

Resolving Merge Conflicts

There are times when we may want to merge a working branch into another without creating a PR. For example, if we are on a branch A, we can simply merge main into our branch with the following command:

git merge main

When we run this command, we may receive merge conflicts. In other words, there are conflicts between the changes of the two branches, preventing the merge from happening. My preferred way to resolve merge conflicts is by using GitHub Desktop with Visual Studio Code (VSCode). VSCode will tell us where the conflict is occurring and allow us to resolve it quickly by clicking on “Accept Current Change” or “Accept Incoming Change”. See image below.

Of course, we can use our code editor to resolve the merge conflicts, but it can be difficult to locate where exactly the conflict is. GitHub Desktop works seamlessly with VSCode, allowing us to easily pinpoint and resolve the conflicts.

Undoing a Commit

There are times when we may want to undo a commit, such as when we push sensitive information to a public repository. To undo a commit, we can simply use the following command

git reset HEAD~2

where 2 means move backwards by 2 commits (we can replace this with a number of our choice). Note that this is a soft reset meaning that staged files are not reverted back to a previous state. In other words, we keep the code that we wrote on our local repository.

We can then create a new commit and then force push our changes to the repository:

git push --force

We have seen the four basic math operations in elementary school: addition, subtraction, multiplication, and division. In Swift, we can use operators to perform these operations.

Basic Operators

var a = 0
a = a + 10
a = a - 5
a = a * a
a = a / 10

The following lines are equivalent:

These operators are self-explanatory; however, if we were to take a closer look at the the line a = a / 10 we can notice that the output is 2 instead of 2.5. The reason for this is because the type of a is an Int. If we were to perform these operations on a, then we must also use an Int.

Then, how do we get the value 2.5? Because the type of a is an Int, then we must introduce a new variable of type Double or Float since we cannot change the type of a variable once initialized. We would also need to make sure that the values in which we apply these operators on must also be a Double or Float.

Let's take a look at the line Double(a). This is known as type casting. Because a is an Int and we needed a Double, Double(a) converts the value 2 to 2.0. Note that this does not change the type of a. It only produces a value to be used for that operation.

One more common operator we may see is the modulus operator (%). This is similar to the / operator except we return the remainder.

Common Operators

The following is a list of common operators that we are likely to use.

String Interpolation

String interpolation is a way of combining variables and constants inside a string. Take a look at this example:

var name = "Vin"
"My name is \(name)."

Of course, we could have used the + operator to concatenate these strings together.

The problem with this approach is efficiency especially if we want to concatenate multiple variables. Another issue with using + is that Swift does not allow types such as Int or Float to be glued with a String.

We could cast age to a String but that would be expensive.

Using string interpolation is a lot more efficient and looks cleaner too!

In the variables and constants section above, we assigned a text to a variable. In Swift, this is called a String and is one of the most important types we will use. However, there are many more types of data that Swift handles. In the example earlier, let’s try to do the following:

var instructor
instructor = "Vin"

There are two ways we can fix this error:

1. Initialize the variable with a value when we create it.

2. Tell Swift what data type the variable will hold on later.

We’ve already seen (1) earlier, but for (2) we can use type annotations.

Type Annotations

var instructor: String
instructor = "Vin"

The key takeaway here is that Swift is a statically typed language, meaning that the type of every property, constant and variable that we declare needs to be specified at compile time. This is a good thing because it prevents us from putting anything inside of the “box”. This is known as type safety. Let’s demonstrate this by introducing a new data type Int (integer).

Integer and Type Safety

var instructor: String
instructor = "Vin"

var year: Int
year = 2025

Everything works fine, but what if we were to swap the values of instructor and year?

Our code no longer compiles because we tried assigning a value whose type does not match the type of the variable at the time it was created.

Float and Double

We can store decimal numbers by using a Float and Double. The difference between these two is that a Double has twice the accuracy of a Float, and hence takes up more storage.

Boolean

A Bool (boolean) in Swift is a data type that can hold one of two values: true or false.

Type Inferencing

Earlier when we assigned an initial value to a variable,

var instructor = "Vin"

Swift automatically infers what data type the variable will hold. This is known as type inferencing. We could also specify a data type and provide an initial value at the same time:

var instructor: String = "Vin"

Most of the time, we will not be using type annotations and prefer having Swift infer our types. However, there are times when type annotation should be used. This will come with practice and from seeing how we write our code.

Sometimes we may want to show that our data does not have any value. If we were using Strings, then an empty string may be a good indicator for “no value”. What about integers? We could use 0 or -1. The problem with this is that we are creating imaginary rules for ourselves. Swift solves this issue by introducing optionals.

Indicating an optional

To indicate an optional in Swift, we use a ? succeeding the data type. For example, a string optional (or optional string) is represented by String?. This String optional can hold two things:

1. a String value

2. nil

nil means “nothing” or “no value”. To better understand optionals, let’s look at the following example:

This function returns a String optional with value “iOS is the best subteam” if the argument is "ios" and nil otherwise. Let’s put this in the playground and try to store this value into a variable:

What is the issue with this code? Well, the type of the variable iosLead is a String but the function returns a String?. These two data types are different. In that case, we could change the data type of iosLead to String?.

Okay, but what if there was a function that only takes in a String and not a String? but we still want to use the value returned from getSubteamLead?

This code will not execute because getSubteamLead returns a String? but the function cheerLead takes in a String. In this case, we would need to unwrap the optional.

Safely unwrapping optionals

In order to grab the non-nil value of an optional, we must unwrap it. There are three ways to do this:

1. if let

2. guard let

3. Force unwrapping (!)

The first two provides a safe way to unwrap the optional. Using the example from earlier, let’s try to unwrap the optional:

The constant leadName holds the unwrapped value returned from the function call getSubteamLead. We would then use leadName within the if statement. Now, if the function returned nil instead, then the block of code will not be executed.

We could also use a guard let statement:

The main difference between using an if let versus a guard let statement is the scope of the variable/constant. The constant leadName lives within the block of code in an if let statement whereas in a guard let statement, it lives outside of it. As we can see above, we are able to use the constant leadName outside of the guard let statement.

Force unwrapping optionals

Another (not recommended) approach to unwrap an optional is to force unwrap it using an exclamation mark (!).

Let me emphasize this again. Our code will crash if we unwrap an optional that is holding nil. We should only use this approach if we are 100% certain that the optional holds an actual value. However, most of the time we should not have to use this. Let’s use the code from earlier:

In this case, we know that the code will not crash because we are certain that leadName will not hold nil. However, leadName could hold nil and our code will crash if it does.

Implicitly unwrapped optionals

Earlier, we mentioned that we can indicate an optional by using a question mark (?). For example, we can indicate a String optional by doing String?. We can also use an exclamation mark (!) such as String!. The difference between these two is that the constant or variable with the data type that contains the exclamation mark, does not need to be unwrapped before it is used. This is called an implicitly unwrapped optional. We unwrap the optional the moment the variable or constant is initialized. We are very likely to see this when we get into UIKit.

Optional chaining

It can get very annoying having to unwrap optionals using guard let or if let statements and can clutter our code a lot. This may cause many people to be tempted to force unwrap an optional which we should already know is not good. Let’s take a look at the following code:

If we put this code in the playground, Xcode will give us an error.

The problem is that the uppercased method is only available for String types, not String? types. Since getSubteamLead returns a String? we would need to unwrap it before we can use it in the uppercased method. However, this is very annoying to do and can make our code cluttered. Thankfully, Swift allows us to use optional chaining:

That extra ? after the call to getSubteamLead is the optional chaining. This means everything after the ? will only be run if everything before it has a value and is not nil. Try this in the playground and the error message will go away.

Nil coalescing operator

Another clean way to handle optionals in our code is to use the nil coalescing operator. The following code is an example of how to use it:

The ?? is the nil coalescing operator and it provides a default value if the optional is holding nil. In the code above, if the call getSubteamLead(subteam: "design") returned nil, then the constant designLead will hold the default value "Invalid" instead of nil. This is very nice because we do not have to unwrap anything and ensures that there is an actual value.

Imagine a large scale application with thousands of lines of code. The codebase would be very messy! To solve this, we need to be able to reuse our code. We can do this with functions.

Functions allow us to define reusable blocks of code. We define a function by using the func keyword followed by the name of the function (myName) and open/close parentheses:

If we were to just define this function in the playground, nothing will be printed out. This is because we also need to call the function. We can call the function we previously defined with the following code:

Let’s test this in the playground:

Parameters and Arguments

The nice thing about functions is that we can pass in arguments to make our functions a lot more useful. Using the example above, let’s customize our function to make it a lot more versatile:

This function has a parameter called name which is of type String and uses string interpolation to output the name. We would then need to pass in an argument to the function call:

External and Internal Parameter Names

In Swift, we can change the way parameters are named in the function call and inside of the function definition.

In this example, the name of the parameter within the function definition is str but when we call the function, we use name. str is known as an internal parameter and name is called an external parameter. This may not seem useful at first glance, but it is a very powerful feature once we begin writing code.

We can also use an underscore (_) as the external parameter.

By doing this, we do not need to provide the external parameter name when passing in our argument in the function call.

Returning Values

The functions that we defined earlier did not have any return value, meaning that when we called the function, nothing gets sent back to the function caller. However, many of the functions we create will have a return value. To do this in Swift, we use the right arrow (→) followed by the return type.

The function above will return true if the argument that we pass in is an even number and false otherwise.

Because this function returns a value, we can do many things with this function call such as assigning the returned value to a variable.

In Swift, there are two ways that we can build complex data types beyond the given basic types like Int, Float, and String. Classes are one such way that we can build some of these complex data types that we'll see later on in the UIKit framework as well as many other Swift packages.

Defining a Class

If you have taken CS 1110 or 2110, then classes may already be familiar to you, but essentially; Classes can be thought of as blueprints. Within these blueprints, there are many different specifications and properties, for what we want the objects of the class to possess.

Thus, under the same analogy, objects are the houses that are built from the class blueprints

• Class = Blueprint

• Object = House built from blueprint

For example, let's suppose we define the following class for a house below:

class House {
    var color: String
    var material: String
    var owner: String

    init(color: String, material: String, owner: String) {
        self.color = color
        self.material = material
        self.owner = owner		
    }

    func paintHouse(color: String) {
	self.color = color
    }
}

Within the house class, there are many properties such as color, material, and owner along with their specified type, as well as any methods associated with the class.

Instantiation and Objects

However, with properties alone, the class is not complete, we need to also define an initializer as shown above. Essentially what the initializer does, is that it instantiates an object of the class.

In the code chunk above, notice the keyword self. The self keyword is used to represent an instance (or object) of the given class. In this case, the initializer creates the instance of the House class, which is then represented by the self keyword. Then, the properties color, material, and owner are initialized through self.

As shown below, the initializer is a function that is the same name as that of the Class, where we are able to pass in the desired values for the specified properties.

let blueHouse = House(color: "blue", material: "brick", owner: "Vin")
let redHouse = House(color: "red", material: "wood", owner: "Richie")

blueHouse and redHouse are both objects (or instances) of the same House Class

Now that we have an instance of that class we can then access its properties and call any class methods as shown below:

let house = House(color: "white", material: "wood", owner: "Reade")
house.color // white
house.paintHouse(color: "blue")
house.color // blue

Inheritance

Classes can also be built based on other classes, this is known as class inheritance. This is a prominent technique that we'll see used extensively throughout UIKit, even in the most basic apps, so it's something we will need to eventually get familiar with.

Lets move back to our scenario with the House class that has properties color, material, and owner, and methods like the initializer and paintHouse method.

class House {
    var color: String
    var material: String
    var owner: String

    init(color: String, material: String, owner: String) {
        self.color = color
        self.material = material		
	self.owner = owner		
    }

    func paintHouse(color: String) {
	self.color = color
    }
}

Supposed we wanted to define a new class to represent a TreeHouse, which includes all the properties that the House object does, but also includes new properties like treeType and slideColor.

Of course, it may seem logical at first to take all the code defined in the House class and copy it over to the TreeHouse, but this repetition of code may come back to bite us later on when we want to change the House class and also want the same changes to TreeHouse. We would have to change the same code twice!

Luckily, Swift offers a smarter solution with class inheritance: We can define the TreeHouse class based on our existing House class

class TreeHouse: House {
    // Class implementation here
}

The colon above is what establishes this inheritance, it indicates that TreeHouse is a subclass of House, or House is the superclass of TreeHouse; thus, TreeHouse will inherit all properties and methods from the House class.

let treeHouse = TreeHouse(color: "red", material: "wood", owner: "Tiffany")
treeHouse.color // red
treeHouse.paintHouse(color: "blue")
treeHouse.color // blue

However, we are not quite there yet, we also want to add the properties treeType and slideColor, and also change the paintHouse method so that we also have a color option to paint the slide.

class TreeHouse: House {
    var treeType: String
    var slideColor: String
		
    init(color: String, material: String, owner: String, treeType: String, slideColor: String) {
        self.treeType = treeType
	self.slideColor = slideColor
        super.init(color: color, material: material, owner: owner)
    }
}

Notice that we did not redefine any of the properties that already exist in House since they are inherited. In the initializer, notice a new keyword super. The keyword super represents the superclass, where in this case we are calling the initializer from the superclass House, which initializes the original 3 properties.

Now let us change the paintHouse function:

override func paintHouse(color: String, slideColor: String) {
    self.color = color
    self.slideColor = slideColor
}

Notice the keyword override. In Swift, override indicates that a method is implemented in the superclass, but we want to change it for the subclass. Thus, if we want to redefine the paintHouse function to apply for TreeHouse, we need to “override” the existing method

Now that we have learned a bit about functions and how they work, we will discuss something more general, called Closures.

Closures are self-contained blocks of functionality that can be passed around and utilized within your code. The most simple example of closure is a function, but there exist others that are very important to understand before exploring future topics.

Imagine we have a function, which is a type of closure:

func getData() -> String {
    return "Fetched Data"
}

One way we could use the return of this function is as follows:

// Same code from above
func getData() -> String {
    return "Fetched Data"
}

// Save the string returned from the function in a variable
var data = getData()
// Print the variable
print(data)

Pretty simple right? However, we could also achieve this differently by using a Closure Expression. Closure expressions allow us to pass a piece of code as an argument to a function. To incorporate this, we need to change the method signature of our "getData" function.

// This is the syntax to indicate that this 
// function takes in another function!
// "handler" is just the name of the variable,
// and we can call it whatever we want
func getData(handler: (String) -> Void) {
    handler("Fetched Data")
}

What is going on here? Let's first talk about the method signature. You will notice we added an argument to the function that is called "handler". This argument has a type of "(String) -> Void". This represents a function that needs to take in a String and return nothing (void). The "getData" function then passes the String "Fetched Data" into that function. Now, let's change the other part of our code.

// Same function from above
func getData(handler: (String) -> Void) {
    handler("Fetched Data")
}

func printData(data: String) -> Void {
    print(data)
}

getData(handler: printData)

Here, we created a function called "printData" that takes a string and returns nothing (void). Notice that this signature (string -> void) is the same signature as our "handler" argument. We then pass the "printData" function as an argument to our "getData" function. with this, our "getData" function will pass the String "Fetched Data" to the "printData" function that was passed to it. This will achieve the same result as the original code.

However, this can be simplified! Instead of writing out a whole other function, let's provide the code right into the function! This is what a Closure Expression is all about.

// Same function from above
func getData(handler: (String) -> Void) {
    handler("Fetched Data")
}

getData(handler: { data in
    print(data)
})

Nice! "data in" is a tricky syntax that you will have to remember. The "data" represents a String that will be returned to the handler after the getData function is run. Swift is smart, so it can automatically infer the type of "data" as a String due to the getData method signature.

If we want to execute a chunk of code only when a condition is met, then in Swift, we can use if, else if, and else statements. Let’s take a look at the following example:

var a = 0
if a == 0 {
    print("Zero")
} else {
    print("Not Zero")
}

When using conditionals, we must provide a condition which is an expression that evaluates to true or false. To enclose a block of code in Swift, we use curly brackets ({ and }). In the example above, the expression a == 0 evaluates to true so the block of code containing print("Zero") will be executed.

Now, what if a == 0 evaluates to false? In that case, Swift will read for the next condition, if any. Because the next statement is an else statement, there is no condition to check so this block of code will be executed.

Sometimes, we want to check for multiple conditions? In that case, there is more than one option:

1. Use the && (and) or || (or) operators

2. Use an else if statement

Let’s take a look at the second option.

var a = -6
if a < 0 {
    print("Negative")
} else if a % 2 == 0 {
    print("Even")
} else {
    print("Not even or negative")
}

First, the expression a < 0 is evaluated. Since -6 < 0 evaluates to true, Swift executes the block of code containing print("Negative"). Now, since the next statement is an else if statement, it will not be executed. The reason is because this else if statement is connected to an if statement. Since the first if statement evaluated to true, Swift will not check any other statements that are connected.

Now, if we were to change the else if statement to an if statement, Swift will check this statement because it is no longer connected to the first if statement.

Because both conditions are met and they are not linked together, "Negative" and "Even" will both be printed.

Guard Statement

Sometimes we want to exit our code execution early on for efficiency purposes. This is where the guard statement comes in. A guard statement is similar to an if statement except an if statement runs when the condition is true while a guard statement runs when the condition is false. We can think of a guard statement as using an if statement with a “not equals” (!=) or not” (!) operator.

The format for a guard statement is as follows:

guard condition else {
    // block of code
    // control statement: return, break, continue, or throw
}

condition is an expression that evaluates to true or false. If true, then the block of code is not executed. If false, then the block of code is executed. This is the exact opposite of an if statement.

What is UIKit?

UIKit provides a variety of features for building apps, including components we can use to construct the core structure of our iOS apps. The framework provides the core objects that we need to build apps for iOS. We use these objects to display our content onscreen, to interact with that content, and to manage interactions with the system. Apps rely on UIKit for their basic behavior, and UIKit provides many ways for us to customize that behavior to match our specific needs.

Create Views in UIKit

The UIKit framework provides an extensive library of classes that represent different kinds of views that we can utilize in our mobile apps. Thus, in order to create and customize these views, we need a basic understanding of classes, properties, methods, and inheritance. For example, suppose we wanted to display a title with a single line of text, we would first call upon the constructor to create an instance of UILabel:

let titleLabel = UILabel()

Every view has a different set of properties that we can utilize to customize our frontend view. In the case of the UILabel, we can define many elements of the text such as, text, font, textColor, textAlignment, etc.

titleLabel.text = "UIKit is Awesome!"
titleLabel.font = UIFont(named: "Comic-Sans", size: 16)
titleLabel.textColor = UIColor.red
titleLabel.textAlignment = .center

Thus, we are able to change the properties of the UILabel to display a customized view for our iOS App.

Setting Up a UIKit Project Programmatically

Before we write any code, let's make sure to properly set up our Swift files as detailed below. In this class we mainly teach UIKit with programmatic layout, and we DO NOT use Storyboard Swift. Follow the guide here:

Lecture Slides

Lecture Video

Lecture Demo

Clone the Repository

git clone https://github.com/intro-to-ios/lec2-uikit
OR git clone git@github.com:intro-to-ios/lec2-uikit.git

Checkout Branches

git checkout origin/1-uilabel
OR git checkout 1-uilabel

git checkout origin/2-uiimageview
OR git checkout 2-uiimageview

Classes Demo Code

class Student {
    // Properties
    var name: String
    var major: String
    var age: Int

    // Initializer
    init(name: String, major: String, age: Int) {
        self.name = name
        self.major = major
        self.age = age
    }
}

let vin = Student(name: "Vin", major: "Info Sci", age: 20)
vin.major // Prints "Info Sci"

class EngineeringStudent: Student {
    // Inherits properties from the superclass, but you can
    // define other properties specific to this class
    var doesShower: Bool

    // Initializer
    init(name: String, major: String, age: Int, doesShower: Bool) {
        self.doesShower = doesShower // Initialize properties specific to this class
        super.init(name: name, major: major, age: age) // Call superclass' initializer
    }
}

let archit = EngineeringStudent(name: "Archit", major: "CS", age: 20, doesShower: false)
archit.name // Good
archit.doesShower // Good
vin.doesShower // Does not work

Now that we know how to define class and utilize UIKit views, how do we position and organize these views in our apps? There are multiple ways to layout views to a screen in iOS development – some examples include frame-based, storyboards, and programmatic AutoLayout. However, the method we will be learning in this course is programmatic AutoLayout.

What is AutoLayout?

AutoLayout is a constraint-based organization system used for UI development in iOS applications. This constraint layout system allows for adaptive UI which adapts to screens of different sizes and orientations, using a relational layout structure to organize views with respect to one another. Thus, this method tends to be less error-prone and does not require us to worry about the coordinates of individual elements on the screen.

Important Terminology

When dealing with AutoLayout and constraints, there are a few terms that are important to understand before jumping in:

NSLayout and Setting Constraints

Before we begin setting up anchors and constraints, the view needs to be added to the base view of the NavigationController, or any superview. To do that, we call the following function:

superview.addSubview(currentView)

In the code chunk above, superview is the view that we want to contain the currentView

Every subview of UIView has these four properties: topAnchor, leadingAnchor, bottomAnchor, and trailingAnchor. As the names imply, topAnchor refers to the view’s top edge, leadingAnchor refers to the view’s left edge, bottomAnchor refers to the view’s bottom edge, and trailingAnchor refers to the view’s right edge.

An IMPORTANT note to always remember is that in order for us to use these anchors to create constraints (layout our views), we must remember to set the view’s translatesAutoresizingMaskIntoConstraints property to be false before setting these anchors.

Suppose we want to constrain a UILabel called labelA 50 pixels from the top of the screen, and horizontally aligned to the center of the screen like shown below:

This is how we would do that:

let labelA = UILabel()

override func viewDidLoad() {
    super.viewDidLoad()
    
    // Don't forget this step!!
    labelA.translatesAutoresizingMaskIntoConstraints = false

    // We need to add labelA to the base view of the Navigation Controller
    view.addSubview(labelA)
    
    // We have to activate our constraints in order to
    NSLayoutConstraint.activate([
        // Here, we can insert all the constraints that we want activated
        labelA.topAnchor.constraint(equalTo: view.topAnchor, constant: 50)
	labelA.centerXAnchor.constraint(equalTo: view.centerXAnchor)
    ])
}

We learned how to use variables and constants to store data, but only explored basic values such as integer numbers and text. However, when we program, we often need to hold more complicated data that requires a specialized format for organizing and retrieving the data. To do this, we use Data Structures.

Arrays

The most common data structure that we will be using is an array. Arrays store a group of values together into a single collection, and we can access these values using their position in the array.

var staff = ["Vin", "Richie", "Tiffany", "Jennifer", "Antoinette", "Elvis"]
staff[0]
staff[1]
staff[2]

We use square brackets [] to mark the start and end point of the array and use commas , to separate each value.

Swift uses type inferencing to determine the type of staff. Because all of the elements inside of the array are strings, Swift knows that staff is an array of strings (Array<String>). If we change the value of an element to a different type, our code will not compile.

Instead of letting Swift infer what types our array will hold, we can specify the type that we want.

As we can see, if we put in a value that does not match with the given type, our code will not compile.

However, it is possible to allow our arrays to hold any type. We can give it the special Any data type:

When adding values to our array, we must first initialize it with an original value. The following code will not compile:

We can initialize our array in the following ways:

var staff: [String] = []
var staff = [String]()

Notice that we used an append method to add elements to the end of the array. Swift provides many methods that we can use on our array, and we can even add our own! We can also use operators such as + to glue arrays together and return a new array. Read more about them in the Apple Documentation.

Dictionaries

Another common data structure that we might encounter are called dictionaries. These are similar to arrays except we use a key to access a value in the collection. In other words, dictionaries store key-value pairs.

var staffAge: [String: Int] = ["Vin": 19, "Richie": 20, "Antoinette": 4]

It is also common to break up our dictionary like so to keep things readable:

Similar to arrays, Swift provides a lot of methods that we can use with dictionaries. The Apple Documentation provides more information about them.

When we want to repeat a code a certain number of times in Swift, we can either copy and paste the code or even better, we can use loops. There are two main loops in Swift: a for loop and a while loop.

Looping over a fixed number of times

Let’s say we wanted to print out the numbers 1..10. In Swift, we can use the closed range operator (...) which is three periods in a row.

for i in 1...10 {
    print(i)
}

The variable i is known as a loop variable which is a variable that lives within the scope and lifetime of the loop. For every iteration, the value of i will change. Now, what if we didn’t need to use i and just wanted to print "Hello Vin and Richie" 10 times? We could still use for i in 1...10; however, it would be better to use an underscore (_) instead.

for _ in 1...10 {
    print("Hello Vin and Richie")
}

Why is ... called a closed range operator? Well, that’s because there is also an open range operator (..<). The difference between these two is that the closed range operator is inclusive whereas the open range operator is not. The following code will only be executed 9 times. It goes up to but not including 10.