instructions.ar-DZ.md

كيفية استعمال Tkinter Designer

---

Table of Contents

1. البدء

   1. تثبيت Python
   2. تثبيت Tkinter Designer
   3. إنشاء حساب Figma

2. تنسيق تصميم Figma

   1. المرجع
   2. دليل العناصر

3. إستعمال Tkinter Designer

   1. Access Token الشخصي
   2. الحصول على URL الملف
   3. استعمال CLI
   4. استعمال GUI

4. Troubleshooting

البدء [الأعلى]

1. تثبيت Python

قبل استعمال Tkinter Designer, ستحتاج إلى تثبيت Python.

• رابط تثبيت Python
• رابط مفيد لثبيت Python على أنظمة تشغيل مختلفة

لاحقا في هذا الدليل، ستستعمل Package Installer for Python (pip), والذي قد يتطلب منك إضافة Python إلى نظام PATH

---

2. تثبيت Tkinter Designer

ثلاث خيارات:

1. pip install tkdesigner

2. تثبيت poetry

   • poetry new gui_project_name && cd gui_project_name
   • poetry add tkdesigner
   • poetry install

3. لتشغيل Tkinter Designer من source code, اتبع الخطوات أدناه.

   1. تحميل كود Tkinter Designer إما يدويًا أو بواسطة git.

   git clone https://github.com/ParthJadhav/Tkinter-Designer.git

   2. فتح مجلد Tkinter Designer (تغيير المجلد الحالي)

   cd tkinter-designer

   3. تثبيت الملحقات الضرورية
   • pip install -r requirements.txt
     • في حالة عطب في pip جرب الأوامر التالية:
     • pip3 install -r requirements.txt
     • python -m pip install -r requirements.txt
     • python3 -m pip install -r requirements.txt
     • وإن كان هذا لا يزال يعمل، تأكد من أن Python مُضاف إلى PATH.

   . هذا سيقوم بتثبيت كل العناصر الضرورية لعمل Tkinter Designer. قبل استعمال Tkinter Designer ستحتاج إلى إنشاء ملف Figma بالإرشادات التالية.

   If you already have created a file then skip to Using Tkinter Designer Section.

   إذا أنشأت الملف بالفعل، فانتقل إلى قسم استعمال Tkinter Designer

---

3. إنشاء حساب Figma

1. باستعمال متصفح ويب إذهب إلى figma.com وانقر على 'Sign up'
2. أدخل معلوماتك وتحقق من بريدك الإلكتروني
3. قم بإنشاء ملف تصميم Figma جديد
4. إبدأ بإنشاء الواجهة
   • القسم الموالي يغطي التنسيق المطلوب لإدخال Tkinter Designer
   • هنا الدورة التعليمية الرسمية للبرنامج Figma
   • هنا القناة الرسمية في اليوتوب Figma
   • هنا مقر المساعدة Figma

تنسيق تصميم Figma [الأعلى]

1. المرجع

التسمية مهمة

اسم العنصر في Figma	عنصر Tkinter
Button	Button
Line	Line
Rectangle	Rectangle
TextArea	Text Area
TextBox	Entry
Image	Canvas.Image()

يعتمد الكود الذي تم إنشاؤه بواسطة Tkinter Designer على أسماء العناصر من تصميم Figma الخاص بك، وعلى هذا النحو، تحتاج إلى تسمية العناصر الخاصة بك وفقًا لذلك. في Figma ، أعد تسمية عناصرك بالنقر عليها في لوحة Layers.

---

2. دليل العناصر

1. أولاً، قم بإنشاء Frame والتي ستكون بمثابة نافذة Tkinter
   
   

2. إضافة صور

   • يمكن إنشاء الصور باستخدام الأشكال و / أو الصور
   • إذا كنت تستخدم أشكالًا / صورًا متعددة ، فيجب عليك تجميعها معًا عن طريق تحديدها جميعًا والضغط عليها CTRL/⌘ + G
   • وبعد ذلك، قم بتسمية العنصر أو المجموعة ب "Image".
     
     

3. نص (نص عادي)

   • استخدم مفتاح T لتنشيط أداة Text ، ثم أضف النص حسب الرغبة
   • لا يلزم إعادة تسمية النص لاستخدامه في Tkinter Designer
   • اضغط على مفتاح Return أو Enter للانتقال إلى السطر التالي.
     
     

4. الإدخال (إدخال مستخدم أحادي السطر)

   • قم بتنشيط أداة Rectangle باستخدام R
   • اضبط المستطيل حسب رغبتك
   • تأكد من تسمية المستطيل "TextBox"
     
     

5. منطقة النص (إدخال مستخدم متعدد الأسطر)

   • قم بتنشيط أداة Rectangle باستخدام R
   • اضبط المستطيل حسب رغبتك
   • تأكد من تسمية المستطيل "TextArea"

6. Rectangle

   • قم بتنشيط أداة Rectangle باستخدام R
   • اضبط المستطيل حسب رغبتك
   • تأكد من تسمية المستطيل "Rectangle".
     
     

7. زر عادي

   • أضف مستطيلاً ليكون بمثابة زر في واجهة المستخدم
   • اختياري: أضف نصًا للزر
   • حدد الزر (مستطيل) ، وأي نص اختياري ، ثم قم بتجميعها باستخدام CTRL / & # 8984؛ + G
   • قم بتسمية المجموعة "Button"

إلجأ إلى هذا الفيديو إذا واجهت أي مشاكل

8. زر مدور
   • أضف مستطيلًا ليكون بمثابة زر في واجهة المستخدم
   • اختياري: أضف نصًا للزر
   • إجعلها مدورة بإضافة corner radius عن طريق تحديد المستطيل وإضافة corner radius من الجهة اليمنى. إقرأ المزيد عنها
   • قم بإنشاء مستطيل بنفس حجم الزر الخاص بك. لا تجعلها مدورة
   • قم بتغيير لون المستطيل ليطابق الخلفية
   • الآن قم بتحريك المستطيل الذي تم إنشاؤه حديثًا أسفل الزر الرئيسي (مستطيل)
   • حدد الزر والمستطيل وأي نص اختياري ، ثم قم بتجميعها باستخدام CTRL / & # 8984؛ + G
   • قم بتسمية المجموعة "Button"

إلجأ إلى هذا الفيديو إذا واجهت أي مشاكل

استعمال Tkinter Designer [الأعلى]

المدخلات المطلوبة

هناك بعض المدخلات التي ستحتاج إلى جمعها لتتمكن من استخدام Tkinter Designer.

1. Access Token الشخصي

1. قم بتسجيل الدخول إلى حساب Figma الخاص بك
2. انتقل إلى الإعدادات
3. في علامة التبويب الحساب ، قم بالتمرير لأسفل إلى Personal Access tokens
4. أدخل اسم access token الخاص بك في نموذج الإدخال واضغط على Enter
5. سيتم إنشاء access token الخاص بك.
   • انسخ هذا access token واحتفظ به في مكان آمن.
   • لن تحصل على فرصة أخرى لنسخ هذا token.

2. الحصول على URL الملف

1. في ملف تصميمك Figma، إضغط على زر Share في القسم العلوي، ثم على 🔗 Copy link

باستعمال CLI

يعد استخدام CLI أمرًا بسيطًا مثل تثبيت الحزمة وتشغيل أداة CLI.

من PyPi

يمكنك استخدام الأوامر أدناه كاختبار باستبدال $FILE_URL و $FIGMA_TOKEN ببياناتك. إذا لم يكن لديك token والرابط فارجع إلى المدخلات المطلوبة.

pip install tkdesigner
tkdesigner $FILE_URL $FIGMA_TOKEN

من Source

لاستخدام CLI من الكود المصدري ، تحتاج إلى clone repository ثم اتباع الإرشادات أدناه.

يمكنك استخدام الأوامر أدناه كاختبار باستبدال $FILE_URL و $FIGMA_TOKEN ببياناتك. إذا لم يكن لديك token والرابط فارجع إلى المدخلات المطلوبة.

$ python -m tkdesigner.cli $FILE_URL $FIGMA_TOKEN
# To learn more about how to use the cli, pass the --help flag
$ python -m tkdesigner --help

المخرجات

بشكل تلقائي، كود واجهة المستخدم سيكتب إلى build/gui.py. تستطيع تحديد path المخرج باستعمال flag -o مع path.

لتشغيل واجهة المستخدم المنتجة، قم بcd إلى path الذي ستكتب إليه (build/ مثلاً) وقم بتشغيله مثل أي واجهة مستخدم Tkinter.

cd build
python3 gui.py

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

افتح Tkinter Designer قبل تنفيذ الخطوات التالية

1. افتح Tkinter Designer GUI عن طريق

cd Tkinter-Designer
cd gui
python3 gui.py

2. إنسخ access token الشخصي إلى Token ID في Tkinter Designer
3. إنسخ الرابط إلى File URL في Tkinter Designer
4. إضغط على Output Path لفتح متصفح الملفات
5. إختر path مخرجات وإضغط على Select Folder
6. إضغط على Generate

سيتم وضع ملفات الإخراج من Tkinter Designer في path الذي اخترته ، داخل مجلد جديد يسمى build. تهانينا ، لقد قمت الآن بإنشاء Tkinter GUI باستخدام Tkinter Designer!

Troubleshooting [الأعلى]

• العناصر غير مرئية؟ في غير محلها؟

  • يرجى التأكد من أن ملف Figma الخاص بك يحتوي على عناصره المسماة بشكل صحيح. * أنظر إلى تنسيق تصميم Figma, §1

• الزر له خلفية رمادية من غير قصد؟

  • تأكد من إضافة مستطيل خلف عنصر الزر الخاص بك ، وأن لون التعبئة الخاص به هو نفسه لون الخلفية

• عناصر غير صحيحة؟

  • تأكد من تسمية العناصر الخاصة بك بشكل صحيح في Figma
    • أنظر إلى تنسيق تصميم Figma, §1

• النافذة أكبر من الشاشة؟

  • قم بتصغير العناصر الخاصة بك في Figma

• الملفات لم تُولّد؟

  • أعد تشغيل Tkinter Designer
  • تحقق مرة أخرى access token وعنوان URL
  • تأكد من أن التصميم الخاص بك يحتوي على Frame

• شيء آخر؟

  • الإبلاغ عن المشكلات غير المدرجة هنا على GitHub