Как написать веб приложение на c
Обзорная статья, посвященная разработке бэкенд-систем для web-приложений на языке программирования C++. Приведена общая архитектура, план действий, перечислены популярные библиотеки и альтернативные решения. Полезно для людей, которым необходимо создать веб-приложение на этом стеке технологий, но они не знают, с чего начать.
При этом самый классический из классических язык программирования, C++, почему-то обходят стороной. Он считается недостаточно высокоуровневым для создания web-бэкенда. Написание кода логики серверной принимающей части в умах разработчиков связано с накидыванием огромного количества кода и реализацией всей низкоуровневой части этой логики. Наконец, люди боятся создавать многопоточное приложение на C++. И совершенно напрасно.
Под C++ нет общепризнанных стандартов для создания бэкенда. Библиотек очень много и в их обилии легко запутаться. Это отпугивает. Действительно, требуется высокая квалификация, чтобы написать базу для своего web-сервиса, да и сам порог вхождения в технологию куда выше, чем в том же Go. Код получается несколько громоздким, не существует решения, позволяющего инициализировать бэкенд в 5-6 строчек кода, как в Node.js.
Однако у C++ есть и ряд преимуществ по сравнению с ориентированными на web конкурентами. Прежде всего, это высокая производительность. Сравниться по скорости с компилируемыми языками интерпретируемым практически невозможно, а большинство высокоуровневых языков для создания бэкендов как раз интерпретируемые. Конечно, для них существуют хорошие инструменты повышения производительности. Но ни один из них не позволит обогнать C++-решение по скорости работы. Такие ускорители требуют настройки, дополнительного изучения и поддержки со стороны системного программиста.
C++, который работает даже на микроволновке, является образцом технологии переносимого кода. Бэкенд на C++ можно собрать под любую платформу, даже самую редкую и специфичную, а часть кодов спокойно позаимствовать из открытых библиотек и предыдущих проектов. Мощная объектно-ориентированная парадигма позволяет создавать невероятную по сложности бизнес-логику. В наличии большая общая база кодов, включающая машинное обучение, численные методы, работу с big data, компьютерное зрение. Она позволяет создавать любое приложение, каким бы специфичным оно ни было.
На boost также быстро пишется распараллеливание (а также на OpenMP и OpenCL), парсинг JSON и XML. Для баз данных же C++ - стандарт, поэтому большинство СУБД официально имеют клиентское API в виде библиотек под плюсы, например, для самой популярной из реляционных баз данных, Postgresql, это библиотеки libpqxx и libpq++. В качестве шаблонизатора можно присмотреться к Wt.
Великолепная для разработки пользовательского интерфейса надстройка над C++, Qt, хотя и обладает классным API для построения web-бэкенда, все же не рекомендуется к использованию. Qt обладает крайне низкой производительностью и большим количеством подводных камней.
В целом, если есть возможность не писать web-бэкенд на C++, то лучше ею воспользоваться. Аналогичный код на Golang или RoR выйдет более поддерживаемым и емким. Однако при повышенным требованиям к скорости работы или узкой специфике целевой платформы нужно держать в голове, что создание web-бэкенда на C++ - процесс сравнительно безболезненный и не лишенный изящества.
Около двух лет я занимался веб-разработкой, создавая сайты и веб-приложения на языке PHP. Вот только в веб-разработку я попал по стечению весьма странных жизненных обстоятельств. Не сказать, что мне было это не интересно — мне, как раз, было очень интересно узнать, как создаются сайты и как вообще работает интернет.
Но, в то же время, меня всегда привлекало низкоуровневое программирование. Ещё во время учёбы мне очень понравился язык программирования C++. Только негде было его применять, кроме как для своего развлечения. Дальше я опустился пониже — изучил Assembler. Понял, как работает процессор (хотя слишком поверхностно) и как выполняются программы на самом деле.
Со всем этим набором знаний и опыта я попал в веб-разработку. Всё поначалу казалось весьма и весьма хорошо, оказалось гораздо проще, чем я думал. А со временем приелось, стало слишком просто, неинтересно, нет простора для оптимизаций и интересных решений. Генерируешь веб-странички, пишешь и подключаешь js-скрипты, оформляешь страницы с помощью css. Чувствовал, что больше не развиваюсь как программист.
В то время меня стали мучить вопросы:
- Почему я не могу создавать высокопроизводительные веб-приложения на таком языке, как C++ (не CGI)? Ведь этот язык мне нравится больше всех других. Никогда не слышал о том, что бывают сайты, написанные на C++. Почему?
- Почему веб-разработку захватили скриптовые (интерпретируемые) языки программирования?
Искал ответ на первый вопрос — как писать сайты на C++. В интернете ничего толкового по этой теме не нашёл (только через CGI). И ужаснулся: как же так? Я хочу быть свободен в выборе инструмента разработки, хочу использовать тот язык, который мне нравится. И до сих пор никто ничего не сделал? Или сделал, но использует только у себя?
Это меня и заставило начать разрабатывать свой веб-сервер, где веб-приложения (сайты) подключались бы как библиотеки (*.so, *.dll).
За год работы над собственным веб-сервером (который я пишу на C++ самых модных новых стандартов) мне удалось реализовать все базовые необходимые функции:
- Отправка файлов (с помощью установки заголовка X-Sendfile);
- отправка сгенерированных приложением HTML страниц;
- понимание и обработка частичных GET запросов;
- получение данных из форм (файлов и текста) в различных видах (application/x-www-form-urlencoded, multipart/form-data) и передача их приложению в готовом виде;
- поддержка Keep-Alive соединений;
- поддержка Upgrade соединений (WebSocket).
Как работает мой веб-сервер
Веб-сервер при старте подключает к себе библиотеки, указанные в конфигурационных файлах. Пример:
- listen — порт для приёма запросов к приложению;
- server_name — имена веб-приложения (сайта);
- server_module — путь к библиотеке, реализующей функционал веб-приложения;
- server_module_update — путь к библиотеке веб-приложения новой версии, используется для обновления веб-приложения без перезапуска самого веб-сервера (почти на лету);
- root_dir — корневая директория файлов сайта (веб-приложения);
- request_max_size — максимальный размер данных запроса (в байтах), если размер данных в запросе больше — запрос игнорируется.
- application_call — функция, которая вызывается для обработки каждого запроса;
- application_clear — функция вызывается для освобождения памяти, выделенной под заголовки, которые приходят от веб-приложения к веб-серверу;
- application_init — функция выполняется при успешной загрузке библиотеки, [не обязательна];
- application_final — выполняется при завершении работы веб-сервера, [не обязательна];
Особенность в том, что так же передаётся и сокет клиента, с которым можно (нужно) работать напрямую.
Основная работа по разработке веб-сервера, можно сказать, завершена. Уже теперь разработчик может создавать свои веб-приложения на любом языке программирования, компиляторы которых позволяют собирать проект в виде библиотеки. Например, языки C и C++.
Конечно, вам понадобится свой собственный сервер (компьютер), чтобы запустить на нём такой веб-сервер (программу) и насладиться скоростью работы веб-приложений. Помните только о том, что использование базы данных резко снижает производительность любых приложений. Но не столько, чтобы совсем отказываться от использования компилируемых языков.
Хотите попробовать?
Исходный код веб-сервера и пример приложения к нему прилагается (используемая IDE — Monodevelop).
Веб-сервер распространяется под лицензией AGPL.
Что дальше?
Веб-сервер в рабочем состоянии, но работать ещё есть над чем (привести код некоторых функций в порядок, написать комментарии к коду).
Далее хотелось бы подробнее разобрать и описать структуру веб-приложения, описать с чего начинать разработку, для тех, кому это может быть интересно.
Сейчас пишу фреймворк для удобной разработки веб-приложений на C++ для моего веб-сервера (пока нет в доступе). На самом же фреймворке разрабатываю сайт для одной компании. Обычный сайт — ничего примечательного, но зато с оптимизациями. Использую СУБД MariaDB.
Дано три стороны треугольника: a , b , c .
Используя формулу Герона, разработать приложение, которое находит площадь треугольника. Приложение реализовать как Web-application .
Формула Герона имеет вид:
где p – полупериметр:
a, b, c – длина сторон треугольника.
⇑
Выполнение
1. Запустить MS Visual Studio
Пример создания приложения в MS Visual Studio по шаблону Windows Forms Application подробно описывается в теме:
⇑
2. Создание Web-приложения
Приложения типа Web могут вызываться из любого компьютера, подключенного к сети Internet. Для открытия такого приложения используется Web -браузер (например Opera , Google Chrome , Internet Explorer и другие).
Ниже указаны два способа создания Web -приложения в MS Visual Studio .
⇑
2.1. Создание Web-приложения (способ № 1)
Для этого способа, чтобы создать Web -приложение, нужно сначала вызвать команду (рис. 1):
Рис. 1. Команда создания нового веб-сайта
Например, в нашем случае, файлы будут сохраняться в папке
Рис. 2. Создание Web-сайта
⇑
2.2. Создание Web-приложения (способ № 2)
Существует также и другой способ создания Web -приложения с помощью команды (рис. 3)
Рис. 3. Команда создания нового проекта
Рис. 4. Команда создания Web-приложения
⇑
3. Создание приложения как веб-сайта
Для решения задачи выбираем первый способ.
После выполненных операций создается решение ( Solution ), в котором есть один проект типа веб-сайт (рис. 5).
Если запустить на выполнение данный проект, то внизу в правой части экрана ( SySTray ) отобразится окно загруженного локального сервера (рис. 6).
Рис. 6. Загрузка локального сервера для выполнения приложения
В результате запуска, в активном веб-браузере откроется страница с приблизительно таким текстом (рис. 8):
Рис. 8. Текст, который выводится в веб-браузере
⇑
4. Добавление формы к приложению
Добавим новую форму к Web -приложению.
Рис. 10. Добавление новой формы
После добавления, в Solution Explorer можно увидеть дополнительные два файла (рис. 11):
С помощью этих двух файлов можно изменять внешний вид формы и организовывать работу в ней.
С помощью кнопок Design и Source можно переключаться между режимом проектирования и режимом кода страницы Default.aspx (рис. 12).
Рис. 12. Режимы проектирования ( Design ) и кода ( Source )
⇑
5. Конструирование формы
Согласно с условием задачи, форма должна содержать следующие элементы управления:
⇑
5.1. Изменение размеров формы
Рис. 13. Изменение размеров формы в режиме проектирования
⇑
Для нашей задачи нужно вынести на форму следующие элементы управления:
При вынесении элемента управления в правой нижней части экрана (окно Properties ) можно изменять свойства элементов управления (рис. 14).
Рис. 14. Изменение свойств элементов управления Web -формы
В целом, после построения, форма приложения должна иметь вид как показано на рисунке 15.
Рис. 15. Форма приложения в режиме проектирования
⇑
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page < protected void Page_Load( object sender, EventArgs e) < >protected void Button1_Click( object sender, EventArgs e) < double a, b, c, p, s; a = Double .Parse(TextBox1.Text); b = Double .Parse(TextBox2.Text); c = Double .Parse(TextBox3.Text); p = (a + b + c) / 2; s = Math .Sqrt(p * (p - a) * (p - b) * (p - c)); Label4.Text = "S text-align: justify;">После запуска приложения на выполнение можно проконтролировать его работу в Web -браузере (рис. 16).
Рис. 16. Выполнение Web -приложения в браузере Opera
После этого можно выносить приложение на Web-сервер. Но это уже другая тема.
Перед началом
Установка Visual Studio
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Выбор темы (необязательно)
В этом кратком руководстве содержатся снимки экрана, использующие темную тему. Если вы не используете темную тему, но хотите узнать, как переключиться на нее, см. страницу Практическое руководство. Персонализация интегрированной среды разработки и редактора Visual Studio.
Создание проекта
Откройте Visual Studio 2017.
В верхней строке меню последовательно выберите Файл > Создать > Проект.
Затем назовите файл HelloWorld и нажмите кнопку ОК.
(Возможно, перед тем как продолжить установку рабочей нагрузки, придется закрыть Visual Studio.)
Через некоторое время файл проекта откроется в Visual Studio.
На начальном экране выберите Создать проект.
Затем нажмите кнопку Изменить в Visual Studio Installer. Сохраните результаты работы, когда появится такой запрос. Выберите Продолжить, чтобы установить рабочую нагрузку. После этого вернитесь к шагу 2 в процедуре Создание проекта.
В поле Имя проекта окна Настроить новый проект введите HelloWorld. Теперь щелкните Далее.
- Нет: проверка подлинности не используется.
- Индивидуальные учетные записи: они хранятся в локальной базе данных или базе данных Azure.
- Платформа удостоверений Майкрософт: в этом варианте для проверки подлинности используется Active Directory, Azure AD или Microsoft 365.
- Windows: подходит для приложений интрасети.
Не устанавливайте флажок Включить Docker и установите флажок Нет в разделе "Тип проверки подлинности". Затем выберите Создать.
В Visual Studio откроется новый проект.
На начальном экране выберите Создать проект.
Затем нажмите кнопку Изменить в Visual Studio Installer. Сохраните результаты работы, когда появится такой запрос. Выберите Продолжить, чтобы установить рабочую нагрузку. После этого вернитесь к шагу 2 в процедуре Создание проекта.
В поле Имя проекта окна Настроить новый проект введите HelloWorld. Теперь щелкните Далее.
- Нет: проверка подлинности не используется.
- Индивидуальные учетные записи: они хранятся в локальной базе данных или базе данных Azure.
- Платформа удостоверений Майкрософт: в этом варианте для проверки подлинности используется Active Directory, Azure AD или Microsoft 365.
- Windows: подходит для приложений интрасети.
Не устанавливайте флажок Включить Docker и установите флажок Нет в разделе "Тип проверки подлинности". Затем выберите Создать.
В Visual Studio откроется новый проект.
Создание и запуск приложения
Этот файл соответствует странице с заголовком О программе веб-приложения, которое запускается в веб-браузере.
В редакторе на странице О программе появится HTML-код для области дополнительной информации.
Измените текст для чтения "дополнительная информация" на Hello World!.
В обозревателе решений разверните About.cshtml и выберите About.cshtml.cs. (Файл также соответствует странице О программе в веб-браузере.)
Выберите IIS Express или нажмите клавиши CTRL+F5, чтобы запустить приложение и открыть его в веб-браузере.
В веб-браузере убедитесь, что страница О программе содержит введенный вами текст.
Проверка работы
Просмотрите следующую анимацию для проверки работы, выполненной в предыдущем разделе.
Этот файл соответствует странице с заголовком Home (Домашняя) веб-приложения, которое запускается в веб-браузере.
В редакторе отображается HTML-код для текста, содержащегося на странице Home (Домашняя).
Измените текст "Welcome" на "Hello World!".
Выберите IIS Express или нажмите клавиши CTRL+F5, чтобы запустить приложение и открыть его в веб-браузере.
В веб-браузере убедитесь, что страница Home (Домашняя) содержит введенный вами текст.
Этот файл соответствует странице с заголовком Home (Домашняя) веб-приложения, которое запускается в веб-браузере.
В редакторе отображается HTML-код для текста, содержащегося на странице Home (Домашняя).
Измените текст "Welcome" на "Hello World!".
Выберите IIS Express или нажмите клавиши CTRL+F5, чтобы запустить приложение и открыть его в веб-браузере.
В веб-браузере убедитесь, что страница Home (Домашняя) содержит введенный вами текст.
Для разработки будем использовать Visual Studio.
Выберете модель Веб-формы и завершите создание проекта.
Внутренняя структура проекта
В проекте сайта уже загружены некоторые библиотеки, необходимые для комфортного старта: CSS-фреймворк Bootstrap, JS-фреймворк jQuery, MSAjax и некоторые другие.
После создания тут уже присутствуют 3 страницы: Default, About и Contact. Каждая страница состоит из 3 файлов:
- Page.aspx — содержит в себе HTML-разметку конкретной страницы;
- Page.aspx.cs — отвечает за логику работы конкретной страницы;
- Page.aspx.designer.cs — является мостом между Page.aspx и Page.aspx.cs.
Вот так выглядит About.aspx:
Как видно, этот файл содержит лишь контент конкретной страницы. Вся общая разметка находится в Site.Master и Site.Mobile.Master .
3–4 декабря, Онлайн, Беcплатно
Так выглядит страница About
Создание веб-формы
Чтобы создать новую страницу, в контекстном меню проекта выберите Добавить→Веб-форма. После этого автоматически сгенерируются и заполнятся все 3 файла.
Примечание Веб-формы можно создавать с помощью встроенного графического конструктора веб-форм. Что бы открыть его, в контекстном меню нужной веб-формы нажмите на Открыть в конструкторе. Все необходимые элементы можно достать из Панели Элементов (Вид→Панель элементов). Но если вам нужна максимальная гибкость и функциональность — лучше разрабатывать формы вручную в коде.
Потом можно добавить ссылку на новую страницу в панель навигации в Site.Master :
Примечание Обратите внимание, что в ссылке указывается название страницы без расширения.
Во всех упоминаниях нужно заменить News на название вашей страницы. Теперь форма будет отображаться вместе с общей вёрсткой.
Для интеграции значений в вёрстку из aspx.cs используют специальный тег <%: %> :
В этом случае SomeVar должен быть публичным полем. Если нужно выполнить какой-либо код для присвоения значения этой переменной, то выполнить его нужно в сгенерированном методе Page_Load .
Получение значений параметров из URL производится через статический класс Request , в котором хранятся и прочие данные о запросе:
Изучить все возможности веб-форм можно в официальной документации.
Движок представлений Razor
В Razor также можно выполнять неявные выражения прямо в HTML разметке:
Тут есть привычные для ЯП конструкции, которые могут значительно облегчить вёрстку. Вот некоторые из них:
Читайте также: