meeting 3: recap & more!

Recap !

These are our main views: SwiftUI files which the user interacts with. These files only contain design and UI components.

This is another view that establishes what all our “Destinations” will look like when we click on them (the image, description, title, etc.)

These are our components, which support our views by adding visual details.

This is a Model, which establishes the logic of each of our “Destination” cards.

Progress !

We’ve set up our ContentView so it displays DestinationsList with clickable Destination cards.

We’ve also finished our DestinationsView so we can see the description for each of our Destinations.

Progress !

Next week we will get started with implementing our Categories page. We will also create a form so users can upload new destinations.

MVVM (Model, View, ViewModel)

• MVVM is a design pattern to help organize our code! Instead of having the visual aspects and logic in one file, we can separate it using a new model.
• View: Presents the basic visual components our users interact with.
• Model: Holds the logic and data.
• ViewModel: The glue between View and Model. Transforms data in a View-friendly way.

DestinationsView is a Model!

DestinationsCard is a View and ViewModel!

Data Binding: The DestinationCard view directly accesses properties of the Destination object passed to it. It binds to the destination parameter to display the name and image of the destination.

Presentation Logic: DestinationCard defines the presentation logic for displaying a destination. It determines how the destination's image and name are presented on the screen, including styling, layout, and handling placeholder images.

It defines the layout of the destination card and how its contents are displayed, making it closer to a ViewModel in terms of responsibilities.

Breaking down the DestinationsModel

Enums, structs, and extensions !

Static Property

A property which belongs to a type and instances of said type can use.

The static properties we will see are:

• all (defined by us)
• allCases (provided by Swift)
• ID (provided by Swift)

What is the ID property?

ID uniquely identifies the instances of a type, such as user or person. It’s helpful for indexing through collections, comparing items, and identifying objects.

​

​

What’s a Protocol ?

• A blueprint of methods and requirements that can be adopted by classes

• A view is a protocol:
• A view requires a body that returns content to be displayed on a screen

• List and ForEach use data that can conform to Identifiable protocol. An Identifiable data needs an id (more on this in the next slide).
• An id helps so the list knows how to identify each cell in the list.

Category Enum

This enum represents categories for destinations.

It conforms to the Identifiable protocol, which means it has an id property that uniquely identifies each case.

CaseIterable is a protocol which allows us to iterate through all values of Category (will be useful later to use print(Category.allCases).

Each case of the enum represents a category (the Strings visited and toVisit).

The id property is implemented to return the raw value of each enum case (which is a string in this case).

​

​

This is what the categories will be used for!

Destination Struct

1. This struct represents a destination.
2. It also conforms to the Identifiable protocol, meaning it has an id property.
3. Properties include:
1. id: A unique identifier generated using UUID.
2. name: The name of the destination.
3. image: A string representing the URL of the image associated with the destination.
4. description: A string describing the destination.
5. location: A string indicating the location of the destination.
6. date: A string representing the date associated with the destination.

Extension

Allows us to add new functionality to an existing struct (or class, enum, etc.). Uses:

• Organizing code
• Adding functionality to existing types
• Conforming to protocols

Extension on Destination

Provides a static property all which is an array containing instances of Destination.

This array contains predefined destination objects initialized with our data.

NEXT WEEK

CategoriesView

CategoryView

… and more

View vs NavigationLink vs NavigationView ?

• View:
• View is a visual building block of SwiftUI. It displays our content to our users.
• Views can be simple, such as Text, Image, or Button, or they can be complex, composed of other views, such as a NavigationView
• Every View conforms to the View protocol, which offers modifiers to configure views (foregroundStyle, font, etc)

​

• NavigationView:
• NavigationView is a container view used to manage navigation hierarchies in SwiftUI.
• Adding .navigationTitle
• Presenting new views:
1. NavigationLink
• Navigation Bar

• NavigationLink:
• NavigationLink is a view used to navigate to another view in a SwiftUI navigation stack.
• It creates a button that, when tapped, pushes a destination view onto the navigation stack.
• It's commonly used inside a NavigationView, enabling navigation between different screens or views in an app.

​

​

GitHub

• In case you didn’t know:
• We have a repo!
• https://github.com/acm-uic/TravelBucketList
• I’ll be updating it each week