حالت مطالعه
در این دوره آموزش react native – ساخت اپلیکیشن فروشگاهی مشابه دیجی کالا با استفاده از تکنولوژی های react native، react، nodejs، mongodb و graphql یک اپلیکیشن فروشگاهی مشابه دی جی کالا (react native) به همراه پنل مدیریت (react) و API برای اتصال به سرور (nodejs ، mongodb و graphql) توسعه خواهیم داد.
هدف ما در reactapp از همان ابتدا ارائه آموزش های کاربردی و تخصصی در حوزه جاوااسکریپت برای ورود به بازار کار بوده است. با توجه به درخواست شما کاربران عزیز و لزوم وجود چنین دوره ای، تصمیم بر آماده سازی این دوره گرفتیم تا شما با آمادگی کامل به عنوان یک full-stack developer وارد بازار کار شوید.
با توجه به زمان ضبط دوره، آخرین نسخه React Navigation، نسخه 4 بوده است. به همین دلیل می توانید به صورت رایکان در دوره React Navigation 5 شرکت نمایید و از آخرین تغییرات این پکیج در پروژه های خود بهره مند شوبد.
هدیه ویژه برای کاربران این دوره :
در پایان این دوره پروژه بر روی سرویس لیارا آپلود خواهد شد. به همین منظور برای تمامی کاربرانی که این دوره را از سایت reactapp تهیه کنند از طرف لیارا حسابشون به مبلغ 50 هزار تومان شارژ خواهد شد که فرصت بسیار مناسبی است.
برای آشنایی با نحوه دریافت این هدیه می توانید پست هدیه ویژه کاربران دوره NodeJS و ReactJS| پنجاه هزار تومان اعتبار سرویس لیارا را مطالعه نمایید.
جهت آشنایی با دوره ویدیوهای بخش معرفی و سرفصل ها را مشاهده نمایید.
فصل اول : ساخت اپلیکیشن فروشگاهی (مشابه Digikala) با React Native
0. ایجاد پروژه
1. آماده سازی ملزومات شروع پروژه
2. ایجاد کامپپوننت slider صفحه اصلی
3. ایجاد کامپوننت دسته بندی های صفحه اصلی
4. نصب کتابخانه react native material ripple
5. ایجاد کامپوننت تخفیفات ویژه صفحه اصلی
6. ایجاد کامپپوننت محصولات پرفروش
7. ایجاد کامپپوننت جدیترین محصولات
8. ایجاد صفحه دسته بندی محصولات
9. ایجاد صفحه لیست محصولات - بخش ول
10. ایجاد صفحه لیست محصولات - بخش دوم
11. ایجاد صفحه single page برای هر محصولات
12. ایجاد کامپوننت برای اشتراک گذاری محصول - اسلایدر تصاویر محصول - بخش اول
13. ایجاد کامپوننت برای اشتراک گذاری محصول - اسلایدر تصاویر محصول - بخش دوم
14. ایجاد کامپوننت برای اشتراک گذاری محصول - اسلایدر تصاویر محصول - بخش سوم
15. طراحی بخش مشخصات و نظرات کاربران برای هر محصول
16. ایجاد کامپوننت نمایش قیمت، رنگ و گارانتی محصول - بخش اول
17. ایجاد کامپوننت نمایش قیمت، رنگ و گارانتی محصول - بخش دوم
18. ایجاد کامپوننت نمایش قیمت، رنگ و گارانتی محصول - بخش سوم
19. ایجاد کامپوننت نمایش قیمت، رنگ و گارانتی محصول - بخش چهارم
20. ایجاد کامپوننت نمایش توضیحات محصول
21.کار با layout-animation برای ساخت انیمیشن باکس توضیحات محصول
22. ایجاد کامپوننت برای امتیازدهی محصول - بخش اول
23. ایجاد کامپوننت برای امتیازدهی محصول - بخش دوم
24. ایجاد کامپوننت برای محصولات پر فروش
25. طراحی صفحه سبد خرید - بخش اول
26. طراحی صفحه سبد خرید - بخش دوم
27. طراحی صفحه سبد خرید - بخش سوم
28. طراحی صفحه لاگین - بخش اول
29. طراحی صفحه لاگین - بخش دوم
30.طراحی صفحه ثبت نام کاربران
31. طراحی صفحه فراموشی پسورد - بخش اول
32. طراحی صفحه فراموشی پسورد - بخش دوم
33. طراحی صفحه فراموشی پسورد - بخش سوم
34. طراحی صفحه جستجو - بخش اول
35. طراحی صفحه جستجو - بخش دوم
36. طراحی Hreader و Button های آن
37. طراحی نمایش محصولات به صورت جعبه ای
38. طراحی نمایش محصولات به صورت تمام صفحه ای
39. طراحی نمایش محصولات به صورت ستونی
40. طراحی Button تغییر نحوه نمایش محصولات
41. ساخت آرایه برای نمایش محتوای Fake باکس ها
42. ساخت Modal برای Button مرتب سازی
43. ساخت Modal برای Button مرتب سازی بخش دوم
44. ساخت Modal برای Button مرتب سازی بخش سوم
45. طراحی صفحه دسته بندی - بخش اول
46. طراحی صفحه دسته بندی - بخش دوم
47. طراحی صفحه دسته بندی - بخش سوم
50. طراحی هدر برای صفحه اصلی - بخش دوم
48. ایجاد تغییرات در صفحه اصلی - بخش اول
49. ایجاد تغییرات در صفحه اصلی - بخش دوم
50. طراحی Header برای صفحه اصلی - بخش اول
51. طراحی Header برای صفحه اصلی - بخش دوم
52. طراحی Header برای صفحه about و Category
53. ساخت Headerبرای صفحه product, shop cart , login
54. طراحی Headerبرای صفحه forget pass , sign In
55. طراحی Header برای صفحه search , category
56. ساخت Footer برای صفحه login
57. طراحی فوتر برای صفحه ثبت نام
58. استفاده از react navigation hooks برای جابجایی بین صفحات
59. پیکربندی route ها - بخش اول
60. پیکربندی route ها - بخش دوم
61. طراحی drawer - بخش اول
62. طراحی drawer - بخش دوم
63. طراحی drawer - بخش سوم
64. طراحی drawer - بخش چهارم
65. راستچین کردن پروژه
66. اضافه کردن فونت فارسی به پروژه
67. غیر فعال کردن حالت orientation اپلیکیشن
68.طراحی صفحه نظرات کاربران - بخش اول
69.طراحی صفحه نظرات کاربران - بخش دوم
70.طراحی صفحه نظرات کاربران - بخش سوم
71.طراحی صفحه افزودن نظرات - بخش اول
72.طراحی صفحه افزودن نظرات - بخش دوم
73.طراحی صفحه افزودن نظرات - بخش سوم
74. ارسال داده ها - بخش اول
75. ارسال داده ها - بخش دوم
فصل دوم : ساخت API با استفاده از (NodeJS + Graphql)
0. معرفی فصل دوم
1. آماده سازی پروژه
2. اتصال به دیتابیس - mongodb
3. اتصال به دیتابیس - mysql
4. آشنایی با global config
5. ایجاد فایل env.
6. شروع کار با Graphql
7. ایجاد schema
8. ایجاد resolver
9. آشنایی با Apollo server
10. پیاده سازی بخش ایجاد حساب کاربری (register) - قسمت اول
11. پیاده سازی بخش ایجاد حساب کاربری (register) - قسمت دوم
12. اعتبارسنجی - validation
13. مدیریت خطاها - Error Handling
14. پیاده سازی ورود به حساب کاربری - login
15. ماژول JWT - احراز هویت (Authentication) - قسمت اول
16. context در Apollo server
17. ماژول JWT - احراز هویت (Authentication) - قسمت دوم
18. پیاده سازی کتابخانه چند رسانه ای (Multimedia) - قسمت اول
19. آپلود فایل
20. پیاده سازی کتابخانه چند رسانه ای (Multimedia) - قسمت دوم
21. پیاده سازی بخش دسته بندی محصولات (category) - قسمت اول
22. پیاده سازی بخش دسته بندی محصولات (category) - قسمت دوم
23. روابط بین کالکشن ها (relationship) - قسمت اول
24. روابط بین کالکشن ها (relationship) - قسمت دوم
25. پیاده سازی بخش brand محصولات - قسمت اول
26. پیاده سازی بخش brand محصولات - قسمت دوم
27. پیاده سازی معیارهای امتیازدهی در بخش commentها - قسمت اول
28. پیاده سازی معیارهای امتیازدهی در بخش commentها - قسمت دوم
29. پیاده سازی dynamic مشخصات محصول - قسمت اول
30. پیاده سازی dynamic مشخصات محصول - قسمت دوم
31. پیاده سازی جزئیات مشخصات محصول - قسمت اول
32. پیاده سازی جزئیات مشخصات محصول - قسمت دوم
33. پیاده سازی بخش فروشنده
34. پیاده سازی بخش گارانتی
35. افزودن اسلایدر (slider) - قسمت اول
36. افزودن اسلایدر (slider) - قسمت دوم
37. افزودن بنر (baner) - قسمت اول
38. افزودن بنر (baner) - قسمت دوم
39. افزودن محصول (product) - قسمت اول
40. افزودن محصول (product) - قسمت دوم
41. افزودن محصول (product) - قسمت سوم
42. افزودن محصول (product) - قسمت چهارم
43. پیاده سازی کوئری فرم افزودن محصول (product)
44. پیاده سازی کوئری نمایش محصول (product)
45. ویرایش ویژگی های محصول (product attribute)
46. آپلود تصاویر محصول
47. ویرایش محصول (product)
48. ویرایش اسلایدر (slider)
49. ویرایش بنر (banner)
50. پیاده سازی کوئری وضعیت سفارشات (Order Status)
51. پیاده سازی بخش نظرات کاربران - قسمت 1 (Add Comment)
52. پیاده سازی بخش نظرات کاربران - قسمت 2 (Show Comment)
53. پیاده سازی بخش نظرات کاربران - قسمت 3 (َAprove Comment)
54. پیاده سازی بخش نظرات کاربران (Like)
55. پیاده سازی بخش نظرات کاربران (Dislike)
56. پیاده سازی بخش علاقه مندی ها
57. پیاده سازی بخش کاربران (users)
58. پیاده سازی بخش کاربران (profile)
59. اتصال به درگاه پرداخت - قسمت اول
60. اتصال به درگاه پرداخت - قسمت دوم
61. اتصال به درگاه پرداخت - قسمت سوم
62. اتصال به درگاه پرداخت - قسمت چهارم
63. اتصال به درگاه پرداخت - قسمت پایانی
64. پیاده سازی داشبورد پنل ادمین - قسمت اول
65. پیاده سازی داشبورد پنل ادمین - قسمت دوم
66. پیاده سازی داشبورد پنل ادمین - قسمت سوم
67. پیاده سازی داشبورد پنل ادمین - قسمت چهارم
68. احراز هویت پیامکی
69. اجرای سرور با استفاده از cluster
70. مانیتوریگ سرور - pm2
71. مانیتوریگ سرور - keymetrics
72. استقرار پروژه
فصل سوم: ساخت پنل مدیریت با ReactJs
0. معرفی فصل سوم
1. clone قالب از gitHub
2. بررسی ساختار قالب
3. اعتبار سنجی فرم ورود با Formik
4. اتصال به API با استفاده از axios
5.اضافه کردن google recaptcha به صفحه ورود
6.استفاده از context برای ذخیره سازی token
7. بررسی لاگین بودن کاربر در کامپوننت ها
8. ایجاد کامپوننت AddMedia
9.طراحی فرم آپلود فایل
10. پیش نمایش فایل های انتخاب شده
11. بررسی فرمت و حجم فایل های انتخاب شده
12. اضافه کردن ویژگی darg & drop برای آپلود فایل
13.اتصال به API و آپلود فایل های انتخاب شده
14.تغییر نحوه گرفتن TOKEN از LOCALSTORAGE
15.ایجاد کامپوننت AllMedia و نمایش فایل های آپلود شده
16.ایجاد نوار جستجو برای کتابخانه فایل های چند رسانه ای
17.اضافه کردن modal برای نمایش اطلاعات فایل ها
18. اضافه کردن دکمه خروج
19.طراحی کامپوننت AddCategory
20. ایجاد کامپوننت Library
21. انتخاب عکس از کتابخانه پرونده های چند رسانه ای
22. استفاده از AddCategory query
23. داینامیک کردن AddCategory query
24. نمایش دسته بندی ها
25.ایجاد کامپوننت AddBrand
26. طراحی کامپوننت AddBrand
27.ثبت برند
28.نمایش برندها
29. ایجاد کامپوننت Scoring
30. طراحی کامپوننت Scoring
31. نمایش معیارهای امتیازدهی
32. ایجاد کامپوننت ScoringItem
33. ایجاد کامپوننت specifications
34. ثبت مشخصات
35. نمایش مشخصات
36. ایجاد کامپوننت subSpecifications
37. ثبت ریز مشخصات
38. نمایش ریز مشخصات
39. ایجاد کامپوننت Sellers
40. نمایش فروشندگان
41.بروزرسانی اطلاعات فروشندگان
42. ایجاد کامپوننت Warranty
43. نمایش گارانتی ها
44. ایجاد کامپوننت AddProduct
45. طراحی کامپوننتAddProduct - پارت یک
46. طراحی کامپوننتAddProduct - پارت دو
47. طراحی کامپوننتAddProduct - پارت سوم
48. طراحی کامپوننتAddProduct - پارت چهارم
49. طراحی کامپوننتAddProduct - پارت پنجم
50.طراحی کامپوننتAddProduct - پارت ششم
51. طراحی کامپوننتAddProduct - پارت هفتم
52. طراحی کامپوننتAddProduct - پارت هشتم
53. طراحی کامپوننتAddProduct - پارت نهم
54.ایجاد کامپوننت Products
55. نمایش لیست محصولات
56. ایجاد کامپوننت productSeller
57. نمایش فروشندگان یک محصول
58. ویرایش اطلاعات فروشندگان یک محصصول
59. ایجاد کامپوننت addSeller
60. طراحی کامپوننت addSeller پارت یک
61. طراحی کامپوننت addSeller پارت دو
62. اضافه کردن فروشنده جدید برای یک محصول
63. ایجاد کامپوننت editProduct
64. گرفتن اطلاعات محصول از سرور
65. بروزرسانی state ها محصول
66. نمایش attribute های محصول
67. گرفتن مشخصات محصول از سرور
68. نمایش مشخصات محصول از سرور
69. ویرایش محصول
70. ایجاد کامپوننت pictureProduct
71. گرفتن عکس های محصول از سرور
72. انتخاب عکس از کتابخانه چندرسانه ای
73. اضافه کردن عکس به محصول
74. ایجاد کامپوننت status orders
75. طراحی کامپوننت Status
76.ایجاد وضعیت سفارش جدید
77.نمایش وضعیت سفارشات موجود
78.تغییر لیست وضعیت سفارشات برای ویرایش
79.ویرایش وضعیت سفارشات
80.ایجاد کامپوننت Orders
81.نمایش لیست سفارشات
82.ایجاد کامپوننت changeOrderStatus
83.تغییر وضعیت سفارشات
84. ایجاد کامپوننت orderDetails
85.نمایش جزئیات سفارش پارت یک
86.نمایش جزئیات سفارش پارت دو
87.نمایش جزئیات سفارش پارت سه
88.ایجاد کامپوننت users
89. نمایش لیست کاربران پارت 1
90.نمایش لیست کاربران پارت 2
91.نمایش اطلاعات کاربر
92.نمایش لیست نظرات کاربر
93.نمایش جزئیات نظرات کاربر پارت 1
94.نمایش جزئیات نظرات کاربر پارت 2
95.نمایش لیست محصولات مورد علاقه کاربر
96.نمایش سفارشات کاربر
97.نمایش نظرات
98.تغییر وضعیت نظرات
99.ایجاد کامپوننت Banner
100.انتخاب عکس از پرونده چند رسانه ای
101.اضافه کردن بنر جدید
102.نمایش لیست بنرها
103.ویرایش بنر
104.حذف بنر
105.ایجاد کامپوننت slider
106.اضافه کردن slider
107.نمایش تمامی slider ها
108.ویرایشslider
109.ویرایش slider پارت
110.حذف اسلایدر
111. تغییر کامپوننت داشبورد
112.ایجاد چارت تعداد کاربران
113.ایجاد چارت تعداد سفارشات
114.ایجاد چارت تعداد مخصولات
115.ایجاد چارت تعداد پرداختی های 10 روز گذشته
116.ایجاد چارت وضعیت سفارشات
117.ایجاد چارت پرداختی های 10 روز گذشت
118.ایجاد چارت جنسیت کاربران
120.استقرار پروژه بر روی سرویس لیارا
119.ایجاد چارت های نظرات، سفارشات لغو شده و فروشندگان
فصل چهارم : اتصال اپلیکشن به API
0. معرفی فصل چهارم
1. توضیح در مورد http request
2. اولین درخواست با axios
3. معرفی interceptors در axios
4. تنظیمات پیش فرض در axios
5. کار با instance در axios
6.ارتباط با سرور و استفاده از main page query
7.نمایش اسلایدر
8.نمایش category
9.نمایش محصولات ویژه
10.نمایش بنرهای تخفیف
11.نمایش محصولات پرفروش
12.نمایش محصولات جدید
13.بروزرسانی کامپوننت signUp
14.تغییر کامپوننت myFooter
15.اتصال به API برای ثبت نام
16.دریافت کد تأیید پیامکی
17.ورود به حساب کاربری
18.چرا و چه موقع باید از state manager ها استفاده کنیم؟
19.استفاده از context api
20.بررسی وضعیت لاگین بودن کاربر با Context api
21.تغییر کامپوننت product
22.نمایش عکس های محصول
23.نمایش نام فارسی و انگلیسی محصول
24.اضافه کردن محصول به لیست مورد علاقه
25.تغییر کامپوننت Button
26.نمایش تعداد نظرات ثبت شده محصول
27.نمایش نظرات محصول
28.نمایش نقاط قوت و ضعف محصول
29.بررسی وضعیت login کاربر برای ثبت نظر
30.گرفتن آیتم های امتیاز دهی از سرور
31.نمایش آیتم های امتیاز دهی
32.ثبت نقاط قوت و ضعف برای یک محصول
33.ثبت نظر
34.ایجاد کامپوننت ProductSpecs
35.دریافت مشخصات محصول از سرور - پارت یک
36..دریافت مشخصات محصول از سرور - پارت دو
37.نمایش مشخصات محصول
38.گرفتن اطلاعات رنگ های محصول از سرور
39.نمایش رنگ ها و قیمت های مختلف محصول
40.نمایش توضیحات محصول
41.محاسبه میانگین امتیاز های داده شده به محصول
42.ایجاد context مربوط به سبدخرید
43.استفاده از basketContext
44.جلوگیری از اضافه شدن محصول تکراری به سبد خرید
45.اضافه کردن محصول به سبد خرید
46.نمایش تعداد محصولات اضافه شده به سبد خرید
47.نمایش محصولات موجود در سبد خرید
48.بروزرسانی و حذف محصولات موجود در سبد خرید
49.اضافه کردن button ثبت سفارش
50.بررسی وضعیت login کاربر
51.توضیح در مورد کامپوننت userinfo
52.نمایش اطلاعات کاربر
53.ارسال اطلاعات کاربر به سرور
54.استفاده از webView
55.اتصال به درگاه بانک
56.ارسال اطلاعات دسته بندی ها به CatComponent
57.نمایش دسته های دوم
58.ایجاد کامپوننت Third Component
59.نمایش دسته های سوم
برچسب: آموزش GraphQl آموزش mern آموزش mongodb آموزش node js آموزش react آموزش react native آموزش پروژه محور react آموزش پروژه محور react native
moreدوره های مرتبط
آموزش NativeBase
NativeBase یک کتابخانه رایگان و open-source از کامپوننت های UI برای فریمورک React Native است(از نسخه 2.4.1 در وب قابل استفاده…
752
رایگان!
آموزش جاوااسکریپت 2015 | ES6
همه ما از توانایی های فوق العاده جاوااسکریپت با خبر هستیم ، اما نسخه ۲۰۱۵ این زبان یا به اصطلاح…
1,822
رایگان!
آموزش Redux
اگر برنامه نویسی با React Native رو شروع کردید حتما اسم Redux رو شنیدید و به احتمال زیاد این سوال…
86
25,000 تومان
ansarihamid1375
من دوره رو خریدم میخوام دانلود کنم داره ارور میده مشکل از کجاست؟
و این دوره کی به پایان میرسه؟
علیرضا(مدیریت)
سلام و احترام
وقت بخیر
در حال ارتقا هاست دانلود هستیم و به زودی امکان دانلود مجددا فراهم میشه
این دوره به پایان رسیده
salamwordpress
ممنون میشم لینک فصل ۴ پارت ۱۰ رو تست کنید.
این خطا رو میده :
Can not Connect to Download Hosting , Please try again or Contact with Us. Go to homepage
مهدی(مدیریت)
سلام.
در حال تغییر پلن هاست دانلود هستیم.تا چند ساعت دیگر مشکل برطرف می شود
مهراد
شماره تو اموزش از expo استفاده می کنید؟
مهدی(مدیریت)
سلام.خیر
از react-native cli استفاده شده
d fds
سلام
ببخشید این دوره کد تخفیف داره؟
مهدی(مدیریت)
سلام
لطفا از طریق تلگرام با پشتیبانی در ارتباط باشید
mohammadardehe
سلام
اگه مایل باشید میتونید API رو تو سایت https://apieco.ir قرار بدید تا در دسترس کلی برنامه نویس قرار بگیره
علی(مدیریت)
سلام
ممنون از پیشنهادتون در حال حاضر سرویس لیارا بدون هیچ مشکلی از API میزبانی میکنه و در دسترس تمامی کاربران دوره هم قرار گرفته. ولی سرویس هم که شما پیشنهاد دادین میتونه یکی از گزینه هایی باشه که در آینده مورد استفاده قرار می گیره
مهراد
سلام
تو این دوره در نهایت اموزش خروجی گرفتن برای ios و اندروید ارائه میشه؟ یعنی اپ که طراحی میشه برای هر دو پلتفرم هست؟؟
مهدی(مدیریت)
سلام
کدهای برای هر دو پلتفرم مشترک است و تفاوت خاصی وجود نداره مگر در نصب بعضی کتابخانه های native
در طول دوره بر روی ios کدها تست نشده
mamalli
سرویس لیارا چرا فریز شده
مهدی(مدیریت)
سلام
اعتبار حساب تمام شده بود که مشکل برطرف شد
mohammadardehe
سلام
فصل چهارم،قسمت 8 رو طبق آموزش پیش رفتم اسلایدر رو به عنوان props برای کامپیوننت اسلایدر میفرستم ولی وقتی روش مپ میزنم که عکس ها رو نشون مینویسه image undifine
مهدی(مدیریت)
سلام
شما قبل از map چک کنید که آیا props وجود داره یا نه
به شکل زیر
images ? images.map() : null
mohammadardehe
از props ها کنسول میگیرم نشون میده ولی وقتی مپ میزنم همون ارور undifine رو نشون میده،مو به مو طبق آموزشم پیش رفتم ولی بازم ارورش برطرف نشد
مهدی(مدیریت)
توی console نمایش میده
ولی اگر میخواین map انجام بدید حتما چک کنید که مقدار وجود داره یا نه.
میتونید از source code هم این مورد رو بررسی کنید
mohammadardehe
خیلی ممنون
مهدی(مدیریت)
خواهش میکنم
مهدی
سلام
میزان سازگاری این دوره با اخرین نسخه react و mongodb و nodejs چقدره
با تشکر
مهدی(مدیریت)
سلام
به طوری کلی محتوای آموزش داده شده در این دوره به گونه ای است که وابسته به نسخه های کتابخونه و فریمورک نباشه
ولی در این دوره از ورژن های زیر استفاده شده است
“react”: “^16.8.6”,
“react-native”: “0.60.5”,
“express”: “^4.17.1”,
“graphql”: “^14.5.8”,
mamalli
سلام خسته نباشید
من هر کاری میکنم این خطا را میده حتا از سورس داخل دوره هم که استفاده میکنم بازهم این خطا را میده توی دوره اشاره ای برای رافع این خطا گفته شده من هم دقیقا همون کار را انجام میدم ولی خطا نمیره
TypeError: Cannot read property ‘dispatch’ of undefined
مهدی(مدیریت)
سلام
در کدوم فصل و کدوم قسمت این مشکل رو دارید
mamalli
فصل ۳ قسمت های ساخت صفحه login توی react
مهدی(مدیریت)
dispatch زو در value قرار دادید تا کامپوننت های درون AuthContext.Provider بهش دسترسی داشته باشند؟
مهدی(مدیریت)
میتونید کد خودتون رو با source code مقایسه کنید به طور حتم یک جایی رو اشتباه می کنید