<?xml version="1.0" encoding="utf-8" ?><feed xmlns="http://www.w3.org/2005/Atom" xmlns:tt="http://teletype.in/" xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/"><title>@mj-dev</title><subtitle>Нейродизайнер. Web-девелопер. Делюсь краткими шпаргалками по темам. Выкладываю для скачивания сгенеренный контент.</subtitle><author><name>@mj-dev</name></author><id>https://teletype.in/atom/mj-dev</id><link rel="self" type="application/atom+xml" href="https://teletype.in/atom/mj-dev?offset=0"></link><link rel="alternate" type="text/html" href="https://blog.mj-dev.ru/?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=mj-dev"></link><link rel="next" type="application/rss+xml" href="https://teletype.in/atom/mj-dev?offset=10"></link><link rel="search" type="application/opensearchdescription+xml" title="Teletype" href="https://teletype.in/opensearch.xml"></link><updated>2026-05-06T11:30:56.896Z</updated><entry><id>mj-dev:githab-access-token</id><link rel="alternate" type="text/html" href="https://blog.mj-dev.ru/githab-access-token?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=mj-dev"></link><title>GitHub. Пароли, токены, ssh-ключи. Error 403.</title><published>2025-10-18T08:32:36.456Z</published><updated>2025-10-18T08:32:36.456Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img3.teletype.in/files/67/40/67404a70-88f2-4203-aaae-1b5d6e87f5d2.png"></media:thumbnail><category term="web-development" label="web development"></category><tt:hashtag>github</tt:hashtag><tt:hashtag>ssh</tt:hashtag><tt:hashtag>token</tt:hashtag><summary type="html">&lt;img src=&quot;https://img1.teletype.in/files/c4/ba/c4bacd75-87ac-40ea-9e19-be7f94b664da.jpeg&quot;&gt;Часто в начале работы с GitHub можно столкнуться с проблемой аутентификации. Вот ты завел аккаунт на GitHub, создал проект (репозиторий), скачал его на компьютер и внеся изменения попробовал выполнить команду в терминале git push. В терминале появились запросы ввести логин и пароль. Ты вводишь свои данные от аккаунта GitHub и получаешь ошибку 403 Permission denied - ошибку аутентификации.</summary><content type="html">
  &lt;figure id=&quot;EpzM&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/c4/ba/c4bacd75-87ac-40ea-9e19-be7f94b664da.jpeg&quot; width=&quot;1200&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;2uh0&quot;&gt;Часто в начале работы с GitHub можно столкнуться с проблемой аутентификации. Вот ты завел аккаунт на GitHub, создал проект (репозиторий), скачал его на компьютер и внеся изменения попробовал выполнить команду в терминале &lt;em&gt;git push. &lt;/em&gt;В терминале появились запросы ввести логин и пароль. Ты вводишь свои данные от аккаунта GitHub и получаешь ошибку 403 &lt;em&gt;Permission denied&lt;/em&gt; - ошибку аутентификации.&lt;/p&gt;
  &lt;p id=&quot;lXlB&quot;&gt;&lt;em&gt;&amp;gt; remote: Permission to [название репозитория] denied to [логин].&lt;/em&gt;&lt;br /&gt;&lt;em&gt;&amp;gt; fatal: «https://github.com/.../» недоступно: The requested URL returned error: 403&lt;/em&gt;&lt;/p&gt;
  &lt;p id=&quot;Wqd1&quot;&gt;Давай по шагам пройдем этот квест: уберем ошибки, настроим безопасные способы аутентификации и настроим удобную работу с GitHub.&lt;/p&gt;
  &lt;h2 id=&quot;oshibka_403_pri_git_push_git_pull&quot;&gt;Ошибка 403 при git push / git pull&lt;/h2&gt;
  &lt;p id=&quot;bIbs&quot;&gt;Если в терминале при git push / git pullв GitHub репозиторий ты вводишь логин пароль от GitHub аккаунта и получаешь ошибку 403 &lt;em&gt;Permission denied&lt;/em&gt;, то ты пытаешься аутентифицироваться через HTTPS с логином/паролем, но GitHub &lt;strong&gt;с августа 2021 года больше не принимает обычные пароли&lt;/strong&gt; для операций git push / git pull . Вместо этого &lt;strong&gt;нужно использовать Personal Access Token (PAT) или перейти на SSH-ключи&lt;/strong&gt;.&lt;/p&gt;
  &lt;p id=&quot;yeCg&quot;&gt;&lt;strong&gt;### Проверь вводимые данные&lt;/strong&gt;&lt;/p&gt;
  &lt;ul id=&quot;IIiw&quot;&gt;
    &lt;li id=&quot;h1Tl&quot;&gt;&lt;strong&gt;Username&lt;/strong&gt; for &amp;#x27;https://github.com&amp;#x27;: [логин] → ты &lt;strong&gt;правильно&lt;/strong&gt; указал &lt;strong&gt;логин&lt;/strong&gt;.&lt;/li&gt;
    &lt;li id=&quot;RTqv&quot;&gt;&lt;strong&gt;Password&lt;/strong&gt; for &amp;#x27;https://[логин]@github.com&amp;#x27;: → GitHub &lt;strong&gt;ждёт токен, а не пароль&lt;/strong&gt;.&lt;/li&gt;
    &lt;li id=&quot;Lgxi&quot;&gt;remote: &lt;strong&gt;Permission denied&lt;/strong&gt; → значит, авторизация не прошла. &lt;strong&gt;Рассмотрим варианты решения ниже&lt;/strong&gt;.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;h3 id=&quot;kak_ispravit&quot;&gt;&lt;strong&gt;Как исправить&lt;/strong&gt;&lt;/h3&gt;
  &lt;p id=&quot;CBEP&quot;&gt;Подключи новый тип аутентификации в GitHub:&lt;/p&gt;
  &lt;ul id=&quot;fWu6&quot;&gt;
    &lt;li id=&quot;HpFl&quot;&gt;токен (Personal Access Token созданный в кабинете GitHub);&lt;/li&gt;
    &lt;li id=&quot;Ghkn&quot;&gt;SSH ключ (созданный локально и зарегистрированный в кабинете GitHub);&lt;/li&gt;
  &lt;/ul&gt;
  &lt;h2 id=&quot;sozdanie_i_podklyuchenie_tokena_personal&quot;&gt;Создание и подключение токена (Personal Access Token).&lt;/h2&gt;
  &lt;p id=&quot;EaRB&quot;&gt;📖 Документация GitHub: &amp;quot;Managing your personal access tokens&amp;quot; - &lt;a href=&quot;https://dzen.ru/away?to=https%3A%2F%2Fdocs.github.com%2Fru%2Fauthentication%2Fkeeping-your-account-and-data-secure%2Fmanaging-your-personal-access-tokens&quot; target=&quot;_blank&quot;&gt;Открыть&lt;/a&gt;&lt;/p&gt;
  &lt;p id=&quot;e74m&quot;&gt;&lt;strong&gt;### Сгенерируй токен в GitHub:&lt;/strong&gt;&lt;/p&gt;
  &lt;ul id=&quot;voUn&quot;&gt;
    &lt;li id=&quot;kMPn&quot;&gt;Зайди в Settings → Developer settings → Personal access tokens → Tokens (classic) - &lt;a href=&quot;https://dzen.ru/away?to=https%3A%2F%2Fgithub.com%2Fsettings%2Ftokens&quot; target=&quot;_blank&quot;&gt;Открыть&lt;/a&gt;&lt;/li&gt;
    &lt;li id=&quot;yf2E&quot;&gt;Создай новый токен, поставь галочки параметров доступа repo (и, если нужно, workflow для CI/CD).&lt;/li&gt;
    &lt;li id=&quot;2qj7&quot;&gt;Выбери время жизни токена.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;yXnw&quot;&gt;&lt;strong&gt;### При пуше (git push / git pull) каждый раз вводи:&lt;/strong&gt;&lt;/p&gt;
  &lt;ul id=&quot;O0z9&quot;&gt;
    &lt;li id=&quot;TYbA&quot;&gt;Логин: [логин]&lt;/li&gt;
    &lt;li id=&quot;Uysy&quot;&gt;Пароль: &lt;strong&gt;вместо пароля вставляй токен&lt;/strong&gt;.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;Dywq&quot;&gt;&lt;strong&gt;### Можно сохранить токен навсегда:&lt;/strong&gt;&lt;/p&gt;
  &lt;blockquote id=&quot;2FaU&quot;&gt;git config --global credential.helper store&lt;/blockquote&gt;
  &lt;p id=&quot;R4wO&quot;&gt;И при следующем вводе Git сохранит данные в ~/.git-credentials.&lt;/p&gt;
  &lt;h2 id=&quot;podklyuchenie_ssh_klyucha&quot;&gt;Подключение SSH ключа&lt;/h2&gt;
  &lt;ol id=&quot;NbMR&quot;&gt;
    &lt;li id=&quot;SZOD&quot;&gt;Если &lt;em&gt;уже &lt;/em&gt;&lt;strong&gt;есть SSH ключ, то рекомендую проверить&lt;/strong&gt;, что он актуального безопасного типа (см. ниже).&lt;/li&gt;
    &lt;li id=&quot;TQXy&quot;&gt;Если у тебя еще &lt;strong&gt;нет SSH ключа&lt;/strong&gt;, то создай ключ ed25519 по инструкции ниже.&lt;/li&gt;
    &lt;li id=&quot;vBtB&quot;&gt;После этого &lt;strong&gt;добавь открытый ключ&lt;/strong&gt; в свою учётную запись на GitHub, чтобы включить аутентификацию для операций с Git по SSH (см. ниже).&lt;/li&gt;
  &lt;/ol&gt;
  &lt;p id=&quot;kPNr&quot;&gt;Каждый пункт и возможные ошибки рассмотрены ниже.&lt;/p&gt;
  &lt;h2 id=&quot;proverka_nalichiya_syschestvyyuschih_klyucheii_ssh&quot;&gt;Проверка наличия существующих ключей SSH&lt;/h2&gt;
  &lt;p id=&quot;4st5&quot;&gt;Перед созданием нового ключа SSH необходимо проверить наличие существующих ключей на локальном компьютере.&lt;/p&gt;
  &lt;p id=&quot;W4RA&quot;&gt;ℹ️ GitHub улучшил безопасность, &lt;strong&gt;убрав старые небезопасные типы ключей 15 марта 2022 года&lt;/strong&gt;. По состоянию на эту дату ключи &lt;strong&gt;DSA (ssh-dss) больше не поддерживаются&lt;/strong&gt;. Невозможно добавить новые ключи DSA в личная учетная запись на GitHub. Ключи &lt;strong&gt;RSA (ssh-rsa) с valid_after до 2 ноября 2021 г.&lt;/strong&gt; могут продолжать использовать любой алгоритм подписи. Ключи RSA, созданные после этой даты, должны использовать алгоритм подписи SHA-2. Для использования сигнатур SHA-2 может потребоваться обновить некоторые старые клиенты.&lt;/p&gt;
  &lt;p id=&quot;TdZE&quot;&gt;Введите в терминале ls -al ~/.ssh, &lt;strong&gt;чтобы узнать, имеются ли существующие ключи SSH&lt;/strong&gt;.&lt;/p&gt;
  &lt;blockquote id=&quot;bObN&quot;&gt;$ ls -al ~/.ssh&lt;br /&gt;# Lists the files in your .ssh directory, if they exist&lt;/blockquote&gt;
  &lt;p id=&quot;Ff1b&quot;&gt;Проверьте список файлов каталога, чтобы узнать, есть ли у вас открытый ключ SSH. По умолчанию &lt;strong&gt;имена файлов поддерживаемых открытых ключей&lt;/strong&gt; для GitHub являются одним из следующих.&lt;/p&gt;
  &lt;ul id=&quot;tXBJ&quot;&gt;
    &lt;li id=&quot;WZbU&quot;&gt;&lt;em&gt;id_rsa.pub&lt;/em&gt;&lt;/li&gt;
    &lt;li id=&quot;bptv&quot;&gt;&lt;em&gt;id_ecdsa.pub&lt;/em&gt;&lt;/li&gt;
    &lt;li id=&quot;DVES&quot;&gt;&lt;em&gt;id_ed25519.pub&lt;/em&gt;.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;h2 id=&quot;generaciya_novogo_klyucha_ssh&quot;&gt;Генерация нового ключа SSH&lt;/h2&gt;
  &lt;p id=&quot;QhCc&quot;&gt;📖 Документация GitHub: &amp;quot;Generating a new SSH key&amp;quot; - &lt;a href=&quot;https://dzen.ru/away?to=https%3A%2F%2Fdocs.github.com%2Fru%2Fauthentication%2Fconnecting-to-github-with-ssh%2Fgenerating-a-new-ssh-key-and-adding-it-to-the-ssh-agent%23generating-a-new-ssh-key&quot; target=&quot;_blank&quot;&gt;Открыть&lt;/a&gt;.&lt;/p&gt;
  &lt;p id=&quot;DAbU&quot;&gt;&lt;strong&gt;Новый SSH-ключ генерим на локальном компьютере&lt;/strong&gt;.&lt;/p&gt;
  &lt;p id=&quot;CaNi&quot;&gt;В терминале вставь команду ниже, &lt;strong&gt;заменив адрес электронной почты&lt;/strong&gt;, использованный в примере, на свой адрес электронной почты GitHub.&lt;/p&gt;
  &lt;blockquote id=&quot;NjNV&quot;&gt;ssh-keygen -t ed25519 -C &amp;quot;your_email@example.com&amp;quot;&lt;/blockquote&gt;
  &lt;p id=&quot;cbfP&quot;&gt;где&lt;/p&gt;
  &lt;ul id=&quot;b0Hx&quot;&gt;
    &lt;li id=&quot;ccwK&quot;&gt;&lt;em&gt;-t ed25519&lt;/em&gt; — указывает тип ключа (Ed25519).&lt;/li&gt;
    &lt;li id=&quot;B6Kg&quot;&gt;&lt;em&gt;-C &amp;quot;your_email@example.com&amp;quot;&lt;/em&gt; — комментарий, который будет записан в .pub файл (обычно туда ставят email или описание, чтобы различать ключи).&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;Fp1J&quot;&gt;Далее терминале появится &lt;strong&gt;вопрос куда сохранять ключ и как назвать файлы&lt;/strong&gt; с ключом. Если ты меняешь название файла, но не укажешь полный путь, то файлы ключей создадутся в папке выбранной в терминале.&lt;/p&gt;
  &lt;blockquote id=&quot;NM9b&quot;&gt;Generating public/private ed25519 key pair.&lt;/blockquote&gt;
  &lt;blockquote id=&quot;i7j6&quot;&gt;Enter file in which to save the key (/home/[user]/.ssh/id_ed25519):&lt;/blockquote&gt;
  &lt;p id=&quot;JAzL&quot;&gt;Пример ввода ответа:&lt;/p&gt;
  &lt;blockquote id=&quot;A2nn&quot;&gt;/home/[user]/.ssh/id_ed25519_github&lt;/blockquote&gt;
  &lt;p id=&quot;EI6k&quot;&gt;Дальше тебе нужно придумать пароль к ключу и повторить его&lt;/p&gt;
  &lt;blockquote id=&quot;xEQZ&quot;&gt;Enter passphrase (empty for no passphrase):&lt;/blockquote&gt;
  &lt;blockquote id=&quot;XSln&quot;&gt;Enter same passphrase again:&lt;/blockquote&gt;
  &lt;p id=&quot;utx8&quot;&gt;В результате создаются два файла с ключами: публичный и секретный.&lt;/p&gt;
  &lt;blockquote id=&quot;2Dys&quot;&gt;Your identification has been saved in id_ed25519_github&lt;/blockquote&gt;
  &lt;blockquote id=&quot;rv4b&quot;&gt;Your public key has been saved in id_ed25519_github.pub&lt;/blockquote&gt;
  &lt;p id=&quot;79iU&quot;&gt;&lt;strong&gt;В кабинете GitHub нужно вводить данные публичной части ключа из файла с расширением .pub&lt;/strong&gt;&lt;/p&gt;
  &lt;p id=&quot;CyMb&quot;&gt;&lt;strong&gt;Добавь SSH ключ в агент&lt;/strong&gt; в терминале локально чтобы при аутентификации система находила его:&lt;/p&gt;
  &lt;blockquote id=&quot;6Wy4&quot;&gt;ssh-add ~/.ssh/id_ed25519_github&lt;/blockquote&gt;
  &lt;h2 id=&quot;dobavlenie_ssh_klyucha_v_github&quot;&gt;Добавление SSH ключа в GitHub&lt;/h2&gt;
  &lt;p id=&quot;R6Yd&quot;&gt;В личном кабинете GitHubключ добавляется по пути GitHub → Settings → SSH and GPG keys - &lt;a href=&quot;https://dzen.ru/away?to=https%3A%2F%2Fgithub.com%2Fsettings%2Fkeys&quot; target=&quot;_blank&quot;&gt;Открыть&lt;/a&gt;&lt;/p&gt;
  &lt;ul id=&quot;vsL1&quot;&gt;
    &lt;li id=&quot;wMAs&quot;&gt;Добавь &lt;strong&gt;публичный ключ &lt;/strong&gt;- содержимое файла с расширением &lt;strong&gt;.pub&lt;/strong&gt;&lt;/li&gt;
    &lt;li id=&quot;pfG8&quot;&gt;&lt;strong&gt;Измени метод аутентификации в проекте&lt;/strong&gt;. Скопируй на GitHub ссылку SSH-адреса твоего репозитория и выполни команду в терминале локально находясь в папке проекта:&lt;/li&gt;
  &lt;/ul&gt;
  &lt;blockquote id=&quot;p15X&quot;&gt;git remote set-url origin [ssh ссылка репозитория]&lt;/blockquote&gt;
  &lt;p id=&quot;tIF7&quot;&gt;Теперь можешь пушь без пароля.&lt;/p&gt;
  &lt;h2 id=&quot;oshibka_warning_remote_host_identificati&quot;&gt;Ошибка WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!&lt;/h2&gt;
  &lt;p id=&quot;w7r7&quot;&gt;- ты получил типичное SSH-сообщение безопасности.&lt;/p&gt;
  &lt;p id=&quot;vhXm&quot;&gt;Почему это происходит?&lt;/p&gt;
  &lt;ol id=&quot;xjyJ&quot;&gt;
    &lt;li id=&quot;PDvg&quot;&gt;Ты впервые подключаешься к серверу после того, как GitHub обновил свои хост-ключи.&lt;/li&gt;
    &lt;li id=&quot;Ley8&quot;&gt;Или в ~/.ssh/known_hosts уже сохранён старый ключ для github.com.&lt;/li&gt;
    &lt;li id=&quot;x9bF&quot;&gt;В худшем случае — действительно &amp;quot;man-in-the-middle&amp;quot; атака (когда кто-то подменяет сервер). Но если речь о GitHub и ты уверен в адресе — это почти точно обновление ключей.&lt;/li&gt;
  &lt;/ol&gt;
  &lt;h3 id=&quot;kak_ispravit&quot;&gt;Как исправить&lt;/h3&gt;
  &lt;p id=&quot;EpfC&quot;&gt;&lt;strong&gt;Эта команда удалит старую запись о github.com&lt;/strong&gt; из файла &lt;strong&gt;known_hosts&lt;/strong&gt;.&lt;/p&gt;
  &lt;p id=&quot;444I&quot;&gt;В пути замени [user]:&lt;/p&gt;
  &lt;blockquote id=&quot;IoMn&quot;&gt;ssh-keygen -f &amp;quot;/home/[user]/.ssh/known_hosts&amp;quot; -R &amp;quot;github.com&amp;quot;&lt;/blockquote&gt;
  &lt;p id=&quot;cRdA&quot;&gt;После этого при следующей попытке git pull или git push SSH спросит:&lt;/p&gt;
  &lt;blockquote id=&quot;ebvI&quot;&gt;The authenticity of host &amp;#x27;github.com (IP-адрес)&amp;#x27; can&amp;#x27;t be established.&lt;br /&gt;RSA key fingerprint is SHA256:...&lt;br /&gt;Are you sure you want to continue connecting (yes/no)?&lt;/blockquote&gt;
  &lt;p id=&quot;AMfJ&quot;&gt;Нужно набрать &lt;em&gt;yes&lt;/em&gt;, и новый ключ будет добавлен в &lt;em&gt;known_hosts&lt;/em&gt;.&lt;/p&gt;
  &lt;h2 id=&quot;rezyume&quot;&gt;Резюме&lt;/h2&gt;
  &lt;p id=&quot;A45W&quot;&gt;Тебе нужно либо перейти на Personal Access Token (через HTTPS), либо на SSH.&lt;br /&gt;Оба способа рабочие, но SSH обычно удобнее, если работаешь много с GitHub.&lt;/p&gt;
  &lt;tt-tags id=&quot;xFI9&quot;&gt;
    &lt;tt-tag name=&quot;github&quot;&gt;#github&lt;/tt-tag&gt;
    &lt;tt-tag name=&quot;ssh&quot;&gt;#ssh&lt;/tt-tag&gt;
    &lt;tt-tag name=&quot;token&quot;&gt;#token&lt;/tt-tag&gt;
  &lt;/tt-tags&gt;

