الرئيسية / برمجة / بناء تطبيق الدردشة الأول الخاص بك باستخدام  Flask في 7 دقائق فقط

بناء تطبيق الدردشة الأول الخاص بك باستخدام  Flask في 7 دقائق فقط

بناء تطبيق الدردشة من أكثر الأمور التي نرغب بها، وخاصةً أننا نواجه العديد من تطبيقات الدردشة كل يوم.

يحتاج بناء تطبيق الدردشة إلى الكثير من الجهد للحفاظ على هذه التطبيقات وتطويرها.

حيث أنها تتضمن اتصال ثنائي بين المستخدمين وتسجيل كل طلب يقدمه الخادم.

لهذا السبب خصصنا لكم هذه المقالة والتي سنتعلم من خلالها بناء تطبيق الدردشة باستخدام Flask، وهو إطار ويب Python في 7 دقائق فقط.

نعم، لقد سمعته بشكل صحيح. يستغرق فقط 7 دقائق من وقتك، ولكن ماذا بعد!

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

المتطلبات الأساسية لهذه العملية هي بعض المفاهيم المرتبطة بـ:

  • Flask
  • SocketIO
  • jquery

هذه المتطلبات الثلاثة تشكل الأساس في بناء تطبيق الدردشة هذا.

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

بناء تطبيق الدردشة باستخدام flask-SocketIO

لماذا نحتاج Flask في بناء تطبيق الدردشة؟

Flask هو أحد الأطر القوية المعروفة ببساطتها ومرونتها والعديد من الإضافات التي يمكن تضمينها لاحقاً إذا أراد المستخدم القيام بذلك.

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

تثبيت Flask:

الأمر بسيط للغاية بالفعل.

ما عليك سوى الانتقال إلى الجهاز في حالة وجود نظام التشغيل Mac OS أو Linux وموجه الأوامر إذا كان Windows.

انتقل إلى الدليل المطلوب حيث تكتب شفرة المصدر واكتب:

دعنا ننشئ ملفاً باسم main.py واستخرج كلاس Flask من نموذج flask، يشرح المقتطف أدناه كيفية القيام بذلك.

ما هو SocketIO وكيفية تثبيته؟

دعونا نحصل على فهم أساسي لماذا نحن بحاجة لـ SocketIO.

SocketIO ينشئ مساراً يمكن من خلاله أن يتفاعل جهاز كمبيوتر واحد مع الآخر.

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

بما أن المحادثة تدور حول الاتصال، فإن المقابس ضرورية.

SocketIO هي مكتبة جافا سكريبت مستعرضة للمتصفح التي تلخص تطبيق العميل من بروتوكول النقل الفعلي.

باستخدام SocketIO، يمكنك أن تكون متأكداً جداً من أن أي متصفح بالخادم سيكون قادراً على الاتصال بتطبيقك.

كيف نحصل على إنشاء مقبس في Flask؟

هناك ملحق يعرف باسم “flask-socketio” يمكنّنا من القيام بذلك.

حيث أن Flask-SocketIO يعطي تطبيقات Flask إمكانية الوصول إلى الاتصالات ثنائية الاتجاه بين العملاء والخادم.

يمكن أن يستخدم تطبيق العميل أياً من مكتبات العميل الرسمية لـ SocketIO في جافا سكريبت أو ++C أو Java وSwift أو أي عميل متوافق لإنشاء اتصال دائم بالخادم.

في حالتنا هذه، سنستخدم مكتبة javascript وهي Socket.JS.

حيث يُمكّننا PIP من تثبيت هذا الامتداد “flask-socketio”، وللقيام بذلك، قم بتشغيل الأمر:

لتضمين كلاس SocketIO من نموذج flask_socketio، كل ما يتعين علينا القيام به هو:

الآن، قم بإنشاء متغير يسمى app من خلال تضمين Flask حول __name__.

لتمكين التشفير، نعلن عن SECRET_KEY.

يتم تطبيق SocketIO على “app” ويتم تخزينه لاحقاً في متغير socketio والذي يمكننا من استخدام socketio بدلاً من app في تشغيل التطبيق.

يشمل socketio بدء تشغيل خادم الويب، مثل app.

تأخذ ميثود ()run الوسيطات الاختيارية للمضيف والمنفذ، ولكن افتراضياً سوف تستمع على localhost: 5000 مثل خادم الويب لتطوير Flask.

كم أن debug=True يمكّن من فرز الأخطاء بكل سهولة.

يجب زيادة هذا مع بضعة أسطر أخرى من الشفرة للحصول على الجوهر الأساسي لتطبيق الدردشة و main.py ومن هنا تبدو:

الخطوات الأولى، كتابة Flask view.

ما هوFlask view؟ دعنا نفكر في هذا،

لذلك، عندما يزور المستخدم الصفحة الرئيسية (المشار إليها بواسطة مصمم المسار “/”)، فإنه يؤدي إلى عرض جلسات الـ view المعلن عنها أدناه.

فهي الدالة التي يتم الاتصال بها عند فتح عنوان URL المذكور.

main.py كما تبدو:

هنا، يساعد render_template في عرض صفحة HTML التي تسمى القوالب.

قوالب Flask تساعد في إضافة HTML إلى التطبيق لدينا.

يجب تضمين هذه في مجلد القوالب، حيث يكون التسلسل الهرمي كما يلي، بفرض أن المجلد أو الدليل الذي نقوم بإنشاء هذا التطبيق بداخله هو Chat_room.

في الوقت الحالي، دعونا نذكر رسالة “Hello” في session.html:

قم بتشغيل التطبيق باستخدام الأمر:

هذا يعطي الخرج بالشكل التالي:

بناء تطبيق الدردشة 1مكالمات Flask-Socket ومعالجة الرسائل:

حان الوقت الآن لفهم كيفية تلقي الخادم للرسائل التي يرسلها العميل وكيفية اعترافه برسائل العميل.

لتلقي رسائل WebSocket من العميل، يعرّف التطبيق معالجات الأحداث باستخدام مصمم socketio.on.

كما يمكنه إرسال رسائل رد إلى العميل المتصل باستخدام الدالات ()send و ()emit.

عند تشغيل ” “my event، يتلقى الملف الشخصي “handle_my_custom_event” أولاً كائنات json.

ثم يطبعه بشكل نهائي ويرسله لاحقاً إلى حدث ” my response “.

” callback ” هو نوع من تقنية تصحيح الأخطاء التي تساعدنا في التعرف على ما إذا كان يتم استلام الرسالة من قبل الخادم ومن الآن فصاعداً، تستدعي الدالة “messageReceived”.

الكود المصدري main.py سيكون:

دمج SocketJS في قوالب Flask:

حان الوقت لملء session.html بكود المقبس (socket).

  • أولاً: يجب تضمين نصوص jquery و js في ملف HTML.

للقيام بذلك، نحتاج إلى استيراد هذه البرامج النصية قبل كتابة JS Functions.

  • ثانياً، نحتاج إلى مطالبة المستخدمين (المشاركين في الدردشة) بإدخال الرسالة التي يجب تسليمها والتي نحتاج إلى إنشاء نموذج لها في HTML.

يجب أن يكون هذا متصلاً بـ socket.js باستخدام عنصر “form” وكلاسات حقلي الإدخال كذلك.

يوضح مقتطف الكود أدناه إنشاء نموذج:

  • نحتاج بعد ذلك إلى استخدام ()io.connect لإنشاء الاتصالات وإنشاء جلسات.

سيتم إنشاء الجلسة من خلال ربط المستخدمين بنفس عنوان URL وهو http://127.0.0.1:5000.

هنا، يمثل document.domain عنوان IP للكمبيوتر الذي تعمل عليه، بينما يمثل location.port المنفذ، والواحد الافتراضي هو 5000 وإذا تم تمريره كوسيط في الدالة run، فسيكون ذلك.

الوسيط الأول لـ ()on هو اسم الحدث.

أسماء الأحداث ” connect” و ” disconnect” و ” message” و “json”، وهي أحداث خاصة تم إنشاؤها بواسطة SocketIO. تعتبر أي أسماء أحداث أخرى أحداث مخصصة.

