DEV Community: Rohan Joshi

SwiftUI Essentials: Crafting a To-Do List App with Xcode and Git Integration

Rohan Joshi — Wed, 07 Feb 2024 16:33:02 +0000

SwiftUI Basics

Lets start…
We’ll cover basics of SwiftUI, basics of git in xcode and a hands-on task.

Declarative Syntax in SwiftUI

Declarative approach allows developers to focus on the “what” aspect of UI elements rather than the “how”. This means you simply declare what you want, and SwiftUI conjures the UI elements into existence.

Few SwiftUI Components

Let’s start our journey with a primer on the quintessential SwiftUI Views and Controls. SwiftUI provides a plethora of UI components, but mastering the basics can significantly ease your path.

Text: Renders static or dynamic text content in your app.

    // Displays a line of text with a predefined font style and padding around it.
    Text("Welcome to SwiftUI")
        .font(.title)// Sets the font style of the text to a title style.
        // More info: https://developer.apple.com/documentation/swiftui/text/font(_:)
        .padding()// Adds padding around the text.
        // More info: https://developer.apple.com/documentation/swiftui/view/padding(_:)

Image: Adds images to your UI, supporting a wide range of formats.

    // Displays an image from the asset catalog, resizable and with aspect ratio control.
    Image("logo")
        .resizable() // Allows the image to be resized.
        // More info: https://developer.apple.com/documentation/swiftui/image/resizable(capinsets:resizingmode:)
        .aspectRatio(contentMode: .fit) // Keeps the aspect ratio and fits content within the bounds.
        .padding(50) // Adds padding of 50 points around the image.

Button: Executes an action when tapped, a staple for interactive applications.

    // Creates a button with a text label, action to print a message, and various modifiers for appearance.
    Button("Tap Me!") {
        print("Button was tapped")
    }
    .padding() // Adds padding around the button for better touch area.
    .background(Color.blue) // Sets the background color of the button to blue.
    // More info: https://developer.apple.com/documentation/swiftui/view/background(alignment:content:)
    .foregroundColor(.white) // Sets the text color of the button to white.

Stacks: Vertical (VStack) or horizontal (HStack) stacks arrange UI elements linearly.

    // Uses a VStack to organize text vertically with default spacing.
    VStack {
        Text("First Line") // First line of text.
        Text("Second Line") // Second line of text.
        // VStack docs: https://developer.apple.com/documentation/swiftui/vstack
    }

    HStack {
        Text("First")
        Text("Second") 
        // HStack docs: https://developer.apple.com/documentation/swiftui/hstack
    }

Frame and Padding Modifiers: Customize the size and layout, adding breathing space around your UI elements.

    // Sets a specific frame size, applies a border, and adds padding.
    Text("Hello, SwiftUI")
        .frame(width: 200, height: 100) // Explicitly sets the frame size of the Text view.
        // More info: https://developer.apple.com/documentation/swiftui/view/frame(width:height:alignment:)
        .border(Color.black) // Adds a border with specified color around the Text view.
        // More info: https://developer.apple.com/documentation/swiftui/view/border(_:width:)
        .padding() // Adds padding around the bordered Text view.

Git Version Control in Xcode

Through Xcode’s user-friendly interface, users can initialize a Git repository when creating a new project or add an existing project to a repository. Managing the repository involves several key actions:

Committing Changes: After making modifications to your project, you can commit these changes directly within Xcode.
Example: After editing a file, you can commit these changes by selecting it in the Source Control navigator, entering a commit message like "feat: new feature", and then committing the changes.
Branching: Creating branches allows you to work on different features or fixes without affecting the main project.
Example: To create a new branch for a feature, go to Source Control > New Branch, name it ‘feat/new-feature’, and start working on your feature independently.
Pushing and Pulling: Syncing your local changes with a remote repository (e.g., GitHub) is done with pushing (to send local commits) and pulling (to receive changes from others). This ensures all team members are working with the latest codebase.
Example: Push your commits by selecting Source Control > Push. If you've fetched changes from the remote repository, you can integrate them into your branch by selecting Source Control > Pull.
Merging Changes: Integrating changes from one branch into another, such as merging a feature branch into the main branch, is done through the Merge feature in Xcode.
Example: To merge the ‘feat/new-feature’ branch back into ‘main’, select the ‘main’ branch, then choose Source Control > Merge and select ‘feat/new-feature’ to merge its changes into ‘main’.

Hands-On Mini-Project: Building a simple “To-Do List” App

What better way to consolidate your learning than by diving into a hands-on mini-project? Applying the concepts of SwiftUI and version control, let’s create a simple yet functional “To-Do List” app.

Implementing basic TextField to gain input
Employing list views to display tasks.
Managing state with @State for dynamic UI updates.

