Docs

README.md

@@ -4,6 +4,9 @@
 в качестве бэкэнда приложения, и Vue.js приложения в качестве фронтенда.
 
 
+*Большая часть команд и инструкций написаны для операционных систем Linux и MacOS.*
+
+
 ## Рекомендуемые пакеты для разработки
 - Git
 - Make
@@ -66,4 +69,10 @@
 Настройки автотестов находятся в файле[.github/workflows/checks.yml](.github/workflows/checks.yml).
 
 ### Публикация готового приложения
-TODO: Предложить быстрый и бесплатный способ деплоя Docker контейнеров
+На данном этапе вам необходимо разместить приложение на каком-либо хостинге, поддерживающем протокол 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.

backend/README.md

@@ -1,8 +1,28 @@
-# Мое приложение
+# Бэкэнд приложения на Python + FastAPI
 
-Бэкэнд приложения-примера
+Бэкенд (англ. back-end) — начинка сайта или приложения, скрытая от пользователя. Бэкендом называют
+часть сервиса, которая работает на сервере, а не в браузере или на компьютере.
 
-## Запуск
+В данном примере бэкэнд представляет из себя код для реализации HTTP API для общения с фронтендом.
+Для простоты реализации использована популярная библиотека [FastAPI](https://fastapi.tiangolo.com/).
+
+
+## Зависимости
+- `fastapi` – фраемворк для реализации http api интерфейсов
+- `pydantic` – библиотека проверки типов данных
+- `auth-lib-profcomff[fastapi]` – утилиты для работы с Auth API приложения Твой ФФ
+- `SQLAlchemy` – фраемворк для взаимодействия с базами данных
+- `psycopg2-binary` – драйвер для подключения к базе данных PostgreSQL
+- `alembic` – библиотека для автоматизированного исполнения изменений в базе данных
+
+
+## Разработка
+
+Для удобства разработки в VS Code создан [workspace](../backend.code-workspace) с преднастроенными
+командами и рекомендованными расширениями для работы.
+
+Рекомендуется создать виртуальное окружение для проекта и установить в него зависимости, в том числе
+для разработки:
 
 1. Перейдите в папку проекта
 
@@ -15,8 +35,26 @@
 
 3. Установите библиотеки
     ```console
-    foo@bar:~$ pip install -r requirements.txt
+    foo@bar:~$ pip install -Ur requirements.txt -r requirements.dev.txt
     ```
+
+
+## Запуск
+
+1. Перейдите в папку проекта
+
+2. Создайте виртуальное окружение (если оно еще не создано) командой и активируйте его:
+    ```console
+    foo@bar:~$ python3 -m venv venv
+    foo@bar:~$ source ./venv/bin/activate  # На MacOS и Linux
+    foo@bar:~$ venv\Scripts\activate  # На Windows
+    ```
+
+3. Установите библиотеки
+    ```console
+    foo@bar:~$ pip install -Ur requirements.txt
+    ```
+
 4. Запускайте приложение!
     ```console
     foo@bar:~$ python -m my_app_api

backend/my_app_api/routes/__init__.py

@@ -40,7 +40,7 @@
 @app.get("/")
 def redirect(request: Request):
     url = URL(
-        path='/ui/',
+        path="/ui/",
         query=request.url.components.query,
         fragment=request.url.components.fragment,
     )

frontend.code-workspace

@@ -22,7 +22,7 @@
 			{
 				"label": "Configure",
 				"type": "shell",
-				"command": "pnpm install",
+				"command": "npm install",
 			},
 			{
 				"label": "Run local",

frontend/README.md

@@ -1,18 +1,50 @@
-# Vue 3 + TypeScript + Vite
+# Фронтенд приложения на Vue 3 + TypeScript
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+Фронтенд (англ. front end, frontend) — презентационная часть web приложения, её пользовательский
+интерфейс и связанные с ним компоненты.
 
-## Recommended IDE Setup
+В данном примере используется популярный фраемворк [Vue.js](https://vuejs.org/). Разработка ведется
+на языке TypeScript.
 
--   [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+## Зависимости
+- Node.js v18 – среда исполнения на языке JavaScript/TypeScript
+- NPM – консольный менеджер пакетов для установки библиотек (идет в поставке с Node.js)
+- Vue.js – фраемворк для разработки фронтенда
+- Vite – консольный менеджер для удобства работы с Vue.js
 
-## Type Support For `.vue` Imports in TS
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+## Разработка
 
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+Для удобства разработки в VS Code создан [workspace](../frontend.code-workspace) с преднастроенными
+командами и рекомендованными расширениями для работы.
 
-1. Disable the built-in TypeScript Extension
-    1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+Перед началом работы нужно установить зависимости командой
+```
+npm install
+```
+
+Для локального запуска необходимо выполнить команду
+```
+npm run 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), позволяющие получить
+    информацию о текущем пользователе.