ابدأ ببناء تطبيقك الرسومي الأول في Python باستخدام مكتبة Tkinter

الانتقال من كتابة الأكواد النصية إلى إنشاء واجهات رسومية تفاعلية يُعد خطوة مثيرة لكل من يتعلم لغة Python. فبدلًا من تشغيل البرامج داخل نافذة سطر الأوامر، يمكنك تصميم تطبيقات تحتوي على أزرار ونوافذ وقوائم، تجعل تجربتك البرمجية أكثر واقعية وقابلية للاستخدام.

مكتبة Tkinter تُعتبر الخيار المثالي للمبتدئين لبدء هذه الرحلة، فهي تأتي مدمجة مع لغة Python، ولا تحتاج إلى تثبيت إضافي. كما توفر أدوات قوية لبناء واجهات بسيطة وسريعة دون تعقيد.

من خلال هذا الدليل العملي، ستتعرف على طريقة إنشاء تطبيق رسومي خطوة بخطوة، بدءًا من إعداد بيئة العمل، وصولًا إلى كتابة الكود وتشغيل أول نافذة تفاعلية لك، مع نصائح عملية لتطوير مهاراتك لاحقًا في تصميم واجهات أكثر احترافية.

إنشاء مشاريع البرمجة أمر رائع. ولكن إذا كانت تحتوي على واجهة رسومية؟ بل أفضل! بناء تطبيقات بواجهة رسومية له مزايا عديدة. ستحصل في النهاية على شيء يُقدّره حتى غير المتخصصين في التقنية. لهذا السبب سنُنشئ تطبيقًا بواجهة رسومية بلغة بايثون، وسنتعلم مكتبة Tkinter في هذه العملية.

ما نُنشئه

في هذا البرنامج التعليمي، قررتُ إنشاء تطبيق لقائمة مهام. إنه مشروع كلاسيكي ليس صعبًا للغاية، وفي الوقت نفسه، يُعلّم العديد من مفاهيم البرمجة. علاوة على ذلك، إذا أعجبك المنتج النهائي، يمكنك استخدامه بنفسك.

يتوفر تطبيق قائمة مهام بايثون بإصدار وحدة تحكم. يغطي هذا الإصدار العديد من الأساسيات المفيدة. لذا، أنصحك بالاطلاع عليه أولًا لأنه سيساعدك على فهم هذا الدليل بشكل أفضل. مع ذلك، ليس هذا ضروريًا تمامًا، لأنني سأشرح لك الكود وأشرح ما يحدث، حتى تتمكن من فهم ما يحدث دون الحاجة إلى معرفة مسبقة.

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

إعداد Tkinter

ميزة Tkinter هي أنه يأتي مُدمجًا مع تثبيت بايثون. لذا، لا حاجة لتثبيت أي شيء. لنتحقق من ذلك باستيراد وحدة tkinter والتحقق من إصدارها.

import tkinter as tk
print(tk.TkVersion)

يجب أن تحصل على رقم الإصدار على وحدة التحكم لديك. بالنسبة لي، هو 8.6. إذا ظهر لك خطأ، فهذا يعني أن تثبيت بايثون لديك قد لا يحتوي عليه. قد تحتاج إلى إعادة تثبيت بايثون، أو على لينكس، ثبّت الحزمة المناسبة لـ tkinter وفقًا لتوزيعتك.

إنشاء النافذة الرئيسية

إذا نجحت معك، فلنبدأ الآن بإنشاء النافذة الرئيسية. سنضبط حجم النافذة وعنوانها المناسبين.

import tkinter as tk

# Create the main application window
root = tk.Tk()
root.title("To-Do List App")
root.geometry("400x500")

# Prevent window from being resized
root.resizable(False, False)

# Start the event loop
root.mainloop()

ماذا فعلنا؟

• استوردنا Tkinter وأطلقنا عليه اسمًا مستعارًا tk لتسهيل الأمر.
• root = tk.Tk() يُنشئ نافذة التطبيق الرئيسية.
• نُعيّن عنوان النافذة باستخدام root.title().
• root.geometry(“400×500”) يُعيّن حجم النافذة.
• root.resizable(False, False) يمنع المستخدمين من تغيير حجم النافذة. يتحكم المعامل الأول في تغيير الحجم أفقيًا، بينما يتحكم المعامل الثاني في تغيير الحجم عموديًا.
• أخيرًا، تُشغّل root.mainloop() حلقة الحدث. هذا أمر بالغ الأهمية! بدونها، ستظهر نافذتك وتُغلق فورًا.