Step 1: Set Up Your SwiftUI Environment

Start by creating a new SwiftUI project in Xcode.

Step 2: Define Your To-Do Model

First, we define a simple model for our to-do items.

    import Foundation

    // Identifiable docs: https://developer.apple.com/documentation/swift/identifiable
    struct ToDoItem: Identifiable {

        // UUID docs: https://developer.apple.com/documentation/foundation/uuid
        let id = UUID()
        var name: String
    }

Step 3: Build the UI Components

Let’s build the UI for displaying and adding to-do items.

ContentView.swift

    import SwiftUI


    // Defines a ContentView struct that conforms to the View protocol, serving as the UI for your app.
    struct ContentView: View {
        // @State is a property wrapper designed for local state management in SwiftUI, triggering the view to re-render upon changes.
        // More info: https://developer.apple.com/documentation/swiftui/state
        @State private var items: [ToDoItem] = []
        @State private var newItemName: String = ""

        var body: some View {
            // More info: https://developer.apple.com/documentation/swiftui/navigationstack
            NavigationStack {

                // List is used to display an ordered collection of data.
                // More info: https://developer.apple.com/documentation/swiftui/list
                List {

                    // Section docs: https://developer.apple.com/documentation/swiftui/section
                    Section(header: Text("Add New Task")) {

                        // HStack docs: https://developer.apple.com/documentation/swiftui/hstack
                        HStack {

                            // TextField for user input.
                            // TextField docs: https://developer.apple.com/documentation/swiftui/textfield
                            TextField("Task Name", text: $newItemName)

                            // Button docs: https://developer.apple.com/documentation/swiftui/button
                            Button(action: addNewItem) {
                                Image(systemName: "plus.circle.fill")
                                    .foregroundColor(.orange)
                            }
                        }
                    }

                    Section(header: Text("My Tasks")) {

                        // ForEach docs: https://developer.apple.com/documentation/swiftui/foreach
                        ForEach(items) { item in
                            Text(item.name)
                        }
                        // onDelete docs: https://developer.apple.com/documentation/swiftui/dynamicviewcontent/ondelete(perform:)
                        .onDelete(perform: deleteItem)
                    }
                }
                // navigationTitle docs: https://developer.apple.com/documentation/swiftui/view/navigationtitle(_:)-43srq
                .navigationTitle("TaskTango")

                // toolbar docs: https://developer.apple.com/documentation/swiftui/view/toolbar(content:)-7vdkx
                .toolbar {

                    //EditButton docs: https://developer.apple.com/documentation/swiftui/editbutton
                    EditButton()
                }
            }
        }

        func addNewItem() {
            if !newItemName.isEmpty {
                items.append(ToDoItem(name: newItemName))
                newItemName = ""
            }
        }

        // IndexSet docs: https://developer.apple.com/documentation/foundation/indexset
        func deleteItem(at offsets: IndexSet) {
            items.remove(atOffsets: offsets)
        }
    }



    #Preview {
        ContentView()
    }

Preview

Through this example, we’ve seen how to use basic SwiftUI components to create an intuitive and functional app, incorporating core features such as state management.
Please note in this project we have not used the best architecture (we will cover later in the series), this is just to demonstrate how various components come together!

Github Repo — https://github.com/rohanjsh/todo.git

Practice. Experiment. Learn

Mastering Advanced Swift: Optionals, Collections, Closures, Protocols, and Error Handling

Rohan Joshi — Wed, 10 Jan 2024 08:47:02 +0000

Advanced Swift Concepts

Before starting, Open Xcode, Click on File => New => Playground => iOS => Blank, and create a new playground to run Swift Code.

Optionals

Swift’s powerful Optionals feature lets you save a value that that could be nil (no value).

    var optionalString: String? = "Hello"
    print(optionalString) // Output: Optional("Hello")

Using if-let or guard-let statements, or by setting a default value, you can safely unwrap an optional:

    // if-let
    if let unwrappedString = optionalString {
        print(unwrappedString) // Safe unwrapping
    } else {
        print("The optional was nil.")
    }

    // guard-let
    func someFunction() {
        guard let unwrappedString = optionalString else {
            print("The optional was nil.")
            return
        }
        print(unwrappedString) // Safe to use 'unwrappedString' after this point
    }

    // default
    print(optionalString ?? "DefaultValue")

Collections

Swift provides arrays, sets, and dictionaries for storing collections of values.

Array: Ordered collections of values.

    var someInts = [Int]() // An empty array
    var moreInts: [Int] = [10, 20, 30]

Set: Collections of unique values.

    var aSet: Set<Int> = [1, 2, 3, 4, 5]

Dictionary: Unordered collections of key-value associations.

    var namesOfIntegers: [Int: String] = [1: "one", 2: "two", 3: "three"]

