Обучение из облака

Сейчас очень интересно быть веб-разработчиком. Полная задача создания проекта и его развертывания в общедоступной конечной точке является по-настоящему трудной, но когда-то она была устрашающей и, возможно, даже носила запретительный характер. Но сегодня эта задача считается одной из «решенных» проблем.

Располагая очень малыми ресурсами, вы можете скачать бесплатную IDE и средства управления версиями исходного кода. Вы можете приступить к проекту и развернуть его в богатой инфраструктуре, поддерживаемой за вас и не требующей доступа или знания аппаратного обеспечения. Вы можете разместить свой проект в этой инфраструктуре, причем бесплатно на начальном этапе.

Строительные блоки, с которыми мы имели дело, стали куда более впечатляющими — будь то PHP, Java или Microsoft .NET Framework. Теперь мы можем сосредоточиться на пользовательский среде (UX), а не на управлении проектами, поддержке сетей, хранилищах, процедурах развертывания или масштабируемости.

FrontClass — приложение, рассматриваемое в этой статье, — это нечто, что десятилетия назад потребовало бы многих недель работы, если не больше. Было бы трудно добиться его работы во всех средах. Развертывание было бы просто кошмаром. И скорее всего, я не смог бы решить проблему масштабируемости за приемлемое время. Сегодня я могу создать проект и развернуть его за часы; при этом он будет готов к масштабированию. В сопутствующем этой статье полном исходном коде содержится решение, которое можно развернуть, не внося никаких изменений в вашу учетную запись Microsoft Azure.

Я начал работу над FrontClass, когда был волонтером в местной неполной средней школе, обучая программированию детей в возрасте от 10 до 14 лет. Я хотел делиться контентом с учащимися так, чтобы у меня была возможность контроля над темпом его освоения, но при необходимости возвращаться к пройденному материалу. В этом приложении три функциональные области, помогающие преподавателю вести класс: формирование занятия (lesson composition), очное обучение (classroom instruction) и участие учащихся (student participation). Я разобью каждую из этих областей на меньшие, но, естественно, какое-то перекрытие между ними будет.

Основы проекта

Чтобы создать приложение, я использовал Visual Studio 2013 Update 2. Кроме того, при создании решения я выбрал ASP.NET Web Application и шаблон ASP.NET MVC. Проект, созданный по этому шаблону, задействует популярную клиентскую инфраструктуру Bootstrap для применения стилей и некоторой функциональности UI.

Чтобы включить функциональность реального времени, я добавлю пакеты SignalR и буду использовать инструментарий, теперь хорошо известный для Visual Studio. Я также задействую библиотеки jQuery на клиентских страницах. И сконфигурирую Entity Framework (EF) на использование LocalDb по умолчанию в среде разработки, но при развертывании в Azure Web Sites переключусь на Azure SQL Database в качестве хранилища данных. Однако я запускаю весь проект в Azure Portal (portal.azure.com), где могу настроить свою мишень развертывания.

Создание веб-сайта в Azure Web Sites В нижнем левом углу страницы портала щелкните New и выберите шаблон Website + SQL, как показано на рис. 1. Azure создаст набор связанных ресурсов. Выберите подходящее имя для этой группы и присвойте название приложению. Я могу на выбор создать новый сервер баз данных или использовать существующий в моей учетной записи, чтобы создать базу данных для своего сайта. Рекомендуется размещать базу данных и веб-сайт в одном регионе, чтобы сократить трафик и сетевые задержки.

Рис. 1. Создание нового веб-сайта в Azure Web Sites со связанной базой данных

В данном случае я назвал группу ресурсов ELearning, базу данных — FrontClass_DB, а сайт — FrontClass. Вам потребуется выбрать уникальное имя сайта. По окончании подготовки (provisioning) я получил хост-имя frontclass.azurewebsites.net, и моя мишень развертывания готова к хостингу моего сайта.

Несмотря на некие магические пассы, на самом деле здесь нечему удивляться. Я создал DNS-запись, сопоставил хост-имя с IP-адресом и внес некоторые конфигурационные параметры вроде документов и строк подключения по умолчанию. По сути, все эти вещи «закулисно» делались бы в IIS, чтобы ваш сайт можно было запустить. Так что все довольно удобно. Есть также некоторые средства инфраструктурного типа, например для контроля версий исходного кода и развертывания скриптов, что помогает быстро приступить к работе.

