SwiftUI: fetch, parse, and display in data to the List. Navigation to DetailView

Liem Vo
Photo by Elijah Flores on Unsplash

Recently, Apple introduced the SwifUI in the WWDC 2019 that received a warmer welcome from the iOS developer community. I am also a bit curious and want to discover more how it works. I spent my time with the tutorial from Apple, HackingwithSwift tutorial, and the example from Raywanderlic. Today I want to fetch data from the internet and display in the app as the image

Demo — display list movies

This post will cover how to:

Fetch and parse data from the internet

Display in the list and navigate to the detail.


Fetch and parse data

The data that I am going to use in this app will come from the movie site where you can register an account and get the API key. This app will use the data from URL (https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=<your API key>). Server responses with the list data as below:

With this data, we need to build a movie model and the list to match with the movie data. These objects are decodable that will help to decode itself from external.

We use the JSONDecoder to parse this data:

let movies = try! JSONDecoder().decode(MovieList.self, from: data)

Fetch data from the server will use the URLSession with the snipe code below:

URLSession.shared.dataTask(with: url){
...
}.resume()

If you want to understand more about how to use the URLSession, you can refer a tutorial from Raywenderlich.

After having the fetch and parser data, we will build a class that is the role like a ViewModel. SwiftUI had introduced BindableObject as a ViewModel so the new class conforms from Bindable which name is NetworkManager.swift

We already have the data and now the time to build the list and detail screen.

Build List and detail screen

List will is a list with each item a movie. Swift UI supply many conveniences that help us build the list view simply with the List that requires a list of data with identity or unique id which we can use the movie id.

List(movies.identified(by: \.id)) { movie in
<Row view>
}

The row view will display the image, title, released date, and the rating.

Design — row view

The snipe code for the row:

HStack { // arrange sub views in horizontal
Image(image)
VStack { Text("Iron Man") // arange sub view in vertical
HStack {
Text("Date")
Text("Rating: 7.8")
}
}
}

To load the image from the internet and display in the Image View in SwiftUI which does not support by the Apple API. I find out a URLImage library that is built by Dmytro Anokhin. From the Xcode Project, I need to add this library via Swift Packages

The real code of MovieRow view as below:

import URLImage
import SwiftUI
struct MovieRow : View {
var movie: Movie
var body: some View {
HStack {
URLImage(URL(string: “https://image.tmdb.org/t/p/original/\(movie.poster_path)")!, delay: 0.25)
.resizable()
.clipped()
.frame(width: 120, height: 160)
VStack {
HStack {
Text(movie.title)
.color(Color.blue)
.lineLimit(nil)
Spacer() // help to align the title in the left
}
HStack {
Text(movie.release_date).color(Color.gray)
Spacer()
Text(“Rate: \(movie.vote_average.format())”)
}
Spacer()
}
}.padding()
}
}

The detail screen will display the title in the navigation title, image, and the overview of the video. Here is the result:

The MovieDetails class as below:

struct MovieDetails : View {
var movie: Movie
var body: some View {
VStack {
URLImage(URL(string: “https://image.tmdb.org/t/p/original/\(movie.poster_path)")!, delay: 0.25)
.resizable().clipped().frame(width: UIScreen.main.bounds.height/8*3, height: UIScreen.main.bounds.height/2)
HStack {
Text(“Description”).color(Color.gray)
Spacer()
}
Text(movie.overview).lineLimit(nil)
Spacer()
}.navigationBarTitle(Text(movie.title), displayMode: .inline) // inline will help to put the title and back button in the same row
.padding()
}
}

To navigate different views in the SwiftUI, the view need wrap in the NavigationView and handle the tap action in NavigationLink (available in Xcode 11 beta 3 — you can use with NavigationButton Xcode beta 1). The List will code to navigate different view as below:

Thank you for your time with my post. The git hub repository of this code https://github.com/liemvo/swiftui_moviedb

Liem Vo

Written by

Liem Vo

Senior mobile Developer (https://github.com/liemvo)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade