الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

رد فعل رسول

يستخدم هذا المشروع React و CSS لإعادة إنشاء تطبيق Facebook Messenger على الويب. إنه في مراحله المبكرة ولكن معظم لبنات البناء موجودة. هذا ليس منتجًا رسميًا على Facebook ولا يحتفظ به أي من موظفي Facebook.

انقر هنا للحصول على عرض عرض حي

المكونات المتاحة

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

  • لحظة لتحليل تواريخ جافا سكريبت وطبعتها بطريقة قابلة للقراءة.
  • حلاقة لتقليص الرسائل الطويلة للحفاظ على الاتساق بين ConversationListItem .
  • Axios لتسهيل طلبات HTTP (للرسائل ، والمستخدمين ، إلخ).

تأليف

يسمح المكون المكون للمستخدم بإرسال الرسائل والمرفقات.

الدعائم يكتب وصف
rightItems ToolbarButton[] الرموز التي تظهر على يمين عنصر input مما يتيح للمستخدمين إرسال أكثر من نص (على سبيل المثال الصور ، النقد ، الموقع ، إلخ).

قائمة المحادثة

هذا مكون بسيط يعرض ConversationSearch ويستخدم axios لجلب المستخدمين من واجهة برمجة تطبيقات المستخدم العشوائي.

محادثة

يوفر هذا المكون نظرة عامة على محادثة واحدة ، بما في ذلك صورة أو اسم (أو عنوان المجموعة) ، ومقتطف من أحدث رسالة. نستخدم shave لتقليص الرسالة المعروضة بحيث تشغل جميع مثيلات ConversationListItem نفس مقدار المساحة الرأسية.

الدعائم يكتب وصف
photo String عنوان URL لصورة يتم عرضها للمحادثة. يستخدم العرض التوضيحي الصورة التي يوفرها واجهة برمجة تطبيقات المستخدم العشوائي.
name String اسم المحادثة ، سواء كانت مجموعة أو فرد.
text String نص آخر رسالة ؛ ليس عليك اقتطاع هذا بنفسك.

محادثات البحث

هذا عنصر input بسيط تم تصميمه ليشبه شريط البحث في Facebook Messenger. يتركز عنصرها النائب حتى يتم تركيز المدخلات ، مما ينقل العنصر النائب إلى اليسار.

رسالة

نظرًا لأن معظم العمل يتم من قِبل MessageList ، فإن هذا المكون مستقيم إلى الأمام. كما هو مذكور أدناه ، هناك الكثير من props التي تتيح لك تصميم مجموعات مميزة من الرسائل.