Создание решения Затем я переключился в Visual Studio и выбрал ранее упомянутый проект ASP.NET Web Application в качестве базового для решения. При выборе типа проекта и использовании шаблона ASP.NET MVC я также получаю возможности создать связанные ресурсы в Azure. Я уже создал сайт и базу данных через портал, поэтому сбрасываю соответствующий флажок и продолжаю работу над сайтом.

Композиция модулей учебного курса

Область этого проекта позволяет мне поддерживать довольно простую модель данных. С помощью EF6 я создаю модели через Code First, что оставляет дверь открытой для модификаций по ходу работы, используя так называемые миграции данных (data migrations). Конечный результат, приведенный на рис. 2, является простым набором классов, представляющих учебный курс, модуль и структуры этапов.

Рис. 2. Базовая модель данных приложения

Чтобы получить все связи, где требуется, нужно выполнить некоторые формальности. А именно: я хочу использовать одну базу данных, иметь возможность контролировать то, где генерируются миграции, и мне нужно, чтобы мое приложение автоматически выполняло любые незавершенные миграции при его запуске.

Это позволяет мне явным образом контролировать изменения, которые появляются в каждой миграции, и дает возможность приложению обновляться без моего вмешательства. Я также настрою средства для предварительного заполнения базы данных в ролях Administrator и Instructor (лишь эти роли дают административные привилегии) через переопределенный метод Seed класса Configuration.

Задание строки подключения Entity Framework позволяет использовать одну и ту же базу данных с разными контекстами и миграциями при одной строке подключения. Вызывая конструктор базового класса и передавая имя, инфраструктура сначала будет искать конфигурацию приложения или веб-конфигурацию, чтобы узнать, определена ли строка подключения по тому же имени. Если да, для установления соединения будет использоваться эта строка.

История миграция для каждого контекста поддерживается протоколированием пространства имен в процессе обновления. Это помогает моим миграциям выполняться независимо друг от друга. Для этого я добавил конструктор по умолчанию в свой класс контекста:

public FrontClassContext()
  : base("DefaultConnection") { }

Если вы посмотрите на контекст, созданный как часть шаблона проекта в файле IdentityModels.cs, то увидите похожий конструктор по умолчанию. Он немного модифицирован, чтобы отразить природу базового класса IdentityDbContext, но по-прежнему использует строку подключения DefaultConnection из файла Web.Config.

Поддержка миграций Я сгенерировал класс конфигурации для сущностей, созданных командой из Package Manager Console в Visual Studio:

Enable-Migrations -ContextTypeName FrontClass.DAL.FrontClassContext

Это запускает миграции для сущностей, связанных с курсом. Я хочу сдать то же самое и для ApplicationDbContext. Я мог бы выполнить эту команду заново, поменяв имя класса. Однако, включая поддержку конфигурирования, миграций и начальной инициализации в контексте, где хранятся учетные записи, я вовсе не хочу перезаписи ранее сгенерированного класса конфигурации. Вместо этого я указываю альтернативный каталог для миграций, передавая команде параметр MigrationsDirectory:

Enable-Migrations -ContextTypeName FrontClass.Models.ApplicationDbContext -MigrationsDirectory:"Models\AccountMigrations"

Добавление первых миграций Следующий этап — простая генерация классов, которые будут выполняться Entity Framework. Следующую команду я использую дважды — по разу на каждый DbContext, для которого я хочу создать миграцию:

Add-Migration Initial-Model -ConfigurationTypeName FrontClass.Migrations.Configuration
Add-Migration Initial-Model -ConfigurationTypeName FrontClass.Models.AccountMigrations.Configuration

И вновь наличие нескольких контекстов слегка усложняет работу, поскольку вы должны указывать параметр ConfigurationTypeName. В остальном эта операция крайне проста.

Указание стратегии инициализации базы данных Чтобы настроить EF на автоматическое выполнение миграций, мне нужно сообщить, какую стратегию следует использовать до любых обращений к базе данных. Без этого я буду получать сообщения об исключении в период выполнения, указывающие, что моя модель не синхронизирована с базой данных. Каждое изменения в моих классах влияет на вычисляемый хеш модели данных, отслеживаемый базой данных.

