feat: Integrate GBIF API to display biodiversity data

README.md

@@ -14,6 +14,10 @@ This project is a web application designed to promote environmental protection a
 
 This application integrates with the World Bank API to fetch and display data on environmental indicators. Currently, it displays the forest area percentage for Brazil, Indonesia, and the Democratic Republic of Congo.
 
+## GBIF API Integration
+
+This application also integrates with the Global Biodiversity Information Facility (GBIF) API to fetch and display species occurrence data. Users can search for the 5 most recent occurrences in any country by providing a 2-letter country code. By default, it displays the data for Togo.
+
 ## Usage
 
 To run this project locally, you will need to have Python and Flask installed.

eco_project/backend/app.py

@@ -1,4 +1,4 @@
-from flask import Flask, jsonify
+from flask import Flask, jsonify, request
 import requests
 
 app = Flask(__name__)
@@ -36,5 +36,32 @@ def forest_area():
     except requests.exceptions.RequestException as e:
         return jsonify({"error": str(e)}), 500
 
+@app.route('/api/gbif_occurrences')
+def gbif_occurrences():
+    # Get country code from request arguments, default to Togo (TG)
+    country_code = request.args.get('country', 'TG')
+
+    # GBIF API URL for occurrences
+    url = f"https://api.gbif.org/v1/occurrence/search?country={country_code}&limit=5"
+
+    try:
+        response = requests.get(url)
+        data = response.json()
+
+        if data and data['results']:
+            # Clean and format the data
+            formatted_data = []
+            for entry in data['results']:
+                formatted_data.append({
+                    'species': entry.get('scientificName', 'N/A'),
+                    'url': f"https://www.gbif.org/occurrence/{entry['key']}"
+                })
+            return jsonify(formatted_data)
+        else:
+            return jsonify({"error": "No data found for the selected criteria."}), 404
+
+    except requests.exceptions.RequestException as e:
+        return jsonify({"error": str(e)}), 500
+
 if __name__ == '__main__':
     app.run(debug=True)

eco_project/frontend/index.html

@@ -28,6 +28,13 @@ <h2>Development Projects</h2>
             <p>Tracking and managing sustainable development goals. Here is some data from the World Bank:</p>
             <div id="world-bank-data"></div>
         </section>
+        <section id="gbif-data">
+            <h2>Biodiversity Search</h2>
+            <p>Enter a 2-letter country code (e.g., TG for Togo, US for United States) to search for recent species occurrences from the Global Biodiversity Information Facility (GBIF).</p>
+            <input type="text" id="country-code-input" placeholder="Enter country code...">
+            <button id="search-gbif-btn">Search</button>
+            <div id="gbif-occurrences"></div>
+        </section>
         <section id="ai-agent">
             <h2>AI Assistant</h2>
             <p>Your personal guide to environmental protection.</p>

eco_project/frontend/script.js

@@ -3,9 +3,14 @@ document.addEventListener('DOMContentLoaded', () => {
     const chatInput = document.getElementById('chat-input');
     const chatWindow = document.getElementById('chat-window');
     const worldBankDataContainer = document.getElementById('world-bank-data');
+    const gbifOccurrencesContainer = document.getElementById('gbif-occurrences');
+    const countryCodeInput = document.getElementById('country-code-input');
+    const searchGbifBtn = document.getElementById('search-gbif-btn');
 
     // Fetch and display World Bank data on page load
     fetchWorldBankData();
+    // Fetch and display GBIF data for Togo on page load
+    fetchGbifData('TG');
 
     sendBtn.addEventListener('click', () => {
         const userInput = chatInput.value;
@@ -20,6 +25,13 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
+    searchGbifBtn.addEventListener('click', () => {
+        const countryCode = countryCodeInput.value.trim().toUpperCase();
+        if (countryCode) {
+            fetchGbifData(countryCode);
+        }
+    });
+
     function appendMessage(message) {
         const messageElement = document.createElement('p');
         messageElement.textContent = message;
@@ -52,4 +64,30 @@ document.addEventListener('DOMContentLoaded', () => {
             worldBankDataContainer.innerHTML = `<p>Error fetching data: ${error.message}</p>`;
         }
     }
+
+    async function fetchGbifData(countryCode) {
+        try {
+            const response = await fetch(`/api/gbif_occurrences?country=${countryCode}`);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+
+            if (data.error) {
+                gbifOccurrencesContainer.innerHTML = `<p>Error fetching data: ${data.error}</p>`;
+                return;
+            }
+
+            let html = '<ul>';
+            data.forEach(item => {
+                html += `<li><a href="${item.url}" target="_blank">${item.species}</a></li>`;
+            });
+            html += '</ul>';
+
+            gbifOccurrencesContainer.innerHTML = html;
+
+        } catch (error) {
+            gbifOccurrencesContainer.innerHTML = `<p>Error fetching data: ${error.message}</p>`;
+        }
+    }
 });