فریم ورک چیست؟

فریم ورک (Framework) یا چارچوب نرم افزاری، بستری برای توسعه برنامه های نرم افزاری است که توسعه دهندگان نرم افزار می توانند اپلیکیشن های مختلف را برای یک پلتفرم خاص (مثل موبایل یا دسکتاپ)، در آن طراحی و ایجاد کنند. برای مثال، یک فریم ورک ممکن است شامل کلاس ها، کتابخانه ها، کامپایلر و توابع از پیش تعریف شده باشد که می تواند برای پردازش ورودی، مدیریت دستگاه های سخت افزاری و تعامل با نرم افزار سیستم، مورد استفاده قرار گیرد. همچنین یک فریم ورک می‌تواند شامل تعدادی رابط برنامه نویسی نرم افزار (application programming interface- API) نیز باشد. فریم ورک همانطور که از نام آن (به معنی چارچوب) مشخص است، برای ایجاد پایه و اساس برنامه نویسی طراحی شده است، در حالی که یک API دسترسی برنامه نویس به برخی عناصر موجود در فریم ورک را فراهم می کند.

فریم ورک Ionic چیست؟

فریم ورک آیونیک (Ionic) یک کیت توسعه نرم افزار front-end (به اختصار SDK) است که در سال 2013 منتشر شده است. Ionic به شکل رایگان و متن باز (open-source) در اختیار کاربران قرار گرفته است و به آن ها این امکان را می دهد که برای برنامه نویسی اپلیکیشن های موبایل برای انواع سیستم عامل های iOS ،Windows Phone و Android، فقط از یک codebase استفاده کنند. در واقع می توان گفت که Ionic ابزاری چند سکویی (cross-platform) برای توسعه موبایل است.

تعریف SDK: مخفف عبارت Software Development Kit به معنی «کیت توسعه نرم افزار» است. همانطور که از نام آن پیداست (کیت به معنی ابزار)، یک سری ابزار برای کمک به توسعه نرم افزار است که از طریق کمپانی عرضه دهنده آن در اختیار توسعه دهنده قرار داده می شود تا بتواند با استفاده از آن، برنامه خود را طبق پلتفرم کمپانی هماهنگ کند. در حقیقت SDK شامل مجموعه ای از ابزار ها مانند کتابخانه ها، نمونه کد، توابع کامپایل شده و... است که کار توسعه برنامه برای یک محیط یا پلتفرم خاص را راحت تر می کند. برای مثال شرکت اوراکل یک SDK برای توسعه دهندگان جاوا ایجاد و آن را با نام JDK منتشر کرده است.

تعریف چند سکویی (Cross-Platform): اپلیکیشن چند سکویی به اپلیکیشن هایی گفته می شود که قابل اجرا روی چندین پلتفرم یا سیستم عامل (سکو) بوده و به نوعی نقطه مقابل اپلیکیشن های بومی هستند که تنها روی یک پلتفرم اجرا می شوند.

ابزار Ionic به شما امکان ایجاد اپلیکیشن های موبایل ترکیبی (hybrid mobile application) را می دهد. همچنین این بستر به شما این امکان را می دهد تا با کمک اپلیکیشن های تحت وب (web application) و زبان هایی مانند HTML ، CSS ، javascript ، Angular و Typescript ، اپلیکیشن هایی برای موبایل بسازید. Ionic مجموعه ای از اجزای سازنده را، که برای عملکرد یک اپلیکیشن موبایل لازم است به توسعه دهندگان عرضه می کند.
Ionic دارای عملکردی کارآمد و با حداقل دستکاری در DOM است. این برنامه با رابط خط فرمان (command-line interface) مختص به خود عرضه می شود که به شما امکان توسعه برنامه و ذخیره کدهایتان را می دهد.

تعریف DOM : مخفف Document Object Model به معنای مدل شیءگرای سند است که با نمایش یک ساختار درختی از یک سند مانند HTML (که حاوی محتوایی از یک صفحه وب است)، شرایطی را فراهم می کنند که scriptها توانایی دسترسی به Objectهای صفحات HTML را به روش های مختلف داشته باشند تا بتوانند آنها را ایجاد، حذف یا ویرایش کنند. هر شاخه این درخت به یک گره ختم می شود که شامل تعدادی شیء است. متدهای DOM اجازه دسترسی برنامه به این درخت را می دهند که با دسترسی به شاخه های این درخت می توانید ساختار، سبک یا محتوای سند را تغییر دهید. به عبارت دیگر، هنگامی که یک صفحه وب بارگذاری می شود، مرورگر از آن صفحه، یک مدل شیءگرا (DOM) ایجاد می کند.