الدعائم يكتب وصف
data Object كائن يحتوي على معلومات حول الرسالة. نحن نستخدم data.message لجسم الرسائل والبيانات data.timestamp لكائن تاريخ JavaScript الذي يمثل الوقت الذي تم فيه إرسال الرسالة.
isMine Boolean يطبق الصبغة على الرسالة ( #007aff في العرض التوضيحي) ومحاذاةها إلى اليمين ، مما يشير إلى أن الرسالة قد أرسلت بواسطتك.
startsSequence Boolean يشير إلى أن الرسالة تمثل بداية سلسلة من الرسائل. هذا يضع نصف قطر الحدود العلوي المناسب ، اعتمادًا على ما إذا كانت الرسالة قد أرسلت من قبلك أو أي شخص آخر.
endsSequence Boolean يشير إلى أن الرسالة تمثل نهاية سلسلة من الرسائل. هذا يحدد نصف قطر الحدود السفلية المناسبة ، اعتمادًا على ما إذا كانت الرسالة قد أرسلت من قبلك أو أي شخص آخر.
showTimestamp Boolean يحدد ما إذا كان ينبغي عرض الطابع الزمني للرسالة أم لا. يحدد التطبيق التجريبي هذه القيمة إلى true إذا مرت أكثر من ساعة بين الرسائل.

Messagelist

هذا هو مكون بوسع مخادع يقوم بالكثير من الرفع الثقيل لتقديم تسلسلات من الرسائل ذات التصميم المناسب (انظر MessageList.renderMessages ). على وجه التحديد ، نستخدم معلومات حول الرسائل ( author والطابع timestamp ) لتقديم مجموعات من الرسائل أقرب إلى جانب الحدود المعدلة والهامش. هذا ليس موجودًا فقط في Facebook Messenger ، ولكن في تطبيقات أخرى مثل iMessage أيضًا. يمكنك إزالة هذه الوظيفة إذا كنت تريد ذلك.

رسول

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

شريط الأدوات

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

الدعائم يكتب وصف
title String العنوان الذي سيتم عرضه في وسط شريط الأدوات.
leftItems ToolbarButton[] عناصر ToolbarButton التي يجب أن تظهر على الجانب الأيسر من شريط الأدوات.
rightItems ToolbarButton[] عناصر ToolbarButton التي يجب أن تظهر على الجانب الأيمن من شريط الأدوات.

شريط الأدوات

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

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

خريطة الطريق

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

  • رسائل الوسائط (على سبيل المثال الصور ، مقاطع الفيديو)
  • تلميحات الأدوات ، popovers ، الوسائط (لعرض خيارات ، إرسال رسائل جديدة ، إلخ)
  • تدهور رشيق (مؤشر حالة الشبكة ، مغازل التحميل ، إلخ)
  • الاستجابة

البرامج النصية المتاحة

في دليل المشروع ، يمكنك تشغيل:

npm start

يدير التطبيق في وضع التطوير.
افتح http: // localhost: 3000 لمشاهدته في المتصفح.

سيتم إعادة تحميل الصفحة إذا قمت بإجراء تعديلات.
سترى أيضًا أي أخطاء في وحدة التحكم في وحدة التحكم.

npm test

يطلق عداء الاختبار في وضع الساعة التفاعلية.
انظر القسم حول إجراء الاختبارات لمزيد من المعلومات.

npm run build

يبني التطبيق للإنتاج إلى مجلد build .
تتفاعل حزمها بشكل صحيح في وضع الإنتاج وتحسن البناء للحصول على أفضل أداء.

تم تصنيع البناء ويتضمن أسماء الملفات التجزئة.
تطبيقك جاهز للنشر!

راجع القسم الخاص بالنشر لمزيد من المعلومات.

npm run eject

ملاحظة: هذه عملية في اتجاه واحد. بمجرد eject ، لا يمكنك العودة!

إذا لم تكن راضيًا عن أدوات الإنشاء وخيارات التكوين ، فيمكنك eject في أي وقت. سيقوم هذا الأمر بإزالة التبعية الفردية من مشروعك.

بدلاً من ذلك ، ستقوم بنسخ جميع ملفات التكوين والتبعيات المتعدية (WebPack ، Babel ، ESLINT ، إلخ) مباشرة في مشروعك حتى يكون لديك سيطرة كاملة عليها. ستظل جميع الأوامر باستثناء eject تعمل ، لكنها ستشير إلى البرامج النصية المنسوخة حتى تتمكن من تعديلها. في هذه المرحلة ، أنت وحدك.

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

يتعلم أكثر

يمكنك معرفة المزيد في وثائق تطبيق Create React.

لتعلم رد الفعل ، تحقق من وثائق رد الفعل.

تقسيم الكود

لقد انتقل هذا القسم هنا: https://facebook.github.io/create-react-app/docs/code-splitting

تحليل حجم الحزمة

لقد انتقل هذا القسم هنا: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

صنع تطبيق ويب تدريجي

انتقل هذا القسم هنا: https://facebook.github.io/create-react-app/docs/making-a-progression-web-app-app

التكوين المتقدم

لقد انتقل هذا القسم هنا: https://facebook.github.io/create-react-app/docs/advanced-configuration

النشر

انتقل هذا القسم هنا: https://facebook.github.io/create-react-app/docs/deployment

فشل npm run build في Minify

لقد انتقل هذا القسم هنا: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل