برنامه نویسی

راهنمای کامل برای ساخت Coinwatch: داشبورد رمزنگاری در زمان واقعی شما

ek3nk4r 4 هفته پیش

0 0 خواندن این مطلب 12 دقیقه زمان میبرد

راهنمای کامل برای ساخت Coinwatch: داشبورد رمزنگاری در زمان واقعی شما

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

از صفر تا قهرمان: ادغام Master API ، احراز هویت و هوش مصنوعی در یک پروژه حماسی!

فهرست مطالب

📋 فهرست مطالب

خوش آمدید توسعه دهنده رمزنگاری آینده! 🎯
آنچه شما می سازید و یاد خواهید گرفت
تنظیم محیط توسعه خود 🛠
درک API ها: پل داده شما
شروع با API Coingecko
تنظیم پروژه: ایجاد برنامه React خود
اولین تماس API خود را
دست زدن به داده ها مانند یک حرفه ای
افزودن احراز هویت Firebase
ادغام جادوی AI با Google Gemini
طراحی منابع و الهام بخش
نکات توسعه محلی برای توسعه دهندگان Bamenda
ماموریت شما: ساخت داشبورد Coinwatch

خوش آمدید توسعه دهنده رمزنگاری آینده! 🎯

سلام ، توسعه دهنده شگفت انگیز! 🌟 شما قصد دارید یک سفر باورنکردنی را آغاز کنید که شما را از یک مبتدی کنجکاو به یک توسعه دهنده تمام پشته با اعتماد به نفس تبدیل کند. امروز ، ما قصد داریم چیزی خارق العاده با هم بسازیم – یک داشبورد رمزنگاری در زمان واقعی که حتی باعث حسادت جوانب مثبت می شود!

از این راهنما به عنوان مربی برنامه نویسی شخصی خود فکر کنید ، در هر مرحله از راه در کنار شما قدم بزنید. ما مفاهیم پیچیده را به قطعات اندازه نیش و هضم می کنیم که حتی مادربزرگ شما نیز می توانست آن را درک کند (خوب ، شاید قسمت API نباشد ، اما شما این ایده را می گیرید! 😄).

آنچه شما می سازید و یاد خواهید گرفت

در پایان این سفر ، شما تسلط یافته اید:

skills مهارت های اصلی:

ادغام API: واکشی داده های رمزنگاری در زمان واقعی مانند جادوگر
تسلط: ایجاد رابط های کاربر پویا و پاسخگو
احراز هویت: تأمین برنامه خود با Firebase
ادغام هوش مصنوعی: اضافه کردن ویژگی های هوشمند با Gemini Google
توسعه حرفه ای: شیوه های استاندارد صنعت

پروژه نهایی شما:
یک داشبورد cryptocurrency کاملاً کاربردی به نام “Coinwatch” که قیمت های واقعی ، داده های بازار و بینش های دارای هوش مصنوعی را نشان می دهد-همه با تأیید اعتبار کاربر تضمین می شوند!

تنظیم محیط توسعه خود 🛠

قبل از اینکه به چیزهای هیجان انگیز شیرجه بزنیم ، اطمینان حاصل کنیم که رایانه شما برای برخی از اقدامات جدی برنامه نویسی آماده است!

لیست چک پیش نیازها:

✅ node.js (نسخه 14 یا بالاتر)
reditor یک ویرایشگر کد (در مقابل کد توصیه می شود)
✅ دانش اساسی جاوا اسکریپت و واکنش نشان می دهد
✅ ذهن و عزم کنجکاو برای یادگیری!

بررسی سریع محیط:

# Check if Node.js is installed
node --version

# Check if npm is installed  
npm --version

اگر شماره نسخه را می بینید ، طلایی هستید! اگر اینطور نیست ، به nodejs.org بروید و آخرین نسخه را بارگیری کنید.

درک API ها: پل داده شما

API چیست؟
تصور کنید که در یک رستوران هستید. شما (جلوی) غذا (داده) می خواهید ، اما نمی توانید مستقیماً به آشپزخانه (سرور) بروید. درعوض ، شما به پیشخدمت (API) می گویید چه می خواهید ، و آنها آن را به شما باز می گردانند. این دقیقاً همان کاری است که یک API انجام می دهد – این پیشخدمت داده شماست!

