WebJOX Блог

project-image

13.12.2022

Мастер-контейнер для Docker сети

Мастер-контейнер для Docker сети

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

 

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

Кейс

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

  1. SPA приложение на ReactJS
  2. Бэкенд на Symfony 6
  3. База данных PostreSQL 14

Загвоздкой оказался один нюанс. Бэкенд должен был динамически создавать новый внутренний сервер, слушающий другой порт, а приложение на React должно иметь возможность обращаться к нему напрямую.

 

 

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

Проблема

Первоначальный вариант конфигурации Docker мог бы выглядеть примерно так.

 

После сборки и запуска трех контейнеров у нас есть доступ как к бэкенду через localhost:8000, так и к фронтенду (стандартно на localhost:3000). Как уже было сказано, PHP контейнер создаст новый компонент. Для простоты начнем с попытки прописать в конфигурации того же контейнера фиксированный порт для этих целей. Тогда в docker-compose.yml мы сделаем примерно такие строки:

backend:
ports:

  • 8000:80
  • 8888:8888

И с этой же попытки мы сталкиваемся с настоящей проблемой. Во время сборки и запуска контейнеров динамического компонента не существует, и он не выделен в отдельный контейнер, так что подключиться по имени контейнера средствами Docker network не получится. Как же заставить фронтенд обратиться к новому компоненту внутри контейнера “backend”?

Решение

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

 

Возможности настройки предоставляют нам не только разные типы сетей (host, bridge). На самом деле, мы можем внедрить один контейнер в сеть другого контейнера прямо в docker-compose.yml. В этом случае первый контейнер станет своего рода “мастер-контейнером”, а второй - дочерним с точки зрения сетевой настройки. И поскольку контейнер backend несет в себе все эти дополнительные сложности, сделаем мастером именно его.

Для начала добавим связку хоста с внутренней сетью контейнера. Для этого в конфигурации контейнера backend добавим секцию extra_hosts и уберем проброс портов для контейнера фронтенд-приложения, там они больше не понадобятся. Вместо этого, включим проброс порта 3000 с локальной машины сразу в контейнер ‘backend’.

 

Наконец, включим особый сетевой режим для контейнера ‘frontend’, присоединив его в один сетевой домен с бэкендом. Измененная конфигурация будет выглядеть следующим образом.

Результат

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

 

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

project-image

13.12.2022

Часть 2. Legacy code PHP Symfony 2.8. и Keycloak

Часть 1. Legacy code PHP Symfony 2.8. и Keycloak

В жизни значительной части разработчиков рано или поздно появляется тот самый Legacy проект, который приходится изо всех сил поддерживать на плаву. В нашем случае мы столкнулись с проектом на Symfony 2.8 (2015-2019 гг.), который нужно было перевести на новый механизм SSO, а именно - Keycloak


 

Конфигурация приложения

В отличие от более новых версий Symfony, кастомные службы вместе с их зависимостями необходимо регистрировать в конфигурационном файле services.yml. Написанный нами класс KeycloakUserProvider нужно добавить туда.

Роутинг и контроллер

Поддержка атрибутов (и даже тэгов в phpDoc) в Symfony 2.8 еще не существовала. Поэтому все роуты придется прописать вручную в конфигурационном файле routing.yml. Дополним это еще одним роутом - для возможности выхода из системы с помощью Keycloak. Таким образом, у нас будет три маршрута: connect, check и logout. Два из них придется реализовать в контроллере, один - обмен кода авторизации на токен - возьмет на себя Guard Authenticator (внутренний компонент Symfony).

Если с редиректом на страницу авторизации все относительно просто - нам нужно только вызвать объект из используемой нами библиотеки, а он уже имеет метод с говорящим названием redirect(), то с logout придется повозиться несколько дольше.

