ionic – نصب محیط برنامه نویسی

در این درس ما به شما شنون میدیم چطور کار با آیونیک شروع به کار کنین . ابزار های زیر رو برای شروع به کار آیونیک نیاز دارین:

۱- NodeJS :

این یک پلتفرم پایه است که برای ساخت برنامه های موبایل با استفاده از آیونیک ضروری است . فعلا به طور مختصر براتون مراحل نصبش رو توضیح میدیم ولی برای درک بیشتر  باید منتظر آموزش های NodeJs ما باشین یا اینکه در گوگل سرچ کنین. همینطور باید بعد از اون npm رو همراه nodejs نصب کنین.

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

برای اوبونتو و … :

sudo apt-get install nodejs

و برای فدورا و … :

sudo ِyum install nodejs

و اگر نه :

از این آدرس میتونین به آخرین ورژن Node.Js برای سیستم عامل های مختلف دسترسی داشته باشین و هر کدوم رو که لازم دارین دانلود کنید.

فایل msi رو اجرا کنین و مراحل رو طی کنید …

برای تست : اجرای یک فایل

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

/* Hello, World! program in node.js */
console.log("Hello, World!")

حالا اینطوری اجراش کنین :

$ node main.js

اگه همه چی درست باشه برنامه باید اینطوری خروجی بده :

Hello, World!

 

خب Node.Js با موفقیت نصب شد.

۲- SDK اندروید :

اگه شما میخواین برنامه خودتون رو برای اندروید گسترش بدین به android sdk نیاز دارین ( سرور های گوگل ایران رو در لیست تحریمشون دارن پس میتونین با جستجو در سایت های ایرانی پیدا کنین )

۳- XCode :

اگر از سیستم عامل مک استفاده میکنین و میخواین برای ios برنامه بنویسین به Xcode  نیاز دارین .

۴- Cordova & ionic : این ها ابزار های اصلی برای شروع کار با ایونیک هستند . در این بخش به شما نخوه نصب آیونیک و قدم های ساده رو با فرض اینکه شما نرم افزار های بالا رو نصب کرده باشین توضیح میدیم .

نصب کوردوا و آیونیک :

من از ترمینال لینوکس استفاده میکنم ، ولی چون داریم از nodeJs استفاده میکنیم روی مک و ویندوز هم دستورات مشابهی باید وارد بشه.

npm install -g cordova ionic

یه مدت طول میکشه که طبیعیه و بعدش نصب میشن …

نتیجه چیزی شبیه این خواهد بود :

Screenshot from 2016-07-18 20-29-05

ساخت برنامه

برای ساختن برنامه تون شما ۳ تا گزینه دارین :

  • Tabs App:
  • Blank App:
  • Side menu app

Tabs App:

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

من یه پوشه به نام project توی Document م دارم که فعلا میخوام اونجا درست کنم :

 cd Document/projects

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

( این دستور مخفف change directory هست و جایی که شما هستین رو تغییر میده )

ionic start myApp tabs

دستور start توی آیونیک یه فولدر به نام myApp می سازه و فایل ها و فولدر ها رو آماده میکنه .

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

حالا میریم داخل پوشه برناممون :

cd myApp

این پوشه اصلی برنامه ماست و تمام فایل های برنامه این تو قرار دارن .

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

ionic platform add android

حالا بیاین برنامه رو بسازیم . اگه شمابعد از اجرای دستور بالا  اروری در مورد build گرفتین شما احتمالا sdk اندروید و مایحتوی(!) ش رو نصب نکردین . برای نصبش فعلا چیزی تو سایت نداریم ولی اگه آموزش اندروید رو اضافه کردیم قطعا توضیح میدیم!( تا اون موقع از گوگل کمک بگیرین )

ionic build android

sdk اندروید کند هست ! بنابراین من از Genymotion استفاده میکنم و به شما هم استفاده از سایر شبیه ساز های معروف اندروید رو پیشنهاد میکنم .

tabs-ionic

که نتیجه ش به این شکل خواهد بود

برنامه خالی

اگه شما میخواین از صفر شروع کنین شما میتونین از این پوسته آیونیک استفاده کنین . ما کار های مشابهی که بالا توضیح دادیم استفاده میکنیم فقط به جای ionic start myApp tabs از ionic start myApp blank استفاده میکنیم .

ionic start myApp blank