Coingecko API:
Coingecko مانند داشتن یک دوست فوق العاده باهوش است که همه چیز را در مورد قیمت رمزنگاری ، کلاه های بازار و حجم معاملات می داند. به جای بررسی دستی صدها وب سایت ، می توانید از API Coingecko بپرسید ، و این همه داده ها را فوراً به شما می دهد!

مفاهیم کلیدی:

نقطه پایانی: URL خاص که در آن داده می خواهید
درخواست: سوال شما به API
پاسخ: پاسخ API با داده های شما
json: API های زبان برای ارسال داده ها (مانند یک مترجم جهانی) استفاده می کنند

شروع با API Coingecko

نکته زیبا در مورد API Coingecko؟ این است رایگان و برای استفاده اساسی به یک کلید API احتیاج ندارد! این بدان معنی است که می توانید بلافاصله ساختمان را شروع کنید.

نقاط پایانی API مهم:

1. لیست همه سکه ها را دریافت کنید:

https://api.coingecko.com/api/v3/coins/list

2. داده های بازار را دریافت کنید:

https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1

3. داده های سکه خاصی دریافت کنید:

https://api.coingecko.com/api/v3/coins/bitcoin

4. داده های قیمت را دریافت کنید:

https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum&vs_currencies=usd

اولین تماس API خود را آزمایش کنید:

مرورگر خود را باز کنید و این آدرس را بچسبانید:

https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd

شما باید چیزی مانند:

{
  "bitcoin": {
    "usd": 45000
  }
}

تبریک می گویم! شما فقط اولین تماس API خود را انجام داده اید! 🎉

تنظیم پروژه: ایجاد برنامه React خود

زمان ایجاد پروژه خود! ترمینال خود را باز کنید و بیایید آشپزی کنیم:

# Create your React app
npx create-react-app coinwatch-dashboard
cd coinwatch-dashboard

# Install additional packages we'll need
npm install axios firebase

# Start your development server
npm start

چه اتفاقی افتاده است؟

create-react-app یک ساختار کامل پروژه React ایجاد کرد
axios مشتری HTTP ما برای برقراری تماس API است (به عنوان ابزار به روز شده ما فکر کنید)
firebase احراز هویت ما را کنترل خواهد کرد
npm start سرور توسعه محلی خود را راه اندازی می کند

مرورگر شما باید به طور خودکار باز شود http://localhost:3000 نمایش برنامه React Default React. شما رسما در بازی هستید! 🚀

اولین تماس API خود را

اکنون برای قسمت هیجان انگیز – بیایید برخی از داده های رمزنگاری واقعی را بدست آوریم!

مرحله 1: یک مؤلفه جدید ایجاد کنید

فایلی به نام ایجاد کنید src/CryptoData.js:

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

function CryptoData() {
  // State to store our crypto data
  const [cryptoData, setCryptoData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Function to fetch crypto data
  const fetchCryptoData = async () => {
    try {
      setLoading(true);

      // The API endpoint for top 10 cryptocurrencies
      const response = await axios.get(
        'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1'
      );

      setCryptoData(response.data);
      setError(null);
    } catch (err) {
      setError('Failed to fetch crypto data');
      console.error('Error fetching data:', err);
    } finally {
      setLoading(false);
    }
  };

  // useEffect runs when component mounts
  useEffect(() => {
    fetchCryptoData();
  }, []);

  if (loading) return <div>Loading awesome crypto data...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h2>Top 10 Cryptocurrencies</h2>
      {cryptoData.map(coin => (
        <div key={coin.id} style={{ margin: '10px', padding: '10px', border: '1px solid #ccc' }}>
          <h3>{coin.name} ({coin.symbol.toUpperCase()})</h3>
          <p>Price: ${coin.current_price}</p>
          <p>Market Cap: ${coin.market_cap.toLocaleString()}</p>
          <p>24h Change: {coin.price_change_percentage_24h?.toFixed(2)}%</p>
        </div>
      ))}
    </div>
  );
}

export default CryptoData;

مرحله 2: درک کد

بیایید این را مانند یک دوست توضیح دهیم:

مدیریت دولت:

const [cryptoData, setCryptoData] = useState([]);

فکر کردن useState به عنوان ایجاد یک جعبه برای ذخیره اطلاعات. cryptoData محتوای فعلی جعبه است ، و setCryptoData تابعی است که چیزهای جدیدی را در جعبه قرار دهید.

تماس API:

const response = await axios.get('API_URL');