Closures

Self-contained functional blocks called closures can be utilised and passed around within your code.

    let greetingClosure = { (name: String) in
        print("Hello, \(name)")
    }
    greetingClosure("World")

Constants and variables from the surrounding context can be captured by closures.

Protocols

A protocol is a set of guidelines that specify the attributes, methods, and other needs necessary for a certain piece of functionality like a blueprint.

    protocol FullyNamed {
        var fullName: String { get }
    }

    struct Person: FullyNamed {
        var fullName: String
    }

    let john = Person(fullName: "John Appleseed")

Extensions

Extensions provide an existing class, structure, enum, or protocol type new functionalities.

    extension Int {
        func squared() -> Int {
            return self * self
        }
    }
    print(3.squared()) // Output: 9

Enums

Enums allow you to work with a set of related values in your code in a type-safe manner by defining a common type for them.

    enum Direction {
        case north
        case south
        case east
        case west
    }
    var directionToHead = Direction.west

With features like related values, Swift enums are far more powerful than enums in many other languages.

    enum Barcode {
        case upc(Int, Int, Int, Int)
        case qrCode(String)
    }

    var productBarcode = Barcode.upc(8, 85909, 51226, 3)

Error Handling

For the purpose of propagating, catching, modifying, and throwing recoverable errors at runtime, Swift offers first-class support.

    enum PrinterError: Error {
        case outOfPaper
        case noToner
        case onFire
    }

    func send(job: Int, toPrinter printerName: String) throws -> String {
        if printerName == "Never Has Toner" {
            throw PrinterError.noToner
        }
        return "Job sent"
    }

Exercise: Practice With Advanced Swift

Firstly, a Swift closure that takes a string and prints it. Next, create an enum with a few possible UI states (such as loading, error, and success), and then write a function that accepts the enum as an input and outputs a message according to each state.

These language features are essential to learning Swift and becoming a proficient iOS developer because they are often utilised in UI programming, particularly when handling user interactions and asynchronous processes.

After you understand these ideas, we’ll go on to leverage UI with iOS-specific APIs, and eventually creating an entire application. Practice these ideas because they will serve as the foundation for your understanding of iOS development.

Practice. Experiment. Learn

Swift Programming: Variables, Control Flow, Functions, and Object-Oriented Concepts

Rohan Joshi — Mon, 08 Jan 2024 08:46:36 +0000

Introduction to Swift Programming: From Basics

Before starting, Open Xcode, Click on File => New => Playground => iOS => Blank, and create a new playground to run Swift Code.

Swift Fundamentals

Variables and Constants

Swift uses var to declare variables and let to declare constants.

    var variableName: DataType = initialValue
    let constantName: DataType = initialValue

Example:

    var greeting: String = "Hello"
    let pi: Double = 3.14159

Constants (let) cannot change their value after they are set, while variables (var)may.

Data Types

Some common data types in Swift include:

String for text
Int for whole numbers
Bool for Boolean values
Double and Float for floating-point numbers

Swift is a type-safe language, meaning it encourages you to be clear about the types of values your code can work with.

Control Flow

Swift provides several ways to control the flow of code execution, including if statements, switch cases, and loops.

If Statement:

    if someCondition {
        // Code to execute if someCondition is true
    } else if anotherCondition {
        // Code to execute if anotherCondition is true
    } else {
        // Code to execute if the above conditions are false
    }

Switch-cases

    switch <#some value to consider#> {
    case <#value 1#>:
        <#respond to value 1#>
    case <#value 2#>,
        <#value 3#>:
        <#respond to value 2 or 3#>
    default:
        <#otherwise, do something else#>
    }

For-In Loop:

    for item in items {
        // Code to execute for each item in 'items'
    }

While Loop:

    while someCondition {
        // Code to execute while someCondition remains true
    }

Functions

Functions are self-contained chunks of code designed to carry out particular tasks.

Syntax:

    func functionName(parameterName: ParameterType) -> ReturnType {
        // Code
        return someValue
    }

Example:

    func greet(person: String) -> String {
        let greeting = "Hello, \(person)!"
        return greeting
    }

Here you have a function named greet that takes one parameter of type String and also returns a String.

Exercise: Try a simple function

Let’s write a function that takes a person’s name as a parameter and prints a customised greeting.

    func greet(person: String) {
        let greeting = "Starting iOS Development with, \(person)!"
        print(greeting)
    }

    greet(person: "Rohan") 
    // Outputs: Starting iOS Development with, Rohan!

This function takes a String parameter and uses string interpolation to include it in a greeting, which is then printed to the console.

Classes and Structures

Swift uses classes and structures to define custom data types.

Structure Example:

    struct Person {
        var name: String
        var age: Int
    }

    var person1 = Person(name: "John", age: 25)

