LESSON SUMMARY: STIWK2114 – API-Based Data
Introduction to API-Based Data: Simplifying App Development
In today's world, developers often need access to real-time information, such as weather,
currency exchange rates, or prayer times, to build effective applications. Instead of creating
everything from scratch, developers can use remote API data to simplify their work. Remote
API data are services that enable mobile and web applications to access a wide variety of
useful data and functions pre-computed data or perform complex operations, making
programming easier and faster. This summary will guide you through the basics of using the
APIs in your applications.
Key Takeaways:
The APIs simplify programming by allowing developers to access data from servers
without extensive coding.
Instead of coding complex algorithms (e.g., prayer time calculations or weather data), you
can fetch pre-calculated data from APIs.
APIs return data in standardized formats like JSON (lightweight, structured, and human-
readable) or XML.
Why Use Web APIs?
Reduces programming complexity.
Speeds up development by leveraging pre-existing data sources.
Easily access data like currency exchange rates, weather, or even real-time maps.
Example:
Previously, to calculate prayer times, you needed to write complex mathematical formulas
involving longitude, latitude, and trigonometric functions. With APIs, you can directly
retrieve prayer times from providers in seconds.
Understanding Objects and JSON Format
Objects in JavaScript:
Everything is an object, composed of:
o Properties: Attributes like `name`, `color`, `model`.
o Methods: Actions like `start()`, `stop()`.
1
JSON Format:
A popular format for exchanging data with APIs.
Structure:
- Objects: Enclosed in curly braces `{}`.
- Arrays: Enclosed in square brackets `[]`.
Example JSON Data:
{
"id": 1,
"name": "Currency API",
"rates": {
"USD": 1.0,
"MYR": 4.7
}
}
In the JSON object above, the property 'rates' contains another sub-object. This sub-object
holds the exchange rates for different currencies, where each key (e.g., 'USD', 'MYR')
represents a currency code and its corresponding rate.
Steps to Use a Web API
1. Retrieve Data: Use a `fetch()` statement in JavaScript to access the API.
2. Parse Data: Extract and process specific information from the JSON object.
3. Display Data: Show results in a user-friendly way, like a table or chart.
Code Example: Fetching IP Address
This example demonstrates how to fetch a user's IP address using the `fetch()` method.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Fetch Example</title>
</head>
<body>
<h1>IP Address Fetcher</h1>
<button onclick="fetchIPAddress()">Get My IP</button>
<p id="result"></p>
<script src="[Link]"></script>
</body>
</html>
2
JavaScript (`[Link]`):
function fetchIPAddress() {
fetch("[Link]
.then(response => [Link]())
.then(data => {
[Link]("result").innerHTML = `Your
IP is: ${[Link]}`;
})
.catch(error => {
[Link]("Error fetching data:", error);
});
}
- `fetch("[Link] Sends a request to the API.
- `.then(response => [Link]())`: Converts the response to JSON.
- `[Link]("result").innerHTML`: Displays the IP in the paragraph tag.
Example: Currency Exchange API
This example fetches live currency exchange rates.
API Example URL:
[Link]
Code:
function fetchCurrencyRates() {
fetch("[Link]
.then(response => [Link]())
.then(data => {
let rateMYR = [Link];
[Link]("result").innerHTML = `1 USD
= ${rateMYR} MYR`;
})
.catch(error => {
[Link]("Error:", error);
});
}
3
Advanced Example: Displaying Weather Information
API Example URL:
[Link]
IKey
JavaScript:
function fetchWeather() {
const apiKey = "your_api_key"; // Replace with your API key
const city = "Kuala Lumpur";
const url =
`[Link]
ey}&units=metric`;
fetch(url)
.then(response => [Link]())
.then(data => {
let temp = [Link];
let description = [Link][0].description;
[Link]("result").innerHTML =
`The weather in ${city} is ${description} with a
temperature of ${temp}°C.`;
})
.catch(error => {
[Link]("Error fetching weather data:", error);
});
}
Best Practices for Using Web APIs
1. Test API in Browser: Check the API response format using tools like Postman
or online JSON formatters.
2. Error Handling: Use catch() to manage errors like incorrect URLs or network
issues.
3. Follow Documentation: Understand API-specific requirements like
authentication keys.
4. Limit API Calls: Some APIs have rate limits. Optimize your requests to stay
within limits.
Applications of Web APIs
1. Currency Conversion: Fetch live exchange rates and historical data for various
currencies.
2. Weather Forecasting: Display real-time weather and forecasts for cities
worldwide.
3. Maps and Travel: Use APIs like Google Maps to calculate distances and travel
times.
4
4. User Authentication: Implement login systems with APIs like Google OAuth.
5. Islamic Apps: Display prayer times, Quran translations, and audio recitations.
Conclusion and Next Steps
Modern API Integration: Focus on how APIs streamline app development.
Practice Projects: Create apps to fetch and display data like weather, currency
rates, or prayer times.
Advanced Concepts: Explore integrating APIs with frameworks like React or
Angular for dynamic applications.