Фон
Я разработчик с почти 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”