برنامه نویسی

ساختن یک تولید کننده نقل قول تصادفی: راهنمای گام به گام با کد

ایجاد یک برنامه تولید نقل قول تصادفی یک راه عالی برای یادگیری کدنویسی با ساختن چیزی عملی است. این راهنما مراحلی را که برای ایجاد برنامه دنبال کردم، از جمله تکه‌های کد دقیق برای کمک به مبتدیان برای درک فرآیند در سطح کد توضیح می‌دهد.


بررسی اجمالی پروژه

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


مرحله 1: تنظیم ساختار HTML

اولین مرحله ایجاد طرح بندی HTML برای برنامه است. در اینجا ساختار اصلی آمده است:


 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>Random Quotes Generator<span class="nt"/>
    <span class="nt"><link/> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"styles.css"</span><span class="nt">></span>    
<span class="nt"/>
<span class="nt"/>
    <span class="nt"><div> <span class="na">class=</span><span class="s">"quote-generator"</span><span class="nt">></span>
        <span class="nt"/>
        <span class="nt"><p> <span class="na">class=</span><span class="s">"subheading"</span><span class="nt">></span>"Randomness is not the absence of order, but the presence of possibilities."<span class="nt"/></p></span>
        <span class="nt"><p> <span class="na">class=</span><span class="s">"quotebox"</span><span class="nt">></span>
            <span class="nt"><h2><span class="ez-toc-section" id="class%22quote%22%3EQuote_will_appear_here"></span> <span class="na">class=</span><span class="s">"quote"</span><span class="nt">></span>Quote will appear here<span class="nt"/><span class="ez-toc-section-end"></span></h2></span>
            <span class="nt"><h3><span class="ez-toc-section" id="class%22author%22%3EAuthor_unknown"></span> <span class="na">class=</span><span class="s">"author"</span><span class="nt">></span>Author unknown<span class="nt"/><span class="ez-toc-section-end"></span></h3></span>
        <span class="nt"/></p></span>
        <span class="nt"><p>
            <span class="nt"><button> <span class="na">class=</span><span class="s">"quote-button"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">onclick=</span><span class="s">"generateQuote()"</span><span class="nt">></span>New Quote<span class="nt"/></button></span>
        <span class="nt"/></p></span>
        <span class="nt"><div>
            <span class="nt"><p> <span class="na">class=</span><span class="s">"copyquote"</span> <span class="na">onclick=</span><span class="s">"copyQuote()"</span><span class="nt">><img/> <span class="na">src=</span><span class="s">"images/copy.png"</span> <span class="na">class=</span><span class="s">"icon-style"</span> <span class="na">alt=</span><span class="s">"Copy Icon"</span><span class="nt">></span></span></p></span>            
            <span class="nt"><p> <span class="na">class=</span><span class="s">"sharequote"</span> <span class="na">onclick=</span><span class="s">"shareQuote()"</span><span class="nt">><img/> <span class="na">src=</span><span class="s">"images/share.png"</span> <span class="na">class=</span><span class="s">"icon-style"</span> <span class="na">alt=</span><span class="s">"Share Icon"</span><span class="nt">></span></span></p></span>
        <span class="nt"/></div></span>        
    <span class="nt"/></div></span>    
    <span class="nt"><script><![CDATA[<span class="na">src=]]></script></span><span class="s">"./src/app/index.js"</span><span class="nt">></span>
    <span class="nt"><script><![CDATA[<span class="na">src=]]></script></span><span class="s">"./src/app/copyQuote.js"</span><span class="nt">></span>
    <span class="nt"><script><![CDATA[<span class="na">src=]]></script></span><span class="s">"./src/app/shareQuote.js"</span><span class="nt">></span>
<span class="nt"/>
<span class="nt"><footer/></span>
    <span class="nt"/>
<span class="nt"/>
<span class="nt"/>
</span></span></span></span></code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>وارد حالت تمام صفحه شوید
    

از حالت تمام صفحه خارج شوید

این کد ساختار برنامه را تعریف می کند، از جمله عناصری برای نمایش نقل قول، دکمه هایی برای واکشی نقل قول های جدید، و نمادهایی برای عملکرد کپی و اشتراک گذاری.


مرحله 2: رسیدگی به مشکلات CORS با یک سرور پراکسی

برای واکشی نقل قول از یک API خارجی، باید CORS (اشتراک گذاری منابع متقابل) را مدیریت کنید. ما این را با استفاده از یک ساده به دست می آوریم Express.js سرور پروکسی

proxy.js:

const express = require("express");
const fetch = require("node-fetch");
const cors = require("cors");
const app = express();

// Enable CORS
app.use(cors());

// Define a route for proxying API requests
app.get("/api/quote", async (req, res) => {
    try {
        const response = await fetch("https://qapi.vercel.app/api/random");
        const data = await response.json();
        res.json(data);
    } catch (error) {
        res.status(500).json({ error: "Failed to fetch data from API" });
    }
});

const PORT = 4000;
app.listen(PORT, () => console.log(`Proxy server running on http://localhost:${PORT}`));
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این به عنوان یک پروکسی محلی برای واکشی نقل قول ها از API و دور زدن محدودیت های CORS عمل می کند.


مرحله 3: واکشی نقل قول با جاوا اسکریپت

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

index.js:

const quote = document.querySelector(".quote");
const author = document.querySelector(".author");

async function generateQuote() {
    const url = 'http://localhost:4000/api/quote';

    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const result = await response.json();
        quote.textContent = result.quote || "No quote available.";
        author.textContent = result.author || "Author Unknown";
    } catch (error) {
        console.error("Error fetching quote:", error);
        quote.textContent = "Failed to fetch quote. Try again later.";
    }
}
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این اسکریپت داده ها را از سرور پراکسی واکشی می کند و رابط کاربری برنامه را با نقل قول و نویسنده واکشی شده به روز می کند.


