مدت :

۲ ساعت و ۵۰ دقیقه

قیمت : ۱۹۸,۰۰۰ تومان
LinkedIn
Twitter
Facebook
Telegram

درباره مدرس 

اطلاعات دوره

توضیحات
سلام به همراهان همیشگی هم‌رویش، خوش آمدید! بعد از گذشت حدود ۲ ماه تلاش، هم‌رویش مفتخر است که فصل هفتم از آموزش فروشگاه فول استک با جنگو را به شما عرضه کند. مدت زمان آموزش ساخت فروشگاه فول استک کمتر از 3 ساعت است.

 

آموزش-ساخت-فروشگاه-فول-استک-با-جنگو-و-ری-اکت-ریکت-هم-رویش

این آموزش بخشی از بسته جامع ساخت فروشگاه با جنگو و ری اکت (+) است.

شما می‌توانید بسته جامع با با مجموع قیمت کمتر از این لینک (+) تهیه کنید یا این مجموعه را فصل به فصل دریافت و تماشا کنید.

 

فهرست فصل‌‌به‌فصل آموزش ساخت فروشگاه جنگو/ریکت

 

 

هدف ما در این فصل: 
هدف ما در این فصل این است که محصولاتی که در سبد خرید کاربر وجود دارد و سمت فرانت اند است را در سرور به عنوان سفارش ذخیره کنیم.
این آموزش در یک نگاه :

در این فصل از آموزش ساخت فروشگاه با جنگو و ری اکت، بدون اتلاف وقت با دریافت آدرس ارسال سفارش از کاربر و ذخیره آن در حافظه مرورگر کاربر ( Local storage ) در درس اول شروع به کار کردیم.

در درس دوم کامپوننتی ایجاد کردیم تا مراحل ثبت سفارش را نمایش دهد.  در ادامه در درس سوم روش پرداخت را از کاربر دریافت، و آن را در حافظه مرورگر کاربر ذخیره کردیم.

در درس چهارم در سمت فرانت اند صفحه‌ای به اسم place order ساختیم. به کمک این صفحه قبل از اینکه اطلاعات سفارش کاربر را در سرور ذخیره کنیم، می‌توانید در یک نما جزئیات سفارش خود را ببیند.

در درس پنجم به سراغ بک اند رفته‌ایم تا نگاشت و ویو ایجاد سفارش جدید را ایجاد کنیم. سپس در درس ششم به به فرانت اند پرداختیم، ریداکس را برای ایجاد سفارش جدید تنظیم و ثابت‌ها را تعریف کردیم و در نهایت ریدوسر جدید به همراه اکشنی برای این کار نوشتیم تا این اطلاعات را به بک اند بفرستد و نگاشت ایجاد سفارش را صدا بزند. در آخر از اکشن خود بر روی رویداد onClick دکمه‌ای استفاده کردیم. اطلاعات را به بک اند ارسال و سفارش را ثبت کردیم.

در درس هفتم دوباره به بک اند پرداختیم. نگاشت و ویو دریافت اطلاعات یک سفارش، توسط id را نوشتیم.

در درس هشتم ریداکس را برای گرفتن اطلاعات یک سفارش تنظیم کردیم. مانند ایجاد ثابت‌ها، نوشتن تابع ریدوسر و اکشن جدید برای واکشی اطلاعات از سرور.

در درس نهم صفحه‌ای برای نمایش جزئیات یک سفارش ایجاد، و از اکشنی که در درس گذشته نوشته بودیم استفاده کردیم.
در نهایت در درس دهم نمایش لیست سفارش‌ها را در پروفایل داشتیم. سپس شروع به نوشتن بک اند و فرانت اند کردیم تا به صورت فول استک در یک درس برنامه نویسی کرده باشیم.

و در آخر این آموزش، در درس یازدهم به جمع بندی پرداختیم. اینکه تا این فصل از آموزش چه کار کرده ایم، کجای این مسیر قرار داریم و ادامه راه به چه صورت خواهد بود.

 

این آموزش بی نظیر است زیرا:
  • این آموزش پروژه محور است.
  • مباحث این آموزش پیشرفته‌تر است.

 

پیشنیاز

 

کلیدواژگان

آموزش فروشگاه فول استک با جنگو | اموزش ساخت سایت فروشگاهی با جنگو | آموزش ساخت فروشگاه فول استک | اموزش ساخت فروشگاه فول استک | ساخت فروشگاه فول استک | طراحی سایت با جنگو | طراحی سایت با جنگو و ری اکت | طراحی سایت با django | آموزش طراحی سایت با جنگو و ری اکت | سایت فروشگاهی با جنگو | ساخت فروشگاه با جنگو و ریکت | ساخت فروشگاه با جنگو | ساخت فروشگاه با ریکت | آموزش ساخت فروشگاه با جنگو | آموزش ساخت فروشگاه با ریکت 

ریز محتوای فیلم‌ها

ریز محتوای فیلم‌ها

درس صفر:  این فصل در یک نگاه

  • نگاهی به پیشرفت پروژه در پایان این فصل
  • نگاهی به محتوای تخصصی این فصل
  • نگاهی به مسیر پیش رو

 

درس اول : ثبت آدرس ارسال سفارش

  • تعریف ثابت برای اکشن ذخیره آدرس
  • تعریف تابع ریدوسر جدید برای ادرس ارسال سفارش
  • تعریف اکشن ذخیره کردن آدرس ارسال سفارش
  • ایجاد صفحه ای حاوی فرم برای دریافت آدرس ارسال سفارش
  • استفاده از اکشن در ازای سابمیت شدن فرم

 

درس دوم : کامپوننت مراحل خرید

  • ایجاد کامپوننت جدید
  • دریافت مراحل از ورودی
  • نوشتن شرط برای فعال نمودن لینک‌ها
  • استفاده از این کامپوننت در صفحه ثبت ادرس ارسال سفارش

 

درس سوم : ثبت روش پرداخت

  • استفاده از کامپوننت مراحل خرید
  • تعریف ثابت برای اکشن ذخیره ثبت روش پرداخت
  • تعریف تابع ریدوسر جدید برای روش پرداخت
  • تعریف اکشن ذخیره کردن روش پرداخت
  • ایجاد صفحه ای حاوی فرم برای ثبت روش پرداخت
  • استفاده از اکشن در ازای سابمیت شدن فرم

 

درس چهارم : ساخت صفحه ثبت سفارش

  • استفاده از کامپوننت مراحل خرید
  • ایجاد صفحه ثبت سفارش
  • ایجاد UI
  • واکشی و نمایش اطلاعاتی مثل : آدرس ارسال سفارش،  روش پرداخت، نمایش ایتم های سفارش، آشنایی با متد .toFixed()، نمایش جمع قیمت ایتم ها، محاسبه و نمایش هزینه ارسال سفارش، محاسبه و نمایش مالیات، نمایش هزینه کل یا همان قیمت آخر فاکتور خرید

 

درس پنجم : ثبت سفارش سمت بک-اند

  • ایجاد نگاشت سفارش جدید
  • ایجاد ویو ثبت سفارش جدید

 

درس ششم : ثبت سفارش سمت فرانت-اند

  • تعریف ثابت برای اکشن ثبت سفارش
  • تعریف تابع ریدوسر جدید برای ثبت سفارش
  • تعریف اکشن ثبت سفارش
  • استفاده از axiosInstance که در فصل قبل ساختیم
  • استفاده از اکشن در ازای رویداد onClick دکمه place order

 

درس هفتم :‌ نمایش جزئیات یک سفارش (بک-اند)

  • ایجاد نگاشت دریافت یک سفارش
  • ایجاد ویو دریافت یک سفارش با استفاده از id

 

درس هشتم : نمایش جزئیات یک سفارش (ریداکس)

  • تعریف ثابت برای اکشن واکشی جزئیات سفارش
  • تعریف تابع ریدوسر جدید برای واکشی جزئیات سفارش
  • تعریف اکشن واکشی جزئیات سفارش

 

درس نهم : نمایش جزئیات یک سفارش (فرانت-اند)

  • ایجاد صفحه نمایش جزئیات یک سفارش
  • ایجاد UI و نمایش اطلاعات سفارش ( تقریبا شبیه به صفحه place order )
  • نوشتن تابع useEffect و dispatch کردن اکشن دریافت جزئیات یک سفارش
  • استفاده از Alert برای نمایش اطلاعاتی چون به وضعیت ارسال سفارش و پرداخت آن

 

درس دهم : نمایش فهرست سفارش ها در پروفایل

  • ایجاد نگاشت دریافت لیست سفارش
  • ایجاد ویو دریافت لیست سفارش
  • تعریف ثابت برای اکشن لیست سفارش
  • تعریف تابع ریدوسر جدید لیست سفارش
  • تعریف اکشن لیست سفارش
  • ایجاد جدول برای نمایش لیست سفارش ها در صفحه پروفایل
  • استفاده از اکشن لیست سفارش ها در useEffect

 

درس یازدهم : جمع بندی

  • نگاه کوتاه به محتوای این فصل
  • نگاهی به مسیر پیش رو

 

نظرات (10)

10 دیدگاه برای آموزش ساخت فروشگاه فول استک با جنگو و ری اکت – فصل ۷: ثبت سفارش

  1. pouyan150 (خریدار محصول)

    سلام خسته نباشید من ی سوال داشتم چجوری به orderid در سمت کلایت دسترسی پیدا کردید
    id پیشفرض جنگو

  2. مهدی شلاهی (خریدار محصول)

    سلام
    دوره عالیه ولی یسری کمبودا داره
    مثلا توی سایت هایی مثه دیجیکالا که دسته بندی پوشاک دارن قابلیت انتخاب سایز و رنگ و تغییر قیمت با توجه به سایز و رنگ انتخابی وجود داره که ممنون میشم به این دوره اضافه کنید
    همچنین قابلیت فیلتر کردن محصولات (با استفاده از جنگو رست) براساس مثلا رنگ , سایز , دسته بندی , …
    اگه این دوقابلیت به این دوره اضاف شن میتونم بگم این دوره هم در فضای وب فارسی و هم انگلیسی نظیر نداره

    • ابوالفضل حسن زاده

      سلام به شما . خیلی خوشحالم که دوره براتون عالی بوده. بله درست میفرمایید یادداشت کردم که دربارش بعدا در گروه داوری آموزش صحبت کنیم. اما درباره فیلتر کردن پیشنهاد میکنم خودتون به عنوان تمرین سعی کنید که اجراش کنید . اگر که گیت بلدید با گیت یه شاخه دیگه ایجاد کنید و روی اون شاخه این ایده رو پیاده کنید. اگر که تونستید خیلی خوشحال میشم که اینجا اعلام کنید.

  3. saber masoudnia (خریدار محصول)

    سلام. من این پروژه رو کامل با آموزش پیش رفتم ولی هیچ منبعی که چطور باید این پروژه رو در هاست واقعی بفرستم ندارم . لطفاً اضافه کنید

    • ابوالفضل حسن زاده

      سلام خیلی هم عالی . احتمالا عنوان فصل نهم همین هستش . انتشار پروژه روی هاست آنلاین.

  4. ras (خریدار محصول)

    سلام. فصل هشتم چه زمانی منتشر میشه؟

    • ابوالفضل حسن زاده

      سلام وقت شما بخیر . فصل هشتم منتشر شده . ببخشید که دیر جواب میدم و یه عذر خواهی دیگه هم بکنم از شما فراگیر ها برای دیر منتشر شدن فصل هشتم .

  5. سمیرا (خریدار محصول)

    سلام وقت بخیر
    ممنون بابت آموزش های خوب و کاربردی و همچنین سبک آموزش اصولیتون.
    فصل بعدی این آموزش چه زمانی تهیه و در سایت قرار می گیرد؟

  6. رضا (خریدار محصول)

    اضافه کنم به نظرم:
    بر میگرده به موضوع Serializer relations

  7. رضا (خریدار محصول)

    درود بر شما
    امیدوارم حالتون خوب باشه.
    مثل همیشه بهتون تبریک میگم به خاطر پشتکار و تلاش شما در تهیه ی این آموزش در کنار آقای آصفی.

    یه انتقادی هم داشتم:
    به نظرم در توضیح دو مورد در قسمت 05 این فصل کمی کوتاهی شده.

    اول در مورد توضیح تکمیلی در بحث ORM در view ( ای کاش در پایان یه تریس میکردید که چه اتفاقی میوفته چون هم متغیر shipping بدونه استفاده موند(09:48) و هم چطور order رو که خودش یه آبجکت هست رو به عنوان یه رکورد میشه تعریف کرد؟ منظورم order=order هستش، توی shipping و
    orderItems )

    دوم در مورد تکنیکی که با متد فیلد ها تو بخش سریالایزر استفاده کردید که اگه اشتباه نکنم بر میگرده به موضوع
    چون فقط خیلی سطحی یه اشاره ای میکنید به داستان یک به چند(set.all_)

    به نظر من این قسمت به خاطر اهمیتی که داره میتونست خیلی مفید تر و تکمیلی تر ضبط بشه و امیدوارم یه بازنگری توی این قسمت اتفاق بیوفته و آپدیت بشه.

  8. امین اجاقی (خریدار محصول)

    با سلام و درود خدمت استاد بزرگ و گرامی مصطفی آصفی عزیز استادم که مرا تا مرحله یک برنامه نویس فول استک شدن بسیار یاری رسانده است و من همیشه بدنبال آموزش های شما و همراه بودن با شما در تمام زمان ها هستم و سلام خدمت استاد و دوست و هم شاگردی عزیزم ابوالفضل حسن زاده عزیز و گرامی من پس از کمال در رشد دانشم در برنامه نویسی در مسیر های مختلف بسیار زیباست که بالاخره در یک شرکت که با زبان آنگولار و دات نت کار می کند شغل پیدا کردم یعنی علاوه بر تمام دروسی که با استاد عزیزم مصطفی آصفی و شما و استادان دیگری در همه زمینه های وب گذراندم آنگولار هم یاد گرفتم تا در این شرکت به کار پرداختم و بسیار شادم و شکر گزار خدای بزرگ و متعال و همچنین تمام دروسی که از گذشته شروع کردم را هم مخصوصا دروسی که از هم رویش می آید را دنبا می کنم و دانشم را گسترش می دهم و همینطور این دو دوره ی جدیدی که از این دوره از آموزش ها قرار دادید یعنی 6 و 7 را خریداری کرده ام تا در یک زمان مناسب شروع به یادگیری کنم زیرا هم رویش یک آموزشگاه اینترنتی بسیار مردمی است که با نور خدا و دل هایی بسیار نورانی که از سوی خداست دلی مانند دل پاک و آرام استاد عزیزم مصطفی آصفی که بسیار زیبا و دوستانه و بسیار نیکو در مسیر رشد دانش مردم ایران که خواهران و برادران هستیم این چنین کوشا هستین و از خدای متعال برکات بسیار از آشسمان نیکو هایشان برایتان می طلبم و کمال موفقیت تان از او خواستارم برکت خدا بر شما و عشق زندگیتان و خانواده ها و دوستان و آشناینتان.

  9. علی آرمان (خریدار محصول)

    اقا اموزش بسیار عالی و دقیق و کامل هست
    فقط چند فصل دیگه مونده تا این پروژه ما نهایی بشه و تمام شده بدونیمش؟

    • ابوالفضل حسن زاده

      سلام به شما خیلی خوشحالم که این طور بوده . برای فصل بعد قراره که بریم سراغ درگاه پرداخت . بعد از این فصل کلیات کار تکمیل میشه و کم کم شروع میکنیم به حرفه ای تر کردن فروشگاه.

  10. مصطفی آصفی

    دست مریزاد. سبک کدنویسی و آموزش گام به گامتون بسیار جذابه. خدا قوت بده که بتونید این مسیر رو کامل کنید.

    • ابوالفضل حسن زاده

      سلام به شما استاد بزرگوار خیلی ممنون انشاالله که بتوانم.

