Third-party service integration in No-Code - Mini Project: Build & Apply

Third-party Service Integration

📖 Scenario: You are building a simple website that shows weather information. To get the weather data, you want to connect your website to a third-party weather service.This project will guide you through the basic steps of integrating a third-party service into your website.

🎯 Goal: Build a basic integration setup that connects your website to a third-party weather service and displays the weather data.

📋 What You'll Learn

Create a placeholder for weather data on the webpage

Add a configuration variable for the API key

Set up the main logic to fetch weather data from the third-party service

Complete the integration by displaying the fetched weather data on the webpage

💡 Why This Matters

🌍 Real World

Many websites and apps use third-party services to get data like weather, maps, or social media feeds. This project shows the basic steps to connect and use such services.

💼 Career

Understanding how to integrate third-party APIs is a key skill for web developers and software engineers working on real-world applications.

1

Create the HTML placeholder for weather data

Create a div element with the id attribute set to weather-info inside the body of the HTML document. This will be the placeholder where the weather data will appear.

No-Code

    
    
    Weather App


    

Need a hint?

Use a div tag with id="weather-info" inside the body section.

2

Add the API key configuration

Inside a script tag before the closing body tag, create a variable called apiKey and set it to the string "12345abcde". This variable will hold the API key for the third-party weather service.

No-Code

    
    
    Weather App


    
    
        // Create a variable called apiKey and set it to "12345abcde"
    

Need a hint?

Use const apiKey = "12345abcde"; inside a script tag.

3

Add the main logic to fetch weather data

Inside the existing script tag, write an asynchronous function called fetchWeather that uses fetch to get weather data from https://api.weather.com/data?apikey= plus the apiKey. Then call fetchWeather() to start the process.

No-Code

    
    
    Weather App


    
    
        const apiKey = "12345abcde";
        // Write an async function fetchWeather that fetches from the URL with apiKey
        // Then call fetchWeather()
    

Need a hint?

Use async function fetchWeather() and inside it use await fetch(`https://api.weather.com/data?apikey=${apiKey}`). Then call fetchWeather().

4

Display the fetched weather data

Inside the fetchWeather function, after getting the JSON data, set the textContent of the div with id="weather-info" to the data.summary property to show the weather summary on the webpage.

No-Code

    
    
    Weather App


    
    
        const apiKey = "12345abcde";
        async function fetchWeather() {
            const response = await fetch(`https://api.weather.com/data?apikey=${apiKey}`);
            const data = await response.json();
            // Set the textContent of the div with id "weather-info" to data.summary
        }
        fetchWeather();
    

Need a hint?

Use document.getElementById("weather-info").textContent = data.summary; inside the fetchWeather function.