آموزش Ionic 4 - ساخت iOS، Android و برنامه های وب با Ionic و Angular [ویدئو]

سرفصل ها و درس ها

شروع شدن Getting Started

• معرفی دوره Course Introduction

• یونیک چیست؟ What Is Ionic?

• نگاهی دقیق تر به پلتفرم Ionic A Closer Look at the Ionic Platform

• Angular چیست؟ What is Angular?

• اولین برنامه یونی ما! Our First Ionic App!

• تاریخچه یونیک The History of Ionic

• Ionic 4+ در مقابل Ionic 3 Ionic 4+ vs Ionic 3

• چگونه با Ionic برنامه های موبایل بومی بسازیم How to Build Native Mobile Apps with Ionic

• طرح کلی دوره Course Outline

• چگونه از دوره بیشترین بهره را ببرید How to Get the Most Out Of the Course

تجدید کننده زاویه ای Angular Refresher

• معرفی ماژول Module Introduction

• Angular چیست؟ What is Angular?

• Angular SPA و Ionic Angular SPAs & Ionic

• درک مولفه ها Understanding Components

• نصب Angular با CLI Installing Angular with the CLI

• نصب IDE Installing the IDE

• آشنایی با ساختار پوشه Understanding the Folder Structure

• مؤلفه برنامه The App Component

• ایجاد اولین مؤلفه ما Creating Our First Component

• ارتباط متقابل کامپوننت با صحافی اموال Cross Component Communication with Property Binding

• درک دستورالعمل ها و درون یابی رشته ای Understanding Directives & String Interpolation

• مدیریت ورودی کاربر Handling User Input

• درک رویداد Binding Understanding Event Binding

• مراجع محلی Local References

• درک دو طرفه اتصال Understanding Two-Way-Binding

• انتقال داده در اطراف با رویدادهای سفارشی Passing Data Around with Custom Events

• پیاده سازی مسیریابی Implementing Routing

• راه اندازی سرویس ها Setting Up Services

• استفاده از خدمات با تزریق وابستگی Using Services with Dependency Injection

• کار با قلاب چرخه حیات زاویه ای Working with Angular Lifecycle Hooks

• افزودن یک شخص با خدمات Adding a Person with Services

• پیمایش بین کامپوننت ها Navigating between Components

• حذف موارد با یک کلیک Removing Items upon a Click

• "فشار" داده ها به اطراف با موضوع "Push"ing Data Around with Subjects

• ارسال درخواست Http Sending Http Requests

• نمایش یک متغیر در حین انتظار برای پاسخ Showing a Placeholder Whilst Waiting for a Response

• بسته شدن Wrap Up

مبانی اجزای یونی Ionic Component Basics

• معرفی ماژول Module Introduction

• بلوک های اصلی برنامه سازی Core App Building Blocks

• تحت پوشش اجزای یونی Under the Hood of Ionic Components

• راه اندازی یک پروژه یونی غیر زاویه ای Setting Up a Non-Angular Ionic Project

• کجا همه چیز درباره اجزای یونی بیاموزیم Where to Learn all about Ionic Components

• استفاده از اجزای اصلی یونی Using Basic Ionic Components

• اجزای اصلی بیشتر More Basic Components

• دسته بندی اجزا Component Categories

• با استفاده از شبکه یونی Using the Ionic Grid

• اضافه کردن آیکون ها و استفاده از اسلات ها Adding Icons & Using Slots

• استفاده از CSS Utility Attributes Using CSS Utility Attributes

• استفاده از عناصر یونی مانند عناصر HTML "عادی". Using Ionic Elements like "Normal" HTML Elements

• اعتبار سنجی ورودی کاربر Validating User Input

• ایجاد عناصر یونی به صورت برنامه ای Creating Ionic Elements Programmatically

• اتمام منطق پایه جاوا اسکریپت Finishing Up the Base JavaScript Logic

• نهایی کردن Layout Finalizing the Layout

• استفاده از اجزای کنترلر Using Controller Components

• چرا انگولار؟ Why Angular?

زاویه ای + یونی Angular + Ionic

• معرفی ماژول Module Introduction

• چرا از Angular استفاده کنیم؟ Why Use Angular?