أحداث ” connect” و “disconnect” لا تحتاج إلى شرح.

يقدم حدث ” message” حمولة من نوع السلسلة، بينما تقدم أحداث “json” والأحداث المخصصة حمولة JSON، في نموذج Python dictionary.

لإرسال الأحداث، يمكن لخادم Flask استخدام التوابع ()send و ()emit  التي توفرها Flask-SocketIO.

ترسل الدالة ()send رسالة قياسية من السلسلة أو نوع JSON إلى العميل.

بينما ترسل الدالة ()emit رسالة تحت اسم حدث مخصص (هنا “my event “) مع البيانات.

عند إرسال النموذج، أي بعد استدعاء أسلوب POST، يتم تمرير الحدث “e” كوسيط.

حيث يتم استدعاء ()methodDefault  مما يمنع من إرسال النموذج ثم يأخذ القيم من حقول الإدخال واسم المستخدم والرسالة.

ثم يتم تمريرها عبر الدالة “emit” إلى الحدث المخصص “my event ” الذي حددناه سابقاً في “main.py”.

يتم بعد ذلك مسح حقل الرسالة لتمكين المستخدم نفسه من إدخال المزيد من الرسائل.

بمجرد إرسال الرسالة عبر أحد الأحداث، نحتاج إلى عرض الرسالة المستلمة على صفحة HTML.

عند الرد، بمجرد استلام الرسالة، نمرر الرسالة إلى كلاس “message_holder”

(إلى جانب النص الموجود في علامة h3 تمت الإزالة ،(“No message yet”) )، حيث يتم إلحاق رسائلنا بالرسائل السابقة.

يبدو الملف session.html بأكمله كما يلي:

ماذا بعد بناء تطبيق الدردشة هذا؟

بعد بناء تطبيق الدردشة، يمكنك الآن تشغيله من خلال فتح متصفح الويب لديك وانقر على عنوان URL: http://127.0.0.1:5000/.

في نفس الوقت، افتح علامة تبويب أخرى واضغط على نفس عنوان URL مرة أخرى.

ستظهر بعض لقطات الشاشة الناتجة:

بناء تطبيق الدردشة 2

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

على سبيل المثال، افتح علامة تبويب أخرى واكتب رسائلك.

بهذا، تتقن وبنجاح بناء تطبيق الدردشة باستخدام Flask.

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

هذا المقال من تأليف Samhita Alla و Vihar Kurama، المرجع من هنا.

 

نبذة عن الخطة الشاملة

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

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

الموقع الرسمي للخطة والتسجيل من هنا:

http://khottah.com/

التسجيل عبر رابط الخطة مع خصم 50% من هنا:

http://khottah.com/?coupon_code=50off

لمعرفة منهاج الخطة من هنا:

https://anbilarabi.com/curriculum

طرق الدفع والاشتراك والتحويل من هنا:

https://anbilarabi.com/payments

يمكنكم تحميل البروشور الخاص بالخطة من هنا:

https://15f7fy16numklnwbn3m52e15-wpengine.netdna-ssl.com/khottah-brochure.pdf

شرح صوتي عن الخطة في 5 دقائق:

https://soundcloud.com/anbilarabi/5a-1

الدليل الشامل حول الخطة بالفيديو تعرف على الخطة من الداخل:

https://youtu.be/Oqi8Dp1KgH4

أخيراً نود مشاركتكم  بعض ما قاله البعض عنا وعن الخطة الشاملة وتقييمات الطلاب عبر هذا الرابط:

https://anbilarabi.com/people

شكراً جزيلاً لكم ولا تترددوا بالتواصل معنا عن طريق الواتس آب للرقم 00970599042502

كما يمكنكم مراسلتنا عبر هذا الإيميل:

http://ahmadnaser.com

 

 

 

 

 

 

عن Hanadi Hussino

Author Image

شاهد أيضاً

أهم النصائح المتبعة لإتقان قواعد اللغة الإنجليزية بشكلها الصحيح

قواعد اللغة الإنجليزية هي واحدة من أصعب الدروس بالنسبة للمتحدثين بلغة أجنبية (غريبة)، لا سيما …

>