آموزش Cordova - بخش دوم: نصب ابزارهای مورد نیاز و ایجاد اولین اپلیکیشن

آموزش Cordova

در بخش اول این آموزش (آموزش Cordova - بخش اول: مقدمه) یک مقدمه، پیشنیاز ها، مزیت ها و محدودیت های Cordova را بیان کردیم.

در این بخش ابزارهای مورد نیاز را نصب خواهیم کرد و در انتها اولین اپلیکیشن ساده خود را با Cordova ایجاد خواهیم کرد.

نرم افزارهای مورد نیاز

  • NodeJS & NPM: پلتفرم مورد نیاز برای توسعه در Cordova
  • Android SDK: برای توسعه اپلیکیشن برای Android
  • XCode: برای توسعه اپلیکیشن برای IOS

نصب Cordova

قبل از شروع باید بدانید که ما Cordova را بر روی ویندوز و از طریق خط فرمان نصب خواهیم کرد!

قدم اول: نصب git

شما می توانید بدون استفاده از git از Cordova برای توسعه اپلیکیشن های هیبریدی استفاده کنید، ولی نصب git برای فعالیت فرایندهای پس زمینه ای در Cordova لازم است. شما می توانید git را از اینجا دانلود کنید.

پس از نصب جهت پیکربندی مراحل زیر را طی کنید:


  • کلیک راست بر روی Computer
  • انتخاب Properties
  • انتخاب Advanced System settings
  • انتخاب Environment Variables
  • انتخاب System Variables
  • انتخاب Edit

مسیر زیر در انتهای فیلد variable value کپی کنید. این مسیر پیشفرض نصب شده git است، در صورتی که در مسیر دیگری git را نصب کرده اید، آن را کپی کنید.

;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd

برای تست صحت نصب git شما میتوانید از طریق خط فرمان (CMD) واژه git را تایپ کرده و enter کنید.

قدم دوم: نصب Cordova

با اجرای خط زیر، ماژول Cordova بصورت سراسری بر روی Nodejs دانلود و نصب خواهد شد:

C:\Users\username>npm install -g cordova

برای بررسی صحت نصب و مشاهده نسخه نصب شده Cordova خط زیر را اجرا کنید:

C:\Users\username>cordova -v

خب، نصب نرم افزارهای مورد نیاز به پایان رسید و محیط توسعه اپلیکیشن های هیبریدی موبایل در Cordova آماده شد.

ایجاد اولین اپلیکیشن

در خط فرمان به مسیر دلخواه خود برای ایجاد پروژه جدید رفته و خط کد زیر را اجرا کنید:

C:\Users\username\Desktop>cordova create CordovaProject io.cordova.hellocordova CordovaApp
  • CordovaProject: نام پوشه پروژه
  • io.cordova.hellocordova: مقدار پیش فرض domain value است، شما می توانید مقدار domain value دلخواه خود را قرار دهید.
  • CordovaApp: عنوان اپلیکیشن

افزودن پلتفرم

برای افزودن پلتفرم مورد نظر ابتدا به مسیر پروژه رفته، در این مثال نام پروژه CordovaProject است، برای افزودن پلتفرم مورد نظر باید دقت داشته باشید که SDK مرتبط با آن را نصب کرده باشید. از آنجایی که ما در حال توسعه این اپلیکیشن بر روی ویندوز هستیم و تنها Android SDK را نصب کردیم، تنها پلتفرم آندروید را اضافه میکنیم.

C:\Users\username\Desktop\CordovaProject>cordova platform add android

برای افزودن دیگر پلتفرم ها به روش زیر عمل می کنیم:

C:\Users\username\Desktop\CordovaProject>cordova platform add wp8
C:\Users\username\Desktop\CordovaProject>cordova platform add amazon-fireos
C:\Users\username\Desktop\CordovaProject>cordova platform add windows
C:\Users\username\Desktop\CordovaProject>cordova platform add blackberry10
C:\Users\username\Desktop\CordovaProject>cordova platform add firefoxos

جهت افزودن پلتفرم در Mac به روش زیر عمل کنید:

$ cordova platform add IOS
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos

برای حذف پلتفرم:

C:\Users\username\Desktop\CordovaProject>cordova platform rm android

ساخت و اجرا (Building and Running)

در این مرحله ما برای تست و مشاهده نتیجه، اپلیکیشن را برای پلتفرم مورد نظر ساخت و اجرا (Building and Running) می کنیم. در اینجا ما پلتفرم را آندروید مشخص کردیم:

C:\Users\username\Desktop\CordovaProject>cordova build android

هم اکنون می توانید اپلیکیشن را اجرا کنید (البته در صورتی که شبیه سازی را بطور  پیش فرض انتخاب کرده اید):

C:\Users\username\Desktop\CordovaProject>cordova emulate android

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

C:\Users\username\Desktop\CordovaProject>cordova run android

برای اجرای اپلیکیشن در مرورگر اینترنتی پیش فرض سیستم، نیازی به مرحله build نبوده و تنها با اجرای خط زیر کافیست:

C:\Users\username\Desktop\CordovaProject>cordova run browser

با فرمان اجرا، اپلیکیشن بر روی پلتفرم مشخص شده نصب میشود، در صورتی که روند اجرا بدون خطا انجام شود صفحه ای مانند تصویر زیر بصورت پیش فرض نمایش داده می شود:
صفحه پیش فرض اپلیکیشن cordova

» بخش سوم: فایل config.xml



بومیم