• ایجاد یک پروژه زاویه ای یونی جدید Creating a New Ionic Angular Project

• تجزیه و تحلیل پروژه ایجاد شده Analyzing the Created Project

• چگونه Angular و Ionic با هم کار می کنند How Angular & Ionic Work Together

• افزودن و بارگیری یک صفحه جدید Adding & Loading a New Page

• استفاده از ویژگی های زاویه ای در اجزای Ionic Using Angular Features on Ionic Components

• راه اندازی مسیرهای زاویه ای Setting Up Angular Routes

• مدیریت دولت با خدمات Managing State with Services

• استخراج و نمایش داده های پارامتر مسیر Extracting and Displaying Route Param Data

• پیمایش بین صفحات Navigating Between Pages

• حذف یک دستور غذا Deleting a Recipe

• کنترل کننده های یونی تزریقی Injecting Ionic Controllers

• کامپوننت های زاویه ای در مقابل اجزای یونی Angular Components vs Ionic Components

• بسته شدن Wrap Up

ساخت برنامه های بومی با خازن Building Native Apps with Capacitor

• معرفی ماژول Module Introduction

• اطلاعات کلی General Information

• ساخت اپلیکیشن اندروید Creating an Android App

• ایجاد اپلیکیشن iOS Creating an iOS App

• بسته شدن Wrap Up

اشکال زدایی Debugging

• معرفی ماژول Module Introduction

• پیام های خطا و console.log() Error Messages & console.log()

• با استفاده از مرورگر DevTools & Breakpoints Using the Browser DevTools & Breakpoints

• اشکال زدایی UI و عملکرد Debugging the UI & Performance

• اشکال زدایی برنامه های اندروید Debugging Android Apps

• اشکال زدایی برنامه های iOS Debugging iOS Apps

• بسته شدن Wrap Up

ناوبری و مسیریابی در برنامه های Ionic Navigation & Routing in Ionic Apps

• معرفی ماژول Module Introduction

• نحوه کار مسیریابی در برنامه Ionic + Angular How Routing Work in an Ionic + Angular App

• ذخیره‌سازی صفحه یونی و قلاب‌های چرخه حیات اضافی Ionic Page Caching & Extra Lifecycle Hooks

• برنامه ریزی پروژه دوره Planning the Course Project

• ایجاد صفحات برنامه ما Creating Our App Pages

• تنظیم پیکربندی مسیریابی اصلی ما Adjusting Our Main Routing Configuration

• آشنایی با زبانه های یونی Understanding Ionic Tabs

• اضافه کردن برگه ها به برنامه Adding Tabs to the App

• آماده سازی داده ها و خدمات برای پروژه Preparing Data & Services for the Project

• خروجی "مکان ها" Outputting "Places"

• اضافه کردن مسیریابی به جلو Adding Forward Navigation

• بازگشت با NavController Going Back with NavController

• پیمایش از طریق دکمه های نوار ابزار Navigating via Toolbar Buttons

• استخراج شناسه مکان های بارگذاری شده Extracting the ID of Loaded Places

• افزودن دراور کناری Adding a SideDrawer

• باز کردن + بستن SideDrawer Opening + Closing the SideDrawer

• افزودن پیوندها و تغییر صفحات Adding Links & Switching Pages

• افزودن سرویس Auth Adding the Auth Service

• اضافه کردن یک محافظ تایید Adding an Auth Guard

• باز کردن یک مدال Opening a Modal

• بستن Modal & Passing Data Closing the Modal & Passing Data

• بسته شدن Wrap Up

بررسی اجمالی اجزای یونی Ionic Components Overview

• معرفی ماژول Module Introduction

• ویژگی ها و شکاف ها Attributes & Slots

• مبانی شبکه یونی Ionic Grid Basics

• کنترل اندازه ستون های شبکه Controlling Grid Column Sizes

• کنترل تراز شبکه Controlling Grid Alignment

• اندازه شبکه پاسخگو Responsive Grid Sizing

• خلاصه گرید Grid Summary

• لیست یونی در مقابل شبکه یونی ion-list vs ion-grid

• برچسب یونی و آیتم یونی ion-label & ion-item

• متن یونی ion-text

• موارد فهرست قابل کشیدن Swipeable List Items

