Файл: Разработка страницы клиента IT-компании, разрабатывающей визуальные решения для застройщиков ООО «Технософт».pdf

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

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

1. Техническое задание и выбор средств реализации

1.1 Техническое задание

В качестве предметной области для создания web-приложения выступает IT-компания Virtual Land ООО «Технософт», которая работает с застройщиками и клиентами, и чья цель на сегодняшний день «стать лучшими производителями визуального контента (продуктов) для Застройщиков,
Производства, Туризма, оказывая высокий уровень сервиса». Данная работа является ступенью на пути к достижению высокого уровня сервиса по отношению к клиенту.

У компании ООО «Технософт» много заказов на регулярные фото- и видеосъёмки динамики строительства, тем самым закрывая одну из главных потребностей застройщиков – регулярные визуальные отчёты перед акционерами и демонстрация прогресса строительства перед потенциальными покупателями уже в маркетинговых целях.

Преследуя свою цель достижения высокого уровня сервиса в предоставлении ссылок на контент, для компании ООО «Технософт» разработана простая страница клиента динамики строительства, где прикладываются ссылки на контент, пополняемые с периодической регулярностью. Так же эта страница служит и для отдела продаж компании в качестве портфолио, чтобы продемонстрировать уже готовый кейс коммерческого предложения на годовую фото- и видеосъёмку.

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

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

За регулярное пополнение странички клиента необходимым контентом отвечает куратор проектов с правами администратора. Панель администратора даёт возможность:

- создавать новую, сгенерированную по шаблону страничку клиента;

- удалять страничку клиента из БД и с сервера;

- опубликовать страничку клиента;

- создавать новую запись, состоящую из ссылки на файлообменник, месяц и год съёмки;

- пополнять страничку клиента ссылками на новый контент;

- удалять неактуальные или поломанные ссылки на контент.

Контактами ООО «Технософт» являются маркетологи компаний застройщиков, которые очень ценят своё время и продолжают сотрудничество из-за постоянно растущего уровня сервиса.

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

Возможные варианты использования и способы доступа на сайт и доступные функции для каждого из пользователей показаны на схеме (Рисунок 1.1).

Рисунок 1.1 – Схема вариантов использования

Проект должен быть динамичным, соответствовать современным требованиям, и использовать в своей реализации последние наработки и достижения в области web-разработки и соответствовать программному обеспечению, которое установлено на сервера компании. Готовое решение должно иметь адаптивный и интуитивно-понятный интерфейс не только для удобства пользования клиента, но и для куратора проекта, который может пополнять данными страницу и на портативном устройстве, находясь в пути.

1.2 Средства реализации

1.2.1 Open Server

Open Server Panel — это портативная серверная платформа и программная среда, созданная специально для веб-разработчиков с учётом их рекомендаций и пожеланий.

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

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

Данная платформа поддерживает необходимые для данного проекта язык программирования серверной части PHP версии 7.4.05 и БД MySQL версии 5.7.24.

1.2.2 Visual Studio Code

Visual Studio Code (VS Code) - это редактор исходного кода. Он поддерживает ряд языков программирования, подсветку синтаксиса, IntelliSense, рефакторинг, отладку, навигацию по коду, поддержку Git и другие возможности. Многие возможности Visual Studio Code недоступны через графический интерфейс, зачастую они используются через палитру команд или JSON-файлы (например, пользовательские настройки). Палитра команд представляет собой подобие командной строки, которая вызывается сочетанием клавиш.

VS Code, несмотря на свою лёгкость, является полноценной IDE (Integrated Development Environment, «интегрированная среда разработки») – мощный редактор с множеством функций, которые работают в рамках целого проекта.

С 2018 года появилось расширение Python для Visual Studio Code с открытым исходным кодом. Оно предоставляет разработчикам широкие возможности для редактирования, отладки и тестирования кода.

На март 2019 года посредством встроенного в продукт пользовательского интерфейса можно загрузить и установить несколько тысяч расширений только в категории «programming languages» (языки программирования).

