In the first part of this 2-part SwiftUI tutorial, we’re going to build the home screen of our Pokedex app using the latest versions of Swift and SwiftUI (Swift 5.5 and SwiftUI 3). I’ll show you how to use async and await in your networking calls, how to load images using AsyncImage or Kingfisher, and much more.

We'll build this project using the Xcode 13 and iOS 15 betas. In order to follow along, you'll need to download Xcode 13. At the time of recording, Xcode 13 is still in beta and requires a developer account to use. You can download it here:
https://developer.apple.com/download/

This tutorial is inspired by the Pokedex video from AppStuff. Check it out here:
   • Build A Pokedex With SwiftUI 2.0 | MV...  

Here is the API endpoint we’ll be using:
https://pokedex-bb36f.firebaseio.com/...

To test and view the JSON response, check out tools like Paw or Postman:
https://paw.cloud
https://www.postman.com

Here is the typeColor computed property:
var typeColor: Color {
switch type {
case "fire":
return Color(.systemRed)
case "poison":
return Color(.systemGreen)
case "water":
return Color(.systemTeal)
case "electric":
return Color(.systemYellow)
case "psychic":
return Color(.systemPurple)
case "normal":
return Color(.systemOrange)
case "ground":
return Color(.systemBrown)
case "flying":
return Color(.systemBlue)
case "fairy":
return Color(.systemPink)
default:
return Color(.systemIndigo)
}
}

Chapters:
0:00 Welcome and app design
0:40 API Intro
1:56 New Xcode Project
3:14 Create Pokemon struct
6:50 Create PokemonModel class
11:55 Create Data extension
13:38 Finish PokemonModel
15:04 Implement List in ContentView
20:25 Add Images to ContentView with AsyncImage
24:35 Implement typeColor computed property
27:20 Add Kingfisher using SPM
29:00 Update ContentView to use KFImage
30:46 Final Clean Up
31:30 Thank You!

Follow me on Twitter:
  / kouris_john  

Music:
   • Memories - PLOCKZ | Free Royalty Free...  

#SwiftUI #Swift #iOS15 #SwiftUI3 #AsyncImage #AsyncAwait #Kingfisher #Tutorial