• رزروهای قابل کشیدن Swipeable Bookings

• آشنایی با پیمایش مجازی Understanding Virtual Scrolling

• پیاده سازی پیمایش مجازی Implementing Virtual Scrolling

• افزودن عناصر تصویر Adding Image Elements

• دکمه های تقسیم بندی شده Segmented Buttons

• اضافه کردن اسپینر Adding a Spinner

• با استفاده از Loading Controller Using the Loading Controller

• با استفاده از کنترلر ActionSheet Using the ActionSheet Controller

• بسته شدن Wrap Up

استایل و طرح‌بندی برنامه‌های Ionic Styling & Theming Ionic Apps

• معرفی ماژول Module Introduction

• نحوه عملکرد استایل و طرح زمینه در برنامه های Ionic How Styling & Theming Works in Ionic Apps

• اسناد و ویژگی‌های ابزار Docs & Utility Attributes

• تنظیم متغیرهای تم جهانی Setting Global Theme Variables

• تنظیم سبک های جهانی Setting Global Styles

• تنظیم همه رنگ ها در یک زمان Setting All Colors at Once

• تنظیم سبک های خاص پلت فرم Setting Platform-Specific Styles

• یک ظاهر طراحی اجزای اصلی با متغیرها Styling Core Components with Variables

• اضافه کردن قوانین CSS سفارشی Adding Custom CSS Rules

• متغیرهای CSS خاص جزء Component-specific CSS Variables

• بسته شدن Wrap Up

مدیریت ورودی کاربر Handling User Input

• معرفی ماژول Module Introduction

• الزامات ورودی کاربر User Input Requirements

• راه اندازی یک قالب فرم Setting Up a Form Template

• افزودن یک فرم مبتنی بر الگو Adding a Template-driven Form

• اعتبار سنجی Handling Validation

• جابجایی بین حالت های Auth Switching Between Auth Modes

• تکمیل فرم Auth Finishing the Auth Form

• شروع کار بر روی یک فرم پیشنهاد جدید Starting Work on a New Offer Form

• تکمیل الگوی فرم پیشنهاد Finishing the Offer Form Template

• ایجاد یک فرم واکنشی Creating a Reactive Form

• همگام سازی فرم با الگو Syncing the Form to the Template

• تکمیل فرم پیشنهاد جدید Finishing the New Offer Form

• چالش فرم را ویرایش کنید Edit Form Challenge

• افزودن فرم ویرایش پیشنهاد Adding the Edit Offer Form

• با فرم رزرو شروع کنید Starting with the Booking Form

• کار بر روی قالب Book Place Working on the Book Place Template

• پیکربندی کنترل های تاریخ Configuring the Date Controls

• اعتبارسنجی و ارسال فرم Validating & Submitting the Form

• بسته شدن Wrap Up

دولت مدیریت Managing State

• معرفی ماژول Module Introduction

• ایالت چیست؟ What is State?

• افزودن مکان های جدید Adding New Places

• استفاده از موضوعات RxJS برای مدیریت دولتی Using RxJS Subjects for State Management

• انتقال داده ها از طریق موضوعات و اشتراک ها Passing Data via Subjects & Subscriptions

• وضعیت رابط کاربری در عمل UI State in Action

• به روز رسانی مکان ها Updating Places

• حالت رابط کاربری با مکان‌های قابل رزرو UI State with Bookable Places

• رزرو مکان ها Booking Places

• رفع اشکال Fixing a Bug

• لغو رزروها Cancelling Bookings

• پایان کار Finishing Touches

ارسال درخواست Http Sending Http Requests

• معرفی ماژول Module Introduction

• نحوه اتصال به Backend How to Connect to a Backend

• راه اندازی Firebase Setting Up Firebase

• ارسال اطلاعات از طریق Http Sending Data via Http

• استفاده از داده های پاسخ Using Response Data

• واکشی و نمایش داده ها Fetching & Displaying Data

• به روز رسانی مکان ها Updating Places

• واکشی داده ها در مکان های مختلف Fetching Data in Multiple Places

• بارگیری داده ها در یک مکان واحد Loading Data in a Single Place

• به‌روزرسانی مکان‌ها به درستی Updating Places Correctly

