آموزش تنظیمات محیطی در برنامه نویسی آیونیک

آموزش تنظیمات محیطی در برنامه نویسی آیونیک

 

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

لیست زیر شامل لیست اجزای مورد نیاز برای شروع با آیونیک است.

• NodeJS

این بستر اصلی مورد نیاز برای ایجاد برنامه های موبایل با استفاده از آیونیک است. می توانید جزئیات مربوط به نصب NodeJS را در تنظیمات محیط NodeJS مشاهده کنید. هنگام نصب NodeJS حتماً npm را نصب کنید.

• Android SDK

اگر می خواهید روی سیستم عامل ویندوز کار کنید و برنامه های خود را برای سیستم عامل اندروید توسعه می دهید ، باید تنظیمات Android SDK را روی دستگاه خود داشته باشید. پیوند زیر دارای اطلاعات دقیق در مورد راه اندازی Android Environment است.

• XCode

اگر می خواهید روی سیستم عامل Mac کار کنید و در حال توسعه برنامه های خود برای سیستم عامل iOS هستید ، پس باید تنظیمات XCode را روی دستگاه خود داشته باشید. پیوند زیر دارای اطلاعات دقیق در مورد راه اندازی محیط iOS است.

• cordova and Ionic

این SDK اصلی است که برای شروع کار با آِونیک مورد نیاز است. این درس چگونگی راه اندازی آیونیک را در گام ساده توضیح می دهد با این فرض که قبلاً تنظیمات مورد نیاز را همانطور که در جدول بالا توضیح داده شده است ، دارید.

نصب Cordova و Ionic

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

 

ایجاد برنامه ها

هنگام ایجاد برنامه در آیونیک، برای شروع می توانید از سه گزینه زیر استفاده کنید –

• برنامه Tabs
• برنامه Blank
• برنامه Side menu

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

برنامه Tabs در تنظیمات محیطی در برنامه نویسی آیونیک

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

 

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

 

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

 

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

اکنون اجازه دهید پروژه Cordova را برای Android Platform اضافه کرده و افزونه های Cordova را نیز نصب کنیم. کد زیر به ما امکان می دهد برنامه را روی شبیه ساز اندروید یا یک دستگاه اجرا کنیم.

 

مرحله بعدی ساخت برنامه است. اگر پس از اجرای دستور زیر خطاهای ساختمانی دارید، احتمالاً Android SDK و وابستگی های آن را نصب نکرده اید.

 

آخرین مرحله از فرآیند نصب، اجرای برنامه شماست که در صورت اتصال دستگاه تلفن همراه یا شبیه ساز پیش فرض در صورت عدم اتصال دستگاه، دستگاه را شروع می کند. Android Default Emulator کند است ، بنابراین من به شما پیشنهاد می کنم Genymotion یا برخی دیگر از Android Emulator های معروف را نصب کنید.

 

این نتیجه زیر است که یک برنامه Ionic Tabs است.

 

برنامه blank

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

 

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

 

اجازه دهید پروژه Cordova را برای Android Platform اضافه کرده و افزونه های اساسی Cordova را همانطور که در بالا توضیح داده شد نصب کنیم.

 

مرحله بعدی ساخت برنامه ما است –

 

در آخر ، ما برنامه را با کد زیر شروع می کنیم –

 

این نتیجه زیر را ایجاد می کند ، که یک برنامه Ionic Blank است.

 

برنامه side menu

سومین الگویی که می توانید استفاده کنید ، الگوی Side Menu است. مراحل همان دو الگو قبلی است. ما همانطور که در کد زیر نشان داده شده است ، هنگام شروع برنامه ما فقط sidemenu را اضافه خواهیم کرد.

 

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

 

اجازه دهید ما پروژه Cordova را برای Android Platform اضافه کنیم و پلاگین های اساسی Cordova را با کدی که در زیر آورده شده نصب کنیم.

 

مرحله بعدی ساخت برنامه ما با کد زیر است.

 

در آخر ، ما برنامه را با کدی که در زیر آورده شده است شروع می کنیم.

 

این نتیجه زیر را ایجاد می کند ، که یک برنامه Ionic Side Menu است.

 

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

