https://github.com/profcomff/hr-ui-bot
https://github.com/profcomff/hr-ui-bot
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/profcomff/hr-ui-bot
- Owner: profcomff
- License: bsd-3-clause
- Created: 2025-04-20T10:46:05.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-04-30T18:13:42.000Z (6 months ago)
- Last Synced: 2025-06-05T10:50:32.248Z (5 months ago)
- Language: TypeScript
- Size: 138 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Пример приложения
В этом репозитории представлен пример простейшего фронтенд-сервиса с Vue.js.
*Большая часть команд и инструкций написаны для операционных систем Linux и MacOS.*
## Зависимости
- Node.js v18 – среда исполнения на языке JavaScript/TypeScript
- NPM – консольный менеджер пакетов для установки библиотек (идет в поставке с Node.js)
- Vue.js – фраемворк для разработки фронтенда
- Vite – консольный менеджер для удобства работы с Vue.js
## Frontend разработка на Vue.js
Фронтенд (англ. front end, frontend) — презентационная часть web приложения, её пользовательский
интерфейс и связанные с ним компоненты.
В данном примере используется популярный фраемворк [Vue.js](https://vuejs.org/). Разработка ведется
на языке TypeScript.
## Разработка
Для удобства разработки в VS Code создан [workspace](../frontend.code-workspace) с преднастроенными
командами и рекомендованными расширениями для работы.
Перед началом работы нужно установить зависимости командой
```
pnpm install
```
Для локального запуска необходимо выполнить команду
```
pnpm dev
```
### Важные замечания по коду
- Приложение предполагает, что вы запускаете его из Твой ФФ. Чтобы имитировать запуск из Твой ФФ:
1. Зарегистрируйтесь в тестовой среде «Твой ФФ!» по адресу https://app.test.profcomff.com/auth. Подтвердите аккаунт и войдите в пользователя (при необходимости).
2. Перейдите в панель администрирования https://app.test.profcomff.com/admin.
3. Нажмите кнопку «скопировать параметры приложения».
4. Подставьте полученную строку после адреса вашего приложения в браузере
Код, который обрабатывает данные пользователя из URL находится здесь: https://github.com/profcomff/app-template/blob/1070d4370d37529702d7499baeaf145ba4cd9e62/frontend/src/store/profileStore.ts#L15-L28
- `./src/api/user/AuthApi.ts` и `./src/api/user/UserdataApi.ts`
в этих файлах хранится код взаимодействия с [Auth API](https://api.profcomff.com/?urls.primaryName=auth)
и [Userdata API](https://api.profcomff.com/?urls.primaryName=userdata), позволяющие получить
информацию о текущем пользователе.
- По умолчанию используется тестовая среда для общения с API Твой ФФ! Данное поведение меняется в файле `.env`: https://github.com/profcomff/app-template/blob/main/frontend/.env
## Инструкции
### Получение кода на свой компьютер
Для работы с данным примером необходимо забрать его к себе на ПК. Для этого нужно:
1. *(Опционально)* Если вы хотите далее опубликовать код на GitHub полезно сначала скопировать
репозиторий к себе кнопкой Fork на GitHub. Кнопка доступна в правом верхнем углу
[страницы репозитория](https://github.com/profcomff/app-template).
2. Создайте папку в удобном вам расположении.
- *Удобно создать папку на рабочем столе с названием вашего приложения.*
3. Откройте приложение "Командная строка" или "Терминал", в зависимости от операционной системы.
4. Прейдите в папку проекта командой `cd /путь/к/папке`.
- Если вы пользователь windows и создали на рабочем столе папку `my_app`, то команда будет
выглядеть так: `cd %userprofile%/Desktop/my_app`
- Если вы пользователь linux или MacOS и создали на рабочем столе папку `my_app`, то команда
будет выглядеть сделующим образом: `cd ~/Desktop/my_app`
5. Склонируйте код репозитория к себе на ПК командой
`git clone https://github.com/profcomff/app-template.git .` (точка в конце означает скачивание
кода в текущую папку). Если вы выполнили пункт 1 используйте в команде ссылку из зеленой кнопки
"Code" в правом верхнем углу вашего репозитория.
6. Откройте код в удобной среде разработки. Рекомендуем использовать VSCode, который можно открыть
из терминала командой `code .`
### Сборка и запуск приложения для публикации
Сборка исходного кода в один пакет производится с помощью Docker. В этом случае создается
независимый от операционной системы пакет, который можно без проблем разместить на любом сервере.
Выполните команду `make` для сборки приложения. После окончания выполнения этой команды будет создан
новый Docker образ с названием `my_app`, который можно запустить командой `make run`
### Автосборка
Коммит в main запускает автоматическую сборку проекта средствами GitHub Actions. Настройки автосборки находятся в
файле [.github/workflows/build_and_publish.yml](.github/workflows/build_and_publish.yml).
### Тесты на Pull Request
При создании запроса на слияние, автоматически создаются проверки кода юниттестами и на стили.
Следующие тесты будут запущены:
- Проверки стилей `eslint`, `prettier`, `stylelint` на код в папке `frontend`
Настройки автотестов находятся в файле[.github/workflows/checks.yml](.github/workflows/checks.yml).
### Публикация готового приложения
На данном этапе вам необходимо разместить приложение на каком-либо хостинге, поддерживающем протокол https.
Для этого подойдет любой VPS сервер, который вы можете найти в интернете. Мы рекомендуем использовать VPS сервера на операционной системе linux, для удобства размещения приложений и компонентов использовать Docker.
Чтобы получить SSL сертификаы для поддержки https можно использовать letsencrypt.com, предоставляющий SSL сертификаты бесплатно. Для удобства работы можно использовать веб сервер с встроенной поддержкой этих сертификатов, например Traefik или Caddy.
Шаблон приложения имеет уже готовые [Dockerfile](cicd/Dockerfile) для сборки вашего приложения, файл [docker-compose.production.yml](cicd/docker-compose.production.yml) с настройками развертывания приложения с Caddy Server и включенным https, а также базой данных PostgreSQL.