# Программистам

# Интеграция с Push-уведомлениями

После запуска приложения, UserID из OneSignal будет автоматически передаваться на страницы сайта при загрузке через COOKIE. Вы можете перехватить этот UserID на стороне сайта и связать его с текущим пользователем.

Используя этот UserID, вы можете отправлять персональные push-уведомления вашим клиентам.

**Пример получения UserID на PHP:**

```bash
if(!isset($_COOKIE['ONESIGNAL_USER_ID'])) {
    $userID = $_COOKIE['ONESIGNAL_USER_ID'];
}

```

<p class="callout info">Стоит учесть что ONESIGNAL\_USER\_ID может появиться не сразу а например через 10-30 секунд после начала использования приложения при самом первом запуске.</p>

[https://documentation.onesignal.com/reference/push-notification](https://documentation.onesignal.com/reference/push-notification)

```php
$fields = array(
        'app_id' => 'ВАШ app_id',
        'include_player_ids' => ["ONESIGNAL_USER_ID"] 
        'contents' =>  ["en" => "My Push"],
        'headings' => ["en" => "Hi!"],
        'data' => [
					'url'=>"https://site.com/my/link"
					],
    );

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, "https://api.onesignal.com/notifications");
    curl_setopt($ch, CURLOPT_HTTPHEADER, array(
        'Content-Type: application/json; charset=utf-8',
        'Authorization: Basic XXXXXXXXX',
    ));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HEADER, false);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_exec($ch);
    curl_close($ch);

```


**Пример получения UserID в JS:**

```javascript
if(window.userId){
  console.log("USER ID", window.userId);
}
```

Аналогично userId может появиться не сразу, поэтому можно использовать функцию попытки получения userId, пока он не станет доступным:

```javascript
function getUserId(callback){

let tryGetUserIdInterval = setInterval(()=>{

  if(window.userId){
  callback(window.userId);
  clearInterval(tryGetUserIdInterval);
  }

},3000);
}

getUserId((userId)=>{

    console.log("userId", userId);
})
```

### Навигация через Push-уведомления

Если вы хотите, чтобы при нажатии на push-уведомление пользователь не только перешел в приложение, но и был направлен на одну из страниц сайта, передайте параметр url в параметре data запроса.

<p class="callout info">Если в приложении только 1 язык для уведомлений, например только русский, то используйте ключ en, так как он является ключом по умолчанию.</p>

**Пример на PHP:**

**⚠️ Следует учесть, что если ссылка будет не с вашего сайта, то она откроется в браузере.**

#### Отправка через теги

Вы можете отправлять push-уведомления не только по <span class="s1">UserID</span>, но и по тегу, который вы установите для пользователя. Это удобно, если вы хотите связать пользователя с его уникальным идентификатором, например <span class="s1">email</span> или <span class="s1">phone</span>.

Например, при авторизации на сайте вы можете установить тег <span class="s1">email</span> или <span class="s1">phone</span> для пользователя, а затем использовать его для отправки push-сообщений через OneSignal API.

**Пример отправки уведомления по тегу (на PHP с использованием curl):**

**[https://documentation.onesignal.com/reference/push-notification](https://documentation.onesignal.com/reference/push-notification)**

```php
$fields = [
    'app_id' => 'ВАШ_APP_ID',
    'filters' => [
        ["field" => "tag", "key" => "email", "relation" => "=", "value" => "user@example.com"]
    ],
    'contents' =>  ["en" => "My Push"],
        'headings' => ["en" => "Hi!"],
];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://api.onesignal.com/notifications");
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Content-Type: application/json',
    'Authorization: Basic ВАШ_REST_API_KEY'
]);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));

$response = curl_exec($ch);
curl_close($ch);

echo $response;
```

# Скрытие блоков сайта в приложении (Через стили)

При конвертации вашего сайта в мобильное приложение с помощью сервиса Converzilla, в содержимое сайта автоматически добавляются определенные стили и классы. Эти изменения предназначены для оптимизации отображения вашего сайта в мобильном приложении.

#### Автоматическое добавление стилей

При конвертации вашего сайта в мобильное приложение с помощью Converzilla, в содержимое сайта добавляются следующие CSS классы:

1\. **.converzilla-hide**: Этот класс скрывает элементы, устанавливая их свойство display в значение `none`:

```css
.converzilla-hide {
       display: none !important;
 }
```

2\. **.converzilla-show**: Этот класс отображает элементы, устанавливая их свойство display в значение `block`:

```css
.converzilla-show {
       display: block !important;
   }
```

Кроме того, в тег `&lt;body&gt;` добавляется класс `converzilla`, который позволяет вам вносить изменения в стили сайта, чтобы он отображался по-другому в мобильном приложении.

#### Пример использования

Для изменения стилей элементов вашего сайта, когда он отображается в мобильном приложении, вы можете использовать класс `converzilla`, добавленный к тегу `&lt;body&gt;`. Например:

```css
body.converzilla .your-element {
    background-color: #f0f0f0;
    color: #333;
}
```

Этот пример изменит фон и цвет текста элемента с классом `your-element` только при отображении в мобильном приложении.

#### Тестирование

Чтобы протестировать изменения в отображении вашего сайта при конвертации его в мобильное приложение с помощью Converzilla, вы можете использовать следующий JavaScript код. Этот код добавит необходимые стили и класс <span class="s1">converzilla</span> к тегу <span class="s1">&lt;body&gt;</span> на вашем сайте.

```javascript
(function() {
    // Функция для добавления стилей
    function addConverzillaStyles() {
        var styleElement = document.createElement('style');
        styleElement.type = 'text/css';
        styleElement.innerHTML = `
            .converzilla-hide {
                display: none !important;
            }
            .converzilla-show {
                display: block !important;
            }
        `;
        document.head.appendChild(styleElement);
    }

    // Функция для добавления класса к body
    function addConverzillaClass() {
        document.body.classList.add('converzilla');
    }

    // Проверка, если документ уже загружен
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        addConverzillaStyles();
        addConverzillaClass();
    } else {
        // Если документ еще не загружен, добавляем слушатель события DOMContentLoaded
        document.addEventListener('DOMContentLoaded', function() {
            addConverzillaStyles();
            addConverzillaClass();
        });
    }
})();
```

**Инструкции по использованию**

• Откройте ваш сайт в браузере.  
• Откройте инструменты разработчика (обычно это <span class="s2">F12</span> или <span class="s2">Ctrl+Shift+I</span>).  
• Перейдите на вкладку “Консоль”.  
• Вставьте код выше в консоль и нажмите <span class="s2">Enter</span>.

##### Полезные советы

\- **Используйте специфичность**: Убедитесь, что ваши стили достаточно специфичны, чтобы переопределить существующие стили на сайте.  
\- **Тестируйте изменения**: Всегда проверяйте, как ваш сайт выглядит в мобильном приложении, чтобы убедиться, что все стили применяются корректно.

Конвертация сайта в мобильное приложение с помощью Converzilla предоставляет мощные инструменты для управления отображением вашего сайта. Используя предоставленные классы и стили, вы можете легко адаптировать внешний вид вашего сайта для оптимального взаимодействия пользователей в мобильном приложении.

# Настройка звука для push-уведомлений

#### Подготовка файлов

<div id="bkmrk-%D0%9F%D0%BE%D0%B4%D0%B3%D0%BE%D1%82%D0%BE%D0%B2%D1%8C%D1%82%D0%B5-%D0%BD%D0%B0%D0%B1%D0%BE%D1%80-%D0%B7%D0%B2">Подготовьте набор звуковых файлов которые вы будете использовать для push-уведомлений.</div><div id="bkmrk-"></div><div id="bkmrk-%D0%94%D0%BB%D1%8F-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F-%D0%BA%D0%B0">Для использования кастомных звуков в уведомлениях на Android существуют определённые требования.   
Вот основные из них:</div><div id="bkmrk--1"></div><div id="bkmrk-%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC%D1%8B%D0%B5-%D1%84%D0%BE%D1%80%D0%BC%D0%B0">**Поддерживаемые форматы**: для Android - `mp3`, для iOS - `wav`.</div><div id="bkmrk-%D0%98%D0%BC%D1%8F-%D1%84%D0%B0%D0%B9%D0%BB%D0%B0%3A-%D0%B4%D0%BE%D0%BB%D0%B6%D0%BD%D0%BE-%D0%B1%D1%8B">**Имя файла:** должно быть написано маленькими буквами и без пробелов. Например, файл должен называться как `audio_1.mp3` или `notification_sound.wav`.  
</div><div id="bkmrk-%D0%94%D0%BB%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D1%81%D1%82%D1%8C%3A-%D0%9D%D0%B5%D1%82-%D1%81%D1%82">**Длительность:** Нет строгих ограничений на длительность звукового файла, но рекомендуется, чтобы файл был коротким (например, 2-5 секунд), так как уведомления обычно не требуют долгих звуков.</div><div id="bkmrk-%D0%9A%D0%B0%D0%BD%D0%B0%D0%BB%D1%8B%3A-%D0%A0%D0%B5%D0%BA%D0%BE%D0%BC%D0%B5%D0%BD%D0%B4%D1%83%D0%B5%D1%82%D1%81">**Каналы:** Рекомендуется использовать моно</div><div id="bkmrk-%D0%93%D1%80%D0%BE%D0%BC%D0%BA%D0%BE%D1%81%D1%82%D1%8C%3A-%D0%97%D0%B2%D1%83%D0%BA%D0%BE%D0%B2%D1%8B%D0%B5-">**Громкость:** Звуковые файлы не должны быть слишком громкими. </div><div id="bkmrk--2"></div><div id="bkmrk-%D0%9F%D0%B5%D1%80%D0%B5%D0%B4%D0%B0%D0%B9%D1%82%D0%B5-%D0%B0%D1%80%D1%85%D0%B8%D0%B2-%D1%81-%D0%B0%D1%83">Передайте архив с аудио-файлами для настройки и создании новых сборок мобильного приложения.</div><div id="bkmrk--3"></div><p class="callout danger">Для обновления (добавления) или замены звуковых файлов требуется полное обновление приложения в магазинах приложений.</p>

#### Настройка в OneSignal

#### Android

В Android 8+ были введены категории уведомлений, которые необходимо настроить для кастомизации звуков уведомлений. OneSignal будет использовать звук, установленный в канале уведомлений для всех версий Android.

В личном кабинете откройте приложения для которого выполняете настройку.

<table border="1" id="bkmrk-%D0%9D%D0%B5-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D1%8F%D0%B9%D1%82%D0%B5-%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%80" style="border-collapse: collapse; width: 100%; height: 1516px;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr style="height: 285px;"><td style="height: 285px;">[![Снимок экрана 2024-09-17 в 17.34.16.png](https://support.converzilla.io/uploads/images/gallery/2024-09/scaled-1680-/7sLsnimok-ekrana-2024-09-17-v-17-34-16.png)](https://support.converzilla.io/uploads/images/gallery/2024-09/7sLsnimok-ekrana-2024-09-17-v-17-34-16.png)</td><td style="height: 285px;">[![Снимок экрана 2024-09-17 в 17.34.48.png](https://support.converzilla.io/uploads/images/gallery/2024-09/scaled-1680-/snimok-ekrana-2024-09-17-v-17-34-48.png)](https://support.converzilla.io/uploads/images/gallery/2024-09/snimok-ekrana-2024-09-17-v-17-34-48.png)</td></tr><tr style="height: 250px;"><td style="height: 250px;">[![Снимок экрана 2024-09-17 в 17.35.19.png](https://support.converzilla.io/uploads/images/gallery/2024-09/scaled-1680-/snimok-ekrana-2024-09-17-v-17-35-19.png)](https://support.converzilla.io/uploads/images/gallery/2024-09/snimok-ekrana-2024-09-17-v-17-35-19.png)</td><td style="height: 250px;">[![Снимок экрана 2024-09-17 в 17.35.35.png](https://support.converzilla.io/uploads/images/gallery/2024-09/scaled-1680-/snimok-ekrana-2024-09-17-v-17-35-35.png)](https://support.converzilla.io/uploads/images/gallery/2024-09/snimok-ekrana-2024-09-17-v-17-35-35.png)</td></tr><tr style="height: 466px;"><td style="height: 466px;">[![Снимок экрана 2024-09-17 в 17.36.44.png](https://support.converzilla.io/uploads/images/gallery/2024-09/scaled-1680-/snimok-ekrana-2024-09-17-v-17-36-44.png)](https://support.converzilla.io/uploads/images/gallery/2024-09/snimok-ekrana-2024-09-17-v-17-36-44.png)</td><td style="height: 466px;">[![Снимок экрана 2024-09-17 в 17.37.30.png](https://support.converzilla.io/uploads/images/gallery/2024-09/scaled-1680-/snimok-ekrana-2024-09-17-v-17-37-30.png)](https://support.converzilla.io/uploads/images/gallery/2024-09/snimok-ekrana-2024-09-17-v-17-37-30.png)  
</td></tr><tr><td>Не добавляйте расширение файла при указании звукового ресурса. Например, `audio\_1`, а не audio\_1.mp3</td><td>Нажмите на созданный канал, чтобы увидеть уникальный ID канала.</td></tr></tbody></table>

При отправке push-сообщений используйте свойство `android\_channel\_id` API для создания уведомления. Звук, установленный в категории, будет работать для всех версий Android.

#### iOS

Используйте свойство ios\_sound в API Create Notification, **добавляйте расширение** файла при указании звукового ресурса, например audio\_1.wav

# Интеграция с Converzilla

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

#### Добавьте стили для управления отображением элементов

Эти стили позволяют платформе Converzilla показывать или скрывать нужные элементы сайта из приложения:

```
/* Скрывает элемент */
.converzilla-hide {
    display: none !important;
}

/* Показывает элемент */
.converzilla-show {
    display: block !important;
}
```

Добавьте эти стили в основной CSS сайта.

#### Добавьте вызов передачи пользовательского идентификатора для пуш-уведомлений (OneSignal) 

После загрузки страницы нужно передать в приложение уникальный идентификатор пользователя (<span class="s2">**login**</span>, <span class="s2">**phone**</span>, либо другой ключ).

Пример на чистом JavaScript:

```
<script>
document.addEventListener("DOMContentLoaded", function () {
    try {
        var login = getCurrentUserLogin(); // Получите логин пользователя с вашего сайта любым доступным способом
        if (login && typeof window.oneSignalSendTag === 'function') {
            window.oneSignalSendTag('login', login);
        }
    } catch (e) {
        console.error('Ошибка при отправке oneSignalSendTag:', e);
    }
});

// Эта функция — пример, замените её на свой код получения логина/номера телефона
function getCurrentUserLogin() {
    // Например:
    // return document.querySelector('input[name="login"]').value;
    return 'example_login_123';
}
</script>
```

**🔑 Пояснения:**

- Метод <span class="s1">window.oneSignalSendTag(key, value)</span> отправляет уникальный идентификатор пользователя в приложение Converzilla для настройки пуш-уведомлений.
- Ключ (<span class="s1">login</span>, <span class="s1">phone</span>, и др.) и значение определяются разработчиком сайта.
- Вызов должен быть после загрузки страницы и (желательно) после того, как пользователь залогинился.

**⚙️ Где вызывать?**

Можно вызвать:

- На странице входа (<span class="s1">login</span>)
- На странице профиля (если там есть логин/номер телефона)
- На любой другой странице, где доступен уникальный пользовательский идентификатор.

# Установка и настройка киоск-приложения через USB и ADB

**Что понадобится**

- 💻 Компьютер с <span class="s1">**Windows или Mac**</span>
- 🔌 USB-кабель
- <span class="s1">📱 Android-планшет (желательно </span>**новый или сброшенный до заводских настроек**<span class="s1">)</span>
- 📦 Файл <span class="s1">.apk</span>,
- 🔢 ID приложения вида ru.site.app **(обязательно в командах ниже замените на свой, в примере будет использован ru.site.app)**

### 1. Подготовка планшета

**Если устройство не сброшено — сделайте сброс:**

> ⚠️ <span class="s1">**Важно:**</span> установить приложение в киоск-режиме можно <span class="s1">**только на “чистое” устройство**</span>.

**Как сбросить:**

1. <span class="s1">Откройте </span>**Настройки → Система → Сброс / Восстановление → Сброс до заводских настроек**
2. Подтвердите сброс. Планшет перезагрузится.

### 2. Включите «режим разработчика» и отладку по USB

1. <span class="s1">Откройте </span>**Настройки → О телефоне / Об устройстве**
2. Найдите пункт <span class="s1">**Номер сборки**</span> (Build number)
3. Нажмите по нему <span class="s1">**7 раз**</span>, пока не появится сообщение: *«Вы стали разработчиком»*
4. <span class="s1">Назад → Зайдите в </span>**Система → Для разработчиков (Developer options)**
5. <span class="s1">Включите </span>**Отладку по USB (USB Debugging)**

### 3. Установите ADB (на компьютере) 

#### ▶️ Вариант A: Для Windows 

1. <span class="s1">Скачайте </span>**ADB Platform Tools**<span class="s1">:</span>
    
    
    - [https://developer.android.com/tools/releases/platform-tools](https://developer.android.com/tools/releases/platform-tools)
2. Распакуйте архив в удобную папку, например: <span class="s1">C:\\adb</span>

#### ▶️ Вариант B: Для macOS 

1. <span class="s1">Откройте </span>**Терминал**
2. Установите ADB через <span class="s1">Homebrew</span> (если он установлен):

```
brew install android-platform-tools
```

Или скачайте вручную:

[https://developer.android.com/tools/releases/platform-tools](https://developer.android.com/tools/releases/platform-tools)

### 4. Подключите планшет к компьютеру через USB

- Разрешите отладку по USB на планшете, если появится запрос.

### 5. Установите приложение 

Перетащите <span class="s2">.apk</span> в папку с ADB. Например <span class="s1">C:\\adb</span>

**<span class="s1">Затем в консоле:</span>**

▶️ Windows:

```
cd C:\adb
adb install -r app-release.apk
```

▶️ Mac:

```
cd ~/Downloads/platform-tools
./adb install -r app-release.apk
```

✅ Должно появиться: <span class="s1">Success</span>

### 6. Назначьте приложение как Device Owner (админ устройства)

⚠️ Делается <span class="s3">**один раз**</span>, и только на сброшенном устройстве.

```
adb shell dpm set-device-owner ru.site.app/.MyDeviceAdminReceiver
```

<p class="callout danger">**<span class="s1">ru.site.app замените на ваш ID приложения!</span>**</p>

<span class="s1">✅ Если всё ок, появится сообщение: </span>Success: Device owner set to package ru.lolapizza.kso

### 7. Перезагрузите планшет 

```
adb reboot
```

После включения:

- <span class="s1">Приложение </span>**автоматически запустится**
- Нельзя выйти из него
- Все кнопки и меню будут заблокированы
- <span class="s1">Работает </span>**Kiosk Mode**

✅ ГОТОВО!

### Как выйти из режима киоска (для администратора)

Только при необходимости, с компьютера:

```
adb shell am stop-user 0
adb shell dpm remove-active-admin ru.site.app/.MyDeviceAdminReceiver
```

<p class="callout danger">**<span class="s1">ru.site.app замените на ваш ID приложения!</span>**</p>

После этого можно удалить приложение вручную.

### Как обновить приложение

Если планшет подключён к компьютеру, и у вас есть <span class="s2">.apk</span> новой версии:

1. Подключите планшет к компьютеру по USB
2. Убедитесь, что включена отладка по USB
3. Поместите <span class="s1">app-release.apk</span> в ту же папку, где <span class="s1">adb.exe</span>
4. Откройте терминал / командную строку
5. Выполните:

```
adb install -r app-release.apk
```