كيفية إنشاء تطبيق دردشة الفيديو

في اليوم الآخر صادفت هذا البرنامج التعليمي الرائع من Twilio من قبل فيل ناش الذي يشرح كيفية إنشاء دردشة فيديو باستخدام React Hooks، لذلك قررت تشغيله في Back4app لأنه مجاني ورائع ويمكن دمجه مع Parse، لذلك يمكنني الحصول على استضافة مجانية على الويب (بما في ذلك النطاق الفرعي المجاني لـ back4app)، واستضافة تطبيقي واستخدام توصيل البيانات في الوقت الفعلي لتضمين ميزات الدردشة في المستقبل.
هذا المنشور هو شرح تفصيلي لما فعلته لجعلها تعمل.

الأهم فالمهم

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

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

الخطوة الأولى – ما ستحتاجه

تنص مقالة فيل على أنك ستحتاج إلى Node.js و NPM مثبتين ويعملان. لقد كان لدي ذلك بالفعل في نظامي، لذا تأكد من ذلك أيضًا.

ستحتاج أيضاً إلى حساب على Twilio، لذا أنشئ حساباً مجانياً وستكون جاهزاً للانطلاق.

الخطوة الثانية – الشروع في العمل

لم تنجح الخطوة الأولى، استنساخ المستودع، بالنسبة لي. ينص الأمر فيل:

استنساخ git clone -b twilio [email protected]:philnash/react-express-starter.git twilio-video-react-hooks

أعطتني بعض الأخطاء، وفي النهاية، ما نجح معي في النهاية هو هذا

استنساخ git clone https://github.com/philnash/twilio-video-react-hooks.git

بعد الانتهاء من ذلك، تم تنفيذ الأوامر الأخرى بشكل جيد:

cd twilio-video-react-hooks-خطافات-تفاعل-فيديو
تثبيت npm

النتيجة:

إذا كنت تقوم بالتشغيل محليًا، فيجب عليك تعيين ملف env الخاص بك كما هو موضح في مقالة فيل، ولكن نظرًا لأن التركيز هنا هو تشغيله في Back4app، فسوف أتخطى ذلك الآن.
سنظل بحاجة إلى قيم TWILIO_API_KEY و TWILIO_API_SECRET و TWILIO_ACCOUNT_SID من حسابك على Twilio، لكننا سنستخدمها في مكان مختلف.

تغيير الرمز قليلاً

نظرًا لأن بنيتنا مختلفة، سنحتاج إلى تغيير بعض الأشياء الأساسية.

الأول هو وحدات NPM. أمر تثبيت npm أعلاه سيُثبِّت الوحدات النمطية على حاسوبك، ولكن في Back4app عليك أن تخبر Parse أن يثبتها لك.

لدينا برنامج تعليمي رائع يشرح لك كيفية القيام بذلك، لذا اطلع عليه هنا.

في النهاية، انتهى ملف package.json الخاص بي على هذا النحو:

{ 
   "التبعيات": {
           "Express-pino-logger": "*",
           "twilio": "*"  
   } 
}

لاحظ أنني أقوم بتثبيت وحدة Twilio في أحدث إصدار لها (“*” تعني الأحدث). قد تتساءل في هذه المرحلة عن سبب قيامي بذلك، حيث أن Parse يحتوي بالفعل على وحدة Twilio مدمجة في المكدس:

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

دعونا نبنيها

من أجل النشر، يجب أن ننشئ نسخة محسّنة لوقت التشغيل من شفرتنا البرمجية. في مقالة فيل، يذكر أنه يجب علينا تشغيل:

تشغيل npm ديف

والتي ستعمل في بيئة محلية، ولكن في حالتنا هذه، من داخل دليل المشروع، سنقوم بتشغيل

تشغيل npm build

الذي سينتج مجلدًا جديدًا باسم بناء، يحتوي على جميع أصولنا:

سنقوم بعد ذلك بتحميل جميع المحتويات الموجودة داخل مجلد الإنشاء إلى المجلد العام في قسم التعليمات البرمجية السحابية.

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

في النهاية، يجب أن يبدو الهيكل الرئيسي الخاص بك على هذا النحو:

تكوين App.js

هناك ملف واحد يجب عليك تغييره يدويًا: ملف index.js داخل دليل خادم المشروع.

من الصعب تكوين Parse لتشغيل ملف باسم app.js، وليس index.js، لذا دعنا نعيد تسمية هذا الملف.

يمكنك إنشاء نسخة باسم app.js، وإعادة تسمية النسخة الأصلية إلى app.js، ولكن في النهاية، يجب أن تحمل اسم app.js:

سنحتاج أيضًا إلى إجراء بعض التغييرات على هذا الملف.

في السطر 7، حيث يقول

يشكل التطبيق = صريح();

يحتوي Parse بالفعل على Express مُحمّل ومُنشئ بالفعل، لذا سيتعارض ذلك مع ذلك. دعونا نعلق على هذا السطر:

وكذلك، الأسطر من 41 إلى 43، حيث تقول

app.listen(3001, () =>
  console.log('يعمل الخادم السريع على المضيف المحلي:3001')
);

لن يتمكن Parse من فتح هذا المنفذ لأسباب أمنية، لذا دعنا نعلق عليه أيضًا:

شيء آخر هو أننا في النهاية لم نستخدم وحدة Express-pino-logger، لذلك دعونا نعلق على السطرين 4 و10، حيث تقول

const pino = require('express-pino-logger')();
...
app.use(pino);

لذا سيبدو الأمر هكذا:

والآن، في الجزء العلوي من الملف، ستلاحظ أن هذا الملف يستدعي ملفين محليين آخرين: التكوين والرموز:

const config = يتطلب ('./config');
...
const { videoToken } = يتطلب('./tokens');

سنحتاج إلى رفع هذه الملفات المحلية مع ملف app.js، لذا دعنا نرفع الملفات الثلاثة في مجلد السحابة.

سيبدو الهيكل النهائي بهذا الشكل:

تم إنجاز جزء الترميز

الآن تم نشر الكود الخاص بنا وكل شيء على ما يرام. حان الوقت لبعض التكوينات.

هل تتذكر عندما قال فيل أنه يجب علينا تعيين ملف .env ببيانات الاعتماد من Twilio؟
في Parse، لدينا قسم لذلك في لوحة إعدادات الخادم.
افتح لوحة متغيرات البيئة:

وقم بإعداده تمامًا كما تفعل في ملف .env:

تذكر أنه يمكنك استرداد هذه القيم من حساب Twilio الخاص بك:

تكوين استضافة الويب

الآن، في جزء إعدادات الخادم، انتقل إلى قسم استضافة الويب والاستعلام المباشر:

تمكين استضافة الويب وتعيين نطاق فرعي back4app.io لتطبيقك:

احفظها وستكون جاهزاً للانطلاق.

الاختبار

حان الوقت الآن لاختبار تطبيقنا.

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

https://Your_Domain_Name.back4app.io

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

الخاتمة

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

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

ويمكنك أيضًا تعزيزها بميزات Parse مثل تسجيل الدخول باستخدام Google، وتسجيل الدخول باستخدام Apple، وتسجيل الدخول باستخدام LinkedIn، وتسليم البيانات في الوقت الفعلي، وربطها مع مركز قواعد البيانات الرائع للغاية.

إنه يتمتع بالكثير من القوة والكثير من الميزات والأفضل من ذلك كله: كل ذلك مجاني لتشغيل التطبيقات الصغيرة.