آموزش React JS + Angular + Rails 5 Bootcamp

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

معرفی پروژه Project Introduction

• برنامه Angular + Rails که می خواهیم بسازیم The Angular + Rails Application We're Going to Build

• معماری کاربردی برای یک برنامه Angular + Rails Application Architecture for an Angular + Rails Application

• Monolith vs Microservice Architecture Deep Dive Monolith vs Microservice Architecture Deep Dive

• نقش خدمات در معماری میکروسرویس The Role of Services in Microservice Architecture

• نقش کامپوننت ها در میکروسرویس ها The Role of Components in Microservices

پیکربندی سیستم برای برنامه Angular 2 System configuration for Angular 2 Application

• پیکربندی یک سیستم برای اجرای برنامه های Angular 2 Configuring a System to Run Angular 2 Applications

• ایجاد یک برنامه Angular 2 از ابتدا Generating an Angular 2 Application from Scratch

توسعه Angular 2 Angular 2 Development

• سلام انگولار 2 Hello Angular 2

• کار با Browser Sync Working with Browser Sync

• ایجاد مؤلفه برنامه Creating the App Component

• مقدمه ای بر مسیریابی Angular 2 Introduction to Angular 2 Routing

• نحوه ایجاد فایل های View در Angular 2 How to Create View Files in Angular 2

ساخت مؤلفه مدیریت اسناد Building the Document Management Component

• یک مؤلفه مدیریت اسناد ایجاد کنید Create a Document Management Component

• ایجاد پیوند بین صفحات در Angular Creating Links Between Pages in Angular

• ایجاد یک رابط زاویه ای برای مدل سازی داده ها Creating an Angular Interface to Model Data

• ایجاد داده های ساختگی در یک برنامه Angular 2 Creating Mock Data in an Angular 2 Application

• نحوه دسترسی به داده های کامپوننت از یک الگوی نمای زاویه ای How to Access Component Data from an Angular View Template

ساخت مولفه پیشنهاد Building the Proposal Component

• ایجاد مؤلفه پیشنهاد اولیه Creating the Initial Proposal Component

• ایجاد یک مدل داده Angular 2 برای پروپوزال ها Creating an Angular 2 Data Model for Proposals

• پر کردن نمای لیست زاویه ای با داده ها Populating an Angular List View with Data

• ساخت کامپوننت Angular 2 که پیشنهادات جدیدی ایجاد می کند Building an Angular 2 Component that will Create New Proposals

• آشنایی با فرم های Angular 2 Introduction to Angular 2 Forms

• تکمیل فرم پروپوزال Angular Completing the Angular Proposal Form

• نحوه پیاده سازی اعتبارسنجی داده های دینامیکی در Angular 2 How to Implement Dynamic Data Validations in Angular 2

• ایجاد مسیرهای پویا در Angular 2 بر اساس جستجوی ID Creating Dynamic Routes in Angular 2 Based on an ID Lookup

• نحوه راه‌اندازی کلاس‌های «اکتیو» در نماهای Angular 2 How to Trigger 'Active' Classes in Angular 2 Views

ادغام Bootstrap 4 در یک برنامه Angular 2 Integrating Bootstrap 4 in an Angular 2 Application

• نصب Bootstrap 4 در یک Angular 2 Application با ng-bootstrap Installing Bootstrap 4 into an Angular 2 Application with ng-bootstrap

• نحوه تنظیم سبک های جهانی در یک برنامه Angular 2 How to Set Universal Styles in an Angular 2 Application

• ایجاد نوار ناوبری Bootstrap 4 Creating a Bootstrap 4 Navigation Bar

• نحوه اضافه کردن پویا کلاس های CSS در نمای Angular 2 How to Dynamically Add CSS Classes in an Angular 2 View

• استفاده از کارت های بوت استرپ در یک برنامه Angular Using Bootstrap Cards in an Angular Application

• ایجاد فایل‌های CSS خاص Angular 2 Component Creating Angular 2 Component Specific CSS Files

• تنظیم سبک های جهانی اضافی برای همه اجزای برنامه در Angular 2 Setting Additional Global Styles for All Application Components in Angular 2

• نحوه نادیده گرفتن سبک های ناوبری پیش فرض Bootstrap 4 How to Override the Default Bootstrap 4 Navigation Styles

• اضافه کردن سبک به فرم Angular 2 Adding Styles to an Angular 2 Form

• نحوه استایل کردن پیام‌های اعتبارسنجی پویا در Angular 2 How to Style Dynamic Validation Messages in Angular 2

• نحوه استایل دادن به ورودی های فرم با استایل های Bootstrap 4 How to Style Form Inputs with Bootstrap 4 Styles

• نحوه ادغام سبک های مؤلفه گروه لیست در Angular 2 How to Integrate the List Group Component Styles in Angular 2

• نحوه کار با Angular 2 Pipes برای قالب بندی ارزها How to Work with Angular 2 Pipes to Format Currencies

• تغییرات سبک نهایی در برنامه Angular Final Style Changes to Angular Application

• نحوه افزودن فونت سفارشی به برنامه Angular 2 How to Add a Custom Font to an Angular 2 Application

ایجاد یک میکروسرویس Ruby on Rails برای مدیریت اسناد Creating a Ruby on Rails Microservice to Manage Documents

• ایجاد یک برنامه API Rails 5 از ابتدا Generating a Rails 5 API Application from Scratch

• نحوه تولید داده در برنامه Rails 5 How to Generate Data in a Rails 5 Application

• نحوه پیکربندی تنظیمات شبکه برای یک برنامه Rails API How to Configure the Network Settings for a Rails API App

اتصال Angular Front End با برنامه Rails Document API Connecting the Angular Front End with the Rails Document API App

• ایجاد یک سرویس Angular 2 برای مدیریت داده های API Creating an Angular 2 Service for Managing API Data

• مقدمه ای بر Angular 2 Observables Introduction to Angular 2 Observables

• نحوه ارائه داده های API در یک برنامه Angular 2 How to Render API Data in an Angular 2 Application

• تجزیه و تحلیل به روز رسانی داده های زمان واقعی با سیستم Angular + Rails Analyzing Real Time Data Updates with an Angular + Rails System

• تغییرات سبک نهایی در Angular 2 Document Component Final Style Changes to Angular 2 Document Component

ایجاد اپلیکیشن Proposal Ruby on Rails Microservice API Creating the Proposal Ruby on Rails Microservice API Application

• ساخت میکروسرویس API Rails 5 Building a Rails 5 API Microservice

• استفاده از فایل Seeds برای ایجاد نمونه داده در یک برنامه API Rails 5 Using the Seeds File to Create Sample Data in a Rails 5 API App

اتصال برنامه Angular 2 با میکروسرویس Rails Proposal Connecting the Angular 2 App with the Rails Proposal Microservice

• استفاده از Angular 2 Observable برای استریم داده های زنده برای جزء لیست پیشنهادی Using an Angular 2 Observable to Stream Live Data for the Proposal List Componen

• نحوه پیاده سازی Angular 2 Show Page Component با داده های API How to Implement an Angular 2 Show Page Component with API Data

• نحوه ایجاد یک تابع پیوند سفارشی در کامپوننت Angular 2 How to Build a Custom Link Function in an Angular 2 Component

• ایجاد یک دکمه ارسال فرم Angular 2 Creating an Angular 2 Form Submit Button

• نحوه ایجاد رکوردهای جدید در Rails API از یک برنامه Angular How to Create New Records in a Rails API from an Angular App

تغییرات نهایی برنامه Final Application Changes

• نحوه اضافه کردن اعلان‌های پویا در یک برنامه Angular 2 How to Add Dynamic Notifications in an Angular 2 Application

• افزودن تغییرات سبک نهایی به مولفه نمایش پیشنهادی Adding Final Style Changes to the Proposal Show Component

• نحوه ارسال ایمیل از میکروسرویس Rails How to Trigger Sending Emails from the Rails Microservice

• خلاصه دوره Angular 2 + Rails 5 Bootcamp Angular 2 + Rails 5 Bootcamp Course Summary

ایجاد برنامه React JS Creating the React JS Application

• چگونه با TypeScript، Webpack، Babel و Scss یک React Application ایجاد کنیم How to Generate a React Application with TypeScript, Webpack, Babel and Scss

• Deep Dive: Routing در React Deep Dive: Routing in React

• نحوه دسترسی به پارامترهای URL در React با useParams Hook How to Access the URL Params in React with the useParams Hook

• نحوه تکرار روی آرایه ها و آرایه های تودرتو در React How to Iterate Over Arrays and Nested Arrays in React

• در React یک صفحه اسلایدینگ متحرک بسازید Build an Animated Sliding Pane Modal in React

• ترکیب useEffect و useState React Hooks برای ذخیره و مدیریت داده ها Combining the useEffect and useState React Hooks to Store and Manage Data

• ایجاد یک کامپوننت صفحه کشویی اختصاصی در یک فایل جداگانه Creating a Dedicated Sliding Pane Component in a Separate File

• نحوه کار با فرم ها در یک برنامه React JS How to Work with Forms in a React JS Application

کارگاه آموزشی کدنویسی در عمق عمیق Live Deep Dive Coding Workshops

• یک React Hook سفارشی برای افزودن ویژگی های پاسخگو به یک برنامه ایجاد کنید Create a Custom React Hook to Add Responsive Features to an Application

React + Rails Authentication React + Rails Authentication

• بخش مقدمه Section Introduction

• ایجاد برنامه Ruby on Rails و پیکربندی اولیه Ruby on Rails App Creation and Initial Configuration

• ساخت مدل کاربر و کنترلر جلسه برای احراز هویت Rails API Building the User Model and Session Controller for the Rails API Authentication

• پیاده سازی کنترل کننده ثبت و ویژگی های احراز هویت نهایی Implementing the Registration Controller and Final Authentication Features

• پیکربندی Rails API Session Store برای کار در همه محیط‌ها Configuring the Rails API Session Store to Work in All Environments

• ایجاد و پیکربندی برنامه احراز هویت React JS Generating and Configuring the React JS Authentication Application

• ساخت React Registration Component Building the React Registration Component

• React JS Render Props برای مدیریت وضعیت وارد شده و هدایت مجدد کاربران React JS Render Props for Managing the Logged In State and Redirecting Users

• ساخت کامپوننت ورود در React JS Building the Login Component in React JS

• نحوه بررسی اینکه آیا کاربر با React وارد شده است یا خیر How to Check if a User is Logged In with React

• پیاده سازی عملکرد Logout در React Implementing the Logout Functionality in React