В Global.asax я добавил следующие две строки кода, чтобы задействовать инициализатор MigrateDatabaseToLatestVersion:

Database.SetInitializer<ApplicationDbContext>(
  new MigrateDatabaseToLatestVersion
    <ApplicationDbContext,
     FrontClass.Models.AccountMigrations.Configuration>());
Database.SetInitializer<FrontClassContext>(
  new MigrateDatabaseToLatestVersion
    <FrontClassContext, FrontClass.Migrations.Configuration>());

Заметьте, что вызываю обобщенный метод SetInitializer, принимающий контекст, который мне нужно сконфигурировать. В данном случае мои классы конфигурации именуются похоже, поэтому я указал полные имена классов вместе с пространствами имен.

Начальная инициализация таблиц При первом запуске мне нужно обеспечить такую пользовательскую среду, чтобы можно было просто зарегистрироваться и начать работу с приложением. Я мог бы создать разово запускаемый контроллер наподобие того, который вы найдете в популярных приложениях для ведения блогов. Другой вариант — использовать методы Seed в классах конфигурации. Нужный метод передается в экземпляре соответствующего контекста, из которого я могу манипулировать таблицами.

С помощью ASP.NET Identity 2.0 я также получаю богатый набор классов, поддерживающих EF. Это позволяет мне по условию встраивать в базу данных роль и пользователя (рис. 3).

Рис. 3. Инициализация первой роли и пользователя с административными правами

if (!context.Roles.Any(r => r.Name ==
  FrontClass.MvcApplication.AdministratorRoleName))
{
  var roleStore = new RoleStore<IdentityRole>(context);
  var roleManager = new RoleManager<IdentityRole>(roleStore);
  var identityRole = new IdentityRole
    {Name = FrontClass.MvcApplication.AdministratorRoleName};
  roleManager.Create(identityRole);
}
var instructorName = "instructor@contonso.com";
if (!context.Users.Any(u => u.UserName == instructorName))
{
  var userStore = new UserStore<ApplicationUser>(context);
  var userManager = new UserManager<ApplicationUser>(userStore);
  var applicationUser =
    new ApplicationUser { UserName = instructorName };
  userManager.Create(applicationUser, "init_2014");
  userManager.AddToRole(applicationUser.Id,
    FrontClass.MvcApplication.AdministratorRoleName);
}

Я также заполняю таблицы, относящиеся к модулю, некоторыми образцами данных, которые вы сможете увидеть в сопутствующем этой статье исходном коде. При запуске приложения я вхожу под именем instructor@contonso.com и паролем init_2014. К этому моменту мои структуры данных на месте, приложение сконфигурировано с несколькими контекстами, использующими одну и ту же базу данных, и у меня есть пользователь с административными правами — учетная запись преподавателя.

Базовые средства редактирования Последний фрагмент, необходимый для поддержки формирования учебного курса, — предоставление средств для выполнения CRUD-операций (create, read, update, delete). Я создаю новую область с именем administration в корне своего проекта и использую встроенные средства формирования шаблонов (scaffolding tools) для создания UI. Наконец, я создаю контроллер Admin с операцией index и представление, которое предоставляет ссылки на сопровождение учебного курса, на модули и этапы.

Преподавание курса

Как преподаватель вы можете выбрать учебный курс из того же административного представления, из которого вы потом выберете модуль. Каждый из этапов отображается на странице модуля, как видно на рис. 4. Вы можете отправить любой этап любому учащемуся в виртуальном классе с предварительным просмотром контента, доступного преподавателю.

Рис. 4. Ведение класса

Учащиеся могут находиться в сеансе конференции, в классе с преподавателем или рассеяны по всему миру. Один из контекстов, в котором вы могли бы применить это приложение, — онлайновый виртуальный класс «в прямом эфире» с десятками или даже сотнями учащихся. Я хочу обеспечить, чтобы независимо от того, как именно вам потребуется адаптировать это приложение, вы не потеряли возможность масштабирования. Поэтому я должен обратить особое внимание на то, как материалы занятия реально попадают к учащемуся.

Вы можете создавать этапы в модуле учебного курса в виде чистого текста или HTML, и каждый этап может иметь произвольную длину. SignalR выполняет замечательную работу по обработке всей механики транспорта согласования (с помощью WebSockets, событий, посылаемых сервером, длинных опросов [long polling] или вечного фрейма [forever frame]) и абстрагирует нас от необходимости заботиться о сериализации сообщений.

В конечном счете, чтобы сохранить масштабируемость, мне нужно поддерживать малый размер сообщений. Это необходимо для минимизации нагрузки на серверные ресурсы, уменьшения издержек сериализации, предоставления клиентскому браузеру возможности использовать такие части инфраструктуры, как кеширование, и применения SignalR по его прямому назначению: для передачи сигналов.

Лучший способ добиться этого — просто послать клиенту сообщение «New content is available here» вместо передачи всего этапа занятия. Рассмотрим следующее сериализованное сообщение, принятое клиентом в виде JSON:

{"H":"ModuleStepHub", "M":"updateStep",
  "A":["\n<h1>Welcome to the course!</h1><p>trimmed for brevity...</p>\n"]}

Это сообщение несет HTML как аргумент для метода updateStep на клиентской стороне. Источник проблемы — текст «trimmed for brevity» («обрезано для краткости»). Контент может значительно разрастись в зависимости от того, как преподаватель создает этап. Пока что это только текст. Можете представить себе, насколько увеличился бы размер сообщения, если бы вы попытались посылать страницы контента или изображения. Текст или изображение сериализуется в JSON и доставляется каждому клиенту, используя ресурсы сигнального конвейера (signaling pipeline). Вместо этого мне нужно посылать лишь сигнал, а именно: идентификатор нового контента, который должен загрузить браузер. Это существенно меньшее сообщение выглядело бы так:

{"H":"ModuleStepHub","M":"notifyStepAvailable","A":[7]}

Теперь, осмыслив, что именно мне нужно, я могу создать эту функциональность в своем приложении.

Создание хаба Я добавляю в проект папку Hub, затем включаю SignalR Hub Class (v2) из диалога Add New Item. Хаб — это серверная часть SignalR, которую вы создаете для публикации сообщений и обработки клиентских вызовов. Если идти по этому пути, то Visual Studio извлекает все зависимости и генерирует класс с метод sample в хабе. Я удаляю метод sample и создаю новый, который позволяет мне посылать сообщение с помощью следующего кода:

public void MakeStepAvailable(int stepId)
{
  Clients.Others.notifyStepAvailable(stepId);
}

Здесь предполагается, что преподаватель запустит некую операцию, которая попутно отправит этап учащимся. Используя динамическое свойство Others объекта Clients, я сообщаю SignalR послать идентификатор этапа всем подключенным клиентам. SignalR предоставляет ряд параметров фильтрации, поэтому я могу отправить обновление конкретному пользователю, группе пользователей или какой-то другой выборке подключенных клиентов. Хаб также позволяет преподавателям создавать новый модуль. Учащиеся могут получить список этапов, сделанных доступными преподавателем.

Сопоставление хабов SignalR Чтобы предоставить функциональность, созданную в моем хабе, нужно указать ее для SignalR при запуске приложения. Вызов MapSignalR задает конечную точку по умолчанию, которая действует как JavaScript-прокси. При включении в клиент это приводит к вызову серверных методов из клиента и наоборот. Корневая папка моего проекта включает класс OWIN Startup, где я делаю вызов для выполнения необходимого связывания в методе Configuration. Вот как он выглядит после внесенных изменений:

public void Configuration(IAppBuilder app)
{
  ConfigureAuth(app);
  app.MapSignalR();
}

Здесь важно первым делом вызывать ConfigureAuth. Конвейер OWIN отправляет сообщения через промежуточное ПО в том порядке, в каком оно было зарегистрировано. В нашем случае нам нужны аутентификация и авторизация до вызовов хаба.

Поддержка совместного использования Чтобы преподаватель мог делиться контентом, я добавил другой контроллер (InstructController) в приложение. У него есть единственная операция Index. Класс дополнен атрибутом Authorize, поэтому управлять учебным классом могут только администраторы. Операция Index принимает идентификатор модуля как параметр, маршрут для которого задан в моем классе App_Startup\RouteConfig.cs. Этот метод ищет модуль в базе данных и возвращает запись представлению с набором Steps, включенным в запрос.

