ساخت یک پلیر پادکست با JavaScript ،CSS و Node.js
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- چگونگی ساخت یک وباپلیکیشن Full-stack با Node.js و Express
- یکپارچهسازی APIهای واقعی پادکست برای محتوای پویا
- مدیریت احراز هویت کاربر و ورودیها به صورت ایمن
- استفاده از JavaScript برای بروزرسانی UI به صورت بلادرنگ
- ایجاد ویژگیهای پخش صوتی سفارشی با یک UI واکنشگرا
- مدیریت متغیرهای محیطی و داراییهای استاتیک روی سرور
- کار با service workers و app manifests برای مبانی PWA
- ساختاردهی و استقرار یک پروژه آماده برای پورتفولیو
در این پروژه عملی پورتفولیو، دانشجو یک پلیر پادکست Full-stack میسازد که حسی شبیه به یک برنامه رسانهای دنیای واقعی دارد. این شامل همه چیزهایی است مانند: جستجو، مرور، استریم و تعامل با پادکستها مستقیماً در مرورگر که انتظار میرود.
او کار را با Node.js و Express برای ساخت Backend، اتصال به یک API پادکست و سرویسدهی ایمن اپلیکیشن آغاز میکند. در Frontend، او از HTML ،CSS و JavaScript برای ساخت یک UI شیک و واکنشگرا با کنترلهای پخش سفارشی، تاریخچه جستجوی پایدار و صف پخش استفاده خواهد کرد.
این یک ارتقای جدی برای جعبه ابزار توسعهدهنده است. یادگیرنده کار با APIها، مدیریت دادههای کاربر و استقرار ویژگیهایی که کاربران واقعاً به آنها اهمیت میدهند را تمرین خواهد کرد. در پایان، او نه تنها مهارتهای جدیدی خواهد داشت، بلکه یک پروژه برجسته برای پورتفولیوی خود خواهد داشت!
نتیجه نهایی چیست؟
این دوره در مورد این نیست که دانشجو فقط بدون درک اصول کدنویسی کند تا وقتی دوره تمام شد نداند چه کاری انجام دهد جز تماشای یک آموزش دیگر... خیر!
این دوره دانشجو را هل میدهد و به چالش میکشد تا به فردی تبدیل شود که قادر است پروژههای واقعی خود را بسازد؛ پروژههایی که کاربران و کارفرمایان احتمالی را شگفتزده کند.
ساخت یک پلیر پادکست با JavaScript ،CSS و Node.js
-
مقدمه 07:45
-
تمرین: آشنایی با همکلاسیها و مدرس None
-
منابع دوره None
-
راه اندازی توسعه دهنده None
-
پادکست Index API 13:17
-
نصب Node - مخزن Github 08:40
-
نصب NPM - اجرای Express 12:20
-
فراخوانی API در Server.js (بخش 1) 10:44
-
فراخوانی API در Server.js (بخش 2) 12:50
-
فونت، پسزمینه، UI ناوبری 11:45
-
UI کانتینرها 15:11
-
UI کانتینر جستجو 14:46
-
UI بارگذار (Loader) 06:44
-
UI کانتینر کارتها 16:28
-
رابط کاربری پلیر 17:28
-
رابط کاربری صف 14:31
-
UI ناوبری موبایل 19:58
-
رابط کاربری پلیر موبایل 10:15
-
UI جستجوی موبایل 15:47
-
مرورگر Blisk 13:23
-
یادداشتی درباره Blisk None
-
جاوااسکریپت کانتینر جستجو (بخش 1) 10:08
-
جاوااسکریپت کانتینر جستجو (بخش 2) 16:12
-
نتایج جستجو در جاوا اسکریپت 12:08
-
کارت های پادکست در جاوا اسکریپت 15:44
-
API اپیزودها در جاوا اسکریپت 11:37
-
کارت های اپیزود در جاوا اسکریپت 17:39
-
تصاویر Lazy Load شده در جاوا اسکریپت - بخش 1 12:13
-
تصاویر Lazy Load شده در جاوا اسکریپت - بخش 2 10:06
-
پلیر در جاوا اسکریپت - بخش 1 12:32
-
پلیر در جاوا اسکریپت - بخش 2 11:38
-
پلیر در جاوا اسکریپت - بخش 3 16:27
-
رابط کاربری کانتینر موبایل 04:01
-
صف در جاوا اسکریپت - بخش 1 08:38
-
صف در جاوا اسکریپت - بخش 2 12:11
-
مانیفست PWA 11:19
-
PWA Service Worker 18:25
-
استقرار Render 11:21
-
نکته ای درباره Cron-Jobs None
-
بیایید به یادگیری با هم ادامه دهیم! 01:22
-
بررسی این پروژه! None
-
مقدمه 05:01
-
راهاندازی دستگاه Mac / Linux 05:34
-
راهاندازی دستگاه Windows 06:57
-
راهاندازی و قالب VSCode 19:26
-
افزونه های VSCode 09:10
-
DevTools 13:56
-
GitHub 14:33
مشخصات آموزش
ساخت یک پلیر پادکست با JavaScript ،CSS و Node.js
- تاریخ به روز رسانی: 1404/10/04
- سطح دوره:None
- تعداد درس:48
- مدت زمان :08:30:00
- حجم :1.7GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy
آموزش های مرتبط
- زمان: 06:19:16
- تعداد درس: 40
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 17:11:52
- تعداد درس: 113
-
سطح دوره:
-
زبان: دوبله فارسی
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 04:00:26
- تعداد درس: 31
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 01:57:58
- تعداد درس: 29
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 39:24
- تعداد درس: 25
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 04:52:39
- تعداد درس: 73
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 0:12:06
- تعداد درس: 8
-
سطح دوره:
-
زبان: دوبله فارسی
-
سطح دوره:
-
زبان: دوبله فارسی