آموزش NativeScript + Angular: ساختن Native iOS، Android و برنامه های وب

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

معرفی Introduction

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

• NativeScript چیست؟ What is NativeScript?

• به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

• زیر سرپوش NativeScript Under the Hood of NativeScript

• Angular و Course Requirements چیست؟ What is Angular & Course Requirements

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

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

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

• با استفاده از کد منبع دوره Using the Course Source Code

اختیاری: Angular - یک تجدید کننده سریع Optional: Angular - A Quick Refresher

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

• Angular چیست؟ What is Angular?

• برنامه های کاربردی یک صفحه (SPA) در Angular و NativeScript Single Page Applications (SPAs) in Angular & NativeScript

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

• نصب Angular با رابط خط فرمان (CLI) Installing Angular with the Command Line Interface (CLI)

• در حال نصب IDE ما Installing our IDE

• آشنایی با ساختار پوشه پروژه Angular Understanding the Angular Project 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

• اجرای روش ها با مراجع محلی Executing Methods with Local References

• درک دو طرفه صحافی Understanding Two Way Binding

• انتقال داده با یک رویداد سفارشی Passing Data Up With a Custom Event

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

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

• استفاده از سرویس با تزریق وابستگی Using the Service with Dependency Injection

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

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

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

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

• پیاده سازی مکانیزم فشار فعال Implementing an Active Push Mechanism

• عمیق تر به مشاهدات و موضوعات شیرجه بزنید Dive Deeper Into Observables & Subjects

• ارسال درخواست های HTTP Sending HTTP Requests

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

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

راه اندازی محیط توسعه Setting Up the Development Environment

• راه اندازی NativeScript در macOS Setting up NativeScript on macOS

• راه اندازی NativeScript در ویندوز Setting up NativeScript on Windows

• ساخت اپلیکیشن های iOS در ویندوز Building iOS Apps on Windows

• استفاده از دستگاه های شبیه ساز مختلف Using Different Emulator Devices

• اجرای برنامه در یک دستگاه واقعی - چه چیزی ممکن است اشتباه کند؟ Running the App on a Real Device - What can go wrong?

• اجرای برنامه روی یک دستگاه واقعی Running the App on a Real Device

• چه خبر با فایل های .js اضافی؟ What's Up With The Extra .js Files?

• استفاده از تعویض ماژول داغ (HMR) Using Hot Module Replacement (HMR)

• منابع و لینک های مفید Useful Resources & Links

• منابع و لینک های مفید Useful Resources & Links

درک اصول Understanding the Basics

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

• راه اندازی شبیه سازها Starting the Emulators

• باید بخوانید: nativescript-angular Imports MUST READ: nativescript-angular Imports

• برنامه چگونه شروع می شود؟ How Does The App Start?

• درک کامپوننت ها و چیدمان ها Understanding Components & Layouts

• ساختن اولین کامپوننت خودمان Building our First own Component

• افزودن تعاملات عناصر اساسی Adding Basic Element Interactions

• درک اصول استایلینگ Understanding the Styling Basics

• استایل دادن به یک دکمه Styling a Button

• زمان تمرین - مبانی استایل سازی Time to Practice - Styling Basics

• درک چیدمان - تئوری Understanding Layouts - Theory

• StackLayout The StackLayout

• FlexboxLayout The FlexboxLayout

• زمان تمرین - طرح بندی فلکس Time to Practice - The Flex Layout

• GridLayout The GridLayout

• زمان تمرین - طرح شبکه Time to Practice - The Grid Layout

• درک AbsoluteLayout Understanding the AbsoluteLayout

• پیاده سازی طرح بندی گرید در پروژه دوره Implementing the Grid Layout in the Course Project

• تقسیم برنامه ما به اجزا Splitting our App Into Components

• انتقال داده ها بین کامپوننت ها Passing Data Between Components

• ایجاد فهرستی از اقلام Creating a List of Items

• ساخت لیست قابل پیمایش Making the List Scrollable

• با استفاده از "ListView" Using the "ListView"

• استخراج و رندر کردن مقادیر دینامیک Extracting & Rendering Dynamic Values

• اشکال زدایی برنامه ما Debugging our Application

• اطلاعات بیشتر در مورد اشکال زدایی (با کد VS) More on Debugging (with VS Code)

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

غواصی در مسیریابی برنامه Diving Into App Navigation

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

• درک گزینه های مختلف ناوبری Understanding the Different Navigation Options

• برنامه ریزی اپلیکیشن Planning the App

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

• اضافه کردن اولین مسیر ما Adding our First Route

• پیاده سازی پیمایش صفحه Implementing Page Navigation

• نحوه اضافه کردن ناوبری به جلو و عقب به برنامه ما How to Add Forward & Backward Navigation to our App

• درک شی روتر Understanding the Router Object

• کار با دستورالعمل "nsRouterLink". Working with the "nsRouterLink" Directive

• زمان برای تمرین - ناوبری Time to Practice - Navigation

• اطلاعات بیشتر در مورد انتقال صفحه More on Page Transitions

• اضافه کردن یک Actionbar و یک دکمه "بازگشت". Adding an Actionbar and a "Back" Button

• ایجاد یک کامپوننت مشترک برای دکمه "بازگشت". Creating a Shared Component for the "Back" Button

• اضافه کردن منطق به دکمه "بازگشت". Adding Logic to the "Back" Button

• بازنویسی جلوه انتقال پیش‌فرض Overwriting the Default Transition Effect

• افزودن مؤلفه «TabView». Adding the "TabView" Component

• نمایش محتوای مسیریابی پویا در برگه ها Displaying Dynamic Routing Content in the Tabs

• برجسته کردن برگه Currently Active Highlighting the Currently Active Tab

• Angular 8 و @ViewChild() Angular 8 & @ViewChild()

• افزودن ساید کش Adding a Sidedrawer

• اضافه کردن نماد Sidedrawer Adding the Sidedrawer Icon

• رندر کردن دکمه فقط در اندروید Rendering the Button on Android Only

• ارسال اطلاعات «دکمه فشرده شده است» به مؤلفه برنامه Forwarding the "Button is Pressed" Info to the App Component

• نمایش Sidedrawer Displaying the Sidedrawer

• پیاده سازی منطق خروج Implementing the Logout Logic

• انتقال داده های پویا Passing Around Dynamic Data

• خواندن پارامترهای دینامیک Reading Dynamic Parameters

• با استفاده از پارامتر دینامیک Using the Dynamic Parameter

• تزریق مقادیر پویا به نوار اقدام در هر سطح صفحه Injecting Dynamic Values Into the Action Bar on Per Page Level

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

• دسترسی به "viewContainerRef" Getting Access to the "viewContainerRef"

• انتقال داده به مدال Passing Data Into the Modal

• لوله های زاویه ای Angular Pipes

• Loading Routes Lazily - تئوری Loading Routes Lazily - Theory

• پیاده سازی Lazy Loading Implementing Lazy Loading

• بارگیری ماژول های اضافی به صورت تنبلی Loading Additional Modules Lazily

• اضافه کردن طرحواره گمشده Adding a Missing Schema

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

سبک دادن به برنامه ما Styling our App

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

• CSS در NativeScript - یک مرور کلی CSS in NativeScript - An Overview

• درک سبک های درون خطی خاص پلتفرم Understanding Platform Specific Inline Styles

• فایل های پلتفرم خاص Platform Specific Files

• تنظیم ویژگی ها از طریق CSS Setting Properties Via CSS

• نحوه عملکرد CSS در پشت صحنه How CSS Works Behind the Scenes

• باید بخوانید: ساخت تم ها و کار کردن MUST READ: Making Themes & Sass Work

• استفاده از تم Using a Theme

• کار با متغیرهای SASS Working with SASS Variables

