رد کردن این محتوا

ساخت اولین برنامه با نرم افزار ساز Ionic در ویندوز

مقدمه

در این مقاله قصد داریم برنامه ی Hello World را در Ionic Framework بسازیم. برای ساخت برنامه با Ionic نیاز به نرم افزار های جانبی داریم که در بخش های مختلف مقاله توضیح خواهیم داد.

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

اولین نرم افزار مورد نیاز برای شروع کار با Ionic نرم افزار Node.JS است که یک مفسر سریع JavaScript به همراه تعداد زیادی کتابخانه جهت ساخت نرم افزار است.
Ionic Framework برپایه Apache Cordova Framework بنا شده است، بنابراین برای استفاده از Ionic نیاز هست Cordova Framework نیز بر روی دستگاه نصب شود. برای اطلاعات بیشتر مراجه کنید به : بررسی اجمالی نرم افزار ساز Ionic Framework
همچنین برنامه های ساخته شده با Ionic نیاز به Android SDK جهت ساخت فایل اجرایی برای اندروید را دارد.

نصب Node.JS

ابتدا نرم افزار Node.JS را از آدرس زیر دانلود نمایید.
لینک دانلود Node.Js
وبسایت Node.JS

در مرحله ی بعد فایل دانلود شده را اجرا نمایید تا صفحه ی نصب برنامه مطابق شکل زیر به نمایش درآید.پنجره ی نصب Node.JS

سپس لایسنس را تایید کنید و دکمه ی Next را فشار دهید و از تنظیمات پیش فرض پیروی کنید تا نرم افزار بر روی سیستم شما نصب شود.
تنظیمات پیشفرض node.js
بعد از نصب حتما کامپیوتر خود را راه اندازی مجدد (Restart) کنید.

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

ورژن node.js

جهت کسب اطلاعات بیشتر در زمینه ی نصب نرم افزار Node.Js به مقاله نصب نرم افزار NodeJs مراجه فرمایید.

نصب نرم افزار ساز Ionic

بعد از نصب نرم افزار Node.js نوبت به نصب نرم افزارساز Ionic می رسد. نصب این Framework بسیار ساده بوده و با نوشتن دستور زیر در cmd اجرا می شود.

نصب اندروید SDK

برای نصب SDK بهتر است Android Studio را از سایت گوگل دانلود و نصب نمایید. با این کار تقریبا هرچه مورد نیاز است توسط Android Studio نصب می شود بعد از نصب باید آدرس دهی ها را به فایل های SDK تنظیم کنیم.

برای تنظیم آدرس ها ابتدا به آدرس Control Panel\System and Security\System بروید. سپس، در قسمت Advanced System Settings در برگه Advanced به قسمت Environment Variables بروید.

System settings

system-properties

environment-variables

در قسمت System variables باید دو متغیر جدید اضافه کنیم.

  • ANDROID_HOME : این متغیر به محل نصب SDK اندروید اشاره می کند.
  • JAVA_HOME : این متغیر به محل نصب JDK اشاره می کند.

همچنین بهتر است آدرس پوشه ی tools و platform-tools در SDK را به متغیر Path در همین قسمت اضافه کنیم.

ساخت اولین برنامه با Ionic

بعد از مراحل نصبی که توضیح دادیم حال زمان ساخت اولین نرم افزار با Ionic است برای این کار ابتدا در cmd به پوشه ی دلخواه می رویم. به عنوان مثال:

سپس با دستور زیر ساختار برنامه را بسازید:

با اجرای این دستور پوشه ای با نام HelloWorld ساخته می شود که فایل های مورد نیاز در آن قرار میگیرند.

سپس با اجرای دستور زیر Android را به برنامه ی خود اضافه می کنیم.

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

توجه داشته باشید که فقط برای اولین بار با اجرای این دستور ionic شروع به دانلود ابزارهایی می کند که برای اجرای برنامه مورد نیاز است.

چند نکته

ایران برای دانلود بعضی از کتابخانه های مورد استفاده ی Ionic توسط سازندگان تحریم شده است. بنابراین، برای دانلود کتابخانه نیاز به VPN یا Proxy دارید.

فایل های Html , CSS و Javascript برنامه در پوشه ی www قرار میگیرند.

منتشر شده آموزش

2 نظر

  1. ahmad ahmad

    با سلام و خسته نباشید .
    در هنگام اجرای دستور ionic cordova build android با اررور مواجه میشم . با توجه به اینکه تمام مراحل بالا را با دقت انجام داده ام.

    • digiways digiways

      سلام دلایل مختلفی ممکنه وجود داشته.
      مثلا SDK اندروید یا چیزهایی از این دست.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *