بسم الله الرحمن الرحيم
اللهم صلِّ وسلم وبارك على سيدنا محمد
مرحباً بزوار ومتابعي بلوجر فيومي!
: كيفية إنشاء شات بوت يحل المسائل الحسابية
في الدرس ده هنتعلم إزاي نعمل شات بوت بسيط يقوم بحل المسائل الحسابية. الشات بوت ده هيساعدنا في حل العمليات الرياضية بشكل سهل وسريع.
1. إزاي نبدأ
أول حاجة، هنحتاج نستخدم JavaScript لإجراء العمليات الحسابية. هنستخدم مكتبة eval() لحساب التعبيرات الرياضية بطريقة سهلة.
2. الكود الأساسي
هنبدأ بكتابة HTML لتصميم واجهة الشات بوت. شوف الكود ده:
<div id="chatbox"> <div id="output"></div> <input type="text" id="userInput" placeholder="اكتب المسألة الحسابية هنا..."> <button id="sendBtn">أرسل</button> </div>
3. حل المسائل الحسابية
بعد ما نعمل واجهة المستخدم، هنكتب كود JavaScript لحل المسائل الحسابية. شوف الكود التالي:
document.getElementById("sendBtn").addEventListener("click", function() { var userInput = document.getElementById("userInput").value; try { var result = eval(userInput); var output = document.getElementById("output"); output.innerHTML += "<p><strong>النتيجة:</strong> " + result + "</p>"; } catch (error) { var output = document.getElementById("output"); output.innerHTML += "<p style='color: red;'><strong>خطأ:</strong> " + error.message + "</p>"; } });
4. شرح الكود
- أول حاجة بنضيف Event Listener على الزرار بتاع الإرسال. - بعد كده بنستخدم دالة eval() لحساب المسألة الحسابية المكتوبة في مربع الإدخال. - لو حصل خطأ في الحساب، هنستخدم try-catch لعرض رسالة الخطأ للمستخدم.
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. الخاتمة
دلوقتي، مع الشات بوت اللي عملناه، تقدر تحل المسائل الحسابية بسهولة. الشات بوت ده ممكن يكون نقطة انطلاق لمشاريع أكبر وأفضل.
في الدرس الجاي، هنتعلم مواضيع جديدة ومفيدة. تابعونا علشان تتعرفوا على المزيد!