عند تشغيل هذا الكود، سترى نافذة فارغة بعنوان “تطبيق قائمة المهام”. إنها فارغة حاليًا، ولكن في الخطوة التالية، سنبدأ في ملئها بالأدوات.

إضافة الأدوات اللازمة

يحتاج تطبيق قائمة المهام إلى العديد من الأدوات: حقل إدخال، وأزرار لإدارة المهام، وحقل لعرضها. لنبدأ بإضافتها. اكتب هذه الأسطر بعد سطر root.resizable(False, False).

task_entry = tk.Entry(root, width=35, font=("Arial", 12))
task_entry.pack(pady=10)

نُنشئ أداة إدخال لإدخالات نصية بسطر واحد. نُحدد عرضها وخطها ونضيف بعض الحشو العمودي. ثم نضيف زرًا.

add_button = tk.Button(root, text="Add Task", width=20, font=("Arial", 10))
add_button.pack(pady=5)

مرة أخرى، نحدد عرضًا ونوع خطًا وحشوًا رأسيًا وعلامة نصية. سيعمل هذا الزر كزر لإضافة المهام. بعد ذلك، ننشئ قائمة لعرض المهام.

task_listbox = tk.Listbox(root, width=50, height=15, font=("Arial", 10))
task_listbox.pack(pady=10)

كما هو الحال مع الأدوات السابقة، نوفر لها بعض الخصائص، بما في ذلك ارتفاعها. نستخدم مدير هندسة pack() لتحديد موضع الأدوات حسب ترتيب إضافتها. يوفر Tkinter أيضًا grid() لتحكم أدق. في هذا الدرس، سنلتزم باستخدام pack() لأنها أسهل للمبتدئين.

عند تشغيل هذا الكود، سترى حقل نص فارغًا في الأعلى، وزر “إضافة مهمة” أسفله، وقائمة كبيرة فارغة في الأسفل.

يبدو الآن أشبه بتطبيق مهام.

معالجة الأحداث

حاليًا، يحتوي تطبيقنا على واجهة مستخدم فقط، ولا توجد أي وظائف. لنجعل تطبيقنا تفاعليًا. سننشئ دالة لإضافة المهام إلى مربع القائمة. أضف هذا المقطع البرمجي بعد سطر root.resizable(False, False).

def add_task():
   task = task_entry.get()
   if task:
       task_listbox.insert(tk.END, task)
       task_entry.delete(0, tk.END)
   else:
       print("Please enter a task!")

أولاً، نجلب النص من حقل الإدخال. ثم نتحقق مما إذا كان الحقل فارغًا أم لا باستخدام شرط. إذا لم يكن فارغًا، ندرج النص، وهو المهمة، في مربع القائمة ونمسح حقل الإدخال. وإلا، نطبع رسالة بسيطة إلى وحدة التحكم تفيد بعدم إدخال أي مهمة. الخطوة التالية هي ربط هذا بالزر.

add_button = tk.Button(root, text="Add Task", width=20, font=("Arial", 10), command=add_task)

نُمرّر مُعاملًا جديدًا، وهو دالة add_task(). يُوجّه هذا الزر لاستدعاء الدالة عند النقر عليها. لاحظ أننا لا نستخدم الأقواس عند تمرير المُعامل.

لنُجرّب هذا. اكتب شيئًا في حقل الإدخال، ثم انقر على زر “إضافة مهمة” لمعرفة ما إذا كانت المهمة قد أُضيفت أم لا. ثم جرّب إضافة مهمة بينما حقل الإدخال فارغ.

رائع. يعمل كما هو متوقع. يمكنك الآن إضافة مهام.

نعمل على واجهة المستخدم

لنُضيف المزيد من الوظائف لجعل تطبيق قائمة المهام مفيدًا للغاية. سنضيف إمكانية حذف المهام، ومسحها جميعًا، ووضع علامة على اكتمالها. لنُضيف دالة لحذف المهام. أضف هذا الكود بعد دالة add_task().

def delete_task():
   try:
       selected_index = task_listbox.curselection()[0]
       task_listbox.delete(selected_index)
   except IndexError:
       print("Please select a task to delete!")

هنا، تحصل الدالة curselection()[0] على العنصر المحدد الأول (والوحيد) من مجموعة مؤشرات العناصر المحددة. ثم نحذف العنصر عند هذا المؤشر. نستخدم أيضًا try/except لمعالجة الأخطاء بشكل أفضل. بعد ذلك، نضيف دالة لمسح جميع المهام في القائمة.

