Transcript for:
Anleitung zur Unsplash API Nutzung

hey everybody how's it going so in today's video I want to basically do a little walkthrough tutorial of how to work with the unsplash API to get a random image so I'm just gonna jump straight in to the code there's only two things that you're going to need to do this along with me that is a copy of postman which is a an app that you can use to query api's and you need an unsplash account with a developer key basically so just go to the unsplash there's a link in the description down below to download postman and to go and open up and unsplash dev account once you've got those two things installed come back to the video and we'll take it from there right so here we are in unsplash unsplash is basically a website with a load of free images I believe that all the images up here are creative comments so you can use them for non-commercial usage so they're amazing for personal projects and portfolios or if you just need sort of like a background image for something or if you just want to find some really cool photography as well it's a great website to get inspired by but why did I come to use this basically we have some interns at work and their work on their final project for their internship the amendment one of them is making an app or sort of a booking app let's say a user can come in they can select the location they want to travel to and then they can you know make a booking essentially and I suggested to them why don't they take the unsplash API and when the user enters in a location they'd like to travel to for London for example when they type in London it could bring up a list of images that the user could then select one of them and save that as sort of like the image of their trip let's say and they says wow that's actually really cool a year yeah how do I use the unsplash API and I was like it's a very good question why don't we discover that together so threw out half an hour of sort of looking and working out and hacking together we kind of came up with this solution again it's not the best solution it's probably not the safest or most secure solution if you're just looking to quickly connect to this API this is the again the fastest way I found to do it so basically usually to come to unsplash open up an account with them it's completely free open up a dev account just goo unsplash developer API have also left a link for it in the description down below you basically want to come in and you get to the API Docs which are here they're really good you've got here on the left-hand side all the different endpoints that you can need if you quickly scroll down and just get started they even have a JavaScript and iOS and Android a ruby and a PHP library our like SDK that you can use so if you were doing a bigger project or a full-stack project you can sort of install that and use that but if your lips simply just looking to just do a quick get request and this is how I did it so their basic schema here all their requests goes to the API unsplash.com endpoint but how do we actually send a request like how do we get an image back let's say so if you go into your apps section and you click on new application see I've read a few users before and I am gonna call this video there is conveniently YouTube video this is you create an application and it's as simple as that your application is now created and basically you've got all the information about your app here if you were to go and use it on a bigger project or if you didn't need to do more requests or so obviously in this state right now you can do 5,000 reverse an hour which is quite a lot but basically what I'm interested in in my account is my keys down here okay I'm gonna be going ahead and deleting this account off this video it's been put out so don't bother trying to use them but you have an access key and a secret key in this context I'm only interested in the access key so once again what am I looking to do I'm a user I come in I search for London and I want to get a selection of images of London to be able to save along with my trip plan so I'm pre we're doing a get request I want to get a list of photos I don't want to get a random photo because that could give me anything I don't want to get just one photo of London I want to be able to give my user the option to decide what photo they want so I'm looking a here for list of photos and I'm gonna be doing a search basically so if I help over here to postman you can see I've got my base schema here API down splash comm slash search I'm doing a get request and my basic build up a query string against the photos endpoint so my first part of the query string is going to be what I'm querying my query is basing my search term so if I was to go here and type in London here it's just you know that made my query string so these are the images of London you get when you search for London so if I was building this into a project I've probably build this string dynamically in JavaScript let's say using string interpolation and I would get that you know that with that keyword there London dynamically but here let's see hard coding in postman and then I need to use my client ID my client ID is basically the you know key that I'm saying in Sun slash hey I've got an app I'm registered can you give me some photos please so you want to take your access key and if we go over here and paste that in certain the request and I get six thousand one hundred and nine results I've got six hundred and eleven pages obviously you can do pagination you can chain up pagination in this request string sorry in this query string didn't do it now but just so you know you don't have to do a request and get you know this huge amount of data back you get basically a result so right make that a little bit big somewhere somehow okay so in the results array going in there I've got an object and then you've basically got an array of objects essentially which is all your different images that you've got back and then you have a lot of information about that image you know alt descriptions the URLs these are the hot linked URLs to yun splash the links that you can use to link to the photo if you want to credit it if you want to put down photo by somebody all the user information so this is the user that actually uploaded the photo so if you're going to go ahead and credit them you can stick a link to their their account and basically that's a profile image of the user and their Instagram username and all different tags that they've added for the photo so similarly winding through London narrow photo of the London skyline during day time that sounds pretty cool and that was taken by Benjamin Davies so yeah right here in postman I could just go ahead and open that up and see I was like oh okay cool that's a nice photo let me use that in my app but basically that's it that's all I needed to do to get a huge array of different photos of London just that dust my query string so yeah that was it quick video but I'll take you back out to that camera right now well there we go wasn't that fun and actually quite easy I know looking through some times looking through dev documentation things aren't clear this actually took me quite a lot of trial and error to work out how to build the exact query that I would need to do obviously this isn't a perfect way of doing it there are a lot better ways you can obscure Phi your API key and if you're just trying to build a quick little personal project for yourself you want a random image or you want a user to be able to put in you know a search text field to find a specific image this is a good way this is a great way that you can integrate using images that are free open-source into your projects that you can use to build and find jobs or just build for your own ease basically and again also if you do look through the unsplash documentation they do have some server-side libraries if you do want to you know integrate a little bit more into a more serious project or a full-stack project just go ahead and read the docs it isn't that hard once you kind of understand how they how it works if you enjoyed this video maybe go ahead and give it a thumbs up or leave me a comment down below and until next time thank you so much for watching if you haven't done so already should see my head here you can click on it you can subscribe and there might also be a video up here popping up for something that YouTube thinks you might enjoy watching next and again thank you so much for watching and see you next time