آموزش ساخت یک سرویس اطلاع رسانی درون سازمانی (قسمت سوم)

در قسمت قبلی یک بیس اولیه از بک اندمون رو ایجاد کردیم در این قسمت قراره با الکترون فرانت پروژمون رو ایجاد کنیم الکترون چیه ؟الکترون یک فریم ورک / چارچوب و همچنین یک ابزار برای توسعه اپلیکیشن های دسکتاپ (ویندوز - لینوکس - مک) به وسیله html/css و javascript هستهمچنین الکترون توان استفاده از قدرت nodejs رو هم درون خودش فراهم کرده برای شناخت بیشتر الکترون میتونید روی لینک زیر کلیک کنید https://www.electronjs.org/ یک پوشه درست میکنیم و اسمش رو میزاریم rayconnect-electron-push برای ساخت این پوشه میتونید از رابطه گرافیکی سیستم عاملتون در ویندوز new folder یا از طریق رابط دستوری سیستم عاملتون اقدام کنید که در ویندوز cmd و در لینوکس terminal میباشدبعد کافیه با cmd یا terminal وارد پوشه مورد نظر بشیم و دستور زیر رو برای ایجاد یک پروژه بنویسیم دستور ایجاد یک پروژه npm سپس با استفاده از دستور زیر پکیج های مورد نظرمون شامل electron - node-notifier و rayconnect-client رو نصب میکنیمدستور نصب ابزار های مورد نظر با npmحالا کافیه کد های مورد نظرمون رو بنویسیم من یک فایل main.js ایجاد میکنم و در ابتدای فایل لایبرری های مورد نظرم رو به شکل زیر صدا میزنیمبعد یک فایل index.html میسازم که بتونیم یک چیز خیلی خیلی ساده رو تو صفحه نشونش بدیمخوب تا اینجای کار اوکیه بریم سراغ ادامه کد های فایل main.js تا اینجای کار فایل main.js امون این شکلی شده تابع createWindow رو برای ایجاد کردن یک پنجره جدید و لود کردن اون فایل index.html امون نوشتیمبعد با کد app.on(&quotready&quot, createWindow);تابع رو صدا زدیم این کالبک وقتی صدا زده میشه که الکترون کامل لود بشهدر خط بعدی هم app.on(&quotwindow-all-closed&quot, app.quit);رو برای این نوشتیم که هنگامی که پنجره الکترون بسته شد اپمون بسته بشهحالا میخوایم رای کانکت رو با تنظیمات پایه درون فانکشن createWindow صدا بزنیمفقط یادتون باشه در قسمت appID اپ ایدی خودتون رو قرار بدید همچنین میتونید از ابزار هایی مثل dotenv استفاده کنید از اونجایی که فانکشن createWindow از نوع async هست پس ما میتونیم توابعی از نوع await تعریف کنیمما فعلا میخوایم برای هر باری که این برنامه اجرا شد یک دسترسی از نوع guest بگیریم کد بالا یک دسترسی از نوع guest میگیرهیک مشکلی که تابع createWindow امون الان داره این هست که mainWindow در واقع چیز خاصی نیست پس باید mainWindow رو هم ایجاد بکنیماگه یادتون باشه ما در بک اندمون یدونه Query نوشته بودیم که توکن ها رو در صورت تکراری نبودن در یک ارایه ای ذخیره بکنه حالا ما میخوایم اون تابع رو صدا بزنیم تابع رو با دستور execQuery صدا میزنیم پارامتر ها :address : ادرس کوئریmethod: متد کوئری مورد نظرscope : اسکوپ کوئری مورد نظرuniqueID : ایدی سرویسی که این کوئری درون آن قرار داردTokenID : توکن سرویسی که این کوئری در آن قرار داردmethod : متدی کوئری مورد نظرdate : دیتایی که باید ارسال شود در مثال ما TokenID برابر * قرار دارد که به معنای این است که هر توکنی از سرویس که این تابع را اجرا میکرد قابل قبول استاما در uniqueID یوزر نیم ادمین سیستم قرار داده شده است که اشاره به سرویسی دارد که ادمین سیستم میباشد لازم به ذکر است باید این قسمت را با username خودتان که از صفحه ساخت اپ رای کانکت دریافت کردید جایگزین کنید در نهایت مشابه قسمت سرور یک کوئری در کلاینت تعریف میکنیم که توسط سرور قابل صدا زدن باشد به شکل زیربه هنگام صدا زده شدن این کوئری ما به وسیله کتابخانه node-notifier که وظیفه آن نمایش یک نوتیفیکیشن بر روی صفحه میباشد دیتای دریافت شده را بر روی صفحه نشان میدهیمدر نهایت فایل main.js ما به شکل زیر در آمده استهمچنین فایل package.json پروژه نیز به شکل زیر در آمده استدر نهایت با دستور npm start پروژه را اجرا خواهیم کرددر قسمت بعد نحوه ارسال پیام از بک اند به فرانت اند را بررسی خواهیم کرد و سعی میکنیم با یک رابط دستوری ساده به تمامی کلاینت ها پیامی را ارسال کنیم لینک قسمت بعدی به هنگام انتشار در همین جا قرار خواهد گرفت