В соответствующем представлении (находится в Views\Instruct\Index.cshtml) я просто генерирую кнопку Share для каждого этапа. Идентификатор этапа хранится в атрибуте data-id. Я включаю библиотеку SignalR и прокси хаба, предоставленного ранее, затем пишу немного кода на JavaScript, чтобы запустить прокси и обрабатывать события click от кнопок, как показано на рис. 5.

Рис. 5. JavaScript для запуска прокси и обработки событий click

<script src="~/Scripts/jquery.signalR-2.0.3.js"></script>
<script src="~/SignalR/Hubs"></script>
<script>
  $(function() {
    var hub = $.connection.moduleStepHub;
    $.connection.hub.start().done(function() {
      $(".share-step").click(function() {
        var stepId = $(this).attr("data-id");
          hub.server.makeStepAvailable(stepId);
      });
    });
  });
</script>

Наконец, я модифицирую свою административную страницу index, чтобы включить список курсов и модулей, которые может выбирать преподаватель. Окончательный интерфейс, приведенный на рис. 6, позволяет преподавателю переходить прямо к нужному модулю и начинать занятие.

Рис. 6. Административный интерфейс для FrontClass

Используя представление module с рис. 4, преподаватель может затем посылать контент учебному классу.

Участие в учебном классе

Для учащихся все намного проще. Просто заходите! Каждый учащийся должен зарегистрироваться для доступа к сайту и получить инструкции по доступу к нужному им активному модулю курса, чтобы ввести пароль. Процесс регистрации обрабатывается в моем проекте контроллером Account по умолчанию. Мне потребуется создать страницу, где размещен контент занятия и написать код для того, чтобы учащиеся могли принимать участие в учебном классе. Для присоединения учащихся к учебному классу, когда он активен, они должны сначала записаться на курс.

Создание контроллера учебного класса Щелкнув правой кнопкой мыши папку Controllers в корне проекта, я добавляю новый контроллер — ClassroomController. Два основных метода, включаемых в этот класс, — Index, где обслуживается основной контент, и GetModuleStep, который возвращает запрошенный этап после выполнения ряда предусловий. Третья операция обрабатывает случаи, когда для учебного класса нет активного модуля. Для доступа к материалам модуля учащийся должен войти на сайт и записаться на курс активного модуля.

Поддержка записи на курс ClassroomController дополнен EnrollmentVerficationFilter, созданным мной, чтобы учащиеся могли получать доступ только к курсам, для которых они получили код входа от преподавателя. Если пользователь еще не записался на курс или преподаватель пока не начал его, то пользователь перенаправляется операцией Index в EnrollmentController (рис. 7). Учащийся может записаться на курс. После успешного выполнения этой операции я добавляю заявку в учетную запись пользователя с помощью релевантных компонентов ASP.NET Identity.

Рис. 7. Страница Course Lobby and Enrollment

Заявка добавляется через класс UserManager, к которому я обращаюсь, получив экземпляр своего ApplicationDbContext и используя его для создания UserStore; последний затем передается моему целевому классу:

var context = new ApplicationDbContext();
var userStore = new UserStore<ApplicationUser>(context);
var userManager = new UserManager<ApplicationUser>(userStore);

Теперь, располагая нужным компонентом, я получаю идентификатор пользователя через участника подсистемы защиты (principal), представляющего его идентификацию, и создаю объект заявки. Затем добавляю его в учетную запись пользователя:

var userId = User.Identity.GetUserId();
var courseClaim = new Claim(MvcApplication.CourseRegistrationClaimUrn,
  enroll.CourseId.ToString(CultureInfo.InvariantCulture));
userManager.AddClaim(userId, courseClaim);

После этого учащийся может получить доступ к учебному классу.

Представление учебного класса Как видно на рис. 8, учебный класс разделен на две части. В верхней части страницы дается обзор текущего модуля и предоставляются элементы управления для перехода к любому доступному этапу. Нижняя часть называется классной доской, и на ней отображается контент, которым делится преподаватель.

Рис. 8. Виртуальная классная доска

В этой странице на самом деле всего несколько DIV-элементов, используемых как контейнеры контента. Остальное связывается через JavaScript и через контент, извлекаемый на основе сообщений, поступающих от ClassroomHub, или выбора учащихся на предыдущем этапе. Когда преподаватель выбирает новые этапы, ClassroomHub уведомляется и отправляет сигналы всем, кто находится в учебном классе. В свою очередь это приводит к извлечению данных из ClassroomController, обеспечивая тем самым кеширование.

