كيفية إنشاء تطبيق دردشة React.js في 10 دقائق

كيف سيبدو التطبيق الذي سنبنيه؟

في هذه المقالة ، سأريك أسهل طريقة ممكنة لإنشاء تطبيق دردشة باستخدام React.js. سيتم إجراؤه تمامًا بدون رمز من جانب الخادم ، لأننا سنترك Chatkit API يتعامل مع الواجهة الخلفية.

أفترض أنك تعرف JavaScript الأساسي ، وأنك واجهت بعضًا من React.js من قبل. بخلاف ذلك ، لا توجد متطلبات مسبقة.

ملاحظة: لقد أنشأت أيضًا دورة كاملة مجانية حول كيفية إنشاء تطبيق دردشة React.js هنا:
انقر فوق الصورة للوصول إلى الدورة التدريبية.

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

هيا بنا نبدأ!

الخطوة 1: تقسيم واجهة المستخدم إلى مكونات

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

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

بمجرد تحديد مكون الجذر الخاص بك ، يجب أن تسأل نفسك السؤال التالي:

أي الأطفال المباشرين لا يحتوي هذا المكون؟

في حالتنا ، من المنطقي أن نعطيه ثلاثة مكونات فرعية ، والتي سنطلق عليها ما يلي:

  • عنوان
  • MessagesList
  • SendMessageForm

لنرسم مستطيلًا لكل من هذه:

هذا يعطينا نظرة عامة لطيفة على المكونات المختلفة ، والهندسة المعمارية وراء التطبيق لدينا.

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

الخطوة 2: إعداد قاعدة الكود

الآن سنحتاج إلى إعداد مستودعنا. سنستخدم أبسط بنية ممكنة: ملف index.html به روابط إلى ملف JavaScript وورقة أنماط. نحن نستورد أيضًا Chatkit SDK و Babel ، والذي يستخدم لتحويل JSX لدينا:

إليك ملعب Scrimba مع الرمز النهائي للبرنامج التعليمي. أوصيك بفتحها في علامة تبويب جديدة واللعب معها كلما شعرت بالارتباك.

انقر على الصورة لتجربة قاعدة الشفرة بأكملها.

بدلاً من ذلك ، يمكنك تنزيل مشروع Scrimba كملف .zip وتشغيل خادم بسيط لتنشيطه وتشغيله محليًا.

الخطوة 3: إنشاء مكون الجذر

مع وجود مستودع التخزين في مكانه الصحيح ، يمكننا بدء كتابة بعض رموز React ، وهو ما سنفعله داخل ملف index.js.

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

الطبقة التطبيق يمتد React.Component {
  
  يجعل() {
    إرجاع (
      
        <العنوان />                             )   }
}

كما ترون ، فإنه ببساطة يعرض ثلاثة من الأطفال: مكونات <العنوان> و <قائمة الرسائل> والمكونات .

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

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

لنقم بإنشاء متغير DUMMY_DATA:

const DUMMY_DATA = [
  {
    senderId: "perborgen" ،
    النص: "من سيفوز؟"
  }،
  {
    مرسل: "janedoe" ،
    النص: "من سيفوز؟"
  }
]

ثم سنضيف هذه البيانات إلى حالة التطبيق وننقلها إلى مكون MessageList كدعامة.

الطبقة التطبيق يمتد React.Component {
  
  البناء() {
    ممتاز()
    هذا. الدولة = {
       الرسائل: DUMMY_DATA
    }
  }
  
  يجعل() {
    إرجاع (
      
                            )   }
}

هنا ، نحن بصدد تهيئة الحالة في المُنشئ ونمرر هذا أيضًا. STATEMessages وصولاً إلى MessageList.

لاحظ أننا ندعو super () في المنشئ. يجب عليك القيام بذلك إذا كنت تريد إنشاء مكون ذي حالة.

الخطوة 4: تقديم رسائل وهمية

دعونا نرى كيف يمكننا تقديم هذه الرسائل في مكون MessageList. إليك ما يبدو عليه:

تمدد قائمة الرسائل في قائمة React.Component {
  يجعل() {
    إرجاع (
      
            {this.props.messages.map (message => {           إرجاع (            
  •              
                   {message.senderId}                            
                   {رسالة نصية}                                    )        })}           )   } }

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

مع تدفق بياناتنا الوهمية إلى هذا المكون ، فسوف يقدم ما يلي:

إذن لدينا الآن الهيكل الأساسي لتطبيقنا ، كما يمكننا تقديم الرسائل. عمل عظيم!

الآن دعنا نستبدل بياناتنا الوهمية بالرسائل الفعلية من غرفة الدردشة!

الخطوة 5: جلب مفاتيح API من Chatkit

من أجل الحصول على رسائل ، سنحتاج إلى الاتصال بـ Chatkit API. وللقيام بذلك ، نحتاج بالطبع إلى الحصول على مفاتيح API.

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

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

