لطفا جهت پرداخت (ورود به درگاه بانک) فیلترشکن خود را خاموش نمایید.
لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش The Freelance Stack: پروژه واقعی با NextJS و Strapi [ویدئو]
The Freelance Stack: Real project with NextJS and Strapi [Video]
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
با این دوره آموزشی که جنبه های نظری و عملی توسعه وب را پیوند می دهد، به دنیای مشاغل آزاد شیرجه بزنید. این دوره برای فریلنسرهای مشتاق و توسعه دهندگان باتجربه طراحی شده است که به دنبال گسترش مجموعه مهارت های خود با یادگیری عملی و مبتنی بر پروژه هستند. با استفاده از NextJS و Strapi، سفری را برای ساختن یک وبسایت کاملاً کاربردی برای surfcamp، با یک وبلاگ یکپارچه و قابل تنظیم و فرمهای ثبت نام آغاز خواهید کرد.
این دوره با تمرکز بر پروژههای دنیای واقعی، اجتناب از مثالهای عمومی و غواصی عمیق در همافزایی NextJS و Strapi برای طراحی انعطافپذیر و تجربه توسعهدهنده یکپارچه برجسته میشود. بیاموزید که چگونه وبسایتها را به مشتریانی ارائه کنید که مهارتهای کدنویسی ندارند، و به آنها اجازه میدهد محتوا را مستقیماً بهروزرسانی کنند و با راحتی پلتفرمهایی مانند WordPress، Squarespace و Wix با قدرت یک CMS Headless رقابت کنند.
از طراحی تا استقرار، شما طرحهای Figma را به سایتهای زنده تبدیل میکنید و بر هنر یک گردش کاری طراحی تا توسعه یکپارچه تسلط پیدا میکنید. با بیش از 12 ساعت محتوا، برنامه درسی مفاهیم جدید را با سرعتی راحت معرفی می کند و درک جامع هر عنصر را تضمین می کند. پروژه های دنیای واقعی را با NextJS و Strapi بسازید، بدون اینکه مهارت های کدنویسی به مشتریان ارائه دهید.
بدون تکیه بر فریم ورک های اضافی، یک ظاهر طراحی زیبا با CSS ساده ایجاد کنید.
ساختارهای داده پیچیده را از Strapi API با هر فرعی ادغام کنید.
راحتی سازندگان وب سایت را با انعطاف پذیری کدنویسی از ابتدا ترکیب کنید.
منطق پشت مولفه های سمت سرور و مشتری را درک کنید.
تبدیل طرح های Figma به وب سایت های کاملاً کاربردی. ایدهآل برای افرادی با مهارتهای پایه جاوا اسکریپت و دانش پایه React، این دوره به فریلنسرهای مشتاق و توسعهدهندگانی که مشتاق ایجاد وبسایتهایی با قابلیت مدیریت آسان برای غیر کدنویس هستند، پاسخ میدهد. درک جامع NextJS و Strapi برای طراحی منعطف و تجربه یکپارچه توسعه دهنده. * رویکرد توسعه مشتری محور با CMS بدون سر. * گردش کار بدون درز طراحی تا استقرار، تبدیل طرح های Figma به سایت های زنده.
سرفصل ها و درس ها
معرفی
Introduction
معرفی دوره
Course Intro
Freelance Stack چیست؟
What is the Freelance Stack?
نحوه گذراندن این دوره
How to go through this course
دوره Crash NextJS
NextJS Crash Course
چرا از NextJS استفاده می کنیم؟
Why are we using NextJS?
چرا از NextJS استفاده می کنیم؟
Why are we using NextJS?
راه اندازی یک پروژه NextJS
Setting up a NextJS Project
راه اندازی یک پروژه NextJS
Setting up a NextJS Project
مسیریابی ساده در NextJS
Simple Routing in NextJS
مسیریابی ساده در NextJS
Simple Routing in NextJS
چیدمان در NextJS
Layouting in NextJS
چیدمان در NextJS
Layouting in NextJS
پیوند از صفحه به صفحه
Linking from Page to Page
پیوند از صفحه به صفحه
Linking from Page to Page
بررسی اجمالی اجزای سرور و کلاینت
Server and Client Components Overview
بررسی اجمالی اجزای سرور و کلاینت
Server and Client Components Overview
واکشی داده ها
Data Fetching
واکشی داده ها
Data Fetching
مسیریابی پویا
Dynamic Routing
مسیریابی پویا
Dynamic Routing
صفحات یافت نشد
Not Found Pages
صفحات یافت نشد
Not Found Pages
معرفی برنامه نویس Figma
Developer Intro To Figma
Figma چیست و چگونه از آن استفاده کنیم
What is Figma and how to use it
Figma چیست و چگونه از آن استفاده کنیم
What is Figma and how to use it
معرفی برنامه نویس Figma
Developer Intro To Figma
راه اندازی اولیه پروژه NextJS، Strapi و Sass
Initial Project Setup NextJS, Strapi, and Sass
NextJS Base Setup
NextJS Base Setup
NextJS Base Setup
NextJS Base Setup
ویدئوی یک ظاهر طراحی شده: Sass Setup
Styling Video: Sass Setup
ویدئوی یک ظاهر طراحی شده: Sass Setup
Styling Video: Sass Setup
ویدیوی سبک: متغیرها و تایپوگرافی
Styling Video: Variables and Typography
ویدیوی سبک: متغیرها و تایپوگرافی
Styling Video: Variables and Typography
نمای کلی راه اندازی ما (و چرا آن را به این شکل تنظیم کردیم)
Overview of our setup (and why we set it up this way)
نمای کلی راه اندازی ما (و چرا آن را به این شکل تنظیم کردیم)
Overview of our setup (and why we set it up this way)
نصب و بررسی اجمالی استرپی
Strapi Installation and Overview
نصب و بررسی اجمالی استرپی
Strapi Installation and Overview
راه اندازی اولیه پروژه NextJS، Strapi و Sass
Initial Project Setup NextJS, Strapi, and Sass
صفحه فرود و صفحه تجربه با اجزای طرح بندی
Landing Page & Experience Page with Layout Components
سربرگ ساختار JSX
Header JSX Structure
سربرگ ساختار JSX
Header JSX Structure
استایل: سربرگ
Styling: Header
استایل: سربرگ
Styling: Header
ساختار پاورقی JSX
Footer JSX Structure
ساختار پاورقی JSX
Footer JSX Structure
استایل: پاورقی
Styling: Footer
استایل: پاورقی
Styling: Footer
ساختار JSX بخش قهرمان
Hero Section JSX Structure
ساختار JSX بخش قهرمان
Hero Section JSX Structure
استایل: بخش قهرمان
Styling: Hero Section
استایل: بخش قهرمان
Styling: Hero Section
ساختار JSX InfoBlocks
InfoBlocks JSX Structure
ساختار JSX InfoBlocks
InfoBlocks JSX Structure
یک ظاهر طراحی: InfoBlocks
Styling: InfoBlocks
یک ظاهر طراحی: InfoBlocks
Styling: InfoBlocks
صفحه تجربه: استفاده مجدد از بخش قهرمان و بلوک های اطلاعاتی ایجاد شده
Experience Page: Reuse created Hero Section and Infoblocks
صفحه تجربه: استفاده مجدد از بخش قهرمان و بلوک های اطلاعاتی ایجاد شده
Experience Page: Reuse created Hero Section and Infoblocks
یک ظاهر طراحی: رنگ سرصفحه را در هر مسیر تنظیم کنید
Styling: Adjust Header colour per path
یک ظاهر طراحی: رنگ سرصفحه را در هر مسیر تنظیم کنید
Styling: Adjust Header colour per path
صفحه فرود و صفحه تجربه با اجزای طرح بندی
Landing Page & Experience Page with Layout Components
اتصال Frontend ما به Strapi
Connecting our Frontend to Strapi
ایجاد نوع محتوای InfoBlock در Strapi
Creating InfoBlock Content Type on Strapi
ایجاد نوع محتوای InfoBlock در Strapi
Creating InfoBlock Content Type on Strapi
از Single Content Type در Strapi برای ایجاد InfoBlocks در هر صفحه استفاده کنید
Use Single Content Type in Strapi to create InfoBlocks per page
از Single Content Type در Strapi برای ایجاد InfoBlocks در هر صفحه استفاده کنید
Use Single Content Type in Strapi to create InfoBlocks per page
داده های InfoBlock را در Strapi واکشی کنید
Fetch InfoBlock Data on Strapi
داده های InfoBlock را در Strapi واکشی کنید
Fetch InfoBlock Data on Strapi
داده ها را از Strapi واکشی کنید و آن را پردازش کنید
Fetch Data from Strapi and process it
داده ها را از Strapi واکشی کنید و آن را پردازش کنید
Fetch Data from Strapi and process it
رندر InfoBlocks در صفحه
Render InfoBlocks on page
رندر InfoBlocks در صفحه
Render InfoBlocks on page
ایجاد دکمه از اطلاعات InfoBlock Strapi در صفحه
Create Button from InfoBlock Strapi Data on page
ایجاد دکمه از اطلاعات InfoBlock Strapi در صفحه
Create Button from InfoBlock Strapi Data on page
رندر InfoBlocks در صفحه تجربه
Render InfoBlocks on Experience page
رندر InfoBlocks در صفحه تجربه
Render InfoBlocks on Experience page
اتصال Frontend ما به Strapi
Connecting our Frontend to Strapi
صفحه اصلی وبلاگ
Main Page of the Blog
مقاله ساختار JSX را برجسته کنید
Highlight Article JSX Structure
مقاله ساختار JSX را برجسته کنید
Highlight Article JSX Structure
یک ظاهر طراحی: مقاله برجسته
Styling: Highlight Article
یک ظاهر طراحی: مقاله برجسته
Styling: Highlight Article
اشتراک در خبرنامه ساختار JSX
Subscribe To Newsletter JSX Structure
اشتراک در خبرنامه ساختار JSX
Subscribe To Newsletter JSX Structure
سبک: مشترک شدن در کامپوننت خبرنامه
Styling: Subscribe to Newsletter Component
سبک: مشترک شدن در کامپوننت خبرنامه
Styling: Subscribe to Newsletter Component
عملکرد مشترک شدن در جزء خبرنامه
Functionality Subscribe to Newsletter Component
عملکرد مشترک شدن در جزء خبرنامه
Functionality Subscribe to Newsletter Component
موارد ویژه مولفه ساختار JSX
Featured Items Component JSX Structure
موارد ویژه مولفه ساختار JSX
Featured Items Component JSX Structure
یک ظاهر طراحی شده اجزای آیتم های ویژه
Styling Featured Items Component
یک ظاهر طراحی شده اجزای آیتم های ویژه
Styling Featured Items Component
صفحه اصلی وبلاگ
Main Page of the Blog
وبلاگ را در Frontend از طریق Strapi و NextJS پیاده سازی کنید
Implement Blog on Frontend through Strapi and NextJS
نوع مقاله وبلاگ را در Strapi ایجاد کنید
Create blog article type on Strapi
نوع مقاله وبلاگ را در Strapi ایجاد کنید
Create blog article type on Strapi
داده های مقاله وبلاگ را در Strapi وارد کنید
Input blog article data on Strapi
داده های مقاله وبلاگ را در Strapi وارد کنید
Input blog article data on Strapi
ارائه مقالات از داده های Strapi در صفحه اصلی وبلاگ
Render articles from Strapi data on main page of the blog
ارائه مقالات از داده های Strapi در صفحه اصلی وبلاگ
Render articles from Strapi data on main page of the blog
مسیرهای پویا را برای همه مقالات وبلاگ ایجاد کنید
Create dynamic routes for all blog articles
مسیرهای پویا را برای همه مقالات وبلاگ ایجاد کنید
Create dynamic routes for all blog articles
وبلاگ را در Frontend از طریق Strapi و NextJS پیاده سازی کنید
Implement Blog on Frontend through Strapi and NextJS
مقاله وبلاگ کاملا قابل تنظیم ایجاد کنید
Create Fully Customisable Blog Article
ایجاد منطقه پویا در Strapi برای محتوای وبلاگ قابل تنظیم
Create dynamic zone in Strapi for customisable blog content
ایجاد منطقه پویا در Strapi برای محتوای وبلاگ قابل تنظیم
Create dynamic zone in Strapi for customisable blog content
ایجاد داده برای مقاله برجسته
Creating data for highlight article
ایجاد داده برای مقاله برجسته
Creating data for highlight article
بخش قهرمان مقاله JSX
Article Hero Section JSX
بخش قهرمان مقاله JSX
Article Hero Section JSX
سبک: بخش قهرمان مقاله
Styling: Article Hero Section
سبک: بخش قهرمان مقاله
Styling: Article Hero Section
مولفه معرفی مقاله JSX
Article Intro Component JSX
مولفه معرفی مقاله JSX
Article Intro Component JSX
یک ظاهر طراحی: مولفه معرفی مقاله
Styling: Article Intro Component
یک ظاهر طراحی: مولفه معرفی مقاله
Styling: Article Intro Component
کامپوننت Generic Article برای ارائه مولفه های مختلف بسته به داده های Strapi
Generic Article Component to render different component depending on Strapi data
کامپوننت Generic Article برای ارائه مولفه های مختلف بسته به داده های Strapi
Generic Article Component to render different component depending on Strapi data
عنوان مقاله JSX
Article Headline JSX
عنوان مقاله JSX
Article Headline JSX
استایل: عنوان مقاله
Styling: Article Headline
استایل: عنوان مقاله
Styling: Article Headline
متن با Image Component JSX
Text with Image Component JSX
متن با Image Component JSX
Text with Image Component JSX
یک ظاهر طراحی: متن با مولفه تصویر
Styling: Text with Image Component
یک ظاهر طراحی: متن با مولفه تصویر
Styling: Text with Image Component
بند مقاله JSX
Article Paragraph JSX
بند مقاله JSX
Article Paragraph JSX
یک ظاهر طراحی: بند مقاله
Styling: Article Paragraph
یک ظاهر طراحی: بند مقاله
Styling: Article Paragraph
کامپوننت تصویر JSX
Image Component JSX
کامپوننت تصویر JSX
Image Component JSX
استایل: کامپوننت تصویر
Styling: Image Component
استایل: کامپوننت تصویر
Styling: Image Component
بخش مقالات دیگر در صفحه وبلاگ فردی
Other Articles Section on Individual Blog Page
بخش مقالات دیگر در صفحه وبلاگ فردی
Other Articles Section on Individual Blog Page
صفحه اصلی بخش وبلاگ JSX
Blog Section Homepage JSX
صفحه اصلی بخش وبلاگ JSX
Blog Section Homepage JSX
سبک: صفحه اصلی بخش وبلاگ
Styling: Blog Section Homepage
سبک: صفحه اصلی بخش وبلاگ
Styling: Blog Section Homepage
اصلاح مورد مقاله برای موارد ویژه در صفحه اصلی
Fix Article Item for Featured Items on Homepage
اصلاح مورد مقاله برای موارد ویژه در صفحه اصلی
Fix Article Item for Featured Items on Homepage
مقاله وبلاگ کاملا قابل تنظیم ایجاد کنید
Create Fully Customisable Blog Article
بخش رویدادها - ایجاد قابلیت ثبت نام برای Surfcamps و رویدادهای ارائه شده
Events Section - Create Signup Functionality for Offered Surfcamps & Events
ارسال درخواست در Strapi با ثبت نام در خبرنامه
Post Requests in Strapi with the Newsletter Signup
ارسال درخواست در Strapi با ثبت نام در خبرنامه
Post Requests in Strapi with the Newsletter Signup
Frontend را به Signup Component در Strapi متصل کنید
Hook up Frontend to Signup Component in Strapi
Frontend را به Signup Component در Strapi متصل کنید
Hook up Frontend to Signup Component in Strapi
نوع محتوای شرکت کننده و رویداد Strapi
Strapi Participant and Event Content Type
نوع محتوای شرکت کننده و رویداد Strapi
Strapi Participant and Event Content Type
تغذیه داده ها به Strapi برای همه رویدادها
Feeding Data into Strapi for all events
تغذیه داده ها به Strapi برای همه رویدادها
Feeding Data into Strapi for all events
فرم ثبت نام JSX
Signup Form JSX
فرم ثبت نام JSX
Signup Form JSX
استایل: فرم ثبت نام
Styling: Signup Form
استایل: فرم ثبت نام
Styling: Signup Form
عملکرد فرم ثبت نام: ارسال داده ها به Strapi از صفحه رویدادهای اصلی
Signup Form Functionality: Sending data to Strapi from main events page
عملکرد فرم ثبت نام: ارسال داده ها به Strapi از صفحه رویدادهای اصلی
Signup Form Functionality: Sending data to Strapi from main events page
صفحات رویداد فردی را از قبل ایجاد کنید
Pregenerate individual event pages
صفحات رویداد فردی را از قبل ایجاد کنید
Pregenerate individual event pages
پردازش داده های رویداد
Event Data Processing
پردازش داده های رویداد
Event Data Processing
رندر صفحه رویداد فردی بر اساس داده های Strapi
Render individual event page based off Strapi data
رندر صفحه رویداد فردی بر اساس داده های Strapi
Render individual event page based off Strapi data
برای رویداد خاص ثبت نام کنید
Sign up for specific event
برای رویداد خاص ثبت نام کنید
Sign up for specific event
رویدادهای آینده را با یک جستجوی رشته ای از Strapi واکشی و فیلتر کنید
Fetch and filter upcoming events with a string query from Strapi
رویدادهای آینده را با یک جستجوی رشته ای از Strapi واکشی و فیلتر کنید
Fetch and filter upcoming events with a string query from Strapi
مولفه موارد ویژه را برای صفحه رویداد فردی تنظیم کنید
Adjust featured items component for individual event page
مولفه موارد ویژه را برای صفحه رویداد فردی تنظیم کنید
Adjust featured items component for individual event page
یک ظاهر طراحی: مؤلفه FeaturedItem برای رویداد تنظیم شده است
Styling: FeaturedItem Component adjusted for event
یک ظاهر طراحی: مؤلفه FeaturedItem برای رویداد تنظیم شده است
Styling: FeaturedItem Component adjusted for event
رویدادهای بیشتر را در صفحه رویداد فردی واکشی کنید و از شما متشکرم
Fetch more events on individual event page & THANK YOU
رویدادهای بیشتر را در صفحه رویداد فردی واکشی کنید و از شما متشکرم
Fetch more events on individual event page & THANK YOU
بخش رویدادها - ایجاد قابلیت ثبت نام برای Surfcamps و رویدادهای ارائه شده
Events Section - Create Signup Functionality for Offered Surfcamps & Events
اعزام به هروکو
Deployment to Heroku
نمای کلی استقرار
Deployment Overview
نمای کلی استقرار
Deployment Overview
سرور Strapi را در Heroku مستقر کنید
Deploy Strapi Server to Heroku
سرور Strapi را در Heroku مستقر کنید
Deploy Strapi Server to Heroku
تفاوت بین تولید استراپی و توسعه محلی
Difference between Production Strapi and Local Development
تفاوت بین تولید استراپی و توسعه محلی
Difference between Production Strapi and Local Development
پایگاه داده محلی را از SQLite به Postgres به پایگاه داده تولید منتقل کنید
Migrate local database from SQLite to Postgres to the production database
پایگاه داده محلی را از SQLite به Postgres به پایگاه داده تولید منتقل کنید
Migrate local database from SQLite to Postgres to the production database
با AWS S3 آپلود تصاویر در حال تولید را مدیریت کنید
Handle Image Uploads in Production with AWS S3
با AWS S3 آپلود تصاویر در حال تولید را مدیریت کنید
Handle Image Uploads in Production with AWS S3
برای استفاده از تصاویر سطل AWS S3، مسیرهای تصویر را در db تولید جایگزین کنید
Replace image paths in production db to use AWS S3 bucket images
برای استفاده از تصاویر سطل AWS S3، مسیرهای تصویر را در db تولید جایگزین کنید
Replace image paths in production db to use AWS S3 bucket images
استقرار NextJS Frontend در Heroku
Deployment of NextJS Frontend to Heroku
استقرار NextJS Frontend در Heroku
Deployment of NextJS Frontend to Heroku
Packtpub یک ناشر دیجیتالی کتابها و منابع آموزشی در زمینه فناوری اطلاعات و توسعه نرمافزار است. این شرکت از سال 2004 فعالیت خود را آغاز کرده و به تولید و انتشار کتابها، ویدیوها و دورههای آموزشی میپردازد که به توسعهدهندگان و متخصصان فناوری اطلاعات کمک میکند تا مهارتهای خود را ارتقا دهند. منابع آموزشی Packtpub موضوعات متنوعی از جمله برنامهنویسی، توسعه وب، دادهکاوی، امنیت سایبری و هوش مصنوعی را پوشش میدهد. محتوای این منابع به صورت کاربردی و بهروز ارائه میشود تا کاربران بتوانند دانش و تواناییهای لازم برای موفقیت در پروژههای عملی و حرفهای خود را کسب کنند.
نیکلاس موسس یک آژانس فریلنسری است که در توسعه وب و علم داده تخصص دارد. سفر او با مقابله با چالشهای کدنویسی در دنیای واقعی و برآوردن نیازهای مشتری مشخص شده است، که از آن بینشهای ارزشمندی به دست آورده است. با این حال، اشتیاق واقعی او در تدریس نهفته است. نیکلاس هنر کدنویسی را با تأکید زیادی بر عملی بودن و کاربرد مستقیم با موفقیت به صدها نفر آموزش داده است. او این انبوهی از تجربیات عملی را در دوره های خود می ریزد و تضمین می کند که یادگیری ارائه شده فقط تئوری نیست، بلکه بلافاصله قابل عمل است. نیکلاس برای کسانی که آماده بهره مندی از موفقیت های او و درس گرفتن از اشتباهات او هستند، فرصتی بی نظیر برای فرو رفتن عمیق در دنیای کدنویسی ارائه می دهد.
نمایش نظرات