Создание простого веб приложения

При устройстве на работу java программистом меня попросили написать тестовое web приложение «Телефонный справочник». Хочу поделиться с вами этим «шедевром».

Вид и функциональность приложения

Инструменты

Создание проекта

Укажите путь к Java в Project SDK.

Укажите путь к своей Maven home directory.

«Maven projects need to be imported» кликаем Enable Auto-Import.

Добавим Tomcat Server.

В Application server укажите путь до Tomcat сервера.

Ok -> Apply -> Ok

Проверим, что всё работает.

Клиент (ExtJS)

Добавим файлы фрэймворка.

Модель ExtJS MVC.

Создадим файл app.js

Метод Ext.application инициализирует приложение Ext JS;
name: ‘PhonesDir’ указывает имя приложения, которое будет затем использоваться для создания полных имен классов приложения;
appFolder: ‘app’ указывает на нашу папку с инфраструктурой приложения (controller, model, store, view);
launch: function()<> тут происходит создание приложения.

В файле index.jsp подключаем стили ExtJS, затем фреймворк ExtJS и только потом app.js:

Проверим, что всё работает.

Нам понадобится четыре вида — это вид поиска SearchPhones.js, вид таблицы PhoneGrid.js, вид формы добавления данных AddWindowForm.js и вид каркаса PhonesDirectory.js, куда мы поместим все виды.

Изменим параметр items в app.js.

‘phonesDirectory’ алиас, который мы указали в параметре alias в PhoneDirectory.js.
Метод Ext.define(‘Имя’, <параметры>) создает класс-компонент, который может быть унаследован от какого-нибудь компонента. Например в PhoneGrid.js указали extend: ‘Ext.grid.Panel’, что будет представлять собой таблицу.

Controller

Виды загружаются из контролера, поэтому создадим контролер PhonesDirectoryControoler.js и укажим его в app.js

С помощью параметра init инициализируются обработчики для компонентов (кнопки, поля и т.д). Связать конпонент с обработчиком помогает функция control.

Конечная структура app.js

Проверим, что всё работает.

Модель и хранилище

pageParam: ‘search’ нужен для реализации логики поиска на сервере. В нём будут находится данные из поля поиска и, если не пусто, сервер выполнит выборку данных из БД , иначе вернет все данные.

‘phone’ имя, на которое будет замапен java-класс (контролер), который будет обрабатывать GET, POST, DELETE запросы с клиента.

Добавим модель PhonesDirectoryModel.js и хранилище PhonesDirectoryStore.js в контролер PhonesDirectoryController.js

Добавим в PhonesGrid.js параметр store: ‘PhonesDirectoryStore’, для отображения данных в таблице.

Проверим, что всё работает. 404 (Not Found) — это нормально, так как по адресу localhost:8080/phone еще ничего нет.

Сервер (Java)

Создадим папку java:

Создадим модель данных и слой доступа к данным (DAO)

Метод getPhones(String search) принимает значение параметра, которого мы указали в PhonesDirectoryModel.js;
Метод findByPhone(String name, String phone) используется для поиска дубликата при добавлении данных.

Создадим слой сервиса:

Создадим контролер, который будет замапен на адрес /phone для обработки запросов с клиента.

Каждый метод замапен на соответствующий запрос с клиента. Внедряем зависимость с помощью spring аннотации @Autowired и вызывает соответствующие методы у сервиса;
ExtResult — вспомогательный класс. Используется для ответа клиенту, что сущность, которую пытаемся записать в БД , дубликат или не дубликат.

Проверьте, что всё работает. Соберите проект с помощью maven install и запустите приложение.

Создадим spring контекст my-context.xml c:

настройками подключения к БД;
бином EntityManager — объект, через который происходит взаимодействие с БД. Инжектится в PhoneDaoImpl.java;
инжектом объекта класса PhoneDaoImpl.java в объект класса PhoneServiceImpl.java.

Создайте БД с названием phonedir или измените название в контексте на своё.

Создадим настройки для spring DispatcherServlet, который будет обрабатывать запросы с клиента.

context:component-scan поиск и регистрация компонентов в контейнере спринга;
mvc:view-controller домашняя страница;
mvc:resources автоматически обрабатывать запросы на получение статических данных.

Добавим spring контекст my-context.xml и настройки для spring DispatcherServlet в дескриптор развертывания web.xml

Добавим в контролер PhonesDirectoryController.js параметр refs и обработчики для компонентов.

