كيفية إنشاء شات بوت يجلب الرد من ويكيبيديا

احمد محمود
Estimated read time: 2 min

بسم الله الرحمن الرحيم

اللهم صلِّ وسلم وبارك على سيدنا محمد

مرحباً بزوار ومتابعي بلوجر فيومي!

: كيفية إنشاء شات بوت يجلب الرد من ويكيبيديا

في الدرس ده هنتعلم إزاي نعمل شات بوت بسيط يجيب معلومات من ويكيبيديا. الشات بوت ده هيكون مفيد جدًا في تفاعل المستخدمين مع المحتوى.



1. إزاي نبدأ

أول حاجة، هنحتاج نستخدم JavaScript لجلب البيانات من ويكيبيديا. هنستخدم مكتبة Fetch API لجلب البيانات بطريقة سهلة.

2. الكود الأساسي

هنبدأ بكتابة HTML لتصميم واجهة الشات بوت. شوف الكود ده:

شاهد أيضاً :-
تصميم واجهة الشات بوت
    <div id="chatbox">

    <div id="output"></div>

    <input id="userInput" placeholder="اكتب سؤالك هنا..." type="text" />

    <button id="sendBtn">أرسل</button>

</div>

    

3. جلب البيانات من ويكيبيديا

بعد ما نعمل واجهة المستخدم، هنكتب كود JavaScript لجلب البيانات من ويكيبيديا. شوف الكود التالي:

كود جافا سكربت لجلب البيانات من ويكيبيديا
document.getElementById("sendBtn").addEventListener("click", function() {

    var userInput = document.getElementById("userInput").value;

    fetch(`https://ar.wikipedia.org/w/api.php?action=query&list=search&srsearch=${userInput}&utf8=&format=json&origin=*`)

        .then(response => response.json())

        .then(data => {

            var output = document.getElementById("output");

            output.innerHTML += "

رد البوت: " + data.query.search[0].snippet + "

"; }) .catch(error => { console.error('Error:', error); }); });

4. شرح الكود

- أول حاجة بنضيف Event Listener على الزرار بتاع الإرسال. - بعد كده بنستخدم دالة fetch لجلب البيانات من API بتاع ويكيبيديا. - بنمرر في الطلب الكلمة اللي كتبها المستخدم في مربع الإدخال. - بعد ما نجيب البيانات، بنعرض أول رد في واجهة الشات.

5. تحسين تجربة المستخدم

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

تحسين تنسيق الشات بوت
#chatbox {

    width: 300px;

    border: 1px solid #ccc;

    padding: 10px;

    background-color: #f9f9f9;

}

#output {

    height: 200px;

    overflow-y: scroll;

    margin-bottom: 10px;

}

input[type="text"] {

    width: 70%;

    padding: 5px;

}

button {

    padding: 5px 10px;

}

    

6. الخاتمة

دلوقتي، مع الشات بوت اللي عملناه، تقدر تجيب معلومات من ويكيبيديا بسهولة. الشات بوت ده ممكن يكون نقطة انطلاق لمشاريع أكبر وأفضل.

في الدرس الجاي، هنتعلم مواضيع جديدة ومفيدة. تابعونا علشان تتعرفوا على المزيد!

إرسال تعليق

Cookie Consent
تعريف الارتباط

نستخدم ملفات تعريف الارتباط لضمان حصولك على أفضل تجربة.

Oops!
يبدو أن هناك مشكلة في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت والمحاولة مرة أخرى.
AdBlock Detected!
لقد اكتشفنا أنك تستخدم إضافة حظر الإعلانات في متصفحك.
يتم استخدام الإيرادات التي نحصل عليها من الإعلانات لإدارة هذا الموقع، لذا نرجو منك إضافة موقعنا إلى القائمة البيضاء في إضافة حظر الإعلانات الخاصة بك.
Site is Blocked
Sorry! This site is not available in your country.