Site icon Embarcadero RAD Studio, Delphi, & C++Builder Blogs

RADoween: разработка полнофункциональных веб-приложений с помощью Delphi и TMS

radoween in action 2

От концепции до запуска всего за пять дней

14 октября Атанас отправил Бруно электронное письмо с идеей создания веб-приложения на базе  TMS WEB Core для проведения нашего внутреннего партнерского конкурса костюмов на Хэллоуин. Цель заключалась в том, чтобы создать простую веб-страницу, на которой члены команды могли бы представить фотографии своих костюмов на Хэллоуин, а затем каждый мог бы проголосовать за своих фаворитов.

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

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

Разработчики обычно делятся на две категории, особенно в веб-разработке:  интерфейсные  и  внутренние . Причина этого в том, что чаще всего требуются два совершенно разных языка программирования. Передняя часть работает на JavaScript (при этом WebAssembly все еще набирает обороты), а серверная часть работает на разных языках: PHP, C #, Java, Python, Perl и т. Д.

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

Когда вы берете все программное обеспечение и инструменты, используемые для создания приложения, это называется стеком. Наиболее распространенным веб-стеком является LAMP, аббревиатура, которая изначально  означала L inux,  A pache,  M ySQL, P HP, но это неполно, поскольку предполагается, что JavaScript является единственным решением для встроенного  браузера.

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

Что ж, JavaScript — не единственный язык программирования с полным стеком. На мой взгляд, Delphi концептуализировал разработку с полным стеком с помощью клиент-серверной архитектуры. Вместо того, чтобы использовать PHP или Java (оба были выпущены в том же году, что и Delphi) для серверной части, а затем что-то еще для передней части, Delphi делал все в той же среде IDE с тем же языком программирования.

В 1995 году большинство веб-приложений были просто статическим HTML (каскадные таблицы стилей даже не появлялись до 1996 года, и им потребовалось время, чтобы они прижились). И хотя JavaScript родился в 1995 году вместе с Delphi, PHP, Java и многими другими современными языками программирования, он все еще не получил широкого распространения. Сегодня большинство веб-страниц интенсивно используют JavaScript. Иногда кода JavaScript больше, чем всего остального HTML, CSS и изображений вместе взятых.

Хорошо, это было интересное погружение в стеки, интерфейсы, серверные части и историю веб-разработки, но какое отношение все это имеет к Хэллоуину? Рад, что вы спросили — Delphi по-прежнему остается невероятно производительным полнофункциональным средством разработки веб-приложений благодаря мощи внешнего интерфейса TMS WEB Core и серверной части TMS XData, а веб-приложение RADoween является отличным примером.

Вероятно, за меньшее время, чем мне потребовалось, чтобы написать вышеизложенное, команда TMS Software, задействованная в TMS WEB Core и TMS XData, то есть Бруно Фиренс, Вагнер Ландграф и Брэдли Велге, получила доказательство концепции, позволяющей пользователям загружать изображения, использовать камеры устройства, заполните их данные, просмотрите список предыдущих отправок, поделитесь отправкой, проголосуйте и отсортируйте…

Снимок экрана с доказательством концепции приложения до того, как логика пользовательского интерфейса была связана с шаблоном HTML.

Скриншот списка представленных в приложении «Подтверждение концепции». Голосование посредством нажатия на тыкву уже было в прототипе.

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

RADoween в действии — показываю свое лучшее жуткое лицо
Он также предоставляет возможность локальной установки в качестве прогрессивного веб-приложения на мобильных устройствах (iOS и Android), а также на настольных устройствах с браузером Chrome.

Давайте посмотрим на различные части этого веб-стека на базе Delphi.

Delphi IDE

Это IDE и язык, используемый для создания как клиентского веб-приложения, то есть внешнего интерфейса и внутреннего интерфейса, сервера REST API. Для этого в Delphi IDE были установлены эти два продукта:

TMS WEB Core : компонентная структура для веб-клиента + компилятор Object Pascal to JavaScript (транспилятор) и Object Pascal RTL для браузера. Используемые визуальные компоненты на удивление просты: TWebCamera, несколько компонентов TWebEdit и TWebComboBox, TWebContinuousScrollControl для постепенного отображения списка записей, компонент TWebShare для доступа к общему списку устройств.

Внешний вид приложения RADoween в основном создается с помощью HTML5 и CSS3. TMS WEB Core предлагает уникальный механизм привязки для подключения логики пользовательского интерфейса к шаблону HTML. Вы найдете все о TMS WEB Core здесь:  https://www.tmssoftware.com/site/tmswebcoreintro.asp 

TMS XData : сервер REST API на основе собственного кода Delphi. С помощью TMS XData вы можете легко создавать надежные и быстрые конечные точки REST API, а также задокументировать это для интерфейсного разработчика через пользовательский интерфейс Swagger. TMS XData может дополнительно использовать преимущества ORM Aurelius, что делает сервер REST API также абстрагированным от базы данных. Это означает, что вы можете легко выбрать, к какой базе данных подключить внутренний сервер.

Сервер TMS XData REST был развернут на Amazon Web Services (AWS). Вы можете найти все о TMS XData здесь:  https://www.tmssoftware.com/site/tmsbizintro.asp 

Хотите узнать больше о том, как Delphi и TMS обеспечивают быструю разработку полнофункциональных приложений в Интернете? Не забудьте присоединиться к Бруно на его сессии на DelphiCon:  Триллер: веб-приложение Delphi за 5 рабочих дней  во вторник, 16 ноября 2021 года, в 14:00 по центральному поясному времени. Регистрация на DelphiCon бесплатна, и вы получаете доступ ко всем другим замечательным сессиям.

Полный исходный код доступен на GitHub и будет доступен во время сеанса DelphiCon. Если вы еще не используете уникальные компоненты Delphi или TMS Software, вы можете получить бесплатную пробную версию прямо сейчас и быстрее начать переносить свои идеи в Интернет.

Посмотрите сообщение в блоге TMS Software о проекте, которое включает видео

Exit mobile version