تعریف اپلیکیشن ترکیبی (Hybrid Application): به طورکلی، زمانی که قصد ساخت یک اپلیکیشن موبایل را دارید، سه راه برای طراحی و ساخت آن پیش رو خواهید داشت: ساخت اپلیکیشن موبایل به شکل Native App (اپلیکیشن بومی)،Web App (اپلیکیشن تحت وب) یا Hybrid App (اپلیکیشن ترکیبی). دراین میان، اپلیکیشن ترکیبی ازنظر فنی اپلیکیشنی است که ترکیبی از ویژگی های Web App و Native App را در خود گنجانده است. این اپلیکیشن ها عملکرد چند سکویی را عرضه می کنند و مانند اپلیکیشن های تحت وب، تنها برای یک پلتفرم یا دستگاه خاص ساخته نمی شوند.

تاریخچه پیدایش Ionic

Ionic پلتفرم محبوبی است که توسط بسیاری از توسعه دهندگان برای ساخت اپلیکیشن های موبایل و همچنین برنامه های دسکتاپ (desktop application) به طور گسترده ای مورد استفاده قرار گرفته است. Ionic تمامی ویژگی های (Features) لازم برای تحویل و به روز رسانی مداوم اپلیکیشن ها را به توسعه دهندگان عرضه می کند.
ionic در نوامبر سال 2013 با اولین نسخه آلفای خود به بازار معرفی شد. از آن زمان تا کنون، نسخه های مختلفی برای پلتفرم Ionic عرضه شده است که به توسعه دهندگان اجازه می دهد اپلیکیشن های خلاقانه ای برای موبایل بسازند. نسخه های مختلف Ionic عبارت اند از:

Ionic 1

این نسخه در سال 2013 منتشر شد که با فریم ورک Angular 1 سازگار است و از دستورالعمل های خود برای عرضه کامپوننت های سفارشی انگولار (Angular) استفاده می کند که فقط در خود برنامه Angular قابل اجرا هستند. در این نسخه به هیچ کامپوننتی برای وب نیاز نیست.

تعریف کامپوننت (Component): کامپوننت ها یا اجزای کوچک در علم برنامه نویسی، ابزارهایی هستند که برای انجام فعالیت هایی خاص و پیش گیری از نوشتن کدهای اضافی به کار گرفته می شوند. کامپوننت در حقیقت یک بلوک قابل تفکیک یا یک قطعه کد اجرایی شامل تابع یا توابع مرتبط به هم از برنامه است که به طور معمول قابلیت استفاده مجدد و ترکیب با سایر کامپوننت ها را دارد؛ زیرا هرچه یک برنامه دارای اجزای کوچک تری باشد، انعطاف پذیری آن بالاتر و عیب یابی آن ساده تر خواهد بود. کامپوننت ها ممکن است حاوی رابط کاربری باشند یا دستوراتی برای انجام فعالیت های خاص در اختیار برنامه نویس قرار دهند. با import کردن کامپوننت ها می توان در زمان و هزینه صرفه جویی کرد.

Ionic 2

این نسخه که در سال 2016 منتشر شد، با فریم ورک Angular 2 سازگار است و عملکردی مشابه نسخه 1 را ارایه می کند. این نسخه فقط روی کامپوننت Angular متمرکز است (و نه کامپوننت وب) و فقط توسط برنامه های Angular 2 قابل پشتیبانی است.

Ionic 3

این نسخه در سال 2017 با برخی ویژگی های اضافه شده به نسخه 1 و 2 منتشر شد و با Angular 4 سازگار است، اما روی فریم ورک Ionic نیز تمرکز دارد. این نسخه فقط با Angular قابل استفاده است و برای اهداف آینده، گزینه بهینه ای نیست. از طرفی نیز شما را به ساخت اپلیکیشن های موبایل بومی محدود می کند.