def clear_all_tasks():
   task_listbox.delete(0, tk.END)

هذه الدالة تحذف جميع المهام من البداية إلى النهاية. الآن، لنُضيف دالة تُعلّم المهمة بأنها مكتملة.

def mark_complete():
   try:
       selected_index = task_listbox.curselection()[0]
       task = task_listbox.get(selected_index)
       
       # Check if task is already marked complete
       if not task.startswith("✓ "):
           # Mark as complete with checkmark
           task_listbox.delete(selected_index)
           task_listbox.insert(selected_index, "✓ " + task)
           task_listbox.itemconfig(selected_index, fg="gray")
   except IndexError:
       print("Please select a task to mark as complete!")

هناك الكثير مما يحدث هنا. أولًا، نستعيد المهمة المحددة، تمامًا كما فعلنا سابقًا للحذف. ثم نستخدم الشرطيات للتحقق مما إذا كان نص المهمة يلبي شرطًا محددًا. أي، إذا بدأ بعلامة صح ✓ متبوعة بمسافة.

إذا لم يبدأ، فهذا يعني أنه لم يكتمل. نحذف المهمة من القائمة ونعيد إدراجها مع علامة صح ومسافة. ولتوضيح الصورة، نجعل لون مقدمتها رماديًا. إذا لم يتم تحديد أي مهمة، نطبع رسالة مساعدة. نظرًا لعدم وجود خيار تحرير مباشر، نحذف المهمة أولًا ونعيد إدراجها في نفس الموضع مع العلامة.

ما زلنا بحاجة إلى ربط هذه الوظائف ببعض الأزرار. أولًا، لننشئ إطارًا نضع فيه الأزرار الجديدة. أضف هذا الإطار قبل root.mainloop() مباشرةً.

button_frame = tk.Frame(root)
button_frame.pack(pady=10)

الإطار عبارة عن أداة حاوية تجمع أدوات أخرى معًا. داخل هذا الإطار، نضع ثلاثة أزرار جديدة: زر حذف، وزر مسح، وزر تحديد كمكتمل.

mark_button = tk.Button(button_frame, text="Mark Complete", width=15, 
                       font=("Arial", 10), command=mark_complete)
mark_button.grid(row=0, column=0, padx=5)

delete_button = tk.Button(button_frame, text="Delete Task", width=15, 
                         font=("Arial", 10), command=delete_task)
delete_button.grid(row=0, column=1, padx=5)

clear_button = tk.Button(button_frame, text="Clear All", width=15, 
                        font=("Arial", 10), command=clear_all_tasks)
clear_button.grid(row=0, column=2, padx=5)

على عكس ما سبق، استخدمنا هنا الدالة grid(). تُمكّننا هذه الدالة من محاذاة الأزرار أفقيًا بدقة. تُحدد معلمات الصفوف والأعمدة مكان وضع الأداة داخل تخطيط الشبكة. كما أضفنا بعض التبطين الأفقي لكل زر ووظيفته.

الآن يعمل تطبيقنا كتطبيق مهام حقيقي.

بعض اللمسات الأخيرة

يعمل التطبيق جيدًا، لكنه يبدو باهتًا بعض الشيء. لنُجمّله ليبدو أكثر احترافية. أضف هذا السطر بعد سطر root.resizable(False, False).

root.config(bg="#f0f0f0") # Light gray background

يُضفي خلفية رمادية فاتحة جميلة للنافذة بأكملها. الآن، لنُنشئ قسمًا للرأس. أضف هذا الكود بعد دالة mark_complete().

header_frame = tk.Frame(root, bg="#4a7c9e")
header_frame.pack(fill=tk.X)

header_label = tk.Label(header_frame, text="📝 My To-Do List", 
                       font=("Arial", 18, "bold"), 
                       bg="#4a7c9e", fg="white")
header_label.pack(pady=15)

باستخدام fill=tk.X، نجعل الإطار يمتد أفقيًا عبر النافذة. أضفنا أداة تسمية مع بعض الخصائص. الآن، لنبدأ بقسم الإدخال.

input_frame = tk.Frame(root, bg="#f0f0f0")
input_frame.pack(pady=20)

task_entry = tk.Entry(input_frame, width=35, font=("Arial", 13), 
                     bd=2, relief=tk.GROOVE)
task_entry.pack(side=tk.LEFT, padx=10, ipady=5)
task_entry.bind('<Return>', lambda event: add_task())