Class Example:

    class Vehicle {
        var numberOfWheels: Int

    init(numberOfWheels: Int) {
            self.numberOfWheels = numberOfWheels
        }

    func information() {
            print("I have \(numberOfWheels) wheels")
        }
    }

    let myVehicle = Vehicle(numberOfWheels: 4)
    myVehicle.information() // Outputs: I have 4 wheels

Classes are reference types, meaning that when you assign a class instance to a variable or constant, you are actually pointing to the same existing instance, whereas structures are value types, meaning that they replicate the instance. This is the primary distinction between classes and structures.

You now have a basic understanding of basic programming concepts and Swift syntax. Now write your function, experiment with conditionals and loops, and perhaps try defining a class or a structure. The logic in your programmes will be built using these technologies as the building blocks.

Practice. Experiment. Learn

SwiftUI for Beginners: Setting Up Your iOS Development Environment with Xcode

Rohan Joshi — Mon, 08 Jan 2024 08:37:24 +0000

Getting Started with SwiftUI and Xcode

As I learn about iOS, I want to share my learnings through this series of articles. Mainly for those who have had some development experience. This series will help you quickly get started by writing some actual code in action.

Lets start!!

Setting Up Your Development Environment

⚙️ Step 1: Installing Xcode

The IDE that is used for iOS development is Xcode. You’ll need a Mac to run Xcode.
Download Xcode from the Mac App Store.

Once installed, go ahead and open Xcode.

🌟 Step 2: Creating a New Project

Launch Xcode.
Either pick File > New > Project or select “Create a new Xcode project” from the welcome box.
Select the “iOS” app template and click then “Next”.
Type in the project name as per your wish, such as “FunApp”.
Verify that SwiftUI is selected for the interface.
Select Swift as the language.
Choose a location to save your project and then click “Create”.

🌌 Step 3: Become acquainted with Xcode

The window that you are seeing now is of the new project you just created.
The Navigator area, where you can choose which files to edit, is located on the left.
The Editor section, where you can write and edit code, is located in the center.
The Utility area, located on the right, displays information about the file that is now selected as well as the parts of the storyboard file’s interface when it is being used.

📝 Step 4: Fundamentals

Look for a file called “ContentView.swift” in the Navigator. Open this file
A basic SwiftUI view sample will be shown to you.

This is an example of a basic SwiftUI ContentView structure:

    import SwiftUI

    struct ContentView: View {
        var body: some View {
            Text("Hello, world!")
                .padding()
        }
    }

    #Preview {
        ContentView()
    }

This code defines a new struct called ContentView, which conforms to the View protocol. This struct defines the content and layout for a view. It simply contains a text label that says "Hello, world!".

🚀 Step 5: Run Your App

Use Xcode simulator to observe your app in action.
The “Run” or “play” button can be located in the upper left corner of the Xcode window.
Xcode will build and launch your program when you click it. The “Hello, World!” text from your app should appear on a simulator.

Congratulations! You’ve just set up your development environment and ran your first basic iOS app using SwiftUI.

In Part 2, we will explore Swift programming with variables, data types, functions, and control flow, and then we will move on to creating more distinct views with user input, etc. Remember, practice is essential, so try tweaking the text, adding new views, and experimenting with the code to see the results in the simulator.

Custom Swatch for Material App Theme – primarySwatch

Rohan Joshi — Tue, 20 Apr 2021 14:17:20 +0000

‘Color’ is not a subtype of type ‘MaterialColor?’, ever got this kind of error at runtime, most probably, defining the primarySwatch for your App.

So let’s find out how to define a custom swatch that would work as expected.

A color that has a small table of related colors called a “swatch” — Dart Docs

To create our own small table we need some values to put it in, right. So where can we get them? People on the earth are just awesome, we have a tool Make Tints and Shades to our rescue.

Get any color HEX code you want paste it in that box, and then click on ‘Make tints and Shade’ (Tip for future — Hover the shades to copy the code)
Create a new dart file for our new values' home. I have named it ‘palette.dart’. (You guys can post your creative names in comments 😜)

From Dart Documentation



const MaterialColor(
int primary,
Map<int, Color> swatch
)
//Creates a color swatch with a variety of shades.
//The primary argument should be the 32 bit ARGB value of one of the values in the swatch, as would be passed to the new Color constructor for that same color, and as is exposed by value. (This is distinct from the specific index of the color in the swatch.)

To tap into the desired value, all you need to create is a Map. That is exactly what we have created below with defining a class Palette for better use and scalability in the future.

Now we just need to import our newly created dart file in main.dart for implementation.

When we define a primarySwatch by ourselves, Theme itself takes some decision in defining colors for widgets like AppBar, FAB, etc. And that’s it, we have a very own customized primarySwatch defined.