ref ссылка на что-то в selector’e.
selector указывает на компоненты, для быстро обращения к ним через ref.
onSavePhone создается модель данных и сохраняется.
onAddPhone создает виджет формы добавления.
onDelPhone удаляет запись.
onChangeText загружает данные в соответствии со значением в поле поиска.
onLineGrid при выделении строки кнопка «Удалить» становится активной
onValidation валидация полей формы добавления.

И последнее — добавим иконки к кнопкам «Добавить» и «Удалить»:

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

Если вы читаете эту статью, значит вы в поисках идеи. Вероятно, вы хотите создать простое приложение, которое можно использовать в примере проекта, для тестирования нового фреймворка или API. Но Вы не можете найти ничего, что действительно резонирует с вами.

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

Подборка разделена на категории: без/с использованием внешнего API, без/с требованием серверной части и т. д.

Приложение для отслеживания веса

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

Калькулятор

Реализовать стандартные операции +, -, *, / над числами и вывод результата.

Библиотека

хранение книг, которые вы прочитали/купили;
раздел “буду читать”;
хранение информации о книге и суперобложке.

Книга рецептов

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

Контроль расходов

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

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

Блокнот

создание нового блокнота;
список всех заметок в сайдбаре;
хранение всего перечисленного.

Личный дневник

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

Таймер/будильник

ввод времени;
запуск таймера;
сигнал по прошествии времени.

Генератор мемов

хранение десяти популярных картинок-мемов;
возможность добавлять пользовательский текст;
результат картинка + текст;
хранение истории.

Крестики-нолики

Всем известная игра: попробуйте реализовать.

Игра в жизнь

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

Движок блога

возможность логиниться и создавать посты;
дать возможность посетителям оставлять комментарии;
хранение всего перечисленного.

Вопрос-ответ

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

Форум

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

Встроенный “живой” чат

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

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

Новостной клиент

выведение на экран списка популярных новостей;
просмотр комментариев;
просмотр пользовательских профилей;
поиск.

Несколько примеров для вдохновения: раз, два.

Reddit клиент

просмотр списка популярных постов;
выведение списка комментариев к постам;
редактирование пользовательских профилей.

Instagram клиент

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

GitHub API клиент

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

Unsplash API клиент

организовать поиск изображения по теме;
позволить юзеру вводить ключевое слово и по нему делать поиск изображений.

Вот официальный хелп по данному API.

Для создания веб-приложений обязательно нужны данные для "заглушек", картинки, API и т. д.

Этот процесс гораздо скучнее, чем кодинг поэтому мы немного сэкономим вам время на поиске нужных компонентов.

Переводы , 18 марта 2018 в 14:35
Никита Прияцелюк

Одной из самых приятных особенностей Java является её многогранная природа. Конечно, создание традиционных десктопных и даже мобильных приложений — это здорово. Но что, если вы хотите уйти с проторенных дорожек и зайти на территорию разработки web приложений на Java? Для вас есть хорошая новость: в комплекте с языком идёт полноценный Servlet API, который позволяет вам создавать надёжные веб-приложения без особых хлопот.

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

Создание приложений на Java с помощью Servlets

Встречайте сервлеты, особый тип Java-программ, выполняемый в пределах веб-контейнера (также называемый контейнером сервлетов, как, например, Tomcat и Jelly), которые позволяют обрабатывать запросы клиентов и ответы сервера просто и эффективно. Сейчас не время и не место дотошно объяснять вам, что из себя представляет сервлет. Достаточно сказать, что сервлеты создаются и уничтожаются их контейнерами, а не разработчиком, и действуют как промежуточный уровень между клиентами (как правило, веб-браузерами) и другими приложениями, запущенными на сервере (например, базами данных).

Сервлет — классная штука, которая помимо всего прочего может принимать данные от клиента, как правило через GET и POST-запросы, работать с cookie и параметрами сеанса. А ещё она обрабатывает данные через дополнительные уровни приложений и отправляет выходные данные клиенту как в текстовом, так и в бинарном форматах (HTML, XML, PDF, JPG, GIF и т.д.), во многих случаях используя Java Server Pages (JSP) файлы.

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

Разбираемся с конфигурационными файлами

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

Первым шагом к созданию приложения является определение так называемого дескриптора развёртывания. Он указывает, как приложение должно быть развёрнуто в определенной среде. Когда дело касается веб-приложений, дескриптор развёртывания представляет собой простой XML-файл, называемый web.xml и является частью стандартной спецификации Java EE. В нашем случае он будет выглядеть так:

Как вы видите, web . xml только определяет версию Java Servlet Specification (3.1), которую мы будем использовать в приложении. Разумеется, в нём может быть гораздо больше содержимого, включая директивы сопоставления сервлетов, параметры инициализации, список приветственных файлов и несколько дополнительных настроек. Но чтобы не усложнять процесс разработки, давайте оставим его таким как есть.