این دستور یک فولدر به نام  myApp میسازه و فایل ها و فولدر های آیونیک رو درش پیاده میکنه .

cd myApp

حالا بایدپلتفرم اندروید رو بهش اضافه کنیم همونطوری که بالا توضیح دادیم

ionic platform add android

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

ionic build android

بالاخره میتونیم اپمون رو اینطوری اجرا کنیم :

ionic run android

blank-ionic

اپ با منوی کناری

سومین قالبی که شما میتونین استفاده کنین side menu هست ( انگلیسیش از ترجمش خیلی قابل فهم تره !) . مراحل دقیقا مثل دو قالب قبلیه …

ionic start myApp sidemenu
cd myApp
ionic platform add android
ionic run android

 

sidemenu-ionic

تست کردم برنامه در مرورگر

از اونجایی که ما داریم با جاوااسکریپت کار میکنیم شما میتونین برنامتون رو روی هر مرورگری نمایش بدین . این باعث میشه که سریع تر کار کنین اما شما همیشه باید برنامه خودتون رو با شبیه ساز اندروید ( یا ios ) هم تست کنین . برای باز کردن برنامتون توی مرورگر از این دستور استفاده کنین :

ionic serve

کروم و فایرفاکس این قابلیت رو دارن که میشه اندازه  موبایلشون کرد !برای این کار f12 رو بشار بدین تا به دولوپر کنسول دسترسی داشته باشین .browser-view-ionic

قسمت بالا سمت چپ محیط دولوپر یک آیکون موبایل وجود داره که با کلیک کردن روی اون میتونین حالت موبایل رو روشن کنین.

ساختار فولدر پروژه

آیونیک فایل ها و فولدر ها ی زیر رو میسازه برای هر نوع برنامه ای. این خیلی برای توسعه دهندگان آیونیک مهمه که هدف از هر دایرکتوری و فایلی که در زیر اومده رو بفهمن :

tree-ionic

یک نگاه کلی میکنیم به هر فولدر و فایل هایی که در بالا ذکر شد:

  • hooks

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

  • platforms

این پوشه ای هست که نسخه های اندروید و ios درش ساخته میشه . در طول کار امکان داره که شما با برخی مشکلات درباره یک پلتفرم خاص روبرو بشین که فایل های اینجا لازمتون میشه ولی معمولا این قسمت رو هم باید در اکثر اوقات نادیده بگیریم.

  • plugins

این پوشه شامل پلاگین های کوردوا است . بعضی پلاگین ها در همون ابتدا که شما اپ آیونیک رو میسازین نصب میشن . ما به شما نشون میدیم که چطوری یک پلاگین کوردوا رو نصب کنین در جلسات آینده.

  • resources

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

  • scss

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

  • www

www پوشه اصلی ایه که ما روش کار میکنیم . شما بیشترین زمانتون رو اینجا میگذرونین . آیونیک ساختار پیشفرض خودش رو داخل www اعمال میکنه ولی شما همیشه میتونین بر اساس نیاز خودتون اون رو عوض کنین . وقتی شما این فولدر رو باز میکنین این ها رو میبینین  :

  • فولدر css جاییه که شما استایل های css خودتون رو مینویسین
  • img برای تصاویر
  • js شامل فایل اصلی پیکربندی برنامه (app.js) و ماژول های انگولارjs . همه کد های جاواسکریپت شما درون این فولدر خواهند بود .
  • libs جاییه که کتابخونه های شما قرار میگیرن.
  • templates برای فایل های html شما .
  • index.html به عنوان نقطه شروع برنامه شنا.

سایر فایل ها

.bowerrc  فایل پیکربندی bower هست .

.editorconfig فایل پیکربندی ادیتور هست .

.gitignore فایلیه که مشخص میکنه کدوم قسمت از فایل ها باید توسط گیت نادیده گرفته بشن .

bower.json  شامل کامپوننت های bower و متعلقات ! اگه شما بخواین از مدیریت بسته  bower استفاده کنین .

gulpfile.js استفاده میشه برای ساختن برنامه های خودکار با استفاده از مدیریت تسک gulp .

config.xml فایل پیکربندی کوردوا.

package.json  شامل اطلاعاتی درباره برنامه ، متعلقات و افزونه هایی که با استفاده از npm نصب شده اند.

2 thoughts on “ionic – نصب محیط برنامه نویسی

پاسخ دهید

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