Создаем веб-приложение на Spring и Angular. Log 1. Оно живое

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

Сегодня мы создадим “эмбрион” нашего проекта. Как можно догадаться из названия, ядром нашего проекта станет Spring Framework, а собирать наше детище мы будет с помощью Gradle.
К концу этого туториала у вас на руках должно быть простейшее (почти) веб-приложение.

Итак, начинаем.
Прежде всего убедитесь, что у вас установлено все необходимое. Нам понадобится:

Java SDK 8
Gradle (на момент написания у меня стояла версия 2.4.7)
IntelliJ IDEA Ultimate (2016.3.3)
Tomcat 8

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

В IDEA выбираем File > New > Project… (ну или сразу из приветственного экрана если существующих проектов нет)
В открывшемся окне слева щелкаем Gradle и справа отмечаем Java и Web.

Щелкаем Next и попадаем на окно где мы должны выбрать имя для нашего проекта. По стандарту Maven имена проектов на Java должны состоять из groupId, artifactId и версии (version). Для чего это нужно можете почитать на сайте Apache Maven, а я назову проект tutorial, а группой будет com.brainburns.

Вот как-то так.
На следующем экране отметьте галочкой Create directories for empty roots automatically, чтобы не создавать структуру папок вручную.

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

Первым делом надо заняться настройками сборки. Находим файл build.gradle

И заменяем

apply plugin: 'java'
apply plugin: 'war'

На

plugins {
   id 'java'
   id 'war'
}

Этот фрагмент должен находиться в начале файла build.gradle. Не забудьте его перенести, иначе возникнет ошибка!
Также нужно изменить значение для свойства sourceCompatibility с 1.5 на 1.8 и строчкой ниже добавить свойство targetCompatibility тоже поставить значение 1.8
Вот что должно получиться в итоге:

sourceCompatibility = 1.8
targetCompatibility = 1.8

Так, что мы вообще сейчас сделали? Во первых, использовали новый синтаксис добавления плагинов в Gradle. В данный момент Gradle DSL касающийся плагинов нестабилен, так что я решил использовать новейший (на момент написания, не забываем) вариант. Кстати, если вы знаете что такое Gradle DSL и не пошли гуглить, это значит что вы крутой разраб.
Теперь касательно sourceCompatibility и targetCompatibility. Это свойства (properties), которые притащил java плагин. Они отвечают за то, какая версия java используется для компиляции java-файлов (на самом деле, там чутка посложнее, но не будем сейчас вдаваться в подробности).

Давайте проверим работает ли сборка. Нам нужно запустить команду gradle build. Это можно сделать как из терминала,

так и через интерфейс IDEA.

Если вы все сделали правильно, в консоли должно появиться что-то вроде этого:

11:50:30: Executing external task 'build'...
:compileJava UP-TO-DATE
:processResources UP-TO-DATE
:classes UP-TO-DATE
:war UP-TO-DATE
:assemble UP-TO-DATE
:compileTestJava UP-TO-DATE
:processTestResources UP-TO-DATE
:testClasses UP-TO-DATE
:test UP-TO-DATE
:check UP-TO-DATE
:build UP-TO-DATE

BUILD SUCCESSFUL

Total time: 0.527 secs
11:50:39: External task execution finished 'build'.

Теперь пора проверить работает ли деплоймент.
Из верхнего меню выбираем Run > Edit Configurations… (можно из выпадающего списка справа вверху.

В открывшемся окне нажимаем на зеленый плюсик вверху слева и выбираем Tomcat Server > Local (не пугайтесь если сразу этот пункт не увидите, он может быть внизу списка).

После этого первым делом нужно как-нибудь назвать конфигурацию сервера. Я назову просто Tomcat 8, кстати в IDEA (и во многих других программах) можно перемещаться к полям используя только клавиатуру. Попробуйте не щелкнуть мышкой по полю, а просто нажать Alt+N. Вы увидите, что фокус перешел к полю Name, а если нажать Alt+V, то фокус переместиться к полю VM Options. То, какую кнопку вместе с Alt нужно нажимать, можно определить по тому, какой символ подчеркнут в названии поля.

Настало время подключить наш сервер. Нажимаем на кнопку Configure... (Alt+C) и в открывшемся окне указываем путь до того места, где лежит Tomcat. Если вы во время установки Tomcat’а создали переменную окружения TOMCAT_HOME, верные пути должны подставиться автоматически.

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

Лучше выбрать тот, который помечен (exploded), это значит что мы деплоим не архив, а каталог, что позволит нам очень быстро вносить изменения в работающее приложение.
На этом конфигурация деплоймента завершена, и мы можем запустить наше приложение на сервере.
Из верхнего меню выберите Run > Run ‘Tomcat 8’ (Tomcat 8 здесь написано именно потому что я выбрал такое имя для нашей конфигурации запуска). Можно также просто нажать Shift+F10. Если вы все сделали правильно IDEA запустит сервер Tomcat и задеплоит на него артефакт, собранный из нашего приложения. Также если вы не убрали флажок After launch в настройках сервера, должена открыться новая страница в браузере с нашим веб-приложением.

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

Подытоживая важно отметить, что IntelliJ IDEA и Gradle просто скрывают и автоматизируют часть работы по сборке и деплойменту веб-приложения. Если вы хотите знать, что именно происходит, когда мы нажимаем кнопку Run, попробуйте добиться того же эффекта без помощи IDE вызывая консольные команды и вручную запуская сервер. Это хоть и утомительно, но вполне возможно, однако можно легко допустить ошибку. Также ручная сборка очень полезна, если вы действительно хотите понимать как тут все устроено.

Приложение запустилось, но это еще не все. Необходимо активировать систему контроля версий. Про системы контроля версий (VCS) такие как Git и Mercurial (Subversion не вспоминаем) советую почитать самостоятельно. При разработке можно отказаться от тестирования, от IDE, от системы сборки, но без VCS разработка любого мало-мальски сложного приложения станет абсолютно невыносимой.
Итак, верхнее меню VCS > Enable Version Control Integration…

В открывшемся окне выбираем Git и нажимаем ОК

Система контроля версий добавлена и на нижней панели должна появиться вкладка Version Control. В ней должно быть что-то подобное:

Здесь список всех файлов, которые находятся в нашем проекте. Мы должны выбрать файлы, которые являются частью нашего приложения и закоммитить их. Проблема в том что сейчас Git индексирует много лишних файлов - настройки IDEA, например. Они не должны находиться в нашем Git репозитории, так как привязаны к конкретному инстансу IDEA и конкретному компьютеру. Нужно сделать так чтобы Git не обращал на них внимания. И сделаем мы это с помощью файла .gitignore. В корне приложения (у меня это папка tutorial) создайте файл с именем .gitignore (не забудьте точку в начале).
В этом файле в первой строке напишите:

.idea/

После этого список Unversioned файлов сильно сократится:

Теперь здесь именно те файлы, которые нам нужны.
Щелкаем по Unversioned Files и в контекстном меню выбираем Add to VCS.

Теперь эти файлы можно закоммитить. Выбираем чейнджлист Default и нажимаем Commit Changes. В открывшемся окне снимаем флажки с Perform code analysis и Check TODO, а в Commit Message пишем Init commit, после чего нажимаем Commit.

На сегодня это все. В следующей части мы продолжим конфигурацию нашего проекта. Скачать разрабатываемое приложение можно отсюда:
https://github.com/arthan1011/brainburns-tutorial
Если что-то непонятно спрашивайте в комментариях. Для меня это первый подобный пост, поэтому очень рассчитываю на ваши отзывы. Обратная связь крайне важна.