دیدگاه خود را بنویسید

نظرات کاربران در خصوص دوره 

10 دیدگاه برای آموزش ساخت فروشگاه فول استک با جنگو و ری اکت – فصل ۷: ثبت سفارش

  1. pouyan150 (خریدار محصول)

    سلام خسته نباشید من ی سوال داشتم چجوری به orderid در سمت کلایت دسترسی پیدا کردید
    id پیشفرض جنگو

  2. مهدی شلاهی (خریدار محصول)

    سلام
    دوره عالیه ولی یسری کمبودا داره
    مثلا توی سایت هایی مثه دیجیکالا که دسته بندی پوشاک دارن قابلیت انتخاب سایز و رنگ و تغییر قیمت با توجه به سایز و رنگ انتخابی وجود داره که ممنون میشم به این دوره اضافه کنید
    همچنین قابلیت فیلتر کردن محصولات (با استفاده از جنگو رست) براساس مثلا رنگ , سایز , دسته بندی , …
    اگه این دوقابلیت به این دوره اضاف شن میتونم بگم این دوره هم در فضای وب فارسی و هم انگلیسی نظیر نداره

    • ابوالفضل حسن زاده

      سلام به شما . خیلی خوشحالم که دوره براتون عالی بوده. بله درست میفرمایید یادداشت کردم که دربارش بعدا در گروه داوری آموزش صحبت کنیم. اما درباره فیلتر کردن پیشنهاد میکنم خودتون به عنوان تمرین سعی کنید که اجراش کنید . اگر که گیت بلدید با گیت یه شاخه دیگه ایجاد کنید و روی اون شاخه این ایده رو پیاده کنید. اگر که تونستید خیلی خوشحال میشم که اینجا اعلام کنید.

  3. saber masoudnia (خریدار محصول)

    سلام. من این پروژه رو کامل با آموزش پیش رفتم ولی هیچ منبعی که چطور باید این پروژه رو در هاست واقعی بفرستم ندارم . لطفاً اضافه کنید

    • ابوالفضل حسن زاده

      سلام خیلی هم عالی . احتمالا عنوان فصل نهم همین هستش . انتشار پروژه روی هاست آنلاین.

  4. ras (خریدار محصول)

    سلام. فصل هشتم چه زمانی منتشر میشه؟

    • ابوالفضل حسن زاده

      سلام وقت شما بخیر . فصل هشتم منتشر شده . ببخشید که دیر جواب میدم و یه عذر خواهی دیگه هم بکنم از شما فراگیر ها برای دیر منتشر شدن فصل هشتم .

  5. سمیرا (خریدار محصول)

    سلام وقت بخیر
    ممنون بابت آموزش های خوب و کاربردی و همچنین سبک آموزش اصولیتون.
    فصل بعدی این آموزش چه زمانی تهیه و در سایت قرار می گیرد؟

  6. رضا (خریدار محصول)

    اضافه کنم به نظرم:
    بر میگرده به موضوع Serializer relations

  7. رضا (خریدار محصول)

    درود بر شما
    امیدوارم حالتون خوب باشه.
    مثل همیشه بهتون تبریک میگم به خاطر پشتکار و تلاش شما در تهیه ی این آموزش در کنار آقای آصفی.

    یه انتقادی هم داشتم:
    به نظرم در توضیح دو مورد در قسمت 05 این فصل کمی کوتاهی شده.

    اول در مورد توضیح تکمیلی در بحث ORM در view ( ای کاش در پایان یه تریس میکردید که چه اتفاقی میوفته چون هم متغیر shipping بدونه استفاده موند(09:48) و هم چطور order رو که خودش یه آبجکت هست رو به عنوان یه رکورد میشه تعریف کرد؟ منظورم order=order هستش، توی shipping و
    orderItems )

    دوم در مورد تکنیکی که با متد فیلد ها تو بخش سریالایزر استفاده کردید که اگه اشتباه نکنم بر میگرده به موضوع
    چون فقط خیلی سطحی یه اشاره ای میکنید به داستان یک به چند(set.all_)

    به نظر من این قسمت به خاطر اهمیتی که داره میتونست خیلی مفید تر و تکمیلی تر ضبط بشه و امیدوارم یه بازنگری توی این قسمت اتفاق بیوفته و آپدیت بشه.

  8. امین اجاقی (خریدار محصول)

    با سلام و درود خدمت استاد بزرگ و گرامی مصطفی آصفی عزیز استادم که مرا تا مرحله یک برنامه نویس فول استک شدن بسیار یاری رسانده است و من همیشه بدنبال آموزش های شما و همراه بودن با شما در تمام زمان ها هستم و سلام خدمت استاد و دوست و هم شاگردی عزیزم ابوالفضل حسن زاده عزیز و گرامی من پس از کمال در رشد دانشم در برنامه نویسی در مسیر های مختلف بسیار زیباست که بالاخره در یک شرکت که با زبان آنگولار و دات نت کار می کند شغل پیدا کردم یعنی علاوه بر تمام دروسی که با استاد عزیزم مصطفی آصفی و شما و استادان دیگری در همه زمینه های وب گذراندم آنگولار هم یاد گرفتم تا در این شرکت به کار پرداختم و بسیار شادم و شکر گزار خدای بزرگ و متعال و همچنین تمام دروسی که از گذشته شروع کردم را هم مخصوصا دروسی که از هم رویش می آید را دنبا می کنم و دانشم را گسترش می دهم و همینطور این دو دوره ی جدیدی که از این دوره از آموزش ها قرار دادید یعنی 6 و 7 را خریداری کرده ام تا در یک زمان مناسب شروع به یادگیری کنم زیرا هم رویش یک آموزشگاه اینترنتی بسیار مردمی است که با نور خدا و دل هایی بسیار نورانی که از سوی خداست دلی مانند دل پاک و آرام استاد عزیزم مصطفی آصفی که بسیار زیبا و دوستانه و بسیار نیکو در مسیر رشد دانش مردم ایران که خواهران و برادران هستیم این چنین کوشا هستین و از خدای متعال برکات بسیار از آشسمان نیکو هایشان برایتان می طلبم و کمال موفقیت تان از او خواستارم برکت خدا بر شما و عشق زندگیتان و خانواده ها و دوستان و آشناینتان.

  9. علی آرمان (خریدار محصول)

    اقا اموزش بسیار عالی و دقیق و کامل هست
    فقط چند فصل دیگه مونده تا این پروژه ما نهایی بشه و تمام شده بدونیمش؟

    • ابوالفضل حسن زاده

      سلام به شما خیلی خوشحالم که این طور بوده . برای فصل بعد قراره که بریم سراغ درگاه پرداخت . بعد از این فصل کلیات کار تکمیل میشه و کم کم شروع میکنیم به حرفه ای تر کردن فروشگاه.

  10. مصطفی آصفی

    دست مریزاد. سبک کدنویسی و آموزش گام به گامتون بسیار جذابه. خدا قوت بده که بتونید این مسیر رو کامل کنید.

    • ابوالفضل حسن زاده

      سلام به شما استاد بزرگوار خیلی ممنون انشاالله که بتوانم.

دیدگاه خود را بنویسید