تعریف برنامه نویسی بومی (Native Programming): طراحی اپلیکیشن به شکل بومی به این معناست که برای برنامه نویسی و توسعه اپلیکیشن، از زبان برنامه نویسی اصلی خود آن سیستم عامل استفاده شود. برای مثال، برای ساخت یک اپلیکیشن Android باید از زبان برنامه نویسی Java یا Katlin و برای ساخت اپلیکیشن iOS از زبان برنامه نویسی Objective-C یا Swift استفاده می شود.

Ionic 4

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

Ionic 5

این نسخه در 11 فوریه 2020 منتشر شد و تمرکز اصلی آن روی طراحی اپلیکیشن هایی است که باعث بهبود UI یا رابط کاربری می شود. این نسخه با چندین فریم ورک سازگار است و به شما این امکان را می دهد که انیمیشن ها و کامپوننت های سفارشی ایجاد کنید. Ionic 5 دارای یک طراحی گسترده برای همه کامپوننت های UI است.

ویژگی های Ionic

از جمله ویژگی هایی که فریم ورک Ionic در اختیار توسعه دهندگان خود قرار می دهد عبارت اند از:

• فریم ورکی مستقل از بسترهای نرم افزاری است.

به این معنا که Ionic می تواند روی هر پلتفرم یا بستر نرم افزاری ای کار کند. همچنین از آنجایی که روی کامپوننت های وبِ بهینه شده توسط موبایل (mobile-optimized web component) کار می کند، نیازی به تغییر کد ندارید. Ionic از طریق سازگاری با Angular، ساختاری مقاوم عرضه می کند که به نوبه خود باعث کاهش هزینه ها می شود.

• قابلیت توسعه اپلیکیشن های موبایل چند سکویی را دارد.

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

• رابط کاربری (UI) پیش فرض دارد.

Ionic دارای بخش های پیش فرضی برای CSS و javascript است که به توسعه دهندگان امکان ایجاد اپلیکیشن های موبایل را می دهد. بیشتر بخش های Ionic شامل طراحی پیش فرض می شوند، اما شما می توانید با توجه به نیاز خود، ویژگی های جدیدی را به کلاس های CSS از پیش تعریف شده اضافه کنید. به عبارت دیگر، با استفاده از Ionic چندین کامپوننت UI و Scope دریافت خواهید کرد که علاوه بر امکان نمونه سازی سریع، کار با Ionic را نیز برایتان راحت می کند.

• مبتنی بر AngularJS است.

Angular یکی از محبوب ترین فریم ورک ها برای توسعه اپلیکیشن های وب و موبایل است. Angular، extension های مختلفی از HTML عرضه می کند که دلیلی بر اثباتِ مفید بودن آن برای توسعه دهندگان است. ترکیب Ionic با Angular، قابلیت های زیادی را برای ترکیب کامپوننت های جذاب در اپلیکیشن فراهم می کند و در یک کلام می توان گفت که AngularJS یک راه حل ایده آل همراه با فریم ورک Ionic عرضه می کند. همچنین Angular پایه و اساس فریم ورک Ionic را تشکیل داده و تعامل با وب سرویس های backend را نیز فراهم می کند.

تعریف متدهای Extension: همانطور که از نامشان پیداست، متدهای اضافی هستند (Extension در لغت به معنی اضافی است). متدهای Extension را می توان به کلاس ها، ساختارها و رابط ها (interfaces)، بدون تغییر و ویرایش آن ها، اضافه کرد. برای تعریف یک متد Extension باید ابتدا یک کلاس static تعریف کرد.

• از افزونه های Cordova استفاده می کند.

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

Cordova چیست؟ برای صحبت در مورد Cordova باید با PhoneGap شروع کنیم. PhoneGap توسط شرکت Nitobi در سال 2008 ایجاد شد. در 4 اکتبر 2011، شرکت Adobe اعلام کرد که Nitobi را خریداری کرده است. در همان زمان، پروژه PhoneGap به بنیاد نرم افزار آپاچی (Apache Software Foundation- ASF) ارسال شد و در اصل نام Apache Callback برای این نرم افزار استفاده می شد، اما برای سادگی جستجو در وب، به Cordova تغییر نام یافت.

Apache Cordova درواقع یک فریم ورک توسعه موبایلِ متن باز است که به شما این امکان را می دهد از فناوری های استاندارد وب یعنی HTML5 ، CSS3 و javascript برای ساخت اپلیکیشن های چند سکویی استفاده کنید.

