مقدمة

أصبحت العملات المشفرة رائجة هذه الأيام، ومع توفر عدد كبير من العملات المعدنية، من الضروري أن يكون لديك أداة للبحث بسهولة وعرض التفاصيل المتعلقة بها. يقوم تطبيق Crypto Finder بذلك. يوفر هذا التطبيق، المُصمم باستخدام React، تجربة سلسة للمستخدمين للبحث عن تفاصيل العملة المشفرة وتصفيتها وعرضها.

نظرة عامة على المشروع

يتكون تطبيق Crypto Finder من:

• واجهة بحث: يمكن للمستخدمين البحث عن العملات المشفرة بالاسم.
• قائمة العملات المشفرة: يتم عرضها على شكل بطاقات، وتعرض المعلومات الأساسية.
• عرض تفصيلي: يؤدي النقر على بطاقة العملة المشفرة إلى إظهار معلومات أكثر تفصيلاً حول تلك العملة.

سمات

• وظيفة البحث: تصفية العملات المشفرة حسب الاسم.
• التوجيه الديناميكي: عرض معلومات مفصلة عن العملة المشفرة المحددة.
• التصميم سريع الاستجابة: يضمن أن يبدو التطبيق جيدًا على أحجام الشاشات المختلفة.
• مؤشرات التحميل: إظهار أداة التحميل أثناء جلب البيانات.

التقنيات المستخدمة

• رد: لبناء واجهة المستخدم.
• أكسيوس: لتقديم طلبات HTTP.
• React Router: للتوجيه والتنقل.
• واجهة برمجة تطبيقات CoinGecko: لجلب بيانات العملة المشفرة.

هيكل المشروع

إليك نظرة عامة سريعة على هيكل المشروع:

• سرك/
  • عناصر/
  • CryptoFinder.js
  • CryptoDetails.js
  • Navbar.js
  • Footer.js
  • App.js
  • App.css

تثبيت

لبدء استخدام تطبيق Crypto Finder، اتبع الخطوات التالية:

1. استنساخ المستودع

   git clone https://github.com/abhishekgurjar-in/Crypto-Finder
   cd crypto-finder

1. تثبيت التبعيات

   npm install

1. بدء تشغيل خادم التطوير

   npm start

1. افتح متصفحك وانتقل إلى http://localhost:3000 لرؤية التطبيق أثناء العمل.

الاستخدام

• البحث عن العملات المشفرة: اكتب في مربع البحث وانقر على "بحث" لتصفية قائمة العملات المشفرة.
• عرض التفاصيل: انقر على بطاقة العملة المشفرة لعرض المعلومات التفصيلية.

شرح الكود

مكون التطبيق

يقوم مكون App.js بإعداد التوجيه ويتضمن مكونات شريط التنقل والتذييل.

import React from "react";
import CryptoFinder from "./components/CryptoFinder";
import "./App.css";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import {Route,Routes} from "react-router-dom"
import CryptoDetails from "./components/CryptoDetails";
const App = () => {
  return (
    

      
      
        }/>
        }/>
      

      
    
  );
};

export default App;

مكون CryptoFinder

يتولى مكون CryptoFinder.js جلب وعرض قائمة العملات المشفرة. ويتضمن شريط بحث لتصفية النتائج.

import React, { useEffect, useState } from "react";
import axios from "axios";
import { Link } from "react-router-dom";

const CryptoFinder = () => {
  const [search, setSearch] = useState("");
  const [crypto, setCrypto] = useState([]);
  const [filteredCrypto, setFilteredCrypto] = useState([]);

  useEffect(() => {
    axios
      .get(`https://api.coingecko.com/api/v3/coins/markets`, {
        params: {
          vs_currency: "inr",
          order: "market_cap_desc",
          per_page: 100,
          page: 1,
          sparkline: false,
        },
      })
      .then((res) => {
        setCrypto(res.data);
        setFilteredCrypto(res.data);
      });
  }, []);

  const handleSearch = () => {
    const filteredData = crypto.filter((data) => {
      return data.name.toLowerCase().includes(search.toLowerCase());
    });
    setFilteredCrypto(filteredData);
  };

  if (crypto.length === 0) {
    return (
      

        

      
    );
  }

  return (
    

      

         setSearch(e.target.value)}
          onKeyDown={handleSearch}
          placeholder="Search for a cryptocurrency"
        />
        Search
      
      

        {filteredCrypto.map((val, id) => (
          

            
            
{val.name}
            
{val.symbol.toUpperCase()}
            
₹{val.current_price.toFixed(2)}
            
              View Details
            
          
        ))}
      
    
  );
};

