Unsplash

What is Unsplash?

Unsplash is a website dedicated to sharing stock photography. It grants an irrevocable, nonexclusive, worldwide copyright license to download, copy, modify, distribute, perform, and use photos for free.

Connect Unsplash to Draftbit

Setup steps with Unsplash

If you do not have an Unsplash account, create on here.

The initial step to use Unsplash API is to create an application and get an Authorization token.

Get your REST API URL:

To create a new application go to the Unsplash Oauth URL here.

From the Applications dashboard screen, under the section Your applications, click the button New Application.
Accept the terms and agreement to use Unsplash API.
Enter the Application name and Description.
Click Create application.
The base URL of the Unsplash API is https://api.unsplash.com.

Get Authorization Token:

The Authorization token to use the Unsplash API requires an Authorization header to be passed with a value of Client-ID ACCESS_KEY.

Go to the Your apps page from your Unsplash account.
Choose the application whose ACCESS_KEY you want to access.
Go to the Keys section and save the ACCESS_KEY. This going to be used in the next section.

Setup steps in Draftbit

To access the API in the Draftbit app, you need the pass the ACCESS_KEY as the global variable in the form of an Authorization header.

Open the Settings tab on left-navbar.
In the Project Settings, navigate to Global Variables.
Enter a key to access the Authentication token and the value for it.
The Authorization token value requires you to enter a Bearer token. The syntax is Client-ID ACCESS_KEY.
In place of paste your own ACCESS_KEY (from the previous section) and then click Add.
Click Save.

To add the Unsplash API Base URL to your Draftbit app:

Open the Data tab on left-navbar.
From the Add a service menu, click on Rest API.
Enter a name for your REST API.
Paste your Base URL (from the previous section) into the Base URL input field.
Click the + from the Headers section to add a new Header.
Type Authorization for the key.
Select the Global Variable for Authorization (from the last step).
Click Save.

Available Unsplash recipes for Draftbit

Fetch all photos from Unsplash API into a List in Draftbit

To a blank screen in Draftbit, add a nested Fetch component, List component, View component, and an Image component so that your Layer Tree looks like this:

Inside of the View component, you can place as many Images you would like to be rendered for each image.

The next step is to create an endpoint. Let's try fetching the images using the GET request:

Click Create new endpoint.
Enter a name for this endpoint.
Add the /photos in Add Path & Params.
Click the Test button next to the Endpoint input to make sure you've successfully connected to your Unsplash API.
Once everything looks right, click Save to close the modal.

Select the Fetch component in the Layer Tree and select the Service you have created.
Select the Endpoint you want to fetch the data from.
Select the List component in the Layer Tree.
Change its Mapped Value to data under the Data Tab.
Now you can configure a Mapped Value on each Image component to urls.small you have inside the View of your Fetch component.
Here is also a Preview mode is shown on how the data is fetched from the service API.

Fetch single photo into a Draftbit app

To a blank screen in Draftbit, add a nested Fetch component, View component, and an Image component so that your Layer Tree looks like this:

To fetch a single photo from Unsplash, you'll have to specify the ID which is found when fetching data in the Preview mode.

Click Create new endpoint.
Enter a name for this endpoint.
Add the /photos/{{ID}} in Add Path & Params.
Click the Test button next to the Endpoint input to make sure you've successfully connected to your Unsplash API.
Once everything looks right, click Save to close the modal.

Select the Fetch component in the Layer Tree and select the Service you have created.
Select the Endpoint you want to fetch the data from.
Add the value for the ID in the Configuration section. This value is used to fetch the single photo.
Now you can configure a Mapped Value on each Image component to urls.small you have inside the View of your Fetch component.
Here is also a Preview mode is shown on how the data is fetched from the service API.