راهنمای نصب سریع JavaScript

در این آموزش می خواهیم به صورت قدم به قدم نحوه راه اندازی تماس اینترنتی در پلتفرم وب را آموزش دهیم.

بعد از انجام مراحل زیر شما قادر خواهید بود که بین ۲ کاربر وب تماس اینترنتی برقرار نمائید.

نکته

در صورت تمایل به اطلاعات بیشتر به مستندات REST API مراجعه کنید.

۰. پیش نیاز ها

  • اکانت Firebase
  • اکانت کاوه نگار
  • Node.js & NPM (نسخه ۸ به بعد)
  • Chrome or Firefox Browser

۱. ایجاد برنامه در پنل کاوه نگار

برای شروع کار باید یک برنامه (Application) برای کار خود ایجاد کنید.

به صفحه تماس اینترنتی > ایجاد برنامه در پنل کاوه نگار مراجعه کنید. و بعد از ساخت برنامه ApiToken دریافت شده را برای مراحل بعد ذخیره کنید.

۲. ایجاد پروژه در Firebase

در سرویس تماس اینترنتی کاوه نگار، اطلاع رسانی تماس های دریافتی به مخاطب (Receptor) از طریق سرویس Push Notification انجام می شود. یعنی زمانی که Caller می خواهد با Receptor تماس بگیرد درخواست تماس به Receptor از طریق Push Notification ارسال می شود.

سرویس های مختلفی برای ارسال Push Notification وجود دارند که ما در این آموزش از سرویس Firebase استفاده می کنیم.

نکته

در صورتی که شما از سرویس دیگری برای ارسال Push Notification استفاده می کنید می توانید این بخش را در آن سرویس انجام دهید.

برای راه اندازی به Firebase Console مراجعه کنید. و مراحل زیر را مطابق ویدئو انجام دهید :

  • یک پروژه ایجاد کنید.
  • به پروژه ساخته شده یک اپلیکیشن وب اضافه نمائید.
  • مطابق ویدئو زیر عمل کرده و در مرحله آخر تنظیمات Firebase را برای مراحل بعد ذخیره نمائید.

۳. راه اندازی نمونه کد Back-End

برای پیاده سازی سرویس تماس اینترنتی باید بخشی از کارها در Back-End انجام شود :

  • ایجاد تماس از طریق REST API کاوه نگار
  • ارسال پوش نوتیفیکیشن
  • تشخیص هویت کاربران

برای راه اندازی نمونه کد Back-End مراحل زیر را انجام دهید:

۱. برای ارسال Push Notification از طریق Firebase , باید فایل Firebase Admin SDK Config را مطابق ویدئو زیر دریافت نمائید:

۲. سپس نمونه کد Back-End را به صورت زیر دریافت نمائید:

git clone https://github.com/kavenegar/call-backend-sample-node

۳. فایل Firebase Admin Sdk دریافت شده در مرحله قبل را به شاخه اصلی پروژه انتقال دهید.

۴. برای اجرای پروژه باید پارامترهای زیر را مقدار دهی کنید :

  • backend:kavenegar-api-token : شناسه اپلیکیشن ( Application Token ) کاوه نگار که بعد از ساخت اپلیکیشن دریافت کرده اید.

  • backend:firebase-project-file : مسیر فایل Firebase Admin Sdk که در مرحله قبل دریافت کرده اید.

برای راه اندازی پروژه دستور زیر را با مقادیر مناسب اجرا کنید :

npm install && npm start -s  \ 
--backend:kavenegar-api-token=eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJpbmZvQG1vaHNlbi53b3JrIiwicm9sZXMiOiJ1c2VyIiwidXNlcklkIjoxLCJhcHBsaWNhdGlvbklkIjoxLCJpYXQiOjE1MjU1MDExNzd9.N7B7kB3ATFKYcUgVkpybKM5dMmSUlIDiycUMHd2_sLY  \ 
--backend:firebase-project-file=./kavenegar-call-test-firebase-adminsdk-3c13i-5854914aaf.json

بعد از اجرا، خروجی زیر را دریافت می کنید :

Kavenegar Backend Sample Config :  {
    "kavenegarApiToken": "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJpbmZvQG1vaHNlbi53b3JrIiwicm9sZXMiOiJ1c2VyIiwidXNlcklkIjoxLCJhcHBsaWNhdGlvbklkIjoxLCJpYXQiOjE1MjU1MDExNzd9.N7B7kB3ATFKYcUgVkpybKM5dMmSUlIDiycUMHd2_sLY",
    "firebaseProjectFile": "kavenegar-call-test-firebase-adminsdk-3c13i-5854914aaf.json"
}
Kavenegar Backend Sample is listening on port 3000
[http://192.168.1.188:3000] // Server Local IP Address

در صورت گرفتن پیام مشابه تنظیمات موفقیت آمیز بوده و مرحله بعد را انجام دهید.

نکته

در خروجی بالا ‌IP آدرس ‍‍192.168.1.188 عمومی می باشد و برای اتصال اپلیکیشن وب خود به Back-End باید از این IP استفاده شود.

۴. راه اندازی نمونه کد JavaScript

نمونه کد JavaScript را می توانید به صورت زیر دریافت نمائید :

git clone https://github.com/kavenegar/call-js-sample

بعد از دریافت پروژه مراحل زیر را مطابق ویدئو انجام دهید :

۱. فایل index.html را باز کرده و اطلاعات دریافت شده در مراحل قبل را در متغیرهای زیر قرار دهید.

class KavenegarTestApplication {

    constructor() {
        ...
        this.baseApiURL = "http://IP:PORT"; // Back-End sample base url it can be http://127.0.0.1:3000
        this.firebaseConfig = { /* تنظیمات فایربیس خود را در اینجا قرار دهید */ };
        ...
    }
}

۲. فایل ‍‍firebase-messaging-sw.js را باز کرده و سپس تنظیمات دریافت شده Firebase را در آنجا نیز قرار دهید :

importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-messaging.js');

const firebaseConfig = { /* تنظیمات فایربیس خود را در اینجا قرار دهید */ };

let baseSampleURL = 'http://127.0.0.1:8080'; // Your sample running base url

۳. با اجرا کردن دستور زیر بر روی شاخه اصلی پروژه یک وب سرور بر روی پورت ۸۰۸۰ اجرا خواهد شد :

npm install
npm start

۴. پروژه بر روی آدرس http://localhost:8080 قابل دسترس خواهد بود.

۵. آزمایش

بعد از انجام دادن تمامی مراحل بالا شما می توانید بین ۲ مرورگر تماس اینترنتی برقرار نمائید.

برای مثال در صفحه اول با نام کاربری mohsen و در دستگاه دوم با نام کاربری amir لاگین کنید.

در صورتی که هر دو با موفقیت لاگین شدند در یکی از دستگاه ها نام کاربری طرف مقابل را وارد کرده و دکمه تماس را بزنید.




مستندات REST API ←