• در ایجاد طراحی های زیبا به برنامه نویسان کمک می کند.

توسعه دهندگان با کمک فریم ورک Ionic می توانند طراحی های قوی و ساده ای برای برنامه های خود ایجاد کنند. Ionic چندین theme و کامپوننت قابل تنظیم برای شما فراهم می کند که باعث می شود اپلیکیشن شما رابط کاربری عالی، داشته باشد و کاربران زیادی را به خود جلب کند.

• عملکرد بالایی از خود نشان می دهد.

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

• فناوری پیشرفته ای دارد.

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

• تجربه ای بومی برای طراحی اپلیکیشن عرضه می کند.

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

• افزونه های قدرتمندی عرضه می کند.

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

چرا باید از فریم ورک Ionic استفاده کنیم؟

تنها هدف استفاده از Ionic، پُرکردن شکاف بین اپلیکیشن های تحت وب AngularJS و اپلیکیشن های موبایل ترکیبی است. Ionic این امکان را به شما می دهد که از ویژگی های AngularJS به همراه کتابخانه Cordova، برای کار روی اپلیکیشن هایی با تعامل بالا استفاده کنید. همچنین به شما پیشنهاد می دهد که از کامپوننت های UI بومی استفاده کنید که با هر سیستم عاملی سازگار هستند. Ionic درواقع برای توسعه اپلیکیشن های چند سکویی به وجود آمده است.
دلایل بسیار خوبی برای انتخاب فریم ورک Ionic به عنوان ابزاری برای توسعه اپلیکیشن های موبایلی وجود دارد که برخی از این دلایل عبارت اند از:

• متن باز بودن و دسترسی رایگان به آن

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

• داشتن جامعه ای گسترده

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

• دارا بودن یک Codebase

توسعه اپلیکیشن های بومی برای iOS و Android به زمان زیادی نیاز دارد. اما فریم ورک Ionic امکان ساخت اپلیکیشن های چند سکویی مختلف را با یک codebase یکسان (به جز پشتیبانی برخی از افزونه ها) به شما می دهد؛ به این معنا که امکاناتی همچون انعطاف پذیری در ایجاد اپلیکیشن های چند سکویی، رابط کاربر سطح بالا و کامپوننت های قابل استفاده مجدد را عرضه می کند که باعث صرفه جویی در وقت شما برای کدنویسیِ مجدد می شود.

• قابلیت تست آسان

Ionic، فرایند تست اپلیکیشن های موبایل را آسان تر می کند. به این شکل که به شما این امکان را می دهد اپلیکیشن خود را در مرورگر یا از طریق stimulator testing برای همه سیستم عامل ها تست کنید. همچنین قابلیت خطایابی از راه دور (Remote Debugging)، تست ماژول ها و کامپوننت ها و تست روی سیستم عامل واقعی را نیز به شما می دهد تا عملکرد واقعی اپلیکیشن را بررسی کنید.

تفاوت فریم ورک Ionic با سایر پلتفرم های توسعه موبایل چیست؟

چندین پلتفرم ترکیبی مختلف برای ساخت و توسعه اپلیکیشن های موبایل از جمله Xamarin، Titanium و Cordova در دسترس هستند که هریک از آن ها، ویژگی های منحصر به فرد خود را دارند؛ اما انتخاب پلتفرم مناسب از فهرست موجود، موضوع مهمی برای ساخت یک اپلیکیشن تعاملیست. در این میان، Ionic محبوبیت زیادی در بیشتر استارتاپ ها و حتی مشاغل بزرگ، پیدا کرده است. برخی از دلایلی که افراد، استفاده از Ionic را به سایر پلتفرم ها ترجیح داده اند به شرح زیر هستند:

• سرعت بالاتر

می توان گفت که در مقایسه با اپلیکیشن های بومی iOS و Android، توسعه اپلیکیشن های چند سکویی در Ionic سریع تر انجام می شود.

• رابط کاربری تعاملی

اکنون کسب و کارها با وجود فریم ورک Ionic، قادر به ساخت اپلیکیشن های کاربردی پیشرفته موبایل با کمترین تلاش ممکن، هستند. Ionic شامل کامپوننت های از پیش تعریف شده زیادی است که می تواند در بسیاری از قسمت های ساخت اپلیکیشن، برای افزایش تعامل مورداستفاده و حتی مورد استفاده مجدد قرار بگیرد. Ionic همچنین یک رابط خط فرمان (Command Line Interface- CLI) دارد که به شما این امکان را می دهد که با کمک یک فرمان واحد به همراه افزونه های متنوع، اپلیکیشن های کاربردی بسازید.