LATOKEN, Москва, от 200 000 до 360 000 ₽

Так как наше приложение будет использовать Servlet API и Java Servlet Pages (JSP) для отображения данных клиента, нам нужно загрузить все необходимые JAR. Maven сделает за нас трудную работу, вот как будет выглядеть файл POM:

Если говорить просто, pom.xml определяет все зависимости, необходимые для работы с сервлетами: JSP, Java Standard Tag Library (JSTL) и Java Expression Language (JEL).

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

Работаем над внешним видом

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

Вот первый JSP-файл:

Файл содержит простой HTML с парочкой дополнений. Вот она, прелесть JSP в сочетании с JSTL и JEL. Обратите внимание на то, как легко проверить наличие ошибок валидации, используя такие стандартные теги, как и .

Атрибут формы регистрации action указывает на следующий URL: $/processcustomer . Это значит, что каждый раз, когда клиент пытается зарегистрироваться, данные будут отправляться в processcustomer независимо от URL, по которому доступна форма. Это достигается за счёт функциональности объектов, доступных из JSP-файла, таких как request .

Скоро мы увидим, как сервлет связывается с URL processcustomer и как он взаимодействует с введёнными данными. А пока давайте посмотрим на JSP-файл, который отвечает за страницу приветствия:

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

Пишем контроллер

Написать сервлет, способный получить данные из формы регистрации, проще простого. Всё, что нам нужно сделать, — это написать подкласс для класса HttpServlet и реализовать его методы doGet() или doPost() (или оба, если надо). В данном случае сервлет будет взаимодействовать с данными, поступающими из POST-запросов.

Вот как он выглядит:

Первое, на что здесь стоит обратить внимание, — использование аннотации @WebServlet(name ="CustomerController", urlPatterns = "/processcustomer") . Она говорит контейнеру сервлета использовать класс CustomerController для обработки HTTP-запросов по адресу /processcustomer . Того же эффекта можно достичь путём добавления директив сопоставления сервлетов в web.xml , как здесь, но так как мы используем Servlet Specification 3.1 нам нет необходимости прибегать к такому способу.

Здесь мы назвали сервлет CustomerController , так как считается хорошей практикой использовать имя класса сервлета в качестве значения атрибута name аннотации @WebServlet . В противном случае некоторые контейнеры не смогут выполнить сопоставление, что приведёт к ошибке 404.

Сам класс CustomerController выполняет несколько простых задач. Во-первых, он собирает введённые в форму данные, используя реализацию интерфейса HttpServletRequest , который содержит значения, соответствующие полям firstname , lastname и email формы. Затем он устанавливает эти значения в качестве атрибутов запроса, поэтому их можно повторно отобразить либо в форме, либо на странице с результатами. Наконец, валидаторы проверяют правильность введённых данных.

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

Результат валидации влияет на дальнейший ход событий: если данные не валидны, клиент перенаправляется через объект RequestDispatcher на страницу регистрации, где отображаются соответствующие ошибки. Если всё в порядке, то отображается страница приветствия.

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

Запускаем приложение

Для запуска приложения нужно проделать следующие шаги:

Для начала нам понадобится Git (убедитесь, что скачиваете подходящую версию), Maven и контейнер сервлета (например, Apache Tomcat, Jetty, или JBoss Wildfly). Если что-то из этого уже включено в вашу IDE, то вы можете использовать встроенный вариант.
Используйте Git, чтобы клонировать репозиторий приложения, и импортируйте его в вашу IDE, желательно как проект Maven.
Разверните проект в контейнере сервлета и запустите его. Развёртывание подразумевает создание WAR-файла или exploded WAR и его помещение в папку развёртывания контейнера по умолчанию. Зачастую IDE способна сделать развёртывание за вас, поэтому не перегружайте себя лишней работой и посмотрите документацию вашей IDE (документация для IntelliJ IDEA). Когда вы развернёте проект и запустите его, должен запуститься бразуер по умолчанию с окном регистрации.
Попробуйте заполнить не все поля в форме или вовсе не заполнить их и вы увидите, как поверх соответствующих полей отобразятся ошибки. Введите всё как положено, и вас перенаправит на страницу приветствия.

Заключение

Итак, вы приобрели все навыки, необходимые для создания собственного веб-приложения на Java без необходимости прибегать к сложным фреймворкам. Всё, что вам нужно, — Servlet API, технология вроде JSP для отображения и встроенные средства Java. Здорово, правда?

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