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. Currently, it displays the 5 most recent occurrences in Togo.
+
 ## Usage
 
 To run this project locally, you will need to have Python and Flask installed.

eco_project/backend/app.py

@@ -36,5 +36,29 @@ def forest_area():
     except requests.exceptions.RequestException as e:
         return jsonify({"error": str(e)}), 500
 
+@app.route('/api/gbif_occurrences')
+def gbif_occurrences():
+    # GBIF API URL for occurrences in Togo
+    url = "https://api.gbif.org/v1/occurrence/search?country=TG&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,11 @@ <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 in Togo</h2>
+            <p>Recent species occurrences in Togo from the Global Biodiversity Information Facility (GBIF):</p>
+            <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,12 @@ 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');
 
     // Fetch and display World Bank data on page load
     fetchWorldBankData();
+    // Fetch and display GBIF data on page load
+    fetchGbifData();
 
     sendBtn.addEventListener('click', () => {
         const userInput = chatInput.value;
@@ -52,4 +55,30 @@ document.addEventListener('DOMContentLoaded', () => {
             worldBankDataContainer.innerHTML = `<p>Error fetching data: ${error.message}</p>`;
         }
     }
+
+    async function fetchGbifData() {
+        try {
+            const response = await fetch('/api/gbif_occurrences');
+            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>`;
+        }
+    }
 });