kJHCCgX0

1Course overview
2[Silence] Hello and welcome to integrating Twitter and Facebook into your iOS apps this is going to be an excellent course that will take your apps to the next level. People really don't love creating new user accounts every time they start a new app and so learning how to work with Twitter and Facebook is gonna be a great starting point for any apps you make going forward. Who am I? Nick Walter, I'm an iOS developer I've been doing this for over five years I've got apps in the App Store whose downloads total over hundreds of thousands. I've taught over 70,000 students how to code and I love Swift. Swift is the programming language from Apple, the new one, new ish I mean it's about three four years old now, but I come from a background of being self-taught, and so I really know what it feels like to beginner and when I teach I really teach as if I was teaching back to my original self who didn't have any idea what was going on, and so hopefully you enjoy sort of my laid-back approach and sort of talking through everything as we move along. So with that in mind let's go ahead and talk about what it is we're gonna be covering in this course, I know we said that this is gonna be a Facebook and Twitter course, but you know what does that really mean? Well first we're gonna start with learning about the Twitter API, and if you don't know what an API is basically it allows you to connect with Twitter's back-end service in order to sort of get data and communication with them in order to make an awesome experience for your users. So in this course we are going to be creating a Tweetgram app which essentially goes and looks through your Twitter feed, finds any images that are on the feed and will display them all most Instagram like in a big grid on the phone so that someone can see all the images. So what's going on there is you have to allow someone to log in with their Twitter account and you know they'll say hey I give this Tweetgram app access to my Twitter account, which then allows us to communicate with Twitter and say ok for the following user we need you know the next 200 Tweets on their timeline so that we can grab those see any of any of them have images and then display those. So an API basically allows us to communicate with a service on somebody's behalf. And then after that we're gonna learn about the Facebook API get you all started with Facebook's SDK and you you ready to make some API calls there. So the big overall goal of this course is to make it so that you can interact with these social platforms to make your apps that much better. Prerequisites for this course you have to have a Mac computer and the latest version of Xcode. Lastly I just like to say that you can totally do this, this is gonna be a great course again being a self-taught developer I'm gonna be with you every step of the way, let's go ahead and dive into this.
3
4Twitter
5Alright time to get started with the first section of this course and that is the Twitter API. So just to reiterate the Twitter API is what allows us to connect with Twitter's back-end on behalf of a user and go get information for them, or if we could in some instances even post Tweets on their behalf. So what is it that we're gonna be covering? First we're gonna learn how to create a Twitter API app, in order for us to do any sort of API work we have to have an app with Twitter, basically it says hey Twitter I want to be a developer on your platform and they give you access then to allow you to get data on users behalf, and it's kind of like you know we're checking in with Twitter to say that we want to do this, and Twitter then we'll make sure in check and see is you know our app following the rules, are we doing good things and if at any point they feel like we're breaking their Terms of Service they can shut us off. And so I'll show you how to get into that whole flow. But after that then we're gonna use a project called Swifter in order to connect with the Twitter API. So this is going to be sort of our launching point, this will be the base that we'll use to then in the next section build that Tweetgram app. So let's go ahead and start with our first video creating a Twitter API app. Like I said we're gonna be creating a brand new app here and getting the data that we need in order to move forward with that Swifter project. So let's go jump into it now so to create an app with Twitter we're gonna have to open up a web browser, so go ahead and open up whatever you'd like I'm gonna be using Safari, but go ahead and just go to the URL apps dot twitter.com ok. And once you go here this is basically the page where you can create one of these applications, and you're kind of wondering like ok want to eventually make an app but you know this isn't even an Xcode. So a Twitter app is basically the codename for saying you want to work with Twitter's API, and this is like I think a better name is like your project name, because you may use this Twitter app to facilitate data for your Android app, your iOS app, your Mac app whatever it is you know. They've decided to call them Twitter apps so you just got to work with that so for example if you've ever used the website Product Hunt, you've got to login with Twitter if you want to upload something she something on Product Hunt whatever it is, but basically what happens is if you go to Product Hunt and you say login with Twitter, you get a little pop-up screen and it says hey Product Hunt would like to use your Twitter account in the following ways, and it will list out like it's going to use your username, it's going to allow to read Tweets from your timeline, it's going to allow Product Hunt to Tweet things for you, whatever permissions it is that they've asked for it, and you can learn about how to do the specific things there. But basically Product Hunt is saying okay we want some access into Twitter on your behalf, and so if you go ahead and put in your information Product Hunt can then for example go see your Tweets, and they can go see you know you've decide to you want to Tweet something they can do that on their behalf, I can't remember if they do that or not, but those are all things that can happen with a Twitter application. So we want to go ahead and create one a Twitter app is going to be connected with an account it's probably fine just to go ahead and use your own personal Twitter account for this, if you feel the special need you can go make a special development Twitter account if you need to. Please note that in order to do this whatever Twitter account you use has to have a phone number on file with Twitter, so you might see an error ultimately pop up because of that, so you're thinking about making a developer account make sure that you have a phone number that you can use with that. But just go ahead and do the sign-in process and I'll come back with you once you've signed in with a Twitter account. Alright so once you've gone ahead and logged in you should see a screen similar to this, yours might be different because you might not have any Twitter apps yet, I have a couple I love to play around with this and I've taught different things using Twitter apps before, so that's why I have a whole list here, but ultimately you want to create a new app so go ahead and hit that button there. Next thing that you need to do is you need to give your application a name and this needs to be unique, and so for example I've used the name Tweetgram before so you're gonna want to create your own name for this and you don't even have to mention Tweetgram if you don't want to it could literally just be random string letters and numbers but you want it to be something somewhat presentable so I'm gonna call mine maybe something like Tweetgram Nik and you might do Tweetgram Sarah or Tweetgram John, whatever your name is, and again this is just sort of if someone were to sign in with your application they would get a page that says Tweet gram Nik would like to use your Twitter account right. So you would want to have this to be something that would be understandable to the user, like if you were gonna make a app called the egg social network or something like that right like bunch of egg enthusiasts, this is probably the dumbest example I could come up with but right like you would want the name of that to be like egg social network or something right, so people know that it's sort of connected to the same thing, you don't want to put like your personal name in there they're gonna say you know who's this Nik Walter guy, more you should put in like the name of the app. But again this tweak map this probably isn't gonna see the light of the day on the App Store, we're just learning how to work with these and so anyways I've probably gone too much into the name but just want you to know it's got to be unique and you should have some thought if you're gonna push this live about what that name is gonna be, you can always come back and change that too. Next you need to provide a description here about what it is that your apps gonna be doing and why you need it so I'm gonna say here a fun app to view images from a Twitter feed, please enjoy, something like that you know to kind of be a little bit warming for the users say yeah okay this is someone I can trust. Website, if you have a website go ahead and put in here it's not a big deal if you don't if you need to you can put in my own website I'm just gonna do zap eco calm. Basically this is if the user has any questions and stuff they can click on the website to learn more information, also with like the callback URL and stuff there's some fancy things that you can do, but really you don't really need to worry about that just put some sort of website here if you have your own website put that in there but you can put something else in there if you need to. And you have to agree to Twitter's developer agreement so go ahead and say yes to that, and once you're done you can hit create your Twitter application okay. Oh we're getting an error here I've done the incorrect URL format, I think I'm gonna have to throw an HTTP on there let's go ahead and try this, and boom there we go. So now that we've done this we have a application on Twitter's developer platform which is excellent, this is you know if you have any issues with this please let me know. Again a big one that I see a lot is whatever Twitter account you signed in to up here has to have a phone number connected to it and so if you're getting any sort of errors check and make sure that that is in place, but if you're there then you've got all this awesome information. And so these are the big things that we're going to need moving forward like this consumer key and we're gonna talk about that, and if we click on this manage keys and access level I'm showing you this information because this again app is not going to see the light of day, but these are things that you would want to keep secret, this isn't something that you should share with the world or go post inside of a GitHub repository, because if people have access to this they can control the app which ultimately means they can do things on behalf of a user which you know is not a good deal and that's how you kicked off of the Twitter platform if you do things like that. But you know you can always come back and regenerate the consumer key in secret these you know essentially think of it as your applications passwords if those get compromised somehow. Also this is a really cool tool you're gonna learn about how we're gonna use tokens to interact with things, and this will you know save us some time for testing and whatnot. But this is a good place to stop for this video because this has gotten us to this place. I guess one more thing that I would like to mention is here inside of this permissions and so basically there's three levels that you can get to with users Twitter account, you can say I only want to read data from their account, I can read and write which means that you're gonna be posting information, and then there's read, write and access direct messages, that's like the most extreme version. So for us if you wanted to you could go all the way down to read-only that's all that we're gonna need, I'm just gonna keep it at read and write and you might be wondering well why would I change these well whenever someone goes to log into your app with Twitter, it's gonna say you know this app is looking to only read information or if you have read write it's gonna say you can read information and do things on your behalf, and if it's this one it's like not only can it read right but can also can control your direct messages, and so you might want to ratchet this down as much as you can, just to build that much more confidence. Because if I sign into something that's like oh well I can you know this app isn't gonna have permission in order to write things on my behalf you know that makes me feel a little bit safer I'll feel free to do this, but the other thing that you gotta consider is maybe at some point in the future you want your app to be able to send Tweets on the user's behalf, if you don't have this checked you're gonna have to ask the user to read up their permission level for that, and that can be a very hard transition to manage. So for me I think in most use cases unless you're planning on using direct messages just go ahead and do readwrite, I think most users are okay with that. Also there's some more stuff you can do here for requesting email addresses but anyways wanted to show you what that was all about. But again good place to stop here in the next one we're going to be using Swifter to go and actually access the API.
6
7All right, in this video we're gonna be working with Swifter which Swifter is an awesome project that allows us to integrate Twitter into our app and work with the API in a very seamless way, so Twitter is a great help and you're gonna see that soon here. So basically we're gonna be creating a new project we're gonna be installing Swifter and we're gonna be making our very first API call. So hopefully by the end of this video you're gonna have that nice foundation to where then we can move forward and start working on that Tweet gram app. So let's go ahead and get started here by creating a new project. Alright so let's go ahead and get things kicked off here by creating a new Xcode project, just go ahead and fire up Xcode, and should bring up your welcome screen and we want to create a new Xcode project. So this is not going to be our Tweet Graham app just yet, but I do recommend just naming it Tweet Graham so that we don't ultimately have to go make a brand new project and all that, it's just best to work with what we have now. So let's go ahead and create a new application and we are going to call this Tweet Graham okay and as before right put your name your website backwards if you don't have that you can just do like your name your first dot last name whatever you know all that, we do want to make sure we have Swift selected here we're not going to be using core data or doing any tests so I'll leave those unchecked, but we'll go ahead and create this I'm going to throw mine on the desktop you choose where you'd like to save your project. So as always I like to just make sure that things are working, so I'm gonna select my iPhone 8 and just go ahead and run the app to make sure we don't have any issues going on right now. And while we're waiting for the simulator to get up and running I think it will be good to go talk about what it is that we're trying to do. So let's go ahead and go back to our Safari browser, now if we were going to work with this Twitter API what we've got to do is work with something called OAuth so if you go ahead a new tab and just search OAuth Twitter that's what we're looking for so here's some documentation from Twitter about how OAuth works, and you know they've got some pretty good documentation here about how this all happens, if you kind of start diving into the details of this it'll go on to explain that you know you need to obtain these access tokens. And the more that you go around and poke on this website you're gonna see that this is a very complicated process, there's a whole lot of information that's got to go through and if we were to do this ourselves it would be a real production, like so many different things that you've got to take an account when you're getting this thing all done, and you know whenever you're going to sign a request like there's just so many things that you've got to go through to make this work. But luckily there are several different project libraries out there that basically have combined all this documentation and said hey we're gonna do the groundwork for you, so that you can very simply just say you know this is the Twitter app that I'm using, go and get me the following information. And so this brings us to opening a new tab at search for Swifter, so just Swift with an ER on the end, Google might try to change what it is that you're looking for but we're looking for Swifter which is GitHub repository, so you might go ahead and see that there's the Swifter here that's the HTTP swift what you want is one from Matt Donnally, and so if you wanted this to be a little bit more specific maybe do Swifter Twitter like that and there you go now we're at the very first result there. Basically this library allows you to connect with a Twitter API in a very slick efficient way, I love this project and so this is what we're going to be incorporating into our home project. So we are going to be using CocoaPods to go ahead and get this working. So what we want to do is go ahead and go at the top of the project here to the Swifter dot pod spec and inside of here this is where we're gonna know how to set up our pod file. And in order to have a pod file we're gonna have to move into our terminal, so go ahead and open up your terminal. We've worked with CocoaPods before and so what we need to do is first move into our project ours is on the desktop. So I'm going to do CD Capital desktop, and if I do an LS that shows me the files that are on my desktop, and there's that folder Tweetgram, so I'm gonna CD change directory into capital Tweetgram and I'm getting the autocomplete by hitting the tab there, and if I do an LS look there's our Xcode project right we're in the correct place. Make sure first that you have CocoaPods installed like I said before we've covered this in previous courses, so you'll have all this experience. If you do need any help if you you know miss one of those are just jump straight to this of course go ahead and go to CocoaPods out org they have awesome guides about how to get it installed and everything that you need right there but once we are inside of our projects and assuming you have CocoaPods installed, we're going to do a pod init just like that to say hey we want to put some CocoaPods here. By doing that if you now type LS you can see we have this pod file, and so let's go ahead and open up that pod file by saying Nano space capital pod file, that'll go ahead and open up that file, and then inside of here below where it says pods for Tweet gram this is where we want to add that information. And so we're gonna specify the name of a pod, so we're gonna say pod space and then we need to go to here and we're gonna say okay the name here is Swifter, so i'm just gonna copy Swifter, I'm gonna say single quotes Swifter, just like that. There's a few things that we need to specify here so one is where it can find this information and so that's where we're gonna say okay : down here what it says s dot source we're gonna say it can be found at this GitHub project, so go ahead and copy this, and also it's gonna take the tag - we'll get to that in a second but let's grab this get to link and we'll go ahead and paste that there you can use double quotes although I really like to use single, so I'm gonna go ahead and replace those double quotes with single quotes, it's saying this is where you can find the source code for this. Okay so we've got that and then we need to add one more comma to say what version it is that we want, so go ahead and grab this tag is equal to we'll paste that in, and then here inside of the string is we want to specify the version. And so make sure you use the same one that I'm doing there maybe an updated version when you watch this but please use the same one as me so that everything will be the same, you want 2.1.0. So I'll just go ahead and copy this again if it's a different number don't copy and paste in fact just to be safe I'm just gonna say 2.1.0. That's what we're looking for so multiple e you have a line of code that looks like this. Okay we're installing a pod called Swifter, this is where you can find it at this Git repository and the tag 2.1.0. Okay so once you have that hit control X it's going to ask you do you want to save this, type in Y and then hit enter. Okay now that you have that you can go ahead and say pod install, and this is going to download the Swifter code and bring it into your project. So you'll notice once this has finished no longer are you going to be able to access your project by opening up the Xcode project file, and so let's go ahead and delete out of this. Okay, instead what you want to do is on your desktop go to mine here what we've got well that's right it's not showing up there, but on the desktop here if I open up finder, it's going to show you see here we've got our Tweetgram app, but if we go ahead and move into there you can now see there's a workspace file. So don't open up this Xcode project anymore you only want to open up the workspace file. So go ahead and open that up and now you've done that you now have access to use Swifter, and so let's go ahead and bring this documentation back up, let's go back to the home page for this project. And if you scroll down it's going to show you how you can go ahead and get started here. So the first thing that we're going to want to do is we're gonna want to set up Swifter with our consumer key in our consumer secret, and so we're gonna go ahead and just copy this line of code. We'll just do it inside of our viewdidload so let's open up Xcode get into the project here inside of there one and only view controller, and I have my text way too small so I'm gonna bump that up for you, I'm gonna go to my preferences, I'm gonna choose presentation to, just so you can see it you probably don't want your text to be this big, but here inside of my viewdidload, and I come in and paste this line of code got to have this say var Swifter. But you'll notice nothing's really working here there's a couple of reasons for that but the main one is that didn't import any of the code for Swifter. So we have to up at the top here say import capital Swifter, let's go ahead and do a build, make sure this works it's gonna take a little bit of time to go ahead and make sure that this is all there, the Swifter was fine but now it's telling you hey you know when you set this up these need to be actual store. And if you want to see what this looks like if you go ahead and say I'm gonna make a new swifter object look you can do it with the consumer key and the consumer secret right you just need the strings there. So for the key let's go ahead and just put an empty string for now same thing for the secret, but let's go grab these from our Twitter application and so. Let's go ahead and go back to our Twitter app here make sure you're on keys and access tokens. First I'm going to grab this consumer key remember you don't want to be sharing this publicly, I'm just doing it because I'm teaching you, I'm gonna be shutting down this app later. But then we're going to come back to our Xcode project I'm going to paste that in for the key, and then we'll come back to the site as well, and I'm gonna grab this secret copy that and paste this there as well. Okay so we'll go ahead and get that all in order that means now we have this Swifter object that we can use to sort of start working with the API, and if we go back to the documentation for Swifter they're gonna show you how you can authorize, basically get access to someone's account. And so it's tempting to just go ahead and copy this code and paste it, but the documentation is not up to date with what the current code is, so I recommend just doing Swift or dot authorize and go type out what they have there with the autocomplete and so. We'll just take our new Swift or object that we created we're gonna say Swifter authorize and there's two different versions of authorize that you're gonna want to make sure that you have the one with success and failure. And this is the new thing to present from. So first for the URL this is where you want to put your callback URL, and so it's asking for an actual straight-up URL object, and so we're gonna want to create a new URL object. Let's do this in the screen before actually. So we're going to create a new URL object one with a string okay, and that string for us is just going to be our HTTP colon snappy code comm. And then once we have this in place we're gonna put this inside of an if Lex this will give us back a URL optional I believe, let's see. If we do a string yeah it gives us the optional, so we're gonna have to say if let URL be equal to this I'll do our opening curly bracket and our ending one, and let's move this code inside of there, great. So the URL that we want to provide is this new URL object that we have, the present from is just saying where do you want to send this from this is in case you know you're calling this somewhere else we just want to go ahead and hit self, that's the current view controller that we're in. Then or the token success handler just go ahead and hit enter on this is what's gonna say hey if this works you know we're gonna give you a couple of things here. Let me go ahead and give us some space so we can see. We're going to give you the OAuth access token optional so we're gonna just call that maybe just token right like that, and then the response let's just call that lowercase response, and that's where we can write our code. So if it does work this is where we might want to print something like it worked okay, and then for the failure side of things here it's just going to give us an error, and in this case let's go ahead and print things didn't work out, we're gonna say print we had an error, and if you'd like to you can go through and like you know print out that specific error file, we'll just sort of stop short here for now. But with this in place this is enough for us to test out and see if we can't get this working and so with all this let's go ahead and see, ah it's telling us this should be a let instead of a var Thank You Xcode good to know. And let's go ahead and put this to the test so we're going to go ahead and run this, I'm gonna be using the iPhone 8 you can choose whatever you like but I'm going to roll with that, so here comes our app and it opens up here. And we don't get anything right now and the reason for that is we have this error and this I had mentioned a little bit earlier, if we go back to Safari here and we go to our Twitter application, we've got to go to our settings, and we have to put something inside of the callback URL. So in this case I'm just gonna do my website's name, it's a little bit ironic how this all sort of so you just need to have something here literally any website you could put it in here, but you got to put something inside of there but go ahead and put something in there you're gonna have to hit update settings get that there. This is also probably a great time to point out here's some specific things you can do like you mention organization name and website, and you know like an icon, these are all things that when the user goes to sign in if you have these things here for your actual company app whatever it is users will recognize and go oh okay I know that I'm going to trust this a little bit more than if they just see this standard blue thing and there's not a nameless it's gonna maybe rub them just the wrong way. So big thing put some sort of URL inside of there with the full HTTP go ahead and update those settings. Now once you have that come back to your Xcode and let's run this one more time. What we should see happening now is soon as the app opens up it pops us to a web browser where then it's gonna ask us hey can you put in your credentials. So I'm gonna go ahead and pause and actually put in my Twitter account information here and hit authorize app and then I'll come back when that's done. So once you put in your information you're gonna see that it took you back to what other website you had mentioned there, and you were saying well I thought it didn't matter what the callback URL was well it doesn't yet there's a few more steps that we've got to go through. So if we go ahead and go back to our project here here where we're doing this authorize, this URL now becomes really important, basically we want to say hey when you go to authorize the user let them sign in we want them to come back to our app, and so what we want to do is rather than say HTTP blah blah blah whatever, we want to give the name of our app colon slash slash which in the iOS world will bring them back into our app. And so in order to set this up there's a few steps that we need to take. The first one is you need to go to your project and you need to go over to the info tab so usually you'll be on the general and you'll go over to info, scroll down here to URL types and I have opened ones that I had created earlier, but if you go ahead and just hit the plus button that'll make a new one for you, and you only need one you don't need the two that I have here, but inside of URL schemes just put whatever the name of your app is, so in this case my app name is Tweet gram so I'm going to do capital Tweet gram just like that hit tab make sure you know that's all in there. Once that's there go ahead and copy this name then open up your app delegate. Inside of your app delegate we have to have a new function that's going to handle whenever someone tries to open our app using that name, and so go just start typing below open we want the function that starts with application eventually mentions open so usually if you type open that's the fastest way to get there. But once you're here this has to know if it can handle opening a certain type of file, so we're just gonna say return true for always for this okay, but before we return true we want to do a little something with the URL that's coming in, and we basically want to say hey that we're gonna allow Swifter to handle this. Now you can if you want to get all fancy and check and make sure that this is the right type of URL that's coming to you but because this is the only way that we're gonna be coming back here I think we're safe to just roll with what we have so. What we're gonna do is first we gotta import Swifter so let's go up to the top I'm gonna say import Swifter, okay once we've done that we're gonna say, make sure you have this capital Swifter dot and we want to look for something that opens it, so just start typing open the function name is handle open URL, and basically we take the URL that was passed us and we forward it on to Swifter. And so basically what we've done here is we first said okay if we want to make a URL back to our app they just have to include the name Tweetgram, and so and remember let's have this copied because we need this exact spelling, then if someone tries to you know click on a link back here our application can now handle it, so then here instead of the URL being you know HTTP a peacoat or whatever it's going to be Tweetgram, whatever it is you had copy and pasted, colon slash slash. And then you can if you want to provide more information here I might just say hello you know you might want to get specific and say like this was from Swifter Twitter or something like that, but really just hello is fine. And so with this all in place now let's go ahead and run our one more time. This is where we should see some success. So we get that nice build succeeded and here comes the app. So opened up then moved us over to the browser says do you want to authorize this since I've been logged in I don't have to put this anymore, and look there's all that information this application will do XY and Z but it will not do the following, and I say okay I'm gonna authorize the app. It says do you want to open up Tweet Graham, yes I would, so I'm gonna hit open, look at that it brings us back into the app and here's the important part you'll know everything's working if you scroll up and you see the it worked, remember that's what we printed it out here, and so if you've gotten to this step this means you were able to successfully get information back from the user. So if you got here, let's go ahead and try and make our first request and so because you might be saying I promise you what we just did was a big deal, but it won't really seem like it Intel if we come back here for an example if we get the users home timeline. The way that you do this is like Swifter get home timeline so let's go ahead and just enter that in for ourself, so we're gonna put this inside of the success to make sure that worked out. So we're gonna say Swifter dot get home timeline okay, and we're gonna put in well let's just use the default one because I think that's gonna be a lot easier than when we had get home timeline, but then we don't get the return, okay we're gonna go all the way here so the count, let's just do 50, cents ID let's just go ahead and leave that nil, max ID let's leave that Nell, trim user now for that contributor details nil, include entities nil, success this is where we do want to do something so this will just name that JSON, let's just print out whatever this JSON object is, and then if we have failure we'll have an error, and so we'll just go ahead and print out in the air there, so we'll go ahead and print and I'll just say error. Okay so let's go ahead and give this a run we should see now 50 Tweets from our Twitter account showing up inside of our space down B here. So I'm going to open this up so we can see, so it's going to open up the app and it's gonna again asks us to authorize we say yes. Okay now we're going to open up Tweet gram we come back and holy moley did you see what was down here. Look at that this is all information from Twitter these are Tweets that I'm actually seen right now from my Twitter account, so pretty cool that you know with not all that much effort we got this working up and you may be saying oh that was actually quite a bit effort. I promise you if we had done the full OAuth token dance thing that you're typically gonna do if you're not using some sort of library, it would have been a nightmare, and so we saved a lot of time doing this. Man look at that we got some was that Arabic with the world emoji like so cool just to see the Tweets down here in the console. Awesome awesome stuff, okay well that's enough here let's go ahead and move forward. All right so let's recap what happened in this section first we learned how to create a Twitter API app, right that's the whole secret to making this all work we're building on top of Twitter's platform. Next we learned how to connect Swifter into our application which allows us then to work with Twitter, and we made our very first API call, and you could hopefully see how simple that made it for us, if it wasn't for this right there's the whole dance that we've got to go through and everything so that was really a big help for us. And now that we're at this point this means we're ready to move on to our next section which is the Tweetgram app.
8
9Tweetgram
10Hello and welcome to the next section in this course where we're going to be creating the Tweetgram app. I'm really excited for this because this is a fun idea. Basically what we're trying to do is make a version of Twitter, or instead of looking for the Tweets we are looking for the images that might be inside of some Tweets, and then if you want to see some more detail you can go find that individual Tweet. And so the whole idea is that we let the user log into Twitter, get their home feed and then we go through all those Tweets and say are there any images inside of here, and if there are then we want to go ahead and grab those and bring them back on the screen. So what is it then we're gonna be covering in this section? First we're going to be creating collection views so that we can display these photos in a really nice way, I think you'll like the way that that goes on. Next we're going to be creating a login and logout process we've already started down that road but we're just gonna keep doing that. Next we are going to be downloading and displaying some images. And then finally we want to make it so that we can open Tweets in the appropriate way, meaning that if the users Twitter app is on the phone they can just jump straight to the app and look at that individual Tweet, and if not they could open up a web browser to go see that. So let's go ahead and get things started off with the design like I had mentioned earlier, we want to get that navigation controller for the login portion and then we want to go work on a collection view for displaying all of those photos. Let's get into it right now. Alright so let's go ahead and get started here like I said. We want to do the design aspect of everything first, and so let's start first by getting everything inside of a navigation controller. And let's move over to our storyboard here, yeah you can see right now there's the standard view controller that Xcode is made for us, we don't want that so we're just going to delete it. Let's give our cells some more space on the bottom and bring out our side menu here. So we want to bring out first a collection view controller this is going to allow us to display those photos, that's very similar to a table view, but we'll go ahead and grab this. And then next we want to embed this in a navigation controller and so we're going to go pull out a navigation controller, and by default it is connected to a table view controller but we don't want that table view controller, so select that hit the delete, bring up the navigation controller and we'll do a control drag from the navigation controller to our collection view. And say that this is the root view controller meaning this is what should show up, and then we want to make it so that this navigation controller is the first initial view controller. You'll notice we're missing that starting arrow that says where the app should begin. So with the navigation controller selected go over here to the attributes inspector, and we want to scroll down until we can find the here it is is initial view controller. So we'll check that and you should now have an arrow pointing there. So with that in place the next thing that we want to do is create our login and logout button, and so we can't just put any old button there we need a navigation button, so just search nav and look I guess the name is a bar button item, so I led you astray their search for bar and this would get you to the bar button item. We're gonna click and drag and just place that on the right side. So initially we want this button to say login, so if you double click we can hit that to say login, but we want to make it so once the user does successfully login that it says logout right, and as soon as they hit that button it will sort of move back and forth. So we need to connect this to our view controller. So in order to do that we need to make a code version of our collection view. So over here I'm going to do a new file right click to get that new file menu to show up, you can alternatively go to file new file I think you know that by now. So we'll go ahead and we want a cocoa touch class this should be a subclass of a UI collection view controller, make sure you've got the full thing there. As for the name you can call this whatever you want I'm gonna call this probably Tweet collection view controller okay. Go ahead and add that to the project there. Once that's on board I'm going to make it so that this view controller is pointing to that code version, so select the view controller there, go to your attributes inspector, this is the identity inspector okay. Now we're going to give this the name of what we just created the Tweet make sure this is very important hit enter or tab that will do sort of this autocomplete and make sure everything gets clicked up, and if you've done that successfully we should now be able to select this login button, and if we go for a split view controller here we can now go create an action and an outlet for this button. So we actually do want an outlet and an action for this button because first we need an action to know whenever the user has tapped on this button, but we also need an outlet so that when they are tapping and we come back into the app successfully we want to be able to change this, instead of saying log in to log out or log out to log in. So we're gonna go ahead and first bring this in as an outlet, so I'm going to just do a control drag to the top my view controller, I'm gonna call this login button. If you want to get really specific we could call it the log in log out button but I think we hit the idea here and we'll only have one button on our screen. Then also we need to bring in an action, there's a whole lot we need to get rid of in this collection view, but for now I'm just gonna add it right below this viewdidload, and so I'm just gonna do control drag here and I'm gonna call this the login tapped button okay. So we'll go ahead and connect that oh I brought in as an outlet it should have been in action. So let's delete that and then we've got to come back select your button and on the right side menu here go to its outlets, and where it says login tap delete that keep your login button because that's the same outlet that we had, but now we can come back and correctly control drag change this to say action, then we can say all right, login great. So we have that all in place for the button. I'll go back to full screen mode here. The next thing that we need to do is we need to design a custom collectionview cell that can handle you know showing an image, and so there's one here by default if you go inside of the collection view you can see we have a collection view cell, I'm just gonna go ahead and delete that I like to start fresh. And so if I go search now for a collection a couple things show up but we're looking for this collection view cell, so I'm gonna go ahead and just click drag this on to the collection view. If you drop that it should come in, really all we need to have inside of here is an image view. So I'm gonna make this big, we're gonna be resizing this via code later but just go ahead and make it big enough, and quote-unquote big enough is just so that you can work with it. And I'm gonna search now for an image view drag that into there and this image view basically I just want it to go edge to edge, so I'm just going to type 0 Tab 0 Tab 0 tab make sure all these four bars are highlighted hit add constraints, and now I've got an image you taking up all the space. So with this in place we then need to make it so that you know we have a specific subclass of a collection view cell for this new type of cell. So here inside of our Tweet collection view controller at the very bottom I'm going to be creating a new class, and that's as I said before a subclass of a collection view cell. So I'm gonna say class and I'm gonna call this maybe Tweet cell again : this is a subclass of a UI collection view cell okay. So we'll go ahead and plop that all in, don't put anything in there right now we just need to have this and go ahead and do a little command B to do a build, and so this sort of updates Xcode and everything. Once this is in place we can go back to our storyboard and say okay this image view, if we select this, or we're trying to get to the cell so click on the collection view cell over here on the left, if you don't have this menu you can get it to open and close here, but get this collection view cell and let's do a split screen here. We're going to come all the way down on this file to where this Tweet cell is and I guess before we do that we've got a with this collection view cell go up to its identity inspector and say that this is a Tweet cell. Make sure you've got the name Tweet cell there and hit enter. Then once we have that in place we can take for example this image view, come down the bottom and do a control drag, and we'll simply just call this Tweet image view, okay. We'll go ahead and connect that. So with this all in place let's go ahead and go back to full screen mode here. And let's get to our Tweet collection view controller and start getting rid of some of the dead weight that Apple is auto imported. So we don't need this did receive memory warning we'll go ahead and delete that, or as the navigation stuff goes we don't need that so we'll delete that as well, you can keep this mark if you want for the data view source stuff I just like to get rid of that I think it's clean without that, but this number of sections we do want to keep this we just want to return one every time we are only gonna have one section inside of our collection view, here for the number of items in a section for right now just go ahead and return something like 50. We'll go ahead and change that later but. Then this sell for item at index path we're going to come back and work with this, so just leave that there for now. As far as this delegate goes about should select item and all this stuff we have some other delegate functions that we're going to call, but just go ahead and delete all that we have there and so this is just going to be real simple we basically just saying how many sections there are, how many items and what's going to go inside of each of those cells. Now the next step for us is to make it so that when we get to this function and we're trying to return a cell that we can actually return that cell. And so what we want to do here still do this collection view DQ reusable cell, but if you see up here at the top there's some code that you know is gonna register our cell and all this stuff, we are already doing that via the storyboard, so we're gonna actually just leet all of that and up here this private constant here that says reuse identifier, we're gonna delete that as well we don't need it anymore. And we're gonna come back down and say with reuse identifier and we're gonna make some identifiers. And so I'm just gonna say for example Tweet cell just like this okay, and whatever you have inside of here you've got to copy this exactly, go back to our storyboard, select the Tweet cell, make sure it's not the image view but the actual cell that collection view cell, and here in the attributes inspector we're gonna give it the exact same identifier that we had, so once you've entered that go ahead tab enter whatever you'd like. So now this means everything's officially connected and what we basically just want to do is I'm going to put a special background color on the cell, so to get this also we want to make sure that the cell that we got back is specifically a Tweet cell, so we're going to change this to an if flatware say if let's cell is equal to all this mumbo-jumbo as question mark a capital Tweet cell to our open and close curly brackets there, and we want to return the cell right inside, there we go. So if this was successful we want to take our cell and get its Tweet image view and set its background color to something like blue. So go ahead and put that's got to be dot blue inside of there. Okay so we'll go ahead put that all there. We still need to return something if this didn't come back, now if we aren't getting that cell or app is in big trouble so for the time being we're just going to return standard UI collection view cell, you know do the open and close parentheses to make a new one there, but if you return just a blank collection view cell that wasn't DQ'd you're actually gonna get an error. So this is basically saying we're giving up on our app at this point if that were to happen. Let's go ahead and see what we can get here, we still haven't dealt with the size, but we're gonna get to that soon enough so go ahead and hit run here, you just want to make sure that we can see this working. Okay app opens up and look at that we've got 50 blue cells showing up here and we've got that nice login button at the top, and we can go ahead and tap that so we're pretty much there last thing that I just want to do is I want these to be edge to edge fill up exactly half of whatever the width of the screen is. So in order to do this we need to get the collection views sizing, but there's a few extra steps that we've got to do in order to get that in place. So the first thing that we're going to want to do is up at the top here we're going to want to make our class a subclass of or at least follow to the protocol of UI collection view delegate flow layout, is that a long name or what UI collection view delegate flow layout, so go ahead and put that there which then will allow us to add the function down here. If you just start typing size four you want the collection view that's going to give us the size for an item at index path. So my screen here is so filled with stuff I'm pretty sure it's this first one I might just have to experiment but yes, collection view layout size for item at index path. And this is basically just saying what size should the cell be. So in this case I'm going to return a CG size that's what it's looking for, so I'm gonna make a new CG size and it basically just needs a width and a height so for the width I want to take whatever the width of the collection view is and divide it by two, and that's going to be the same thing for the height, I want it to be an exact square of whatever the width of this half of the width of the screen is and it should just look really beautiful. So I'm gonna get my collection view dot frame dot size dot width, and I'm going to divide that by two, and whatever that value is I'm gonna do the exact same thing for the height, because I want these things these cells to be squares. So I've gone ahead and entered that. Now to test and see of this workings it's gonna be like a sea of blue so I'm gonna make it maybe return in odd number something like maybe nineteen, now we can do less than that let's do like thirteen cells maybe so then I could see if there's one extra at the bottom, go ahead and place something like that in, I mean once we have images that's going to really tell us whether or not we have some images there. Nut you can see well we're not exactly quite there because we've still got some spacing here, and so we actually want to get rid of all spacing. So let's get back to our storyboard, select this collection view and over here on the right, this is where we're gonna change this, so let's go ahead and go to the ruler here for the spacing of the cells. We're just gonna go ahead and make this zero for the cells and also for the lines. Okay we've made that zero, let's now run this one more time, so if there was an error or something that would have been giving us pop up at the bottom there. There we go so there's our sea of blue that we expected and because we had an odd number we can see that there's a little square on the bottom, great. So visually everything is in place for our app now we've just got to make this puppy work that it will connect with Twitter, download those images, display them we're at a great place to move forward.
11
12Hello and welcome to the next video where we're going to be taking a look at the Twitter API. So pretty straightforward what we're gonna cover. First we're going to talk about connecting with the Twitter API we're going to work with Swifter get all up to speed there, and more importantly we're going to connect with the documentation figure out you know what endpoints we can call on the Twitter API, what results should we be expecting back, we're going to be diving all into that. Alright so let's go ahead and make it so that we can actually log in on someone hits this login button we can get that whole process flowing. And we've already written most of the code for this. So if we go back to this view controller file that we had we deleted the storyboard version of this but the code is still here. We want to bring a lot of this over to our collection view, and so let's go over first to our Tweet collection you know I'm going to bring it up by the other view controller here. At the top we're going to make sure that we import Swifter okay, and then the next thing is we're gonna take all this code that we use to set up Swifter. So I'm going to go ahead and just copy all this actually I'll go ahead and cut it so we're going to be deleting that file soon, and I'm going to make a new function here, or actually just inside of login tap, how's it gonna make a new login function but we've already got that here so we'll go ahead and paste it right like that. And now we go back to our original view controller and go ahead and delete this. So I'm gonna right click delete I guess a move to trash because we don't need that anymore, it's trash to us. Alright now with this in place what should happen is if someone hits the login button right it's gonna initiate that whole authentication flow right it's gonna come back here. Ultimately we want more than 50 Tweets to come through, we want something more like 200 of these things come through. I've found in my testing that seems to be about the right limit but you can sort of mess around with that but I will say be careful with how many times you call things inside of the app, because when you do this there's certain limits on Twitter, and if you exceed those limits like if you make too many API calls within a certain amount of time it's gonna shut you out for a period of time. So it's I mean basically if as long as you're not proactively trying to run this thing every single minute and see what you get you'll be okay. And so let’s go ahead and see if this is working and if it is we're going to have that JSON printed out, which at that point we can copy and paste it into a website I'm going to show you here. So let's go ahead and run this, and we'll see what we get back here so build succeeded great. Let's hit that login button and we do that awesome takes us over to the browser okay, and then this is where we'll be able to give authorization for our app here. All right so let's go ahead and hit this authorized app button, this should take us back to our original app it's gonna give us that nice little pop-up, and there it is so we'll go ahead and hit the open button here, this is gonna take us back into the app and then you should see down below here, holy cow here comes all the data in the world. So this is all those Tweets that we had just requested here, and so there is a ton of information inside of these Tweets you can see as I'm scrolling through here just so much to be unpacking. And if you want more information about what format these Tweets come back as you can find that if you go to, let's open up a browser here and let's go to just search Twitter REST API. This is going to give you some documentation from Twitter, and so let's go ahead and click on the Doc's here. The basically Twitter shows you what extra parameters you can throw into an API called way you should expect that message to come back all that information is going to be here inside of their documentation. So let's go ahead we are looking Tweets, so I'll click on that. We want the home get Tweet timelines, there we go that's the one that we want, so there's the home timeline let's go ahead and click on that one. And here you can see you know it doesn't have to be home you could look at all the images inside of your mentions you know the particularly users timelines all this stuff, but you can see what extra things you can pass into here, and you can also see what an example response is going to look like. So I've already done the work to kind of pull through and see what pieces of information you need in order to get this running and working, and so let me go ahead and just walk you through the steps we're gonna have to take to get there. So let's move over to Xcode and we'll start first here. It's basically here inside of after we've gotten all this information that we want to move forward, and so I actually recommend creating a new function here or we're gonna handle parsing the JSON, and so leave that there for a second but down below I'm gonna make a new function that I'm gonna call parse JSON. Alright and basically what we want to do is be able to take this JSON object, and so we'll just give this a name JSON is of type capital JSON just like that, and we'll now call that function, and we'll say parse JSON, and we'll just pass in that JSON object, great. So with that in place this is now where we're going to be operating here basically making sure that we've got all the information that we need. So the first thing that we want to do is be able to loop through all the Tweets and see what they look like, and so what we're gonna do is we're gonna take this JSON object, and on this JSON object you can say dot array which basically turns it into an array right. So we want to make sure that we do have an array so let's make an if let and we'll just call this Tweets okay. So we're gonna make a new array of JSON objects that we're calling Tweets, let's do that if let to make sure that happens. Then let's go ahead and do a for loop through all the Tweets and we'll say for Tweet and Tweets with an S. So each time we loop through this array the Tweet object is what we can work with, and let's just go ahead and print out what we currently have inside of the Tweet. And so let's go ahead and run this see what we get back. Okay oh forgot up here we've got to say self dot when we're doing calling that function, because we're inside of a completion Handler here. So there we get the build succeeded, here comes the app, and we're gonna do a whole classic flow again. We're going to hit that login button right, so we click this, pops us over to the web page, so authorize the app, open back up Tweet gram, which then takes us to spitting out all these Tweets. Now something interesting is there's a lot of documentation that comes with these Tweets and if you want to find more of this again Twitter documentation is where you can find that. But, and in fact if you want to see exactly where that is let me go ahead and show you the URL for it, it developer twitter.com slash Docs. This will take you to all their information if you want to see specifically like you just go here to Tweets for example, it's gonna show you all the information around the Tweets let's open that up come down to Tweet timelines, get Tweet timelines, quick on that the one that we're using right now is the home timeline, so go ahead and click on this one. Then this basically just shows you what extra parameters can you pass in to get the data that's coming back to be changed a little bit, and what is an example response going to look like, you can see all this here, but I've gone ahead and done the homework for us and found that on this home timeline the way that we can get to information is eventually we have to have an extended Tweet. And so if we come down here we want to make sure that we extend that and basically what it is what we're looking for is extended entity. So if we come back to what we found down here in the console, if we go ahead and just do a ctrl F to find something, if we type type out extended underscore entities, you'll see as we go through here some of these things are showing up but it's gonna be a little bit hard to find right now, but it's not showing up all the time like we need to add a little bit of a different call or a parameter onto our function call. And so the version of Swifter that we had downloaded does not include our ability to go and get that piece of information, and so what we need to do is actually change our pod file. And we need to change the pod file to reference specifically a specific commit inside of this GitHub project. And so we're gonna go ahead and open up back to this project and let's just go to the commits. Now I've found a commit that I think that we should jokingly commit to both you and I, you can go for the latest version if you'd like but I think it makes a whole lot of sense if we use the same one and it's the one eight three eight EFD. So I'm going to come back to our code and we're going to change this from looking at a tag to a commit, and inside of here let's add our was it one eight three eight, we'll go ahead and confirm here so we have one eight three eight yep, and then we need EFD, so we'll go ahead and type in there also EFD. So with that in place I'm going to go ahead and stop and close out of Xcode here just for a moment. Then go back to your terminal, if you are already within where you were before just go ahead and do a pod install, and basically what this does is it goes out and it grabs the specific version that we have, you're gonna have to make sure that you inside of your Xcode project, and I had closed that, we want to make sure that we have saved our pod file, and we'll go ahead and save that let's do this one more time, so we're gonna do a pod install okay and it's went and it's installed that I'm still a little bit weary that it's saying to dot one dot zero but I still think that's gonna be okay for us. The real way to see if this is working is if we come back and open up our project here. Remember to open up the workspace. There's gonna be a few things that we're gonna have to change like for example, if we come to Tweet collection view controller right this Swifter get home timeline, there's going to be a new one now, if I say Swifter dot get home timeline and if you enter in this one you'll know it's successful now if this Tweet mode is one of the options there, and if you see that that means everything's good. So we're going to be using this new version so let's get rid of what we well we'll leave this for a second, but let's just fill in this new information. So we still want two hundred Tweets you're still gonna pass a nil $0.04 ID nil here, this is just basically gonna be nil for a while, so they'll know no clue two entities no Tweet mode this is where we want to say dot and then do a dot extended, you should see an autocomplete there, then for success again we just want lowercase JSON leave that code empty for now, and then for failure we'll still have the same air. So let's just go ahead and replace the code that we had so we're gonna take this print air come out spit it out like that, and then we're gonna take this self dot parse JSON we'll put it in there, and we'll get rid of this second function there. And let's now go ahead and run this one more time. But before we do I want to see if we can now get to the specific part of the code that I was hoping for. So what we're going to do is we're gonna first check and see special type of Tweet to see if a reTweeted Tweet has any images, and so what we're going to do is here get our individual Tweet, and the next thing that we're going to be looking for is re-Tweeted underscore status, this is all coming from the documentation so if you're wondering where I'm getting this from that's it, so we want all lowercase reTweeted status, and the square brackets and we're gonna do another key here, and we're looking for extended underscore entities, okay make sure you've got that spelled exactly right, and then we're gonna want to go to one more level deep, media all right and then even further than that, well there's two things that we're gonna be looking for but let's just stop here at this point we want to print out whatever this is going to get us. So if we are seeing things here this is going to tell us that we're moving in the right direction okay. So I'm gonna select my iPhone 8 again when you reopen a project after doing a pod install it will change your simulator to by. So I'm gonna select that iPhone 8 again and let's run this and here it comes. Okay we're gonna go through the old song and dance again so we're going to say we want to log in, and we'll just have to authorize the app here, let's open back up Tweetgram and it comes back to the app, and this is where look at this we've got some new information being spit out here. So this is good you should see this should be a lot more uniform than the data you were seeing earlier. But basically this is where we can come to now and what we're going to be looking for is this media URL HTTPS, and we're also going to be looking for this expanded URL that shows what Tweet it is that we're looking at. So I'm just picking one at random here but gonna grab this image, I'm gonna go to Safari and on a new tab enter that in and we should see an image that was Tweeted, and so I don't even understand what this says looks like something about joy and happiness something like that, but this is how we're gonna eventually go get all those images out there okay. So now that we've got that in place let's go ahead and go back to Xcode here. This is a great stopping point for us because you now have gotten to the place where we can go and get individual image files, at least the URL from the Twitter API, and now we have to go about the process of downloading them. There's a few more steps to take but we've done a whole lot of work so let's take a moment here and move on in the next video.
13
14Hello and welcome to the next video JSON parsing. This is where we're getting into the nitty-gritty. In this video we're going to be parsing down the JSON until we can eventually get to the image in the Tweet URLs and you'll find this isn't as straightforward as you think it might be, we've got to figure out if a Tweet was reTweeted or not in order to get those images within that, Tweet might have multiple images, so we have to know about how to handle that situation as well. The ultimate goal is that we can have an array with all the Tweet image URLs and also an array of Tweet URLs so that we can show those images, and if someone taps on one of those that we can get it to open to the correct page. So let's go ahead and dive in. So we've gone about the business of going and getting the appropriate detailed information for if someone has reTweeted something that's going to have some media in it, we can find out the media URL which that is going to be where this media is located, and it's also going to display an expandable URL, which is if someone wants to go see that image in detail more information about it they can go dive in if they'd like to. So we're gonna keep expanding on this talk about how we're gonna handle fur Tweets that are not reTweets and all that good information, so let's go ahead and first just write some more code here, and let's instead of just printing this let's be saving this information. And basically what we want to do is we want to store all the URLs of the media files, and we also want to store all the URLs of the Tweets that are associated with them. So we're going to come up here to the top of our class and we are gonna create two new properties. The first one is going to be something that we're gonna call image URLs and this is just a name I'm coming up with, but it's basically going to be an array of strings. So I'm gonna go ahead and specify that this should be an array of string objects, and we'll go ahead and say that this is just an empty string for now. And we're also going to have a variable that's going to be Tweet URL, so this is if someone wants to see in detail what this Tweet is about we can also go there as well so we'll make those a string array great. So now that we've got that in place those two things there, let's come back down and let's do the work of diving into here. So once we've gone ahead and gotten to this portion where we get to the media here, there's actually going to be, this gives us back an array of items because there might be more than one image connected with a Tweet, and so this is where we need to go and do a little bit of a for loop. And in fact what we're going to do is just like before where we had turned the JSON into an array, we're going to turn this into an array. So we're going to do a dot array on this and to see if this exists we're going to do, it if let medias equal to this and we'll go ahead and throw some curly brackets on there, and so now that we have this this array of medias we can say for media in medias which this is basically going to loop through everything inside of that array, and now that we're at this level then we can take a particular media and you know dive into go get its specifics. And if we could bring back what we had printed out here right, we were looking for the media URL in the expanded URL. So let's go first for this media URL I'm gonna copy that exactly, and we're gonna say we want to pass in the key of media URL and this should come back as a string. So let's do another if let here and we're gonna say if let media URL be equal to this, we'll go ahead and do that and specify that this should come back as a string, and if this does in fact this is when we'd want to add it to our array. And so if we scroll up to the top here right, we have our image URLs we're just going to simply append it. So we're gonna say images URL dot append, and we want to append that media URL that we just grabbed okay. Let me type then in media URL excellent. And we want to do basically the exact same thing for the expanded URL so we're going to go ahead and copy a lot of the same code that we have right here, copy and paste that, but this time we are looking for the expanded URL. And so we're gonna say if let expanded URL for the actual variable name I'm going to keep this that expanded URL, but we have to have this exact spelling when we're talking about the JSON side of things and rather than images URLs array we want Tweet URLs array, so we're gonna change this to Tweet URLs, and we're going to append that expanded URL okay. Now one thing I'd like to address here is that we got these warnings and that's because on these JSON objects we have to get the string value from that, so we're gonna do a dot string on these, which gives us back a string optional. So we can actually go ahead and get rid of this as string it just makes it a little bit redundant, and so same thing down here we're gonna do the dot string, and this if let is gonna let us unwrap those values and get us back to where we were looking for okay. So let's go ahead and test and see if this works again there's a little bit of an issue here because this doesn't deal exactly with Tweets that have not been reTweeted, but let's go ahead and see if we can't go through all this JSON that we parse, and then let's print out what we have inside of each of our array. So we're going to print out the images URLs and let's also print out the Tweet its URL, there we go excellent. Let's go ahead and run this okay, and I'm gonna go bring my simulator up here, let's login, and how many times have we done this right. Authorize the app, open the app back up, and there we go look at that we've got things printed out here, this is great, this is looking really really good okay. So like I said this works for reTweeted Tweets but we also want to be able to handle just regular old Tweets right, and where there's not this reTweeted status. And so what we're gonna do here is as we're moving through we want to do a little bit of a check. So I'm going to create a new variable that I'm gonna call reTweeted, and we're gonna set this thing equal to false. So when we check and do this where we say if let media is you know equal to this stuff, if this works out this means that this is in fact a reTweeted Tweet, and so in that case we're gonna say reTweeted is equal to true, and the reason that we're doing this whole check here is so that we can come down here, and do a little check and say if reTweeted is equal to false, meaning that it's not a reTweet, then we want to go ahead and you know do some work here about an original Tweet. And it's basically the same thing as above except we're just not looking for the reTweeted status, and so we're in fact just going to copy what we have here, and usually when you're copy and pasting like this this is a good time to tell you that you should make another function, that dry principal don't repeat yourself. So let's go ahead and create a new function, we'll call this process URLs maybe. This function basically is just gonna handle all the business of taking in some sort of array of JSON objects and working with them. So we're just gonna copy this for loop here, or cut it rather, paste it here, and this needs to take in medias which is going to be of type array of JSON objects. So now inside of here we can say process URLs, and this is where we can pass in medias, which is an array of JSON objects, good. And then here inside of this you know if it is not a reTweet, we're going to copy this code paste it, and instead of doing the reTweet status we are just simply gonna get straight to the extended entities, and do basically the exact same thing. We can don't have to call this reTweeted equal true stuff but let's go ahead and now run this. Hopefully we should see a bigger array of image URLs and Tweet URLs now that we've done this. So check and see that this works, okay we'll authorize the app, open it up, great and let's look down to here, we didn't do an exact count before but I can tell from the scrolling that this is definitely bigger than last time. So this is a great moment for us, really we have all these arrays now with you know the proper image URLs and links to those, and so the next step for us is going to be downloading these images and getting them to show up, and so we'll go ahead and talk about that in the next video.
15
16In this video we're at the last step in our app we need to download the images, so we already have all the URLs but we've got to be able to download that. We're gonna use an excellent library in order to make that happen, and then we need to make it if someone taps on one of the photos that we can get that to show up in the Safari web browser. So let's go ahead and dive in. We're gonna focus on downloading our images and getting them to show up in our app, and also making it so that if a user wants to select a particular image they can go see where that Tweet came from. So to get started we have to download these images and since we're using CocoaPods we can find a great repository to help us download these images, and even do some caching which is really gonna help our app. So let's go ahead and open up our browser, I'm gonna go to CocoaPods org and the project that I love is SDWebImage, there's lots of different projects out there in order to save and cache images download images whatnot, I really like SDWebImage so up to you about which one that you'd like to choose, but I'm gonna go with SDWebImage and go for version 4.3. So please do the same so that we're matching up there, I'm gonna go back to my project to my pod file, go ahead and paste that in, so now we have two pods here. As soon as you add a new pod you need to save your pod file, we'll always close out of my project and open up my terminal, when I get to my project Capitol Tweetgram there we go, and I'm gonna do my pod install don't we gotta spell it correctly there we go pod install great now that's going and grabbing an SDWebImage and it's put it now as part of the project. So once that's in there we can go back to Xcode, and we can open up a Tweet Graham, will now have access to this SDWebImage. Wo you might be wondering what what does this SDWebImage do and basically you can just give it uiimageview and say you know you have a particularly URL of something and you want it to download it, and then we'll go do it for you it's really great. In fact you can kind of just see an example here image view dot set SD underscore set image, so pretty awesome though that's how simple it is. So first we need to import SDWebImage so let's go do that I'll copy that come back to the project here. This is inside of our collection view we want to do it when we're loading up a collection view, so let's scroll to our collection view code. So right now in that cell oh I forgot it, right now we're just importing SDWebImage alright so we'll do that, but then down here in the cell rather than just making the background color blue, this is where we want to actually go and set the image. So we're gonna still take this Tweet image view rather than messing with the background color, first let's go ahead and get the particular URL and convert it to a URL from a string. So let's do capital URL and we are gonna go do the initializer where it takes a string, and we want to pass it images URL and go get the object at index path dot row, right. So we'll go ahead and just do a little if let here because I believe that gives us back a URL optional let's confirm there. If we give it a string yep that's the case. So we're going to do an if let URL be equal to this, and we'll do our opening little curly bracket and end it there, so if we're able to get this URL then what we're going to do is refer back to our documentation, we want to do SD underscore set image. So do our SD underscore set and we're not getting the autocomplete, let's go ahead and try building this project, sometimes it can take a moment implement the new stuff in there. So l dot SD underscore there we go now we're getting all the good stuff, and we want to do a set image, and we've got a couple of options here. Let's go ahead and see what they look like, this one looks good look it takes a URL object you can even take it URL optional, so if we didn't want to run this whole if flat, in fact maybe let's just go ahead and do that, that'll save us a little bit of code here if it's gonna accept an optional anyways. So we'll do sell and let's go ahead and pass it that URL and then with the completion block you could put something in here I'm just gonna go ahead and hit now we don't need to do anything after that's all finished. So let's go ahead and do a build here make sure that Xcode is happy with everything it looks good. So let's go ahead and give this a run and see what this looks like. If we can successfully get this to work then we'll you know focus on getting our images to show up, and I just realized I started this on an iPhone 8 plus we want just iPhone 8. So we'll go ahead and run that because we've already got that iPhone 8 ready to rock and roll, and for me the plus it takes a little bit too many resources on my computer and that the screen is too big I like running the 8. So here comes the app and it looks like oh we're getting a bit of an error here. Let's see index out of range oh that's because we have just set an arbitrary amount of collection views right. So instead we need this to be images URLs dot count okay. I don't remember to replace the example code or else we're gonna run into issues like that so. Here comes and we will log in here, authorize the app, let's go ahead and open that up, and now that we've done that a bit of disappointment here, and I'm just realizing the reason the problem that we're having here is that we go about getting all these you know images right from the API everything, and right now we're printing them, but instead what we needed to do is tell the collection view that it needs to reload its data. So we need to tell it hey you know there's new sources of information so you need to go be aware of that, so add this collection view dot reload data after you've processed all the JSON information. So we'll come back let's do our login, authorize the app here, yes please open this up, and here comes the app and we're not seeing anything, you'll notice we can scroll through but we're not seeing any images so we cannot start load of a task, since this does not conform to ATS policy. So the issue that we're having here is that we're trying to download images that are not HTTPS and so question is well how can we go about fixing that. Well if we go down to our file here where we're going and getting like the media URL and the expanded URL, we can actually fix this by getting one step further here, you can get the HTTP version of the media files, so let's go ahead and do that media underscore URL underscore HTTPS. We'll go ahead and run this one more time, you know bit by bit we're gonna get there, and it's gonna be a good moment when we finally get these images to load up. So let's go authorize the app, open that back up and this time whoa look at that we have some images showing up how cool is that. So this is really great that we got these images to show up, but in order for this to kind of be complete there's a couple of things that we want to focus on. So one you can see there's kind of some weird stretching with some of the images right to make them all fit inside, I think we should do away with that, and also we need to make it that if select one of these it should go ahead and open up the Tweet so that the user can see that. So image stretching this is a quick fix for us, we've just got to in our cell code here we need to work on that image view. We're gonna say cell dot Tweet image view dot content mode, and we're gonna set this equal to a dot. And there's lots of different options that we can choose here, we can do like this scale to fit scale to fill and I like scale aspect fill, because basically what this does is it says I'm not gonna you know change the scale of anything make it some weird constraints, but I'm also gonna fill up the whole box. And so this will be dropping off part of the image but that will hopefully entice our user to go click on one of the images to see them in more detail okay. So we'll go ahead and put that there. The next thing is that if someone wants to go see what's at a particular Tweet looks like, let's go ahead and set the code for when someone wants one of these. So let's go ahead and type out collection view here, we want the did select item at. And make sure you don't did deselect we want did select a lot of people make this mistake you want to did select okay. So this code is gonna be run whenever someone taps on one of these Tweets and we want to go pull up the information. So kind of just like before we want to be able to pull up a URL, so let's go ahead and copy this code. The difference here is that rather than pulling up the images URL we want the Tweets URL, then once we have that URL it's going to be opening up the Tweet in Safari. So we're gonna say UI application dot shared, and then on this we want to do a open, and this is where we pass in a URL. And you can do like some handlers and stuff like that but look it's looking for an actual URL not an optional, so we are gonna have to do an if let here, or we can go ahead and put this inside of curly brackets okay. So then we'll pass in our URL object for the options just go ahead and leave an empty dictionary there, and for the completion handler we're gonna put nil, we just are saying hey you know we just want this thing open. So with these two new changes let's go ahead and hit here, let's see oh if it's an empty dictionary I've got to have my coal in there, there we go okay. Big moment here this should be really good looking images and it should open up to the correct location. So we'll go ahead and hit login, you'll now authorize our app okay, and this will open us up, and look at that we no longer have the stretching right these two guys they put out great content by the way on Swift. You know didn't stretch them at all and let's go and see if we can go look at their particular Tweet so if we go ahead and click on this look at that it opened up Safari, and it's showing us right like they had a video here now it's ready to rock and roll with that video, so that's pretty cool. Now really just the last thing that's left here is we want to make it so that we can log out and essentially reset everything so that someone can come back and log in right, because if we go back to Tweet Graham here, right like let's say I wanted to log in with a different user or something like that, well you know we would want to go ahead and do that. So let's make a little bit of a change to our code so that when someone does log in, let's go find our login function. So log in tap, let's go say the first thing that we want to do is we want to take that login button and change it. So we're going to say login button dot set title okay, and we are gonna change let's see we've got our there we go login button dot, and it's not letting me set the title here maybe I'll just have to do I'm thinking of a uibutton this as a bar button item that's the difference there. So we're gonna set the title to be equal to log out because we're using the same button for logging and logging out, we actually need to do an if statement around the title, and so we're gonna copy this and do a little if statement that says if this logout button that title is equal to log out, like we have here, then that means that they are trying to you know log out, and so this is you know where we're going to do our logout code. And then the else situation is that they are trying to log in, right, so this is where you would have our login code. Right so if somebody is logging in that's when we want to change the button to this and if they are logging out that's when we want to change it to log in. Now if they are doing a log in that's where we want them to do all the code that's down here, so I'm going to take this bottom curly bracket and actually cut and paste it down past all of this information, to kind of update the indentation everything I'm gonna do command a to select everything and then hit control I that'll sort of tab everything over for me, great that's looking a lot better. Awesome and then far is the logout code goes we need to change the button to back to say login, but the other thing that we need to do is we need to get rid of our arrays and update the collection view. So we're gonna take both our images URL and we're gonna set that equal to an empty an array, same thing with the Tweet URLs, let's go ahead and set that equal to an empty array, and then we're going to take our collection view, and say hey you need to go reload your data. So let's go ahead and give this a test and see if this is it, if this works this is completed app for us. So go ahead and see this all right it's opening up fine we'll go log in and you can see just for a second there it said log out, so it should be saying that when we come back. I want this to open up Tweetgram boom we're here it's showing all of our images I can still go you know tap on something right that's pretty cool, notice one of my Tweet images had come up here, I Tweeted this guy after some March Madness game, and look at that and that shows up that's pretty awesome. So that all looks good and now let's say I want to logout boom, look everything disappears and I can go back and login and it's gonna take me through the exact same process okay. So we have a completed app here a few things to talk about but we'll go ahead and talk about them here in the outro. So let's go ahead and talk about what we have learned in this section. We did cover a whole lot so first creating a collection view for the photos you can see how I can create collection views and have those images downloaded into the custom cells that we created awesome stuff there. Next we had that fully functional login and logout process, at the end there we add a little bit of polish to make that look great. We used SDWebImage and older to download and display those images back to the user and we took advantage of caching, just really great just means that you know if a user already downloads that image and they see that URL again it won't read download it will just use the same URL. And finally we learned how to open Tweets in the appropriate way. So with that let's go ahead and move on to the next section which is going to be the Facebook API.
17
18FACEBOOK
19
20Hello and welcome to our final section here the Facebook API. So we've learned how to access Twitter and work with it now it's time to look at Facebook. So the big thing that we're gonna start with is installing the Facebook SDK. So Facebook's SDK is software that we download into our project to make it easy to work with Facebook, so this is kind of like Swifter for Twitter, except that the Facebook SDK actually comes from Facebook it's an official product of theirs. Next we're gonna learn how to access the Facebook API and dive into learning about Facebook's graph, in the example that we're gonna be using is getting a user's likes. So we're gonna go ahead and get things kicked off here by talking about the Facebook SDK, how to get it installed and really this is gonna be one video because it's quite the lengthy process. Facebook has an excellent guide there's a few things out of date but that's why I'm here to get you up to speed on those fixes, but we'll go ahead and dive into that in this video and then the next one we'll worry about the likes. Alright to get started with the Facebook SDK they have really great documentation on their website, so go ahead and open up Safari and just search for iOS Facebook SDK. And you should be looking for something like this if you want to do the full URL developers dot facebook.com slash doc slash iOS. So this page is gonna be changing all the time so it might not be exactly what you've seen here you should be able to follow all the same steps, but this getting started on iOS here, this is gonna be great because it's got this QuickStart for iOS which is just amazing. So with you first login it's gonna ask you to login, and so you're gonna have to go provide your Facebook account, if you don't have one go ahead and create one, but once you've gone through it's gonna ask you to select a project, and here you can see some test ones that I had before, some were real ones as well, but if you don't have a project yet go ahead and say skip and create app ID. And so that'll take you to the process of creating app, it's basically just giving an app a name and hitting create, and once you do that find it best just to come back and say you know click this QuickStart for iOS to come back to this page where you can select one from a list. But assume you've gone and done that I made one for this course here tests one two three, so you'll go ahead and select that and then it's just gonna walk us through step by step what we need to do. So first thing need to go get the Facebook SDK so you can see this is quite different from like what we've done with using CocoaPods or something like that. And so it's gonna have us download this SDK, and it's telling us to put it inside of our documents directory. And so let's go ahead and open up our finder here, I'm going to take what we just downloaded here and I'm gonna bring it into My Documents. Alright so let's go ahead and move into the Documents folder, and look we've got that Facebook SDKs - iOS - for, yours might have a different name but as long as you got something like that with all these framework files you're gonna be in a great place. So we've gone ahead and done that and let's while we're at it folder names don't match up, so I'm going to copy this Facebook SDK name directly I'm going to rename the folder that, so I'm going to come back here you name that - just straight up Facebook SDK, great. Next we need to add the Facebook SDK to our Xcode project, so it's saying grab these frameworks go ahead and plug those in. Before we can plug them into anything we have to have an Xcode project that they can be added to, so I'm gonna go ahead and open a new project, let's fire up Xcode. And I'm just gonna do a new Xcode project, single view a plus just call this Facebook fun, okay. So if we don't need core data anything that looks good and I'll throw this on the desktop great, and then it told us we need to make a frameworks folder, so I'm going to create a new group here and so I'm gonna rename this frameworks, there we go and if we come back, it's telling us hey this is where we need to go get all these from. So let's have Xcode open but also we're gonna bring in those different ones that I asked for, so I remember bolts was definitely one of them, so let's go ahead and pad that and make sure you have copy items if needed create groups and your apps name-checked all there, so I'll hit finish. And let's see what else we need to add so we've got bolt FB SDK core kit okay, SDK korkin and then extend this over a bit so I can see it great. Next thing we need EV P SDK logging kit a login kit there we go great, and the last thing that we need to add here is the share kit alright, go grab our share kit and plug it in there. Now one more step we just have to let our project know about this new framework, so we're going to go over to our build settings here, now it says open up Xcode build setting in your project and add that Facebook SDK folder path to framework search path. So if you actually just take this string and you copy that, you come back to your project and you just search that right up top there, you will see that it gives you this option to look for other frameworks, and you can see it's already added our frameworks folder right there, so we don't actually have to add anything else. So we're already good to go. With that all in place let's go ahead and move on to the next step so we have to edit our P list. And so back to Xcode here we've got our info dot P list, now we have to right-click here and say that we want to view this. Let's see open as source code, technically don't have to do this but it just makes it easier if you do. So let's get back to Safari here copy in this code that we need to paste into our file, and so you just want to make sure you add it into the dictionary there that's the body of your file, so we're gonna come up to the top there's that dictionary, so let's go ahead and paste that there okay. So with that all in place next thing that we're gonna do is, let's go back to Safari, we want to add this as well, so just go ahead and copy and then paste that at the top great. Next it needs our bundle identifier and so let's go back to our project here, and let's just go to the general tab and we can copy this whole bundle identifier, copy that, and we can come back paste that in, okay. Go ahead and hit next, I love how easy it makes this for us it just you know step by step boom boom boom we're gonna get this thing done. Next thing that we need to do is import FB cork it into our app, now it's got this all in Objective-C which is a little bit annoying, I wish there was a little tab to say switch to Swift, but don't worry we'll be able to change that so first thing is let's go to our app delegate, and this is why I'm helping you guide you through this, and this is where we want to import get back here the FB SDK core kit, so I'm going to do import FB SDK core kit awesome we got the autocomplete there. Next thing that we want to do is we need to add the following functions here, so again can't copy/paste exactly because it's going to be a little bit different, but application did become active, let's go ahead and add that so we're going to do a new function here, application well I'll just start typing did become active. It looks like maybe that functions already been implemented, let's see, did become active there we go so we can actually just take this existing function and just add the code that they said there. So FB SDK app events activate app, so FB SDK app events dot and activate app, great. Next thing that we need to do in the did finish launching is just return well there's always return yes, but this is where we need to do FB SDK application delegate has shared instance, come up to the top here, and we'll say FB SDK application delegate dot shared instance, great. Next step is pass in the application and did finish launching with options, so then we'll do dot application, nope that's not the right one application, see did finish launching there we go, so now I can pass in application and I can also pass in the launch options, great. So that's all good to go there. So the last thing for us to add here is this application open URL, and unfortunately the documentation here is a little bit outdated but again that's why I'm here to guide you through this. So what we need to do is open up here inside of Xcode we need to write a new function, that's the open URL, you should get a function called application open URL options. Basically we need to return back a boolean and Facebook has actually added an updated function for this, so we're going to do our FB SDK application delegate dot shared instance, unfortunately they haven't the autocomplete here something's funky about it because this is the function that we want, this one right here application where it opens with some options but we're gonna have to modify this a little bit, so instead of the underscore we're going to type app here then comma, and then we're going to say open colon and we're gonna provide in here the URL comma, and then four options colon we're gonna provide the options, just like that okay. So go ahead do a build make sure that this is what the app is looking for, it's a little bit frustrating that that's the case, but you know I'm here to update you. So we got all that in place, now it's time for us to test and see if everything's working. So it's telling us hey let's go ahead and try this out inside of your app. So open up your view controller, let's go back to our app, let's open up our blank view controller that we have let's get rid of that did receive them every morning, I'm not a fan of that. And then it's going to ask us okay that we need to first import the login kit. So I'm going to say import FB SDK login kit great, and then because this is all an Objective-C I'm just gonna copy and paste this code into our project and just kind of leave it as a comment, and then write the Swift equivalent there. So I'm going to paste this all in just comment it out real quick. So first thing that we need to do is create a button so I'm going to make a new variable that I'm going to be calling login button, and login button should just be equal to FB SDK login FB SDK capital login button, there we go, and we just want to do the open and close parentheses to make it new one of those. Next thing is we need to set it to the center, so we're gonna say login button daunt Center is equal to you view dot center. Last step here we need to add this to our view so I'm going to save you add sub view and we'll just pass in this login button, and I should change this to a let rather than a var, great. So that's all good there we can delete that code, let's go back here so if you haven't done so already we need to add the following to our app delegate, and we have done that already. Now so we can go ahead and move past that and so it's then saying okay if this is all works you should be able to run compile your app see a login button, and if you can log into your app the integration is successful. So this is a big moment for us, let's go ahead and go and change to our classic iPhone 8 here, and we'll run this and see what we get. So while the app is popping up here in just a second I just want to show what sort of the next steps are here. Right so you can do all sorts of things now that you have this into your project, I mean the big thing is that you would want to you know be able to do things on the user behalf like get their home timeline, or post things on Facebook for them right. But I mean there's more that you can do beyond that like you can get into ads and you know all this different stuff, but that's ultimately the goal of this whole setup here. So let's go ahead and get our app opened up here, look at that there's a continue with Facebook button, so go ahead and click on this Facebook wants to use facebook.com to sign-in, okay great this is looking expected. So let's go ahead I'm gonna put in my login info so once I've logged in it's saying hey test 1 2 3, which is the name of our app, would like to use your profile and if that's okay go ahead hit continue as Nick, and then look at that it brings us back into our project and now shows the logout button, so pretty cool that we were able to get this far. Now really the next step is just getting some data to show up you know actually interact with this SDK this API and so we're going to go ahead and do that in the next video.
21All right, we're gonna learn how to get some likes here, well not likes for a nap or anything like that, but more of the users likes. So in here we're going to be learning about accessing Facebook's API and specifically using the Graph. We're gonna dive into this great Graph Explorer tool that Facebook has so that we can ultimately get a users likes. So let's go ahead and see this alright so we were able to successfully log in with Facebook but we want to go further than that, we want to go get some information about the user, and in this case we're gonna try and go get their likes. Now in order to do this we're gonna be using something called the Facebook Graph and to understand more about this go ahead and go back to our documentation here, if you scroll to the very bottom, not showing it on this page so I'm gonna open up Facebook for developers and another tab, but usually on most pages they've got a Graph API Explorer. If that link disappears whatever reason just search Graph API Explorer but basically this is a tool that will allow you to see what it looks like to access the Graph, and the Graph is basically accessing a user's data via the Facebook API. So for example, if you just do the example one hit submit it's gonna ask you for permission to use this Graph Explorer thing, but it's basically saying if you do a Graph request of me where you want the fields of ID and name, it's gonna pass back those things to you, and if you wanted to go get for example somebody's likes if we go ahead and type that in, then you know it's saying okay we want the ID name and likes and if we hit submit then it will return back that information about the users likes, and we can see all that information. And so if you want to do this for yourself inside the app you were eventually going to have to use some sort of string like this, but let me show you how you get there. So let's go back to our project and we're gonna write a new bit of code here where we're gonna do an FB SDK Graph request, and we'll make a new Graph request object. First we need to pass in that string, so this is where we're gonna want to pass in let's go back to the page here this right here the me question mark fields equal to, and for right now let's just get the ID and name you'll see that we're gonna have an issue with like, so for right now just do the me question mark fields equal to ID comma name no comma after that and likes okay, so I'll just go ahead punch that in there for the parameter, just passing an empty dictionary here don't forget that :, and then once you have this Graph request you got to go and get it started. So we're gonna do a dot start here and this gives us back a completion handler that says hey we finished getting this request, so gives us back a connection, we also get back results that's the second parameter, and then also an error optional, so go ahead and put that out so let's just see what it gives us back. We're gonna simply print out results : and then let's put inside of this string whatever came back via result, okay. So let's go ahead and run this see what it looks like in the simulator, so build succeeds and you can see app opens up if you've previously logged in the button should say logout, and you should see in your console here that it came back with the ID and the name, and you're thinking great, well let's go get the likes right, and so you go over here and you say comma likes just like we saw here on the website right like that's go and get the likes, and you know we come back and we run this we say yeah this is gonna be great. But the problem with this is you have to ask explicitly for the users access to go get their likes, and so it still does the Graph request, but you can see it just completely ignores the likes that we have. And so in order to go get that you have to ask for permission for it, and if you're wondering about how you can find out more about permissions just go ahead and search in Google wanna do Facebook Graph permissions okay. And should be your top search result there, and basically here you can see for there's like read permissions that you can do for like user attributes and activity, this is the one that we're looking for is user underscored likes. So we have to do is edit our login button to take advantage of this, and so we're going to come back and when we create our login button, we're going to say login button dot read permissions and you can see it's looking for an array of read permissions, and we're going to set that equal to an array where we just pass in one string that contains the exact name that we have here user underscore likes all lowercase, so go ahead and pop that in. And now if we go ahead and run this, we're gonna have to log out and log back in in order to see this successfully work, like I said this isn't the most brilliant looking at but we're gonna log out here, let's log in again the big thing that we should be looking for is it's you know that it's gonna ask us can we get your likes and look it's telling us you know test123 will receive your likes. That's a new thing and so and there's even a little report here that's saying you know this has been changed from last time, and so we're gonna go ahead and hit continue and now it doesn't spit out anything because we don't have anything like Oh once they've logged in run this code. But now if we go ahead and run this okay build succeeded, and we come here we should see down here look at that there is all the likes showing up, and so pretty cool that those are all listed out, and the issue there was that we needed the permissions. So this is a small little introduction into the Facebook SDK, if you'd like to know more go check out these user permissions and this Graph API Explorer is really good for testing out things before putting them into your code, you can kind of see what it looks like for yourself and then go out and do that on behalf of your other users. And this is you know just the read permissions here, there's other stuff that you can do about a writing and you know there's also many things that you can dive into there. But there you have it got a little bit to discuss here as we wrap everything up but I hope you enjoyed learning about Facebook. Alright let's just go ahead for a recap here. What have we learned in this section well we learned how to set up the Facebook SDK, that was its own process right, we learned how to connect with the API and we learned how to access the Graph, and get a user's like. So this is just a starting point if you want to get into the whole Facebook API world hopefully enjoyed getting your feet wet here. So I'd like to just take a moment to wrap up everything that we learned here. We started first by connecting to the Twitter API, we got you know just our feet wet a little bit to see what it was like to connect, then we moved on to actually doing something with that connection in the tweet grande map. We went and got all the images for a user, especially you know working through the tricky stuff like how to detect whether it was a retweet or not, and then displaying those images back to the user was a whole lot of fun. And then we move forward into the Facebook API. And so you now have a great foundation for if you want to log in have users log into your app with their Twitter account, or their Facebook API, or if you want to build something specifically around one of these APIs you're at a great starting point to go do that. So thank you so much for coming along it's been a pleasure. [Silence]