• حالت دادن به نوار اکشن Styling the Action Bar

• آماده سازی فرم استایلینگ Preparing the Form Styling

• متمرکز کردن سبک های رایج Centralizing Common Styles

• یک ظاهر طراحی چالش امروز Styling Today's Challenge

• کار بر روی چالش فعلی Working on the Current Challenge

• اضافه کردن گرید به چالش فعلی Adding the Grid to the Current Challenge

• پر کردن شبکه Populating the Grid

• سبک دادن به شبکه Styling the Grid

• باز کردن Modal هنگام ضربه زدن به یک روز Opening the Modal when Tapping a Day

• تعمیر دکمه Sidedrawer و افزودن نمادها Fixing the Sidedrawer Button & Adding Icons

• اضافه کردن فونت متن Adding Text Fonts

• یکپارچه سازی تصاویر Integrating Images

• افزودن تصاویر آیکون Adding Icon Images

• بهبود ظاهر دکمه خروج Improving the Logout Button Look

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

افزودن فرم ها Adding Forms

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

• پیکربندی ورودی های فرم Configuring Form Inputs

• Angular 8 و @ViewChild() Angular 8 & @ViewChild()

• افزودن اعتبار سنجی فرم Adding Form Validation

• آیا چالش خود را حل کردید؟ Did you Solve your Challenge?

• ارسال ورودی های فرم Submitting Form Inputs

• افزودن فرم ورود Adding a Login Form

• راه اندازی فرم واکنشی Setting up the Reactive Form

• افزودن ارزش‌های فرم اعتبارسنجی و خواندن Adding Validation & Reading Form Values

• نمایش متن اعتبارسنجی در قالب Showing the Validation Text in the Template

• جابجایی بین ورود و ثبت نام Switching Between Login & Signup

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

دولت درک Understanding State

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

• تجزیه و تحلیل الزامات Analyzing the Requirements

• کار بر روی سرویس چالش Working on the Challenge Service

• اضافه کردن مدل های چالش و روز Adding the Challenge & Day Models

• با استفاده از مدل چالش Using the Challenge Model

• با استفاده از سرویس چالش Using the Challenge Service

• ارائه چالش فعلی Rendering the Current Challenge

• کار بر روی صفحه امروز و وضعیت Working on the Today Page & State

• آماده سازی منطق وضعیت روز به روز رسانی Preparing the Update Day Status Logic

• به روز رسانی وضعیت روز برای امروز Updating the Day Status for Today

• انعکاس وضعیت روز روی دکمه‌های عمل Reflecting the Day State on the Action Buttons

• اضافه کردن انیمیشن ها Adding Animations

• کنترل روزهای قابل تنظیم Controlling the Settable Days

• تنظیم وضعیت روز از طریق Modal Setting the Day Status via the Modal

• منعکس کننده وضعیت روز فعلی Reflecting the Current Day's State

• تغییر منطق لغو در مدال Changing the Cancel Logic in the Modal

• تنظیم مجدد وضعیت امروز به درستی Resetting Today's State Correctly

• به روز رسانی یک چالش موجود Updating an Existing Challenge

• غیرفعال کردن دکمه ویرایش Disabling the Edit Button

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

ذخیره داده ها در Backend Storing Data on the Backend

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

• راه اندازی پایگاه داده Firebase Setting Up the Firebase Database

• ذخیره یک چالش جدید در پایگاه داده Storing a New Challenge in the Database

• واکشی داده ها از Backend Fetching Data From the Backend

• نمایش داده های بارگذاری شده Displaying the Loaded Data

• به روز رسانی چالش ها Updating Challenges

• غیرفعال کردن دکمه "ناموفق". Disabling the "Failed" Button

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

افزودن احراز هویت به برنامه ما Adding Authentication to our App

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

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

• ثبت نام کاربران Signing Users Up

• ورود کاربران به Logging Users In

• رسیدگی به خطاها و نمایش هشدارها Handling Errors & Showing Alerts