• رسیدگی به خطا Error Handling

• واکشی مکان های مجرد Fetching Single Places

• افزودن یک رزرو Adding a Booking

• واکشی رزرو توسط کاربر Fetching Bookings by User

• حذف رزروها Deleting Bookings

• بسته شدن Wrap Up

افزودن نقشه های گوگل Adding Google Maps

• معرفی ماژول Module Introduction

• راه اندازی API API Setup

• افزودن یک مؤلفه LocationPicker Adding a LocationPicker Component

• باز کردن Map Modal Opening the Map Modal

• افزودن Google Maps SDK Adding the Google Maps SDK

• رندر کردن نقشه Rendering a Map

• انتخاب مکان ها از طریق کلیک بر روی نقشه Picking Locations via a Click on the Map

• پیدا کردن آدرس برای یک مکان Finding the Address for a Place

• واکشی URL تصویر ثابت Fetching a Static Image URL

• نمایش پیش نمایش مکان Displaying a Place Preview

• تغییر انتخاب Changing the Selection

• حذف کلیک شنونده Removing the Click Listener

• ارسال مکان Submitting the Location

• خروجی آدرس و نقشه Outputting Address & Map

• استفاده مجدد از Maps Modal Re-using the Maps Modal

استفاده از ویژگی های دستگاه بومی (دوربین و مکان) Using Native Device Features (Camera & Location)

• معرفی ماژول Module Introduction

• درک خازن و کوردووا Understanding Capacitor & Cordova

• با استفاده از Docs Using the Docs

• استفاده از پلاگین های خازن Using Capacitor Plugins

• دریافت مکان کاربر Getting the User Location

• تست ویژگی مکان Testing the Location Feature

• شروع با انتخابگر تصویر Starting With the Image Picker

• عکس گرفتن Taking Pictures

• تشخیص درست پلتفرم Detecting the Platform Correctly

• افزودن یک فایل پیکر بازگشتی Adding a Filepicker Fallback

• دریافت تصویر انتخاب شده Getting the Picked Image

• تبدیل رشته تصویر به فایل Converting the Image String to a File

• ذخیره تصویر در فرم Storing the Image in the Form

• استفاده از عناصر PWA Using PWA Elements

• بهبود مؤلفه ImagePicker Improving the ImagePicker Component

• افزودن کد آپلود تصویر سمت سرور Adding Server-side Image Uploading Code

• اضافه کردن آپلود تصویر Adding Image Upload

• بسته شدن Wrap Up

افزودن احراز هویت Adding Authentication

• معرفی ماژول Module Introduction

• احراز هویت چگونه کار می کند How Authentication Works

• اضافه کردن ثبت نام کاربر Adding User Signup

• بازسازی کد احراز هویت Refactoring the Authentication Code

• افزودن ورود کاربر Adding User Login

• مدیریت کاربر با موضوع Managing the User with a Subject

• ذخیره توکن در حافظه Storing the Token in Memory

• استفاده از شناسه قابل مشاهده به درستی Using the ID Observable Correctly

• استفاده بیشتر از شناسه کاربر More userId Usage

• رفع اشتراک Fixing the Subscription

• استفاده از userId در همه جا Using the userId everywhere

• ذخیره سازی Auth Data در Device Storage Storing Auth Data in Device Storage

• اضافه کردن Autologin Adding Autologin

• با استفاده از Autologin Using Autologin

• افزودن سیستم خروج واکنشی Adding a Reactive Logout System

• افزودن Autologout Adding Autologout

• نیاز به Auth Token در Backend Requiring the Auth Token on the Backend

• ارسال رمز تأیید به Backend Sending the Auth Token to the Backend

• استفاده بیشتر توکن More Token Usage

• بسته شدن Wrap Up

انتشار برنامه ها Publishing the Apps

• معرفی ماژول Module Introduction

• آماده سازی تنظیمات برنامه Preparing App Configs

• نمادهای سفارشی و صفحه نمایش چلپ چلوپ Custom Icons & Splash Screens

• استقرار اندروید Android Deployment

• استقرار iOS iOS Deployment

• توسعه وب Web Development

جمع بندی Roundup

• خلاصه دوره Course Roundup