بسم الله الرحمن الرحیم

  این دوره آموزشی دارای پیش نیاز می باشد، برای مطالعه پیش نیاز این دوره لطفا مقاله "آموزش WebApi" مطالعه کنید.

آموزش برنامه نویسی

بسم الله الرحمن الرحیم

 آموزش WebApi

  این دوره آموزشی مقدماتی می باشد، برای مطالعه سایر مقالات این دوره

آموزش برنامه نویسی

بسم الله الرحمن الرحیم

بخش اول معرفی دوره

در این دوره آموزشی قصد داریم یک پروژه را با استفاده ASP.NET MVC & Web API و همچنین Angular پیاده سازی کنیم.

از این رو آموزش هایی برای این معماری ها قبلا ارائه گردیده است که شما می بایست ابتدا این آموزش ها را مطالعه نمایید تا بتوانیم به سراغ مباحث مربوط به این دوره برویم، پس اگر با این معماری ها آشنایی کاملی ندارید ابتدا از طریق لینک های زیر آموزش های پیش نیاز این دوره را بررسی و مطالعه کنید و سپس به سراغ این آموزش بیاید.

بخش اول آموزش Angular و  ASP.NET Web API

بخش دوم آموزش Angular و  ASP.NET Web API

بخش سوم آموزش Angular و  ASP.NET Web API

 آموزش Angular

 آموزش Web API

و در نهایت دوره آموزش Angular و  ASP.NET Web API

در برنامه های وب سنتی، client (که معمولا یک مرورگر{browser} است) ارتباط خود را با سرور با ارسال یک درخواست برای صفحه ای خاص آغاز می کند. سرور درخواست ارسالی را بررسی و پردازش می کند و سپس صفحه HTML مربوطه را برای کلاینت ارسال می کند. در ادامه این فرایند ممکن است کاربر (Client) مجددا بر روی یک لینک کلیک کند یا یک فرم اطلاعاتی را برای سرور ارسال کند، با این کار، فرایند بررسی و ارسال پاسخ در سرور مجددا آغاز می شود و یک صفحه جدید برای کاربر ارسال می شود.

در یک Single-Page Applications (SPA) با ارسال اولین درخواست تمام صفحه در مرورگر لود می شود، اما پس از این مرحله دیگر تمامی اطلاعات ارسال و دریافت نمی شوند بلکه تعامل از طریق ارسال درخواست به روش Ajax ادامه می یابد.این فرایند باعث می شود که تنها بخشی از صفحه که نیاز است تغییر داده شود، پس نیازی به لود شدن تمامی صفحه نیست. روش SPA باعث می شود زمان انتظار کاربر برای دریافت پاسخ کاهش داده شود، در نتیجه منابع بهتر مورد استفاده قرار خواهند گرفت.

معماری SPA شامل رقابت های خاص خود می باشد که در برنامه های وب سنتی این موارد وجود ندارد، اما تکنولوژی های در حال ظهوری مانند ASP.NET Web API، JavaScript framework هایی مانند AngularJS و روش های استایل دهی که به وسیله CSS3 فراهم شده است، طراحی و ساخت برنامه های SPA را ساده کرده است.

در این بخش ما یک برنامه SPA را برای یک پرسش و پاسخ ساده ایجاد می کنیم. در این برنامه ابتدا فرایند انجام پرسش و پاسخ را به وسیله ASP.NET Web API ایجاد می کنیم و سپس با استفاده ازAngularJS  و  CSS3برنامه خود را طراحی و قابلیت responsive UI را به آن اضافه می کنیم.

بسم الله الرحمن الرحیم

  این دوره آموزشی دارای پیش نیاز می باشد، برای مطالعه پیش نیاز این دوره لطفا مقاله "آموزش WebApi" مطالعه کنید.

 مشاهده تمامی آموزش های دوره آموزش Web API

بخش اول این مقاله را می توانید از طریق این لینک مطالعه بفرمایید

آموزش  Web API– سطح پیشرفته

     بخش دوم – آموزش Web API و  ASP.NET MVC و RESTfull و در نهایت backbonejs

آموزش  Web API

این کد از شی های IReviewRepository و ICategoriesRepository برای انجام اقدامات مناسب بر اساس درخواست صورت گرفته استفاده می کند(برای درخواست های GET اطلاعات را دریافت می کند و برای درخواست های POST اطلاعات را اضافه می کند). این respositorie ها توسط Ninject در Constructor Injection تزریق می شوند.

 

توجه داشته باشید برخی از متدها data type های متفاوتی را برمی گردانند (return). WebAPI اجازه می دهد که شما نوع های داده ای non-string (مانند IEnumerable<Review>) را برگردانید، WebAPI برای ارسال، اطلاعات را به صورت اشیا serialize تبدیل خواهد کرد. شما همچنین می توانید از کلاس HttpResonseMessage بک HTTP status code  مشخص، در زمان بازیابی اطلاعات بر می گرداند. یکی از روش های ایجاد یک شی از HttpResponseMessage فراخوانی Request.CreateResponse(responseCode, data) می باشد.

ما می توانیم وضعیت صحت برنامه خود را توسط ابزارهایی همچون Fiddler2 بررسی کنیم.

اگر تا کنون Fiddler را نصب نکرده اید این ابزار را نصب کنید، حتی اگر .NET developer نیستید باز این ابزار بسیار می تواند به شما کمک دهد. Fiddler یک ابزار خارق العاده برای HTTP debugging می باشد.

حال Fiddler را اجرا کنید و بر روی RequestBuilder کلیک کنید و سپس آدرس API URL ایی که می خواهید آن را تست کنید، وارد نمایید. نوع درخواست (request) خود را انتخاب کنید. اگر یک درخواست POST ایجاد می کنید، مطمئن شوید header شما Content-Type: application/json باشد سپس یک ساختار معتبر JSON درون بخش request body قرار دهید.

تصویر زیر نحوه ارسال یک درخواست POST به api/reviews را نمایش می دهد.

بسم الله الرحمن الرحیم

  این دوره آموزشی دارای پیش نیاز می باشد، برای مطالعه پیش نیاز این دوره لطفا مقاله "آموزش WebApi" مطالعه کنید.

 مشاهده تمامی آموزش های دوره آموزش Web API

آموزش  Web API– سطح متوسط

     بخش اول– معرفی دوره

بخش اول آموزش Web API

بخش دوم آموزش Web API

بخش سوم آموزش Web API

آموزش  Web API

در سال های اخیر این مطلب روشن شده است که HTTP فقط برای خدمت به صفحات HTML نیست. HTTP همچنین با استفاده از تعداد اندکی از افعال (منظورمان 4 متد اصلی Web API یعنی GET, POST, PUT, DELETE می باشد.) به علاوه مفاهیم ساده ای همچون URI و  headerها، یک platform قدرتمند برای ساخت Web API ها می باشد.

بسم الله الرحمن الرحیم

  این دوره آموزشی دارای پیش نیاز می باشد، برای مطالعه پیش نیاز این دوره لطفا مقاله "آموزش WebApi" مطالعه کنید.

 مشاهده تمامی آموزش های دوره آموزش Web API

آموزش  Web API– سطح متوسط

     بخش دوم– ساخت یک Read-Only Web API

آموزش (Web API  (REST

آموزش ساخت Read-Only Web API

بخش اول آموزش Web API

بخش دوم آموزش Web API

بخش سوم آموزش Web API

در این بخش پیاده سازی متدread-only GET  را برای برنامه مدیریت تماس خود انشالله انجام خواهید داد.
 

ساخت API Project

در این بخش شما از template هایASP.NET web project  برای ایجاد یک Web API web application استفاده خواهید کرد. برای شروع Visual Studio خود را باز کنید.

در این آموزش از 2012 Visual Studio استفاده کرده ایم. اما اگر از نسخه های بالاتر که در حال حاضر 2013 است و احتمالا نسخه های جدید تر این IDE که به زودی ارائه خواهد شد استفاده می کنید نگران نباشید، اصول و مفاهیم یکی خواهد بود حتی اگر vNext از راه برسد.
 برای مطالعه در خصوص vNext از این مطلب که قبلا نوشته شده است، استفاده کنید. مطالعه آن خالی از لطف نخواهد بود.
اگر روش مورد استفاده در نسخه های جدید Visual Studio با این آموزش متفاوت شده است، طبیعتا منو ها و آیتم تغییر کرده اند و کلیت کار عوض نخواهد شد پس با کمی تغییر می توانید این آموزش را به پایان برسانید.


از منوی File گزینه New Project را انتخاب کنید. از بخش Visual C# و Web نوع پروژه را مشخص کنید. از بخش سمت راست گزینه ASP.NET MVC 4 Web Application را انتخاب کنید. نام پروژه را ContactManager وSolution name  را Begin قرار دهید و سپس Ok کنید.

بسم الله الرحمن الرحیم

  این دوره آموزشی دارای پیش نیاز می باشد، برای مطالعه پیش نیاز این دوره لطفا مقاله "آموزش WebApi" مطالعه کنید.

 مشاهده تمامی آموزش های دوره آموزش Web API

آموزش  Web API– سطح متوسط

     بخش سوم– ساخت یک (Web API  (REST

آموزش (Web API  (REST

آموزش ساخت Read/Write Web API

بخش اول آموزش Web API

بخش دوم آموزش Web API

بخش سوم آموزش Web API

در این بخش شما متدهایPOST  و PUT را فرا خواهید گرفت و آنها را به همراه ویژگی ویرایش اطلاعات به برنامه خود اضافه خواهیم کرد.

پروژه Web API مراحل قبل را باز کنید. فایل Services/ContactRepository.cs را باز کنید.
 Adding Data-Persistence Features to the Contact Repository Implementation

در این مرحله به پیاده سازی Contact Repository خود ویژگی نگهداری اطلاعات و یا Data-Persistence اضافه خواهیم کرد.
کلاس ContactRepository را به پروژه Web API مرحله قبل اضافه خواهیم کرد. این کار باعث خواهد شد داده ها ارسالی دریافت و یک شی جدید ایجاد شود.

به کلاس ContactRepository یک constant به صورت زیر برای نمایش کلید یا نام cache وب سرور اضافه کنید. این ثابت برای بخش های بعدی مورد نیاز است.

private const string CacheKey = "ContactStore";

تابع سازنده زیر را برای کلاس ContactRepository ایجاد کنید.

public ContactRepository()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        if (ctx.Cache[CacheKey] == null)
        {
            var contacts = new Contact[]
            {
                new Contact
                {
                    Id = 1, Name = "Glenn Block"
                },
                new Contact
                {
                    Id = 2, Name = "Dan Roth"
                }
            };

            ctx.Cache[CacheKey] = contacts;
        }
    }
}

کد متد GetAllContacts را به صورت زیر تغییر دهید.

بسم الله الرحمن الرحیم

بخش اول آموزش Angular و  ASP.NET Web API

بخش دوم آموزش Angular و  ASP.NET Web API

بخش سوم آموزش Angular و  ASP.NET Web API

بخش  دوم ساخت پروژه

در این دوره آموزشی قصد داریم یک پروژه را با استفاده ASP.NET MVC & Web API و همچنین Angular پیاده سازی کنیم.

از این رو آموزش هایی برای این معماری ها قبلا ارائه گردیده است که شما می بایست ابتدا این آموزش ها را مطالعه نمایید تا بتوانیم به سراغ مباحث مربوط به این دوره برویم، پس اگر با این معماری ها آشنایی کاملی ندارید ابتدا از طریق لینک های زیر آموزش های پیش نیاز این دوره را بررسی و مطالعه کنید و سپس به سراغ این آموزش بیاید.

 آموزش Angular

 آموزش Web API

و در نهایت دوره آموزش Angular و  ASP.NET Web API

کدهای این دوره را در پایین همین صفحه قرار داده ام

شروع ساخت پروژه در Visual Studio 2013

از منوی File گزینه New Project را انتخاب کنید. از پنجره باز شده در سمت چپ گزینه Visual C# | Web را انتخاب و سپس از بخش سمت راست .NET Web Application را با .NET Framework 4.5 انتخاب کنید. نام پروژه را GeekQuiz انتخاب و سپس Ok کنید.

بسم الله الرحمن الرحیم

بخش اول آموزش Angular و  ASP.NET Web API

بخش دوم آموزش Angular و  ASP.NET Web API

بخش سوم آموزش Angular و  ASP.NET Web API

بخش  سوم ساخت پروژه و اضافه کردن Angular به پروژه

در این دوره آموزشی قصد داریم یک پروژه را با استفاده ASP.NET MVC & Web API و همچنین Angular پیاده سازی کنیم.

از این رو آموزش هایی برای این معماری ها قبلا ارائه گردیده است که شما می بایست ابتدا این آموزش ها را مطالعه نمایید تا بتوانیم به سراغ مباحث مربوط به این دوره برویم، پس اگر با این معماری ها آشنایی کاملی ندارید ابتدا از طریق لینک های زیر آموزش های پیش نیاز این دوره را بررسی و مطالعه کنید و سپس به سراغ این آموزش بیاید.

 آموزش Angular

 آموزش Web API

و در نهایت دوره آموزش Angular و  ASP.NET Web API

کدهای این دوره را در پایین همین صفحه قرار داده ام

در بخش قبل کدهای مربوط به Web API را با هم بررسی کردیم در این بخش انشالله کدهای مربوط به Angular را با هم بررسی خواهیم کرد و آموزش مربوط به این دوره را به پایان خواهیم رساند.
در این بخش ابتدا بر روی کدهای مربوط به Angular تمرکز خواهیم کرد و سپس با کدهای CSS3 وب سایت خود را زیبا می کنیم.

Angular یک open-source JavaScript framework است که با استفاده از آن می توانیم برنامه های خود را به صورت Model-View-Controller (MVC) توسعه دهیم تا فرایند تست و توسعه آن ساده تر شود. در خصوص مباحث Angular دوره کاملی را در همین بلاگ بیان کردیم اگر نیاز به آموزش این مفاهیم دارید لطفا دوره زیر را بررسی کنید
 

دوره آموزشی Angular

ما باید ابتدا توسط Package Manager Console در Visual Studio فایل های مربوط به AngularJS را به پروژه خود اضافه کنیم و سپس کنترلر مربوطه خود را اضافه کنیم تا توسط آن اطلاعات مربوط به پاسخ ها و سوالات را بررسی کنیم.
خوب Visual Studio خود را باز کنید و کدهای مربوط به این آموزش که در پایین همین صفحه برای دانلود قرار داده شده است را دانلود کنید و سپس کدهای درون پوشه Begin را باز کنید همچنین شما می توانید با کدهایی که در مرحله گذشته با یکدگیر ایجاد کردیم را در این بخش از آموزش نیز استفاده کنید. همچنین اگر در بخش قبل کدها را دانلود کرده اید نیازی به دانلود مجدد نیست زیرا در فایل دانلود شده دو پوشه وجود دارد یکی با نام End که در آموزش قبل با آن کار کردیم و دیگری Begin که در این آموزش بر روی آن کار خواهیم کرد.

از منوی Tools | Library Package Manager گزینه Package Manager Console را انتخاب کنید و سپس دستور زیر را برای نصب AngularJS.Core NuGet package به صورت زیر اجرا کنید.

Install-Package AngularJS.Core