Перейти к основному содержимому

Настройка

заметка

Если вы планируете работать над какой-либо функцией, дайте нам знать об этом в Discord, чтобы мы могли:

  1. Сообщить вам, будет ли эта функция принята в Immich
  2. Предоставить рекомендации по ее оптимальной реализации
  3. Убедиться, что никто уже не работает над этим вопросом/функцией, чтобы не дублировать усилия

Спасибо за интерес к участию в разработке 😊

Окружение​

Сервисы​

Это окружение включает в себя следующие сервисы. Подробная информация доступна в README каждого сервиса.

  • Сервер - /server
  • Веб-приложение - /web
  • Машинное обучение - /machine-learning
  • Redis
  • Разработческая база данных PostgreSQL с открытым портом 5432, чтобы вы могли использовать любой клиент базы данных для доступа к ней

Все сервисы упакованы для запуска одной командой Docker Compose.

Сервер и веб-приложения​

  1. Клонируйте репозиторий проекта.
  2. Запустите cp docker/example.env docker/.env.
  3. Измените docker/.env, чтобы указать значения для обязательной переменной UPLOAD_LOCATION.
  4. В корневом каталоге выполните:
Запуск сервера разработки
make dev # требуется установленный в системе Makefile.
  1. Откройте экземпляр разработки в браузере по адресу http://localhost:3000 или подключитесь через мобильное приложение.

Все сервисы будут запущены с включенной горячей перезагрузкой для быстрого цикла обратной связи.

Вы можете получить доступ к веб-версии через http://your-machine-ip:3000 или http://localhost:3000, а также получить доступ к серверу через мобильное приложение по адресу http://your-machine-ip:3000/api

Примечания:

  • Контейнер разработки "web" работает с uid 1000. Если у этого uid нет прав на чтение/запись к монтированным объемам, вы можете столкнуться с ошибками
  • В случае настройки rootless Docker необходимо использовать root внутри контейнера, иначе будут возникать ошибки с правами на чтение/запись. См. комментарии в файле docker/docker-compose.dev.yml.

Подключение веб-приложения к удаленному серверу​

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

  1. Соберите SDK Immich - cd open-api/typescript-sdk && npm i && npm run build && cd -
  2. Перейдите в каталог веб-приложения - cd web/
  3. Установите зависимости веб-приложения - npm i
  4. Запустите сервер разработки веб-приложения
IMMICH_SERVER_URL=https://demo.immich.app/ npm run dev

Если вы используете PowerShell в Windows, возможно, понадобится задать переменную окружения отдельно, например:

$env:IMMICH_SERVER_URL = "https://demo.immich.app/"
npm run dev

@immich/ui​

Чтобы увидеть локальные изменения в @immich/ui в Immich, выполните следующее:

  1. Установите @immich/ui рядом с каталогом immich/, например /home/user/immich и /home/user/ui
  2. Соберите проект @immich/ui с помощью команды npm run build
  3. Раскомментируйте соответствующий том в веб-сервисе файла docker/docker-compose.dev.yaml (../../ui:/usr/ui)
  4. Раскомментируйте соответствующий alias в файле web/vite.config.js ('@immich/ui': path.resolve(__dirname, '../../ui'))
  5. Раскомментируйте строку импорта в файле web/src/app.css (@import '/usr/ui/dist/theme/default.css';) и закомментируйте строку @import '@immich/ui/theme/default.css';
  6. Запустите стек с помощью команды make dev
  7. После внесения изменений в @immich/ui перезагрузите его (npm run build)

Мобильное приложение​

Настройка​

  1. Настройте инструментальную цепочку Flutter с использованием FVM.
  2. Запустите flutter pub get для установки зависимостей.
  3. Выполните make translation для создания файла перевода.
  4. Запустите fvm flutter run для запуска приложения.

Перевод​

Чтобы добавить новый текст перевода, укажите пару "ключ-значение" в файле i18n/en.json в корне проекта Immich. Затем, из каталога mobile/, выполните

make translation

Мобильное приложение спрашивает, к какому серверу подключиться. Вы можете использовать демонстрационный сервер (https://demo.immich.app/), если вам не нужно изменять коды сервера или загружать фотографии. Кроме того, вы можете запустить сервер самостоятельно, следуя вышеуказанным инструкциям.

Настройка IDE​

Расширения для линтинга / форматирования​

Настройка этих расширений в IDE улучшает разработку, автоматически форматируя код при сохранении и предоставляя мгновенную обратную связь по вопросам линтинга.

Dart Code Metrics​

Мобильное приложение использует DCM (Dart Code Metrics) для линтинга и вычисления метрик. Пожалуйста, ознакомьтесь с страницей "Начало работы" для получения дополнительной информации о настройке DCM.

Примечание: Активация лицензии не требуется.

VSCode​

Установите расширения Flutter, DCM, Prettier, ESLint и Svelte. Эти расширения перечислены в файле extensions.json под .vscode/ и должны отображаться как рекомендации для рабочего пространства.

Вот настройки, которые мы используем. Они должны быть активны как настройки рабочего пространства (settings.json):

settings.json
{
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[dart]": {
    "editor.defaultFormatter": "Dart-Code.dart-code",
    "editor.formatOnSave": true,
    "editor.selectionHighlight": false,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": "off"
  },
  "[javascript]": {
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit",
      "source.removeUnusedImports": "explicit"
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[svelte]": {
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit",
      "source.removeUnusedImports": "explicit"
    },
    "editor.defaultFormatter": "svelte.svelte-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[typescript]": {
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit",
      "source.removeUnusedImports": "explicit"
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "cSpell.words": ["immich"],
  "editor.formatOnSave": true,
  "eslint.validate": ["javascript", "svelte"],
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "*.dart": "${capture}.g.dart,${capture}.gr.dart,${capture}.drift.dart",
    "*.ts": "${capture}.spec.ts,${capture}.mock.ts"
  },
  "svelte.enable-ts-plugin": true,
  "typescript.preferences.importModuleSpecifier": "non-relative"
}