پرووید
آموزش ساخت وب اپلیکیشن با ASP.NET MVC و React
آموزش ساخت وب اپلیکیشن با ASP.NET MVC و React یکی دیگر از آموزش های گروه آموزشی پرووید می باشد که در این قسمت آن را به شما معرفی می کنیم. این بسته ی آموزشی نیز یکی از دوره های آموزشی دیگر که در حوزه ی فارسی سازی آموزش های انگلیسی تنظیم شده است می باشد. عنوان این بسته ی ساخت وب اپلیکیشن با ASP.NET MVC 5 و React است که با نام اصلی Building React and ASP.NET MVC 5 Applications از شرکت Linkedin منتشر شده است.
ASP.NET MVC چیست؟
ASP.NET MVC یکی از فریم ورک های ارائه شده توسط مایکروسافت برای توسعه نرم افزارهای تحت وب است. ASP.NET MVC نسبت به فریم ورک پیشین یعنی ASP.NET Web Forms برتری های بسیاری دارد که همین موضوع باعث محبوب شدن آن شده است. یادگیری ASP.NET MVC برای آن دسته از دوستانی که سابقه ی کار کردن با ASP.NET Web Forms را دارند ممکن است کمی دشوار باشد. دلیل این موضوع نبودن بعضی از قابلیت های معمول ASP.NET Web Forms در ASP.NET MVC است.
برای مثال، در ASP.NET MVC از Session خبری نیست. به علاوه، کنترل های سمت سرور (Server Controls) ی که در ASP.NET Web Forms به راحتی مورد استفاده قرار میگرفتند موجود نمی باشند.
React.js چیست؟
React یک Libarary متن باز و البته رایگان جاوا اسکریپت برای طراحی رابط کاربری است. این کتابخانه جاوا اسکریپت در ماه مه سال ۲۰۱۳ به صورت عمومی منتشر شد. جالب است بدانید که این فریم ورک در ابتدا توسط یکی از مهندسین فعال در فیسبوک به وجود آمد. آقای جردن واک در سال ۲۰۱۱ این فریم ورک را تحت تاثیر XHP که یک کامپوننت HTML برای زبان برنامه نویسی PHP است، ایجاد کرد. در همین سال React روی قسمت News Feed شبکه اجتماعی فیسبوک به کار گرفته شد و ۲ سال بعد، یعنی در سال ۲۰۱۳ هم استفاده از آن توسط فیسبوک به اینستاگرام تعمیم پیدا کرد.
نکته مهم در کاربرد React این است که این کتابخانه صرفاً در الگوی طراحی MVC، عهده دار بخش View است. View یا اینترفیس در واقع مرتبط با نمایش اجزا هستند و طبعاً React به جای پرداختن به الگوی MVC به وظایفی می پردازد که مربوط به نمایش اجزا می پردازد. از دیگر کاربردهای React استفاده در طراحی و ایجاد سایت تک صفحه‌ای است.
طراحی یک برنامه Full-Stack با React، TypeScript و ASP.NET MVC 5
در آموزش Building React and ASP.NET MVC 5 Applications، توسعه رابط کاربری و منطق سمت سرور در قالب یک برنامه Full-Stack دنبال می‌شود. بخش Back End با تعریف Data Modelها برای Entity Framework و ایجاد Controllerها و Action Methodهای موردنیاز صفحات شروع می‌شود؛ سپس یک Service API برای دسترسی به داده‌ها شکل می‌گیرد. این ساختار به شما نشان می‌دهد چگونه می‌توان مسئولیت نمایش صفحات را از ارائه داده‌ها جدا کرد. در ادامه، راه‌اندازی TypeScript، IntelliSense و webpack زمینه لازم برای توسعه بخش React را در کنار ابزارهای اکوسیستم فرانت‌اند فراهم می‌کند.
پس از آماده‌سازی زیرساخت، تمرکز به ساخت React Componentهایی منتقل می‌شود که داده‌ها را از برنامه دریافت و نمایش می‌دهند. در نمونه‌های آموزشی، قابلیت خواندن رکوردها و اضافه کردن سبد خرید پیاده‌سازی می‌شود و مدیریت Eventهای عناصر React نیز مورد توجه قرار می‌گیرد. این مسیر برای توسعه‌دهندگانی مناسب است که می‌خواهند ارتباط میان یک برنامه مبتنی بر ASP.NET MVC 5 و رابط کاربری React را در یک سناریوی کامل‌تر ببینند. همچنین بررسی Type Definitionها و تنظیمات مرتبط، درک بهتری از استفاده TypeScript برای توسعه ساختاریافته‌تر کامپوننت‌ها ارائه می‌دهد.
چگونه API را ایمن و رابط کاربری را قابل‌آزمایش کنیم؟
در یک برنامه Full-Stack، پیاده‌سازی قابلیت‌ها زمانی کامل‌تر می‌شود که دسترسی به داده‌ها و رفتارهای حساس نیز بررسی شوند. این آموزش به ایمن‌سازی API، اشکال‌زدایی و تست اختصاص دارد و نمونه‌هایی از آزمودن قابلیت ثبت‌نام و ورود کاربران را در بر می‌گیرد. ایجاد Action Method برای خواندن رکوردها با قالب JSON نیز نشان می‌دهد چگونه داده‌های سمت سرور می‌توانند برای مصرف رابط کاربری ارائه شوند. این مباحث به توسعه‌دهنده کمک می‌کنند ارتباط میان احراز هویت، نقاط دسترسی برنامه و عملیات سمت کاربر را در کنار یکدیگر بررسی کند.
در بخش فرانت‌اند، یکی از موضوعات عملی، بررسی و رفع مشکلات سازگاری React با Visual Studio است؛ موضوعی که هنگام ترکیب ابزارهای مختلف در یک پروژه واقعی اهمیت پیدا می‌کند. آموزش همچنین پیاده‌سازی رابط کاربری Responsive و سازگار با دستگاه‌های موبایل را پوشش می‌دهد تا نمایش برنامه به صفحه‌نمایش دسکتاپ محدود نماند. کنار هم قرار گرفتن API، React Componentها، مدیریت رویدادها و تست، تصویری از چرخه توسعه یک وب‌اپلیکیشن ارائه می‌کند. این آموزش به‌ویژه برای توسعه‌دهندگان آشنا با مبانی وب مناسب است که می‌خواهند این فناوری‌ها را در یک راهکار یکپارچه به کار بگیرند.
سرفصل مطالب آموزش ویدئویی ساخت وب اپلیکیشن با ASP.NET MVC و React
فصل اول: مقدمه
- قدرت React و ASP.NET MVC پیش نیازهای این بسته ی آموزشی راه اندازی محیط توسعه
فصل دوم: درباره ی ASP.NET MVC 5 و React
- مروری بر ASP.NET MVC و React و Full-stack Development
- چرا باید از React و ASP.NET MVC استفاده کرد؟
- بررسی برنامه ای که خواهیم ساخت
فصل سوم: ساختن Back End
- Scaffold کردن یک پروژه با ASP.NET MVC
- اضافه کردن Data Model ها برای Entity Framework
- اضافه کردن Entity Framework DbContext
- ساختن Action Method ها و Controller ها برای UI Page ها
- اضافه کردن View های Register و Log in
- تست کردن قابلیت Register کردن و Log in کردن
فصل چهارم: راه اندازی یک Service API برای داده ها
- اضافه کردن یک REST API Controller
- اضافه کردن یک Action Method برای خواندن رکوردها با فرمت JSON
- اضافه کردن یک Action Method برای ساختن رکوردها
فصل پنجم: راه اندازی TypeScript و IntelliSense و webpack
- بررسی و حل مشکل React و ویژوال استادیو
- راه اندازی Webpack و TypeScript و پیکربندی های لازم
- راه اندازی React و Type Definition ها و پیکربندی ها
فصل ششم: ساختن Front End با React
- اضافه کردن یک Data Model و State Class ها برای React
- اضافه کردن یک React Component برای خواندن داده ها
- رندر کردن داده ها در قالب یک Grid
- اضافه کردن قابلیت سبد خرید با React
- اضافه کردن قابلیت سبد خرید با React - ادامه
- هندل کردن Event های Element های React
- اضافه کردن React Form Component برای Submit کردن داده ها
- انجام قابلیت های Responsive UI و سازگاری با Mobile
فصل هفتم: ایمن سازی API
- درک کردن نقاط آسیب پذیری API ایمن سازی API با AuthorizeAttribute
فصل هشتم: Debug کردن و Test کردن
- Debug کردن Front End و Back End تست کردن و کامل کردن پروژه
فصل نهم: جمع بندی
- قدم های بعدی