Дело в том, что даже сконструировав вручную (не понадобится) URL для деавторизации в Keycloak, приложение оставит внутри себя существующий токен и сессию. Быстро и неочевидно Symfony справится с повторной авторизацией по существующему токену, и пользователь по нажатию кнопки “Выход” просто переадресуется на главную (под капотом же Symfony пошлет запрос не деавторизацию, перейдет обратно, снова вызовет проверку токена и благополучно авторизуется повторно). При хорошем соединении все это произойдет настолько быстро, что пользователь даже не увидит всего этого.

Поэтому в том же методе нам придется реализовать удаление токена из компонента Security. Сделать это можно одной строкой, но необходимо понимать, что наш action будет выполнять параллельно два действия по деавторизации - на стороне клиента (себя) и на стороне сервера (Keycloak).

$this->get('security.token_storage')->setToken(NULL);

Настройки контейнеров

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

  1. Пользователь переходит в браузере на желаемую страницу и получает редирект на страницу авторизации (это взаимодействие на уровне хоста).
  2. После авторизации пользователь снова получает редирект, однако после этого Symfony неявно попробует снова обратиться к Keycloak, на этот раз напрямую и без участия пользователя (это взаимодействие на уровне контейнеров).

Таким образом, нам нужно, чтобы контейнеры видели друг друга как на машине клиента (в нашем случае на localhost), так и внутри сети Docker. Проблема же заключается в том, что хост для каждого контейнера свой, и в то время как пользователь может подключаться к разным контейнерам через, скажем, разные порты (например, один контейнер может быть доступен на localhost:3000, а другой на localhost:8080), то сами контейнеры знают только один localhost - свой собственный.

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

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


Часть 1. Legacy code PHP Symfony 2.8. и Keycloak

project-image

13.12.2022

Часть 1. Legacy code PHP Symfony 2.8. и Keycloak

В жизни значительной части разработчиков рано или поздно появляется тот самый Legacy проект, который приходится изо всех сил поддерживать на плаву. В нашем случае мы столкнулись с проектом на Symfony 2.8 (2015-2019 гг.), который нужно было перевести на новый механизм SSO, а именно - Keycloak.
Немного технического контекста

Общая архитектура проекта выходит далеко за пределы темы этого поста. Псевдо-микросервисное приложение включает в себя:

  • Монолитная админка (Symfony 2.8 + Twig + NGINX)
  • Бэкенд основного сайта (Python Django)
  • Фронтенд основного сайта (Angular)
  • Базы данных, сервисы кэширования

Каждый из сервисов работает с отдельном Docker контейнере. Нашей конечной задачей было добавить контейнер с Keycloak на борту и заставить Symfony обращаться к нему за авторизацией. 

Поиск готовых решений

Непродолжительный поиск в Google навел на две сторонние библиотеки, разработанные для внедрения в Symfony возможности авторизации по OAuth2 и конкретно на подключение Keycloak.

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

Спойлер. Никакое решение не будет работать просто “из коробки”.

Первые попытки

Первая попытка, как водится, была сделана четко по инструкции. Для работы библиотек нужно было реализовать GuardAuthenticator, добавить маршруты для редиректа на сам Keycloak и для обмена кода авторизации на JWT токен. Начиная с этого момента выделились две глобальные проблемы, которые пришлось решить для полноценной интеграции.

  1. Проблемы с Symfony. Старая версия не может работать с Keycloak без некоторой доли кастомизации.
  2. Проблемы с Docker. Контейнеры должны взаимодействовать между собой на нескольких уровнях (на уровне хоста - редиректы в браузере, на уровне контейнеров - обмен кодами и токенами и проверка JWT).

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

Кастомизация библиотек

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

User и UserProvider

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

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

Продолжение текста и поиска решения данного кейса, читайте во второй части статьи 
Часть 2. Legacy code PHP Symfony 2.8. и Keycloak

project-image

13.12.2022

Работа с Веб-сокетами на PHP

PHP - едва ли первое, что придет в голову, когда стоит задача поднять сервер веб-сокетов. Практически каждая статья в интернете будет пестрить предложениями использовать для этого NodeJS, Python или Go. Но поскольку PHP - это однозначно первое, что приходит в голову, когда речь идет о веб-приложениях, почему бы не попробовать?

