Рубрики
Без рубрики

Создание приложения, помогающего инженерам-строителям

Фон Я разработчик с почти 4-летним профессиональным опытом, и, поработав с Дж… С тегами svelte, java, kubernetes, mongodb.

Фон

Я разработчик с почти 4-летним профессиональным опытом, и, поработав с Java, SpringBoot, Vaadin (серверный фреймворк для создания пользовательских интерфейсов с помощью SASS и Java), немного JS и немного подправив СРЕДНИЙ стек в те дни, я никогда не создавал полноценное приложение самостоятельно, которое я бы счел готовым к производству. Недавнее приложение для хакатона Twilio было довольно приятным, но я использовал Heroku и Python, которые, будучи отличными сервисами и языками, все же не дотягивали до гибкости Java, с которой я сталкивался во всех местах, где я работал до сих пор.

Пока я учился на информатике, мой папа (который является инженером-строителем) планировал разработать веб-приложение, которое могло бы помочь ему и его коллегам отслеживать плотины, в частности, вести исторические записи сейсмических реакций плотин на любые события, такие как небольшие землетрясения или сбросы плотин, которые могут повлиять на структурную целостность плотин. Я никогда по-настоящему не думал, что однажды смогу сделать все это самостоятельно. Я имею в виду, что это потребовало бы работы с базой данных (о которой я знаю очень мало), для этого потребовался бы приличный внешний интерфейс с возможностью отображения диаграмм в Интернете, в конечном итоге загрузки файлов данных, авторизации, некоторых карт для точного определения местоположения плотин… и чтобы все это обернуть, мне нужно было бы иметь возможность развернуть это, чтобы его можно было продемонстрировать. Звучит как невыполнимая задача! Что ж, после почти 4 лет профессиональной веб-разработки, это история о том, как мне наконец удалось использовать свое высшее образование и опыт работы, чтобы создать что-то, что окажет положительное влияние на работу моего отца! Это очень отрадно и является важной вехой в моих профессиональных и личных достижениях!

Технологический стек: серверный, интерфейсный и стеки развертывания

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

  • Внешний интерфейс:

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

  • Стройный , как внешний каркас. Svelte – это новый, современный способ создания реактивных веб-приложений. Он использует компоненты в качестве основного строительного блока, где все компоненты хранятся в одном файле с расширением .svelte , где стили CSS, логика JS и декларативный HTML объединены вместе. Компоненты могут быть легко составлены и повторно использованы, что делает работу с ними очень интуитивно понятной;

  • Сапер – Сапер – это платформа для создания веб-приложений всех размеров, с прекрасным опытом разработки и гибкой маршрутизацией на основе файловой системы. Основанный на Svelte, и позволил мне иметь маршрутизацию, навигацию по страницам и готовый к использованию шаблон, который я мог бы создать поверх всего, используя Svelte:)

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

  • API выборки для связи с серверной частью;

  • d3.JS , которая представляет собой библиотеку JavaScript для работы с документами на основе данных. D3 помогает вам оживлять данные с помощью HTML, SVG и CSS. Акцент D3 на веб-стандартах предоставляет вам все возможности современных браузеров, не привязывая себя к проприетарной платформе, сочетая мощные компоненты визуализации и основанный на данных подход к манипулированию DOM;

  • Листовка , как библиотека для отображения и управления картами и маркерами;

  • Bootstrap , чтобы он выглядел более визуально привлекательным и “компонентизировал” мой пользовательский интерфейс с помощью гибких сеток начальной загрузки и их готовых ресурсов, таких как значки, кнопки и т. Д.

  • Компоненты дизайна материалов , очень конкретно, используемые для создания этого “карточного” компонента представления для отображения деталей adam:

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

Для развертывания переднего плана я использовал Vercel . Очень проста в использовании!

  • Серверная часть:

Серверная часть была оснащена API Java и Spring Boot REST, с помощью которого API fetch будет взаимодействовать для получения результатов и данных.

  • Spring Boot как основная платформа для создания API REST. Это один из самых популярных фреймворков веб-разработки Java, я уже писал об этом здесь раньше:)

Поскольку приложение должно будет иметь возможность обрабатывать загрузку и загрузку файлов Excel, я использовал библиотеку Apache POI для обработки excel на серверной части.