</content></entry><entry><id>mj-dev:quasar-framework-install</id><link rel="alternate" type="text/html" href="https://blog.mj-dev.ru/quasar-framework-install?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=mj-dev"></link><title>Установка и настройка Quasar Framework (Vue)</title><published>2025-10-01T15:45:41.314Z</published><updated>2025-10-01T15:45:41.314Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img1.teletype.in/files/8a/7f/8a7ffbb2-8b9b-474c-9f08-0a04a04115bb.png"></media:thumbnail><category term="web-development" label="web development"></category><summary type="html">&lt;img src=&quot;https://img4.teletype.in/files/79/24/79240ffc-5af1-4e7c-aa69-c0266ad185f9.jpeg&quot;&gt;Установка и настройка frontend на основе Quasar Framework (https://quasar.dev/).</summary><content type="html">
  &lt;figure id=&quot;ScwW&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/79/24/79240ffc-5af1-4e7c-aa69-c0266ad185f9.jpeg&quot; width=&quot;1200&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;HQV7&quot;&gt;Установка и настройка frontend на основе Quasar Framework (&lt;a href=&quot;https://quasar.dev/&quot; target=&quot;_blank&quot;&gt;https://quasar.dev/&lt;/a&gt;).&lt;/p&gt;
  &lt;p id=&quot;Ew9Q&quot;&gt;&lt;strong&gt;Часть проекта&lt;/strong&gt; &lt;a href=&quot;https://blog.mj-dev.ru/user-dashboard-base-abot&quot; target=&quot;_blank&quot;&gt;User Dashboard Base (Quasar + Node.js + SQLite)&lt;/a&gt;.&lt;/p&gt;
  &lt;p id=&quot;5McC&quot;&gt;&lt;strong&gt;ОС&lt;/strong&gt;: Ubuntu 24.01&lt;/p&gt;
  &lt;p id=&quot;VD1J&quot;&gt;&lt;strong&gt;Стек&lt;/strong&gt;: pnpm, Quasar Framework, Typescript, CamelCase, git.&lt;/p&gt;
  &lt;p id=&quot;af2t&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;7j9o&quot;&gt; 1. Устанавливаем Quasar CLI глобально:&lt;/p&gt;
  &lt;section style=&quot;background-color:hsl(hsl(199, 50%, var(--autocolor-background-lightness, 95%)), 85%, 85%);&quot;&gt;
    &lt;p id=&quot;Uk0a&quot;&gt;# Установка Quasar CLI&lt;br /&gt;npm install -g @quasar/cli&lt;/p&gt;
    &lt;p id=&quot;Rn0g&quot;&gt;# Проверяем установку&lt;br /&gt;quasar --version&lt;/p&gt;
  &lt;/section&gt;
  &lt;p id=&quot;O9HM&quot;&gt;2. Создаем Quasar проект в папке frontend:&lt;/p&gt;
  &lt;section style=&quot;background-color:hsl(hsl(199, 50%, var(--autocolor-background-lightness, 95%)), 85%, 85%);&quot;&gt;
    &lt;p id=&quot;agpj&quot;&gt;# Переходим в корень проекта&lt;br /&gt;cd quasar-node-usercabinet&lt;/p&gt;
    &lt;p id=&quot;Ixim&quot;&gt;# Удаляем старую папку frontend (если создали)&lt;br /&gt;rm -rf frontend&lt;/p&gt;
    &lt;p id=&quot;jeSv&quot;&gt;# Создаем новый Quasar проект&lt;br /&gt;npm init quasar&lt;/p&gt;
  &lt;/section&gt;
  &lt;p id=&quot;uLvd&quot;&gt;При создании проекта выберите следующие опции:&lt;/p&gt;
  &lt;section style=&quot;background-color:hsl(hsl(199, 50%, var(--autocolor-background-lightness, 95%)), 85%, 85%);&quot;&gt;
    &lt;p id=&quot;8MLY&quot;&gt;✔ What would you like to build? › App with Quasar CLI, let&amp;#x27;s go!&lt;br /&gt;✔ Project folder: … frontend&lt;br /&gt;✔ Pick script type: › Typescript&lt;br /&gt;✔ Pick Quasar App CLI variant: › Quasar App CLI with Vite&lt;br /&gt;✔ Package name: … quasar-node-usercabinet-frontend&lt;br /&gt;✔ Project product name: (must start with letter if building mobile apps) … User Cabinet&lt;br /&gt;✔ Project description: … Multilingual user cabinet with authentication&lt;br /&gt;✔ Author: … [ваше имя]&lt;br /&gt;✔ Pick a Vue component style: › Composition API with &amp;lt;script setup&amp;gt;&lt;br /&gt;✔ Pick your CSS preprocessor: › Sass with SCSS syntax&lt;br /&gt;✔ Check the features needed for your project: › Linting (vite-plugin-checker + ESLint + vue-tsc), State Management (Pinia), vue-i18n&lt;br /&gt;✔ Add Prettier for code formatting? … yes&lt;br /&gt;✔ Install project dependencies? (recommended) › No, I will handle that myself&lt;/p&gt;
  &lt;/section&gt;
  &lt;p id=&quot;nJR1&quot;&gt;3. Проверяем установку:&lt;/p&gt;
  &lt;section style=&quot;background-color:hsl(hsl(199, 50%, var(--autocolor-background-lightness, 95%)), 85%, 85%);&quot;&gt;
    &lt;p id=&quot;VDbs&quot;&gt;   cd frontend&lt;br /&gt;   pnpm install&lt;br /&gt;   pnpm run lint — --fix&lt;br /&gt;   quasar dev&lt;/p&gt;
  &lt;/section&gt;
  &lt;p id=&quot;hUfx&quot;&gt;4. Обновляем &amp;#x60;&lt;strong&gt;frontend/.env.example&lt;/strong&gt;&amp;#x60;:&lt;/p&gt;
  &lt;section style=&quot;background-color:hsl(hsl(199, 50%, var(--autocolor-background-lightness, 95%)), 85%, 85%);&quot;&gt;
    &lt;p id=&quot;DHyQ&quot;&gt;# API Configuration&lt;br /&gt;VITE_API_URL=http://localhost:3000/api&lt;br /&gt;VITE_API_TIMEOUT=30000&lt;/p&gt;
    &lt;p id=&quot;Escv&quot;&gt;# App Configuration&lt;br /&gt;VITE_APP_NAME=&amp;quot;User Cabinet&amp;quot;&lt;br /&gt;VITE_APP_VERSION=1.0.0&lt;/p&gt;
    &lt;p id=&quot;Plh8&quot;&gt;# Feature Flags&lt;br /&gt;VITE_ENABLE_DEBUG=true&lt;br /&gt;VITE_AUTO_REFRESH_INTERVAL=60000&lt;/p&gt;
    &lt;p id=&quot;Yirl&quot;&gt;# Default Language (en, ru, sr)&lt;br /&gt;VITE_DEFAULT_LANGUAGE=en&lt;/p&gt;
  &lt;/section&gt;
  &lt;p id=&quot;O4Au&quot;&gt;5. Копируем &amp;#x60;&lt;strong&gt;.env.example&lt;/strong&gt;&amp;#x60; в &amp;#x60;&lt;strong&gt;.env&lt;/strong&gt;&amp;#x60;:&lt;/p&gt;
  &lt;section style=&quot;background-color:hsl(hsl(199, 50%, var(--autocolor-background-lightness, 95%)), 85%, 85%);&quot;&gt;
    &lt;p id=&quot;eWiu&quot;&gt;cp .env.example .env&lt;/p&gt;
  &lt;/section&gt;
  &lt;p id=&quot;BJbD&quot;&gt;6. Обновляем &amp;#x60;&lt;strong&gt;frontend/package.json&lt;/strong&gt;&amp;#x60; (добавляем несколько полезных пакетов):&lt;/p&gt;
  &lt;section style=&quot;background-color:hsl(hsl(199, 50%, var(--autocolor-background-lightness, 95%)), 85%, 85%);&quot;&gt;
    &lt;p id=&quot;TJZz&quot;&gt;# Устанавливаем дополнительные зависимости&lt;br /&gt;pnpm add @vueuse/core dayjs jwt-decode&lt;br /&gt;pnpm add -D @types/node&lt;br /&gt;pnpm add axios &lt;/p&gt;
  &lt;/section&gt;
  &lt;p id=&quot;iYtI&quot;&gt;7. Создаем базовую структуру папок для нашего проекта:&lt;/p&gt;
  &lt;section style=&quot;background-color:hsl(hsl(199, 50%, var(--autocolor-background-lightness, 95%)), 85%, 85%);&quot;&gt;
    &lt;p id=&quot;oy7i&quot;&gt;# Создаем дополнительные папки в src&lt;br /&gt;mkdir -p src/api&lt;br /&gt;mkdir -p src/types&lt;br /&gt;mkdir -p src/utils&lt;br /&gt;mkdir -p src/composables&lt;br /&gt;mkdir -p src/services&lt;/p&gt;
  &lt;/section&gt;
  &lt;p id=&quot;y3vA&quot;&gt;Версиях Quasar с TypeScript используется &amp;#x60;quasar.config.ts&amp;#x60;. Настроим конфигурацию &amp;#x60;&lt;strong&gt;frontend/quasar.config.ts&lt;/strong&gt;&amp;#x60;:&lt;/p&gt;
  &lt;section style=&quot;background-color:hsl(hsl(199, 50%, var(--autocolor-background-lightness, 95%)), 85%, 85%);&quot;&gt;
    &lt;p id=&quot;I4rG&quot;&gt;/* eslint-env node */&lt;/p&gt;
    &lt;p id=&quot;Gumt&quot;&gt;// Configuration for your app&lt;br /&gt;// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js&lt;/p&gt;
    &lt;p id=&quot;CJ82&quot;&gt;import { configure } from &amp;#x27;quasar/wrappers&amp;#x27;;&lt;br /&gt;import path from &amp;#x27;node:path&amp;#x27;;&lt;/p&gt;
    &lt;p id=&quot;7Zb8&quot;&gt;export default configure(function (/* ctx */) {&lt;br /&gt;  return {&lt;br /&gt;    eslint: {&lt;br /&gt;      warnings: true,&lt;br /&gt;      errors: true,&lt;br /&gt;    },&lt;/p&gt;
    &lt;p id=&quot;6kUL&quot;&gt;    // https://v2.quasar.dev/quasar-cli-vite/boot-files&lt;br /&gt;    boot: [&amp;#x27;i18n&amp;#x27;, &amp;#x27;axios&amp;#x27;],&lt;/p&gt;
    &lt;p id=&quot;SEzV&quot;&gt;    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css&lt;br /&gt;    css: [&amp;#x27;app.scss&amp;#x27;],&lt;/p&gt;
    &lt;p id=&quot;B30b&quot;&gt;    // https://github.com/quasarframework/quasar/tree/dev/extras&lt;br /&gt;    extras: [&lt;br /&gt;      // &amp;#x27;ionicons-v4&amp;#x27;,&lt;br /&gt;      // &amp;#x27;mdi-v5&amp;#x27;,&lt;br /&gt;      // &amp;#x27;fontawesome-v6&amp;#x27;,&lt;br /&gt;      // &amp;#x27;eva-icons&amp;#x27;,&lt;br /&gt;      // &amp;#x27;themify&amp;#x27;,&lt;br /&gt;      // &amp;#x27;line-awesome&amp;#x27;,&lt;br /&gt;      // &amp;#x27;roboto-font-latin-ext&amp;#x27;, // this or either &amp;#x27;roboto-font&amp;#x27;, NEVER both!&lt;/p&gt;
    &lt;p id=&quot;AqKl&quot;&gt;      &amp;#x27;roboto-font&amp;#x27;, // optional, you are not bound to it&lt;br /&gt;      &amp;#x27;material-icons&amp;#x27;, // optional, you are not bound to it&lt;br /&gt;      &amp;#x27;mdi-v7&amp;#x27;,&lt;br /&gt;    ],&lt;/p&gt;
    &lt;p id=&quot;kLKO&quot;&gt;    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build&lt;br /&gt;    build: {&lt;br /&gt;      target: {&lt;br /&gt;        browser: [&amp;#x27;es2019&amp;#x27;, &amp;#x27;edge88&amp;#x27;, &amp;#x27;firefox78&amp;#x27;, &amp;#x27;chrome87&amp;#x27;, &amp;#x27;safari13.1&amp;#x27;],&lt;br /&gt;        node: &amp;#x27;node16&amp;#x27;,&lt;br /&gt;      },&lt;/p&gt;
    &lt;p id=&quot;fxgO&quot;&gt;      vueRouterMode: &amp;#x27;history&amp;#x27;, // available values: &amp;#x27;hash&amp;#x27;, &amp;#x27;history&amp;#x27;&lt;br /&gt;      &lt;br /&gt;      env: {&lt;br /&gt;        API_URL: process.env.VITE_API_URL || &amp;#x27;http://localhost:3000/api&amp;#x27;,&lt;br /&gt;        APP_VERSION: process.env.VITE_APP_VERSION || &amp;#x27;1.0.0&amp;#x27;,&lt;br /&gt;      },&lt;/p&gt;
    &lt;p id=&quot;yDgc&quot;&gt;      // viteVuePluginOptions: {},&lt;/p&gt;
    &lt;p id=&quot;AvBB&quot;&gt;      vitePlugins: [&lt;br /&gt;        [&lt;br /&gt;          &amp;#x27;@intlify/unplugin-vue-i18n/vite&amp;#x27;,&lt;br /&gt;          {&lt;br /&gt;            // if you want to use Vue I18n Legacy API, you need to set &amp;#x60;compositionOnly: false&amp;#x60;&lt;br /&gt;            // compositionOnly: false,&lt;/p&gt;
    &lt;p id=&quot;1Yie&quot;&gt;            // if you want to use named tokens in your Vue I18n messages, such as &amp;#x27;Hello {name}&amp;#x27;,&lt;br /&gt;            // you need to set &amp;#x60;runtimeOnly: false&amp;#x60;&lt;br /&gt;            // runtimeOnly: false,&lt;/p&gt;
    &lt;p id=&quot;tqY5&quot;&gt;            // you need to set i18n resource including paths !&lt;br /&gt;            include: [path.resolve(__dirname, &amp;#x27;./src/i18n/**&amp;#x27;)],&lt;br /&gt;          },&lt;br /&gt;        ],&lt;br /&gt;      ],&lt;/p&gt;
    &lt;p id=&quot;UetC&quot;&gt;      alias: {&lt;br /&gt;        &amp;#x27;@&amp;#x27;: path.join(__dirname, &amp;#x27;./src&amp;#x27;),&lt;br /&gt;      },&lt;/p&gt;
    &lt;p id=&quot;Qu2w&quot;&gt;      // https://v2.quasar.dev/quasar-cli-vite/handling-vite&lt;br /&gt;      extendViteConf(viteConf) {&lt;br /&gt;        // Add any custom Vite configuration here if needed&lt;br /&gt;      },&lt;br /&gt;    },&lt;/p&gt;
    &lt;p id=&quot;n3K7&quot;&gt;    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer&lt;br /&gt;    devServer: {&lt;br /&gt;      // https: true&lt;br /&gt;      open: true, // opens browser window automatically&lt;br /&gt;      port: 9000,&lt;br /&gt;      proxy: {&lt;br /&gt;        // proxy all requests starting with /api&lt;br /&gt;        &amp;#x27;/api&amp;#x27;: {&lt;br /&gt;          target: &amp;#x27;http://localhost:3000&amp;#x27;,&lt;br /&gt;          changeOrigin: true,&lt;br /&gt;        },&lt;br /&gt;      },&lt;br /&gt;    },&lt;/p&gt;
    &lt;p id=&quot;PcPZ&quot;&gt;    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework&lt;br /&gt;    framework: {&lt;br /&gt;      config: {&lt;br /&gt;        brand: {&lt;br /&gt;          primary: &amp;#x27;#1976d2&amp;#x27;,&lt;br /&gt;          secondary: &amp;#x27;#26a69a&amp;#x27;,&lt;br /&gt;          accent: &amp;#x27;#9c27b0&amp;#x27;,&lt;br /&gt;          dark: &amp;#x27;#1d1d1d&amp;#x27;,&lt;br /&gt;          &amp;#x27;dark-page&amp;#x27;: &amp;#x27;#121212&amp;#x27;,&lt;br /&gt;          positive: &amp;#x27;#21ba45&amp;#x27;,&lt;br /&gt;          negative: &amp;#x27;#c10015&amp;#x27;,&lt;br /&gt;          info: &amp;#x27;#31ccec&amp;#x27;,&lt;br /&gt;          warning: &amp;#x27;#f2c037&amp;#x27;,&lt;br /&gt;        },&lt;br /&gt;        &lt;br /&gt;        notify: {&lt;br /&gt;          position: &amp;#x27;top&amp;#x27;,&lt;br /&gt;          timeout: 3000,&lt;br /&gt;          textColor: &amp;#x27;white&amp;#x27;,&lt;br /&gt;          actions: [{ icon: &amp;#x27;close&amp;#x27;, color: &amp;#x27;white&amp;#x27; }],&lt;br /&gt;        },&lt;/p&gt;
    &lt;p id=&quot;44Ch&quot;&gt;        loading: {&lt;br /&gt;          delay: 200,&lt;br /&gt;          message: &amp;#x27;Loading...&amp;#x27;,&lt;br /&gt;          spinnerSize: 60,&lt;br /&gt;          spinnerColor: &amp;#x27;primary&amp;#x27;,&lt;br /&gt;        },&lt;br /&gt;      },&lt;/p&gt;
    &lt;p id=&quot;vK5S&quot;&gt;      // iconSet: &amp;#x27;material-icons&amp;#x27;, // Quasar icon set&lt;br /&gt;      // lang: &amp;#x27;en-US&amp;#x27;, // Quasar language pack&lt;/p&gt;
    &lt;p id=&quot;UJVz&quot;&gt;      // For special cases outside of where the auto-import strategy can have an impact&lt;br /&gt;      // (like functional components as one of the examples),&lt;br /&gt;      // you can manually specify Quasar components/directives to be available everywhere:&lt;br /&gt;      //&lt;br /&gt;      // components: [],&lt;br /&gt;      // directives: [],&lt;/p&gt;
    &lt;p id=&quot;f8zL&quot;&gt;      // Quasar plugins&lt;br /&gt;      plugins: [&lt;br /&gt;        &amp;#x27;Notify&amp;#x27;,&lt;br /&gt;        &amp;#x27;Loading&amp;#x27;,&lt;br /&gt;        &amp;#x27;Dialog&amp;#x27;,&lt;br /&gt;        &amp;#x27;LocalStorage&amp;#x27;,&lt;br /&gt;        &amp;#x27;SessionStorage&amp;#x27;,&lt;br /&gt;      ],&lt;br /&gt;    },&lt;/p&gt;
    &lt;p id=&quot;oLk7&quot;&gt;    // animations: &amp;#x27;all&amp;#x27;, // --- includes all animations&lt;br /&gt;    // https://v2.quasar.dev/options/animations&lt;br /&gt;    animations: &amp;#x27;all&amp;#x27;,&lt;/p&gt;
    &lt;p id=&quot;XvLM&quot;&gt;    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#sourcefiles&lt;br /&gt;    // sourceFiles: {&lt;br /&gt;    //   rootComponent: &amp;#x27;src/App.vue&amp;#x27;,&lt;br /&gt;    //   router: &amp;#x27;src/router/index&amp;#x27;,&lt;br /&gt;    //   store: &amp;#x27;src/store/index&amp;#x27;,&lt;br /&gt;    //   registerServiceWorker: &amp;#x27;src-pwa/register-service-worker&amp;#x27;,&lt;br /&gt;    //   serviceWorker: &amp;#x27;src-pwa/custom-service-worker&amp;#x27;,&lt;br /&gt;    //   pwaManifestFile: &amp;#x27;src-pwa/manifest.json&amp;#x27;,&lt;br /&gt;    //   electronMain: &amp;#x27;src-electron/electron-main&amp;#x27;,&lt;br /&gt;    //   electronPreload: &amp;#x27;src-electron/electron-preload&amp;#x27;&lt;br /&gt;    // },&lt;/p&gt;
    &lt;p id=&quot;SrZd&quot;&gt;    // https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr&lt;br /&gt;    ssr: {&lt;br /&gt;      // ssrPwaHtmlFilename: &amp;#x27;offline.html&amp;#x27;, // do NOT use index.html as name!&lt;br /&gt;                                              // will mess up SSR&lt;/p&gt;
    &lt;p id=&quot;pcxI&quot;&gt;      // extendSSRWebserverConf (esbuildConf) {},&lt;br /&gt;      // extendPackageJson (json) {},&lt;/p&gt;
    &lt;p id=&quot;SKGC&quot;&gt;      pwa: false,&lt;/p&gt;
    &lt;p id=&quot;zP6j&quot;&gt;      // manualStoreHydration: true,&lt;br /&gt;      // manualPostHydrationTrigger: true,&lt;/p&gt;
    &lt;p id=&quot;hYiy&quot;&gt;      prodPort: 3000, // The default port that the production server should use&lt;br /&gt;                      // (gets superseded if process.env.PORT is specified at runtime)&lt;/p&gt;
    &lt;p id=&quot;AV34&quot;&gt;      middlewares: [&lt;br /&gt;        &amp;#x27;render&amp;#x27;, // keep this as last one&lt;br /&gt;      ],&lt;br /&gt;    },&lt;/p&gt;
    &lt;p id=&quot;LcD0&quot;&gt;    // https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa&lt;br /&gt;    pwa: {&lt;br /&gt;      workboxMode: &amp;#x27;generateSW&amp;#x27;, // or &amp;#x27;injectManifest&amp;#x27;&lt;br /&gt;      injectPwaMetaTags: true,&lt;br /&gt;      swFilename: &amp;#x27;sw.js&amp;#x27;,&lt;br /&gt;      manifestFilename: &amp;#x27;manifest.json&amp;#x27;,&lt;br /&gt;      useCredentialsForManifestTag: false,&lt;br /&gt;      // useFilenameHashes: true,&lt;br /&gt;      // extendGenerateSWOptions (cfg) {}&lt;br /&gt;      // extendInjectManifestOptions (cfg) {},&lt;br /&gt;      // extendManifestJson (json) {}&lt;br /&gt;      // extendPWACustomSWConf (esbuildConf) {}&lt;br /&gt;    },&lt;/p&gt;
    &lt;p id=&quot;uRvI&quot;&gt;    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova&lt;br /&gt;    cordova: {&lt;br /&gt;      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing&lt;br /&gt;    },&lt;/p&gt;
    &lt;p id=&quot;VN5a&quot;&gt;    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor&lt;br /&gt;    capacitor: {&lt;br /&gt;      hideSplashscreen: true,&lt;br /&gt;    },&lt;/p&gt;
    &lt;p id=&quot;Ilug&quot;&gt;    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron&lt;br /&gt;    electron: {&lt;br /&gt;      // extendElectronMainConf (esbuildConf)&lt;br /&gt;      // extendElectronPreloadConf (esbuildConf)&lt;/p&gt;
    &lt;p id=&quot;3aFt&quot;&gt;      inspectPort: 5858,&lt;/p&gt;
    &lt;p id=&quot;l8gM&quot;&gt;      bundler: &amp;#x27;packager&amp;#x27;, // &amp;#x27;packager&amp;#x27; or &amp;#x27;builder&amp;#x27;&lt;/p&gt;
    &lt;p id=&quot;sgMR&quot;&gt;      packager: {&lt;br /&gt;        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options&lt;/p&gt;
    &lt;p id=&quot;duCs&quot;&gt;        // OS X / Mac App Store&lt;br /&gt;        // appBundleId: &amp;#x27;&amp;#x27;,&lt;br /&gt;        // appCategoryType: &amp;#x27;&amp;#x27;,&lt;br /&gt;        // osxSign: &amp;#x27;&amp;#x27;,&lt;br /&gt;        // protocol: &amp;#x27;myapp://path&amp;#x27;,&lt;/p&gt;
    &lt;p id=&quot;6GGU&quot;&gt;        // Windows only&lt;br /&gt;        // win32metadata: { ... }&lt;br /&gt;      },&lt;/p&gt;
    &lt;p id=&quot;K3Si&quot;&gt;      builder: {&lt;br /&gt;        // https://www.electron.build/configuration/configuration&lt;/p&gt;
    &lt;p id=&quot;f1fF&quot;&gt;        appId: &amp;#x27;quasar-node-usercabinet&amp;#x27;,&lt;br /&gt;      },&lt;br /&gt;    },&lt;/p&gt;
    &lt;p id=&quot;pWeo&quot;&gt;    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex&lt;br /&gt;    bex: {&lt;br /&gt;      contentScripts: [&amp;#x27;my-content-script&amp;#x27;],&lt;/p&gt;
    &lt;p id=&quot;DRYw&quot;&gt;      // extendBexScriptsConf (esbuildConf) {}&lt;br /&gt;      // extendBexManifestJson (json) {}&lt;br /&gt;    },&lt;br /&gt;  };&lt;br /&gt;});&lt;/p&gt;
  &lt;/section&gt;
  &lt;p id=&quot;2mD0&quot;&gt;### Также обновим &amp;#x60;&lt;strong&gt;frontend/src/boot/i18n.ts&lt;/strong&gt;&amp;#x60;:&lt;/p&gt;
  &lt;section style=&quot;background-color:hsl(hsl(199, 50%, var(--autocolor-background-lightness, 95%)), 85%, 85%);&quot;&gt;
    &lt;p id=&quot;ZH7Q&quot;&gt;import { boot } from &amp;#x27;quasar/wrappers&amp;#x27;;&lt;br /&gt;import { createI18n } from &amp;#x27;vue-i18n&amp;#x27;;&lt;br /&gt;import messages from &amp;#x27;src/i18n&amp;#x27;;&lt;/p&gt;
    &lt;p id=&quot;JZFk&quot;&gt;export type MessageLanguages = keyof typeof messages;&lt;br /&gt;export type MessageSchema = typeof messages[&amp;#x27;en&amp;#x27;];&lt;/p&gt;
    &lt;p id=&quot;zLnj&quot;&gt;/* eslint-disable @typescript-eslint/no-empty-interface */&lt;br /&gt;declare module &amp;#x27;vue-i18n&amp;#x27; {&lt;br /&gt;  export interface DefineLocaleMessage extends MessageSchema {}&lt;br /&gt;  export interface DefineDateTimeFormat {}&lt;br /&gt;  export interface DefineNumberFormat {}&lt;br /&gt;}&lt;br /&gt;/* eslint-enable @typescript-eslint/no-empty-interface */&lt;/p&gt;
    &lt;p id=&quot;GoOJ&quot;&gt;// Get saved language from LocalStorage or use default&lt;br /&gt;const savedLanguage = localStorage.getItem(&amp;#x27;userLanguage&amp;#x27;) || &lt;br /&gt;  import.meta.env.VITE_DEFAULT_LANGUAGE || &lt;br /&gt;  &amp;#x27;en&amp;#x27;;&lt;/p&gt;
    &lt;p id=&quot;yCjG&quot;&gt;const i18n = createI18n({&lt;br /&gt;  locale: savedLanguage,&lt;br /&gt;  fallbackLocale: &amp;#x27;en&amp;#x27;,&lt;br /&gt;  legacy: false,&lt;br /&gt;  globalInjection: true,&lt;br /&gt;  messages,&lt;br /&gt;});&lt;/p&gt;
    &lt;p id=&quot;vXY7&quot;&gt;export default boot(({ app }) =&amp;gt; {&lt;br /&gt;  app.use(i18n);&lt;br /&gt;});&lt;/p&gt;
    &lt;p id=&quot;QIHg&quot;&gt;export { i18n };&lt;/p&gt;
  &lt;/section&gt;
  &lt;p id=&quot;gE8W&quot;&gt;Добавим &amp;#x60;&lt;strong&gt;frontend/src/boot/axios.ts&lt;/strong&gt;&amp;#x60;:&lt;/p&gt;
  &lt;section style=&quot;background-color:hsl(hsl(199, 50%, var(--autocolor-background-lightness, 95%)), 85%, 85%);&quot;&gt;
    &lt;p id=&quot;uSkW&quot;&gt;import { boot } from &amp;#x27;quasar/wrappers&amp;#x27;;&lt;br /&gt;import axios, { AxiosInstance } from &amp;#x27;axios&amp;#x27;;&lt;/p&gt;
    &lt;p id=&quot;0KVs&quot;&gt;declare module &amp;#x27;@vue/runtime-core&amp;#x27; {&lt;br /&gt;  interface ComponentCustomProperties {&lt;br /&gt;    $axios: AxiosInstance;&lt;br /&gt;    $api: AxiosInstance;&lt;br /&gt;  }&lt;br /&gt;}&lt;/p&gt;
    &lt;p id=&quot;zggH&quot;&gt;//&lt;br /&gt;const api = axios.create({ &lt;br /&gt;  baseURL: import.meta.env.VITE_API_URL || &amp;#x27;http://localhost:3000/api&amp;#x27;,&lt;br /&gt;  timeout: parseInt(import.meta.env.VITE_API_TIMEOUT || &amp;#x27;30000&amp;#x27;),&lt;br /&gt;  headers: {&lt;br /&gt;    &amp;#x27;Content-Type&amp;#x27;: &amp;#x27;application/json&amp;#x27;,&lt;br /&gt;  },&lt;br /&gt;});&lt;/p&gt;
    &lt;p id=&quot;YBVY&quot;&gt;// Request interceptor for auth&lt;br /&gt;api.interceptors.request.use(&lt;br /&gt;  (config) =&amp;gt; {&lt;br /&gt;    const token = localStorage.getItem(&amp;#x27;accessToken&amp;#x27;);&lt;br /&gt;    if (token) {&lt;br /&gt;      config.headers.Authorization = &amp;#x60;Bearer ${token}&amp;#x60;;&lt;br /&gt;    }&lt;br /&gt;    return config;&lt;br /&gt;  },&lt;br /&gt;  (error) =&amp;gt; {&lt;br /&gt;    return Promise.reject(error);&lt;br /&gt;  }&lt;br /&gt;);&lt;/p&gt;
    &lt;p id=&quot;rxac&quot;&gt;// Response interceptor for error handling&lt;br /&gt;api.interceptors.response.use(&lt;br /&gt;  (response) =&amp;gt; response,&lt;br /&gt;  async (error) =&amp;gt; {&lt;br /&gt;    const originalRequest = error.config;&lt;/p&gt;
    &lt;p id=&quot;WEO5&quot;&gt;    if (error.response?.status === 401 &amp;amp;&amp;amp; !originalRequest._retry) {&lt;br /&gt;      originalRequest._retry = true;&lt;br /&gt;      &lt;br /&gt;      try {&lt;br /&gt;        const refreshToken = localStorage.getItem(&amp;#x27;refreshToken&amp;#x27;);&lt;br /&gt;        if (refreshToken) {&lt;br /&gt;          const response = await api.post(&amp;#x27;/auth/refresh&amp;#x27;, {&lt;br /&gt;            refreshToken,&lt;br /&gt;          });&lt;br /&gt;          &lt;br /&gt;          const { accessToken, refreshToken: newRefreshToken } = response.data;&lt;br /&gt;          localStorage.setItem(&amp;#x27;accessToken&amp;#x27;, accessToken);&lt;br /&gt;          localStorage.setItem(&amp;#x27;refreshToken&amp;#x27;, newRefreshToken);&lt;br /&gt;          &lt;br /&gt;          originalRequest.headers.Authorization = &amp;#x60;Bearer ${accessToken}&amp;#x60;;&lt;br /&gt;          return api(originalRequest);&lt;br /&gt;        }&lt;br /&gt;      } catch (refreshError) {&lt;br /&gt;        // Refresh failed, redirect to login&lt;br /&gt;        localStorage.removeItem(&amp;#x27;accessToken&amp;#x27;);&lt;br /&gt;        localStorage.removeItem(&amp;#x27;refreshToken&amp;#x27;);&lt;br /&gt;        window.location.href = &amp;#x27;/login&amp;#x27;;&lt;br /&gt;      }&lt;br /&gt;    }&lt;br /&gt;    return Promise.reject(error);&lt;br /&gt;  }&lt;br /&gt;);&lt;/p&gt;
    &lt;p id=&quot;dtjP&quot;&gt;export default boot(({ app }) =&amp;gt; {&lt;br /&gt;  app.config.globalProperties.$axios = axios;&lt;br /&gt;  app.config.globalProperties.$api = api;&lt;br /&gt;});&lt;/p&gt;
    &lt;p id=&quot;atST&quot;&gt;export { api };&lt;/p&gt;
  &lt;/section&gt;
  &lt;p id=&quot;SWQK&quot;&gt;Обновим &amp;#x60;&lt;strong&gt;frontend/src/env.d.ts&lt;/strong&gt;&amp;#x60;:&lt;/p&gt;
  &lt;section style=&quot;background-color:hsl(hsl(199, 50%, var(--autocolor-background-lightness, 95%)), 85%, 85%);&quot;&gt;
    &lt;p id=&quot;CI7X&quot;&gt;/* eslint-disable */&lt;/p&gt;
    &lt;p id=&quot;ffVt&quot;&gt;/// &amp;lt;reference types=&amp;quot;vite/client&amp;quot; /&amp;gt;&lt;/p&gt;
    &lt;p id=&quot;wwmB&quot;&gt;declare namespace NodeJS {&lt;br /&gt;  interface ProcessEnv {&lt;br /&gt;    NODE_ENV: string;&lt;br /&gt;    VUE_ROUTER_MODE: &amp;#x27;hash&amp;#x27; | &amp;#x27;history&amp;#x27; | &amp;#x27;abstract&amp;#x27; | undefined;&lt;br /&gt;    VUE_ROUTER_BASE: string | undefined;&lt;br /&gt;  }&lt;br /&gt;}&lt;/p&gt;
    &lt;p id=&quot;8Vu4&quot;&gt;interface ImportMetaEnv {&lt;br /&gt;  readonly VITE_API_URL: string;&lt;br /&gt;  readonly VITE_API_TIMEOUT: string;&lt;br /&gt;  readonly VITE_APP_NAME: string;&lt;br /&gt;  readonly VITE_APP_VERSION: string;&lt;br /&gt;  readonly VITE_ENABLE_DEBUG: string;&lt;br /&gt;  readonly VITE_AUTO_REFRESH_INTERVAL: string;&lt;br /&gt;  readonly VITE_DEFAULT_LANGUAGE: string;&lt;br /&gt;}&lt;/p&gt;
    &lt;p id=&quot;bcTg&quot;&gt;interface ImportMeta {&lt;br /&gt;  readonly env: ImportMetaEnv;&lt;br /&gt;}&lt;/p&gt;
  &lt;/section&gt;
  &lt;p id=&quot;5Jn8&quot;&gt;Теперь зафиксируем изменения в основной ветке main (корневой коммит):&lt;/p&gt;
  &lt;section style=&quot;background-color:hsl(hsl(199, 50%, var(--autocolor-background-lightness, 95%)), 85%, 85%);&quot;&gt;
    &lt;p id=&quot;bhJm&quot;&gt;# Добавляем изменения&lt;br /&gt;git add .&lt;/p&gt;
    &lt;p id=&quot;EVC8&quot;&gt;# Создаем коммит&lt;br /&gt;git commit -m &amp;quot;fix: update Quasar configuration to TypeScript format&lt;br /&gt;- Update quasar.config.ts&lt;br /&gt;- Update boot files for TypeScript support&lt;br /&gt;- Configure axios with interceptors for auth&lt;br /&gt;- Setup i18n with TypeScript types&lt;br /&gt;- Update environment variable types&amp;quot;&lt;/p&gt;
  &lt;/section&gt;

</content></entry><entry><id>mj-dev:user-dashboard-base-abot</id><link rel="alternate" type="text/html" href="https://blog.mj-dev.ru/user-dashboard-base-abot?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=mj-dev"></link><title>План разработки User Dashboard Base (Quasar + Node.js + SQLite)</title><published>2025-10-01T15:32:32.262Z</published><updated>2025-10-01T16:01:18.800Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img2.teletype.in/files/d5/5b/d55b011a-33c4-43a7-8ecd-f1995856015f.png"></media:thumbnail><category term="web-development" label="web development"></category><summary type="html">&lt;img src=&quot;https://img1.teletype.in/files/04/95/04952e25-c91a-4f6d-bc6c-10cdcf7084cc.jpeg&quot;&gt;Цель проекта: создать основу для пользовательского кабинета с использованием Quasar Framework на фронтенде и Node.js/TypeScript с SQLite на бэкенде. Реализация включает авторизацию, дашборд, хранение и проверку данных пользователя, а также поддержку мультиязычности.</summary><content type="html">
  &lt;figure id=&quot;DQyW&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/04/95/04952e25-c91a-4f6d-bc6c-10cdcf7084cc.jpeg&quot; width=&quot;1200&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;ORSy&quot;&gt;&lt;strong&gt;Цель проекта:&lt;/strong&gt; создать основу для пользовательского кабинета с использованием Quasar Framework на фронтенде и Node.js/TypeScript с SQLite на бэкенде. Реализация включает авторизацию, дашборд, хранение и проверку данных пользователя, а также поддержку мультиязычности.&lt;/p&gt;
  &lt;p id=&quot;GTyh&quot;&gt;&lt;strong&gt;ОС&lt;/strong&gt;: Ubuntu 24.01&lt;/p&gt;
  &lt;p id=&quot;6j6q&quot;&gt;&lt;strong&gt;Стек&lt;/strong&gt;: pnpm, CamelCase, Quasar Framework (&lt;a href=&quot;https://quasar.dev/&quot; target=&quot;_blank&quot;&gt;https://quasar.dev/&lt;/a&gt;), Nodejs, Typescript, SQLlite, git.&lt;/p&gt;
  &lt;nav&gt;
    &lt;ul&gt;
      &lt;li class=&quot;m_level_1&quot;&gt;&lt;a href=&quot;#fepV&quot;&gt;План разработки&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#dFqf&quot;&gt;Этап 1: Инициализация и настройка репозитория&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#S2Wt&quot;&gt;Этап 2: Настройка Backend (Node.js + TypeScript)&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#76HB&quot;&gt;Этап 3: Создание API endpoints&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#HE6v&quot;&gt;Этап 4: База данных (SQLite)&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#HOnv&quot;&gt;Этап 5: Инициализация Frontend (Quasar)&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#t0Yb&quot;&gt;Этап 6: Система аутентификации (Frontend)&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#QbRx&quot;&gt;Этап 7: UI компоненты и страницы&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#pown&quot;&gt;Этап 8: Мультиязычность (i18n)&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#8MEd&quot;&gt;Этап 9: Обработка ошибок и валидация&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#c6D9&quot;&gt;Этап 10: Тестирование и документация&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#xUxH&quot;&gt;Этап 11: Деплой и CI/CD&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_1&quot;&gt;&lt;a href=&quot;#Njoo&quot;&gt;Git Flow стратегия&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_1&quot;&gt;&lt;a href=&quot;#9Plw&quot;&gt;Соглашения по коммитам&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_1&quot;&gt;&lt;a href=&quot;#LxzS&quot;&gt;Статьи с реализацией разработки&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;h2 id=&quot;fepV&quot;&gt;План разработки&lt;/h2&gt;
  &lt;h3 id=&quot;dFqf&quot;&gt;Этап 1: Инициализация и настройка репозитория&lt;/h3&gt;
  &lt;p id=&quot;h756&quot;&gt;1. Создание репозитория на GitHub&lt;br /&gt;2. Настройка &amp;#x60;.gitignore&amp;#x60;, &amp;#x60;README.md&amp;#x60;&lt;br /&gt;3. Инициализация монорепозитория с pnpm workspaces&lt;br /&gt;4. Настройка структуры папок:&lt;/p&gt;
  &lt;p id=&quot;ylOr&quot;&gt;   project-root/&lt;br /&gt;   ├── backend/&lt;br /&gt;   ├── frontend/&lt;br /&gt;   ├── shared/&lt;br /&gt;   └── docs/&lt;/p&gt;
  &lt;h3 id=&quot;S2Wt&quot;&gt;Этап 2: Настройка Backend (Node.js + TypeScript)&lt;/h3&gt;
  &lt;p id=&quot;W6RE&quot;&gt;1. Инициализация Node.js проекта с TypeScript&lt;br /&gt;2. Установка и настройка:&lt;br /&gt;   - Express.js&lt;br /&gt;   - SQLite3 + TypeORM/Prisma&lt;br /&gt;   - JWT для аутентификации&lt;br /&gt;   - Cors, helmet, rate-limiter&lt;br /&gt;   - Валидация (joi/zod)&lt;br /&gt;3. Создание базовой структуры:&lt;br /&gt;   - Routes&lt;br /&gt;   - Controllers&lt;br /&gt;   - Services&lt;br /&gt;   - Middleware&lt;br /&gt;   - Database models&lt;/p&gt;
  &lt;h3 id=&quot;76HB&quot;&gt;Этап 3: Создание API endpoints&lt;/h3&gt;
  &lt;p id=&quot;P3pL&quot;&gt;1. Auth endpoints:&lt;br /&gt;   - POST &amp;#x60;/api/auth/login&amp;#x60;&lt;br /&gt;   - POST &amp;#x60;/api/auth/refresh&amp;#x60;&lt;br /&gt;   - POST &amp;#x60;/api/auth/logout&amp;#x60;&lt;br /&gt;   - GET &amp;#x60;/api/auth/verify&amp;#x60;&lt;br /&gt;2. User endpoints:&lt;br /&gt;   - GET &amp;#x60;/api/user/profile&amp;#x60;&lt;br /&gt;   - PUT &amp;#x60;/api/user/profile&amp;#x60;&lt;br /&gt;3. Middleware для проверки JWT&lt;/p&gt;
  &lt;h3 id=&quot;HE6v&quot;&gt;Этап 4: База данных (SQLite)&lt;/h3&gt;
  &lt;p id=&quot;CpAr&quot;&gt;1. Создание схемы БД:&lt;br /&gt;   - Таблица &amp;#x60;users&amp;#x60; (id, email, password_hash, role, first_name, last_name, created_at, updated_at)&lt;br /&gt;   - Таблица &amp;#x60;sessions&amp;#x60; (id, user_id, token, expires_at, created_at)&lt;br /&gt;2. Миграции и сидеры&lt;br /&gt;3. Индексы для оптимизации&lt;/p&gt;
  &lt;h3 id=&quot;HOnv&quot;&gt;Этап 5: Инициализация Frontend (Quasar)&lt;/h3&gt;
  &lt;p id=&quot;Rv7v&quot;&gt;1. Создание Quasar проекта с TypeScript&lt;br /&gt;2. Настройка:&lt;br /&gt;   - Vue Router&lt;br /&gt;   - Pinia (state management)&lt;br /&gt;   - Axios для API запросов&lt;br /&gt;   - i18n для мультиязычности&lt;br /&gt;3. Настройка линтера и форматтера&lt;/p&gt;
  &lt;h3 id=&quot;t0Yb&quot;&gt;Этап 6: Система аутентификации (Frontend)&lt;/h3&gt;
  &lt;p id=&quot;zzsu&quot;&gt;1. Создание auth store (Pinia)&lt;br /&gt;2. Interceptors для axios&lt;br /&gt;3. Guards для роутера&lt;br /&gt;4. Автоматическая проверка токена каждую минуту&lt;br /&gt;5. Refresh token логика&lt;/p&gt;
  &lt;h3 id=&quot;QbRx&quot;&gt;Этап 7: UI компоненты и страницы&lt;/h3&gt;
  &lt;p id=&quot;p79d&quot;&gt;1. Layout компоненты:&lt;br /&gt;   - AuthLayout&lt;br /&gt;   - DashboardLayout&lt;br /&gt;2. Страницы:&lt;br /&gt;   - Login page с формой&lt;br /&gt;   - Dashboard page&lt;br /&gt;   - 404 page&lt;br /&gt;3. Компоненты:&lt;br /&gt;   - LoginForm&lt;br /&gt;   - UserMenu&lt;br /&gt;   - LanguageSelector&lt;/p&gt;
  &lt;h3 id=&quot;pown&quot;&gt;Этап 8: Мультиязычность (i18n)&lt;/h3&gt;
  &lt;p id=&quot;v5Py&quot;&gt;1. Настройка i18n в Quasar&lt;br /&gt;2. Создание языковых файлов:&lt;br /&gt;   - &amp;#x60;en.json&amp;#x60;&lt;br /&gt;   - &amp;#x60;ru.json&amp;#x60;&lt;br /&gt;   - &amp;#x60;sr.json&amp;#x60; (сербский)&lt;br /&gt;3. Интеграция с компонентами&lt;br /&gt;4. Сохранение выбранного языка&lt;/p&gt;
  &lt;h3 id=&quot;8MEd&quot;&gt;Этап 9: Обработка ошибок и валидация&lt;/h3&gt;
  &lt;p id=&quot;EqJF&quot;&gt;1. Глобальная обработка ошибок (Frontend)&lt;br /&gt;2. Валидация форм&lt;br /&gt;3. Toast/notify для уведомлений&lt;br /&gt;4. Loading states&lt;/p&gt;
  &lt;h3 id=&quot;c6D9&quot;&gt;Этап 10: Тестирование и документация&lt;/h3&gt;
  &lt;p id=&quot;FpJp&quot;&gt;1. Unit тесты для критических функций&lt;br /&gt;2. API документация (Swagger/OpenAPI)&lt;br /&gt;3. README с инструкциями по установке&lt;br /&gt;4. Комментарии в коде&lt;/p&gt;
  &lt;h3 id=&quot;xUxH&quot;&gt;Этап 11: Деплой и CI/CD&lt;/h3&gt;
  &lt;p id=&quot;ILxl&quot;&gt;1. Настройка GitHub Actions&lt;br /&gt;2. Скрипты для production сборки&lt;br /&gt;3. Environment variables&lt;br /&gt;4. Systemd сервисы для Ubuntu&lt;/p&gt;
  &lt;h2 id=&quot;Njoo&quot;&gt;Git Flow стратегия&lt;/h2&gt;
  &lt;p id=&quot;KxnA&quot;&gt;- &amp;#x60;main&amp;#x60; - стабильная версия&lt;br /&gt;- &amp;#x60;develop&amp;#x60; - разработка&lt;br /&gt;- &amp;#x60;feature/*&amp;#x60; - новые функции&lt;br /&gt;- Каждый этап = отдельная feature ветка&lt;br /&gt;- Pull Request после каждого этапа&lt;/p&gt;
  &lt;h2 id=&quot;9Plw&quot;&gt;Соглашения по коммитам&lt;/h2&gt;
  &lt;p id=&quot;2oJW&quot;&gt;&lt;strong&gt;feat&lt;/strong&gt;: добавление новой функциональности&lt;br /&gt;&lt;strong&gt;fix&lt;/strong&gt;: исправление багов&lt;br /&gt;&lt;strong&gt;docs&lt;/strong&gt;: обновление документации&lt;br /&gt;&lt;strong&gt;style&lt;/strong&gt;: форматирование кода&lt;br /&gt;&lt;strong&gt;refactor&lt;/strong&gt;: рефакторинг&lt;br /&gt;&lt;strong&gt;test&lt;/strong&gt;: добавление тестов&lt;br /&gt;&lt;strong&gt;chore&lt;/strong&gt;: обновление зависимостей&lt;br /&gt;&lt;/p&gt;
  &lt;h2 id=&quot;LxzS&quot;&gt;Статьи с реализацией разработки&lt;/h2&gt;
  &lt;p id=&quot;k2Gc&quot;&gt;В процессе разработки&lt;/p&gt;
  &lt;p id=&quot;q4sD&quot;&gt;&lt;strong&gt;В разработке&lt;/strong&gt;&lt;/p&gt;
  &lt;p id=&quot;eisk&quot;&gt;Этап 1: Инициализация и настройка репозитория&lt;/p&gt;
  &lt;p id=&quot;qDWN&quot;&gt;Этап 2: Настройка Backend (Node.js + TypeScript)&lt;/p&gt;
  &lt;p id=&quot;Owx0&quot;&gt;Этап 3: Создание API endpoints&lt;/p&gt;
  &lt;p id=&quot;RXAB&quot;&gt;Этап 4: База данных (SQLite)&lt;/p&gt;
  &lt;p id=&quot;B5Uh&quot;&gt;Этап 5:&lt;a href=&quot;https://blog.mj-dev.ru/quasar-framework-install&quot; target=&quot;_blank&quot;&gt; Инициализация Frontend (Quasar)&lt;/a&gt;&lt;/p&gt;
  &lt;p id=&quot;m9OE&quot;&gt;Этап 6: Система аутентификации (Frontend)&lt;/p&gt;
  &lt;p id=&quot;tY5s&quot;&gt;Этап 7: UI компоненты и страницы&lt;/p&gt;
  &lt;p id=&quot;afj3&quot;&gt;Этап 8: Мультиязычность (i18n)&lt;/p&gt;
  &lt;p id=&quot;VXkQ&quot;&gt;Этап 9: Обработка ошибок и валидация&lt;/p&gt;
  &lt;p id=&quot;sXOH&quot;&gt;Этап 10: Тестирование и документация&lt;/p&gt;
  &lt;p id=&quot;E8em&quot;&gt;Этап 11: Деплой и CI/CD&lt;/p&gt;

</content></entry><entry><id>mj-dev:prompt-sleeping-calico-cat</id><link rel="alternate" type="text/html" href="https://blog.mj-dev.ru/prompt-sleeping-calico-cat?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=mj-dev"></link><title>Спящий кот calico в саду. Текстовый запрос AI + скачать готовые изображения</title><published>2025-09-27T13:41:46.648Z</published><updated>2025-09-27T16:19:32.196Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img4.teletype.in/files/b8/2d/b82db50e-e8e1-447b-91ea-5810c407708d.png"></media:thumbnail><category term="ai-promt-images" label="Промты изображений"></category><tt:hashtag>ai_image_generator</tt:hashtag><tt:hashtag>prompt</tt:hashtag><tt:hashtag>cat</tt:hashtag><tt:hashtag>download</tt:hashtag><tt:hashtag>shedevrum</tt:hashtag><tt:hashtag>шедеврум</tt:hashtag><tt:hashtag>промт</tt:hashtag><tt:hashtag>stable_diffusion</tt:hashtag><summary type="html">&lt;img src=&quot;https://img1.teletype.in/files/40/24/4024007b-a71a-4074-9046-1efedb120ef8.jpeg&quot;&gt;Хотите, чтобы нейросеть сгенерировала не просто картинку, а настоящий, профессионально снятый кадр? Секрет кроется в деталях! Мы разберем по косточкам промт, который превращает обычное описание спящего кота в шедевр фотографии, используя язык света, оптики и настроения.</summary><content type="html">
  &lt;figure id=&quot;97Uv&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/40/24/4024007b-a71a-4074-9046-1efedb120ef8.jpeg&quot; width=&quot;5376&quot; /&gt;
    &lt;figcaption&gt;Спящий кот calico в саду. Текстовый запрос AI + скачать готовые изображения.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;tek3&quot;&gt;Хотите, чтобы нейросеть сгенерировала не просто картинку, а настоящий, профессионально снятый кадр? Секрет кроется в деталях! Мы разберем по косточкам промт, который превращает обычное описание спящего кота в шедевр фотографии, используя язык света, оптики и настроения.&lt;/p&gt;
  &lt;p id=&quot;Vwlx&quot;&gt;&lt;strong&gt;Содержание:&lt;/strong&gt;&lt;/p&gt;
  &lt;nav&gt;
    &lt;ul&gt;
      &lt;li class=&quot;m_level_1&quot;&gt;&lt;a href=&quot;#sMP6&quot;&gt;Скачать готовые изображения&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_1&quot;&gt;&lt;a href=&quot;#6W97&quot;&gt;Текстовый запрос&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#jpYT&quot;&gt;Результат в Шедеврум&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#yUJg&quot;&gt;Результат в Stable Diffusion&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_1&quot;&gt;&lt;a href=&quot;#h7G4&quot;&gt;Структурный разбор промта&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#issE&quot;&gt;1. Объект и Действие (Суть сцены)&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#N7B0&quot;&gt;2. Среда и Атмосфера (Место и Настроение)&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#xn53&quot;&gt;3. Свет и Детализация (Магия Реализма)&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#LIcc&quot;&gt;4. Технические Параметры (Взгляд Фотографа)&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_1&quot;&gt;&lt;a href=&quot;#ER9C&quot;&gt;Где генерить&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#wnlM&quot;&gt;SYNTX - сервис доступа ко всем популярным нейросетям. Доступен в России.&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#G5UW&quot;&gt;Шедеврум&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_1&quot;&gt;&lt;a href=&quot;#qBc7&quot;&gt;Источник вдохновения&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;p id=&quot;mmCa&quot;&gt;  &lt;/p&gt;
  &lt;h2 id=&quot;sMP6&quot;&gt;Скачать готовые изображения&lt;/h2&gt;
  &lt;section style=&quot;background-color:hsl(hsl(34,  84%, var(--autocolor-background-lightness, 95%)), 85%, 85%);&quot;&gt;
    &lt;p id=&quot;ISx4&quot;&gt;&lt;a href=&quot;https://disk.yandex.ru/d/TVSxl9MDLdTH-A&quot; target=&quot;_blank&quot;&gt;Скачать готовые изображения с Яндекс Диска&lt;/a&gt;&lt;/p&gt;
  &lt;/section&gt;
  &lt;p id=&quot;tnV5&quot;&gt;Изображения можно использовать в коммерческих целях.&lt;/p&gt;
  &lt;p id=&quot;I7MJ&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;6W97&quot;&gt;Текстовый запрос&lt;/h2&gt;
  &lt;section style=&quot;background-color:hsl(hsl(199, 50%, var(--autocolor-background-lightness, 95%)), 85%, 85%);&quot;&gt;
    &lt;p id=&quot;M5mV&quot;&gt;📍 Photorealistic close-up of a sleeping calico tabby cat curled up on a warm stone patio in a small garden, full body, eyes closed, soft golden sunlight with dappled shade, surrounded by potted green plants and terracotta pots, gentle rim light on the fur, shallow depth of field, creamy bokeh, natural colors, ultra-detailed fur texture, peaceful cozy mood, low angle, 50mm lens, f/2.8, high-resolution.&lt;/p&gt;
  &lt;/section&gt;
  &lt;hr /&gt;
  &lt;h3 id=&quot;jpYT&quot;&gt;Результат в Шедеврум&lt;/h3&gt;
  &lt;figure id=&quot;nNjB&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/40/24/4024007b-a71a-4074-9046-1efedb120ef8.jpeg&quot; width=&quot;5376&quot; /&gt;
    &lt;figcaption&gt;Шедеврум&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;q38X&quot;&gt;🧮 Модель: Шедеврум v2.5 &lt;/p&gt;
  &lt;p id=&quot;U4MJ&quot;&gt;📐 Разрешение:  1152x896&lt;/p&gt;
  &lt;p id=&quot;Y7t5&quot;&gt;&lt;strong&gt;Создано в Шедеврум:&lt;/strong&gt; &lt;a href=&quot;https://shedevrum.ai/post/2f69b0279aff11f083b5aa6fb38c5998?share=t3amvd2gjtftd3dt6xqwaxkubc&quot; target=&quot;_blank&quot;&gt;открыть генерацию &lt;/a&gt;&lt;/p&gt;
  &lt;hr /&gt;
  &lt;h3 id=&quot;yUJg&quot;&gt;Результат в Stable Diffusion&lt;/h3&gt;
  &lt;figure id=&quot;Kd5C&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/f1/41/f1415d20-5081-482e-8dfb-7cc7426d22a7.jpeg&quot; width=&quot;1152&quot; /&gt;
    &lt;figcaption&gt;Stable Diffusion&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;J8mK&quot;&gt;🧮 Модель: Stable Diffusion (SDXL)&lt;br /&gt;📐 Разрешение:  1152x896&lt;br /&gt;🕹️ CheckPoint: Juggernaut&lt;br /&gt;🧩 Sampler: DPM++ 2M SDE Karras&lt;br /&gt;👁️‍🗨️ Cfg: 3&lt;br /&gt;👣 Steps: 40&lt;br /&gt;🌱 Seed: 1926937319&lt;/p&gt;
  &lt;p id=&quot;5pSW&quot;&gt;&lt;strong&gt;Создано в SYNTX:&lt;/strong&gt;&lt;/p&gt;
  &lt;ul id=&quot;sAwF&quot;&gt;
    &lt;li id=&quot;j45S&quot;&gt;Телеграм бот: &lt;a href=&quot;https://t.me/syntxaibot?start=aff_79759961&quot; target=&quot;_blank&quot;&gt;открыть&lt;/a&gt;&lt;/li&gt;
    &lt;li id=&quot;c870&quot;&gt;Сайт : &lt;a href=&quot;https://www.syntx.ai/welcome/p8Pg0ZWx&quot; target=&quot;_blank&quot;&gt;открыть&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;ZgJG&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;h7G4&quot;&gt;Структурный разбор промта&lt;/h2&gt;
  &lt;p id=&quot;src7&quot;&gt;Для создания &lt;strong&gt;максимально реалистичного&lt;/strong&gt; и атмосферного изображения промт был разделён на четыре &lt;strong&gt;фундаментальных&lt;/strong&gt; категории. Понимание этих блоков позволяет контролировать каждый аспект генерации.&lt;/p&gt;
  &lt;h3 id=&quot;issE&quot;&gt;1. Объект и Действие (Суть сцены)&lt;/h3&gt;
  &lt;p id=&quot;vGIP&quot;&gt;Это — &lt;strong&gt;кто&lt;/strong&gt; и &lt;strong&gt;что&lt;/strong&gt; делает. Самая важная часть, определяющая сюжет.&lt;/p&gt;
  &lt;ul id=&quot;cnGG&quot;&gt;
    &lt;li id=&quot;nZhA&quot;&gt;&lt;code&gt;a sleeping calico tabby cat curled up&lt;/code&gt;: Точное описание позы и окраса. &lt;strong&gt;&lt;code&gt;calico&lt;/code&gt;&lt;/strong&gt; (трёхцветный) и &lt;strong&gt;&lt;code&gt;tabby&lt;/code&gt;&lt;/strong&gt; (полосатый) — это &lt;strong&gt;два мощных маркера&lt;/strong&gt;, которые дают генератору сложную, многослойную и красивую текстуру шерсти.&lt;/li&gt;
    &lt;li id=&quot;8BYY&quot;&gt;&lt;code&gt;full body&lt;/code&gt;, &lt;strong&gt;&lt;code&gt;eyes closed&lt;/code&gt;&lt;/strong&gt;: Добавляет &lt;strong&gt;завершенность&lt;/strong&gt; кадру и подчеркивает &lt;strong&gt;умиротворение&lt;/strong&gt; сцены.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;h3 id=&quot;N7B0&quot;&gt;2. Среда и Атмосфера (Место и Настроение)&lt;/h3&gt;
  &lt;p id=&quot;Dt8i&quot;&gt;Это — &lt;strong&gt;где&lt;/strong&gt; это происходит и &lt;strong&gt;какое&lt;/strong&gt; это вызывает чувство.&lt;/p&gt;
  &lt;ul id=&quot;anMB&quot;&gt;
    &lt;li id=&quot;pCaj&quot;&gt;&lt;code&gt;on a warm stone patio in a small garden&lt;/code&gt;: Создает &lt;strong&gt;контраст&lt;/strong&gt; между живым (кот) и искусственным/натуральным (камень, сад). Слово &lt;strong&gt;&lt;code&gt;warm&lt;/code&gt;&lt;/strong&gt; (теплый) задает цветовую палитру (бежевые, терракотовые, оранжевые тона).&lt;/li&gt;
    &lt;li id=&quot;8IuU&quot;&gt;&lt;code&gt;surrounded by potted green plants and terracotta pots&lt;/code&gt;: Добавляет &lt;strong&gt;детализацию&lt;/strong&gt; фона и усиливает ощущение &lt;strong&gt;уюта&lt;/strong&gt; среди садовой атрибутики.&lt;/li&gt;
    &lt;li id=&quot;1nKA&quot;&gt;&lt;code&gt;peaceful cozy mood&lt;/code&gt;: Прямой призыв к нейросети использовать &lt;strong&gt;мягкие&lt;/strong&gt; цвета и композицию для передачи этого &lt;strong&gt;настроения&lt;/strong&gt;.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;h3 id=&quot;xn53&quot;&gt;3. Свет и Детализация (Магия Реализма)&lt;/h3&gt;
  &lt;p id=&quot;9Iig&quot;&gt;Это — то, что превращает простое изображение в &lt;strong&gt;фотореалистичное&lt;/strong&gt;.&lt;/p&gt;
  &lt;ul id=&quot;coQ8&quot;&gt;
    &lt;li id=&quot;uu4g&quot;&gt;&lt;code&gt;Photorealistic close-up&lt;/code&gt;: Определяет &lt;strong&gt;стиль&lt;/strong&gt; (реализм) и &lt;strong&gt;кадр&lt;/strong&gt; (крупный план).&lt;/li&gt;
    &lt;li id=&quot;BBk7&quot;&gt;&lt;code&gt;soft golden sunlight with dappled shade&lt;/code&gt;: &lt;strong&gt;Ключевой&lt;/strong&gt; элемент! &lt;code&gt;soft golden sunlight&lt;/code&gt; (мягкий золотистый свет) – это волшебство, а &lt;strong&gt;&lt;code&gt;dappled shade&lt;/code&gt;&lt;/strong&gt; (пятнистая тень) делает свет &lt;strong&gt;живым&lt;/strong&gt; и динамичным, имитируя игру солнца через листья.&lt;/li&gt;
    &lt;li id=&quot;zbsZ&quot;&gt;&lt;code&gt;gentle rim light on the fur&lt;/code&gt;: &lt;strong&gt;Профессиональный&lt;/strong&gt; термин! Контровой (окантовочный) свет, который &lt;strong&gt;отделяет&lt;/strong&gt; кота от фона, подчеркивает каждую волосинку и добавляет &lt;strong&gt;глубины&lt;/strong&gt;.&lt;/li&gt;
    &lt;li id=&quot;htOA&quot;&gt;&lt;code&gt;ultra-detailed fur texture&lt;/code&gt;, &lt;strong&gt;&lt;code&gt;natural colors&lt;/code&gt;&lt;/strong&gt;: Усиливает требование к &lt;strong&gt;качеству&lt;/strong&gt; проработки материала.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;h3 id=&quot;LIcc&quot;&gt;4. Технические Параметры (Взгляд Фотографа)&lt;/h3&gt;
  &lt;p id=&quot;P4nh&quot;&gt;Это — &lt;strong&gt;язык камеры&lt;/strong&gt;, который диктует генератору, как &lt;em&gt;должен&lt;/em&gt; выглядеть кадр.&lt;/p&gt;
  &lt;ul id=&quot;XiAI&quot;&gt;
    &lt;li id=&quot;fs2P&quot;&gt;&lt;strong&gt;&lt;code&gt;low angle&lt;/code&gt;&lt;/strong&gt;: &lt;strong&gt;Низкий ракурс&lt;/strong&gt;. Мы смотрим на кота &lt;strong&gt;снизу&lt;/strong&gt;, что делает его более монументальным и приближает к зрителю.&lt;/li&gt;
    &lt;li id=&quot;PuOe&quot;&gt;&lt;strong&gt;&lt;code&gt;50mm lens&lt;/code&gt;&lt;/strong&gt;, &lt;strong&gt;&lt;code&gt;f/2.8&lt;/code&gt;&lt;/strong&gt;: &lt;strong&gt;Классический&lt;/strong&gt; набор для портрета. 50 мм — это естественная перспектива, а f/2.8 — &lt;strong&gt;широко открытая диафрагма&lt;/strong&gt;.&lt;/li&gt;
    &lt;li id=&quot;KopJ&quot;&gt;&lt;strong&gt;&lt;code&gt;shallow depth of field&lt;/code&gt;&lt;/strong&gt;, &lt;strong&gt;&lt;code&gt;creamy bokeh&lt;/code&gt;&lt;/strong&gt;: &lt;strong&gt;Прямое следствие&lt;/strong&gt; f/2.8. Размытый, &lt;strong&gt;мягкий&lt;/strong&gt; фон (&lt;strong&gt;&lt;code&gt;creamy bokeh&lt;/code&gt;&lt;/strong&gt;) позволяет &lt;strong&gt;полностью&lt;/strong&gt; сфокусироваться на коте, делая изображение &lt;strong&gt;профессиональным&lt;/strong&gt; и объемным.&lt;/li&gt;
    &lt;li id=&quot;Pzo5&quot;&gt;&lt;code&gt;high-resolution&lt;/code&gt;: Требование к финальному качеству.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;f5Ok&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;ER9C&quot;&gt;Где генерить&lt;/h2&gt;
  &lt;p id=&quot;GnJl&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;wnlM&quot;&gt;&lt;strong&gt;SYNTX&lt;/strong&gt; - сервис доступа ко всем популярным нейросетям. Доступен в России.&lt;/h3&gt;
  &lt;ul id=&quot;QLWH&quot;&gt;
    &lt;li id=&quot;auQ1&quot;&gt;Доступен в России. &lt;/li&gt;
    &lt;li id=&quot;KfrS&quot;&gt;Оплата рублями. &lt;/li&gt;
    &lt;li id=&quot;IcPo&quot;&gt;Подробные инструкции по каждой нейросети. &lt;/li&gt;
    &lt;li id=&quot;UUlh&quot;&gt;Активное сообщество. &lt;/li&gt;
    &lt;li id=&quot;dXgw&quot;&gt;Ивенты и обучающие видео.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;TdvD&quot;&gt;&lt;strong&gt;Нейросети для генерации изображений:&lt;/strong&gt; MidJourney, Flux, Sora Images, Runway Frames, Stable Diffusion, Ideogram, Kling KOLORS, Recraft, Google AI Editor.&lt;/p&gt;
  &lt;section style=&quot;background-color:hsl(hsl(170, 33%, var(--autocolor-background-lightness, 95%)), 85%, 85%);&quot;&gt;
    &lt;ul id=&quot;0Yro&quot;&gt;
      &lt;li id=&quot;SbLQ&quot;&gt;Телеграм бот SYNTX: &lt;a href=&quot;https://t.me/syntxaibot?start=aff_79759961&quot; target=&quot;_blank&quot;&gt;открыть&lt;/a&gt;&lt;/li&gt;
      &lt;li id=&quot;LPGK&quot;&gt;Сайт SYNTX: &lt;a href=&quot;https://www.syntx.ai/welcome/p8Pg0ZWx&quot; target=&quot;_blank&quot;&gt;открыть&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/section&gt;
  &lt;h3 id=&quot;G5UW&quot;&gt;Шедеврум&lt;/h3&gt;
  &lt;p id=&quot;Gltv&quot;&gt;Проект «Яндекс». Генерит изображения и видео по текстовому описанию с помощью нейросети YandexART.&lt;/p&gt;
  &lt;section style=&quot;background-color:hsl(hsl(170, 33%, var(--autocolor-background-lightness, 95%)), 85%, 85%);&quot;&gt;
    &lt;p id=&quot;ksRJ&quot;&gt;Сайт Шедеврум: &lt;a href=&quot;https://shedevrum.ai&quot; target=&quot;_blank&quot;&gt;открыть &lt;/a&gt;&lt;/p&gt;
  &lt;/section&gt;
  &lt;p id=&quot;sPbl&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;qBc7&quot;&gt;Источник вдохновения&lt;/h2&gt;
  &lt;figure id=&quot;R6ib&quot; class=&quot;m_custom&quot;&gt;
    &lt;iframe src=&quot;https://assets.pinterest.com/ext/embed.html?id=828240187762635798&quot;&gt;&lt;/iframe&gt;
  &lt;/figure&gt;
  &lt;tt-tags id=&quot;0Zd4&quot;&gt;
    &lt;tt-tag name=&quot;ai_image_generator&quot;&gt;#ai_image_generator&lt;/tt-tag&gt;
    &lt;tt-tag name=&quot;prompt&quot;&gt;#prompt&lt;/tt-tag&gt;
    &lt;tt-tag name=&quot;cat&quot;&gt;#cat&lt;/tt-tag&gt;
    &lt;tt-tag name=&quot;download&quot;&gt;#download&lt;/tt-tag&gt;
    &lt;tt-tag name=&quot;shedevrum&quot;&gt;#shedevrum&lt;/tt-tag&gt;
    &lt;tt-tag name=&quot;шедеврум&quot;&gt;#шедеврум&lt;/tt-tag&gt;
    &lt;tt-tag name=&quot;промт&quot;&gt;#промт&lt;/tt-tag&gt;
    &lt;tt-tag name=&quot;stable_diffusion&quot;&gt;#stable_diffusion&lt;/tt-tag&gt;
  &lt;/tt-tags&gt;

</content></entry><entry><id>mj-dev:promt-healthy-breakfast</id><link rel="alternate" type="text/html" href="https://blog.mj-dev.ru/promt-healthy-breakfast?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=mj-dev"></link><title>Генерим изображение в AI: Завтрак в стиле &quot;кулинарный flatlay&quot;.</title><published>2025-09-22T11:50:48.407Z</published><updated>2025-09-22T11:50:48.407Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img2.teletype.in/files/d7/97/d797d50a-bf96-4168-90f6-09f6dddd558d.png"></media:thumbnail><category term="ai-promt-images" label="Промты изображений"></category><summary type="html">&lt;img src=&quot;https://img2.teletype.in/files/1a/e4/1ae433be-aed6-477f-b78f-f190767702a9.jpeg&quot;&gt;Классическая фуд-фотография, выполненная в светлых, минималистичных тонах. Основной акцент сделан на завтраке, снятом сверху (flat lay). Настроение уюта и свежести.</summary><content type="html">
  &lt;figure id=&quot;kdyz&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/1a/e4/1ae433be-aed6-477f-b78f-f190767702a9.jpeg&quot; width=&quot;1152&quot; /&gt;
    &lt;figcaption&gt;Классическая фуд-фотография, выполненная в светлых, минималистичных тонах. Изображение создано в AI Шедеврум Pro (студия) v2.5&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;nav&gt;
    &lt;ul&gt;
      &lt;li class=&quot;m_level_1&quot;&gt;&lt;a href=&quot;#sQPn&quot;&gt;Идея изображения&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_1&quot;&gt;&lt;a href=&quot;#cIn3&quot;&gt;Генерация в нейросети&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#qeWj&quot;&gt;Нейросеть&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#ocLT&quot;&gt;Промт&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_1&quot;&gt;&lt;a href=&quot;#bRNP&quot;&gt;Разбор промта&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#74lt&quot;&gt;1. Основной объект и ракурс&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#64Vp&quot;&gt;2. Фон и освещение&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_2&quot;&gt;&lt;a href=&quot;#2yr0&quot;&gt;3. Композиция и стиль&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_1&quot;&gt;&lt;a href=&quot;#ktn4&quot;&gt;Термины и словосочетания&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;m_level_1&quot;&gt;&lt;a href=&quot;#x8C7&quot;&gt;Глаголы&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;h2 id=&quot;sQPn&quot;&gt;Идея изображения&lt;/h2&gt;
  &lt;p id=&quot;xfIv&quot;&gt;Классическая &lt;strong&gt;фуд-фотография&lt;/strong&gt;, выполненная в &lt;strong&gt;светлых, минималистичных тонах&lt;/strong&gt;. Основной акцент сделан на завтраке, снятом &lt;strong&gt;сверху (flat lay)&lt;/strong&gt;. Настроение уюта и свежести.&lt;/p&gt;
  &lt;p id=&quot;yPc8&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;cIn3&quot;&gt;Генерация в нейросети&lt;/h2&gt;
  &lt;p id=&quot;2ezz&quot;&gt;Помним, что при генерации изображения нейросети &amp;quot;галлюцинируют&amp;quot;. Поэтому набираемся терпения и перегенерим изображение несколько раз до получения правильного результата.&lt;/p&gt;
  &lt;h3 id=&quot;qeWj&quot;&gt;Нейросеть&lt;/h3&gt;
  &lt;p id=&quot;M2UZ&quot;&gt;Cоздано в AI &lt;a href=&quot;https://shedevrum.ai/&quot; target=&quot;_blank&quot;&gt;Шедеврум Pro&lt;/a&gt; (студия) v2.5&lt;/p&gt;
  &lt;h3 id=&quot;ocLT&quot;&gt;Промт&lt;/h3&gt;
  &lt;p id=&quot;1MFE&quot;&gt;A top-down shot of a healthy breakfast, including a white ceramic plate with yogurt, a baked pear half, roasted almonds, and pumpkin seeds, drizzled with honey. A single white cup of cappuccino on a saucer, a polished silver spoon, and a satin cotton napkin are arranged on a clean white background. The scene is illuminated by soft, natural light, creating gentle shadows. The composition adheres to the rule of thirds, with a shallow depth of field to keep the food in focus and the background slightly blurred. The image has a clean, minimalist aesthetic.&lt;/p&gt;
  &lt;p id=&quot;8sHW&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;bRNP&quot;&gt;Разбор промта&lt;/h2&gt;
  &lt;p id=&quot;02dv&quot;&gt;Давайте проанализируем этот промт. Важно очень хорошо структурировать и описывать множество деталей, которые помогают нейросети создать точное и качественное изображение.  Вот разбор по ключевым элементам.&lt;/p&gt;
  &lt;h3 id=&quot;74lt&quot;&gt;&lt;strong&gt;1. Основной объект и ракурс&lt;/strong&gt;&lt;/h3&gt;
  &lt;hr /&gt;
  &lt;ul id=&quot;xWnT&quot;&gt;
    &lt;li id=&quot;hbWc&quot;&gt;&lt;strong&gt;A top-down shot of a healthy breakfast&lt;/strong&gt;&lt;/li&gt;
    &lt;ul id=&quot;8yDG&quot;&gt;
      &lt;li id=&quot;jniz&quot;&gt;&lt;strong&gt;A top-down shot:&lt;/strong&gt; Это один из самых важных терминов, он задаёт ракурс съёмки — прямо сверху, что позволяет показать всю композицию целиком.&lt;/li&gt;
      &lt;li id=&quot;rhBq&quot;&gt;&lt;strong&gt;a healthy breakfast:&lt;/strong&gt; Задаёт основную тему и стиль.&lt;/li&gt;
    &lt;/ul&gt;
    &lt;li id=&quot;rfXw&quot;&gt;&lt;strong&gt;Состав завтрака:&lt;/strong&gt;&lt;/li&gt;
    &lt;ul id=&quot;HVP8&quot;&gt;
      &lt;li id=&quot;znCb&quot;&gt;&lt;strong&gt;a white ceramic plate with yogurt, a baked pear half, roasted almonds, and pumpkin seeds, drizzled with honey.&lt;/strong&gt;&lt;/li&gt;
      &lt;li id=&quot;mI1V&quot;&gt;&lt;strong&gt;A single white cup of cappuccino on a saucer, a polished silver spoon, and a satin cotton napkin:&lt;/strong&gt; Эти детали точно описывают каждый предмет в кадре. Важно, что прописаны не только сами предметы, но и их материалы (керамика, серебро, сатин), а также цвет (&lt;strong&gt;white&lt;/strong&gt;). Это помогает нейросети сгенерировать реалистичные текстуры и оттенки.&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/ul&gt;
  &lt;h3 id=&quot;64Vp&quot;&gt;&lt;strong&gt;2. Фон и освещение&lt;/strong&gt;&lt;/h3&gt;
  &lt;hr /&gt;
  &lt;ul id=&quot;T7jg&quot;&gt;
    &lt;li id=&quot;GZfj&quot;&gt;&lt;strong&gt;arranged on a clean white background:&lt;/strong&gt; Определяет фон. Чистый белый фон — это ключевая деталь, которая подчёркивает &lt;strong&gt;минимализм&lt;/strong&gt; и позволяет выделить сам завтрак.&lt;/li&gt;
    &lt;li id=&quot;jeNK&quot;&gt;&lt;strong&gt;The scene is illuminated by soft, natural light, creating gentle shadows:&lt;/strong&gt; Освещение — критический элемент. &lt;strong&gt;Soft, natural light&lt;/strong&gt; (мягкий, естественный свет) обеспечивает натуральный вид и помогает создать приятную атмосферу. Упоминание &lt;strong&gt;gentle shadows&lt;/strong&gt; (мягких теней) ещё больше уточняет тип освещения, исключая резкие и контрастные тени.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;h3 id=&quot;2yr0&quot;&gt;&lt;strong&gt;3. Композиция и стиль&lt;/strong&gt;&lt;/h3&gt;
  &lt;hr /&gt;
  &lt;ul id=&quot;MxYR&quot;&gt;
    &lt;li id=&quot;bCXU&quot;&gt;&lt;strong&gt;The composition adheres to the rule of thirds:&lt;/strong&gt; Это профессиональное правило композиции, которое помогает создать более сбалансированное и гармоничное изображение, чем если бы объекты были расположены по центру.&lt;/li&gt;
    &lt;li id=&quot;g1VW&quot;&gt;&lt;strong&gt;with a shallow depth of field to keep the food in focus and the background slightly blurred:&lt;/strong&gt; Этот термин отвечает за глубину резкости. &lt;strong&gt;Shallow depth of field&lt;/strong&gt; означает, что главный объект (еда) будет резким, а фон будет слегка размыт. Это привлекает внимание зрителя к завтраку и создаёт приятный художественный эффект, известный как &lt;strong&gt;боке&lt;/strong&gt;.&lt;/li&gt;
    &lt;li id=&quot;U6We&quot;&gt;&lt;strong&gt;The image has a clean, minimalist aesthetic:&lt;/strong&gt; Это финальное уточнение, которое объединяет все предыдущие элементы. Оно суммирует желаемый стиль: чистый, простой, без лишних деталей.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;9pbk&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;ktn4&quot;&gt;&lt;strong&gt;Термины и словосочетания&lt;/strong&gt;&lt;/h2&gt;
  &lt;hr /&gt;
  &lt;ul id=&quot;RztS&quot;&gt;
    &lt;li id=&quot;xDpn&quot;&gt;&lt;strong&gt;Top-down shot&lt;/strong&gt;: Ракурс съёмки, при котором камера находится прямо над объектом. Также известен как &amp;quot;flat lay&amp;quot;.&lt;/li&gt;
    &lt;li id=&quot;Tarw&quot;&gt;&lt;strong&gt;Drizzled with honey&lt;/strong&gt;: Способ подачи. Описывает, как мёд тонкой струйкой поливает блюдо.&lt;/li&gt;
    &lt;li id=&quot;19Ks&quot;&gt;&lt;strong&gt;Arranged on&lt;/strong&gt;: Способ расположения предметов в кадре. Обозначает, что они аккуратно разложены.&lt;/li&gt;
    &lt;li id=&quot;nw7C&quot;&gt;&lt;strong&gt;Clean white background&lt;/strong&gt;: Характеристика фона. Указывает на его цвет и отсутствие лишних деталей.&lt;/li&gt;
    &lt;li id=&quot;0yLx&quot;&gt;&lt;strong&gt;Soft, natural light&lt;/strong&gt;: Тип освещения. Мягкий, естественный свет, обычно идущий из окна, который создаёт приятную атмосферу.&lt;/li&gt;
    &lt;li id=&quot;9WKU&quot;&gt;&lt;strong&gt;Gentle shadows&lt;/strong&gt;: Описание теней. Подчёркивает, что они не резкие и не тёмные, а мягкие и едва заметные.&lt;/li&gt;
    &lt;li id=&quot;Mlqv&quot;&gt;&lt;strong&gt;Rule of thirds&lt;/strong&gt;: Правило композиции. Разделение кадра на девять равных частей для гармоничного расположения объектов.&lt;/li&gt;
    &lt;li id=&quot;onpA&quot;&gt;&lt;strong&gt;Shallow depth of field&lt;/strong&gt;: Глубина резкости. Приём, который делает главный объект чётким, а фон — размытым.&lt;/li&gt;
    &lt;li id=&quot;HqFE&quot;&gt;&lt;strong&gt;Clean, minimalist aesthetic&lt;/strong&gt;: Общий стиль. Подчёркивает простоту, чистоту и минимальное количество деталей в кадре.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;d3ZJ&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;x8C7&quot;&gt;&lt;strong&gt;Глаголы&lt;/strong&gt;&lt;/h2&gt;
  &lt;hr /&gt;
  &lt;ul id=&quot;dxm6&quot;&gt;
    &lt;li id=&quot;A17L&quot;&gt;&lt;strong&gt;Including&lt;/strong&gt;: Обозначает, что в кадре будут перечисленные далее элементы.&lt;/li&gt;
    &lt;li id=&quot;cBGV&quot;&gt;&lt;strong&gt;Creating&lt;/strong&gt;: Описывает, какой эффект оказывает освещение на сцену.&lt;/li&gt;
    &lt;li id=&quot;XjHw&quot;&gt;&lt;strong&gt;Adheres to&lt;/strong&gt;: Указывает на то, что композиция соответствует определённому правилу.&lt;/li&gt;
    &lt;li id=&quot;1Ipc&quot;&gt;&lt;strong&gt;Keep... in focus&lt;/strong&gt;: Описывает цель использования малой глубины резкости — держать еду в фокусе.&lt;/li&gt;
    &lt;li id=&quot;lO1P&quot;&gt;&lt;strong&gt;Slightly blurred&lt;/strong&gt;: Указывает на степень размытия фона.&lt;/li&gt;
  &lt;/ul&gt;

</content></entry><entry><id>mj-dev:unsubscribe-shedevrum-pro</id><link rel="alternate" type="text/html" href="https://blog.mj-dev.ru/unsubscribe-shedevrum-pro?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=mj-dev"></link><title>Как отменить подписку на Шедеврум Про?</title><published>2025-09-11T14:28:59.732Z</published><updated>2025-09-11T16:02:01.061Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img2.teletype.in/files/9d/29/9d290724-2405-4b7f-b840-a8ab30f421dc.png"></media:thumbnail><category term="guide" label="Справочник"></category><summary type="html">&lt;img src=&quot;https://img3.teletype.in/files/e8/f0/e8f0f2af-ee95-4923-8542-17e44bc826f0.jpeg&quot;&gt;Особенности отмены подписки.</summary><content type="html">
  &lt;figure id=&quot;wKjJ&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/e8/f0/e8f0f2af-ee95-4923-8542-17e44bc826f0.jpeg&quot; width=&quot;895&quot; /&gt;
  &lt;/figure&gt;
  &lt;h2 id=&quot;sgl1&quot;&gt;&lt;strong&gt;Что такое «Шедеврум»?&lt;/strong&gt;&lt;/h2&gt;
  &lt;p id=&quot;tNw3&quot;&gt;&lt;strong&gt;&lt;a href=&quot;https://shedevrum.ai/&quot; target=&quot;_blank&quot;&gt;Шедеврум&lt;/a&gt;&lt;/strong&gt; — это проект, сервис и приложение от &lt;strong&gt;Яндекса&lt;/strong&gt;, который работает на основе нейросетей &lt;strong&gt;YandexART&lt;/strong&gt; и &lt;strong&gt;YandexGPT&lt;/strong&gt;. С помощью &lt;strong&gt;Шедеврума&lt;/strong&gt; можно создавать изображения и видео, используя текстовые запросы (промпты).&lt;/p&gt;
  &lt;p id=&quot;yZZ6&quot;&gt;Платная подписка называется &lt;a href=&quot;https://shedevrum.ai/premium/&quot; target=&quot;_blank&quot;&gt;&lt;strong&gt;Шедеврум Про&lt;/strong&gt;&lt;/a&gt; и включает в себя расширенный функционал и коммерческую лицензию.&lt;/p&gt;
  &lt;p id=&quot;wlRF&quot;&gt;Сервис &lt;strong&gt;Шедеврум Про&lt;/strong&gt; входит в подписку &lt;a href=&quot;https://plus.yandex.ru/my&quot; target=&quot;_blank&quot;&gt;&lt;strong&gt;Яндекс Плюс&lt;/strong&gt;&lt;/a&gt; и оформляется за дополнительную плату как отдельная опция.&lt;/p&gt;
  &lt;p id=&quot;ViNn&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;gwQK&quot;&gt;Особенности отмены подписки&lt;/h2&gt;
  &lt;p id=&quot;fT9Y&quot;&gt;По состоянию на 11 сентября 2025 года, отмена подписки имеет следующие особенности:&lt;/p&gt;
  &lt;ul id=&quot;kJBb&quot;&gt;
    &lt;li id=&quot;RBEk&quot;&gt;Если вы отмените подписку &lt;strong&gt;Яндекс Плюс&lt;/strong&gt;, подписка на &lt;strong&gt;Шедеврум Про&lt;/strong&gt; (при ещё действующей основной подписке) не отменится автоматически.&lt;/li&gt;
    &lt;li id=&quot;qroH&quot;&gt;Если у вас включён &lt;strong&gt;VPN&lt;/strong&gt; или вы находитесь не в России, пункт отмены подписки недоступен. Его просто нет на странице.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;Zsk6&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;Nre9&quot;&gt;&lt;strong&gt;Как же отменить подписку Шедеврум Про?&lt;/strong&gt;&lt;/h2&gt;
  &lt;ol id=&quot;n0WE&quot;&gt;
    &lt;li id=&quot;WaOr&quot;&gt;Выключите &lt;strong&gt;VPN&lt;/strong&gt;, если находитесь в России. Или включите &lt;strong&gt;VPN&lt;/strong&gt; с российским &lt;strong&gt;IP-адресом&lt;/strong&gt;, если вы за рубежом.&lt;/li&gt;
    &lt;li id=&quot;4Wha&quot;&gt;Перейдите по ссылке в &lt;strong&gt;Кабинет управления подпиской Яндекс Плюс&lt;/strong&gt;: &lt;a href=&quot;https://plus.yandex.ru/my&quot; target=&quot;_blank&quot;&gt;https://plus.yandex.ru/my&lt;/a&gt; .&lt;/li&gt;
    &lt;li id=&quot;MGqz&quot;&gt;Пролистайте до раздела &lt;strong&gt;«Опции к вашей подписке»&lt;/strong&gt;. Перед ним будет пункт с &lt;strong&gt;включёнными опциями&lt;/strong&gt;. Нажмите на кнопку с названием сервиса и сроком подписки, чтобы перейти в раздел управления подпиской Шедеврум Про.&lt;/li&gt;
    &lt;li id=&quot;87Hu&quot;&gt;Нажмите несколько раз &lt;strong&gt;«Отменить»&lt;/strong&gt; и &lt;strong&gt;«Точно уверен, отменить»&lt;/strong&gt;. Готово — ваша подписка отменена.&lt;/li&gt;
  &lt;/ol&gt;
  &lt;p id=&quot;bl17&quot;&gt;&lt;strong&gt;Важно:&lt;/strong&gt; Доступ к &lt;strong&gt;Шедеврум Про&lt;/strong&gt; сохранится до окончания оплаченного периода, даже если вы отменили подписку.&lt;/p&gt;

</content></entry></feed>