رابط خط فرمان (CLI) نوعی رابط یا واسطه است که به کاربران اجازه می دهد از طریق وارد کردن دستورات متنی پی در پی، با یک نرم افزار ارتباط برقرار کنند.

• پشتیبانی از کتابخانه فریم ورک های Angular، React و Vue

در Ionic می توان از کتابخانه فریم ورک های front-end دیگر مثل Angular، React و Vue استفاده کرد. به این شکل که با فراخوانی هر کتابخانه در Ionic می توانید از ویژگی های Ionic به گونه ای استفاده کنید که احساس استفاده از کامپوننت های این فریم ورک ها را تجربه کنید. Ionic وعده داده است که در نسخه های بعدی خود در آینده، از فریم ورک های دیگر نیز پشتیبانی خواهد کرد.

معایب Ionic

علاوه بر قابلیت ها و مزایای گفته شده برای Ionic، تعدادی عیب نیز وجود دارد که ممکن است هنگام کار با فریم ورک Ionic احساس کنید. این معایب عبارت اند از:

• Ionic تعدادی افزونه بومی دارد که ممکن است پایدار نباشد و یا با یکدیگر در تضاد باشند.
• خطایابی (Debugging) با استفاده از Ionic می تواند تا حدی بحرانی باشد و برای حل مسئله به زمان بیشتری نیاز باشد. همچنین شناخت منشأ خطا، کار را دشوار می کند و گاهی هم ممکن است پیغام خطا واضح نباشد.
• سازه های کد برنامه می توانند ناگهان بدون هیچ دلیلی از هم بپاشند و به شکل یک پوشه خراب در فایل های اصلی برنامه ظاهر شوند.
• اگر در حال ساخت اپلیکیشن های ترکیبی هستید، ممکن است با مشکلات امنیتی روبرو شوید و کد شما در معرض خطر هکرها باشد.
• برای دسترسی به ویژگی های اصلی فریم ورک Ionic، به یقین باید از افزونه ها استفاده کنید.
• هنگام ساخت اپلیکیشن های موبایل پیچیده و سنگین، ممکن است با برخی مشکلات عملکردی (performance) روبرو شوید.

ویرایشگرهای Ionic

ویرایشگرها (Editors) در Ionic به شما امکان می دهند که بتوانید فایل های کد برای هر زبان برنامه نویسی را تهیه کنید. فریم ورک Ionic بر اساس زبان های برنامه نویسی جاوا اسکریپت ES6 و Typescript ساخته شده است؛ بنابراین ویرایشگر Ionic باید بتواند از این زبان ها پشتیبانی کند. در فهرست زیر، ویرایشگرهای متداول Ionic آورده شده اند:

VS Code

این ویرایشگر با پشتیبانی از نگارش نحوی (Syntax) جاوا اسکریپت ES6 و Typescript عرضه می شود. این IDE همچنین به شما این امکان را می دهد که فایل های تعریف Typecript را در Ionic وارد کنید.

2. WebStorm

این ویرایشگر یک IDE قدرتمند است که از زبان های javascript ،HTML ،CSS و Syntax Ionic و Angular و بسیاری دیگر از فناوری های وب پشتیبانی می کند.

3. Atom

Atom یک IDE متن باز رایگان، تولیدِ کمپانی GitHub و یک ویرایشگر کد منبع (source code editor) از نوع چند سکویی است. به طور خاص برای زبان های HTML ،CSS و javascript سفارشی سازی شده است و می توانید packag ها و theme های مختلف را از منابع دیگر، روی آن نصب کنید.

4. ALM

این ویرایشگر نیز متن باز است و به شکل رایگان در دسترس قرار گرفته است. ALM برای توسعه اپلیکیشن های Typescript عملکرد خوبی دارد و هر سیستمی که دارای Chrome و Node باشد، از آن پشتیبانی می کند.

5. Angular IDE by Webclipse