مرحله 4: افزودن ویژگی کپی

برای اینکه کاربران بتوانند نقل قول ها را کپی کنند، از Clipboard API.

copyQuote.js:

async function copyQuote() {
    try {
        let quote = document.querySelector(".quote").textContent;
        let author = document.querySelector(".author").textContent;

        await navigator.clipboard.writeText(`${quote} - ${author}`);
        alert("Content copied to clipboard");
    } catch (error) {
        console.error('Failed to copy:', error);
    }
}
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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


مرحله 5: افزودن ویژگی اشتراک گذاری

را Navigator API به کاربران اجازه می دهد تا نقل قول ها را در واتس اپ به اشتراک بگذارند.

shareQuote.js:

async function shareQuote() {
    let quote = document.querySelector(".quote").textContent;
    let author = document.querySelector(".author").textContent;

    const quoteContent = `${quote} - ${author}`;
    const message = encodeURIComponent(quoteContent);

    if (window.screen.width < 768 || navigator.userAgent.match(/Android|iOS/)) {
        window.open(`whatsapp://send?text=${message}`, '_blank');
    } else {
        window.open(`https://web.whatsapp.com/send?text=${message}`, '_blank');
    }
}
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این اسکریپت قابلیت اشتراک گذاری را برای دستگاه های موبایل و دسکتاپ تطبیق می دهد.


مرحله 6: استایل دادن به برنامه

با استفاده از CSS، برنامه را طوری طراحی کردم که از نظر بصری جذاب و پاسخگو باشد. جنبه های کلیدی شامل مرکزیت عناصر و طراحی برای اندازه های مختلف صفحه نمایش است.

html, body {
    background: rgb(171,129,205);
    background: linear-gradient(0deg, rgba(171,129,205,1) 0%, rgba(34,42,104,1) 100%);         
    margin: 0;
    padding: 0;
    height: 100%;    
}

main {
    flex: 1; /* Fills available space */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.title, .subheading {
    align-items: center;
    text-align: center;
    color: #fafffd
}

.subheading {
    align-items: center;
    text-align: center;
    color: #fa824c
}

p {
    text-align: center; 

}

.quote-generator, .quote-box, .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 100 auto;
    margin-top: 50px;
}

.quotebox   {
    width: 300px auto;    
    height: 200px auto;    
    margin-top: 100px;
    padding: 10px;
    border: 2px solid #9fd356;
    overflow: auto;
    border-radius: 20px;    
}

.quote  {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 100 auto;
    color: #fafffd;        
}

.quote-button {
    padding: 15px;
    margin: 15px;
    border-radius: 5px;
    background-color: #e2adf2;
    color: black;
    font-size: larger;    
}

.copyquote, .sharequote {
    display: flex;
}

.author {
    color: #9fd356;;    
}

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    height: 200px;
    margin: 200px;    
}

.footer-left {
    font-size: 20px;    
    float: center;    
}



.footer-right {
  margin-top:20px;
  float:center;  
}

a.menu:hover {
    border-radius: 2px;
    font-size: 20px;    
}

.icon-style {
    height:60px;
    margin-left:20px;
    margin-top:5px;
}

.icon-style:hover {
    background-color: #ab81cd;
    padding:5px;
    border-radius: 15px;
    transition: 0.5s;
    transition-duration: 0.25s;
    color: azure;
}
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید


مرحله 7: برنامه را اجرا کنید

برنامه را می توان از روی کد مثال ساخت. متناوبا، مراحل بعدی ممکن است برای تلاش برای برنامه دنبال شود.

برای راه اندازی و استفاده از برنامه، مراحل زیر را دنبال کنید:

  1. کلون کردن مخزن:
   git clone https://github.com/yourusername/random-quotes-generator.git
   cd random-quotes-generator
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

  1. نصب Dependencies:
    مطمئن شوید که Node.js را روی سیستم خود نصب کرده اید. سپس اجرا کنید:
   npm install
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

  1. سرور پروکسی را راه اندازی کنید:
    دستور زیر را برای راه اندازی سرور پراکسی اجرا کنید:
   node proxy.js
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سرور پروکسی روشن خواهد شد http://localhost:4000.

  1. برنامه را باز کنید:
    را باز کنید index.html برای تعامل با برنامه در مرورگر خود فایل کنید. از دکمه “نقل قول جدید” برای واکشی نقل قول ها استفاده کنید، آنها را با استفاده از نماد کپی کپی کنید، یا آنها را از طریق واتس اپ با استفاده از نماد اشتراک گذاری به اشتراک بگذارید.

ساختار پروژه:

index.html: رابط کاربری اصلی برنامه.
proxy.js: سرور پروکسی برای رسیدگی به مشکلات CORS.
copyQuote.js: کپی نقل قول ها را در کلیپ بورد کنترل می کند.
shareQuote.js: به اشتراک گذاری نقل قول از طریق واتس اپ رسیدگی می کند.
index.js: عملکرد اصلی برای واکشی و نمایش نقل قول.


اعتبار API:

نقل قول های ارائه شده توسط Quotes API.


نتیجه گیری

این راهنما نشان می دهد که چگونه یک برنامه تولید کننده نقل قول تصادفی بسازید که مراحل ضروری مانند واکشی داده های API، مدیریت CORS و پیاده سازی ویژگی های کپی و اشتراک گذاری را پوشش می دهد. می تواند کمک کند:

  • ادغام API و مسائل CORS را درک کنید.
  • APIهای مرورگر مانند Clipboard و Navigator را کاوش کنید.
  • اصول جاوا اسکریپت را تمرین کنید.

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

گیت هاب | لینکدین | X

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا