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.
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.
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.
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.