این ویرایشگر یک IDE متن باز بوده که به ویژه برای توسعه اپلیکیشن های Typescript و Angular مناسب است. همچنین از HTML ، Angular CLI و ترمینال یکپارچه نیز برای مدیریت NPM پشتیبانی می کند.

راهنمای شروع کار با فریم ورک Ionic

برای شروع کار خود با Ionic، ابتدا باید ابزارهای زیر را دانلود و نصب کنید:
• نرم افزار Node.js که امکان تعامل با اکوسیستم Ionic را فراهم می کند.
• یک ویرایشگر برای نوشتن کد
• یک CLI برای فریم ورک Ionic
• نصب ابزار Ionic

2. به منظور نصب CLI برای Ionic، دستور CLI زیر را اجرا کنید:

$ npm install -g @ionic/cli native-run Cordova-res

در این کد، native-run به اجرای binary های بومی روی شبیه سازها (simulators/emulators) می پردازد و Cordova-res آیکون ها و صفحه های آغازین برنامه (splash screens) را برای اپلیکیشن های بومی تولید می کند.

3. برای ساخت اپلیکیشنی که از tabs template استفاده می کند و یک Capacitor برای اجرای خود اضافه می کند، می توانید دستور زیر را اجرا کنید:

$ ionic start photo-gallery tabs --type=angular --capacitor

سپس پوشه برنامه را با کد زیر تغییر دهید:

$ cd photo-gallery

4. برخی از عناصری (elements) را که قابلیت های (features) مبتنی بر وب و UI را عرضه می کنند، می توانید از کتابخانه PWA elements Ionic با استفاده از دستور زیر نصب کنید:

$ npm install @ ionic / pwa-elements

اکنون می توانید با تغییر فایل src/main.ts و با استفاده از کد زیر PWA elements را import کنید:

import { defineCustomElements } from '@ionic/pwa-elements/loader';// Call the element loader after the platform has been bootstrapped defineCustomElements(window);

5. حال می توانید Ionic را با استفاده از کد زیر، در مرورگر اجرا کنید:

$ ionic serve

6. اکنون می توانید پوشه گالری عکس اپلیکیشن را در ویرایشگر کد باز کرده و به قسمت src/app/tab2/tab2.page.html/ بروید تا کد زیر را مشاهده کنید:

<ion-header> <ion-toolbar> <ion-title>Tab 2</ion-title> </ion-toolbar></ion-header><ion-content> <ion-header collapse="condense"> <ion-toolbar> <ion-title size="large">Tab 2</ion-title> </ion-toolbar> </ion-header></ion-content>

7. حال می توانید هر دو عنصر ion-title را با کد زیر تغییرنام دهید:

<ion-title>Photo Gallery</ion-title>

8. سپس src/app/tabs/tabs.page.html را باز کرده و label را به "Photos" و icon name را به "images" تغییرنام دهید:

<ion-tab-button tab="tab2"><ion-icon name="images"></ion-icon><ion-label>Photos</ion-label></ion-tab-button>

9. تغییرات را ذخیره کرده و نتیجه آن ها را در مرورگر مشاهده کنید.

نتیجه گیری

Ionic فناوری قدرتمندتری در مقایسه با سایر روش های توسعه اپلیکیشن های بومی است که به شما این امکان را می دهد که اپلیکیشن های موبایل و وب مدرن را سریع تر و راحت تر، بسازید. استفاده از Ionic، شما را قادر به شناخت بسیاری از زبان های برنامه نویسی دیگر می کند که برای پیشرفت حرفه شما مفید خواهد بود.

ابزار Ionic، قابلیت های مختلفی را برای توسعه اپلیکیشن های موبایلی چند سکویی، به شما عرضه می کند. همچنین در وقت، تلاش و هزینه تیم توسعه اپلیکیشن نیز صرفه جویی می کند. از طرفی اگر دانش Angular و javascript قوی دارید، می توانید اپلیکیشن هایی با رابط کاربر تعاملی سطح بالا بسازید. اما گاهی اوقات Ionic نمی تواند در موضوعاتی مثل سرعت و کارایی فرایند توسعه، نسبت به سایر روش های توسعه برتری پیدا کند.

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

منابع

https://www.toptal.com/front-end/building-multi-platform-real-time-mobile-applications-using-ionic-framework-and-firebase

https://techterms.com/definition/framework

https://clevertap.com/blog/what-is-an-sdk

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model