На самом деле, запуск сервера веб-сокетов на PHP довольно прост. Существует превосходная библиотека Ratchet, позволяющая работать на любом фреймворке (или вовсе без него) полноценно и легко.

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

Авторизация

По умолчанию, сервер веб-сокетов открыт для любого подключения. Конечно, можно поставить сетевые ограничения по доменам или IP адресам, но для веб-приложения - это, мягко говоря, не эффективный подход. В обычной ситуации мы используем для таких ограничений тот или иной вариант сервиса авторизации - токены, сессии и т.д. Здесь же проблема в том, что мы не сможем отправить через протокол ws:// ни HTTP заголовок, ни cookies. Значительная часть привычных методов, таким образом, не сработает.

Архитектура

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

База данных

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

Решения

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

Авторизуем пользователей

В процессе подключения к серверу веб-сокетов существует этап, на котором исходный HTTP запрос преобразуется в WS запрос. Используемая нами библиотека Ratchet сохраняет этот начальный запрос в объекте Connection. Хотя возможности подцепить Bearer заголовок к запросу нет (для клиентского приложения запрос строится сразу как ws://websocket-server), мы можем передать токен (например, JWT) в параметрах запроса. При использовании HTTPS - это вполне безопасный способ передачи.

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

ws://server?token={token_value}

Строку параметров затем можно извлечь из упомянутого ранее объекта Connection.

<?php

$request = $connection->httpRequest;

$queryString = $request->getUri()->getQuery();

parse_str($queryString, $query);

$token = $query[‘token’]

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

Интегрируем базу данных

В 9 из 10 случаев основное приложение будет написано на одном из популярных фреймворков вроде Laravel или Symfony. Все, что нам необходимо реализовать в такой ситуации - внедрение службы, отвечающей за ORM, в конструктор сервера веб-сокетов. При условии, что для запуска сервера используется консольная команда, использующая компонент Symfony Console, мы можем сделать это в два этапа: первоначальной инъекцией в конструктор консольной команды, а оттуда передачей в конструктор основного класса веб-сокетов.

Разделяем приложения

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

В целом, после внедрения ORM в обработчик веб-сокетов, мы могли бы выполнять все это с помощью обычных CRUD-операций. Но гораздо более эффективным решением было бы использовать уже готовый API. Почему? Во-первых, это позволит избежать дублирования кода (ровно такие же CRUDы используются в контроллерах, отвечающих за API). Во-вторых, таким способом мы укладываемся в общую архитектуру разделенных компонентов, даже внутри монолитного решения. Более того, имея одновременно токен из исходного запроса и внедренный ORM, мы получаем возможность авторизовывать действия и валидировать данные при абсолютно каждом событии веб-сокетов, а это уже полноценная имперсонификация пользователя.

Выводы

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

project-image

13.12.2022

Этапы разработки Web-сайта

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

 

Последовательность разработки


В утрированном формате можно выделить следующие этапы разработки:

 

1. Подготовительный.

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

2. Непосредственная разработка.

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

Отдельно необходимо отметить продвижение проекта в поисковых системах. Обычно этот момент игнорируют, особенно начинающие бизнесмены. Однако от этого серьезно страдает посещаемость портала, соответственно, продажи. Скажем так, СЕО-продвижение – это не то направление, где можно сэкономить.

3. Настройка, сдача в эксплуатацию.

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

4.  Техническое сопровождение.

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

 

Как найти исполнителей

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

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

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

 

project-image

13.12.2022

IT-аутсорсинг

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

 

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

 

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

 

Причины популярности IT-аутсорсинга

 

Наша компания предоставляет самые различные услуги в области ИТ на условиях аутсорсинга.

 

Еще не так давно понятие аутсорсинг персонала было никому не известным, но сейчас все большее количество компаний пользуется этой услугой. Особенность IT-аутсорсинга в том, что ряд вопросов, связанных с разработкой веб-сервисов, обслуживанием компьютерной техники, программированием баз данных, решают не штатные сотрудники компании, а сторонние специалисты на условиях договора. Благодаря привлечению ИТ-аутсорсеров нет необходимости вводить дополнительные штатные единицы и загружать дополнительной работой сотрудников.

 

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

 

Достоинства IT-аутсорсинга

 

Обращение в нашу компанию, предоставляющую услуги ИТ-аутсорсинга, имеет ряд неоспоримых преимуществ:

 

Руководителю не приходится контролировать каждый этап выполнения разработки сайта – он просто ставит перед нашими специалистами задачу и получает результат, при этом сотрудники компании занимаются своими обязанностями;


Работы по разработке веб-приложений производятся высококвалифицированными специалистами, поэтому гарантированно будет положительный результат;


Сотрудники компании не отвлекаются на выполнение дополнительных задач, выполняемых нашей командой разработчиков;


Штат компании нет необходимости увеличивать, а это существенная экономия, так как можно сэкономить на заработной плате, налогах и отчислениях;


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


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


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

 

Какие задачи готовы выполнить наши IT-специалисты

 

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

 

Среди широкого перечня задач, выполняемых нашими специалистами, самыми востребованными считаются:

• Создание и разработка сайтов
• Разработка уникального дизайна сайта
• Поддержка сайта, его обновление и защита
• Разработка онлайн-калькуляторов для интрнет-магазинов
• Разработка нейронной сети ( ИИ) , которая сможет самостоятельно анализировать и сопоставлять образы, распознавать  текстовые/видео/аудио-сообщения
• Разработка CRM и ERP систем 
• Внедрение интеграций различных систем через Api, что позволит вам выгружать данные во внешние системы, такие как MES, ERP, CRM,  различные бухгалтерские программы, системы управления предприятием и производством
• Разработка дашбордов для руководителя
• Создание маркетплейсов. 

project-image

12.12.2022

Кто такие WebJOX

Сегодня WebJOX -  это IT команда молодых и амбициозных профессионалов.

 

Наша компания на российском рынке более пяти лет и за это время реализовала многочисленное количество успешных проектов.

 

Свой путь в IT мы начали в 2014г. с услуг по обслуживанию компьютерной и оргтехники. Занимались  поддержкой ИТ-инфраструктуры в различных компаниях. Мы предоставляли широкий спектр услуг для наших клиентов: от обслуживания компьютеров и администрирования серверов до программирования и предоставления хостингов.

 

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

 

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

 

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

 

Направленность нашей разработки

 

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

 

Специализируемся на сборе и агрегирование данных из открытых источников. Аналитика данных, Формирование визуальных представлений информации. Работа с картами. Телеграм боты. Разработка стартапов и многое другое.  

 

Наши специализации
 

- Парсинг разной сложности
- Новостные ресурсы
- Математический анализ и построение графиков на их основе
- Личные кабинеты пользователей с различным функционалом
- CRM системы
- E-commerce площадки с индивидуальным подходом, интеграцией платежных сервисов (СберБанк, Тинькофф, cloudpayment и т.п.)
- FinTech, Инно-тех продукты и стартапы

 

Наши ценности 

 

Партнерство. Инновации. Результат.


Что для нас команда? 


Мы ценим и прислушиваемся к мнению каждого сотрудника и рады, что у нас работают люди, которые постоянно стремятся к совершенству.

 

Каждый из нас стремится к созданию комфортной и позитивной обстановки внутри коллектива. Наш офис - это не только место, где мы работаем и кодим, но так же место дружбы и уважения. Мы любим после работы поиграть в настольные игры, поедая вкусную пиццу, или устроить онлайн турнир в CS или Dota 2.

project-image

13.12.2022

Объявлены победители Fintech-хакатона конкурса «Цифровой прорыв»

Мы вышли в финал всероссийского хакатона


Завершился пятый хакатон третьего сезона Всероссийского конкурса «Цифровой прорыв» — флагманского проекта президентской платформы «Россия — страна возможностей», посвящённый финансам, банкингу и страхованию.

 

На хакатоне «Финансы. Банкинг. Страхование» были представлены 8 задач от следующих кейсодержателей: Госкорпорации «Росатом», Министерства финансов РФ, Accenture, Balance Platform, ВТБ, ПСБ, Международного аэропорта Шереметьево и Министерства финансов Республики Карелия.

 

Технологический кейс Госкорпорации РОСАТОМ : Разработка системы для автоматического поиска потенциальных поставщиков для планируемой закупки.

 

Команда Webjox Tornado заняла 2-е призовое место во всероссийском конкурсе «цифровой прорыв» и вышла в финал!

 

Второе место в кейсе «Росатом» заняла наша команда Webjox Tornado с проектом «Ловушка предложений» , предназначенная для автоматизации бизнес-процесса и минимизации человеческого фактора в процессе поиска производителей. Уникальность решения: автоматическое получение отечественных и иностранных производителей по запросу.

 

Основной стек технологий:
- JavaScript
- React
- PHP (yii2)
- MySQL

 

Процесс работы над кейсом.

 

Делать закупки для предприятия ― задача не из лёгких. Представьте, что вы зашли в магазин, в котором нельзя купить напрямую. А как тогда покупать? Вот тут и начинается самое интересное!

 

Чтобы что-то купить, предприятию нужно объявить конкурс ― тендер. Перед проведением тендера предприятие анализирует потребности и составляет список покупок. Но это не самое сложное.

 

Самое сложное ― привлечь к участию в тендере официальных производителей.

 

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

 

Результатом совместной работы стала «Ловушка предложений» ― сервис для автоматического поиска производителей.


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

 

Так, сервис «ловит» производите лей, в которых предприятие заинтересовано больше всего. А уже среди них можно выбрать самые выгодные варианты по цене и качеству. 

 

Результат: экономия времени, повышение продуктивности, лучшие цены и конечно же качественные поставки!

 

https://vk.com/feed?c%5Bq%5D=webjox&section=search&w=wall-37680642_131820
https://leadersofdigital.ru/event/63007/case/678337

project-image

13.12.2022

Парсинг и скрейпинг. Что это и зачем

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

 

Веб-скрейпинг используется для преобразования веб-страниц в более удобный для чтения вид. Парсинг работает уже с обработанной и «пригодной» для чтения информацией.

 

Сейчас объясним немного проще:

СКРЕЙПИНГ полностью берет информацию с сайта, включая код.

ПАРСИНГ информацию анализирует и обрабатывает. Если немного расширить понятие: парсинг ищет среди данных те, которые записаны в обычном печатном формате, извлекает нужное и сохраняет.Зачем нужны эти функции нужны? Все просто. В интернете слишком много информации и человек не в состоянии систематизировать все вручную. За него эту рутинную работу и делает скрейпинг и парсинг.

 

Для наглядности покажем пример функционала. Парсинг позволяет:

 

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


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


• Сортировать данные из объявлений, размещенных на специальных ресурсах. Парсинг можно осуществлять на регулярной основе, например, каждую неделю (или каждый день) мониторить объявления по интересующей теме или напротив отбирать «отклики» по всему интернету, если например ищете машину для покупки или перепродажи, а в зависимости от сайта у одной и той же машины может отличаться цена, плюс каждый день появляются новые объявления; 
Получить и составить базы потенциальных клиентов через поиск и сбор контактных данных пользователей, которые они опубликовали в открытом доступе;


• Проводить поиск в рамках социальных сетей (например, отзывы и комментарии), это удобно, когда нужно сократить поиски со всего интернет-пространства, до конкретных потребителей;


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

 

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

 

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

project-image

13.12.2022

Объявлены победители второго хакатона конкурса «Цифровой прорыв»

Мы вышли в финал всероссийского хакатона


23 мая 2021 года завершился второй хакатон  третьего сезона Всероссийского конкурса «Цифровой прорыв» — флагманского проекта президентской платформы «Россия — страна возможностей». Тематика  хакатона  была «Транспорт и логистика».

 

На хакатоне «Умные города. Промышленность. ТЭК» были представлены 8 кейсов.

 

Аэропорт Шереметьево выступил партнёром для двух хакатонов конкурса «Цифровой прорыв». В рамках хакатона «Умные города. Промышленность. ТЭК» Шереметьево предложил командам разработать рабочее место диспетчера аэропортовых служб и рабочее место полевого инженера для решения задачи очистки лётного поля от снега в зимний период с целью оптимизации деятельности аэропортовых служб, выполняющих работы на лётном поле.

 

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

 

Команда Webjox team заняла 3-е призовое место во всероссийском конкурсе «цифровой прорыв» и вышла в финал!


Наша команда webjox team представила свой вариант решения данного кейса.

 

Тизер решения:
- Реализованный функционал 
- Telegram бот
- Веб-сервис

 

Особенность проекта:
- Создание заданий с текущей геолокацией через Телеграм бота
- Отслеживание техники на карте в реальном времени;
- Установка таймера на заданиях
- Коммуникация диспетчера с исполнителем, по поставленной задачи, через комментарии к задаче. Уведомления исполнителю приходят в Телеграм бота
- Добавление и редактирование информации о заданиях, работниках, техники через сайт

 

Основной стек технологий:
- HTML, CSS, JavaScript
- React
- Git
- Python, Django, DR

 

https://leadersofdigital.ru/event/63006/case/678952

project-image

13.12.2022

Объявлены победители первого хакатона конкурса «Цифровой прорыв»

Мы вышли в финал всероссийского хакатона


Первый тур соревнований был посвящен решениям для сферы образования – «Образование. Развитие кадров» (EDTech).

 

В течение 48 часов наша команда пыталась решить кейс от Министерства науки и высшего образования Российской Федерации, который направлен на развитие кадров и цифровизацию образования в России.

 

Команда Webjox заняла 3-е призовое место во всероссийском конкурсе «цифровой прорыв» и вышла в финал!

 

«Цифровой прорыв» – крупнейшее командное соревнование в сфере информационных технологий, отмеченное экспертами книги рекордов Гиннеса.

 

Конкурс направлен на поиск новых кадров в сфере It по всей России и представляет собой серию хакатонов . Участникам предоставляются различные кейсы, которые необходимо решить в ограниченное время.

 

Наша команда webjox представила свой вариант для разработки сайта по поиску it-специалистов по всей России. Мы предложили гибкое решение с упором на государственную поддержку, которое позволит it развиваться в регионах.

 

В качестве вариантов решения были предложены: анализ рынка труда, анализ трудовой деятельности выпускников ВУЗов и анализ процедуры их распределения. 

 

Тизер решения: 

 

- Решение позволяет собирать и анализировать данные по субъектам Российской федерации для корректировки образовательных программ и программ дополнительного профессионального образования в соответствии с запросами рынка труда;

 
-  ИИ, парсер данных, микросервисы, карты, масштабируемость проекта;


-  Анализ рынка труда, сбор актуальных вакансий и резюме. Анализ трудовой деятельности выпускников ВУЗов. Аналитика экономической эффективности ВУЗа.

 

Уникальность решения данного проекта в том, что наш ИИ позволит собирать и анализировать информацию по показателю трудоустройства выпускников IT направления.


В перспективе на базе данного проекта будет разработан новый функционал , к примеру: рейтинг ВУЗов. Он позволит видеть ВУЗы которые готовят наиболее релевантных специалистов для IT-рынка.

 

"Этот хакатон объединил специалистов, заинтересованных в развитии EdTech и HRTech, со всей России. Именно такие кадры смогут вывести все сферы жизни на качественно новый уровень", – сказал директор ассоциации электронных коммуникаций, руководитель конкурса "Цифровой прорыв" Сергей Плуготаренко.

 

https://dni.ru/society/2021/4/19/476348.html 

project-image

13.12.2022

Как работает seo

Иван захотел купить холодильник и вводит в поисковую строку прямой запрос “холодильник Ростов”. 

 

Google и Яндекс сначала выдают контекстную рекламу, но в 90% случаев пользователи ее или пропускают вовсе или вместе с рекламными ссылками открывают реальные первые места в поисковике. 

 

Иван открывает первые 3-5 вкладок, которые не помечены, как “реклама”, чтобы сравнить цены, найти какие-то акции. Иван среднестатистический пользователь, он не дотошный и не станет изучить ВСЕ магазины с холодильниками в Ростове-на-Дону, так что дальше этих трех-пяти вкладок не подойдет. Вы даже не сможете сделать Ивану выгодное предложение, поскольку он его попросту не увидит, если ваш магазин где-то внизу поискового запроса. 

 

Чтобы интернет привел Ивана именно к вам, то ваше му сайту необходимо продвижение и лучше всего с этим справится SEO продвижение. Если по-простому, то SEO - это комплекс работ по улучшению сайта и его оптимизации для более высокой поисковой выдачи. 

 

Главное, что нужно понимать о SEO, что это отчасти бесплатное продвижение. Вам не нужно платить поисковой системе за то, чтобы она ставила вас выше конкурентов, такие гиганты как Яндекс и Google сами анализируют сайты и поднимают вверх наиболее релевантные для пользователей. Магазины, помеченные, как “реклама” менее привлекательные для пользователя, ведь они понимают, что это купленное место и чаще всего такие как Иван опускаются к реальным первым местам поиска.  

 

И как тогда поднять свой сайт в поисковой строке среди общего потока всех страниц в интернете? Рассмотрим самые рабочие способы:

 

• Ключевые слова.


Вспоминаем поисковой запрос Ивана “холодильник Ростов”. На вашем сайте чуть ли не большими буквами должно быть написано “Купить холодильник в Ростове цена холодильника”, причем не только в названии сайта, но и внутри. 

 

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

 

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

  

• Техническое состояние сайта. 


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

 

• Удобство пользования


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

 

• Отзывы Яндекс-маркета


Яндекс помимо всего прочего анализирует количество и качество отзывов на Яндекс-маркете. Если отзывов много, они развернутые и понятно, что это живые люди, то Яндекс поднимает такие магазины даже выше, чем сайты с более высокой оценкой.  


Чтобы интернет продвижение приносило плоды важно понимать: кому вы продаете, что вы продаете, что интересует вашу ЦА (целевая аудитория) и что она обычно ищет (какие ключевые слова), отвечает ли сайт современным тенденциям по скорости и качеству работу. 

 

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

 

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

project-image

13.12.2022

Конструктор сайтов: почему framework лучше CMS

Прежде чем говорить о том, что кто-то лучше, а кто-то хуже, нужно сначала разобраться, что мы вообще сравниваем. Чаще всего под софтом для создания сайтов подразумевают CMS. Это самая популярная система управления контентом, по своей узнаваемости напоминает Lego, да и функционал очень схож со знаменитым конструктором: дают коробку с деталями и можешь строить из них то, что нарисовано на коробке, но не более. Например, купили вы обычную коробку с домиком и человечками, но захотели построить «звезду смерти», из этих деталек это будет сделать невозможно, так и сайтом если захотели добавить функционал, который изначально не предусматривался в CMS, то легко и просто это сделать не выйдет. И как быть?

 

Попробовать другой конструктор.

 

Framework – это набор библиотек, а значит вам доступным всевозможные «конструкторы» разом, можно взять хоть по кусочку от каждого и собрать нечто совершенно непохожее на все остальное. И если CMS похожа на Лего, то framework можно сравнить с 3D принтером – напечатает что угодно, но со своими ограничениями: чем более сложная фигура, тем дольше происходит процесс ее реализации. Зато вы не покупаете готовую коробку с ограниченным набором деталей по конкретной тематике, а можете делать эти самые детали сами, какие захотите, в итоге собирая свою «коробку».

 

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

 

Основной преимущество framework перед прочими конструкторами сайтов это его эффективность. Быстрее только чистый PHP, который не обеспечивает должного уровня безопасности, поэтому framework в этом смысле оптимальнее. В процессе сборки сайта с framework проще найти и устранить возможные дыры в безопасности.

 

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

 

Рассмотрим как framework может улучшить и разнообразить функционал:

 

• Нетиповое или уникальное решение. Например для разнообразия карточек товаров, многие готовые решения предлагают только смену расцветки товара, а с framework можно добавить еще изменение размера и 3D все в одной карточке.


• Уникальная вёрстка. В интернете есть готовые шаблоны с дизайном сайта, с которыми уже ничего не сделаешь, просто подставь готовые макеты товар или текст, framework позволит эти же шаблоны модифицировать: добавить видео-слайдер или напротив убрать лишний блок.


• Сайт с высокой посещаемостью и нагрузкой (highload).


• Активно развиваемый, расширяемый и/или стихийно изменяющийся под требования рынка проект. Шаблоны и готовые решения сковывают, представим ситуацию: решили вы на сайте создать новую функцию такую как «калькулятор услуг» (онлайн-калькулятор, который считает стоимость работы) и вам нужно, чтобы он был на главной странице, но готовый шаблон предполагает, что на главной у вас слайдер и туда калькулятор не вставит. Чтобы сделать калькулятор необходимо брать новый шаблон, а соответственно делать новый сайт. А потом понадобится добавить еще функцию… Framework позволит вводить все нововведения быстро и без особого ущерба старой верстке.

project-image

13.12.2022

Цвет 2021 года. Советы по дизайну

По версии Pantone, главными цветами 2021 года станут серый (17-5104 Ultimate Gray) и яркий желтый (13-0647 Illuminating).

 

До этого сразу два «цвета года» выбирали 5 лет назад, в 2016 ими являлись 15-3919 Спокойствие / Serenity (сиреневый) и PANTONE 13-1520 Розовый Кварц / Rose Quartz.

 

Цвет выбран из-за случившейся ситуации в мире. Все ждут, когда закончится пандемия, которая длится уже два года и унесла много жизней. COVID-19 изменил общество, пришлось срочно перестраивать все сферы жизни, чтобы обезопасить себя и близких. Люди ждут, когда снова будут чувствовать себя в безопасности, им нужен свет в конце тоннеля, который покажет выход. И компания Pantone предложила создавать свой «свет» с помощью желтого освещающего оттенка и серого, который как бы оттеняет этот свет, усиливая его.

 

Цвета 2021 — это природная светотень, которая постоянно присутствует вокруг нас: деревья отбрасывают тень на землю под светом солнца или луны, кошка, вылезая из темного переулка, оказывается освещена ярким светом вывески и тоже отбрасывает тень. Вожделенный свет, в казалось бы потускневшем мире, на самом деле присутствует вокруг нас, нужно только его увидеть.    

 

Серый Ultimate Gray, спокойный, деловой, универсальный. Серый стильный, если мы говорим об обработке в черно-белом формате.  Как раз особенно выигрышно выглядит, когда на черно-белой картинке какая-то деталь цветная: это сразу привлекает внимание, а цвет не выглядит кричащим: он яркий только на фоне как бы серого мира изображения.

 

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

 

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

 

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

 

Для социальных сетей можно задействовать тренд последних лет – 3D объекты. Использовать их для своих фотографий, а оформить в серо-желтых цветах всю «картинку».

 

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

 

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

 

«Выбор двух независимых цветов подчеркивает то, как разные элементы объединяются, чтобы выразить послание, которое одновременно устойчиво и воодушевляюще, передавая идею важности союза как цветов, так и людей. Сочетание стойкого Ultimate Grey с ярким желтым Illuminating выражает послание позитива, подкрепленное силой духа».

tg-button