آموزش ساخت برنامه دسکتاپ با React و Electron

  • چهارشنبه 18 دسامبر 2019
  • بازدید ۲۳۸ نفر

create desktop app using react and electron 7527 تصویر

آموزش ساخت برنامه دسکتاپ با React و Electron

در این بخش نحوه استفاده از تکنولوژی React به منظور ساخت برنامه دسکتاپ با React و Electron را بررسی خواهیم کرد. در ادامه می توانید جزئیات مربوط به این آموزش را مشاهده کنید.

React چیست؟

React یک کتابخانه front-end است که برای هندل کردن لایه view برنامه های وب و موبایل مورد استفاده قرار می گیرد. این فریم ورک توسط Facebook توسعه داده شده است. در حال حاضر این کتابخانه جزء محبوب ترین کتابخانه های زبان برنامه نویسی JavaScript محسوب می شود.

Electron چیست؟

الکترون یک فریم ورک متن باز است که توسط Github (در حال حاضر مایکروسافت آن را خریده است) به منظور ایجاد نرم افزارهای چند سکویی با استفاده از تکنولوژی های وب (HTML، CSS و JavaScript) ساخته شده است. این فریم ورک برای ساخت نرم افزارهای دسکتاپ، Chromium و Node.js را با هم در یک نرم افزار (single) ترکیب می کند که خروجی تولید شده می تواند بر روی سیستم عامل های لینوکس، مک و ویندوز اجرا شود.

مراحل ساخت پروژه

قبل از اجرای مراحل زیر مطمئن شوید که Node.js، npm و create-react-app بر روی سیستم شما نصب شده است.

  • ایجاد پروژه React
  • نصب الکترون
  • نصب foreman
  • ایجاد فایل js در داخل فولدر src
  • افزودن پراپرتی main و homepage به فایل json
  • افزودن اسکریپت اجرای الکترون و foreman به فایل json
  • ایجاد فایل electron-wait-react.js
  • ایجاد فایل procfile

مرحله ۱

خط فرمان (یا terminal) خود را باز کرده و در جایی که میخواهید پروژه جدید ایجاد شود، دستور create-react-app your-app-name یک پروژه جدید ایجاد کنید (به جای your-app-name نام پروژه مورد نظرتان را بنویسید).

مرحله ۲

بعد از این که با دستور فوق پروژه React ایجاد شد، با دستور cd your-app-name به فولدری پروژه بروید و دستور npm install –save-dev electron را اجرا کنید تا الکترون دانلود و به پروژه شما اضافه شود.

مرحله ۳

سپس در همان خط فرمان دستور npm install –save-dev foreman را اجرا کنید تا بسته foreman هم نصب شود. این بسته برای مدیریت process ها استفاده می شود.

مرحله ۴

یک فایل جدید به نام main.js در داخل فولدر src ایجاد کرده و محتوای زیر را در داخل آن بنویسید.

اگر به سورس کد فوق توجه کنید، در داخل تابع createWindow آدرس شروع (startUrl) را به شکل زیر تعریف کرده ایم. با این کار اگر پروژه در حالت dev باشد، آدرس شروع برابر با مقدار متغیر محیطی EWR_START_URL خواهد بود. در غیر این صورت آدرس فایل index.html تنظیم خواهد شد.

 

توجه! متغیر محیطی EWR_START_URL را در بخش scripts فایل package.json تعریف خواهیم کرد.

مرحله ۵ و ۶

محتوای فایل package.json را به شکل زیر تغییر داده و پراپرتی های main و homepage که هردو مربوط به الکترون هستند را به آن اضافه کنید. همچنین در بخش scripts هم دستورات مربوط به اجرای foreman و الکترون را اضافه کنید.

مرحله ۷

در این حالت اگر بخواهیم پروژه را اجرا کنیم باید ابتدا پروژه react را اجرا و سپس الکترون را اجرا کنیم. این موضوع کمی آزار دهنده است. برای حل این مشکل می توانیم از foreman و اسکریپت زیر استفاده کنیم. یک فایل با نام electron-wait-react.js ایجاد کرده و کدهای زیر را در داخل آن بنویسید.

کد فوق وضعیت react را بررسی میکند و اگر اجرا شده باشد، اسکریپت مربوط به اجرای الکترون را اجرا می کند.

مرحله ۸

یک فایل جدید با نام procfile (بدون پسوند) ایجاد کرده و محتوای زیر را در داخل آن بنویسید.

این فایل مربوط به foreman است و بعد از اجرا شدن دستور nf start، ابتدا خط اول و سپس خط دوم اجرا خواهد شد. خط اول پروژه react را اجرا می کند (متغیر محیطی تنظیم شده، مشخص می کند که نباید بعد از اجرای react در مرورگر نمایش داده شود) و خط دوم هم اسکریپتی که در مرحله ۷ ایجاد کردیم را با استفاده از node اجرا می کند.

در نهایت ساختار پروژه شما باید به این شکل باشد:

create desktop app using react and electron 7527 2 تصویر

اگر مراحل فوق را به درستی انجام داده باشید، با اجرای دستور npm start در خط فرمان، خروجی زیر را مشاهده خواهید کرد.

create desktop app using react and electron 7527 1 تصویر

نکته! بعد از دانلود سورس کد پروژه ابتدا باید دستور npm install را اجرا کنید تا وابستگی های مربوط به پروژه دانلود و نصب شوند.

باکس دانلود
شناسه:
۷۵۲۷
زبان:
react
دیتابیس:
ندارد
قیمت:
رایگان
لینک دانلود:
جهت دانلود در کانال تلگرامی (ID: @Sourcesara) عضو شده و از لینک زیر دانلود را انجام دهید
ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است