بعد ذلك ، سيتم التنقل إلى حالتك التي تم إنشاؤها حديثًا. هنا ستحتاج إلى نسخ أربع قيم:

  • محدد موقع
  • اختبار رمز مزود
  • معرف الغرفة
  • اسم المستخدم

سنبدأ بـ "محدد المواقع":

يمكنك النسخ باستخدام الرمز الموجود على الجانب الأيمن من Instance Locator.

وإذا قمت بالتمرير قليلاً إلى أسفل ستجد "موفر رمز الاختبار":

ملاحظة: يجب عليك تحديد مربع الاختيار ENABLED للوصول إلى الرمز المميز.

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

اختر اسم مستخدم ، أنشئ غرفة ، ثم انسخ اسم المستخدم ومعرف الغرفة.

إذن ، لقد عثرت الآن على معرّفاتك الأربعة. أحسنت!

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

إليك كيفية القيام بذلك:

إرسال رسالة من Chatkit UI

هذا حتى يكون لدينا بالفعل رسالة نعرضها في الخطوة التالية.

الخطوة 6: تقديم رسائل الدردشة الحقيقية

الآن دعنا نعود إلى ملف index.js الخاص بنا ونخزن هذه المعرفات الأربعة كمتغيرات في الجزء العلوي من ملفنا.

إليك لي ، لكنني أشجعك على إنشاء خاصتك:

const مثيل Locator = "v1: us1: dfaf1e22-2d33-45c9-b4f8-31f634621d24"
const testToken = "https://us1.pusherplatform.io/services/chatkit_token_provider/v1/dfaf1e22-2d33-45c9-b4f8-31f634621d24/token"
اسم المستخدم const = "perborgen"
const roomId = 9796712

ومع وجود ذلك في مكانه الصحيح ، أصبحنا جاهزون أخيرًا للتواصل مع Chatkit. سيحدث هذا في مكون التطبيق ، وبشكل أكثر تحديداً في طريقة componentDidMount. هذه هي الطريقة التي يجب استخدامها عند توصيل مكونات React.js بـ API.

أولاً سننشئ برنامج إدارة دردشة:

componentDidMount () {
  const chatManager = جديد Chatkit.ChatManager ({
    exampleLocator: exampleLocator ،
    اسم المستخدم: اسم المستخدم ،
    tokenProvider: جديد Chatkit.TokenProvider ({
      عنوان url: testToken
    })
 })

... وبعد ذلك سنقوم dochatManager.connect () بالاتصال بـ API:

  chatManager.connect (). ثم (currentUser => {
      currentUser.subscribeToRoom ({
      roomId: roomId ،
      السنانير:
        onNewMessage: message => {
          this.setState ({
            الرسائل: [... this.state.messages، message]
          })
        }
      }
    })
  })
}

هذا يتيح لنا الوصول إلى كائن currentUser ، والذي هو واجهة للتفاعل مع API.

ملاحظة: بما أننا سنحتاج إلى usUurrentUser لاحقًا ، فعليك تخزينه على المثيل من خلال القيام بهذا .currentUser = currentUser.

بعد ذلك ، نتصل بـ currentUser.subscribeToRoom () ونمرر به roomId وربط onNewMessage.

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

يؤدي هذا إلى جلب التطبيق للبيانات من واجهة برمجة التطبيقات ثم عرضها في الصفحة.

هذا رائع ، حيث أصبح لدينا الآن هيكل عظمي لاتصال عميل الخادم الخاص بنا.

فوردعالم!

الخطوة 7: معالجة إدخال المستخدم

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

ألقِ نظرة على طريقة التقديم () ، وأولي اهتمامًا خاصًا للخطوط التي أبرزتها:

فئة SendMessageForm يمتد React.Component {
  يجعل() {
    إرجاع (
      <شكل
        اسم_الفئة = "إرسال رسالة-شكل">
        <مساهمة
          عند_التغيير = {this.handleChange}
          القيمة = {this.state.message}
          العنصر النائب = "اكتب رسالتك واضغط على ENTER"
          اكتب = "نص" />
      
    )
  }
}

نحن نفعل شيئين:

  1. الاستماع إلى مدخلات المستخدم مع مستمع أحداث onChange ، حتى نتمكن من تشغيل طريقة handleChange
  2. تحديد قيمة حقل الإدخال بشكل صريح باستخدام this.state.message

تم العثور على الاتصال بين هاتين الخطوتين داخل أسلوب handleChange. إنه يقوم ببساطة بتحديث الحالة إلى أي نوع يكتبه المستخدم في حقل الإدخال:

مقبضالتغيير (e) {
  this.setState ({
    الرسالة: e.target.value
  })
}

يؤدي هذا إلى إعادة تقديم ، ولأن حقل الإدخال تم تعيينه بشكل صريح من الحالة باستخدام القيمة = {this.state.message} ، فسيتم تحديث حقل الإدخال.

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

لإنهاء هذه الميزة ، نحتاج إلى إعطاء المكون مُنشئًا. في ذلك ، سنقوم بتهيئة الحالة وربط هذا في طريقة handleChange:

البناء() {
    ممتاز()
    هذا. الدولة = {
       الرسالة:
    }
    this.handleChange = this.handleChange.bind (هذا)
}

نحتاج إلى ربط طريقة handleChange حتى نتمكن من الوصول إلى هذه الكلمة الرئيسية بداخلها. هذه هي الطريقة التي تعمل بها JavaScript: هذه الكلمة الرئيسية غير محددة بشكل افتراضي داخل نص الوظيفة.

الخطوة 8: إرسال الرسائل

لقد انتهى مكون SendMessageForm الخاص بنا تقريبًا ، ولكننا نحتاج أيضًا إلى الاهتمام بتقديم النموذج. نحتاج إلى جلب الرسائل وإرسالها!

للقيام بذلك ، سنقوم بربط أحد المقابالتقدم بمعالج حتى مع مستمع حدث onSubmit في

.

يجعل() {
    إرجاع (
      <شكل
        onSubmit = {this.handleSubmit}
        اسم_الفئة = "إرسال رسالة-شكل">
        <مساهمة
          عند_التغيير = {this.handleChange}
          القيمة = {this.state.message}
          العنصر النائب = "اكتب رسالتك واضغط على ENTER"
          اكتب = "نص" />
      
    )
  }

نظرًا لأن لدينا قيمة حقل الإدخال المخزن في this.state.message ، فمن السهل جدًا تمرير البيانات الصحيحة جنبًا إلى جنب مع التقديم. سنفعل ببساطة:

handle تقديم (هـ) {
  e.preventDefault ()
  this.props.sendMessage (this.state.message)
  this.setState ({
    الرسالة:
  })
}

هنا ، نحن ندعو sendMessage الدعامة وتمريرها في this.state.message كمعلمة. قد تكون مرتبكًا بعض الشيء من هذا ، لأننا لم ننشئ طريقة sendMessage حتى الآن. ومع ذلك ، سنفعل ذلك في القسم التالي ، حيث أن هذه الطريقة موجودة داخل مكون التطبيق. لذلك لا تقلق!

ثانياً ، نقوم بمسح حقل الإدخال عن طريق تعيين this.state.message على سلسلة فارغة.

إليك مكون SendMessageForm بأكمله. لاحظ أننا قد ربطنا هذا أيضًا بأسلوب تقديم التقارير:

فئة SendMessageForm يمتد React.Component {
  البناء() {
    ممتاز()
    هذا. الدولة = {
      الرسالة:
    }
    this.handleChange = this.handleChange.bind (هذا)
    this.handleSubmit = this.handleSubmit.bind (هذا)
  }
  مقبضالتغيير (e) {
    this.setState ({
      الرسالة: e.target.value
    })
  }
  handle تقديم (هـ) {
    e.preventDefault ()
    this.props.sendMessage (this.state.message)
    this.setState ({
      الرسالة:
    })
  }
  يجعل() {
    إرجاع (
      <شكل
        onSubmit = {this.handleSubmit}
        اسم_الفئة = "إرسال رسالة-شكل">
        <مساهمة
          عند_التغيير = {this.handleChange}
          القيمة = {this.state.message}
          العنصر النائب = "اكتب رسالتك واضغط على ENTER"
          اكتب = "نص" />
      
    )
  }
}

الخطوة 9: إرسال الرسائل إلى Chatkit

نحن الآن على استعداد لذلك أرسل الرسائل إلى Chatkit. يتم ذلك في مكون التطبيق ، حيث سننشئ طريقة تسمى this.sendMessage:

sendMessage (نص) {
  this.currentUser.sendMessage ({
    نص،
    roomId: roomId
  })
}

يستغرق معلمة واحدة (النص) وهو ببساطة يستدعي this.currentUser.sendMessage ().

الخطوة الأخيرة هي تمرير هذا لأسفل إلى المكون كـ prop:

/ * مكون التطبيق * /
  
يجعل() {
  إرجاع (
    
      <العنوان />                 ) }

ومع ذلك ، فقد انتقلنا إلى المعالج حتى يتمكن SendMessageForm من استدعاءه عند إرسال النموذج.

الخطوة 10: إنشاء مكون العنوان

للإنهاء ، لنقم أيضًا بإنشاء مكون العنوان. إنه مجرد مكون وظيفي بسيط ، يعني وظيفة تُرجع تعبير JSX.

عنوان الوظيفة () {
  إرجاع 

تطبيق الدردشة الرائع }

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

النتيجة

ومع ذلك ، يكون لديك تطبيق الدردشة الخاص بك والذي يمكنك استخدامه للدردشة مع أصدقائك!

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

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

شكرا للقراءة! اسمي Per ، أنا أحد مؤسسي Scrimba ، وأحب مساعدة الناس على تعلم مهارات جديدة. اتبعني على Twitter إذا كنت ترغب في أن يتم إعلامك بالمقالات والموارد الجديدة.