پس از گذشت سه ماه از انتشار فصل هفتم آموزش ساخت فروشگاه با جنگو و ری اکت، اکنون مفتخریم تا فصل هشتم از آموزش ساخت فروشگاه با جنگو و ریکت را تقدیم کنیم.
این فصل از آموزش فروشگاه ما را کامل میکند. در این فصل فروشگاه ما مجهز به درگاه پرداخت میشود. اکنون کاربران میتوانند هزینه سفارشات را از طریق درگاه پرداخت، پرداخت کنند.
در این دوره ما از پرداخت یار آیدی پی استفاده کردیم اما با فرایندی که طی میکنیم و با دانش فنی که به دست می آورید به راحتی میتوانید با دیگر پرداخت یارها هم کار کنید.
این آموزش بخشی از بسته جامع ساخت فروشگاه با جنگو و ری اکت (+) است.
شما میتوانید بسته جامع با با مجموع قیمت کمتر از این لینک (+) تهیه کنید یا این مجموعه را فصل به فصل دریافت و تماشا کنید.
فهرست فصلبهفصل آموزش ساخت فروشگاه جنگو/ریکت
-
- ساخت فروشگاه آنلاین با Django و Reacct ـــ فصل ۱: ری اکت
- ساخت فروشگاه آنلاین با Django و Reacct ـــ فصل ۲: جنگو رست
- آموزش فروشگاه جنگو و ری اکت – فصل ۳: مدیریت وضعیت با Redux
- آموزش ساخت فروشگاه فول استک با جنگو و ری اکت – فصل ۴: سبد خرید
- آموزش فروشگاه آنلاین با جنگو پایتون و ری اکت – فصل ۵: اعتبارسنجی
- آموزش ساخت فروشگاه فول استک با جنگو و ری اکت – فصل ۶: احراز هویت
- آموزش ساخت فروشگاه فول استک با جنگو و ری اکت – فصل ۷: ثبت سفارش
- آموش ساخت فروشگاه فول استک با جنگو و ری اکت ــ فصل ۸: درگاه پرداخت
- آموزش ساخت فروشگاه فول استک با جنگو و ری اکت ــ فصل ۹: انتشار آنلاین
این آموزش در یک نگاه
خب ما در این آموزش با پاسخ دادن به سوال اینکه اصلا درگاه پرداخت چه چیزی است شروع کردیم و انواع آن را شناختیم. در درس دوم در آیدی پی ثبت نام و یک درگاه پرداخت برای فروشگاه ایی شاپ دریافت کردیم.
در درس سوم یکبار به صورت تئوری فرآیند پیاده سازی درگاه پرداخت را مرور کردیم و آن را یاد گرفتیم تا درسهای بعدی، در هر درس بدانیم که در کدام مرحله از پیاده سازی هستیم.
در درس چهارم از فرانت اند شروع کردیم به پیاده سازی درگاه. ابتدا دکمه پرداخت هر سفارش را ایجاد کردیم. سپس به سراغ بک اند رفتیم تا نگاشت و منطق پرداخت سفارش را بنویسیم.
در درس ۵ یک مدل جدید به نام IdPay ایجاد کردیم تا تمامی تراکنشها را در آن ذخیره کنیم. سپس به سراغ نوشتن منطق پرداخت سفارش رفتیم و یادگرفتیم که else در try exception هم کاربرد دارد.
در درس ۷ تابعی نوشتیم تا برای ما به سرور آیدی پی درخواست ایجاد تراکنش بزند. پس به این واسطه کتابخانه requests را نصب و با آن کار کردیم. در درس ۸ انتظار به پایان میرسد و با درگاه پرداخت دیدار میکنیم، اولین دیدار که خیلی هیجان انگیز هم بود.
در درس ۹ به سراغ گام دوم از پیاده سازی درگاه پرداخت یعنی “ بازگشت به سایت پذیرنده ” رفتیم. در این مرحله به گونهای کد نویسی کردیم که تا حد ممکن امنیت ایی شاپ حفظ شود. در نهایت در درس ۱۰ اخرین مرحله از پیاده سازی درگاه پرداخت را برداشتیم.
تابعی نوشتیم تا به سرور آیدی پی برای “ تایید تراکنش ” درخواست بزند. در درس ۱۱ تابعی نوشتیم تا اطلاعات تراکنش را در دیتابیس ثبت کند. در درس ۱۲ با چالش جدیدی رو به رو شدیم. چالش به این صورت بود که باید تراکنش را استعلام بگیریم. پس دوباره در این درس به صورت تئوری فرآیند استعلام تراکنش را بررسی و یادگرفتیم.
از درس ۱۳ شروع به طی کردن گام به گام مراحل استعلام تراکنش کردیم. اول از دیتابیس استعلام گرفتیم. اگر که اطلاعات کامل نبود، آن وقت باید به سرور آیدی پی برای استعلام درخواست بزیم.
در درس ۱۴ تابعی نوشتیم تا نسبت به کد وضعیت تراکنش پیام مناسب را به سمت فرانت اند ارسال کند. در درس ۱۵ به سرور آیدی پی برای استعلام وضعیت تراکنش درخواست زدیم.
در درس ۱۶ پاسخی که آیدی پی به ما در ازای درخواست استعلام وضعیت تراکنش میدهد را مدیریت و اطلاعات تراکنش را دیتابیس ثبت کردیم.
از درس ۱۷ دوباره به سراغ فرانت اند رفتیم. در این درس با مفهوم جدیدی به نام “ Private Route ” در ری اکت اشنا شدیم.
در درس ۱۸ صفحه نمایش جزئیات تراکنش را ساختیم و نتیجه پرداخت را به کاربری نمایش دادیم. در درس ۱۹ سازگار سازی مقادیر را داشتیم. مقادیری مثل واحد پول، محاسبه مالیات، هزینه حمل و نقل و …. .
نهایت در آخرین درس که درس بیستم است، نگاهی به اینکه کجای مسیر هستیم، چه چیزهایی یادگرفتیم، چه کارهایی انجام دادیم و ادامه راه به چه صورت است پرداختیم.
این آموزش بی نظیر است زیرا:
- اتصال به درگاه پرادخت با “ APIs ”
پیشنیاز
- آموزش مقدماتی ری اکت (+)
- فصلهای اول (+) و دوم (+) و سوم (+) و چهارم (+) و پنجم (+) و ششم (+) و هفتم (+) آموزش فروشگاه با جنگو و ری اکت
کلیدواژگان
آموزش ساخت فروشگاه فول استک | آموزش ساخت فروشگاه فول استک حرفه ای | آموزش ساخت فروشگاه فول استک سایت | آموزش ساخت فروشگاه فول استک صفر تا صد | آموزش فروشگاه فول استک با جنگو حرفه ای | آموزش ساخت فروشگاه با جنگو و ریکت
hosseinzadeh.reza2 –
با سلام . سوالم مربوط به فصل 2 این اموزش هست.من طبق پروژه آموزشی پیش رفتم زمانی که اطلاعات product از سمت سرور میگیریم همه اطلاعات از سمت سرور میاد بجز عکس .تنظیمات رو هم طبق آموزش زدم فایل static و پوشه images تشکیل میشه، عکس هم داخل پوشه آپلود میشه ولی بازم این خطا رو دارم
GET http://localhost:3000/images/mouse-logitech.jpg 404 (Not Found)
به نظر شما مشکل کجاست؟؟
ابوالفضل حسن زاده –
سلام وقت شما بخیر . ببینید اگر که کلا عکس ها لود نمیشن چه در صفحه محصولات و چه در صفحه جزئیات هر محصول احتمالا شما این media_url رو به url اصلی پروژه اضافه نکردید .
from django.conf import settings
from django.conf.urls.static import static
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
اگر که این رو در فایل urls.py اصلی پروژه اضافه کردید و باز هم عکس ها لود نمیشن احتمالا مسیر رو درست معرفی نکردید . ولی من احتمال میدم مشکل از همین باشه . حالا باز اگر که مشکلتون حل نشد . کدتون رو پوش کنید رو گیت هاب تا بتونیم ببینیم و روش فکر کنیم .
رضا (خریدار محصول) –
سلام
وقتتون بخیر
امیدوارم فصل جدید هر چه زودتر منتشر بشه.
حسین علیزاده –
سلام من از reactورژن18 استفاده میکنم جزِئیات محصول را نشان نمی دهد پیامmatch تعریف نشده را میدهد راهنمایی بفرمائید
ابوالفضل حسن زاده –
سلام وقت شما بخیر. عذرخواهی میکنم که پاسختون دیر شد . پارامتر match در واقع برای دریافت path variable از url بود . به این صورت که مثلا macth.params.id مقدار متغیر id که در path تعریف کرده بودیم رو به ما برمیگردونه . ظاهرا این ویژگی در ورژن ۱۸ تغییر کرده همونطور که شما به خطا خوردید . باید به این صورت عمل بشه که در هر صفحه ای یا هر قسمتی از کد که خواستید از path variable استفاده کنید ابتدا باید هوک useParams رو از react-router-dom ایمپورت کنید تا بتونید با استفاده از این هوک به متغیرهایی که در path تعریف کردید دسترسی داشته باشید . مثلا میخوایم به متغیر id دسترسی داشته باشیم ابتدا ایمپورت رو انجام میدم .
( import { useParams } from ‘react-router-dom’; )
و بعد با استفاده از هوک useParams متغیر رو صدا میزنم . به این صورت
( let { id } = useParams(); )
البته که داخل تابع مورد نظر باید این کار رو انجام بدید . برای مطالعه بیشتر هم یه سری به این لینک ها بزنید .
useParams_1
useParams_2
useParams_3
pouyan150 (خریدار محصول) –
سلام بنده در پروژه خود به مشکل خوردم و وقتی میخوام api بزنم به درگاه بانکی در مرحله اول به من the id pay server was established که خودمان نوشتیم بر میگرداند و بادرگاه ارتباط برقرار نمیکند این کد views.py:from django.shortcuts import render
from .serializer import ProductSerializer, Topsellsserializer, separserializer, headlightserializer, lentserializer, radiatorserializer
from .models import Products, TopSells, lent, radiator, Separ, headlight, Order
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework.decorators import api_view
from rest_framework import status
from product.utils.pay_utils import idpaycreatedb, idpaycreatepay
class GetListProduct(APIView):
def get(self, request):
products = Products.objects.all()
serializer = ProductSerializer(products, many=True)
return Response(serializer.data)
class Getproduct(APIView):
def get(self, request, brand):
comment = Products.objects.get(brand=brand)
serializer = ProductSerializer(comment)
return Response(serializer.data)
class Topsellsviews(APIView):
def get(self, request):
topsellsproduct = TopSells.objects.all()
serializer = Topsellsserializer(topsellsproduct, many=True)
return Response(serializer.data)
class Separview(APIView):
def get(self, request):
separsproduct = Separ.objects.all()
serializer = separserializer(separsproduct, many=True)
return Response(serializer.data)
class Radiatorview(APIView):
def get(self, request):
radiatorsproduct = radiator.objects.all()
serializer = radiatorserializer(radiatorsproduct, many=True)
return Response(serializer.data)
class Lentview(APIView):
def get(self, request):
lentsproduct = lent.objects.all()
serializer = lentserializer(lentsproduct, many=True)
return Response(serializer.data)
class Headlightview(APIView):
def get(self, request):
headlightsproduct = headlight.objects.all()
serializer = headlightserializer(headlightsproduct, many=True)
return Response(serializer.data)
class Getdetailproduct(APIView):
def get(self, request, productid):
detail = Products.objects.get(productid=productid)
serializer = ProductSerializer(detail)
return Response(serializer.data)
@api_view([‘GET’])
def payorder(request, pk):
user = request.user
try:
order = Order.objects.get(_id=pk)
except Order.DoesNotExist:
return Response({‘detail’: ‘order not found !’}, status=status.HTTP_404_NOT_FOUND)
else:
if order.is_paid:
return Response({‘detail’: ‘order already paid !’}, status=status.HTTP_400_BAD_REQUEST)
else:
try:
response = idpaycreatepay(user, order)
except:
return Response({‘detail’: ‘the id pay server connection was established !’},
status=status.HTTP_500_INTERNAL_SERVER_ERROR)
else:
if(str(response.status_code).startswith(‘2’)):
resjson = response.json()
if(idpaycreatedb(user, order, resjson[‘id’])):
return Response(resjson, status=status.HTTP_200_OK)
else:
return Response({‘detail’: ‘db error!’}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
و این کد pay utils است:import requests, json
from product.models import IdPay
IDPAYHEADER = {
‘Content-Type’ : ‘application/json’,
‘X-API-KEY’: ‘4bde5a4e-c640-4f95-adc0-39761d15e3d9’,
‘X-SANDBOX’: ‘1’,
}
def idpaycreatepay(order):
body = {
‘order_id’ : str(order._id),
‘amount’ : int(order.totalprice * 10),
‘callback’ : ‘http://127.0.0.1:8000/api/v1/air/result/’,
}
response = requests.post(
“https://api.idpay.ir/v1.1/payment”,
data=json.dumps(body),
headers = IDPAYHEADER,
)
return response
def idpaycreatedb(user, order, id):
try:
idpay = IdPay.objects.create(
user = user,
order = order,
transId = id,
lastStatus = 0,
amountCreate = (order.totalprice * 10),
)
return True
except:
return False
mohammad dori (خریدار محصول) –
سلام دوره خوبی بود منتظر فصل بعدی هستم
mehdi mahdavi (خریدار محصول) –
سلام وتشکر منتطر فصل های بعدی هستیم
محمد علی (خریدار محصول) –
با سلام و خسته نباشی
اگه مقدور هست در مورد دپلوی کردن پروژه روی هاست آموزش های بیشتر و حرفه ای تر بزارید مخصوصا در مورد کار با سرورها و امنیت سایت
سپاس
محمد علی (خریدار محصول) –
سلام ممنون برای زحماتتون بی صبرانه منتظر فصل 9 هستم .
ras (خریدار محصول) –
سلام و تشکر بابت زحماتتون و تهیه این دوره عالی. میخواستم بدونم فصل 9 این آموزش چه زمانی منتشر میشه؟
ابوالفضل حسن زاده –
سلام وقت شما بخیر . خیلی ممنون از زمان و وقتی که برای نوشتن دیدگاه تون قراردید . فصل نهم حقیقتا فصل چالش برانگیزی هست . حتی از فصل هشتم هم بیشتر. چرا که ما باید بریم سمت DevOps . یعنی مفاهیمی مثل داکر ( Docker ) و کوبرنتیز ( Kubernetess ) رو درک کنیم و یادبگیریم تا بتونیم یک پروژه فول استک رو روی سرور سوار کنیم و ببریم به محیط عملیاتی . به شما و افرادی که فراگیر این آموزش هستن پیشنهاد میکنم درباره ی فیلد کاریه DevOps ، مفاهیم داکر و کوبرنتیز مطالعه کنید تا زمانی که فصل نهم منتشر شد بتونید با سرعت بیشتر پیش برید و بهتر مطالب رو درک کنید . موفق و پیروز باشید .
مهدی آقایی (خریدار محصول) –
سلام جناب حسن زاده، به مشکلی برخوردم تو صفحه payResult وقتی درخواست در انتظار پرداخت رو میزنم، به من خطای 400 بر میگردونه، فقط در این مورد این اتفاق میوفته، تو بقیه گزینه ها ارور خودشون رو بر میگردونه، ولی تو این درخواست ارور 400 میده ——- message
:
“Transaction status Unknown”
order_id
:
957
status
:
400
success
:
false
track_id
:
“1143721”
ابوالفضل حسن زاده –
سلام وقت شما بخیر . اول از همه اینکه خیلی عذرخواهی میکنم که جوابتون دیر شد . دوم اینکه من خودم تست کردم و روی پروژه من مشکلی نبود . اگر که کدتون روی گیت هاب هست ادرسش رو اینجا قرار بدید تا بررسی کنم و مورد سوم اینکه مشکل قبلی که برخورده بودید حل شد ؟؟!
مهدی آقایی (خریدار محصول) –
سلام جناب حسن زاده، با تشکر از شما به خاطر دوره خوبی که تهیه کردین، در قسمت payOrder در فایل ری اکتی، اروری با عنوان .then is not a function دریافت میکنم، تو اینترنت هم چیزی عایدم نشد، ممنون میشم کمکم کنید
ابوالفضل حسن زاده –
سلام وقت شما بخیر . متشکرم از شما . ببینید من احساس میکنم تو تعریف کردن تابع و صدا زدنش اشتباهی رخ داده . این تابع {“>goPayGate هستش که ما با هم نوشتیم و این جا OrderScreen-line31 هم در صفحه هر سفارش ازش استفاده کردیم و نمونه ایی از axio شخصی سازی شده رو بهش پاس دادیم . در واقع then , catch توابعی از axios هستن که بعد از ارسال درخواست در جواب این توابع به کار می افتن . then زمانی اجرا میشه که درخواست با موفقیت رفته و برگشته و catch یعنی همراه با خطا بوده حالا چه اتفاقی بی افته . باز اگر که مشکل حل نشد یه اکسنتشنی داره vs code به اسم code snap این اکستنشن رو نصب کنید از کدتون عکس بگیرید و بارگذاری کنید داخل پیکوفایل و لینکش رو اینجا قرار بدید تا باهم دیگه همفکری کنیم ببینیم مشکل از کجاست .
امین اجاقی (خریدار محصول) –
سلام بر استاد بزرگ مصطفی آصفی عزیز و گرامی و دوست خوب و همکلاسی و استاد عزیزم ابولفضل حسن زاده عزیز و دوست داشتنی من به برکت خدا این دوره را نیز تهیه کردم و به امید خدا در زمان مناسب آن را نیز به پایان می رسانم و از آن در مسیر برنامه نویسی ام استفاده می نمایم برکت خدای متعال بر شما عزیزان خدا و خانواده های محترمتان پیروز و شاد باشید.
ابوالفضل حسن زاده –
سلام خدا بر شما دوست عزیزم اقای مهندس اجاقی . خیلی هم عالی انشاالله که دوره براتون مفید واقع بشه و بتونید ازش استفاده کنید.
ras (خریدار محصول) –
با سلام و تشکر بابت تهیه این دوره. خواستم به عنوان پیشنهاد مطرح کنم که فکر میکنم با توجه به تغییرات اندکی که در جنگو 4 وجود داره فکر میکنم خوب هست در یک جلسه مستقل این تغییرات بررسی بشه و یا همین دوره در یک جلسه با جنگو 4 بروز بشه. تشکر.
ابوالفضل حسن زاده –
سلام به شما و خیلی ممنون از وقتی که برای نوشتن دیدگاهتون گذاشتید . بله درست میفرمایید جنگو داره متحول میشه و خب ما هم باید همراه با جنگو بروز باشیم . پیشنهاد خوبیه ، برای این فروشگاه ما یک سری برنامه ها داریم که انشاالله این رو هم جزء اون برنامه قرار خواهیم داد.
مصطفی آصفی –
فلوچارت خیلی خوب و کدنویسی بی نظیری رو تو این دوره شاهد بودم. دم شما گرم. دوره سنگینیه ولی چون اتصال API برای درگاه های مختلف کم و بیش یکسانه باید یادش گرفت. شما خیلی خوب توضیح دادید.
ابوالفضل حسن زاده –
سلام استاد خیلی ممنون از شما و انرژی خوبتون. انشاالله که تجربه بقیه هم به همین صورت باشه.