Backend Web-API с C#: пошаговое руководство

Перевод статьи Backend Web API With C#: Step-by-Step Tutorial

Вопрос выбора языка для разработки серверной логики один из наиболее важных вопросов для большинства разработчиков, особенно для начинающих. На данный момент существует множество различных языков программирования: Java, .NET(C#, VD), Ruby, Python, Perl, JavaScript, Go, C++.

Кроме синтаксических особенностей этих языков, есть много других проблем/вопросов, которые необходимо решать, такие как возможность расширения, использование различных типов Баз данных, высоких порог вхождения, требования к отказоустойчивости, огромные объемы данных и т.д.

Какие языки программирования самые популярные? Какой из них Вы должны использовать?

В этом руководстве объясняется, как создать собственный веб-сервер (Web-API) с использованием C# (ASP.NET). Важно отметить, что для размещения вашего сервера вам потребуется хостинг на базе Windows.

Предисловие

Прежде всего, так как мы работаем с C#, используйте Microsoft Visual Studio (на официальном сайте Microsoft можете ее найти).
Также вам необходимо включить IIS (Internet Information Services):
•    Откройте «Панель управления» (в Windows 10), нажмите «Программы», найдите раздел «Программы и компоненты» и нажмите «Включить или отключить функции Windows».
•    Найдите IIS. Нажмите на значок + перед ним, чтобы развернуть под ним все доступные опции. Вы можете найти FTP-сервер, инструменты веб-управления и сервисы World Wide Web. Теперь включите «Инструменты веб-управления». Нажмите OK, и выбранная опция (или опции) будет добавлена в «Переменные среды».

Шаг 1: Создаем новый проект

Откройте Visual Studio и создайте новый проект (File -> New -> Project). Выберите «Installed» шаблоны, выберите Visual C#, затем выберите Web. В списке доступных шаблонов выберите ASP.NET Web-Application (.NET Framework). Назовите ваш проект (для моей демонстрации я поставлю "webapi"), затем нажмите OK.

В следующем модальном окне вы можете выбрать любой подходящий шаблон. Давайте выберем Web API, он подготовит все основные, исходные файлы для проекта. Нажмите ОК.

Готово. Теперь вы можете просматривать созданные папки и файлы в Solution Explorer. Здесь есть конфигурационные файлы приложения, страница справки, несколько контроллеров, шрифты, а также файлы CSS и JS файлы.

Таблица Маршрутизации

По умолчанию сервер использует таблицу маршрутизации, расположенную в App_Start/WebApiConfig.cs

Обратите внимание на routeTemplate: "api/{controller}/{id}", это объясняет маршрутизацию API.
Теперь давайте сделаем простой пример. В этом руководстве мы подготовим API для пользователей, которые являются довольно общими сущность/объект каждой системы.

Добавляем Модель User

Модель представляет пользователя, поэтому мы будем включать различные поля, такие как идентификатор, имя, адрес электронной почты, телефон и роль.

В Обозревателе решений (Solution Explorer) щелкните правой кнопкой мыши папку «Модели», выберите «Добавить», затем выберите «Класс». Затем укажите имя класса: User. Класс модели готов.

Теперь мы просто добавляем все поля, которые решили добавить:

public class User
{
    public int id { get; set; }
    public string name { get; set; }
    public string email { get; set; }
    public string phone { get; set; }
    public int role { get; set; }
}

Добавляем контроллер User

В Web-API контроллер - это объект, который обрабатывает все HTTP-запросы. В Обозревателе решений (Solution Explorer) щелкните правой кнопкой мыши на «Контроллеры». Выберите «Добавить», затем выберите «Контроллер».

В данном диалоговом окне выберите Web API 2 Controller with read/write actions (Web API 2 контроллер с действиями чтения/записи). Назовите контроллер UsersController. Это позволит подготовить контроллер со всеми надлежащими действиями CRUD.

Я подготовил базовый пример с фиктивным списком пользователей:

public class UsersController : ApiController
{
    private User[] users = new User[]
    {
        new User { id = 1, name = "Haleemah Redfern", email = "email1@mail.com", phone = "01111111", role = 1},
        new User { id = 2, name = "Aya Bostock", email = "email2@mail.com", phone = "01111111", role = 1},
        new User { id = 3, name = "Sohail Perez", email = "email3@mail.com", phone = "01111111", role = 1},
        new User { id = 4, name = "Merryn Peck", email = "email4@mail.com", phone = "01111111", role = 2},
        new User { id = 5, name = "Cairon Reynolds", email = "email5@mail.com", phone = "01111111", role = 3}
    };
    // GET: api/Users
    [ResponseType(typeof(IEnumerable))]
    public IEnumerable Get()
    {
        return users;
    }
    // GET: api/Users/5
    public IHttpActionResult Get(int id)
    {
        var product = users.FirstOrDefault((p) => p.id == id);
        if (product == null)
        {
            return NotFound();
        }
        return Ok(product);
    }
...

Шаг 2: Развертывание

Теперь вы можете построить свое решение (Ctrl+Shift+B в Visual Studio). После успешно пройденной сборки, вы можете запустить ее. Нажмите F5, и проект автоматически откроется в вашем браузере на локальном хосте через доступный порт. Скорее всего, вы не захотите, чтобы он постоянно работал в Visual Studio, поэтому было бы лучше сохранить его в качестве службы.

В этом случае мы можем развернуть проект на локальном выделенном сервере, используя IIS (Internet Information Services).

Первое что нужно сделать, откройте IIS, в левой части под разделом «Сайты» - добавьте «Новый сайт» (в панели справа или при щелчке правой кнопкой мыши на «Сайтах»). Введите следующие данные: Имя сайта, "webapi.localhost.net"; Физический путь, где находится ваше решение (например, "C:\projects\webapi"); Привязка - http или https; имя хоста будет таким же, то есть "webapi.localhost.net". Нажмите ОК.

IIS должен запустить службу Web API на webapi.localhost.net.

Если Вы попытаетесь открыть webapi.localhost.net в своем браузере, он не откроет созданный нами проект, поскольку браузер пытается разрешить этот адрес (webapi.localhost.net) как глобальный домен. Чтобы сопоставить это доменное имя с локальным сервером, нам нужно изменить файл hosts (файл локальных хостов). В Windows (v10) файл hosts находится в папке C:\Windows\system32\drivers\etc. Файл не имеет собственного расширения, это файл "hosts".

Скопируйте его в другое место и откройте в редакторе:

Вам нужно добавить следующее в конец этого файла:

# Web API host
127.0.0.1 webapi.localhost.net

Теперь Вам нужно вернуть измененный файл обратно в папку C:\Windows\system32\drivers\etc. Так как эта папка по умолчанию защищена Windows, Вы получите предупреждение об отказе в доступе, поэтому вам необходимо скопировать файл под правами «Администратор».

После обновления файла, webapi.localhost.net должен загрузиться с вашего локального хоста (например, C:\projects\webapi).

Тестирование API

Настало время протестировать методы API, которые мы создали для нашего веб-сервера: api/users and api/users/{id}. Откройте http://webapi.localhost.net/api/users в вашем браузере. В качестве результата должны получить следующее:

Поскольку мы создаем внешний API, который должен быть доступен вне нашей IDE, нам нужно протестировать это. Самый простой способ сделать это - через панель инструментов разработки. Обычно она активируется при нажатии F12. Перейдите на вкладку «Консоль».

Ниже я подготовил два небольших примера, которые вы можете использовать для тестирования API.

Если jQuery доступен, вы можете использовать:

$.ajax({
    type: "GET",
    url: 'http://webapi.localhost.net/api/users',
    success: (data) => {
        console.log(data);
    }
});

В противном случае, используя JavaScript, вы можете применить следующий код:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://webapi.localhost.net/api/users');
xhr.onload = function() {
    console.log(xhr.response);
};
xhr.send();

Вероятно, что вы получите следующую ошибку:

Ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin», поскольку обычные веб-страницы могут использовать объект XMLHttpRequest для отправки и получения данных с удаленных серверов, но они ограничены одной и той же политикой происхождения. Расширения не так ограничены. Расширение может общаться с удаленными серверами за пределами своего источника, если оно сначала запрашивает разрешения между источниками.

Распределение ресурсов между источниками (CORS) - это механизм, который использует дополнительные заголовки HTTP, чтобы сообщить браузеру, что веб-приложение, работающее в одном источнике (домене), имеет разрешение на доступ к выбранным ресурсам с сервера в другом источнике.

Регулировка CORS (Cross-Origin Resource Sharing - "Совместное использование ресурсов между разными источниками")

Чтобы решить эту проблему, нам нужно включить CORS в нашем решении. В Visual Studio откройте консоль управления пакетами (Package Manage Console) (доступно в нижней части экрана, между списком ошибок(Error List) и выводом(Output)). Запустите следующую команду: Install-Package Microsoft.AspNet.WebApi.Cors

Это позволит установить ссылку на WebApi.Cors. Затем откройте файл «App_Start\WebApiConfig.cs». Добавьте config.EnableCors(); перед config.MapHttpAttributeRoutes();

Затем вернитесь в наш UsersController.cs и добавьте [EnableCors(origins: "*", headers: "*", methods: "*")] перед определением класса.

Наконец - перестройте проект снова. Затем попробуйте снова протестировать API; теперь все должно работать.

Я надеюсь, Вам понравилась эта статья, и она оказалась для Вас полезной.