# Общие этапы

Для эффективного отслеживания изменений файлов в проекте рекомендуется использовать систему контроля версий GIT. Это позволит сократить время при выпуске обновлений, так как вы сможете легко отслеживать все изменения.

Для удобства рекомендуется создать отдельный репозиторий для папки `frontend`. Вся дальнейшая инструкция предполагает наличие данного репозитория.

По умолчанию в решении уже имеется файл `.gitignore` , который подходит для большинства случаев. Однако при необходимости вы можете его изменить.

# Шаг 1. Создание локальной копии файлов

Если вы используете GIT, склонируйте репозиторий (предварительно обновив его при необходимости) на свой компьютер.

Если вы не используете GIT, вам следует скопировать файлы вручную. Это можно сделать с помощью WinSCP.

Запустите программу и создайте новое подключение:

 ![](https://docs.astdesign.ru/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzQ0Yjc4ZmY0LTFiMDYtNDFhOS04MmMyLWYzMjdmNDVhZWIwOS8zMWIyNDAxNC04OWE3LTQ0NmMtODdjMy0yZWY0ZTM0NDcyOWUvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTMyNjI2MDAsImV4cCI6MTc5MzM0OTAwMH0.jCsw4vQZGqAYQYCjP_rPSmXj8Vyp4B-qvWXzGujtKIo)

Укажите данные для подключения:

* Имя хоста - домен или IP-адрес сервера
* Имя пользователя - root
* Пароль

В левой панели файлового менеджера создайте папку для проекта, например, `site.ru`.

Перейдите в папку `frontend`, которая находится в корне сайта (обычно полный путь: `/home/bitrix/www/frontend`). Выделите все файлы и папки, кроме папок `.nuxt`, `.nuxt-mobile`, `.app-updates` и `node_modules`, затем скопируйте их в локальную папку `site.ru`.


:::info
На скриншоте ниже файлы могут отличаться от тех, что будут у вас. Ничего страшного. Главное - не копируйте указанные выше папки, остальное можно копировать.

:::

 ![](https://docs.astdesign.ru/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzQ0Yjc4ZmY0LTFiMDYtNDFhOS04MmMyLWYzMjdmNDVhZWIwOS9jM2FkM2M4ZS04YmUwLTRiMWYtODZiMi02ZTY5NWM5MjYzYzQvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTMyNjI2MDAsImV4cCI6MTc5MzM0OTAwMH0.KJnvGYRsx6Ag9FvrQvUyd8cIJc4DKt9Fzgwuep0NgSU)

# Шаг 2. Установка зависимостей

Запустите Visual Studio Code и откройте проект через **File → Open Folder**.

 ![](https://docs.astdesign.ru/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzQ0Yjc4ZmY0LTFiMDYtNDFhOS04MmMyLWYzMjdmNDVhZWIwOS82MDg4ZmU5Yi0yYzFmLTQxY2ItOGU2MS0zODVjYjc0NTQ1NjUvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTMyNjI2MDAsImV4cCI6MTc5MzM0OTAwMH0.oqP5lCD6qOm4Qlo_JwekjP7Gkxu2v9g7kZ3mljSRQ_s)

Откройте встроенный терминал с помощью `` Ctrl+` `` и введите команду:

```bash
npm i
```

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

 ![](https://docs.astdesign.ru/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzQ0Yjc4ZmY0LTFiMDYtNDFhOS04MmMyLWYzMjdmNDVhZWIwOS83MjExN2E5Mi1iMGJhLTRkNTktODg1NC04ZmY3MGJmYzI1YmEvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTMyNjI2MDAsImV4cCI6MTc5MzM0OTAwMH0.8WiBMQn9gKXGUZLs_8eUWPu3fly1mKEOEg3xD86Lr7w)

# Шаг 3. Сборка SPA-приложения

Для сборки SPA-приложения, которое будет использовано Capacitor для сборки мобильного приложения, выполните следующую команду в терминале:

```bash
npm run spa
```

Не должно возникнуть ошибок, возможны лишь предупреждения. Результат будет примерно следующим:

 ![](https://docs.astdesign.ru/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzQ0Yjc4ZmY0LTFiMDYtNDFhOS04MmMyLWYzMjdmNDVhZWIwOS9kYTFhNzI5Zi1hZjU5LTQyNTktODcwOC03NTI5M2Y1MWM5ZDMvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTMyNjI2MDAsImV4cCI6MTc5MzM0OTAwMH0.YI6tV-RgQcdB4roXV6jP-6GvbnJhamcXtTpUvXE3a80)

# Шаг 4. Базовая конфигурация

Откройте файл `capacitor.config.json` и внесите следующие изменения в соответствии с вашим приложением:

* **appId** - идентификатор вашего приложения, обычно это перевернутое доменное имя, например, если ваш сайт расположен на домене `site.ru`, укажите в этом параметре `ru.site.app`
* **appName** - название вашего приложения

Другие параметры оставьте без изменений. Блок `plugins` не трогайте целиком: в нём, кроме прочего, настройки [обновления приложения без публикации в магазинах](/s/marketpro/doc/obnovlenie-prilozheniya-bez-publikacii-v-magazinah-NP2xVeXT6q) и push-уведомлений.

```json
{
  "appId": "ru.site.app",
  "appName": "МаркетПро",
  "bundledWebRuntime": false,
  "plugins": {
    "SplashScreen": {
      "launchAutoHide": false,
      "androidScaleType": "CENTER_CROP"
    },
    "StatusBar": {
      "style": "LIGHT"
    },
    "SystemBars": {
      "style": "LIGHT"
    },
    "PushNotifications": {
      "presentationOptions": ["badge", "sound", "alert"]
    },
    "LiveUpdate": {
      "readyTimeout": 20000,
      "autoBlockRolledBackBundles": true,
      "autoDeleteBundles": true,
      "autoUpdateStrategy": "none"
    }
  },
  "webDir": "dist",
  "ios": {
    "contentInset": "always"
  }
}
```

# Шаг 5. Замена названия и идентификатора в проекте платформы

Значения, заданные на предыдущем шаге, нужно подставить в сам проект — в папку `android` или `ios`, смотря какое приложение собираете. Шаг одинаковый для обеих платформ.

В Visual Studio Code нажмите правой кнопкой мыши на папке платформы и выберите пункт **Find in Folder**.

 ![](https://docs.astdesign.ru/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzQ0Yjc4ZmY0LTFiMDYtNDFhOS04MmMyLWYzMjdmNDVhZWIwOS8xYjI1MWI5ZC1jNDAzLTQyNjAtOWMxYy03NDNkNWUwYjZhZTIvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTMyNjI2MDAsImV4cCI6MTc5MzM0OTAwMH0.jAsFfMlqGf-Gdr4RlLT_flDULypAF7im_V25VdfxVps)

В первом поле (Search) введите **com.bamboo.app** — это исходный идентификатор приложения МаркетПро. Во втором поле (Replace) введите ваш **appId** из `capacitor.config.json`. Нажмите значок справа от поля Replace или `Ctrl+Alt+Enter`.

 ![](https://docs.astdesign.ru/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzQ0Yjc4ZmY0LTFiMDYtNDFhOS04MmMyLWYzMjdmNDVhZWIwOS80NTczNTQxZS05MjM1LTRlNmItODZiNC03NTNhZmE2OWI4MWIvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTMyNjI2MDAsImV4cCI6MTc5MzM0OTAwMH0.IzEaSi1_cpBQnwxCTC5Qb6Jl0ZqxDI2bu42e8vfiywA)

Тем же способом замените все вхождения слова **МаркетПро** на ваш **appName** из `capacitor.config.json`.

Дальше действия расходятся по платформам: [Android](/s/marketpro/doc/android-uTSSYwHyYU) и [iOS](/s/marketpro/doc/ios-RseBs1EuR1).

---

**Documents**

- [Установка решения](https://docs.astdesign.ru/s/marketpro/doc/ustanovka-resheniya-Z8Q6r79liU)
- [FAQ перед покупкой](https://docs.astdesign.ru/s/marketpro/doc/faq-pered-pokupkoj-HPgKP7mWDT)
- [Общая настройка](https://docs.astdesign.ru/s/marketpro/doc/obshaya-nastrojka-Io6HZQaGXf)
- [Шаблон](https://docs.astdesign.ru/s/marketpro/doc/shablon-ylLAFZV3o8)
- [Главная страница](https://docs.astdesign.ru/s/marketpro/doc/glavnaya-stranica-7PwYozaVVo)
- [Магазины (склады)](https://docs.astdesign.ru/s/marketpro/doc/magaziny-sklady-7rEEZJrA45)
- [Каталог](https://docs.astdesign.ru/s/marketpro/doc/katalog-FpnYzZr900)
- [Поиск](https://docs.astdesign.ru/s/marketpro/doc/poisk-xsDdFVh5h0)
- [Текстовые страницы](https://docs.astdesign.ru/s/marketpro/doc/tekstovye-stranicy-jVtNXZv3T5)
- [Реклама и маркетинг](https://docs.astdesign.ru/s/marketpro/doc/reklama-i-marketing-iZkaCoxr5b)
- [Региональность](https://docs.astdesign.ru/s/marketpro/doc/regionalnost-bCuM9AOBNO)
- [Корзина](https://docs.astdesign.ru/s/marketpro/doc/korzina-Mh27pZA7v9)
- [Оформление заказа](https://docs.astdesign.ru/s/marketpro/doc/oformlenie-zakaza-VyvQjOQxZo)
- [Авторизация](https://docs.astdesign.ru/s/marketpro/doc/avtorizaciya-5HwEb1oDJG)
- [SEO и аналитика](https://docs.astdesign.ru/s/marketpro/doc/seo-i-analitika-d1Hw6c4YAM)
- [Уведомления](https://docs.astdesign.ru/s/marketpro/doc/uvedomleniya-SKDyjYg14J)
- [Мобильное приложение](https://docs.astdesign.ru/s/marketpro/doc/mobilnoe-prilozhenie-F5E0hT7TnN)
- [Обновление решения](https://docs.astdesign.ru/s/marketpro/doc/obnovlenie-resheniya-RRRgtxV5uH)
- [Для разработчика](https://docs.astdesign.ru/s/marketpro/doc/dlya-razrabotchika-WJePeJCmpy)
- [Интеграции](https://docs.astdesign.ru/s/marketpro/doc/integracii-D3DqjYOZYm)
- [Что делать, если что-то не работает](https://docs.astdesign.ru/s/marketpro/doc/chto-delat-esli-chto-to-ne-rabotaet-Q8L8sTVJF8)