
آموزش ساخت برنامه موبایل با Ionic و AngularJS
آموزش ساخت برنامه موبایل با Ionic و AngularJS یکی دیگر از آموزش های گروه آموزشی پرووید می باشد که در این قسمت آن را به شما معرفی می کنیم. این بسته ی آموزشی نیز یکی از دوره های آموزشی دیگر که در حوزه ی فارسی سازی آموزش های انگلیسی تنظیم شده است می باشد. عنوان این بسته ی آموزشی ساخت برنامه موبایل با Ionic و AngularJS است که با نام اصلی Building a Mobile App with AngularJS and Ionic از شرکت Pluralsight منتشر شده است.
Ionic چیست؟
ionic یک پلت فرم HTML5 هست که به منظور ساخت برنامه های ترکیبی (Hybrid) برای پلت فرم موبایل مورد استفاده قرار می گیرد. برنامه های ترکیبی در ذات خود برنامه های کوچک تحت وب هستند که بر اساس پلت فرمی (Android یا iOS) که بر روی آن اجرا می شوند، در یک مرورگر اجرا می شوند و به لایه ی مدیریت برنامه دسترسی دارند.
AngularJS چیست؟
Angular یک فریم ورک جاوا اسکریپت سمت کلاینت یا اصطلاحاً Client Side می باشد که برای ساختن وب اپلیکیشن های پویا و یا اصطلاحا Dynamic در نظر گرفته شده است. Angular در ابتدا به عنوان یک پروژه در گوگل استارت خورد اما پس از آن تبدیل به یک فریم ورک Open Source شد. Angular کاملا بر اساس HTML و جاوا اسکریپت کار می کند.

