آموزش Ionic 3 را از ابتدا یاد بگیرید

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

معرفی Introduction

• معرفی Introduction

• بررسی اجمالی دوره Course Overview

• پیش نیازها Prerequisites

• پرسش و پاسخ Q&A

• تنظیم محیط - ویندوز Environment Setup - Windows

• تنظیم محیط - مک Environment Setup - Mac

• راه اندازی Ionic و Cordova Ionic and Cordova Setup

• ویراستاران Editors

• پلاگین های VSCode VSCode Plugins

• خلاصه Recap

پرایمر Angular 4 Angular 4 Primer

• آناتومی زاویه ای Angular Anatomy

• مقدمه ای بر Angular CLI Introduction to the Angular CLI

• ایجاد اولین برنامه Angular ما Creating our First Angular Application

• ساختار پوشه زاویه ای و تست Angular Folder Structure and Testing

• NgModule NgModule

• اجزاء Components

• مبانی CLI CLI Basics

• اتصال داده ها Data Binding

• مناسبت ها Events

• نکته ای در مورد FormsModule A note about FormsModule

• NgModel NgModel

• * ngIf بخشنامه *ngIf Directive

• *ngاگر دیگر *ngIf Else

• *ngFor Directive *ngFor Directive

• ارتباط مؤلفه Component Communication

• لوله های Pipes

• خلاصه Recap

• آزمون Angular 4 Angular 4 Quiz

Ionic 3 CLI Ionic 3 CLI

• نصب Ionic 3 CLI Installing the Ionic 3 CLI

• ایجاد یک پروژه جدید با Ionic 3 CLI Creating a New Project with the Ionic 3 CLI

• فهرست بندی الگوهای پروژه Listing Project Templates

• اجرای پروژه ما در مرورگر و روی یک دستگاه Running our Project in the Browser and on a Device

• استفاده از بارگذاری مجدد زنده در یک دستگاه Using Live Reload on a Device

• تولید اجزای پروژه با Ionic CLI Generating Project Components with the Ionic CLI

• دریافت اطلاعات محیطی با اطلاعات Ionic Getting Environment Information with Ionic Info

• دسترسی به اسناد یونی Accessing the Ionic Documentation

• ایجاد یک حساب Ionic.io Creating an Ionic.io Account

• احراز هویت به Ionic.io در داخل CLI Authenticating to Ionic.io Within the CLI

• ایجاد یک برنامه کاربردی در پلتفرم Ionic.io Creating an Application on the Ionic.io Platform

• استفاده از نمای Ionic برای اجرای برنامه خود در دستگاه Using Ionic View to Run Your Application on a Device

• ایجاد Splash Screen و Icon با CLI Generating Splash Screen and Icon With the CLI

شروع کار با Ionic 3 Getting Started with Ionic 3

• ایجاد یک برنامه یونی Creating an Ionic Application

• ارائه برنامه Serving the Application

• ساختار پوشه Folder Structure

• اولین برنامه شما Your First Application

• جریان سند یونی Ionic Document Flow

• چالش - یک برنامه یونی ایجاد کنید Challenge - Create an Ionic Application

• برنامه خود را در یک مرورگر اجرا کنید Run Your Application in a Browser

پروژه: برنامه تبریک Project: Greeting Application

• معرفی Introduction

• آغاز پروژه Project Initiation

• پروژه را در مرورگر اجرا کنید Run the Project in the Browser

• ایجاد قالب صفحه اصلی Creating the HomePage Template

• گرفتن نام تبریک Capturing the Greeting Name

• نمایش نان تست تبریک Displaying a Greeting Toast

• خلاصه Recap

• کد منبع Source Code

جدید: ماشین حساب BMI NEW: BMI Calculator

• معرفی Introduction

• ایجاد یک پروژه جدید Creating a new project

• ایجاد صفحه اصلی Creating the HomePage

• سفارشی کردن رابط کاربری Customising the UI

• محاسبه BMI Calculating BMI

• طبقه بندی BMI Classifying BMI

• بررسی اجمالی Overview

جهت یابی Navigation

• ایجاد یک صفحه جدید Creating a New Page

• پیمایش به صفحه دیگر Navigating to Another Page

• ناوبری در حال بارگذاری تنبل Lazy Loading Navigation

• اجزای بارگذاری تنبل - ویژگی/ماژول های مشترک Lazy Loading Components - Feature/Shared Modules

• پارامترهای ناوبری Navigation Parameters

• قلاب چرخه حیات Lifecycle Hooks

• ناوبری برگشت Back Navigation

• Root Navigation و Stack Overview Root Navigation and Stack Overview

موضوع بندی Theming

• مقدمه - انتخاب رنگ Introduction - Colour Selection