VS Code собирает данные об использовании (телеметрию) и отправляет их в Microsoft, но эта функция является отключаемой (опция File > Preferences > Settings, «telemetry.enableTelemetry»). Хотя предоставление данных не является обязательным и вы можете отказаться от передачи персональных данных, некоторые возможности, такие как персонализация, использующие такие данные, будут вам недоступны для отключения. Данные могут передаваться контролируемым филиалам Microsoft, дочерним компаниям и правоохранительным органам в соответствии с заявлением о конфиденциальности.

1.2.3 HTML5

HTML5 (англ. HyperText Markup Language, version 5) — HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML. Хотя стандарт был завершён (рекомендованная версия к использованию) только в 2014 году (предыдущая, четвёртая, версия опубликована в 1999 году), уже с 2013 года браузерами оперативно осуществлялась поддержка, а разработчиками — использование рабочего стандарта (англ. HTML Living Standard). Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости, удобочитаемости кода для человека и простоты анализа для парсеров.

В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы <video>, <audio> и <canvas>, а также возможность использования SVG и математических формул. Эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами в сети без необходимости использования сторонних API и плагинов. Другие новые элементы, такие как <section>, <article>, <header> и <nav>, разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удалён. Некоторые элементы, например <a>, <menu> и <cite>, были изменены, переопределены или стандартизированы. API и DOM стали основными частями спецификации HTML5. HTML5 также определяет некоторые особенности обработки ошибок вёрстки, поэтому синтаксические ошибки должны рассматриваться одинаково всеми совместимыми браузерами.

1.2.4 CSS

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

Язык позволяет прикреплять стиль (например, шрифты и цвет) к структурированным документам достаточно много современных веб-сайтов работают в связке HTML+CSS.

CSS упрощает создание веб-страниц и обслуживание сайтов, определяя стиль представления документов от содержимого документов.

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

Хотя приведенный пример пытается влиять только на пару свойств, необходимых для рендеринга HTML-документа, он сам по себе квалифицируется как таблица стилей. В сочетании с другими таблицами стилей (одна фундаментальная особенность CSS заключается в том, что таблицы стилей объединяются), правило будет определять окончательное представление документа.

1.2.5 JavaScript

JavaScript (сокращённо - JS) является языком программирования, который позволяет веб-страницам отвечать на действия пользователя дальше базового уровня. Он был создан в начале 90-х фирмой Netscape, браузер которой Netscape Navigator в те времена был наиболее популярным средством для просмотра веб-сайтов. Название javascript наводит на мысли о связи с языком java, который также может использоваться в веб-программировании, и, действительно, javascript разрабатывался во многом с опорой на язык Java, но следует всё же помнить, что это совершенно разные языки. Скрипты, написанные на javascript, выполняются на стороне клиента (т. е. на компьютере пользователя), и не просто на стороне клиента, а в самом браузере, поэтому не требуется никаких дополнительных программ, никаких плагинов и т. п., скрипт можно просто вставить в html-код страницы, и он будет выполняться в любом браузере. Javascript - простой и удобный язык, позволяющий легко управлять содержимым веб-страницы, отслеживая самые различные действия пользователя, и реагируя на это. Благодаря этому, javascript практически не имеет конкурентов в своей области применения и является первым языком, изучение которого нужно начинать веб-разработчику.

1.2.6 MySQL

MySQL – это одна из самых популярных и получивших широкое распространенние СУБД (система управления базами данных) для интернет ресурсов. Данная система не предназначена для обеспечения обработки больших объемов информации, но ее использование идеально в сфере интернет-сайтов, как не очень небольших, так и весьма крупных ресурсах.

MySQL выделяется прекрасной скоростью работы, он надежен и гибок. Работа с ним, в основном, не вызывает каких-либо затруднений. Что немаловажно – автоматическая поддержка сервера MySQL присутствует в поставке PHP.

1.2.7 PHP

PHP (рекурсивный акроним словосочетания PHP: Hypertext Preprocessor) – это распространенный язык программирования общего назначения с открытым исходным кодом. PHP специально сконструирован для веб-разработок и его код может внедряться непосредственно в HTML и наоборот, HTML теги легко добавляются к скриптам, написанным на PHP.