Развертывание проекта

Преподаватель может создавать курсы, модули и этапы и управлять ими. Учащийся может зарегистрироваться на сайте и записаться на курсы. Курсы защищаются заявками регистрации (enrollment claims), и виртуальная классная доска обновляется контентом по мере его передачи преподавателем. Пришла пора развернуть это приложение.

Из меню Build я выбираю публикацию своего проекта. На экране появляется диалог Publish Web, где в качестве мишени публикации я выбираю Azure Web Sites. Visual Studio запрашивает мои удостоверения защиты, если я еще не вошел. Далее я выбираю существующий сайт, созданный в начале работы над этим проектом. Потом скачивается мой профиль публикации, заполненный заранее сконфигурированными строками подключения к базе данных и всеми удостоверениями, необходимыми для отправки моего сайта в Azure.

Начиная работу над проектом, я подготовил сайт в Azure Portal. Поскольку в этом проекте используется строка подключения DefaultConnection, уже присутствующая в моем профиле публикации, мне не нужно вносить никаких изменений при переходе в производственную среду. Соответствующая строка подключения автоматически указывает моему приложению ранее сконфигурированную базу данных Azure SQL Database.

Использование преимуществ Azure Web Sites

Публикация сайта в предварительно сконфигурированной конечной точке в Azure Web Sites оказалась приятным сюрпризом. Все прошло легко и быстро. После стольких лет работы с куда более сложными процедурами развертывания это было сущим развлечением. И преимущества Azure Web Sites на этом не заканчиваются. Вам доступно намного больше разнообразных возможностей.

• Добавление собственного домена Если вы умеете регистрировать домен и настроить пару DNS-записей, добавление уникального домена для вашего сайта займет считанные минуты. Узнать больше можно по ссылке bit.ly/1sV8R1y.
• Защита приложения Сертификаты на основе SNI вполне доступны, и вы можете добавить их через информационную панель на своем веб-сайте в Azure Web Sites. Узнать больше можно по ссылке bit.ly/1mYXndJ.
• Вертикальное масштабирование сайта Если ваш проект разрастается, вы можете использовать вертикальное масштабирование (наращивая аппаратное обеспечение) или горизонтальное (увеличивая количество экземпляров). Не забудьте также сконфигурировать Azure Service Bus на обработку вашего SignalR-трафика. Узнать больше о SignalR можно по ссылке bit.ly/1o6B7AC.
• Добавление непрерывного развертывания Даже в случае самых малых проектов я отказался от прямого развертывания и использую сервер управления версиями исходного кода на основе Git. Azure создает, размещает и автоматически развертывает мой сайт при регистрации изменений. Узнать больше можно по ссылке bit.ly/1o6BACT.
• Добавление мониторинга и оповещений Всегда лучше знать, когда что-то идет не так с вашим приложением. Вы можете наблюдать определенные типы проблем и получать уведомления по мере их возникновения; все это настраивается с информационной панели для вашего сайта.

Заключение

В этой статье я использовал ASP.NET Identity 2.0, который теперь является частью шаблона ASP.NET MVC в Visual Studio 2013. Чтобы узнать больше об этих усовершенствованиях и изменениях, пожалуйста, прочитайте публикацию в .NET Web Development and Tools Blog по ссылке bit.ly/PXgQ2d. Я также задействовал SignalR, чтобы разрешить коммуникации между клиентом и сервером в реальном времени. Это приводит к автоматической генерации JavaScript-прокси и запуску кода на сервере с клиента и наоборот. Подробнее о создании модели данных с помощью EF Code First в приложениях ASP.NET MVC 5 см. учебное пособие по ссылке bit.ly/1pivbmE.

Поставлять богатые пользовательские среды гораздо легче, когда не приходится заботиться о нижележащей инфраструктуре или сложностях развертывания. Приложение FrontClass использует аутентификацию, авторизацию, обмен сообщениями в реальном времени и постоянное хранилище данных. Как разработчик я получил множество таких строительных блоков благодаря усилиям других людей. И мне не нужно волноваться о других деталях, когда я перемещаю свой проект в производственную среду.