1. مثال لواجهة برمجة تطبيقات Mapbox

يوفر Mapbox أدوات شاملة وبيانات موقع دقيقة يمكنك استخدامها لإنشاء الخرائط وخدمات التنقل والتطبيقات الأخرى المستندة إلى الموقع. باستخدام Mapbox، يمكنك عرض خرائط مخصصة ودمج الموقع الجغرافي وغير ذلك الكثير.
وصلة

import React, { useEffect } from 'react';

const Mapbox = () => {
    useEffect(() => {
        // Set your Mapbox access token here
        const mapboxAccessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

        // Create a map instance
        const map = new mapboxgl.Map({
            container: 'map', // Container ID in the HTML
            style: 'mapbox://styles/mapbox/streets-v11', // Style URL
            center: [-74.5, 40], // Starting position [lng, lat]
            zoom: 9, // Starting zoom
        });

        mapboxgl.accessToken = mapboxAccessToken;
    }, []);

    return (
        

            
Mapbox Example
            

        
    );
};

export default Mapbox;

2. مثال لواجهة برمجة تطبيقات ناسا

توفر واجهة NASA API إمكانية الوصول إلى مجموعة كبيرة من البيانات المتعلقة بالفضاء، بما في ذلك الصور ومقاطع الفيديو والمعلومات حول الكواكب والنجوم والمزيد. سواء كنت تقوم بإنشاء أداة تعليمية أو ترغب فقط في عرض بيانات فضائية رائعة، فإن واجهة برمجة التطبيقات (API) التابعة لناسا تعد مصدرًا ممتازًا.
وصلة

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Nasa = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
        axios.get('https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY')
            .then(response => setData(response.data))
            .catch(error => console.error('Error fetching data from NASA API:', error));
    }, []);

    return (
        

            
NASA Astronomy Picture of the Day
            {data ? (
                

                    
{data.title}
                    
{data.explanation}
                
            ) : (
                
Loading...
            )}
        
    );
};

export default Nasa;

3. مثال على واجهة برمجة التطبيقات للاقتباسات المفضلة

توفر واجهة برمجة التطبيقات هذه مجموعة من الاقتباسات المفيدة التي يمكنك دمجها بسهولة في تطبيقك. إنه مثالي لإنشاء تطبيقات تلهم المستخدمين وتحفزهم.
وصلة

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Quotes = () => {
    const [quote, setQuote] = useState('');

    useEffect(() => {
        axios.get('https://favqs.com/api/qotd')
            .then(response => setQuote(response.data.quote.body))
            .catch(error => console.error('Error fetching data from Quotes API:', error));
    }, []);

    return (
        

            
Quote of the Day
            
{quote}
        
    );
};

export default Quotes;

4. مثال على واجهة برمجة تطبيقات إدامام

يوفر إدامام إمكانية الوصول إلى قاعدة بيانات شاملة للمواد الغذائية ووصفات الطعام، إلى جانب التحليلات الصحية التفصيلية. تعتبر واجهة برمجة التطبيقات هذه مثالية لإنشاء أجهزة تتبع النظام الغذائي وتطبيقات الوصفات والتطبيقات القائمة على التغذية.
وصلة

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Edamam = () => {
    const [recipes, setRecipes] = useState([]);
    const query = "chicken"; // Example search query

    useEffect(() => {
        const appId = 'YOUR_EDAMAM_APP_ID';
        const appKey = 'YOUR_EDAMAM_APP_KEY';

        axios.get(`https://api.edamam.com/search?q=${query}&app_id=${appId}&app_key=${appKey}`)
            .then(response => setRecipes(response.data.hits))
            .catch(error => console.error('Error fetching data from Edamam API:', error));
    }, []);

    return (
        

            
Edamam Recipes for "{query}"
            

                {recipes.map((recipe, index) => (
                    

                        
                        {recipe.recipe.label}
                    
                ))}
            
    );
};

export default Edamam;

5. مثال لواجهة برمجة تطبيقات المتجر المزيف

تعد Fake Store API أداة رائعة للمطورين الذين يعملون في مشاريع التجارة الإلكترونية. فهو يوفر بيانات زائفة حقيقية يمكنك استخدامها لملء متجرك بالمنتجات والأسعار والفئات.
وصلة

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const FakeStore = () => {
    const [products, setProducts] = useState([]);

    useEffect(() => {
        axios.get('https://fakestoreapi.com/products')
            .then(response => setProducts(response.data))
            .catch(error => console.error('Error fetching data from Fake Store API:', error));
    }, []);

    return (
        

            
Fake Store Products
            

                {products.map(product => (
                    

                        
                        {product.title}
                    
                ))}
            
    );
};

export default FakeStore;

6. مثال لواجهة برمجة تطبيقات بوكيمون

تعد واجهة برمجة تطبيقات Pokémon API (PokeAPI) أمرًا ضروريًا لأي محب لـ Pokémon. فهو يقدم بيانات شاملة عن جميع البوكيمونات، بما في ذلك الإحصائيات والأنواع والقدرات، مما يجعله مثاليًا لإنشاء التطبيقات والألعاب المتعلقة بالبوكيمون.
وصلة

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Pokemon = () => {
    const [pokemonList, setPokemonList] = useState([]);

    useEffect(() => {
        axios.get('https://pokeapi.co/api/v2/pokemon?limit=10')
            .then(response => setPokemonList(response.data.results))
            .catch(error => console.error('Error fetching data from Pokémon API:', error));
    }, []);

    return (
        

            
Pokémon List
            

                {pokemonList.map((pokemon, index) => (
                    

                        {pokemon.name}
                    
                ))}
            
    );
};

export default Pokemon;

7. مثال IGDB API

توفر قاعدة بيانات ألعاب الإنترنت (IGDB) API بيانات عن الآلاف من ألعاب الفيديو، مما يسمح لك بإنشاء مواقع ويب وتطبيقات موجهة لألعاب الفيديو. يمكنك جلب معلومات حول الألعاب والمنصات والأنواع والمزيد.
وصلة

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const IGDB = () => {
    const [games, setGames] = useState([]);

    useEffect(() => {
        const apiKey = 'YOUR_IGDB_API_KEY';

        axios.post('https://api.igdb.com/v4/games/', 
        'fields name, cover.url; sort popularity desc; limit 10;', 
        { headers: { 'Client-ID': 'YOUR_CLIENT_ID', 'Authorization': `Bearer ${apiKey}` } })
            .then(response => setGames(response.data))
            .catch(error => console.error('Error fetching data from IGDB API:', error));
    }, []);

    return (
        

            
Popular Video Games
            

                {games.map(game => (
                    

                        {game.cover ?  : null}
                        {game.name}
                    
                ))}
            
    );
};

export default IGDB;

خاتمة

يوضح كل من هذه الأمثلة كيفية دمج واجهات برمجة التطبيقات المعنية في React, Next. يمكنك بسهولة توسيع هذه الأمثلة لتناسب احتياجات تطبيقك، سواء كان ذلك يعرض معلومات أكثر تفصيلاً، أو يتعامل مع تفاعلات المستخدم، أو يصمم المخرجات لتجربة مستخدم أفضل.

توضح هذه الأمثلة مدى سهولة جلب البيانات وعرضها من واجهات برمجة التطبيقات المجانية المتنوعة.