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

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

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

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

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

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

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. الخاتمة

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

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