از آنجا که ما در حال کار باجاوا اسکریپت هستیم، می توانید برنامه خود را در هر مرورگر وب ارائه دهید. این روند ساخت شما را تسریع می کند، اما شما همیشه باید برنامه خود را روی شبیه سازها و دستگاه های بومی آزمایش کنید. کد زیر را برای سرویس دادن به برنامه خود در مرورگر وب تایپ کنید.

 

با دستور بالا برنامه شما در مرورگر وب باز می شود. Google Chrome قابلیت آزمایش حالت را برای آزمایش توسعه تلفن همراه فراهم می کند. F12 را فشار دهید تا به کنسول توسعه دهنده دسترسی پیدا کنید.

 

در گوشه سمت چپ و بالای پنجره کنسول، آیکون “Toggle Device Mode” وجود دارد. مرحله بعدی کلیک بر روی آیکون “Dock to Right” در گوشه بالا سمت راست است. پس از تازه شدن صفحه، باید آماده آزمایش در مرورگر وب باشید.

ساختار پوشه پروژه

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

 

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

• Hooks – Hooks اسکریپت هایی هستند که می توانند در طی مراحل ساخت تحریک شوند. آنها معمولاً برای سفارشی سازی دستورات Cordova و ساخت فرایندهای خودکار استفاده می شوند. ما در طول این آموزش از این پوشه استفاده نخواهیم کرد.
• Platforms – این پوشه ای است که پروژه های Android و IOS در آن ایجاد می شوند. در حین توسعه ممکن است با برخی مشکلات خاص پلتفرم روبرو شوید که به این پرونده ها نیاز دارد ، اما باید بیشتر اوقات آنها را دست نخورده بگذارید.
• پلاگین ها – این پوشه شامل پلاگین های Cordova است. هنگامی که در ابتدا یک برنامه آیونیک ایجاد می کنید ، برخی از افزونه ها نصب می شوند. ما در درس های بعدی به شما نحوه نصب افزونه های Cordova را نشان خواهیم داد.
• منابع – این پوشه برای افزودن منابعی مانند نماد و صفحه پاشش به پروژه شما استفاده می شود.
• Scss – از آنجا که هسته آیونیک با Sass ساخته شده است ، این پوشه ای است که پرونده Sass شما در آن قرار دارد. برای ساده سازی فرآیند، ما از Sass برای این آموزش استفاده نمی کنیم. استایل ما با استفاده از CSS انجام می شود.
• www – www پوشه اصلی کار برای توسعه دهندگان Ionic است. آنها بیشتر وقت خود را در اینجا می گذرانند. Ionic ساختار پوشه پیش فرض خود را در داخل “www” به ما می دهد ، اما توسعه دهندگان همیشه می توانند آن را متناسب با نیازهای خود تغییر دهند. با باز شدن این پوشه ، پوشه های فرعی زیر را پیدا خواهید کرد –

پوشه css ، جایی که شما سبک CSS خود را در آن می نویسید.

پوشه img برای ذخیره تصاویر.

پوشه js که شامل فایل پیکربندی اصلی برنامه ها (app.js) و اجزای AngularJS (کنترل کننده ها ، سرویس ها ، دستورالعمل ها) است. تمام کدهای JavaScript شما در داخل این پوشه ها خواهد بود.

پوشه libs ، جایی که کتابخانه های شما در آن قرار می گیرد.

پوشه templates برای فایل های HTML شما.

Index.html به عنوان نقطه شروع برنامه شما.

Other Files– از آنجا که این یک آموزش برای مبتدیان است ، ما فقط برخی از پرونده های مهم دیگر و اهداف آنها را نیز ذکر می کنیم.

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

.editorconfig پرونده پیکربندی ویرایشگر است.

.gitignore برای آموزش اینکه کدام قسمت از برنامه باید نادیده گرفته شود هنگامی که می خواهید برنامه خود را به مخزن Git فشار دهید ، استفاده می شود.

در صورت انتخاب استفاده از مدیر بسته bower ، bower.json شامل اجزا و وابستگی های bower خواهد بود.

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

config.xml پرونده پیکربندی Cordova است.

package.json حاوی اطلاعات مربوط به برنامه ها ، وابستگی ها و افزونه های آنهاست که با استفاده از مدیر بسته NPM نصب می شوند.

 

منبع.

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

1. آموزش برنامه نویسی آیونیک
2. نگاهی کلی به آموزش برنامه نویسی آیونیک