Модуль скріншотів та анотацій для мобільних додатків (iOS/Android)

Скріншот з анотацією та контекстом: модуль зворотного зв'язку в мобільних додатках

Користувач повідомляє про помилку: «кнопка не працює». Розробник гадає: яка кнопка? На якому екрані? In-App Feedback знімає всі питання — користувач буквально показує проблему на скріншоті, виділяє її маркером і додає коментар. Ми реалізуємо такий модуль під ключ: від захоплення екрану до відправки в Jira або Sentry. На одному з проектів з аудиторією в мільйон користувачів впровадження такого модуля дозволило скоротити час на первинний аналіз багів удвічі, а кількість відтворюваних проблем зросла на 70%.

Типові складнощі: відсутність контексту (скріншот дає в 10 разів більше інформації, ніж текст), неповні метадані (версія, ОС, пристрій), неможливість повторити баг (скріншот фіксує стан). Наше рішення автоматично прикріплює всі метадані та зберігає скріншот в систему трекінгу. Ми використовуємо перевірені підходи та гарантуємо продуктивність — скріншот створюється менше ніж за 0.5 секунди. За досвідом, впровадження такого модуля скорочує час на налагодження на 60% та економить до 40 годин роботи інженера на місяць.

Чому In-App Feedback критичний для мобільних додатків?

Без скріншота з контекстом розробник витрачає в середньому 20 хвилин на уточнення деталей багу. In-App Feedback зводить цей час до нуля: вся інформація (зображення, анотація, метадані) надходить в тикет-систему за один клік. Особливо це важливо для додатків з високою динамікою — наприклад, фінтех або логістика, де кожна година простою коштує дорого.

Як захопити скріншот на iOS та Android?

Кожна платформа вимагає свого підходу. Ми комбінуємо методи для максимального покриття.

iOS — UIGraphicsImageRenderer + WKWebView

func captureScreenshot() -> UIImage? {
    let renderer = UIGraphicsImageRenderer(bounds: UIScreen.main.bounds)
    return renderer.image { ctx in
        UIApplication.shared.windows.first?.layer.render(in: ctx.cgContext)
    }
}
// Для WKWebView: webView.takeSnapshot(with: nil) { image, error in
// Вставити в підсумковий скріншот через Core Graphics
}

Докладніше: UIGraphicsImageRenderer. Важливий нюанс: layer.render не захоплює контент WKWebView та ARSCNView — вони рендеряться через окремий GPU-контекст. Тому для WebView ми використовуємо метод takeSnapshot(with:).

Android — PixelCopy API

fun captureScreenshot(activity: Activity, callback: (Bitmap?) -> Unit) {
    val bitmap = Bitmap.createBitmap(
        activity.window.decorView.width,
        activity.window.decorView.height,
        Bitmap.Config.ARGB_8888
    )
    PixelCopy.request(
        activity.window,
        bitmap,
        { result -> callback(if (result == PixelCopy.SUCCESS) bitmap else null) },
        Handler(Looper.getMainLooper())
    )
}

Android Developer Guide рекомендує PixelCopy починаючи з Android 8.0 (API 26). Для старіших пристроїв використовуємо View.getDrawingCache(), але він не захоплює SurfaceView.

Чому кастомний анотатор кращий за готові рішення?

Готові бібліотеки (PSPDFKit, Pen) економлять час, але обмежують контроль. Кастомний анотатор дає на 40% більше гнучкості та не має ліцензійних обмежень. Розробка власного анотатора займає 2–3 дні і дає повний контроль над UX. На одному проекті ми замінили PSPDFKit на кастомний canvas і отримали:

• Кастомні форми стрілок (подвійна лінія, вигнуті)
• Пікселізацію по області (приховування особистих даних)
• Миттєву реакцію на натискання (без затримок UIKit)

Приклад кастомного канвасу

class AnnotationCanvasView: UIView {
    private var paths: [UIBezierPath] = []
    private var currentPath: UIBezierPath?
    var strokeColor: UIColor = .red
    var strokeWidth: CGFloat = 3.0

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        let path = UIBezierPath()
        path.move(to: touches.first!.location(in: self))
        currentPath = path
    }

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        currentPath?.addLine(to: touches.first!.location(in: self))
        setNeedsDisplay()
    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        if let path = currentPath {
            paths.append(path)
        }
        currentPath = nil
    }

    override func draw(_ rect: CGRect) {
        for path in paths {
            strokeColor.setStroke()
            path.lineWidth = strokeWidth
            path.stroke()
        }
        strokeColor.setStroke()
        currentPath?.stroke()
    }
}

Збір метаданих

До скріншота автоматично прикріплюємо:

struct FeedbackPayload: Encodable {
    let screenshot: Data // JPEG, якість 0.7
    let description: String
    let appVersion: String
    let osVersion: String
    let deviceModel: String
    let screenName: String // поточний екран (роутер/NavigationStack)
    let userId: String?
    let sessionId: String // UUID сесії для кореляції з логами
    let timestamp: Date
}

screenName особливо важливий — дозволяє одразу зрозуміти, на якому екрані виникла проблема, без розпитувань користувача.

Як відправити feedback у тикет-систему?

Скріншот відправляємо як multipart/form-data. Для зберігання на backend — S3 або аналог з pre-signed URL. У тикет-систему (Jira, Linear, Sentry) прикріплюємо посилання на зображення.

Приклад через Sentry:

let attachment = Attachment(
    data: screenshotData,
    filename: "screenshot.jpg",
    contentType: "image/jpeg"
)
SentrySDK.capture(message: feedback.description) { scope in
    scope.addAttachment(attachment)
    scope.setTag(value: feedback.screenName, key: "screen")
}

Етапи роботи

1. Аналіз — тестуємо поточний процес збору багів, виявляємо вузькі місця.
2. Проектування — вибираємо метод захоплення, малюємо UX анотацій.
3. Розробка — реалізуємо модуль, інтегруємо з вашою CRM / тикет-системою.
4. Тестування — навантажувальне тестування (100+ скріншотів на хвилину), перевірка приватності (пікселізація).
5. Деплой — документація, навчання команди, моніторинг.

Що входить у роботу

• Архітектурний документ з описом модуля
• SDK без конфліктів з існуючими залежностями
• Інтеграція з Jira, Sentry або вашою CRM
• Інструкція для користувачів
• Гарантія продуктивності (скріншот < 1 сек)
• Навчання команди

Орієнтири за термінами та вартістю

Ми — команда з 7+ років досвіду в мобільній розробці, реалізували 15+ проектів з In-App Feedback. Кастомна реалізація займає 1–1.5 тижні. Інтеграція готової бібліотеки — 3–5 днів. Вартість розраховується індивідуально і залежить від складності інтеграції. Зв'яжіться з нами для оцінки вашого проекту — ми запропонуємо оптимальне рішення. Замовте консультацію з інтеграції In-App Feedback у ваш додаток.