فریمورک Ionic
فهرست مطالب
با یکی دیگر از مقالات برنامه نویسی همراه شما هستیم و اینبار قصد معرفی فریمورک ionic را داریم.
این فریمورک در چند سال اخیر به یکی از محبوب ترین فریمورک های مورد نیاز برای طراحی اپلیکیشن تبدیل شده است.
در این مقاله ویژگی ها و کاربری این فریمورک را مورد بررسی قرار داده و دلایل محبوبیت آن را نیز شرح خواهیم داد.
علاقه مندان به برنامه نویسی و طراحی اپلیکیشن با ما همراه باشند.
علت به وجود آمدن ionic
Ionic ساخته شد ، زیراکه HTML5 دقیقاً همانطور که در دسکتاپ وجود دارد در طول زمان بر روی تلفن همراه نیز حکومت می کند.
با پیشرفت روز به روز مرورگر ها و الگوریتم های آن ها ، میزان استفاده از آن ها افزایش شد و به یک دانشنامه ی آزاد برای همگان تبدیل شده است.
با Ionic، یک چارچوب توسعه موبایل HTML5 ساخته می شود که برنامههای Ionic قرار نیست در یک برنامه مرورگر تلفن همراه مانند کروم یا سافاری اجرا شوند ، بلکه در پوسته مرورگر low-level مانند UIWebView iOS یا WebView اندروید قرار دارند که توسط ابزارهایی مانند Cordova/PhoneGap پیچیده شدهاند.
کسانی که با توسعه وب آشنا هستند ساختار یک برنامه Ionic را ساده می یابند.
در هسته خود ، این فقط یک صفحه وب است که در یک پوسته برنامه نیتیو اجرا می شود ؛ یعنی ما می توانیم از هر نوع HTML، CSS و جاوا اسکریپت که می خواهیم استفاده کنیم.
تنها تفاوت این است که به جای ایجاد وب سایتی که دیگران به آن لینک دهند، ما در حال ایجاد یک تجربه کاربردی مستقل هستیم.
بخش عمده ای از یک برنامه Ionic با HTML، Javascript و CSS نوشته می شود.
توسعه دهندگان مشتاق همچنین ممکن است با افزونه های سفارشی Cordova یا کد نیتیو لایه نیتیو را بررسی کنند.
Ionic همچنین از AngularJS برای بسیاری از عملکردهای اصلی فریمورک خود استفاده می کند.
در حالی که هنوز میتوانید از Ionic فقط با بخش CSS استفاده کنید، توصیه میکنیم در یادگیری Angular نیز کوشا باشید ، زیرا امروزه یکی از بهترین راهها برای ساخت برنامههای مبتنی بر مرورگر است.
ionic چیست
Ionic یک چارچوب توسعه برنامه موبایل HTML5 است که هدف آن ساخت برنامه های موبایل هیبریدی می باشد.
اپلیکیشن های ترکیبی یا همان هیبریدی اساساً وب سایت های کوچکی هستند که در یک پوسته مرورگر در یک برنامه اجرا می شوند که به لایه پلتفرم نیتیو دسترسی دارند.
برنامه های هیبریدی مزایای زیادی نسبت به برنامه های نیتیو دارند ، به ویژه از نظر پشتیبانی از پلتفرم ، سرعت توسعه و دسترسی به کد شخص ثالث.
Ionic در ابتدا بر روی AngularJS ساخته شده بود اما اکنون از تمام فریم ورکهای فرانتاند برتر پشتیبانی میکند.
میتوانید از Ionic برای ایجاد رابط کاربری برای برنامههای موبایلی که با Angular، React یا Vue.js ایجاد شدهاند، استفاده کنید.
بزرگترین مزیت برنامههای Ionic (و به طور کلی برنامههای ترکیبی) این است که میتوانید یک پایگاه کد واحد بسازید و سپس آن را برای پلتفرمهای خاصی مانند iOS، Android یا Windows سفارشی کنید.
Ionic یک ابزار front-end UI است که بر روی پلت فرم Cordova ساخته شده است.
Cordova API را برای دستگاههای نیتیو فراهم میکند تا با کد جاوا اسکریپت تعامل داشته باشند و چارچوب Ionic را در نظر بگیرید که تمام ظاهر ، احساس و تعاملات رابط کاربری را که برنامه شما برای جذابیت نیاز دارد، مدیریت میکند.
چیزی شبیه به «Bootstrap for Native»، اما با پشتیبانی از طیف وسیعی از کامپوننت های معمولی نیتیو ، انیمیشنهای تعاملی و طراحی زیبا.
برخلاف یک فریمورک واکنشگرا ، Ionic دارای عناصر و layout رابط کاربری تلفن همراه به سبک نیتیو است که میتوانید با یک SDK نیتیو در iOS یا Android دریافت کنید.
Ionic همچنین راههای قدرتمندی را برای ساخت برنامههای تلفن همراه که چارچوبهای توسعه HTML5 موجود را تحتالشعاع قرار میدهند، در اختیار شما قرار میدهد.
از آنجایی که Ionic یک فریمورک HTML5 است ، برای اجرا به عنوان یک برنامه نیتیو به یک پوشش نیتیو مانند Cordova یا PhoneGap نیاز دارد.
توصیه می شود از Cordova برای برنامه های خود استفاده کنید و ابزارهای Ionic از Cordova در زیر آن استفاده کنید.
Ionicframework.com وب سایت رسمی Ionic است.
می توانید اطلاعات بیشتری درباره Ionic CSS و کامپوننت های جاوا اسکریپت ، Ioniccons ، دموها ، api ها و همچنین اطلاعاتی در مورد CLI (واسط خط فرمان) دریافت کنید.
ویژگی های ionic
۱- کراس پلتفرم بودن :
برنامه های Ionic می توانند در چندین پلتفرم مانند Android ، iOS ، دسکتاپ و وب با یک پایگاه کد مستقر شود.
بنابراین ، برنامه های Ionic را می توانید یک بار بنویسند و در همه جا اجرا کنید.
۲- طراحی زیبا و تعامل پذیر :
فریمورک Ionic به ما اجازه می دهد تا یک برنامه کاربردی تمیز، ساده و کاربردی بسازیم.
Ionic چندین تم و کامپوننت های قابل تنظیم را در اختیار شما قرار می دهد که یک رابط کاربری عالی ارائه می دهد و افراد بیشتری را به سمت برنامه شما جذب می کند.
Ionic طراحی شده است تا در چندین پلتفرم به زیبایی کار کند و نمایش داده شود.
۳- سادگی :
فریمورک Ionic با سادگی ساخته شده است ، یادگیری آن آسان است و برای هر کسی که مهارت های توسعه وب دارد قابل درک است.
۴- رایگان بودن :
Ionic یک پروژه رایگان و متن باز است که تحت مجوز MIT منتشر شده است.
با وجود منبع باز بودن ، Ionic بسیار پایدار ، قابل اعتماد و سریعتر است.
در حین ایجاد برنامه های کاربردی مقرون به صرفه، ظاهر و احساس نیتیو را به شما ارائه می دهد.
۵- سازگاری :
نسخه های قبلی Ionic به شدت با Angular همراه بود.
اما نسخه های اخیر Ionic ، یعنی v4 ، دوباره مهندسی شد تا به عنوان یک component library وب مستقل ، با یکپارچه سازی برای آخرین فریمورک های جاوا اسکریپت کار کند.
همچنین می توانیم از آن در اکثر فریم ورک های فرانت اند مانند React.js و Vue.js استفاده کنیم.
۶- Stencil :
این یک کامپایلر جدید web component است که توسط تیم ionic برای ایجاد استانداردهایی مطابق با سرورهای وب ایجاد شده است.
همچنین از API اضافی مانند TypeScript، Virtual DOM، JSX و async استفاده میکند که برای PWA مناسب هستند.
۷- پلاگین Cordova :
Cordova به طراحان کمک می کند تا به کاپوننت های مختلف دسترسی داشته باشند.
این مولفه ها به شما این امکان را می دهند که ویژگی های جذابی را به برنامه خود اضافه کنید.
Ionic به توسعه دهندگان این امکان را می دهد که از این افزونه ها برای ایجاد یک برنامه موبایل ایده آل استفاده کنند.
۸- جامعه گسترده :
ممکن است شروع کار با یک فریمورک جدید دشوار باشد.
اما با داشتن پایه Cordova و Angular، ionic دارای یک جامعه فعال و گسترده است که در آن می توانید متخصصان زیادی برای حل مسائل داشته باشید.
محدودیت های ionic
- ۱- برخی از تست های اپلیکیشن به یک مشکل بزرگ در این نوع برنامهها تبدیل میشود ، زیرا مرورگر وب همیشه خطاهای کد اشتباهی را ارائه نمیکند ، اما وقتی برنامه را برای پلتفرم نیتیو میسازیم، با این مشکل مواجه میشویم.
- ۲- برنامه Ionic به پلاگین هایی برای برنامه اصلی نیاز دارد که گاهی اوقات به یک مشکل سازگاری تبدیل می شود.
- ۳- در برخی موارد، برنامه های Ionic کندتر از برنامه های نیتیو هستند.
- ۴- ما نمیتوانیم از Ionic برای کارهای گرافیکی سنگین مانند بازیهای ویدیویی یا سه بعدی استفاده کنیم.
- ۵- با ionic، اشکال زدایی می تواند تا حدی چالش برانگیز باشد و برای حل این مشکل زمان بیشتری را می طلبد و این به معناست که دانستن منشأ خطا دشوار و گاهی اوقات پیام خطا ممکن است نامشخص باشد.
- ۶- اگر در حال ساخت برنامه های هیبریدی هستید ، ممکن است با مشکلات امنیتی مواجه شوید و کد شما مستعد هکرها باشد.
راه اندازی محیط توسعه ionic
اکنون ، نحوه ایجاد یک محیط برای توسعه Ionic را یاد خواهیم گرفت. مراحل را با دقت دنبال کنید.
مرحله ۱ : نصب npm
برای نصب Ionic و سایر بخش های آن ، ما به CLI (واسط خط فرمان) نیاز داریم.
برای این کار از npm (Node Package Manager) استفاده می کنیم.
از Node.js می توانید آخرین نسخه npm را دانلود می کند.
پس از نصب موفقیت آمیز Node.js ، می توانید نسخه npm را با استفاده از دستور “npm –v” بررسی کنید.
مرحله ۲ : نصب Cordova
اکنون با استفاده از “npm install –g cordova” کتابخانه ها را برای Cordova نصب کنید.
این دستور ، کتابخانه ها و پکیج های مورد نیاز برای راه اندازی Cordova را دانلود می کند.
پس از دانلود موفقیت آمیز پکیج های Cordova ، اکنون دستور “cordova –v” را برای بررسی نسخه Cordova اجرا کنید.
مرحله ۳ : نصب ionic
دستور npm install –g ionic را اجرا کنید تا کتابخانه های مربوط به راه اندازی Ionic را دانلود کنید.
پس از نصب موفق، دستور “ionic –v” را اجرا کنید تا نسخه نصب شده Ionic را بررسی کنید.
مرحله ۴ : نصب Bower
مشابه دستور قبلی ، “npm install –g bower” را اجرا کنید تا کتابخانه های bower را نصب کنید.
Bower یک package manager است که شبیه به “npm” است و برای نصب کتابخانه های جاوا اسکریپت استفاده می شود.
پس از نصب موفق ، دستور bower –v را اجرا کنید تا نسخه نصب شده bower را بررسی کنید.
مرحله ۵ : نصب Gulp
دستور npm install –v gulp را برای نصب کتابخانه های Gulp اجرا کنید.
Gulp برای ساخت کد جاوا اسکریپت و کتابخانه ها استفاده می شود که توسط Ionic برای ساخت پروژه استفاده می شود.
پس از نصب موفق ، دستور gulp –v را اجرا کنید تا نسخه Gulp نصب شده را بررسی کنید.
ساختن یک اپلیکیشن آزمایشی با ionic
پس از نصب تمام کتابخانه های مورد نیاز ، اکنون یاد می گیریم که چگونه یک Application در Ionic و برای پلتفرم اندروید و iOS ایجاد کنیم.
ابتدا، دایرکتوری خود را تغییر دهید ، جایی که میخواهید پروژه خود را ایجاد کنید و “Ionic start newAPP Tabs” را اجرا کنید.
این دستور یک الگوی Ionic Application با تب ها ایجاد می کند.
Ionic برخی از الگوهای از پیش تولید شده مانند تب ها ، منو و blank را ارائه می دهد.
این دستور پکیج های قالب را برای تب ها دانلود میکند.
می توانید بررسی کنید که فایل ها یا دایرکتوری های زیر در پوشه myApp اضافه شده اند.
اکنون ، ما این پروژه را در مرورگر وب اجرا می کنیم، بنابراین دایرکتوری خود را به myApp تغییر دهید و دستور “ionic serve” را اجرا کنید.
اکنون صفحه نمایش داده شده در زیر در مرورگر وب باز می شود.
الگوی این برنامه مبتنی بر تب است.
در این برنامه ، ما میتوانیم سه تب را ببینیم:
تب های Status ، Chat و Account ، که در آن سه تب حاوی محتوایی است که در زیر نشان داده شده است.
بیلد اپلیکیشن برای پلتفرم اندروید و IOS
تا کنون برنامه ما “myAPP” فقط یک برنامه وب است.
اکنون ، فایلهای پشتیبانی را برای پلتفرمهای Android و IOS ایجاد و اضافه میکنیم.
اول از همه ، “q” را برای خروج فشار دهید.
دستور “ionic platform add android” را برای پلتفرم اندروید وارد کنید.
این دستورات فایل های پشتیبانی اندروید را برای برنامه ما اضافه می کنند.
برای افزودن فایلهای پشتیبانی IOS میتوانید از «ionic platform add IOS» استفاده کنید.
ما فقط یک دستگاه اندروید داریم، بنابراین ، این برنامه را فقط برای اندروید بیلد و اجرا می کنیم.
پس از نصب تمام فایل های مورد نیاز ، دایرکتوری “myApp” خود را بررسی می کنیم.
متوجه خواهید شد که پوشه “myApp” به برنامه اضافه شده است و این پوشه حاوی تمام فایل ها برای اجرای برنامه ما در دستگاه Android است.
بیلد اپلیکیشن
برای آن ، از دستور “ionic build android” استفاده می کنیم.
این یک فرآیند ایجاد می کند که یک فایل “apk” برای برنامه ما ایجاد می کند.
اکنون ، فایل apk داریم ، پس بیایید این فایل apk را اجرا کنیم و برنامه را در یک دستگاه اندروید یا شبیه ساز آزمایش کنیم.
اکنون دستور “ionic emulate android” را اجرا کنید.
اگر SDK دارید ، این دستور برنامه شما را در شبیه ساز اندروید راه اندازی می کند.
بیایید شبیه ساز اندروید برنامه خود را بررسی کنیم.
برنامه ما روی شبیه ساز اندروید که یک virtual device (دستگاه مجازی) است اجرا می شود.
اکنون ، ما سعی می کنیم این برنامه را بر روی یک دستگاه واقعی راه اندازی کنیم.
اول از همه ، دستگاه خود را با استفاده از کابل USB وصل کنید و حالت “USB debugging” را در دستگاه اندرویدی خود فعال کنید.
اکنون دستور ionic run android را اجرا کنید.
این دستور برنامه را در دستگاه شما راه اندازی می کند.
یکی از مزایای اصلی ionic این است که می توانید از راه دور به صفحه نمایش دستگاه خود در مرورگر خود دسترسی داشته باشید.
برای اینکار ابتدا دستور ionic run android را اجرا کنید.
پس از آن ، بر روی پنجره مرورگر کلیک راست کرده و گزینه “inspect element” را انتخاب کنید.
بعد از گزینه “inspect element” به “More Tools” رفته و روی گزینه “Remote device” کلیک کنید.
اکنون صفحه ای باز می شود که در آن می توانید نام دستگاه خود را مشاهده کنید.
اگر نام دستگاه شما قابل مشاهده نیست ، به این معنی است که دستگاه شما به درستی متصل نیست.
اگر دستگاه شما به درستی متصل شده باشد ، می توانید URL دستگاه خود را ببینید و بر روی “inspect option” کلیک کنید.
با کلیک بر روی گزینه “inspect” صفحه نمایش داده شده در زیر باز می شود.
در این صفحه ، تصویری از صفحه نمایش داده می شود که در حال حاضر در دستگاه شما باز می شود.
در اینجا ، می توانید عناصر را مانند یک وب سایت بررسی و ویرایش کنید و تغییر منعکس خواهد شد.
Ionic لایو تست را ارائه می دهد ، به این معنی که هر زمان که ما کدی را در فایل پروژه یا مرورگر وب تغییر می دهیم ، اثر آن بلافاصله روی صفحه مرورگر شما و همچنین در دستگاه تلفن همراه شما منعکس می شود.
Ionic Native APIs
Ionic Native API به شما امکان میدهد با مجموعهای از پلاگین ها و integration های منبع باز ، تجربههای کاربری برنامههای نیتیو را بسازید که اضافه کردن عملکرد دستگاه نیتیو را به هر برنامه Ionic ، Capacitor یا Cordova آسان میکند.
یک مثال معمولی این است که اگر می خواهید از دوربین گوشی در داخل برنامه خود استفاده کنید تا به کاربر اجازه دهید عکس بگیرد (که سپس در برنامه استفاده خواهید کرد) ؛ تعداد زیادی پلاگین Ionic Native وجود دارد که می توانید از آنها برای گسترش عملکرد برنامه خود استفاده کنید.
Ionic و ورژن ها
Ionic 4 از ابزارهای فریمورک خاص استفاده کرد.
Ionic 3 دارای خط فرمان سفارشی و ابزار بیلد و همچنین پیادهسازی روتر سفارشی بود که اغلب منجر به سردرگمی کاربران آن شده است.
بنابراین Ionic 4 از ابزار و معماری هر فریم ورک خاص استفاده کرد که ادغام فناوری ما را بسیار سادهتر میکند.
برنامه های Ionic Angular اکنون از کتابخانه Angular Router استفاده می کنند ، برنامه های Ionic React از کتابخانه React Router استفاده می کنند ؛ که می توان گفت این یک برد بزرگ بود.
بنابراین، این تغییر بهترینهای هر دو دنیا را به ارمغان آورد ، زیرا با تکامل فریمورک انتخابی شما ، جدیدترین و بهترین ابزار را دریافت میکنید و زمان بیشتری برای تمرکز بر آنچه واقعاً مهم است باقی میماند.
سپس ، در ابتدای سال ۲۰۲۰ ، Ionic 5 وارد شد!
نکات برجسته Ionic 5 عمدتاً حول طراحی و UI/UX متمرکز بود که دارای یک API کاملاً جدید برای ایجاد انیمیشنهای برجسته ، کتابخانه آیکون Ionicons جدید و بهبود یافته ، مشخصات طراحی جدید iOS و همچنین برخی بهبودهای شخصیسازی مفید در مورد استایل کامپوننت ها است.
منابع :
مهرسا امینی
برنامه نویس ، انیماتور ، سئوکار
امید سرلوحه ی رسیدن به هر چیزی است