iOS & Swift: Server/Backend-Driven UI for Dynamic Apps

Name: iOS & Swift: Server/Backend-Driven UI for Dynamic Apps
Rating: 4.8 (21 reviews)

Build the unofficial Udemy Home Screen in SwiftUI and UICollectionViewCompositionalLayout with Robust Backend Handling

Created byKelvin Fok

Last updated 8/2024

English

English [Auto],

What you'll learn

Master Backend/Server Driven UI concepts
Learn 2 native Swift SDKs - UICollectionViewCompositionalLayout & UICollectionViewDiffableDataSource
Integrate modular SwiftUI views with UIKit based projects
Build the Udemy home screen with confidence
Learn how to construct highly dynamic screens with components
Learn how to use the SnapKit and SkeletonView library

Course content

5 sections • 35 lectures • 4h 25m total length

Setup Project4:53
Setup files and folders structure7:44
Set up a structured iOS project by organizing supporting files, extensions, helpers, models, and SwiftUI and UIKit views into clearly named folders, plus JSON payloads and API response models.
Setup collection view6:37
Add UI Model11:58
Create a home UI model to map backend json payloads to the front end, using hashable sections and items like banners, headers, and course lanes.

Add MainBannerView6:14
Build a main banner view in SwiftUI by loading an async image with a gray placeholder, then display a title and caption in a leading vertical stack.
OPTIONAL - Replace Unsplash with Picsum Image API1:53
swap the unsplash image endpoint with the Picsum image API to ensure landscape images load when unsplash servers are down, by updating the payload with the new endpoint.
Add MainBannerCollectionViewCell4:38
Embed a SwiftUI main banner view into a UIKit collection view cell using a UIHostingController, configuring image link, title, and caption, with snap kit auto layout.
Add MainBannerCollectionViewCell to CollectionView17:24
Add a main banner collection view cell to a collection view using a diffable data source and a compositional layout, including cell registration, snapshot updates, and sections.
Remove CollectionView Background7:03
Remove the collection view background color and use a compositional layout to render sections and items, with a default data source, group specifications, and applying snapshots.
Add TextHeaderCollectionViewCell5:20
Learn to build a text header collection view cell with an attributed tappable label, configure tappable text, and handle taps via an on-tap closure using SnapKit for layout.
Integrate TextHeaderCollectionViewCell to CollectionView7:49
https://gist.github.com/kelvinfok/76ac61fe950fa0f736e135a418b1e6d4
Resolve Tap Bug and Set Dynamic Height6:11
Refactor AttributedTappableLabel GetHeight3:10
Refactor the attributed tappable label height function into a static function accepting font and text, and use it to compute height with the collection view's frame width.
Add CourseView18:22
Add CourseCollectionViewCell3:31
Embed a SwiftUI cost view inside a UIKit collection view cell using a UIHostingController, configure the hosting controller with the cost view, and pin its root view to the cell.
Add CourseSwimlane to CollectionView9:18
Add Categories TextHeader4:31
Add a categories text header in a server-driven UI by updating the data source and UI model, and configure a text header with a four-line limit and padding.
Add CategoriesView9:14
https://gist.github.com/kelvinfok/29f1a90976fb85a04ddaaeff9574687e
Integrate CategoriesCollectionViewCell to CollectionView8:37
Integrate the categories collection view cell into the collection view by wiring a hosting controller to a titles array and configuring a horizontal compositional layout with insets.
Add Another Course Swimlane4:14
Learn to add a new course swimlane in a server-driven iOS app, updating section models, banners, and IDs, and prepare for API-driven dynamic content and tap navigation.
Add FeaturedCourseView2:12
Add featured course view by reusing the existing cost view, remove the tag, and adjust height properties to 140 in the canvas for iOS development.
Integrate FeaturedCourseCollectionViewCell to CollectionView7:06
Embed the featured course collection view cell into the collection view using a SwiftUI hosting controller, register and configure the cell, and implement a compositional layout for the featured section.
Add UdemyBusinessView6:25
Build a reusable Udemy business view in SwiftUI, featuring a vertical stack with a label, SF symbols icons, and a bottom indigo bordered button for collection view integration.
Integrate UdemyBusinessCollectionViewCell to CollectionView7:22
Integrate the Udemy Business collection view cell into a collection view using SwiftUI hosting controller, handle tap gestures, and configure a banner layout with compositional layout and data source setup.

Add Component TapGestures9:34
Implement and bubble up component tap gestures from collection view cells and headers to the collection view and view controller, enabling category and course taps to route via MVVM.
Send Tap Events to ViewController9:59
Handle Category Tap Event2:55
Show Course Details & Udemy Business9:46
Explore server/backend-driven UI in iOS by routing from a cost details view controller to a course detail view and opening the Udemy business link in a Safari web view.
Clean Up Tap Event3:09
Clean up tap events in the course UI by simplifying handlers for course item and banner taps, standardizing file names, removing warnings and unused values, and adopting a break-based implementation.

Add JSON Payload12:34
https://gist.github.com/kelvinfok/defa05ffa1906f1fe084522ee65cba24
Update API Response18:55
https://gist.github.com/kelvinfok/f7dd16fcda1e81b5e55b109478044186
Clean Up API Response1:17
Clean up the api response by removing unused hashable conformance and extraneous coding keys, keeping only type, id, and value to streamline server-driven ui.
Map API Response to UIModel17:27
Read Payload from Remote Server7:54
Learn to fetch a remote JSON payload and drive the UI from a server, replacing flaky Unsplash endpoints with a reliable image provider and integrating a Swift Combine-based API client.

Requirements

3 years of professional iOS experience
Requirement to build complex & highly dynamic front ends

Description

Welcome to the iOS & Swift: Server/Backend-Driven UI for Dynamic Apps course!

In this course, we learn to create dynamic & responsive user interfaces by leveraging backend data to shape the layout and content of our app's frontend. Concurrently, we utilized the robust capabilities of 2 native Swift SDKS - UICollectionViewCompositionalLayout & UICollectionViewDiffableDataSource alongside SwiftUI to achieve this.

Throughout the course, we will build the unofficial Udemy iOS home screen, incorporating industry leading practices to integrate modular SwiftUI views into a UIKit-based project. Additionally, we will layout views using the SnapKit library, enhancing our skills in interface design and implementation.

By embracing the Server/Backend-Driven UI design principle into our development workflow, we seamlessly integrate backend data to drive the layout and content of our app's frontend. This approach not only enhances flexibility and adaptability but also guarantees a uniform and captivating user experience across diverse devices and screen sizes.

Noteworthy companies employing the Server/Backend-Driven UI strategy include Uber, Spotify, Reddit, Airbnb, SnapChat & Lyft.

This course is designed for experienced iOS developers with at least three years of working experience and a strong foundation in UIKit, who are eager to explore SwiftUI's capabilities.

By the end of this course, you'll master the skills and confidence needed to implement dynamic frontend designs utilizing the Server/Backend-Driven UI principle in your own production apps.

Who this course is for:

Full time developers who are keen to explore SwiftUI but working with a UIKit based project
Full time developers who want learn backend driven UI

iOS & Swift: Server/Backend-Driven UI for Dynamic Apps

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 31min

Adding Components20 lectures • 2hr 21min

Working with Navigation5 lectures • 35min

Server Driven5 lectures • 58min

Source Code1 lecture • 1min

Requirements

Description

Who this course is for: