📱

CS50 iOS Track 2: Introduction to iOS App Development

Jun 14, 2024

Lecture: Introduction to iOS App Development

Topics Covered

  • Overview of Swift and writing a basic iOS app
  • Key concepts: UIKit, MVC
  • Creating views using storyboards
  • Outlets and actions in Xcode
  • Segues for transitioning between views
  • Step-by-step guide to setting up a project in Xcode

UIKit and MVC Pattern

UIKit

  • Framework from Apple for creating user interfaces
  • Contains classes, methods, functions for UI elements like tables, images, buttons

MVC (Model-View-Controller)

  • Model: Represents data, acts as a data structure with no display logic
  • View: Presents data on the screen
  • Controller: Facilitates interaction between model and view; contains the majority of the code

Basic iOS App: Table View Example

Key UI Component: Table View

  • Used for lists (e.g., Contacts app, Twitter feed)
  • Simple and essential for many iOS applications

Setting Up Xcode Project

Initial Steps

  • Create a new Xcode Project
  • Select iOS and Single View App
  • Name the product (e.g., Pokedex), select Swift and Storyboard for language and UI
  • Save the project and optionally create a Git repository

Xcode Generated Files

  • AppDelegate.swift: Entry point for the app, manages app lifecycle
  • ViewController.swift: Basic template for screen logic
  • Main.storyboard: Visual editor for UI design
  • Assets.xcassets: Asset catalog for images
  • LaunchScreen.storyboard: Initial loading screen
  • Info.plist: Configuration file

UI Development with Storyboards

Using Storyboards

  • Drag-and-drop interface for creating UI elements
  • Outlets: Connect UI elements to code
  • Actions: Link UI element events to code

Creating Table View

  • Replace initial view with a UITableViewController
  • Setup storyboard to link to custom ViewController class
  • Define data model (Pokemon struct)
  • Populate table view with data from model

Adding Navigation

Navigation Controller

  • Adds a title bar and enables navigation between views
  • Embed initial view controller in a navigation controller

Detail View Creation

  • Create a second view controller on storyboard for detail display
  • Add UI elements like labels for data display
  • Use segues for transitioning between views

Implementing Segues and Passing Data

  • Define segue identifiers
  • Override prepareForSegue to pass data between view controllers
  • Use IBAction to manage UI element events

Formatting Data

  • Use String(format:) for formatting strings (e.g., leading zeros)

Running the App

  • Test the app on the iOS simulator
  • Verify UI interactions and data passing between view controllers

Summary

  • Covered basic setup and UI creation for iOS apps using Xcode
  • Implemented navigation and data display for a Pokedex app
  • Future steps include loading data dynamically from the internet