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

در قسمت قبلی یک بیس اولیه از بک اندمون رو ایجاد کردیم در این قسمت قراره

با الکترون فرانت پروژمون رو ایجاد کنیم

الکترون چیه ؟

الکترون یک فریم ورک / چارچوب و همچنین یک ابزار برای توسعه اپلیکیشن های دسکتاپ (ویندوز - لینوکس - مک) به وسیله html/css و javascript هست

همچنین الکترون توان استفاده از قدرت nodejs رو هم درون خودش فراهم کرده

برای شناخت بیشتر الکترون میتونید روی لینک زیر کلیک کنید

یک پوشه درست میکنیم و اسمش رو میزاریم rayconnect-electron-push برای ساخت این پوشه میتونید از رابطه گرافیکی سیستم عاملتون در ویندوز new folder یا از طریق رابط دستوری سیستم عاملتون اقدام کنید

که در ویندوز cmd و در لینوکس terminal میباشد

بعد کافیه با cmd یا terminal وارد پوشه مورد نظر بشیم و دستور زیر رو برای ایجاد یک پروژه بنویسیم

سپس با استفاده از دستور زیر پکیج های مورد نظرمون شامل electron - node-notifier و rayconnect-client رو نصب میکنیم

حالا کافیه کد های مورد نظرمون رو بنویسیم من یک فایل 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 بگیریم

یک مشکلی که تابع createWindow امون الان داره این هست که mainWindow در واقع چیز خاصی نیست پس باید mainWindow رو هم ایجاد بکنیم

اگه یادتون باشه ما در بک اندمون یدونه Query نوشته بودیم که توکن ها رو در صورت تکراری نبودن در یک ارایه ای ذخیره بکنه حالا ما میخوایم اون تابع رو صدا بزنیم

پارامتر ها :

address : ادرس کوئری

method: متد کوئری مورد نظر

scope : اسکوپ کوئری مورد نظر

uniqueID : ایدی سرویسی که این کوئری درون آن قرار دارد

TokenID : توکن سرویسی که این کوئری در آن قرار دارد

method : متدی کوئری مورد نظر

date : دیتایی که باید ارسال شود

در مثال ما TokenID برابر * قرار دارد که به معنای این است که هر توکنی از سرویس که این تابع را اجرا میکرد قابل قبول است

اما در uniqueID یوزر نیم ادمین سیستم قرار داده شده است که اشاره به سرویسی دارد که ادمین سیستم میباشد

لازم به ذکر است باید این قسمت را با username خودتان که از صفحه ساخت اپ رای کانکت دریافت کردید جایگزین کنید

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

به هنگام صدا زده شدن این کوئری ما به وسیله کتابخانه node-notifier که وظیفه آن نمایش یک نوتیفیکیشن بر روی صفحه میباشد

دیتای دریافت شده را بر روی صفحه نشان میدهیم

در نهایت فایل main.js ما به شکل زیر در آمده است

همچنین فایل package.json پروژه نیز به شکل زیر در آمده است

در نهایت با دستور npm start پروژه را اجرا خواهیم کرد

در قسمت بعد نحوه ارسال پیام از بک اند به فرانت اند را بررسی خواهیم کرد و سعی میکنیم با یک رابط دستوری ساده به تمامی کلاینت ها پیامی را ارسال کنیم

لینک قسمت بعدی به هنگام انتشار در همین جا قرار خواهد گرفت