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 buttonNew Application
. - Accept the terms and agreement to use Unsplash API.
- Enter the
Application name
andDescription
. - 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 theACCESS_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 thevalue
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 clickAdd
. - 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 onRest 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 theHeaders
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
inAdd 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}}
inAdd 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 theConfiguration
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.


Updated 2 months ago