export default CryptoFinder;

مكون تفاصيل التشفير

يقوم مكون CryptoDetails.js بجلب وعرض معلومات مفصلة حول عملة مشفرة محددة.

import React, { useEffect, useState } from "react";
import axios from "axios";
import { useParams } from "react-router-dom";

const CryptoDetails = () => {
  const { id } = useParams();
  const [cryptoDetails, setCryptoDetails] = useState(null);

  useEffect(() => {
    axios
      .get(`https://api.coingecko.com/api/v3/coins/${id}`, {
        params: {
          localization: false,
        },
      })
      .then((res) => {
        setCryptoDetails(res.data);
      });
  }, [id]);

  if (!cryptoDetails) {
    return (
      

        

      
    );
  }

  return (
    

      

        

          
{cryptoDetails.name}
          
{cryptoDetails.symbol.toUpperCase()}
          

            Current Price: ₹
            {cryptoDetails.market_data.current_price.inr.toFixed(2)}
          
        
        

          
        
      
      

      
Description :
      
{cryptoDetails.description.en}
      


  

  

        
Market Data
        

          Market Cap: ₹
          {cryptoDetails.market_data.market_cap.inr.toLocaleString()}
        
        

          Total Volume: ₹
          {cryptoDetails.market_data.total_volume.inr.toLocaleString()}
        
        
24h High: ₹{cryptoDetails.market_data.high_24h.inr}
        
24h Low: ₹{cryptoDetails.market_data.low_24h.inr}
        

          Price Change (24h): ₹
          {cryptoDetails.market_data.price_change_24h.toFixed(2)}
        
        

          Price Change Percentage (24h):{" "}
          {cryptoDetails.market_data.price_change_percentage_24h.toFixed(2)}%
        
      

      

        
Additional Information
        
Genesis Date: {cryptoDetails.genesis_date || "N/A"}
        

          Homepage:{" "}
          
            {cryptoDetails.links.homepage[0]}
          
        
        

          Blockchain Site:{" "}
          
            {cryptoDetails.links.blockchain_site[0]}
          
        
      
  
    
  );
};

export default CryptoDetails;

مكون شريط التنقل

يوفر مكون Navbar.js رأسًا للتطبيق.

import React from 'react'

const Navbar = () => {
  return (
    

    
Crypto Finder
  
  )
}

export default Navbar

مكون التذييل

يوفر مكون Footer.js تذييلًا للتطبيق.

import React from 'react'

const Footer = () => {
  return (
    

    
Made with ❤️ by Abhishek Gurjar
  
  )
}

export default Footer

العرض المباشر

يمكنك مشاهدة العرض التجريبي المباشر لتطبيق Crypto Finder هنا.

خاتمة

كان إنشاء تطبيق Crypto Finder تجربة ممتعة وتعليمية. ويوضح كيفية استخدام React لجلب البيانات وعرضها، ومعالجة التوجيه، وإنشاء واجهة سريعة الاستجابة وسهلة الاستخدام. أتمنى أن تجد هذا المشروع مفيدًا وأن يلهمك لإنشاء تطبيقاتك الخاصة باستخدام React!

الاعتمادات

• وثائق التفاعل: مستندات التفاعل
• واجهة برمجة تطبيقات CoinGecko: CoinGecko
• وثائق أكسيوس: مستندات أكسيوس

مؤلف

ابهيشيك جورجار

لا تتردد في تعديل أو إضافة المزيد من التفاصيل بناءً على تفضيلاتك أو الميزات الإضافية التي ربما تكون قد نفذتها.