Nocode Weekly #w20 Adalo + Unsplash Demo App

Nocode Weekly #w20 Adalo + Unsplash Demo App

I m going to build an Adalo App that pulls the images from Unsplash and favourite the photos that I like this week. Let's kickstart the nocode weekly again.

Unsplash Image API | Free HD Photo API
Create with the largest collection of high-quality images that are free to use. Trusted by Trello, Medium, and thousands of other API applications to power their free picture needs.

First, register a developer account at Unsplash, follow the instruction to create an application, agree with all the terms, choose your application name & description; you are ready to use the Unsplash API.

Please note the Access Key & Secret key; we will use it to query the Unsplash API.

Do not share these publicly

Login / Register your Adalo account and create your first application. Navigate to Database, under External Collection; you click on Add Collection. This option allows us to add external API data as part of the collection to use it within Adalo. You can find out more at the Adalo official documentation.

External Collections with APIs

Fill in the first screen like the screenshot.

Step 1: The Collection name can be anything; I usually will indicate the collection name starting with "API" to know these data are pulling through API. API base URL is the API endpoint that you are querying. There are different Authorization ways for API; for Unplash, you need to add the "Authorization" header with a value starting with "Client-ID" and the Access Key that you get from Unsplash. There is some specific API endpoint that only needs the Access Key to authorize.

Step 2: You can skip the endpoints

Step 3: Test Connection, Run the test to ensure the API didn't return results, and Adalo will keep these results as the attribute of your collections.

Once the collection has resolved, we can start building the App. There are only two screens for this App, the Home screen and the Favourite screen.

For Home screen -

I add the Deck Swiper component from the marketplace and configuring it pulling from the Unsplash collection. Create an internal database collection to store all the favourite photos; you need id, title and image URL.

  • Step 1 - Select the correct collection.
  • Step 2 - Update all the fields to the Unsplash Collection fields.
  • Step 3 - Ensure an action when the Deck end; I will link the user to the Favourite screen.
  • Step 4 - Create a record to the internal favourite database.

For Favourite Screen

Just add the image list component and, pulling from the internal Favourite Database, configure all the path to display the images.

A simple app that pulling from Unsplash API that allows you to favourite the photo has done. You can check out the demo here.

A demo app