حالت مطالعه
در این دوره آموزشی با استفاده از تکنولوژی های react native، react، nodejs، mongodb و graphql یک اپلیکیشن فروشگاهی مشابه دی جی کالا (react native) به همراه پنل مدیریت (react) و API برای اتصال به سرور (nodejs ، mongodb و graphql) توسعه خواهیم داد.
هدف ما در reactapp از همان ابتدا ارائه آموزش های کاربردی و تخصصی در حوزه جاوااسکریپت برای ورود به بازار کار بوده است. با توجه به درخواست شما کاربران عزیز و لزوم وجود چنین دوره ای، تصمیم بر آماده سازی این دوره گرفتیم تا شما با آمادگی کامل به عنوان یک full-stack developer وارد بازار کار شوید.
هدیه ویژه برای کاربران این دوره :
در پایان این دوره پروژه بر روی سرویس لیارا آپلود خواهد شد. به همین منظور برای تمامی کاربرانی که این دوره را از سایت 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. فارسی سازی قالب و بررسی route ها
4. طراحی صفحه ورود به پنل مدیریت
5.استفاده از captcha گوگل و ارتباط با API
6.طراحی فرم آپلود فایل
7. اضافه کردن ویژگی drag و drop برای آپلود فایل
8. بررسی نوع، حجم و تعداد فایل ها
9. ارتباط با API و آپلود فایل ها بر روی سرور
10. طراحی صفحه نمایش فایل های آپلود شده
11. ارتباط با API و نمایش فایل ها
12. اضافه کردن Modal برای نمایش هر فایل به همراه جزئیات (نام،نوع،ابعاد،تاریخ ایجاد)
12. اضافه کردن Modal برای نمایش هر فایل به همراه جزئیات (نام،نوع،ابعاد،تاریخ ایجاد)
13. طراحی فرم اضافه کردن Category
14. اتصال به API و اضافه کردن Category
15. نمایش Category ها
16. طراحی فرم اضافه کردن برند
17. نمایش برندها
18. طراحی فرم نحوه امتیاز دهی به محصولات
19. نمایش معیار های امتیاز دهی
20. طراحی فرم اضافه کردن عنوان اصلی مشخصات برای هر Category
21. نمایش عناوین اصلی مشخصات
22. طراحی فرم اضافه کردن زیرعنوان برای عنوان های اصلی
23. نمایش زیرعنوان ها
24. طراحی فرم اضافه کردن فروشنده
25. نمایش فروشنده ها
26. طراحی فرم اضافه کردن گارانتی
27. نمایش گارانتی ها
28. طراحی فرم اضافه کردن محصول
29. ثبت محصول جدید
30. نمایش محصولات
31. اضافه کردن فروشنده جدید به محصول
32. نمایش فروشندگان محصول
33. ویرایش محصول
34. نمایش عکس های یک محصول و اضافه کردن عکس جدید
35. طراحی فرم اضافه کردن وضعیت سفارش
36. نمایش وضعیت سفارشات
37. نمایش سفارشات
38. تغییر وضعیت هر سفارش
39. نمایش جزئیات سفارش
40. نمایش اطلاعات کاربران
41. نمایش سفارشات هر کاربر
42. نمایش نظرات هر کاربر
43. نمایش لیست علاقه مندی های هر کاربر
44. نمایش نظرات
45. تغییر وضعیت هر نظر
46. نمایش نظرات با جزئیات کامل
47. طراحی فرم اضافه کردن اسلایدر
48. نمایش اسلایدر ها
49. ویرایش اسلایدر
50. حذف اسلایدر
51. طراحی فرم اضافه کردن بنر
52. نمایش بنرها
53. ویرایش بنر
54. نمایش تعداد کاربران به تفکیک ماه در داشبورد
55. نمایش تعداد سفارشات به تفکیک ماه در داشبورد
56. نمایش تعداد محصولات به تفکیک ماه در داشبورد
57. نمایش تعدادنظرات به تفکیک ماه در داشبورد
58. نمایش تعدادسفارشات لغو شده به تفکیک ماه در داشبورد
59. نمایش تعدادفروشندگان به تفکیک ماه در داشبورد
60. نمایش نمودار پرداختی های 10 روز گذشته در داشبورد
61. نمایش نمودار وضعیت سفارشات در داشبورد
62. نمایش نمودار تعداد کاربران به تکیک ماه در داشبورد
63. نمایش نمودار تعداد پرداختی های 10 روز گذشته
64. نمایش درصد کاربران زن و مرد در داشبورد
فصل چهارم : اتصال اپلیکشن به API
0. معرفی فصل چهارم
1. اتصال به API و گرفتن اطلاعات مربوط به صفحه اصلی
1. ارسال اطلاعات دریافتی از API به کامپوننت Slider و نمایش آن
2. ارسال اطلاعات دریافتی از API به کامپوننت Category و نمایش آن
3. ارسال اطلاعات دریافتی از API به کامپوننت Suggestion Product و نمایش آن
4. ارسال اطلاعات دریافتی از API به کامپوننت Banners و نمایش آن
5. ارسال اطلاعات دریافتی از API به کامپوننت Top Selling Productsو نمایش آن
6. ارسال اطلاعات دریافتی از API به کامپوننت new Products و نمایش آن
7. اتصال به API برای گرفتن اطلاعات product و نمایش آن
8. اتصال به API برای گرفتن مشخصاتproduct و نمایش آن
9. اتصال به API برای گرفتن نظرات product و نمایش آن
10. اتصال به API برای ثبت نظر برای product
11. اتصال به API برای login و ذخیره token به وسیله context
12. اتصال به API برای SignUp
13. اتصال به API برای اعتبار سنجی کد پیامکی دریافت شده
14. نمایش زیر دسته های هر Category
15. نمایش محصولات هر category
16.افزودن محصول به لیست مورد علاقه
17. استفاده از Context برای افزودن محصولات به سبد خرید
18.افزودن محصول به سبد خرید
19.حذف محصول از سبد خرید
20. بررسی وضعیت login کاربر برای ثبت سفارش
21. طراحی فرم تکمیل اطلاعات سفارش
22. استفاده از regex برای تعیین وضعیت پرداخت(موفق یا عدم موفقیت عملیات پرداخت)
22. استفاده از webView برای اتصال به درگاه پرداخت
برچسب: آموزش GraphQl آموزش mern آموزش mongodb آموزش node js آموزش react آموزش react native آموزش پروژه محور react آموزش پروژه محور react native
moreدوره های مرتبط
آموزش ReactJs ورژن 16
سلام دوستان.در این دوره قصد داریم ReactJs رو به شما آموزش بدیم.ReactJs اساسا یک کتابخانه open-source جاوا اسکریپته که برای ایجاد رابط…
3,325
رایگان!
آموزش Redux
اگر برنامه نویسی با React Native رو شروع کردید حتما اسم Redux رو شنیدید و به احتمال زیاد این سوال…
83
25,000 تومان
ارسال نوتیفیکیشن در React Native
پیاده سازی پوش نوتیفیکیشن(Push Notification) در React Native جزء اون دسته آموزش هایی بود که درخواست زیادی داشت ، به همین دلیل…
528
رایگان!
فرید امیری زاده
با سلام در فصل یک قسمت 15 دقیقه 11 اموزش دهنده به یه باگ اشاره میکنه که وقتی روی دکمه شیر میزنیم یه لکه سیاه ایجاد میشه متاسفانه این مشکل ناکس نیس و در گوشی و شبیه ساز های دیگه ام این مشکل وجود داره اگه میشه اموزش برطرف کردنشو بزارید
مهدی(مدیریت)
با سلام.من کدهایی که استاد تو این فصل استفاده کرده رو ندیدم
به احتمال خیلی زیاد این مشکل مربوط به react native میشه.چون باکس share توسط خود react native باز میشه.
https://reactnative.dev/docs/share
mohammadardehe
سلام
در فصل 3 پارت 13 شما از mutation addmultimedia استفاده کردید.تو پلی گراند graphql همچین چیزی نیست.
مهدی(مدیریت)
سلام.
منظورتون رو متوجه نمیشم.یعنی query که استفاده کردم کار نمیکنه؟؟
یا تو فصل 2 این موضوع بیان نشده؟
mohammadardehe
query که استفاده کردید کار نمیکنه
مهدی(مدیریت)
چه پیغامی بهتون میده؟
query رو از سورس کد کپی کنید و استفاده کنید نباید مشکلی وجود داشته باشه .چون کار میکرده همونطور که در ویدئو مشخصه
mohammadardehe
سلام
من سورس فصل سوم رو دانلود کردم و تمام پیش نیازاشو نصب کردم
وقتی وارد پنل میشم عکسارو به درستی نشون نمیده.
http://s14.picofile.com/file/8408545392/Capture.PNG
مهدی(مدیریت)
سلام
متغیر REACT_APP_PUBLIC_URI رو در فایل .env
set کردید؟
و در تگ img قبل از آدرس برگشتی از سرور آیا این متغیر رو قرار دادید
mohammadardehe
سلام
کوئری ها رو کپی کردم ولی باز متاسفانه آپلود نشد
این ارور رو میده “دسترسی شما به اطلاعات مسدود شده است”
مهدی(مدیریت)
سلام
توکن شما منقضی شده.هر توکن 10 ساعت اعتبار داره.لطفا از پنل خارج بشید و مجدد login کنید
daniel_k7
سلام و وقتتون بخیر .
من میخواستم این دوره رو خریداری کنم فقط چند سوال داشتم .
1 – توی این دوره خود nodejs رو هم آموزش میدید یا فقط api رو باهاش میزنید
2 – React رو هم آموزش میدید یا خیر
3 – React native رو هم آموزش میدید یا خیر .
من هدف اصلیم react native هست ولی خب ترجیح میدم react و nodejs رو هم یاد بگیرم .
ممنون میشم توضیح بدید .
مهدی(مدیریت)
سلام وقتتون بخیر
این دوره پیشرفته است و شما باید به موارد گفته شده آشنایی مقدماتی داشته باشید
البته که react native از صفر گفته میشه و میتونید بدون پیش زمینه قبلی دوره رو شروع کنید
البته توجه داشته باشید که باید به جاوا اسکریپت و ES6 مسلط باشید
nafasjafari9898
با سلام من میخوام این دوره رو خریداری کنم ولی مبلغش برای من زیاده کی کد تخفیف میگذارید نمیتونم به صورت اقساط بپردازم؟
مهدی(مدیریت)
با سلام.لطفا از طریق پشتبانی تلگرام در ارتباط باشید
sarekhoshgoftar
سلام ببخشید چرا الان توی آموزش api کوئری MainPageApp رو آموزش نمیدید و بعلاوه چند تا کوئری دیگه.
میخواستم ازتون درخواست کنم کوئری MainPageApp رو برام بفرستید که داشته باشمش چون من هرکاری کردم نتونستم خودم بنویسمش.
ممنون
مهدی(مدیریت)
با سلام.
سورس کد پارت اول در فایل های همون پارت قرار گرفته و شما می تونید از QUERY نوشته شده در سورس استفاده کنید
sarekhoshgoftar
من که نمیدونم تو resolver و schema چه چیزایی نوشتید من اونا رو میخوام.
که اونا هم توی سورس پروژه هاتون نیست
مهدی(مدیریت)
در سورس های پارت اول فصل 4 خود query وجود دارد
sarekhoshgoftar
نیست آقا نیست!!!!
شما خودت یه نگاه کن ببین هست یا نه اگر بود محل اون فایلو بده منم استفاده کنم
الان من هرچی برای api خودم این کد رو میزنم درست نمیشه شما حالا خوبه میخوای یه کد رو کپی کنی و برای من بفرستی
مهدی(مدیریت)
دوست عزیز شما پارت یک فصل 4 رو که دانلود کنید یک فایل زیپ به نام source-10.zip وجود داره که بعد از extract به مسیر src/screen برید و فایل main.js رو باز کنید. query اونجا هست.
همچنین برای پیدا کردنش اگر طبق ویدئو پیش برید می بینید که مدرس داره تو کدوم فایل query رو میزنه.فایل هم دیگه مسیرش مشخصه.اگرم پیدا نمی کنید .من براتون اینجا میزارمش.
query MainPageApp{
MainPageApp{
slider{
image{
_id,
dir
}
},
category{
_id,
name
},
Psuggestion {
_id,
fname,
original,
attribute {
price
discount
suggestion
}
},
banner {
category {
_id,
name
},
image {
dir
}
},
Tselling {
_id,
fname,
original,
attribute {
price
}
},
Nproduct {
_id,
fname,
original,
attribute {
price
}
},
}
}
sarekhoshgoftar
شما میفهمی من دارم چی میگم ؟
میگم کد توی resolver و schema بک اند رو میخوام
علی(مدیریت)
دوست عزیز در فصل سوم و چهارم از API آماده استفاده شده به این جهت که خیلی از دوستان شاید نیازی به مشاهده فصل دوم برای پیاده سازی API نداشته باشن و تنها هدفشون کار با react و react native هست پس اگر شما فصل دوم رو دیده باشین اصلا نیازی به کدهای API مورد استفاده در فصل چهارم ندارید و میتونید از API پیاده سازی شده توسط خودتون در فصل دوم استفاده کنید!!! مفهومی که در فصل سوم و چهارم دنبالش هستیم نحوه ارتباط با API و کار با query در react native هست. در عین حال کدی که مدنظرتون هست به ایمیلتون ارسال میشه!
masood.mehrkesh13777
منقل میشه به صفحه بعد ولی هیچ عکسی رو نشون نمیده
dat.map هم کردم و اون شبیه سازی دیتابیس که خودتون میگفتید ولی عکس رو نشون نمیده
از دیتا عکس رو دریافت میکنه ولی چیزی نشون نمیده
مهدی(مدیریت)
سلام.
مطمئن بشید که ادرس عکس رو به درستی دادید.
برای عکس onPress مشخص کردید ایا؟
وگرنه نباید به صفحه دیگه ای منتقل بشید.
میتونید همچنین از سورس کدی که در فایل های دوره قرار گرفته استفاده کنید