بنابراین برای استفاده از آن نیازی به یاد گرفتن Syntax یا یک زبان جدید ندارید. کاری که Angular میکند تغییر دادن فایلهای HTML ای که به صورت استاتیک هستند به فایل های HTML ای که به صورت پویا یا Dynamic عمل میکنند است. به منظور یادگیری هرچه بهتر Angular می توانید از آموزش شروع به کار با Angular 2 استفاده کنید.
چگونه با Ionic و AngularJS رابط کاربری اپلیکیشن موبایل بسازیم؟
در توسعه اپلیکیشنهای موبایل با Ionic و AngularJS، رابط کاربری با استفاده از فناوریهای رایج وب مانند HTML و CSS ساخته میشود و AngularJS برای سازماندهی منطق برنامه و تعامل میان بخشهای مختلف آن به کار میرود. این ترکیب به توسعهدهندگان اجازه میدهد صفحههایی شامل فرمها، دکمهها، فهرستها و سایر اجزای رابط کاربری ایجاد کنند. بهجای ساخت تمام بخشهای رابط از ابتدا، میتوان از مؤلفههای آماده Ionic برای ایجاد ظاهر و رفتار متناسب با اپلیکیشنهای موبایل استفاده کرد.
استفاده از CSS Componentها در Ionic به شما کمک میکند عناصر رابط را با ساختاری هماهنگ در صفحههای مختلف به کار ببرید. برای مثال، میتوان صفحهای طراحی کرد که اطلاعات را در قالب بخشهای مشخص نمایش دهد یا از اجزای آماده برای ایجاد تعامل با کاربر استفاده کند. آشنایی با نحوه ترکیب HTML، CSS و AngularJS در این چارچوب، درک بهتری از فرایند ساخت اپلیکیشنهای ترکیبی ایجاد میکند و به شما امکان میدهد رابط کاربری را به شکلی منظمتر توسعه دهید.
ساخت اپلیکیشن تکصفحهای و چندبخشی با Ionic
یکی از جنبههای مهم طراحی اپلیکیشن موبایل، نحوه سازماندهی صفحهها و دسترسی کاربر به بخشهای مختلف برنامه است. در یک Single-View App، تمرکز اصلی روی یک صفحه یا نمای مشخص قرار دارد و میتوان ساختار برنامه را با اجزای محدودتری پیادهسازی کرد. این نوع ساختار برای آشنایی با نحوه نمایش اطلاعات و تعاملهای پایه مناسب است. در مقابل، برنامههای چندبخشی معمولاً به روش مشخصی برای جابهجایی میان قسمتهای مختلف رابط کاربری نیاز دارند.
در Ionic میتوان از ساختارهای چندتب برای دسترسی به بخشهای مستقل برنامه استفاده کرد. برای مثال، یک اپلیکیشن ممکن است بخشهایی برای مشاهده اطلاعات، بررسی تنظیمات و دسترسی به محتوای ذخیرهشده داشته باشد. AngularJS نیز میتواند در مدیریت دادهها و رفتارهای مرتبط با این بخشها نقش داشته باشد. شناخت تفاوت میان طراحی تکصفحهای و چندبخشی به شما کمک میکند متناسب با نیاز کاربران و پیچیدگی برنامه، ساختار مناسبتری برای رابط کاربری انتخاب کنید.
مزایای توسعه اپلیکیشن ترکیبی با فناوریهای وب
اپلیکیشنهای ترکیبی یا Hybrid از فناوریهای وب برای ساخت بخش مهمی از رابط کاربری استفاده میکنند و در محیط موبایل اجرا میشوند. این روش برای توسعهدهندگانی که با HTML، CSS و JavaScript آشنا هستند، امکان استفاده از دانش موجود را در ساخت اپلیکیشن موبایل فراهم میکند. در ترکیب Ionic و AngularJS، میتوان از مؤلفههای رابط کاربری و ساختارهای برنامهنویسی وب برای ایجاد تجربهای مناسب در دستگاههای موبایل استفاده کرد، بدون اینکه تمام رابط کاربری بهصورت جداگانه برای هر پلتفرم نوشته شود.
با وجود این مزایا، توسعه ترکیبی برای همه پروژهها الزاماً بهترین گزینه نیست. نیازهای عملکردی، دسترسی به قابلیتهای اختصاصی دستگاه و پیچیدگی رابط کاربری میتوانند بر انتخاب فناوری تأثیر بگذارند. همچنین باید سازگاری برنامه با نسخههای مختلف سیستمعامل و دستگاههای هدف بررسی شود. شناخت رویکرد Hybrid و ابزارهایی مانند Ionic به شما کمک میکند مزایا و محدودیتهای این روش را بهتر ارزیابی کنید و برای پروژههایی که با فناوریهای وب قابلپیادهسازی هستند، تصمیم آگاهانهتری بگیرید.
این آموزش Ionic و AngularJS برای چه کسانی مناسب است؟
این دوره مقدماتی برای افرادی مناسب است که میخواهند با استفاده از فناوریهای وب، ساخت اپلیکیشن موبایل را شروع کنند. اگر با مفاهیم اولیه HTML، CSS و JavaScript آشنایی دارید و میخواهید از این دانش برای ساخت رابط کاربری موبایل استفاده کنید، یادگیری Ionic و AngularJS میتواند نقطه شروع مناسبی باشد. درک ساختار صفحهها و نحوه استفاده از مؤلفههای رابط کاربری به شما کمک میکند فرایند توسعه یک اپلیکیشن ترکیبی را بهتر بشناسید.
همچنین این آموزش برای توسعهدهندگان وبی مفید است که قصد دارند با رویکرد ساخت اپلیکیشنهای موبایل مبتنی بر فناوریهای وب آشنا شوند. بررسی ساختار یک برنامه تکصفحهای و یک اپلیکیشن چندتب، درک عملیتری از نحوه سازماندهی رابط کاربری در Ionic ایجاد میکند. از آنجا که AngularJS و Ionic مورد استفاده در این دوره فناوریهایی با سابقه هستند، مطالب آن بیشتر برای شناخت همین ابزارها و درک مفاهیم توسعه ترکیبی کاربرد دارند و انتخاب آنها برای پروژههای جدید باید با توجه به وضعیت فعلی فناوریها انجام شود.
سرفصل مطالب آموزش ویدئویی ساخت برنامه موبایل با Ionic و AngularJS
فصل اول: مقدمه- مقدمه
- قبل از استفاده از این دوره آموزشی چه چیزی را باید بدانید
- استفاده کردن از فایل های تمرین
- بررسی فریم ورک ساخت نرم افزارهای موبایل
- نصب کردن محیط توسعه بر روی PC
- درک روند نصب کردن Ionic
- کار کردن با Ionic CLI و Template ها
- معرفی CSS Component ها در Ionic
- استفاده از Button ها در Ionic
- اضافه کردن Ionicon ها به یک Layout
- کار کردن با Tab ها
- استفاده کردن از List Style ها
- ایجاد کردن Card ها و Inset List ها
- ایجاد کردن Form Element های ابتدایی
- استفاده از دیگر Form Type ها
- استفاده از Form Element های ویژه
- انجام عملیات Scaffolding برای یک Single-View App
- استفاده از Angular controller ها
- فیلتر کردن جستجوها
- مرتب سازی لیست ها با استفاده از ابزارهای از پیش ساخته شده
- حذف کردن List Item ها
- انجام Sliding برای اضافه کردن Favorite ها
- پیاده سازی عملیات Pull-to-Refresh
- معرفی UI Router مربوط به Ionic که به صورت State-Based کار میکند.
- پیاده سازی اولین Route
- اضافه کردن صفحه دوم
- ایجاد کردن یک Sub-Page
- ایجاد کردن یک Global Header
- ایجاد کردن یک Calendar View
- ایجاد کردن Main Template
- اضافه کردن یک Schedule به Calendar
- استفاده کردن از چندین Button
- قدم های بعدی و Deploy کردن برنامه ها







