MVVM Simple TableView with Movie App in Swift
Tags: Swift, The Movie Db, Ytplayer, Mvvm, Tableview

I was searching several tableView examples to practice and I decided to make a simple movie app using the TMDb API. I’m still beginner to swift, so my lovely output might not get many 👏🏻, but could help some of iOS beginners like me

here’s the output,

I actually wanted to put the below gif in here, but i don’t know how 😈 if someone knows, please let me know.

So this is the main page of the app i made, just a simple tableView. I got movie data from The Movie Database(TMDb) which provides you with great movies datas time to time! You just need to sign up and create your own Key and request data to the server! (go to the site setting and check API for more details!)

oh, I used an open library for star rating control (Cosmos). It’s very simple and easy to use whenever you are trying to display star ratings!⭐️⭐️⭐️⭐️⭐️

This is my second page, which is displaying movie details like thumbnail images, movie title, ratings, genres, and overviews! if you click the play button on the thumbnail image, it will play the movie trailer from youtube.

I used YTplayerhelper to play videos from youtube.

At the bottom, to make it not too simple, I added a similar movie section using collectionView.

.

.

.

.

First be ready with your Pods!

If you don’t know what CocoaPod is, It is a dependency manager for using thousands of libraries. try to check more info in here and download it.

Here’s my Podfile,

📌 Cosmos: easy rating controls, It shows a star rating and takes rating input from the user.

📌 Kingfisher: Swift library for downloading and caching images from the web

📌 Youtube-ios-player-helper: is an open source library that helps you embed a YouTube iframe player into an iOS application

How to request the data from The Movie Database API?

First, be sure you create your own Key from TheMovieDB, and follow the steps in introduction page(easy to understand).

After creating Key, go to the movie page in the document, and you’ll see some of the sections like Get Popular movies, Get Reviews, Get Details and more! you can request to the server like this, “https://api.themoviedb.org/3/movie/now_playing?api_key=<<api_key>>&language=en-US&page=1".

💡There’s Test Mode so you can try to send request so try it out! :)

MVVM pattern

well, i said i’m new to Swift, i don’t know if my folder structure is correct, but here’s how it looks,

💣 If you relocated the file location of the LaunchScreen.storyboard and the Info.plist will give you an error so go to setting and be sure to change the path for each of them.

1️⃣ View Model → View models

2️⃣ Model → Simply structures

3️⃣ Controllers → View Controllers

4️⃣ Views → Storyboards (i made separate storyboard for the player view for movie trailer) and others.. :)

5️⃣ Network → I didn’t use any of the API for network but you can use Alamofire.

6️⃣ Resources

7️⃣ Supportings

.

.

.

.

.

.

.

.

How to request data?

here’s my code below, (sorry if my code isn’t that clean yet, i’m working on it)

and.. to decode the Json file.. :)

updated! I updated my code using generics and got improved :) if you want to read my post related to generics please click here.

So if you are done with getting data successfully, then what you need to do is UI

here’s my storyboard looks like,

❗️First ViewController → tableView

❗Second ViewController → ContainerView(for the similar movies), CollectionView(genres), CollectionView(to display similar movies)

How to use YTPlayer?

I was trying to import AVFoundation but i realized that i only have the video KEY (not the video path but the KEY for the URL) which “The Movie Database API” provides. so what i have to do was to use open Libraries and found YTPlayer provided by Youtube.

create Player.storyboard and create View for the PlayerView

Connect the View with YTPlayerView(probably this will recognize when you already install the pods), oh don’t forget to Connect the Storyboard as well!

Example of youtube link with key: https://www.youtube.com/watch?v=key

Simply you can load the Video playerView.load(withVideoID: <<KEY>>, playerVars: [“playsinline” : “1”]). then you will see the magic! 🦄

I think this is the end of my first tableView project, and thanks for reading this super long post! I hope something might help you. If there’s any suggestions, questions or anything could improve my coding skills please let me know!

Hopefully i can make it better next time 👏🏻