The course is part of this learning path
In this course, we're going to create an Instagram Clone and learn how to work with cloud servers using Firebase. By the end of this course, you will be well-equipped to build your own apps!
Intended Audience
This course is designed for anyone who wants to:
- Learn about iOS development and coding
- Move into a career as an iOS developer
- Master Swift skills
Prerequisites
To get the most out of this course, you should have some basic knowledge of iOS.
Hi, within this lecture, we're going to find a way to download those images that we got from the Firestore. Right now, we only have the URLs, this one. And we're going to download those images and show them to the user in our custom view cells. In order to do that, we have to find a way to asynchronously download those images and show them to the users. Why do I use the term asynchronous? Because as you know, if we do this synchronously, it will block the user interface. We will have to wait until it gets downloaded from the Internet and user won't be able to use the app and it will crash eventually. OSo, let me go to Google and let me search for ios swift asnyc, and image load or image download into imageview. So, that's exactly what we want. We want to asynchronously download some images from some URLs and show them inside of an imageview. And in here as you can see we have a lot of tutorials and also some tools. So, I'm going to use this SDWebImage. This is one of the most popular ones, you're more than welcome to try the other ones as well, but I believe SDWebImage is good. So, if you're not satisfied with it later on you can come back and try this Kingfisher for example. And if you come to this website github.com/ SDWebImage, you may see the SDWebImage tool in here, so this tool is created for IOS and it's very easy to use. It's very user friendly. You just say the URL and it downloads the image and shows inside of an imageview. So, if you come down a little bit you can see the usage and it's pretty awesome. All you have to say imageView.sd setImage and specify a URL. That's it, it will download it and show it inside of a imageView and in here if you want, you can add a placeholder as well. Until it gets downloaded, it shows the placeholder if you want one. So, that's what we're going to do, that's what we're going to use and in order to use that, in order to import that we have to download it using pods. So, as you can see it gives you a description for using pod files. So, all we have to do is just copy and paste this line from here and it's fairly easy, pod 'SDWebImage'. I'm going to copy this as it is and see if this works. And I believe just writing pod SDWebImage will work as well but I'm going to try this first because it's instructed as it is. And then later on I'm going to adjust it if it doesn't work. Thank God, we already have our pod because we have actually imported Firebase into our project as well. So, make sure you close down the Xcode, and go to your Podfile and open with this TextEdit. So, we already have some values in here, let me zoom in a little bit. We have the pods of the Firebase and I'm going to paste this as the web image on the bottom of this file and I'm going to save this, and just run pod install in the terminal. So, let's open our terminal as usual, and we're going to have to go to our folder by typing cd and ls. So, remember how it's done. If you type ls, it shows the list of available files and folders. If you type cd, it changes the directory. So, I'm going inside of my downloads and iOS complete and InstaCloneFirebase. So, I'm doing this kind of fast because we have been doing this for a long time right now. So, I'm just going to write pod install and let's see if we can get this back from the server. And as you can see we get an error, it says that, "Yeah, I cannot find that version of SDWebImage." So, we specified it as 5.0. So, as I said before, I believe the best way to overcome this problem is just opening this Podfile, and deleting this, so let me zoom in. So, delete this 5.0 from here, just make sure that you delete this coma as well and just leave this as it is SDWebImage. So, let's try this in this way this time. Let's run pod install one more time from our terminal. And as you can see now it works, we're getting the SDWebImage it shows in green and all the other pods are shown in black as I've told you before, we are just downloading the SDWebImage this time. The other pods are already downloaded. So, if you close this down and if you open the workspace, not the Xcode project but the workspace, you are more than welcome to use SDWebImage in here in any ViewController you want. And make sure you wait until this indexing is completed. If you don't wait, you may get an error when you try to get SDWebImage library into your ViewController by saying import. So, after this completes, I'm going to go over here and say import, so like this import SDWebImage. So, here you go. And if this doesn't work out for you, you can come over here. If you cannot import the SDWebImage, come over this build phases tab, build phases. And in the link binary with libraries, you can click this plus button to bring in the SDWebImage from the list. Right now, I don't have to do that but if you get any error or if you cannot find the SDWebImage, you can just do that. And that's valid for all other external libraries you're going to work with in your iOS projects as well. So, right now, rather than saying this, I'm going to go over and say cell.userImage.sd_setImage. So, that's what we need. We're just going to specify a URL and then it will just download this image from the URL and assign into the user imageView. So, we have other options here as well, like a placeholder image and I don't want that. I'm just going to go with this and you're more than welcome to use placeholder image as well, but in my case I don't need it and I'm not going to use completion block as well. It gives us a completion block but it doesn't make sense for me to check it every time I download this pods from the Firebase. I'm going to do this for a lot of pods, so I'm going to delete it later on. And here, I'm going to convert my string to be a URL. So, I can do this by saying you URL string because remember our userImageArray consists of strings, so if you say URL, it will ask you for a string and this string will come from userImageArray indexPath.row. OindexPath.row. So, again, I don't need any completion block, I don't have time to do that in this app, but if you want you can create it like this. So, that's it, I believe we can test this now because this will just take care of our downloading problem. So, this is perfect, right? This is one single line and it takes care of asynchronously downloading everything from the given URLs and displaying them into the image views. If we virtually do that manually, we would have to write a lot of codes, but thanks to the paths, thanks to the external libraries, we can take care of our problems easily this way. And that's the video of Swift as well. So, we have a lot of libraries working with Swift natively. So, let me open this app, let me open my app in our simulator and let's see if we can get this in our feed ViewController. Here we go, now we see the images. So, that's great. So, it's working as you can see. So, let's try to upload a new one, oLet's tap to select here and let's choose another picture from here like this one. OLet's call this last supper or maybe da vinci. Let's try to upload this once I hit that, the upload starts and it takes me back to my feed and in my feed, I see the da vinci but as you can see there are some kind of problems going on in here. I see duplicate values, and I don't see them by order. So, in order to overcome this duplicate values, it's fairly easy. We can just clear the content of the arrays before we go in the for loop, So, let me go back here before we go in the for loop, I can come over here and clear the content of the arrays. So, I can just say, self.userImageArray.removeAll, not remove at, removeAll. So, keeping capacity false, I'm going to do that for all the arrays. So, like userEmailArray.removeAll, False. And then later on self.userCommentArray.removeAll, keepingCapacity false. And finally like Array, self.likeArray.removeAll keepingCapacity false. And that's it, that's going to take care of my duplicate problems and in order to order everything by date, we're going to have to do our query by date, we're going to see how to do that but for right now, as you can see when I open this, it only shows me three values here, three pods and that's exactly what I want. And we still don't have the order exactly as we want, because as you can see, the da vinci is placed in the middle in here and it's placed in the middle in my feed view as well. So, like button doesn't work as we want, so we're going to take care of these problems in the following lectures.
Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.