• ایجاد یک شی کاربر و ذخیره توکن Creating a User Object & Storing the Token

• مدیریت کاربر در سرویس Auth Managing the User in the Auth Service

• پیوست کردن رمز تأیید به درخواست‌ها Attaching the Auth Token to Requests

• احراز هویت همه درخواست ها Authenticating All Requests

• اضافه کردن خروج Adding Logout

• بررسی وضعیت احراز هویت Checking the Authentication State

• افزودن ورود خودکار Adding Auto Login

• افزودن خروج خودکار Adding Auto Logout

• افزودن محافظ احراز هویت Adding an Authentication Guard

• اصلاح مسیر تغییر مسیر Fixing the Redirection Path

• اضافه کردن مجوز Adding Authorization

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

استقرار برنامه ما Deploying our App

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

• فرآیند انتشار The Publishing Process

• آزمایش برنامه ما بر روی دستگاه های مختلف Testing our App on Different Devices

• افزودن آیکون برنامه و نمادهای Splash Screen Adding the App Icon & Splash Screen Icons

• منابع بیشتر Further Resources

• انتشار اپلیکیشن iOS Publishing the iOS App

• انتشار اپلیکیشن اندروید Publishing the Android App

• منابع و لینک های مفید Useful Resources & Links

به اشتراک گذاری کد Code Sharing

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

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

• به اشتراک گذاری کد چگونه کار می کند How Code Sharing Works

• ایجاد یک پروژه مشترک Creating a Shared Project

• تجزیه و تحلیل ساختار پروژه Analysing the Project Structure

• اجرای برنامه ها Running the Apps

• تنظیم ماژول‌های Auth & App Adjusting the Auth & App Modules

• استفاده از خدمات کمکی Using Helper Services

• تکمیل مؤلفه Auth و افزودن سبک‌ها Finishing the Auth Component & Adding Styles

• کار بر روی Auth Form Styling Working on the Auth Form Styling

• بیشتر Auth More Auth

• افزودن خدمات کمکی بیشتر Adding More Helper Services

• اتمام بخش احراز هویت Finishing the Authentication Part

• شروع کار روی بخش چالش ها Starting Work on the Challenges Part

• کار بر روی صفحه "امروز". Working on the "Today" Page

• کار بر روی مؤلفه "ویرایش چالش". Working on the "Challenge Edit" Component

• رفع چالش ها نام فایل ها و واردات Fixing the Challenges Filenames & Imports

• اضافه کردن ActionBar Adding the ActionBar

• رسیدن به صفحه "ویرایش چالش". Reaching the "Challenge Edit" Page

• افزودن Auth Guard & Auto-Login Adding the Auth Guard & Auto-Login

• کار بر روی صفحه "چالش فعلی". Working on the "Current Challenge" Page

• تنظیم سبک ها Adjusting the Styles

• تنظیم مجدد صفحه ویرایش به درستی Resetting the Editing Page Correctly

• واکشی چالش فعلی در چندین صفحه Fetching the Current Challenge on Multiple Pages

• تنظیم موارد ناوبری Adjusting the Navigation Items

• پیمایش به عقب (درست) Navigating Back (Correctly)

• اضافه کردن مدال وب Adding a Web Modal

• افزودن پس زمینه برای Modal Adding a Backdrop for the Modal

• افزودن اقدامات مدال و تعاملات کاربر Adding Modal Actions & User Interactions

• انعکاس وضعیت روز در مدال Reflecting the Day Status in the Modal

• پر کردن شبکه به درستی Populating the Grid Correctly

• خروج از سیستم Logging Out

• اضافه کردن یک نشانگر بارگذاری Adding a Loading Indicator

• اتمام برنامه های موبایل Finishing the Mobile Apps

• بسته شدن Wrap Up

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

جمع بندی Roundup

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

• استفاده از منابع رسمی Using the Official Resources

• امتیاز: محتوای بیشتر! Bonus: More Content!