این مانند ارسال نامه و انتظار برای پاسخ است. await به معنای “صبر برای پاسخ قبل از ادامه” ، و axios.get() روش ما برای درخواست API برای داده است.

رسیدگی به خطا:

try {
  // Try to get data
} catch (err) {
  // If something goes wrong, handle it gracefully
}

این مانند داشتن یک برنامه پشتیبان است. اگر اینترنت کند باشد یا API پایین باشد ، ما به جای خرابی ، یک پیام خطای دوستانه نشان می دهیم.

مرحله 3: آن را به برنامه خود اضافه کنید

بروزرسانی src/App.js:

import React from 'react';
import CryptoData from './CryptoData';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>CoinWatch Dashboard</h1>
        <CryptoData />
      </header>
    </div>
  );
}

export default App;

پرونده های خود را ذخیره کرده و مرورگر خود را بررسی کنید. شما باید داده های واقعی cryptocurrency را ببینید! 🎉

دست زدن به داده ها مانند یک حرفه ای

اکنون که می توانید داده ها را واکشی کنید ، بیایید آن را قدرتمندتر و کاربر پسند کنیم.

اضافه کردن عملکرد تازه کردن:

// Add this to your CryptoData component
const refreshData = () => {
  fetchCryptoData();
};

// Add this button in your return statement
<button onClick={refreshData} disabled={loading}>
  {loading ? 'Refreshing...' : 'Refresh Data'}
</button>

شماره های قالب بندی:

// Helper function to format large numbers
const formatNumber = (num) => {
  if (num >= 1e9) {
    return (num / 1e9).toFixed(2) + 'B';
  } else if (num >= 1e6) {
    return (num / 1e6).toFixed(2) + 'M';
  } else if (num >= 1e3) {
    return (num / 1e3).toFixed(2) + 'K';
  }
  return num.toFixed(2);
};

// Use it like this:
<p>Market Cap: ${formatNumber(coin.market_cap)}</p>

اضافه کردن مجدد خودکار:

useEffect(() => {
  fetchCryptoData();

  // Set up auto-refresh every 30 seconds
  const interval = setInterval(fetchCryptoData, 30000);

  // Cleanup function
  return () => clearInterval(interval);
}, []);

افزودن احراز هویت Firebase

وقت آن است که برنامه خود را ایمن کنید! ما احراز هویت کاربر را اضافه خواهیم کرد تا فقط کاربران ثبت نام شده بتوانند به داشبورد شما دسترسی پیدا کنند.

مرحله 1: تنظیمات Firebase

به کنسول Firebase بروید
یک پروژه جدید به نام “Coinwatch” ایجاد کنید
تأیید اعتبار → روش ورود به سیستم → ایمیل/رمز عبور

مرحله 2: پیکربندی Firebase

ایجاد کردن src/firebase.js:

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  // Your Firebase config object goes here
  // You'll get this from your Firebase project settings
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

مرحله 3: مؤلفه احراز هویت را ایجاد کنید

ایجاد کردن src/Auth.js:

import React, { useState } from 'react';
import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from 'firebase/auth';
import { auth } from './firebase';

function Auth({ onAuthSuccess }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isLogin, setIsLogin] = useState(true);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);

    try {
      if (isLogin) {
        await signInWithEmailAndPassword(auth, email, password);
      } else {
        await createUserWithEmailAndPassword(auth, email, password);
      }
      onAuthSuccess();
    } catch (error) {
      alert(error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ maxWidth: '400px', margin: '0 auto', padding: '20px' }}>
      <h2>{isLogin ? 'Login' : 'Sign Up'} to CoinWatch</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
          style={{ width: '100%', padding: '10px', margin: '10px 0' }}
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
          style={{ width: '100%', padding: '10px', margin: '10px 0' }}
        />
        <button 
          type="submit" 
          disabled={loading}
          style={{ width: '100%', padding: '10px', margin: '10px 0' }}
        >
          {loading ? 'Processing...' : (isLogin ? 'Login' : 'Sign Up')}
        </button>
      </form>
      <p>
        {isLogin ? "Don't have an account? " : "Already have an account? "}
        <button 
          type="button" 
          onClick={() => setIsLogin(!isLogin)}
          style={{ background: 'none', border: 'none', color: 'blue', cursor: 'pointer' }}
        >
          {isLogin ? 'Sign Up' : 'Login'}
        </button>
      </p>
    </div>
  );
}

export default Auth;