• رنگ های سفارشی Custom Colours

• تراز متن Text Alignment

• تبدیل متن Text Transformation

• لایه گذاری Padding

• لبه Margin

• تغییر کنتراست رنگ Changing Colour Contrast

جدید: ردیاب قیمت بیت کوین NEW: Bitcoin Price Tracker

• آنچه را که خواهیم ساخت What we will be Building

• یک پروژه جدید ایجاد کنید Create a New Project

• ایجاد صفحه بیت کوین Creating the Bitcoin Page

• متغیرهای سبک یونی Ionic Style Variables

• ساخت رابط کاربری Building the UI

• دریافت قیمت بیت کوین Getting Bitcoin Prices

• اتصال به قابل مشاهده ها Binding to Observables

• تغییر واحد پول انتخاب شده Changing Selected Currency

• تازه کردن ارز انتخابی Refreshing Selected Currency

• نتایج یادگیری Learning Outcomes

پروژه: برنامه چراغ قوه Project: Flashlight Application

• ایجاد یک اپلیکیشن جدید Creating a New Application

• اضافه کردن ارائه دهنده چراغ قوه Adding the Flashlight Provider

• کنترل عملکرد چراغ قوه Controlling Flashlight Functionality

• اضافه کردن دکمه ها و وضعیت Adding Buttons and Status

• UI و پلتفرم Ionic UI and Ionic Platform

• در حال اجرا بر روی یک دستگاه Running on a Device

• خلاصه و کار بیشتر Summary and Further Work

پروژه: جستجوگر پروفایل GitHub Project: GitHub Profile Searcher

• ایجاد پروژه «جستجوی نمایه GitHub». Creating the 'GitHub Profile Searcher' Project

• ایجاد صفحه جستجوی پروفایل Creating the Profile Search Page

• نمای و مدل جستجوی نمایه Profile Search View and Model

• ناوبری و پارامترها Navigation and Parameters

• تمسخر داده های کاربر Mocking User Data

• پیاده سازی نتایج جستجو Search Results Implementation

• نمایش نتایج جستجو بر روی صفحه نمایش Displaying Search Results on Screen

• تمسخر داده های مخزن Mocking Repository Data

• نمایش مخازن در نتایج جستجو Displaying Repositories in Search Results

• خلاصه بخش میانی Mid Section Recap

• بازیابی اطلاعات کاربر Retrieving User Data

• بازیابی مخازن کاربر Retrieving User Repositories

• @IonicPage() دکوراتور و پیوند عمیق @IonicPage() Decorator and Deep Linking

• کد منبع Source Code

• افکار نهایی Final Thoughts

• کد منبع Source Code

پروژه 2: لیست خرید - Ionic & Firebase CRUD Project 2: Shopping List - Ionic & Firebase CRUD

• پروژه را ایجاد کنید و Dependencies را نصب کنید Create the Project and Install Dependencies

• بارگذاری تنبل صفحات Lazy Loading Pages

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

• قوانین Firebase Firebase Rules

• AddShoppingItemPage را اضافه کنید Add the AddShoppingItemPage

• مشاهده AddItemPage AddItemPage View

• مدل کالاهای خرید ShoppingItem Model

• افزودن اقلام خرید Adding Shopping Items

• نمایش اقلام خرید Displaying Shopping Items

• ویرایش اقلام خرید Editing Shopping Items

• افزودن سرویس Toast Adding a ToastService

• حذف موارد از لیست Removing Items from the List

• خلاصه Recap

• کد منبع Source Code

طراحی مبتنی بر UX: طراحی برنامه «بیپ». UX Driven Design: Designing the 'Beep' Application

• پیشگفتار Preface

• داربست طراحی برنامه ما Scaffolding our Application Design

• صفحه معرفی Splash Screen

• ورود و ناوبری Login and Navigation

• ثبت نام Register

• صندوق ورودی Inbox

• لیست کانال Channel List

• مشخصات Profile

• انتخاب یک کاربر Selecting a User

• چت روم Chatroom

• یک در یک چت One on One Chat

• ویرایش نمایه Edit Profile

• بررسی الزامات Reviewing Requirements

• جستجو برای کاربران Searching for Users

• خلاصه Recap

• نمونه اولیه طراحی "بیپ". 'Beep' Design Prototype

کار در حال انجام: بیپ: یک برنامه چت با Ionic 3 و Firebase ایجاد کنید Work in Progress: Beep: Create a Chat Application with Ionic 3 and Firebase

• پیشگفتار Preface

• پیشگفتار Preface

• ایجاد برنامه "بیپ" ما Creating our 'Beep' Application

• ایجاد صفحه "ورود". Creating the 'Login' Page

• فرم ورود و سبک Login Form and Styling

• ثبت نام Register

• موضوع بندی Theming

• ایجاد صفحه و پیمایش Page Creation and Navigation

• زبانه ها Tabs

• نمادهای برگه Tab Icons

• بارگذاری تنبل Lazy Loading

• قالب بندی صفحه صندوق ورودی Theming the Inbox Page

• داده های تمسخر آمیز Mocking Data

• نمایش پیام ها روی صفحه Showing Messages On Screen

• افزودن کامپوننت ها و بازسازی مجدد Adding Components and Refactoring

• ایجاد حساب کاربری با Firebase و AngularFire2 Creating User Accounts with Firebase and AngularFire2

• احراز هویت کاربران با Firebase و AngularFire2 Authenticating Users with Firebase and AngularFire2

• ارتباط کامپوننت با EventEmitters Component Communication with EventEmitters

• احراز هویت چکیده به یک سرویس Abstract Authentication to a Service

• Refactoring کامپوننت فرم ثبت نام برای استفاده از EventEmitters Refactoring Register Form Component to use EventEmitters

• ایجاد فرم ویرایش پروفایل Creating an Edit Profile Form

• ذخیره داده های پروفایل کاربری تأیید شده در Firebase Saving Authenticated User Profile Data to Firebase

• فرم ورود به سیستم/بهبود جریان Login Form/Flow Improvements

• اعتبار سنجی فرم ورود/ثبت Login/Register Form Validation

• نمایش مشخصات کاربر Displaying User Profile

• جستجوی کاربران و پیکربندی قوانین Firebase Searching Users and Configuring Firebase Rules

• ویرایش نمایه به عنوان یک کاربر تایید شده Edit Profile as an Authenticated User

• احراز هویت خودکار موقت کاربر Temporary Automatic User Authentication

• کوتاه کردن عبارت های جستجو Trimming Search Queries

• ایجاد صفحه پیام Creating the Message Page

• حذف برگه ها از صفحات فرعی Removing Tabs from Sub Pages

• اضافه کردن جعبه ارسال پیام Adding a Send Message Box

• نمایش پیام های چت Displaying Chat Messages

• افزودن دکمه خروج Adding a Signout Button

• ترکیب Observables با mergeMap Combining Observables with mergeMap

• افزودن کانال های چت Adding Chat Channels

• نمایش لیست کانال Displaying Channel List

• ارسال پیام به کانال ها Sending Messages to Channels

• نمایش کاربران آنلاین Showing Online Users

• استقرار میزبانی Firebase Firebase Hosting Deployment

• ساختار پیام چت Chat Message Structure

• پیام های کاربر با توابع ابری Firebase User Messages with Firebase Cloud Functions

• آماده سازی کامپوننت پیام های چت Preparing Chat Messages Component

• ارسال پیام های یک به یک چت Sending One on One Chat Messages

• نمایش پیام های یک به یک Displaying One on One Messages

• آخرین پیام ها را با توابع ابری ایجاد کنید Generate Last Messages with Cloud Functions

• نمایش آخرین لیست پیام و شروع مکالمات Displaying Last Message List and Starting Conversations

اجزای یونیک 3 Ionic 3 Components

• پیشگفتار Preface

• دکمه ها Buttons

• نشان ها Badges

• چیپس Chips

• لیست FAB FAB List

• مدال Modal

• نان تست Toast

• تغییر وضعیت Toggle

• نکات ابزار Tooltips

• Popover و onDismiss() Popover and onDismiss()

• مناسبت ها Events

• استفاده از IonicPage() برای پیوند عمیق Using @IonicPage() for Deep Linking

• صفحه تقسیم Split Pane

• لغزنده Slider

پلاگین های Ionic Native Ionic Native Plugins

• معرفی Introduction

• معرفی Introduction

• شماره تماس Call Number

• کوردووا Cordova

• نسخه برنامه Application Version

• AdMobPro AdMobPro

• روشنایی Brightness

• اثر انگشت AIO Fingerprint AIO

• چراغ قوه Flashlight

• SQLite SQLite

• گفتار به متن Speech to Text

• تشخیص شبکه Network Detection

• نشان های اعلان Notification Badges

• لرزش Vibration

• دستگاه پخش ویدئو Video Player

متفرقه Misc

• بهبود عملکرد با WebViews (Crosswalk، UIWebView، WKWebView) Performance Improvements with WebViews (Crosswalk, UIWebView, WKWebView)

• رابط کاربری آگاه از پلتفرم Platform Aware UI

• استفاده از "Async" و "Await" Using 'Async' and 'Await'

• استفاده از نمای Ionic برای آزمایش برنامه ما Using Ionic View to Test Our Application