Чтобы сохранить загруженные данные и связать загруженные файлы с каждым реестром dam, мне нужно было использовать некоторое постоянное хранилище, и для этой задачи я выбрал драйвер Java Mongo для интеграции коммуникационных возможностей MongoDB в мой сервер Spring. Очень просто мы определяем свойство в нашем файле application.properties , которое определяет конфигурацию нашего приложения, и с этого момента Spring может взаимодействовать с кластером MongoDB, указанным в свойстве, таком как spring.data.mongodb.uri .

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

Это завершает его для бэкэнда. Теперь перейдем к развертыванию.

– Управление развертыванием серверных служб:

Поскольку Vercel предоставил мне отличный сервис для обработки моего внешнего развертывания, мне нужно было только найти способ развертывания внутреннего кода. Мой бэкэнд, по сути, был API Spring Boot REST, взаимодействующим с внешним поставщиком MongoDB, поэтому, если бы я мог развернуть приложение SpringBoot, я мог бы эффективно реализовать сценарий “полного стека”. К счастью, благодаря моей собственной работе и моим усилиям по обучению работе с Docker, я написал предыдущую статью о работе с Docker здесь.

Однако есть некоторые важные детали, которые я должен упомянуть здесь:

При развертывании в интрасети или в закрытой сети просто для предоставления доступа к файлу dockerfile коллегам или для локального тестирования на той же странице файл Dockerfile может быть записан в “локальной” среде, т. Е. Вы предполагаете, что все ресурсы, на которые ссылается файл Dockerfile, доступны в среде, в которой вы создаете свой образ. Это неверно при развертывании образа во внешний реестр Docker, например в Docker Hub. Там вам нужно явно захватить зависимости по мере перехода из центрального репозитория, поскольку они больше не доступны в среде сборки. Такой Докер-файл может выглядеть так:

# our base build image
FROM maven:3-jdk-8 as maven
WORKDIR /my-project
# copy the Project Object Model file
COPY ./pom.xml ./pom.xml
# fetch all dependencies
RUN mvn dependency:go-offline -B
# copy your other files
COPY ./src ./src
# build for release
# NOTE: my-project-* should be replaced with the proper prefix
RUN mvn package && cp /my-dir/target/my-project-0.0.1-SNAPSHOT.jar my-project.jar

FROM openjdk:8-alpine
WORKDIR /my-project
# copy over the built artifact from the maven image
COPY --from=maven /my-project/my-project.jar my-project.jar
EXPOSE 8080
ENTRYPOINT ["java","-jar", "/my-project/my-project.jar"]

По сути, реплицируйте свою собственную локальную сборку в облаке;)

Развертывание Docker с помощью простой службы кластеров Kubernetes

Наконец, чтобы использовать мой недавно созданный образ docker, мне нужен был способ развернуть образ, запустить мой контейнер и оставить его запущенным. Для этого я использовал Kubernetes, который позволяет очень просто указать обратный прокси-сервер, конфигурацию nginx, чтобы предоставить запущенную службу в контейнере docker внешнему миру в очень декларативной форме с использованием файлов конфигурации yaml. Чтобы сделать это бесплатно, я в итоге выбрал Cubesail в качестве моего размещенного провайдера Kubernetes, который очень гибок для того, что мне нужно. Для работы с Kubernetes вам необходимо иметь файл с конфигурацией кластера на вашем компьютере по адресу ~/.kube/config , и из этого файла при использовании команды kubectl с вашего терминала у вас есть доступ к набору команд и дополнительных конфигураций для управления кластерами, развертываниями, модулями, службами, секретами выдачи, сертификатами и т. Д. Все это делается с помощью таких команд, как kubectl получить развертывания и т.д.

Cubesail устраняет часть этой сложности, так как вы можете просто указать на репозиторий и ветвь github, и при фиксации ваше новое развертывание и связанные с ним модули будут воссозданы. По сути, модуль содержит запущенный экземпляр службы, который при доступе к внешнему миру через конфигурацию LoadBalancer (или одну из нескольких других возможностей) будет представлять собой развертывание, которому затем может быть назначен собственный внешний IP-адрес из модуля, который будет сопоставлен с удобным URL-адресом в конфигурации развертывания yaml, что сделает его доступным для внешнего мира.

И…это было все для развертывания.

Небольшая витрина на скриншотах

После всех подробностей, вот небольшой пример того, как приложение выглядит в настоящее время:

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

Оригинал: “https://dev.to/brunooliveira/building-an-app-to-help-civil-engineers-1h8j”