سلام استاد، خیلی ممنون از دوره خوبتون، بسیار عالی انگولار رو آموزش دادید.
آموزش جامع Angular (انگولار) و TypeScript (پروژه محور و ورود به بازار کار)
امروزه همه به دنبال ترندترینها هستند. ترندترین تکنولوژیها، ترندترین مهارتها، ترندترین زبان برنامهنویسی و هر چیزی که در دنیا خواهان بیشتری دارد. در این مطلب قصد داریم در ارتباط با یکی از ترندترین و جذابترین مهارتها یعنی تسلط بر فریم ورکهای کاربردی در طراحی سایت صحبت کنیم. اگر تمایل دارید حوزه کاری خود را طراحی سایت انتخاب کنید یا این که به صورت مبتدی در حال یادگیری مبانی توسعه وب هستید، تسلط بر فریم ورکها و آشنایی با آنها در سطح ابتدایی و پیشرفته برای شما الزامی است. اما شاید ندانید که فریم ورک به چه معنا است. باید گفت که فریم ورک در واقع نوعی چهارچوب برای طراحی سایت و وب اپلیکیشنها میباشد. در این مطلب با ما همراه باشید تا یکی از کاربردیترین فریم ورکها، یعنی انگولار را، به شما معرفی کنیم.
از نظر شما فرم ورک انگولار به چه معنا است؟
معنی واژه angular در فارسی زاویه دار میباشد. به نوعی انگولار، یک فریم ورک متن باز تحت وب است که بر مبنای جاوا اسکریپت ارائه شده است. به کمک این فریم ورک میتوان وب اپلیکیشنهایی پویا ساخت. انگولار برای برنامهنویسان این شرایط را فراهم میکند که html زبان اصلی خود را انتخاب کنند و همچنین برای این که اجزای تشکیل دهنده نرمافزار را شفافسازی کنند، به کمک آن میتوانند سینتکسهای html را گسترش دهند. html زبانی مخصوص سایت و طراحی اپلیکیشن میباشد. به طور کلی فریم ورک angular زبان سادهای است که ضمن پشتیبانی از تمامی نسخههای html، به منظور ساخت و توسعه وب اپلیکیشنها و همچنین طراحی نرمافزارهای تحت وب در سیستم عاملهای اندروید و IOS مورد استفاده قرار میگیرد.
مهمترین کاربرد angular
وب سایت های قدیمی و معمولی معمولاً حالت چند صفحهای داشتند که برای انجام هر عملی یکبار صفحه مرورگر رفرش میشد و همه چیز از نو برای کاربر لود میشد. اصطلاحاً به آنها مولتی پیج اپلیکیشنها گفته میشود. اما سینگل پیج اپلیکیشنها دقیقا مانند اپلیکیشن موبایل عمل میکنند و قطعات و المانهای تشکیلدهنده یک صفحه وب سایت جلوی چشم کاربر بدون رفرش شدن و لود شدن مجدد جابهجا میشوند. جالب است بدانید که ساخت وب سایتهای تک صفحهای هزینه و زمان کمتری به نسبت سایتهای چند صفحهای نیاز دارد. به علاوه کاربران نیز با این نوع وب سایتها خیلی راحتتر هستند و تعامل بهتری برقرار میکنند. از طرف دیگر سازگاری آنها با گوشیهای هوشمند خیلی بیشتر است. یکی از بهترین ابزارهایی که میتوان با آنها وبسایتهای تک صفحهای ایجاد کرد، فریم ورک انگولار میباشد؛ که توسط گوگل ایجاد شده و پشتیبانی میگردد.
ویژگیهای angular
در ادامه با ویژگی های فریم ورک محبوب انگولار آشنا خواهیم شد. با ما همراه باشید.
قابل اعتماد بودن و محبوبیت انگولار
انگولار یک فریم ورک بزرگ، مبتنی بر جاوا اسکریپت میباشد. اکوسیستم بزرگی پشت این فریم ورک قرار گرفته که از برنامهنویسان سراسر دنیا تشکیل شده است. به علاوه جالب است بدانید که بیشتر از ۶۳ هزار ستاره دارد که نشاندهنده محبوبیت و قابل اعتماد بودن آن میباشد.
برخورداری از TypeScript
اگر چه angular برگرفته شده از جاوا اسکریپت است؛ اما مبنای اصلی این فریم ورک یک ابر مجموعه از جاوا اسکریپت به نام TypeScript میباشد. زمانی که برنامهنویس برنامهای را ارائه میدهد برای دیدن نتیجه کار خود نیاز است که برنامه در همان زمان اجرا گردد. تایپ اسکریپت با کامپیل کردن کد نوشته شده به جاوا اسکریپت، این شرایط را برای برنامهنویس فراهم می کند. این ویژگی یک مزیت فوقالعاده برای توسعهدهندگان وب محسوب میشود. چرا که در زمان تایپ، تمامی خطاهای آنها را نشان میدهد. این ویژگی یکی از برترین تمایزها بین تایپ اسکریپت و جاوا اسکریپت میباشد.
پایداری و ثبات انگولار
همان طور که اشاره شد گوگل از انگولار پشتیبانی میکند؛ که باعث ثبات و پایداری این فریم ورک می گردد. لازم به ذکر است که تمامی نسخههای ۲ به بعد این فریم ورک از ثبات و پایداری خاصی برخوردارند و به راحتی و بدون هیچ گونه تغییر کدی میتوان پروژههای قبلی را به نسخههای بالاتر ارتقا داد.
فریم ورکی ماژولار
زمانی که شما برنامهای را به صورت یکپارچه و کامل مینویسید، دیگر احتمال تغییر در هر قسمت به سختی امکان پذیر است. طراحی به سبک ماژولار کمک میکند یک برنامه با اجزای مختلف، کنار هم قرار بگیرند. در این صورت تغییر و ویرایش در هر قسمت به راحتی انجام میشود. این مزیت باعث میشود که هم هزینه نگهداری برنامه در آینده کاهش یابد و هم اینکه از ماژولها در پروژههای دیگر نیز استفاده کرد. به عبارتی طراحی ماژولار یعنی قابلیت افزودن ابزارهای جانبی بعد از طراحی کامل به برنامه امکانپذیر است. ماژولهای متفاوتی یک انگولار را سازماندهی میکنند. به نوعی کدهای شما دارای ماژولهای مجزایی هستند که هر کدام مسئول توابع خاصی می باشند. شما میتوانید به راحتی خودتان ماژول طراحی کنید یا از کامپوننتهای آمادهای که توسط طراحان ارائه میگردد، استفاده کنید.
سازگاری انگولار با کدهای متفاوت
برنامهها و سایت های ارائه شده به کمک انگولار کامپوننت محور هستند. به نوعی لوگوهای مستقلی کنار یکدیگر قرار میگیرند و در نهایت پروژه نهایی را ایجاد میکنند. این ویژگی کمک میکند تا کدی که در یک پروژه استفاده شده، بارها در پروژههای دیگر نیز مورد استفاده قرار گیرد و به طور کلی سازگاری و نگهداری کدها را راحتتر میکند.
پشتیبانی انگولار از Ionic
،Ionic سکوی توسعهی موبایل، اولین بار توسط انگولار پشتیبانی شد و بستری را فراهم کرد تا برنامههای تلفن همراه برای Android و iOS ایجاد شود. لازم به ذکر است که هنوز هم از انگولار به طور گسترده با قالب Ionic به منظور توسعه و گسترش برنامههای تلفن همراه استفاده میگردد.
بهرهگیری از معماری MVC
این معماری کمک میکند تا دادهها به صورت دو طرفه متصل شوند. به نوعی به جای اینکه کد قسمتهای مختلف به صورت یک جا و کلی نوشته شوند، کدها در سه دسته قرار گرفته و با یکدیگر تعامل دارند. این سه دسته کد شامل سه مورد زیر می باشد.
- view: اطلاعات موجود در model را به کاربر نشان میدهند و دستور کاربر را به controller انتقال میدهد.
- controller: وظیفه controller برقراری ارتباط میان سایر لایهها میباشد. همچنین در به روز رسانی model نقش مهمی ایفا میکند.
- model: دادهها را حمل میکند و توسط controller تغییرات اعمال شده توسط model را به view اطلاع رسانی میکند.
وظایف برنامهنویسان انگولار
- با کمک Angular JS و TypeScript رابط کاربری را توسعه و طراحی میکنند.
- یک برنامهی فرانت اند را به طور کامل آمادهسازی میکنند.
- میبایست ارتباط نزدیکی با وب سرورهای خارجی داشته باشند.
- محصولات را به کمک تجزیه و تحلیل کد توسعه می دهند
- میتوانند در بخشهای مختلف و مرتبط دیگر همکاری داشته باشند.
- بسته به نیاز مجموعه میتوانند در مرورگرهای متفاوت کدهای مناسب جاوا اسکریپت، HTML و CSS بنویسند.
بازار کار انگولار
مزیتها و ویژگیهای اشاره شده باعث شده تا angular یکی از محبوبترین زبانهای برنامهنویسی شناخته شده در جهان محسوب گردد. این زبان برنامه نویسی در ایران و جهان از وضعیت کاری خوبی برخوردار است. چرا که با توسعه تکنولوژی و افزایش تقاضا برای استخدام برنامهنویس انگولار مواجه هستیم. صرفا کافی است سایتهای کاریابی را بررسی کنید تا به طور اختصاصی آگهیهای استخدام برنامهنویس انگولار را ببینید.
در پایان
در این مطلب آموزشی سعی کردیم شما را با یکی از محبوبترین و پرکاربردترین فریم ورکهای دنیا آشنا کنیم. افزایش تقاضا برای استخدام برنامه نویس انگولار و توسعه تکنولوژی باعث شده تا تعداد شرکتهایی که آگهیهای فرصت شغلی و استخدام برنامه نویس انگولار را ثبت میکنند، روز به روز افزایش یافته و بیشتر شوند. بنابراین میتوان گفت که این زبان برنامهنویسی در ایران و جهان از موقعیت کاری خوبی برخوردار است. اگر قصد دارید در این حیطه به طور حرفهای کار کنید و نمیدانید چطور شروع کنید، توصیه ما به شما تهیهی دورهی حرفهای و جامع angular و typescript میباشد.
سرفصل های دوره
بررسی پروژه های دوره
بررسی محبوبیت و مزایای انگیولار در مقابل فریمورک ها و کتابخانه های مشابه (Vue.js , React.js)
بررسی بازار کار Angular
تایپ اسکریپت چیه و تا چه حد برای دوره اون رو یاد بگیریم ؟
معرفی چنل دیسکورد و کامیونیتی برنامه نویسان انگولار کدیاد
شروع کار با تایپ اسکریپت و انواع داده ها - Getting Started With Typescript And DataTypes
کامپایلر تایپ اسکریپت - Typescript Compiler
کلاس ها و رابط ها - Classes And Interfaces
تایپ های پیشرفته - Advanced Types
جنریک ها - Generics
دکوراتور ها - Decorators
نصب پیشنیاز ها و ایجاد اولین پروژه
بروزرسانی پروژه های انگولار
آشنایی بیشتر با دستورات و بررسی اجمالی فایل های Config
آشنایی با کامپوننت app
ساخت اواین کامپوننت
اعلان کامپوننت در app.module
ساخت کامپوننت با Angular CLI
نصب Bootstrap و بررسی انواع Component Selectors
بررسی انواع Styles در کامپوننت ها
آشنایی با String Interpolation
آشنایی با Property Binding
آشنایی با Event Binding
آشنایی با Event Binding - قسمت 2
آشنایی با Two-way Data binding
تمرین
حل تمرین
آشنایی با Directives و استفاده از ngIf
نحوه استفاده از ngStyle
نحوه استفاده از ngClass
استفاده از ngFor
تمرین دوم
حل تمرین
دریافت index مقادیر از حلقه ngFor
مهاجرت و بروزرسانی به نسخه 14 انگولار
کامپوننت بندی پروژه
متصل کردن مقادیر میان کامپوننت ها
آشنایی با Input Aliases
آشنایی با مفهوم EventEmitter
استفاده از EventEmitter و دکوراتور Output
تنظیم DataTypes و کامل کردن فرایند ها در EventEmitters
آشنایی با Output Aliases
آشنایی با مفهوم View Encapsulation
استفاده از Local Refrences
آشنایی و استفاده از دکوراتور ViewChild
آشنایی با Content Projection
آشنایی با چرخه حیات کامپوننت ها - Component Lifecycle
آشنایی با چرخه حیات کامپوننت ها - قسمت 2
آشنایی با چرخه حیات کامپوننت ها - قسمت 3
آشنایی با چرخه حیات کامپوننت ها - قسمت 4
بررسی و یادآوری متخصر Directives
ساخت یک Directive سفارشی
آشنایی و استفاده از Renderer
آشنایی و استفاده از HostListener
آشنایی و استفاده از HostBinding
استفاده از Property Binding در Directive
آشنایی با مفهوم Structural Directive
استفاده از TemplateRef و ViewContainerRef
Data Binding در Structural Directives
Data Binding در Structural Directives - قسمت 2
Data Binding در Structural Directives - قسمت 3
آشنایی با ngSwitch
آشنایی با Services
دریافت داده از API با استفاده از Services
درک مفهوم وابستگی و Dependency Injection
استفاده از Hierarchical Injection
DI در سرویس ها
آشنایی با Routing
استفاده از RouterLink و تکمیل مسیر دهی
آشنایی با Wild Card Route و Redirecting Routes
آشنایی با Route Parameters
انجام Navigation با استفاده از Route Params
استفاده از Optional Parameters
آشنایی با Relative Navigation
آشنایی با Child Route
آشنایی با Observables
بررسی حالات Complete و Error در Observables
آشنایی با of و from در rxjs
آشنایی و نحوه استفاده از operators در Rxjs
انتقال داده بین کامپوننت ها با استفاده از Service
انتقال داده بین کامپوننت ها با استفاده از Subject
استفاده از unsubscribe
آشنایی با رویکرد های Form Handling و پیکر بندی فرم با رویکرد Template Driven
آشنایی با Form Statement و اعتبار سنجی ورودی ها
استفاده از Data Binding در Form Handling
دسته بندی ورودی ها با ngModelGroup و کنترل مقادیر در Radio Buttons
استفاده از setValue و patchValue
دریافت و نمایش داده های فرم
آغاز کار با Reactive Forms
بررسی Submit و افزودن Validator
دسترسی به Control و افزودن متن برای اعتبار سنجی
ایجاد Form Group و دسته بندی کنترل ها
آشنایی و استفاده از Form Array
تغییر و پاک کردن مقادیر پیش فرض فرم
آشنایی با Pipes
استفاده از Pipe Chaining
ساخت و مقدار دهی یک Custom Pipe
ساخت جستجو روی محصولات با استفاده از pipe
پارامتر دهی به Pipe و ایجاد جستجوی پویا
آشنایی با Pipe های Pure و Impure
آشنایی با Async Pipe
آشنایی با Http Module و ارسال درخواست از نوع Get
ارسال درخواست از نوع Post
آشنایی و استفاده از Patch و Put
استفاده از Delete
استفاده از سرویس ها در درخواست های HTTP
مقدمه Error Handling در HTTP Requests
پیاده سازی Error Handling
بهبود و ارتقا Error Handling
پیاده سازی Bad Request Error Handler
ایجاد یک Global Error Handler
ایجاد یک Error Handler Method در Post Service
ایجاد یک Data Service برای انجام CRUD در همه سرویس ها
استفاده از Map Operator
آشنایی با Angular Material
نصب و پیکربندی Angular material در پروژه
بررسی Button در Material و نحوه استفاده از Material Icons
ایجاد کامپوننت های اصلی پروژه و ساختار اولیه فرم Signup
بررسی کلی Flexbox
ایجاد فرم Signup و استفاده از Angular Flex Layout
استفاده از Hint و Error و اعتبارسنجی فرم
افزودن Datepicker و BrowserAnimationModule
افزودن Checkbox و کامل کردن Form
فارسی کردن UI و افزودن تقویم شمسی
افزودن Sidenav و Toolbar
استایل دهی Toolbar و SideNav
افزودن ایکون های Toolbar
Responsive یا واکنش گرا کردن Toolbar با استفاده از Flex Layout
افزودن لیست به Sidenav
کامپوننت بندی Navigation
ساخت صفحه Welcome و افزودن tabs برای تمرینات
ساخت صفحه New Training و استفاده از Card و Dropdown
ایجاد spinner و شمارنده در قسمت انجام تمرین
افزودن Dialog Modal به قسمت تمرینات
افزودن قابلیت Exit و Continue به Dialog Modal
پیاده سازی اولیه Authentication
ایجاد Logout و Navigation بعد از احراز هویت
ایجاد Auth Guard
ایجاد Training Service
ارسال داده به Current Training Component
استفاده از مدت تمرین در Progress Spinner
ذخیره اطلاعات بعد از لغو یا اتمام تمرین
افزودن Data Table برای نمایش تمرینات
استفاده از pipe برای تبدیل تاریخ و ترجمه وضعیت تمرین
افزودن Sorting به جدول داده
افزودن جستجوی آنی به Data Table
افزودن صفحه بندی به جدول داده
فارسی کردن صفحه بندی با استفاده از ماژول MatPaginatorIntl
آشنایی با Firebase و ایجاد پایگاه داده Cloud Firestore
ایجاد کالکشن تمرینات و اتصال پروژه به Firestore
دریافت و نمایش داده ها بصورت Asynchronous
استفاده از متد SnapshotChanges
انتقال اتصال دیتابیس از Component به بخش Service
ذخیره داده های مربوط به تمرینات انجام شده در دیتابیس Firestore
دریافت داده های تمرینات انجام شده از Firestore
افزودن ثبت نام کاربر با استفاده از سرویس Firebase Authentication
ایجاد Security Rule سمت فایربیس برای امنیت داده ها
استفاده از Snackbar برای نمایش اعلان
افزودن progress spinner در زمان Loading
آشنایی کلی با معماری Client-Server
درک مفهوم Server Side Rendering و تفاوت آن با Client Side Rendering
نصب Angular Universal روی پروژه و بررسی فایل های مربوط به SSR
استفاده از دستورات Angular Universal در Package.json - قسمت اول
استفاده از اسکریپت های Serve و Build در SSR
آشنایی با prerender
استفاده از Prerendering برای Dynamic Routes
آشنایی با Angular Animation و استفاده از Trigger و State
استفاده از Transition و Animate در Trigger
آشنایی با قابلیت های بیشتر در Transitions
آشنایی با Transition Phases
استفاده از void state
آشنایی و استفاده از keyframes
استفاده از group در transitions
آشنایی با animation events
ایجاد پروژه سمت سرور با NET 6 و ساخت Model
برقراری ارتباط با پایگاه داده - کدنویسی سمت سرور
ایجاد Controller با Scaffolding و آشنایی با Swagger - کدنویسی سمت سرور
بررسی و تعبیه ظاهر پروژه در انگولار
کامپوننت بندی پروژه
مدیریت فرم و ارسال سمت سرور
دریافت و مدیریت داده ها با استفاده از BehaviorSubject در rxjs
پیاده کردن قسمت بروزرسانی اطلاعات
پیاده کردن قسمت بروزرسانی اطلاعات - قسمت 2
دیباگ کردن مشکل POST نشدن اطلاعات
پیاده سازی حذف اطلاعات و افرودن UI Service برای نمایش اعلانات
بررسی و تحلیل قالب پروژه
انتقال قالب به پروژه و اعمال کامپوننت بندی
ایجاد پایگاه داده ابری Firestore
نصب پکیج firestore و ایجاد سرویس
دریافت اطلاعات Todo Category
افزودن Todo Category
قابلیت ویرایش با استفاده از Drag and Drop
حذف دسته بندی و افزودن اعتبار سنجی
دریافت Todo و اعمال Routing
نمایش لیست Todo
افزودن Todo
ویرایش Todo و استفاده از Increment در Firestore
پیاده سازی بخش کامل کردن هر وظیفه
نمایش اعلان با استفاده از Toastr
آشنایی با PWA و انواع اپلیکیشن ها
آشنایی با Service Worker
آشنایی با چرخه حیات و پیکربندی Service Worker
آشنایی با چرخه حیات و پیکربندی Service Worker
استفاده از چرخه حیات Activate برای ذخیره آخرین داده ها
بازگرداندن Response به کاربر از حافظه Cache در حالت آفلاین
نصب Service Worker روی انگولار
ذخیره داده های مربوط به API های خارجی در Cache
استفاده از swUpdate برای تشخیص ورژن و بروزرسانی اپلیکیشن
بروزرسانی متناوب اپلیکیشن
ایجاد ارتباط برای ارسال و دریافت Notification یا اعلانات
ارسال Notification یا اعلان از سمت سرور
انجام عملیات روی داده های اعلان
آشنایی با وبسایت و پیکربندی جدید در انگولار ۱۷
نحوه ایجاد و استفاده از Stanalone Components
آشنایی با Control Flow جدید
آشنایی با Control Flow جدید - قسمت ۲
آشنایی با Lazy Loading و استفاده از قابلیت جدید Deferrable Views
استفاده از Defer Triggers و آشنایی با مفهوم Viewport در صفحات وب
آشنایی با Trigger های بیشتر و استفاده از Prefetch در Deferrable Views
آشنایی با Trigger های بیشتر و استفاده از Prefetch در Deferrable Views
آشنایی با مفهوم و کاربرد WebAssembly
آشنایی با زبان Rust
نصب زبان Rust و ایجاد پروژه با Cargo
بررسی پروژه و نصب اکستنشن های مورد نیاز
بررسی مفاهیم پایه زبان Rust
بررسی انواع داده
آشنایی با Macros
Control Flow با عبارات شرطی
آشنایی با Match Expression
آشنایی با آرایه و وکتورها (Arrays & Vectors)
آشنایی با Struct
آشنایی با مفهوم Ownership
آشنایی با Result Type
پیکربندی مینی پروژه ویرایش تصویر
پیکربندی Webpack
خواندن فایل عکس در جاوااسکریپت
پیکربندی پروژه برای تبدیل Rust به Webassembly
Import فایل های Webassembly در جاوااسکریپت
فراخوانی تابع Rust در Javascript
تبدیل رشته base۶۴ به عکس
آشنایی با مفهوم بافر و اعمال افکت grayscale
ارسال خروجی به جاوااسکریپت و تکمیل پروژه
آشنایی کلی با ویژگی های انگولار ۱۸ و ایجاد پروژه
افزودن پروژه به Gitlab
بررسی ظاهر پروژه و نصب کتابخانه tailwind
پیکربندی Tailwind و افزودن استایل ها
ساخت Shared Module و کامپوننت Modal
ایجاد Modal Service
ساخت یک سیستم مدیریت برای مدال ها
رفع باگ Memory Leak در مدیریت Modal
رفع ایراد استایل و کامپوننت بندی قسمت Tabs
داینامیک کردن محتوای کامپوننت های مربوط به Tabs
اعمال عملیات toggling در Tabs
کامپوننت بندی فرم های مربوط به Authentication
اعتبار سنجی فرم Register در روش Reactive Forms
کامپوننت بندی Input و Pull کردن کدهای دانشجویان از Gitlab
پیاده سازی قسمت Register روی یک Branch مجزا
تنظیم CI/CD برای استقرار پروژه از روی Repository در Gitlab
ایجاد کامپوننت Alert در فرم Register
تکمیل اعتبار سنجی فرم Register
ایجاد پروژه Firebase و نصب Angular Fire
پیکربندی Firebase روی پروژه
پیکربندی Firebase روی پروژه - قسمت ۲
ساخت Auth Service
ادامه پیاده سازی Authentication
شروع پیاده سازی Routing
ساخت یک ماژول برای ویدیو ها و نحوه پیکربندی Routing Module
تکمیل کردن مسیر ها و refactor کردن قسمت logout
افزودن ظاهر کامپوننت های جدید و Guard احراز هویت
ایجاد یک Event Blocker برای المان های DOM
مدیریت رویداد های مربوط به drag & drop با یک تکنیک ساده
دریافت فایل و دو مرحله ای کردن فرم
مدیریت فرم Upload File
آپلود فایل در Firebase
نشان دادن درصد آپلود ویدیو حین بارگذاری
اتمام اپلود فایل و نمایش پیغام اپلود موفق
ذخیره کردن داده های مربوط به هر کلیپ
تکمیل قسمت اپلود ویدیو
دریافت ویدیو های کاربر برای نمایش از Firebase
Map کردن داده های دریافت شده برای نمایش در View
پیاده سازی modal برای ویرایش کلیپ
بروزرسانی عنوان کلیپ در پایگاه داده
حذف ویدیو از حافظه فایل و Firestore
نصب کتابخانه ffmpeg برای پردازش تصاویر
ایجاد دسترسی static فایل های core در ffmpeg
آشنایی با Shared Array Buffer
فعال سازی Shared Array Support
ساخت سرویس پردازش ویدیو ها
افزودن spinner loading به فرم دریافت ویدیو
downgrade کردن پکیج ffmpeg
تبدیل ویدیو ها به فرمت binary و ذخیره سازی موقت در Memory
دریافت اسکرین شات از ویدیو با ffmpeg cli
نحوه تولید چندین اسکرین شات از ویدیو
ساخت URL برای اسکرین شات های تولید شده از ویدیو
ایجاد یک pipe برای عبور از sanitization
ایجاد قابلیت انتخاب اسکرین شات
ذخیره کردن فایل screenshot در firebase storage
ترکیب progress bar مربوط به عکس و ویدیوها
استفاده از Fork Join برای ادغام Observable های ویدیو و عکس
افزودن حذف اسکرین شات و اتمام قسمت فرم اپلود کلیپ
مدیریت رویداد scroll برای پیاده سازی قابلیت infinite scroll
ساخت تابع get clips برای دریافت ویدیو ها بعد از هر scroll
Render ویدیو ها در صفحه اصلی
پیشنیاز های دوره چه چیزهایی هستند؟
- جاوااسکریپت
- HTML
- CSS
- Bootstrap
نظرات دانشجویان
marjan |
دانشجوی دوره آموزش جامع Angular (انگولار) و TypeScript (پروژه محور و ورود به بازار کار)
Ehsan Bonyadi |
دانشجوی دوره آموزش جامع Angular (انگولار) و TypeScript (پروژه محور و ورود به بازار کار)
ان شاء الله که در کمال صحت و سلامتی باشید، من که از دوره های شما خیلی لذت می برم،خیلی منتظر پیاده سازی پروژه هایی هستم که در معرفی دوره گفتید. ممنون.
Amir N |
دانشجوی دوره آموزش جامع Angular (انگولار) و TypeScript (پروژه محور و ورود به بازار کار)
سلام استاد خسته نباشید من چندین دوره درباره ی انگولار دیدم و تهیه کردم به جرئت می تونم بگم این کاملترین و بهترین دوره ای بود که دیدم داخل اون دوره ها فقط مباحث رو یاد می دادن اما هیچ مثالی نمی زدن خواستم بگم خسته نباشید خیلی دوره ی عالی رو تهیه کردید
Amir N |
دانشجوی دوره آموزش جامع Angular (انگولار) و TypeScript (پروژه محور و ورود به بازار کار)
سلام استاد خسته نباشید ممنون از دوره ی عالیتون مرسی اپدیت های دوره خیلی خوب و سریعه ممنون از شما
poone mim |
دانشجوی دوره آموزش جامع Angular (انگولار) و TypeScript (پروژه محور و ورود به بازار کار)
من تازه اول دوره هستم اما با دیدن همین چندتا ویدیو میتونم بگم تا الان بسیااار عالی بوده آموزشتون. امیدوارم تا آخر همینطور باشه. واقعا لذت میبرم از آموزشتون
مدرس دوره
محمد هاشمی
چهار ساله که تو حوزه برنامه نویسی و IT بعنوان مدرس , مشاور و کارشناس فعالیت میکنم … و تخصص اصلیم برنامه نویسی وب مبتی بر کتابخانه های جاوااسکریپت هست
سوالات متداول
انگولار یک فریمورک پرقدرت و چندمنظوره است که برای ساخت برنامههای وب پویا و تکصفحهای استفاده میشود و از طریق کامپوننتها، اتصال به سرویسها و معماری داده سمت کلاینت تواناییهای بسیاری را فراهم میکند.
برای شرکت در دوره تنها آشنایی با مفاهیم اولیه برنامه نویسی وب مانند آشنایی با html css و زبان جاوااسکریپت کفایت میکند که همه این پیش نیاز ها را میتواند رایگان در سایت کدیاد یاد بگیرید. یا برای صرفه جویی در زمان همزمان با یادگیری انگولار به یادگیری این مفاهیم نیز بپردازید.
در این دوره از زبان تایپ اسکریپت که نسخه پیشرفته تر زبان جاوااسکریپت هست استفاده میشود.
بله این دوره برای برنامه نویسان بک اند مناسب است. چراکه با یادگیری مفاهیم این دوره تسلط کامل به برنامه نویسی فرانت اند خواهند داشت و میتوانند به عنوان یک برنامه نویس فول استک فعالیت کنند
در این دوره تلاش شده علاوه بر خود انگولار تمام مفاهیم جانبی همچون برنامه نویسی بدون سرور یا server less که شما بدون برنامه نویسی بک اند به ایجاد پایگاه داده بر فضای ابری و مدیریت داده ها و احراز هویت میپردازید پوشش داده شود. بنابراین شما میتوانید بدون برنامه نویسی بک اند پروژه های وب کامل ایجاد کنید. اما برای تبدیل شدن به برنامه نویس فول استک یادگیری کتابخانه ها و فریمورک های مخصوص برنامه نویس بک اند مانند node.js ,django و... ضروری است.
یادگیری Angular میتواند در بازار کار تکنولوژی به شما فرصتهای شغلی بینظیری ارائه دهد. این فریمورک محبوب در صنعت توسعه وب است و تقاضای برنامهنویسان ماهر Angular بسیار بالاست. با توانایی ساخت برنامههای تکصفحهای پیچیده و تجربه کاربری برتر، میتوانید به عنوان یک توسعهدهنده با درآمد جذابی مشغول به کار شوید. همچنین انگولار، با توانایی ایجاد کامپوننتهای قابل استفاده مجدد به شما این اجازه را میدهد که به صورت سریعتر پروژهها را انجام داده و در جذب کارفرمایان جدید موفقتر باشید. اگر به دنبال یک فرصت شغلی مهیج و با آیندهای روشن در دنیای توسعه نرمافزار هستید، یادگیری Angular انتخاب بسیار خوبی است.
بله، این دوره بر اساس روش پروژه محور طراحی شده است. به عنوان شرکت کننده، شما با پیادهسازی پروژههای عملی واقعی، مفاهیم angular را در قالب کاربردهای عملی تجربه خواهید کرد.
در ابتدای دوره شما زبان قدرتمند تایپ اسکریپت را فراخواهید گرفت. سپس مفاهیم اصلی انگولار را به همراه تمرین و مینی پروژه های کوچک و مثال های واقعی فراخواهید گرفت و سپس وارد انواع اقسام پروژه های عملی که جز حرفه ای ترین پروژه هایی هستند که در بازار کار درخواست میشوند به یادگیری ابزار های تخصصی و قدرتمند خواهید پرداخت. برای اطلاع از جزییات بیشتر میتوانید سرفصل های دوره را به همراه معرفی دوره و چند قسمت ابتدایی را مشاهده کنید.
بله، پس از اتمام این دوره و با تمرین و تلاش بیشتر، شما آماده ورود به بازار کار خواهید بود. پروژههای عملی که در دوره پیاده میشوند، به شما کمک میکنند تجربه عملی بیشتری کسب کنید و رزومه قویتری در زمینه برنامهنویسی انگولار داشته باشید.
بله، این دوره شامل پروژههای عملی است. شما در طول دوره با پیادهسازی پروژههایی مانند اپلیکیشن تمرینات ورزشی، اپلیکیشن فیلم و سریال و پروژه های حرفه ای دیگر نیز تمرین خواهید کرد.
بله، در صورت بروز هر گونه سوال یا مشکل در طول دوره، پشتیبانی فنی برای شما در دسترس خواهد بود. میتوانید با استاد دوره در ارتباط باشید یا در پرسش و پاسخ کدیاد شرکت کنید و سوالات خود را از کامیونیتی دانشجویان و کاربران کدیاد بپرسید.
بله، در طول دوره تمرینات عملی و تکالیفی برای شما در نظر گرفته شده است. این تمرینات به شما کمک میکنند مفاهیم یادگرفته شده را در عمل تمرین کنید و مهارتهای خود را در برنامهنویسی بهبود ببخشید.
پروژه هایی که در این دوره پوشش داده میشود مخصوص کسب تجربه واقعی و شبیه سازی پروژه هایی است که در بازار کار مورد استفاده قرار میگیرد.
بله با اتمام این دوره شما قادر خواهید بود وب اپلیکیشن های قدرتمند و سریع بصورت حرفه ای طراحی و پیاده سازی کنید.
SPA مخفف عبارت Single Page Application به معنای "برنامهی تکصفحهای" است. در این نوع برنامهها، کلیه منابع وب در یک صفحه، اغلب به صورت پویا و بدون نیاز به بارگذاری مجدد صفحه، بارگذاری میشوند. این باعث ایجاد تجربه کاربری سریع و پویا میشود که کاربران بدون انتقال بین صفحات، با برنامه تعامل میکنند.
Server Side Rendering (SSR) یا رندرینگ سمت سرور، یک تکنیک در توسعه وب است که در آن، محتوا و ترکیب ظاهری یک وبسایت یا اپلیکیشن از سمت سرور ایجاد میشود و به مرورگر کاربر ارسال میشود. در SSR، صفحه ابتدا در سمت سرور رندر میشود و سپس به مرورگر کاربر ارسال میشود، که منجر به بهبود سرعت بارگذاری و سئوی وبسایت میشود.
انگولار یونیورسال (Angular Universal) یک افزونه رسمی از فریمورک انگولار است که به شما اجازه میدهد برنامههای انگولار خود را به صورت رندرینگ سمت سرور (Server Side Rendering) اجرا کنید. با استفاده از انگولار یونیورسال، میتوانید صفحات وبسایت یا اپلیکیشن خود را در سمت سرور رندر کنید و سپس به کاربران ارسال کنید. این امکان به شما کمک میکند تا زمان بارگذاری صفحات را بهبود دهید، سئوی وبسایت را بهبود بخشید و تجربه کاربری بهتری را ارائه دهید. به این ترتیب، صفحات انگولار یونیورسال قبل از اجرای برنامه در مرورگر، در سمت سرور رندر میشوند که باعث بهبود کارایی و بهینهسازی برنامه میشود.