add_button = tk.Button(input_frame, text="Add Task", width=12, 
                      font=("Arial", 11, "bold"),
                      bg="#5cb85c", fg="white", 
                      activebackground="#4cae4c",
                      bd=0, cursor="hand2",
                      command=add_task)
add_button.pack(side=tk.LEFT)

أضفنا إطارًا لحقل الإدخال وأضفنا عليه تأثير GROOVE. كما أضفنا بعض التصميم للزر. والآن، قسم القائمة.

list_frame = tk.Frame(root, bg="#f0f0f0")
list_frame.pack(pady=10, padx=20)

scrollbar = tk.Scrollbar(list_frame, orient=tk.VERTICAL)

task_listbox = tk.Listbox(list_frame, width=55, height=14, 
                         font=("Arial", 11),
                         bd=2, relief=tk.SUNKEN,
                         selectmode=tk.SINGLE,
                         activestyle='none',
                         bg="white",
                         selectbackground="#d4e6f1",
                         selectforeground="black",
                         yscrollcommand=scrollbar.set)
scrollbar.config(command=task_listbox.yview)

task_listbox.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
scrollbar.pack(side=tk.RIGHT, fill=tk.Y)

في إطار القائمة، لدينا أداة شريط تمرير جديدة. إذا كَبُر حجم القائمة، فسيتم تمريرها عموديًا. أضفنا أيضًا بعض الخصائص إلى أداة القائمة، حيث قمنا بضبط ألوانها، ونمط حدودها، وسلوك التمرير. الآن، لنبدأ العمل على الأزرار المتبقية.

button_frame = tk.Frame(root, bg="#f0f0f0")
button_frame.pack(pady=20)

mark_button = tk.Button(button_frame, text="✓ Mark Complete", width=15, 
                       font=("Arial", 10, "bold"),
                       bg="#5bc0de", fg="white",
                       activebackground="#46b8da",
                       bd=0, cursor="hand2",
                       command=mark_complete)
mark_button.grid(row=0, column=0, padx=8)

delete_button = tk.Button(button_frame, text="✕ Delete Task", width=15, 
                         font=("Arial", 10, "bold"),
                         bg="#d9534f", fg="white",
                         activebackground="#c9302c",
                         bd=0, cursor="hand2",
                         command=delete_task)
delete_button.grid(row=0, column=1, padx=8)

clear_button = tk.Button(button_frame, text="Clear All", width=15, 
                        font=("Arial", 10, "bold"),
                        bg="#f0ad4e", fg="white",
                        activebackground="#ec971f",
                        bd=0, cursor="hand2",
                        command=clear_all_tasks)
clear_button.grid(row=0, column=2, padx=8)

نستخدم ألوانًا وأنماطًا أخرى تتناسب مع وظيفة كل زر لإبرازه بصريًا. وأخيرًا، لنُضيف قسم تذييل.

footer_label = tk.Label(root, text="Select a task and use buttons to manage it", 
                       font=("Arial", 9, "italic"),
                       bg="#f0f0f0", fg="#666666")
footer_label.pack(side=tk.BOTTOM, pady=10)

استخدمنا هنا أداة “التسميات” كقسم نصي. عند تشغيل الإصدار الحالي، سيظهر لك تطبيق مهام أنيق المظهر.

تبدو الواجهة الآن أكثر أناقة واحترافية. يتوفر الكود الكامل على مستودع GitHub الخاص بي لراحتك، فلا تتردد في الاطلاع عليه.

يمكنك إضافة المزيد إلى التطبيق الحالي، مثل عمليات الملفات، ومربعات حوار الرسائل، ودمج قواعد البيانات، وغيرها. إذا كنت مهتمًا بالمزيد من مشاريع Tkinter، يمكنك أيضًا إنشاء متتبع نفقات. كما يمكنك الاطلاع على وثائق Tkinter لمزيد من المعلومات.

بمجرد أن تنجح في بناء تطبيقك الرسومي الأول باستخدام Tkinter، ستدرك مدى بساطة وقوة هذه المكتبة. فهي تتيح لك تنفيذ أفكارك بسرعة وتحويلها إلى برامج حقيقية بواجهة سهلة الاستخدام. يمكنك بعد ذلك توسيع مهاراتك بإضافة القوائم، الأيقونات، أو حتى دمج مكتبات أخرى لتطوير تطبيقات أكثر تميزًا.
الخطوة الأولى دائمًا هي الأصعب، لكن مع Tkinter ستجد أن تعلم بناء الواجهات الرسومية في Python تجربة ممتعة تمهد لك الطريق نحو تطوير مشاريعك الخاصة بثقة وإبداع.