چرا تأیید اعتبار مهم است:

امنیت: برنامه خود را از دسترسی غیرمجاز محافظت می کند
شخصی سازی: هر کاربر می تواند تجربه خاص خود را داشته باشد
حفاظت داده ها: تنظیمات و تنظیمات خاص کاربر
استانداردهای حرفه ای: برنامه های واقعی همیشه احراز هویت دارند

ادغام جادوی AI با Google Gemini

حال بیایید برخی از ابرقدرت های هوش مصنوعی را به داشبورد خود اضافه کنیم! ما از Gemini AI Google برای ارائه بینش هوشمندانه در مورد روند cryptocurrency استفاده خواهیم کرد.

مرحله 1: کلید API Gemini را دریافت کنید

به استودیوی Google AI بروید
یک کلید API برای جمینی ایجاد کنید

مرحله 2: بسته Google AI را نصب کنید

npm install @google/generative-ai

مرحله 3: مؤلفه AI Insights را ایجاد کنید

ایجاد کردن src/AIInsights.js:

import React, { useState } from 'react';
import { GoogleGenerativeAI } from '@google/generative-ai';

function AIInsights({ cryptoData }) {
  const [insights, setInsights] = useState('');
  const [loading, setLoading] = useState(false);

  const generateInsights = async () => {
    setLoading(true);

    try {
      const genAI = new GoogleGenerativeAI('YOUR_GEMINI_API_KEY');
      const model = genAI.getGenerativeModel({ model: "gemini-pro" });

      // Create a prompt with current crypto data
      const topCoins = cryptoData.slice(0, 5).map(coin => 
        `${coin.name}: $${coin.current_price} (${coin.price_change_percentage_24h?.toFixed(2)}% change)`
      ).join(', ');

      const prompt = `Analyze these top 5 cryptocurrency prices and provide brief insights: ${topCoins}. Give market analysis and trends in 2-3 sentences.`;

      const result = await model.generateContent(prompt);
      const response = await result.response;
      setInsights(response.text());
    } catch (error) {
      setInsights('Unable to generate insights at the moment.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ margin: '20px 0', padding: '15px', backgroundColor: '#f5f5f5', borderRadius: '8px' }}>
      <h3>🤖 AI Market Insights</h3>
      <button onClick={generateInsights} disabled={loading || cryptoData.length === 0}>
        {loading ? 'Analyzing...' : 'Get AI Insights'}
      </button>
      {insights && (
        <div style={{ marginTop: '15px', padding: '10px', backgroundColor: 'white', borderRadius: '5px' }}>
          <p>{insights}</p>
        </div>
      )}
    </div>
  );
}

export default AIInsights;

سحر و جادو در پشت ادغام AI:

آگاهی از متن: AI داده های رمزنگاری فعلی شما را تجزیه و تحلیل می کند
بینش در زمان واقعی: تجزیه و تحلیل تازه بر اساس داده های بازار زنده
تجربه کاربر: ویژگی های حرفه ای و هوشمند را به برنامه شما اضافه می کند

طراحی منابع و الهام بخش

داشبورد شما باید به همان اندازه عملکرد شگفت انگیز به نظر برسد! در اینجا منابع خارق العاده ای برای الهام بخش طراحی وجود دارد:

inspection الهام بخش:

دریبل: “داشبورد رمزنگاری” را برای طرح های خیره کننده جستجو کنید
عود: طرح های داشبورد حرفه ای و طرح های رنگی
است ،: الگوها و اجزای داشبورد حق بیمه
جامعه انجیر: پرونده های طراحی داشبورد رایگان

ass دارایی های طراحی رایگان:

بی تظاهر کردن: تصاویر پس زمینه با کیفیت بالا
نمادهای پر: نمادهای مدرن برای رابط کاربری شما
قلم های گوگل: تایپوگرافی حرفه ای (سعی کنید Inter ، Roboto یا Poppins)
coolors.co: پالت های رنگی کامل ایجاد کنید

tips نکات طراحی داشبورد:

تمیز نگه دارید: فضای سفید دوست شماست
کارت استفاده کنید: اطلاعات مرتبط با گروه در طرح بندی کارت
برنامه نویسی رنگی: سبز برای سود ، قرمز برای ضرر
طراحی پاسخگو: آن را در دستگاه های تلفن همراه کار کنید
تجسم داده ها: اضافه کردن نمودارها با کتابخانه هایی مانند Chart.js

نکات توسعه محلی برای توسعه دهندگان Bamenda

کار از بامندا؟ در اینجا برخی از نکات حرفه ای برای اطمینان از توسعه صاف آورده شده است:

🌐 بهینه سازی اینترنت:

ذخیره سازی API: برای کاهش تماس های API ، حافظه پنهان محلی را اجرا کنید
حالت آفلاین: برای عملکرد آفلاین کارگران سرویس را اضافه کنید
درخواست های دسته ای: در صورت امکان چندین تماس API را با هم ترکیب کنید
رسیدگی به خطا: رسیدگی به خطای قوی برای مشکلات اتصال

⚡ نکات عملکرد:

// Cache API responses
const CACHE_DURATION = 30000; // 30 seconds
let cachedData = null;
let lastFetch = 0;

const fetchWithCache = async () => {
  const now = Date.now();
  if (cachedData && (now - lastFetch) < CACHE_DURATION) {
    return cachedData;
  }

  const response = await axios.get(API_URL);
  cachedData = response.data;
  lastFetch = now;
  return cachedData;
};

🔧 محیط توسعه:

استفاده کردن مرکز محلی برای توسعه (به صورت آفلاین کار می کند)
آزمون با شرایط آهسته شبکه در ابزارهای مرورگر DEV
اجرا حالت های بارگیری برای تجربه بهتر کاربر
اضافه کردن مکانیسم های امتحان کردن برای درخواست های ناموفق

ماموریت شما: ساخت داشبورد Coinwatch

تبریک می گویم ، توسعه دهنده! شما اکنون تمام ابزارها و دانش را برای ساختن یک داشبورد Cryptocurrency باورنکردنی دارید. این مأموریت شماست:

requirements الزامات اصلی:

داده های رمزنگاری در زمان واقعی از API Coingecko
احراز هویت کاربر با پایگاه آتش
بینش های هوش مصنوعی با استفاده از Google Gemini
طراحی حرفه ای این هر کارفرما را تحت تأثیر قرار می دهد
طرح پاسخگو که روی همه دستگاه ها کار می کند

🚀 اهداف کشش (برای جاه طلب):

عملکرد سکه های مورد علاقه را اضافه کنید
هشدارهای قیمت را پیاده سازی کنید
ردیابی نمونه کارها را ایجاد کنید
ضامن حالت تیره/نور را اضافه کنید
شامل ادغام اخبار بازار

💪 رویکرد توسعه:

ساده شروع کنید: ابتدا داده های اساسی را دریافت کنید
به تدریج ویژگی ها را اضافه کنید: سعی نکنید همه چیز را یکباره بسازید
به طور مکرر آزمون: مطمئن شوید که هر ویژگی قبل از حرکت کار می کند
درخواست کمک کنید: به جوامع توسعه دهنده بپیوندید ، سؤال کنید
برنده ها را جشن بگیرید: هر پیروزی کوچک پیشرفت است!

🌟 به یاد داشته باشید:

هر متخصص زمانی مبتدی بود
به معنای بازنویسی و بهبود یافته است
بهترین راه برای یادگیری ساخت و ساز است
نسخه اول شما نیازی به کامل بودن ندارد
هر اشکالی که برطرف می کنید ، شما را به یک توسعه دهنده بهتر تبدیل می کند

سخنان پایانی تشویق

شما فقط در حال ساختن داشبورد نیستید – شما آینده خود را به عنوان یک توسعه دهنده می سازید! هر خط کدی که می نویسید ، هر اشکالی که حل می کنید و هر ویژگی ای که اجرا می کنید باعث قوی تر ، باهوش تر و تواناتر می شود.

مهارتهایی که امروزه می آموزید – ادغام API ، احراز هویت ، اجرای هوش مصنوعی و توسعه React مدرن – دقیقاً همان چیزی است که شرکت های برتر به دنبال آن هستند. شما فقط یک آموزش را دنبال نمی کنید. شما در حال تسلط بر فن آوری های استاندارد صنعت هستید که در کل حرفه شما به شما خدمت می کنند.

از همه ما برای موفقیت شما پیش بینی می کنیم: شما این را گرفتید! 🚀

حالا برو چیزی شگفت انگیز بساز دنیای رمزنگاری منتظر داشبورد Coinwatch شما است!

برنامه نویسی مبارک ، توسعه دهنده تمام پشته آینده! 🎉